Beta 2 (#28)

* fix(design): ui-link word break

* dev(e2e): add new_tab to menu items

* fix(e2e): production pnpm version and hex doc

* fix(git): remove integration_test/deps

* fix(deps): Revert to Gettext non optional

* core(deps): up version

* core(hooks): Allow lazy hooks and partial imports

* add(doc): Guide for Tableau

* dev(e2e): fix hero layout

* core(deps): mix docs in docs

* dev(docs): update doc

* dev(integration_test): Remove mysql and mssql test

* new(component): File Upload and File Upload Live

* dev(floating-panel): fix styling and demo

* dev(form): improve native input and switch erros

* dev(e2e): Fix Controller Form and home

* a11y(file-upload): no nested triggers

Author: karim-semmoud

.gitignore

@@ -41,8 +41,8 @@ corex-*.tar
 /installer/tmp/
 /installer/cover/
 
-/integration_test/_build
-/integration_test/deps
+/integration_test/_build/
+/integration_test/deps/
 .dexter.db*
 
 /.claude/

assets/components/file-upload.ts

@@ -0,0 +1,279 @@
+import { connect, machine, type Props, type Api, type ItemType } from "@zag-js/file-upload";
+import { VanillaMachine } from "@zag-js/vanilla";
+import { Component } from "../lib/core";
+
+const ACCEPTED: ItemType = "accepted";
+
+function toChar(code: number): string {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97));
+}
+
+function toName(code: number): string {
+  let name = "";
+  let x: number;
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toChar(x % 52) + name;
+  return toChar(x % 52) + name;
+}
+
+function toPhash(h: number, x: string): number {
+  let i = x.length;
+  while (i) h = (h * 33) ^ x.charCodeAt(--i);
+  return h;
+}
+
+function zagFileId(value: string): string {
+  return toName(toPhash(5381, value) >>> 0);
+}
+
+function fileKeyFor(file: File): string {
+  return zagFileId(`${file.name}-${file.size}`);
+}
+
+export class FileUpload extends Component<Props, Api> {
+  private previewCleanup = new Map<HTMLElement, VoidFunction>();
+  private sentinelSnapshot = "";
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initMachine(props: Props): VanillaMachine<any> {
+    return new VanillaMachine(machine, props);
+  }
+
+  initApi(): Api {
+    return this.zagConnect(connect);
+  }
+
+  cleanupPreviews(): void {
+    for (const cleanup of this.previewCleanup.values()) cleanup();
+    this.previewCleanup.clear();
+  }
+
+  render(): void {
+    const rootEl =
+      this.el.querySelector<HTMLElement>('[data-scope="file-upload"][data-part="root"]') ?? this.el;
+    this.spreadProps(rootEl, this.api.getRootProps());
+
+    const labelEl = this.el.querySelector<HTMLElement>(
+      '[data-scope="file-upload"][data-part="label"]'
+    );
+    if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+
+    const dropzoneEl = this.el.querySelector<HTMLElement>(
+      '[data-scope="file-upload"][data-part="dropzone"]'
+    );
+    if (dropzoneEl) this.spreadProps(dropzoneEl, this.api.getDropzoneProps());
+
+    const triggerEl = this.el.querySelector<HTMLElement>(
+      '[data-scope="file-upload"][data-part="trigger"]'
+    );
+    if (triggerEl) this.spreadProps(triggerEl, this.api.getTriggerProps());
+
+    const hiddenInputEl =
+      this.el.querySelector<HTMLElement>('[data-scope="file-upload"][data-part="hidden-input"]') ??
+      rootEl.querySelector<HTMLElement>('input[type="file"]');
+    if (hiddenInputEl) this.spreadProps(hiddenInputEl, this.api.getHiddenInputProps());
+
+    const acceptedGroup = this.el.querySelector<HTMLElement>(
+      'ul[data-scope="file-upload"][data-part="item-group"][data-file-type="accepted"]'
+    );
+    if (acceptedGroup) {
+      this.spreadProps(acceptedGroup, this.api.getItemGroupProps({ type: ACCEPTED }));
+      this.syncAcceptedItems(acceptedGroup);
+    }
+
+    const itemEls = this.el.querySelectorAll<HTMLElement>(
+      '[data-scope="file-upload"][data-part="item"]'
+    );
+    for (const itemEl of Array.from(itemEls)) {
+      const file = this.getAcceptedFileForElement(itemEl);
+      if (!file) continue;
+
+      this.spreadProps(itemEl, this.api.getItemProps({ file, type: ACCEPTED }));
+
+      const itemNameEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="file-upload"][data-part="item-name"]'
+      );
+      if (itemNameEl)
+        this.spreadProps(itemNameEl, this.api.getItemNameProps({ file, type: ACCEPTED }));
+
+      const itemPreviewEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="file-upload"][data-part="item-preview"]'
+      );
+      if (itemPreviewEl)
+        this.spreadProps(itemPreviewEl, this.api.getItemPreviewProps({ file, type: ACCEPTED }));
+
+      const itemPreviewImageEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="file-upload"][data-part="item-preview-image"]'
+      );
+      if (itemPreviewImageEl && file.type.startsWith("image/")) {
+        const fk = fileKeyFor(file);
+        const needsInit =
+          itemPreviewImageEl.dataset.corexPreviewKey !== fk ||
+          !itemPreviewImageEl.getAttribute("src");
+        if (needsInit) {
+          const prev = this.previewCleanup.get(itemPreviewImageEl);
+          prev?.();
+          itemPreviewImageEl.removeAttribute("src");
+          const cleanup = this.api.createFileUrl(file, (url) => {
+            this.spreadProps(
+              itemPreviewImageEl,
+              this.api.getItemPreviewImageProps({
+                file,
+                type: ACCEPTED,
+                url,
+              })
+            );
+          });
+          this.previewCleanup.set(itemPreviewImageEl, cleanup);
+          itemPreviewImageEl.dataset.corexPreviewKey = fk;
+        } else {
+          const url = itemPreviewImageEl.getAttribute("src") ?? "";
+          if (url) {
+            this.spreadProps(
+              itemPreviewImageEl,
+              this.api.getItemPreviewImageProps({
+                file,
+                type: ACCEPTED,
+                url,
+              })
+            );
+          }
+        }
+      }
+
+      const itemSizeTextEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="file-upload"][data-part="item-size-text"]'
+      );
+      if (itemSizeTextEl) {
+        this.spreadProps(itemSizeTextEl, this.api.getItemSizeTextProps({ file, type: ACCEPTED }));
+        itemSizeTextEl.textContent = this.api.getFileSize(file);
+      }
+
+      const itemDeleteTriggerEl = itemEl.querySelector<HTMLElement>(
+        '[data-scope="file-upload"][data-part="item-delete-trigger"]'
+      );
+      if (itemDeleteTriggerEl) {
+        this.spreadProps(
+          itemDeleteTriggerEl,
+          this.api.getItemDeleteTriggerProps({ file, type: ACCEPTED })
+        );
+      }
+    }
+
+    this.touchSentinel();
+  }
+
+  private touchSentinel(): void {
+    const sentinel = this.el.querySelector<HTMLInputElement>('[data-part="hidden-input-sentinel"]');
+    if (!sentinel) return;
+    const snap = this.api.acceptedFiles.map((f) => fileKeyFor(f)).join(",");
+    if (snap === this.sentinelSnapshot) return;
+    this.sentinelSnapshot = snap;
+    sentinel.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+
+  private syncAcceptedItems(ul: HTMLElement): void {
+    this.syncItemList(ul, this.api.acceptedFiles);
+  }
+
+  private syncItemList(ul: HTMLElement, files: File[]): void {
+    const desiredKeys = files.map((f) => fileKeyFor(f));
+    const desiredSet = new Set(desiredKeys);
+
+    const byKey = new Map<string, HTMLLIElement>();
+    ul.querySelectorAll<HTMLLIElement>("li[data-corex-file-item]").forEach((li) => {
+      const k = li.dataset.fileKey;
+      if (k) byKey.set(k, li);
+    });
+
+    for (const k of [...byKey.keys()]) {
+      if (!desiredSet.has(k)) {
+        const li = byKey.get(k);
+        if (!li) continue;
+        li.querySelectorAll<HTMLElement>('img[data-part="item-preview-image"]').forEach((img) => {
+          const c = this.previewCleanup.get(img);
+          if (c) {
+            c();
+            this.previewCleanup.delete(img);
+          }
+        });
+        li.remove();
+        byKey.delete(k);
+      }
+    }
+
+    for (const file of files) {
+      const k = fileKeyFor(file);
+      let li = byKey.get(k);
+      if (!li) {
+        li = this.buildItemLi(file, k);
+        byKey.set(k, li);
+      }
+      ul.appendChild(li);
+    }
+  }
+
+  private buildItemLi(file: File, key: string): HTMLLIElement {
+    const doc = this.doc;
+    const li = doc.createElement("li");
+    li.setAttribute("data-scope", "file-upload");
+    li.setAttribute("data-part", "item");
+    li.setAttribute("data-corex-file-item", "");
+    li.dataset.fileKey = key;
+    li.dataset.fileType = ACCEPTED;
+
+    const lead = doc.createElement("div");
+    lead.setAttribute("data-scope", "file-upload");
+    lead.setAttribute("data-part", "item-lead");
+    if (file.type.startsWith("image/")) {
+      const prev = doc.createElement("div");
+      prev.setAttribute("data-scope", "file-upload");
+      prev.setAttribute("data-part", "item-preview");
+      const img = doc.createElement("img");
+      img.setAttribute("data-scope", "file-upload");
+      img.setAttribute("data-part", "item-preview-image");
+      prev.appendChild(img);
+      lead.appendChild(prev);
+    }
+    li.appendChild(lead);
+
+    const nameEl = doc.createElement("div");
+    nameEl.setAttribute("data-scope", "file-upload");
+    nameEl.setAttribute("data-part", "item-name");
+    nameEl.textContent = file.name;
+    li.appendChild(nameEl);
+
+    const sizeEl = doc.createElement("div");
+    sizeEl.setAttribute("data-scope", "file-upload");
+    sizeEl.setAttribute("data-part", "item-size-text");
+    li.appendChild(sizeEl);
+
+    const del = doc.createElement("button");
+    del.setAttribute("data-scope", "file-upload");
+    del.setAttribute("data-part", "item-delete-trigger");
+    del.type = "button";
+    this.fillDeleteTriggerContent(del);
+    li.appendChild(del);
+
+    return li;
+  }
+
+  private fillDeleteTriggerContent(btn: HTMLElement): void {
+    const tpl = this.el.querySelector<HTMLTemplateElement>(
+      "[data-file-upload-item-close-template]"
+    );
+    if (!tpl?.content) return;
+    btn.replaceChildren();
+    const frag = tpl.content.cloneNode(true);
+    for (const node of Array.from(frag.childNodes)) {
+      if (node.nodeType === 1) {
+        btn.appendChild(node);
+      }
+    }
+  }
+
+  private getAcceptedFileForElement(el: HTMLElement): File | undefined {
+    const k = el.dataset.fileKey;
+    if (!k) return undefined;
+    return this.api.acceptedFiles.find((f) => fileKeyFor(f) === k);
+  }
+}

