@epoch32/visage 0.0.0-stage → 1.0.0

package/src/ui/data-table.tsx

@@ -0,0 +1,322 @@
+import { For } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import { createSignal } from "../signals";
+import { createControllableSignal } from "./utils";
+
+export type SortDirection = "asc" | "desc" | null;
+
+export interface SortState {
+  column: string;
+  direction: SortDirection;
+}
+
+export interface ColumnDef<T = any> {
+  id: string;
+  header: Child | (() => Child);
+  accessorKey?: keyof T;
+  cell?: (row: T, index: number) => Child;
+  sortable?: boolean;
+  width?: string;
+  align?: "left" | "center" | "right";
+}
+
+export interface DataTableProps<T = any> {
+  data: T[] | (() => T[]);
+  columns: ColumnDef<T>[];
+  sort?: () => SortState | undefined;
+  onSortChange?: (sort: SortState) => void;
+  filter?: () => string | undefined;
+  selection?: "none" | "single" | "multi";
+  selectedKeys?: () => string[] | undefined;
+  onSelectionChange?: (keys: string[]) => void;
+  getRowId?: (row: T, index: number) => string;
+  pageSize?: number;
+  onRowClick?: (row: T, index: number) => void;
+  emptyText?: string;
+  class?: any;
+  style?: any;
+  tableClass?: any;
+  headerClass?: any;
+  rowClass?: any;
+  cellClass?: any;
+  paginationClass?: any;
+  [key: string]: any;
+}
+
+export function DataTable<T extends Record<string, any>>(props: DataTableProps<T>): Child {
+  const [sortState, setSortState] = createControllableSignal<SortState>({
+    value: props.sort,
+    defaultValue: { column: "", direction: null },
+    onChange: props.onSortChange
+  });
+
+  const [selectedKeys, setSelectedKeys] = createControllableSignal<string[]>({
+    value: props.selectedKeys,
+    defaultValue: [],
+    onChange: props.onSelectionChange
+  });
+
+  const [currentPage, setCurrentPage] = createSignal(0, { internal: true });
+  const pageSize = props.pageSize ?? 10;
+  const selectionMode = props.selection ?? "none";
+
+  const getRowId = (row: T, index: number): string => {
+    if (props.getRowId) return props.getRowId(row, index);
+    if (row && typeof row === "object" && "id" in row) return String(row.id);
+    return String(index);
+  };
+
+  // 1. Filtered Data
+  const filteredData = () => {
+    const raw = typeof props.data === "function" ? props.data() : props.data;
+    if (!raw) return [];
+    const filterQuery = props.filter
+      ? (typeof props.filter === "function" ? props.filter() : props.filter)?.toLowerCase().trim()
+      : "";
+    if (!filterQuery) return raw;
+
+    return raw.filter((row) =>
+      Object.values(row).some((val) => String(val).toLowerCase().includes(filterQuery))
+    );
+  };
+
+  // 2. Sorted Data
+  const sortedData = () => {
+    const list = [...filteredData()];
+    const currentSort = sortState();
+    if (!currentSort.column || !currentSort.direction) return list;
+
+    return list.sort((a, b) => {
+      const aVal = a[currentSort.column];
+      const bVal = b[currentSort.column];
+      if (aVal === bVal) return 0;
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+
+      const comp = aVal < bVal ? -1 : 1;
+      return currentSort.direction === "asc" ? comp : -comp;
+    });
+  };
+
+  // 3. Paginated Data
+  const totalPages = () => Math.ceil(sortedData().length / pageSize) || 1;
+  const paginatedData = () => {
+    if (!props.pageSize) return sortedData();
+    const start = currentPage() * pageSize;
+    return sortedData().slice(start, start + pageSize);
+  };
+
+  const handleSort = (colId: string) => {
+    const current = sortState();
+    if (current.column !== colId) {
+      setSortState({ column: colId, direction: "asc" });
+    } else if (current.direction === "asc") {
+      setSortState({ column: colId, direction: "desc" });
+    } else {
+      setSortState({ column: "", direction: null });
+    }
+  };
+
+  const handleSelectRow = (key: string, e: MouseEvent) => {
+    e.stopPropagation();
+    if (selectionMode === "single") {
+      setSelectedKeys(selectedKeys().includes(key) ? [] : [key]);
+    } else if (selectionMode === "multi") {
+      const current = selectedKeys();
+      if (current.includes(key)) {
+        setSelectedKeys(current.filter((k) => k !== key));
+      } else {
+        setSelectedKeys([...current, key]);
+      }
+    }
+  };
+
+  const handleSelectAll = () => {
+    if (selectionMode !== "multi") return;
+    const allCurrentKeys = paginatedData().map((row, i) => getRowId(row, i));
+    const allSelected = allCurrentKeys.every((k) => selectedKeys().includes(k));
+
+    if (allSelected) {
+      setSelectedKeys(selectedKeys().filter((k) => !allCurrentKeys.includes(k)));
+    } else {
+      setSelectedKeys(Array.from(new Set([...selectedKeys(), ...allCurrentKeys])));
+    }
+  };
+
+  const {
+    class: className,
+    style,
+    tableClass,
+    headerClass,
+    rowClass,
+    cellClass,
+    paginationClass,
+    emptyText = "No data available",
+    ...rest
+  } = props;
+
+  return (
+    <div
+      class={className}
+      style={{ display: "flex", flexDirection: "column", width: "100%", ...style }}
+      {...rest}
+    >
+      <div style={{ overflowX: "auto", width: "100%" }}>
+        <table class={tableClass} style={{ width: "100%", borderCollapse: "collapse" }}>
+          <thead class={headerClass}>
+            <tr>
+              {selectionMode === "multi" ? (
+                <th style={{ width: "40px", padding: "8px" }}>
+                  <input
+                    type="checkbox"
+                    checked={() => {
+                      const keys = paginatedData().map((row, i) => getRowId(row, i));
+                      return keys.length > 0 && keys.every((k) => selectedKeys().includes(k));
+                    }}
+                    onChange={handleSelectAll}
+                  />
+                </th>
+              ) : null}
+
+              {props.columns.map((col) => {
+                const isSorted = () => sortState().column === col.id;
+                const sortDir = () => (isSorted() ? sortState().direction : null);
+
+                return (
+                  <th
+                    style={{
+                      width: col.width,
+                      textAlign: col.align ?? "left",
+                      cursor: col.sortable ? "pointer" : "default",
+                      userSelect: col.sortable ? "none" : "auto",
+                      padding: "10px 12px"
+                    }}
+                    onClick={() => {
+                      if (col.sortable) handleSort(col.id);
+                    }}
+                  >
+                    <div style={{ display: "inline-flex", alignItems: "center", gap: "6px" }}>
+                      <span>{typeof col.header === "function" ? col.header() : col.header}</span>
+                      {col.sortable ? (
+                        <span
+                          style={{ fontSize: "10px", color: isSorted() ? "#38bdf8" : "#64748b" }}
+                        >
+                          {() => (sortDir() === "asc" ? "▲" : sortDir() === "desc" ? "▼" : "⇅")}
+                        </span>
+                      ) : null}
+                    </div>
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            <For
+              each={paginatedData}
+              fallback={
+                <tr>
+                  <td
+                    colSpan={props.columns.length + (selectionMode === "multi" ? 1 : 0)}
+                    style={{ textAlign: "center", padding: "24px", color: "#64748b" }}
+                  >
+                    {emptyText}
+                  </td>
+                </tr>
+              }
+            >
+              {(row: T, idx: () => number) => {
+                const key = () => getRowId(row, idx());
+                const isSelected = () => selectedKeys().includes(key());
+
+                return (
+                  <tr
+                    class={rowClass}
+                    style={{ cursor: props.onRowClick ? "pointer" : "default" }}
+                    data-selected={isSelected}
+                    onClick={() => {
+                      if (props.onRowClick) props.onRowClick(row, idx());
+                    }}
+                  >
+                    {selectionMode === "multi" ? (
+                      <td style={{ width: "40px", padding: "8px" }}>
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onClick={(e: MouseEvent) => handleSelectRow(key(), e)}
+                        />
+                      </td>
+                    ) : null}
+
+                    {props.columns.map((col) => {
+                      const content = col.cell
+                        ? col.cell(row, idx())
+                        : col.accessorKey
+                          ? row[col.accessorKey]
+                          : row[col.id];
+
+                      return (
+                        <td
+                          class={cellClass}
+                          style={{
+                            textAlign: col.align ?? "left",
+                            padding: "10px 12px"
+                          }}
+                        >
+                          {typeof content === "function" ? content() : content}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              }}
+            </For>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination Controls */}
+      {props.pageSize ? (
+        <div
+          class={paginationClass}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "10px 12px",
+            borderTop: "1px solid #1e293b",
+            fontSize: "12px",
+            color: "#94a3b8"
+          }}
+        >
+          <div>
+            Showing <strong>{() => currentPage() * pageSize + 1}</strong> to{" "}
+            <strong>{() => Math.min((currentPage() + 1) * pageSize, sortedData().length)}</strong>{" "}
+            of <strong>{() => sortedData().length}</strong> entries
+          </div>
+
+          <div style={{ display: "flex", gap: "6px", alignItems: "center" }}>
+            <button
+              type="button"
+              disabled={() => currentPage() === 0}
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+              style={{ padding: "4px 8px", cursor: "pointer" }}
+            >
+              Previous
+            </button>
+            <span>
+              Page <strong>{() => currentPage() + 1}</strong> of <strong>{totalPages}</strong>
+            </span>
+            <button
+              type="button"
+              disabled={() => currentPage() >= totalPages() - 1}
+              onClick={() => setCurrentPage((p) => Math.min(totalPages() - 1, p + 1))}
+              style={{ padding: "4px 8px", cursor: "pointer" }}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/ui/dialog.tsx

@@ -0,0 +1,362 @@
+import { Portal } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import type { ReadonlySignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { createControllableSignal, createId, trapFocus } from "./utils";
+
+export interface DialogContextValue {
+  open: ReadonlySignal<boolean>;
+  setOpen: (open: boolean) => void;
+  titleId: string;
+  descriptionId: string;
+  contentRef: { current: HTMLElement | null };
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null);
+
+export function useDialogContext(): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  return ctx!;
+}
+
+export interface DialogProps {
+  open?: () => boolean | undefined;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: Child | (() => Child);
+  title?: Child | (() => Child);
+  description?: Child | (() => Child);
+  footer?: Child | (() => Child);
+  triggerClass?: any;
+  overlayClass?: any;
+  contentClass?: any;
+  titleClass?: any;
+  descriptionClass?: any;
+  footerClass?: any;
+  portalled?: boolean;
+  children?: Child | (() => Child);
+}
+
+export function DialogRoot(props: DialogProps): Child {
+  const [open, setOpen] = createControllableSignal<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+
+  const titleId = createId("dialog-title");
+  const descriptionId = createId("dialog-desc");
+  const contentRef: { current: HTMLElement | null } = { current: null };
+
+  const ctx: DialogContextValue = {
+    open,
+    setOpen,
+    titleId,
+    descriptionId,
+    contentRef
+  };
+
+  if (props.trigger !== undefined || props.title !== undefined || props.description !== undefined) {
+    return DialogContext.Provider({
+      value: ctx,
+      children: () => (
+        <>
+          {props.trigger ? (
+            <DialogTrigger as="span" class={props.triggerClass}>
+              {typeof props.trigger === "function" ? props.trigger() : props.trigger}
+            </DialogTrigger>
+          ) : null}
+          <DialogOverlay class={props.overlayClass} portalled={props.portalled} />
+          <DialogContent portalled={props.portalled} class={props.contentClass}>
+            {props.title ? (
+              <DialogTitle class={props.titleClass}>
+                {typeof props.title === "function" ? props.title() : props.title}
+              </DialogTitle>
+            ) : null}
+            {props.description ? (
+              <DialogDescription class={props.descriptionClass}>
+                {typeof props.description === "function" ? props.description() : props.description}
+              </DialogDescription>
+            ) : null}
+            {typeof props.children === "function" ? props.children() : props.children}
+            {props.footer ? (
+              <div class={props.footerClass}>
+                {typeof props.footer === "function" ? props.footer() : props.footer}
+              </div>
+            ) : null}
+          </DialogContent>
+        </>
+      )
+    });
+  }
+
+  return DialogContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+
+export interface DialogTriggerProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogTrigger(props: DialogTriggerProps): Child {
+  const ctx = useContext(DialogContext);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(true);
+    }
+  };
+
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      aria-haspopup="dialog"
+      aria-expanded={() => ctx?.open() ?? false}
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      class={className}
+      style={style}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface DialogPortalProps {
+  mount?: HTMLElement | null;
+  children: Child | (() => Child);
+}
+
+export function DialogPortal(props: DialogPortalProps): Child {
+  return <Portal mount={props.mount}>{props.children}</Portal>;
+}
+
+export interface DialogOverlayProps {
+  as?: string;
+  portalled?: boolean;
+  mount?: HTMLElement | null;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogOverlay(props: DialogOverlayProps): Child {
+  const ctx = useContext(DialogContext);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+
+  const {
+    as: Tag = "div",
+    children,
+    onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+
+  const overlay = (
+    <Tag
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      style={() => ({
+        display: ctx?.open() ? undefined : "none",
+        ...style
+      })}
+      class={className}
+      onClick={handleClick}
+      aria-hidden="true"
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+
+  return portalled ? <Portal mount={mount}>{overlay}</Portal> : overlay;
+}
+
+export interface DialogContentProps {
+  as?: string;
+  portalled?: boolean;
+  mount?: HTMLElement | null;
+  class?: any;
+  style?: any;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogContent(props: DialogContentProps): Child {
+  const ctx = useContext(DialogContext);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.onKeyDown) props.onKeyDown(e);
+    if (e.defaultPrevented) return;
+
+    if (e.key === "Escape") {
+      ctx?.setOpen(false);
+      e.stopPropagation();
+    } else if (e.key === "Tab" && ctx?.contentRef.current) {
+      trapFocus(ctx.contentRef.current, e);
+    }
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (e.defaultPrevented) return;
+    const target = e.target as HTMLElement | null;
+    if (target?.closest("[data-dialog-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+
+  const content = (
+    <Tag
+      ref={(el: HTMLElement | null) => {
+        if (ctx) {
+          ctx.contentRef.current = el;
+          if (el && ctx.open()) {
+            const focusable = el.querySelector<HTMLElement>(
+              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            if (focusable) {
+              setTimeout(() => focusable.focus(), 0);
+            }
+          }
+        }
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ctx?.titleId}
+      aria-describedby={ctx?.descriptionId}
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      style={() => ({
+        display: ctx?.open() ? undefined : "none",
+        ...style
+      })}
+      class={className}
+      onKeyDown={handleKeyDown}
+      onClick={handleClick}
+      tabIndex={-1}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+
+  return portalled ? <Portal mount={mount}>{content}</Portal> : content;
+}
+
+export interface DialogTitleProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogTitle(props: DialogTitleProps): Child {
+  const ctx = useContext(DialogContext);
+  const { as: Tag = "h2", children, class: className, style, ...rest } = props;
+
+  return (
+    <Tag id={ctx?.titleId} class={className} style={style} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export interface DialogDescriptionProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogDescription(props: DialogDescriptionProps): Child {
+  const ctx = useContext(DialogContext);
+  const { as: Tag = "p", children, class: className, style, ...rest } = props;
+
+  return (
+    <Tag id={ctx?.descriptionId} class={className} style={style} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export interface DialogCloseProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function DialogClose(props: DialogCloseProps): Child {
+  const ctx = useContext(DialogContext);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      data-dialog-close=""
+      class={className}
+      style={style}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export const Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+});