assets/hooks/corex.ts

@@ -1,5 +1,3 @@
-import type { Hook } from "phoenix_live_view";
-
 export type {
   AccordionChangedDetail,
   TreeViewExpandedChangedDetail,
@@ -24,33 +22,9 @@ export {
   findDialogContent,
 } from "../lib/custom-animation";
 
-type HookModule = Record<string, Hook<object, HTMLElement> | undefined>;
+import { createLazyHook } from "./lazy-hook";
 
-function createLazyHook(importFn: () => Promise<HookModule>, exportName: string): Hook {
-  return {
-    async mounted() {
-      const mod = await importFn();
-      const real = mod[exportName];
-      (this as { _realHook?: Hook<object, HTMLElement> })._realHook = real;
-      if (real?.mounted) return real.mounted.call(this);
-    },
-    updated() {
-      (this as { _realHook?: Hook })._realHook?.updated?.call(this);
-    },
-    destroyed() {
-      (this as { _realHook?: Hook })._realHook?.destroyed?.call(this);
-    },
-    disconnected() {
-      (this as { _realHook?: Hook })._realHook?.disconnected?.call(this);
-    },
-    reconnected() {
-      (this as { _realHook?: Hook })._realHook?.reconnected?.call(this);
-    },
-    beforeUpdate() {
-      (this as { _realHook?: Hook })._realHook?.beforeUpdate?.call(this);
-    },
-  };
-}
+export type { HookModule } from "./lazy-hook";
 
 export const Hooks = {
   Accordion: createLazyHook(() => import("corex/accordion"), "Accordion"),
@@ -66,6 +40,7 @@ export const Hooks = {
   DatePicker: createLazyHook(() => import("corex/date-picker"), "DatePicker"),
   Dialog: createLazyHook(() => import("corex/dialog"), "Dialog"),
   Editable: createLazyHook(() => import("corex/editable"), "Editable"),
+  FileUpload: createLazyHook(() => import("corex/file-upload"), "FileUpload"),
   FloatingPanel: createLazyHook(() => import("corex/floating-panel"), "FloatingPanel"),
   Listbox: createLazyHook(() => import("corex/listbox"), "Listbox"),
   Marquee: createLazyHook(() => import("corex/marquee"), "Marquee"),
@@ -85,12 +60,4 @@ export const Hooks = {
   TreeView: createLazyHook(() => import("corex/tree-view"), "TreeView"),
 };
 
-export function hooks<T extends keyof typeof Hooks>(
-  componentNames: readonly T[]
-): Pick<typeof Hooks, T> {
-  return Object.fromEntries(
-    componentNames.filter((name): name is T => name in Hooks).map((name) => [name, Hooks[name]])
-  ) as Pick<typeof Hooks, T>;
-}
-
 export default Hooks;