@mshuja288/aksuicore 0.2.0

package/src/patterns/RecordWorkspace.tsx

@@ -0,0 +1,567 @@
+"use client";
+
+import { useMemo, useState, useSyncExternalStore, type MouseEvent, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Pagination } from "../primitives/Pagination";
+import { Select, type SelectOption } from "../primitives/Select";
+
+function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+}
+
+export type TableColumn<T> = {
+  key: string;
+  header: string;
+  value: (item: T) => string | number | null | undefined;
+  display?: (item: T) => string | number | null | undefined;
+  filterable?: boolean;
+  sortable?: boolean;
+  /** When set, filter uses an exact-match Select instead of text contains. */
+  filterOptions?: SelectOption[];
+  filterPlaceholder?: string;
+};
+
+type SortDirection = "asc" | "desc";
+type SortState = { key: string; direction: SortDirection };
+type DetailLine = { label: string; value: string };
+type TooltipState = { x: number; y: number; lines: DetailLine[] };
+
+function compareColumnValues<T>(column: TableColumn<T>, left: T, right: T) {
+  const leftRaw = column.display ? column.display(left) : column.value(left);
+  const rightRaw = column.display ? column.display(right) : column.value(right);
+
+  if (leftRaw === null || leftRaw === undefined || leftRaw === "") {
+    return rightRaw === null || rightRaw === undefined || rightRaw === "" ? 0 : 1;
+  }
+  if (rightRaw === null || rightRaw === undefined || rightRaw === "") {
+    return -1;
+  }
+
+  if (typeof leftRaw === "number" && typeof rightRaw === "number") {
+    return leftRaw - rightRaw;
+  }
+
+  const leftText = String(leftRaw);
+  const rightText = String(rightRaw);
+  const leftNumber = Number(leftText);
+  const rightNumber = Number(rightText);
+  if (
+    leftText.trim() !== "" &&
+    rightText.trim() !== "" &&
+    Number.isFinite(leftNumber) &&
+    Number.isFinite(rightNumber) &&
+    /^-?\d+(\.\d+)?$/.test(leftText.trim()) &&
+    /^-?\d+(\.\d+)?$/.test(rightText.trim())
+  ) {
+    return leftNumber - rightNumber;
+  }
+
+  return leftText.localeCompare(rightText, undefined, { sensitivity: "base", numeric: true });
+}
+
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M10 4v12M4 10h12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function FilterIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M3 5h14M5.5 10h9M8 15h4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function ResetIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M4.5 8.2A6 6 0 1 1 4.8 13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M4.5 4.2v4h4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg className={open ? "side-rail-chevron open" : "side-rail-chevron"} viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M8 4.5 13.5 10 8 15.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function PreviewIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M2.8 10S5.5 4.8 10 4.8 17.2 10 17.2 10 14.5 15.2 10 15.2 2.8 10 2.8 10Z" fill="none" stroke="currentColor" strokeWidth="1.6" />
+      <circle cx="10" cy="10" r="2.4" fill="none" stroke="currentColor" strokeWidth="1.6" />
+    </svg>
+  );
+}
+
+function DetailList({ lines }: { lines: DetailLine[] }) {
+  return (
+    <dl className="record-detail-list">
+      {lines.map((line) => (
+        <div key={line.label} className="record-detail-row">
+          <dt>{line.label}</dt>
+          <dd>{line.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function RecordWorkspace<T>({
+  title,
+  columns,
+  items,
+  rowKey,
+  empty,
+  onAdd,
+  addLabel = "Add",
+  canAdd = true,
+  onView,
+  onUpdate,
+  onDelete,
+  canUpdate,
+  canDelete,
+  toolbar,
+  form,
+}: {
+  title: string;
+  columns: TableColumn<T>[];
+  items: T[];
+  rowKey: (item: T) => string | number;
+  empty: string;
+  onAdd?: () => void;
+  addLabel?: string;
+  canAdd?: boolean;
+  onView?: (item: T) => void;
+  onUpdate?: (item: T) => void;
+  onDelete?: (item: T) => void;
+  canUpdate?: (item: T) => boolean;
+  canDelete?: (item: T) => boolean;
+  toolbar?: ReactNode;
+  /** Slot for Add/Update/View dialogs owned by the host app. */
+  form?: ReactNode;
+}) {
+  const filterableColumns = columns.filter((column) => column.filterable !== false);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [sort, setSort] = useState<SortState | null>(null);
+  const [sideOpen, setSideOpen] = useState(false);
+  const [previewEnabled, setPreviewEnabled] = useState(false);
+  const [previewKey, setPreviewKey] = useState<string | number | null>(null);
+  const [tooltip, setTooltip] = useState<TooltipState | null>(null);
+  const [pageSize, setPageSize] = useState("15");
+  const [page, setPage] = useState(1);
+  const isClient = useIsClient();
+
+  const filtered = useMemo(() => {
+    const activeFilters = columns.filter((column) => column.filterable !== false);
+    return items.filter((item) =>
+      activeFilters.every((column) => {
+        const query = (filters[column.key] ?? "").trim();
+        if (!query) {
+          return true;
+        }
+        const raw = column.value(item);
+        const text = raw === null || raw === undefined ? "" : String(raw);
+        if (column.filterOptions) {
+          return text === query;
+        }
+        return text.toLowerCase().includes(query.toLowerCase());
+      }),
+    );
+  }, [items, filters, columns]);
+
+  const sorted = useMemo(() => {
+    if (!sort) {
+      return filtered;
+    }
+    const column = columns.find((entry) => entry.key === sort.key);
+    if (!column || column.sortable === false) {
+      return filtered;
+    }
+    const direction = sort.direction === "asc" ? 1 : -1;
+    return [...filtered].sort((left, right) => compareColumnValues(column, left, right) * direction);
+  }, [filtered, sort, columns]);
+
+  const activeFilterCount = useMemo(
+    () => filterableColumns.reduce((count, column) => count + ((filters[column.key] ?? "").trim() ? 1 : 0), 0),
+    [filterableColumns, filters],
+  );
+
+  const showAll = pageSize === "all";
+  const numericPageSize = showAll ? Math.max(sorted.length, 1) : Number(pageSize);
+  const pageCount = showAll ? 1 : Math.max(1, Math.ceil(sorted.length / numericPageSize));
+  const currentPage = Math.min(page, pageCount);
+  const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
+  const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
+  const showAdd = canAdd && Boolean(onAdd);
+  const showFilters = filterableColumns.length > 0;
+  const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
+
+  function cellText(column: TableColumn<T>, item: T) {
+    const raw = column.display ? column.display(item) : column.value(item);
+    return raw === null || raw === undefined || raw === "" ? "—" : String(raw);
+  }
+
+  function detailLines(item: T): DetailLine[] {
+    return columns.map((column) => ({
+      label: column.header,
+      value: cellText(column, item),
+    }));
+  }
+
+  const previewTitle = previewItem && columns[0] ? cellText(columns[0], previewItem) : null;
+
+  function changeFilter(key: string, value: string) {
+    setFilters((current) => ({ ...current, [key]: value }));
+    setPage(1);
+  }
+
+  function clearFilters() {
+    setFilters({});
+    setPage(1);
+  }
+
+  function toggleSort(column: TableColumn<T>) {
+    if (column.sortable === false) {
+      return;
+    }
+    setSort((current) => {
+      if (!current || current.key !== column.key) {
+        return { key: column.key, direction: "asc" };
+      }
+      if (current.direction === "asc") {
+        return { key: column.key, direction: "desc" };
+      }
+      return null;
+    });
+    setPage(1);
+  }
+
+  function setPreviewEnabledValue(enabled: boolean) {
+    setPreviewEnabled(enabled);
+    setTooltip(null);
+    if (!enabled) {
+      setPreviewKey(null);
+    }
+  }
+
+  function focusRecord(item: T) {
+    if (previewEnabled) {
+      setPreviewKey(rowKey(item));
+    }
+  }
+
+  function showTooltip(item: T, event: MouseEvent) {
+    const padding = 16;
+    const width = 280;
+    const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
+    const y = Math.min(event.clientY + 14, window.innerHeight - padding - 24);
+    setTooltip({ x, y, lines: detailLines(item) });
+  }
+
+  const summary =
+    sorted.length === 0
+      ? "0 records"
+      : showAll
+        ? `1–${sorted.length} of ${sorted.length}`
+        : `${start + 1}–${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
+
+  return (
+    <div className="list-workspace" aria-label={title}>
+      <div
+        className={["list-body", sideOpen ? "side-open" : "", previewEnabled ? "preview-open" : ""]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <div className="list-main">
+          <section className="table-card">
+            {toolbar ? (
+              <div className="table-card-bar">
+                <div className="table-card-context">{toolbar}</div>
+              </div>
+            ) : null}
+
+            <div className="table-wrap">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    {columns.map((column) => {
+                      const sortable = column.sortable !== false;
+                      const active = sort?.key === column.key ? sort.direction : null;
+                      return (
+                        <th
+                          key={column.key}
+                          aria-sort={active === "asc" ? "ascending" : active === "desc" ? "descending" : "none"}
+                        >
+                          {sortable ? (
+                            <button
+                              type="button"
+                              className={active ? `sort-header active ${active}` : "sort-header"}
+                              onClick={() => toggleSort(column)}
+                            >
+                              <span>{column.header}</span>
+                              <span className="sort-indicator" aria-hidden="true">
+                                {active === "asc" ? "▲" : active === "desc" ? "▼" : "↕"}
+                              </span>
+                            </button>
+                          ) : (
+                            column.header
+                          )}
+                        </th>
+                      );
+                    })}
+                    <th className="actions-col">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pageItems.length === 0 ? (
+                    <tr>
+                      <td colSpan={columns.length + 1}>
+                        <p className="hint table-empty">
+                          {items.length === 0 ? empty : "No records match the current filters."}
+                        </p>
+                      </td>
+                    </tr>
+                  ) : (
+                    pageItems.map((item) => {
+                      const key = rowKey(item);
+                      const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
+                      const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
+                      const selected = previewEnabled && previewKey === key;
+                      return (
+                        <tr
+                          key={key}
+                          className={selected ? "data-row selected" : "data-row"}
+                          onMouseEnter={(event) => {
+                            if (!previewEnabled) {
+                              showTooltip(item, event);
+                            }
+                            focusRecord(item);
+                          }}
+                          onMouseMove={(event) => {
+                            if (!previewEnabled) {
+                              showTooltip(item, event);
+                            }
+                          }}
+                          onMouseLeave={() => setTooltip(null)}
+                          onClick={() => focusRecord(item)}
+                        >
+                          {columns.map((column) => (
+                            <td key={column.key}>{cellText(column, item)}</td>
+                          ))}
+                          <td className="actions-col" onClick={(event) => event.stopPropagation()}>
+                            <div className="row-actions">
+                              {onView ? (
+                                <button type="button" className="ghost row-action" onClick={() => onView(item)}>
+                                  View
+                                </button>
+                              ) : null}
+                              {onUpdate ? (
+                                <button
+                                  type="button"
+                                  className="ghost row-action"
+                                  disabled={!updateAllowed}
+                                  title={updateAllowed ? "Update" : "Update is not available"}
+                                  onClick={() => onUpdate(item)}
+                                >
+                                  Update
+                                </button>
+                              ) : null}
+                              {onDelete ? (
+                                <button
+                                  type="button"
+                                  className="ghost row-action danger"
+                                  disabled={!deleteAllowed}
+                                  title={deleteAllowed ? "Delete" : "Delete is not available"}
+                                  onClick={() => onDelete(item)}
+                                >
+                                  Delete
+                                </button>
+                              ) : null}
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            <Pagination
+              page={currentPage}
+              pageCount={pageCount}
+              pageSize={pageSize}
+              onPageChange={setPage}
+              onPageSizeChange={(value) => {
+                setPageSize(value);
+                setPage(1);
+              }}
+              summary={summary}
+            />
+          </section>
+        </div>
+
+        {previewEnabled ? (
+          <aside className="preview-panel" aria-label="Record preview">
+            <div className="preview-panel-head">
+              <div>
+                <p className="preview-kicker">Preview</p>
+                <h3>{previewTitle ?? "No record selected"}</h3>
+              </div>
+            </div>
+            <div className="preview-panel-body">
+              {previewItem ? (
+                <DetailList lines={detailLines(previewItem)} />
+              ) : (
+                <p className="preview-empty">Hover or click a row to preview its details here.</p>
+              )}
+            </div>
+          </aside>
+        ) : null}
+
+        <aside className={sideOpen ? "side-rail open" : "side-rail"} aria-label="Actions and filters">
+          <button
+            type="button"
+            className="ghost side-rail-toggle"
+            aria-expanded={sideOpen}
+            title={sideOpen ? "Collapse" : "Expand"}
+            onClick={() => setSideOpen((open) => !open)}
+          >
+            <ChevronIcon open={sideOpen} />
+            {sideOpen ? <span>Collapse</span> : null}
+          </button>
+
+          {sideOpen ? (
+            <div className="side-rail-body">
+              <div className="preview-check">
+                <input
+                  type="checkbox"
+                  checked={previewEnabled}
+                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+                  aria-label="Preview"
+                />
+                <PreviewIcon />
+                <span aria-hidden="true">Preview</span>
+              </div>
+
+              {showAdd ? (
+                <button type="button" className="side-rail-add" onClick={onAdd}>
+                  <PlusIcon />
+                  <span>{addLabel}</span>
+                </button>
+              ) : null}
+
+              {showFilters ? (
+                <div className="side-rail-filters">
+                  <div className="filter-panel-head">
+                    <h3>Filters</h3>
+                    <button
+                      type="button"
+                      className="ghost filter-clear"
+                      title="Reset filters"
+                      aria-label="Reset filters"
+                      disabled={activeFilterCount === 0}
+                      onClick={clearFilters}
+                    >
+                      <ResetIcon />
+                      <span>Reset</span>
+                    </button>
+                  </div>
+                  <div className="filter-panel-stack">
+                    {filterableColumns.map((column) => (
+                      <label key={column.key}>
+                        {column.header}
+                        {column.filterOptions ? (
+                          <Select
+                            value={filters[column.key] ?? ""}
+                            options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
+                            onChange={(value) => changeFilter(column.key, value)}
+                            placeholder={column.filterPlaceholder ?? "All"}
+                          />
+                        ) : (
+                          <input
+                            value={filters[column.key] ?? ""}
+                            onChange={(event) => changeFilter(column.key, event.target.value)}
+                            placeholder={`Filter ${column.header.toLowerCase()}`}
+                          />
+                        )}
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="side-rail-icons">
+              <label className="side-rail-icon preview-check-icon" title="Preview">
+                <input
+                  type="checkbox"
+                  checked={previewEnabled}
+                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+                  aria-label="Preview"
+                />
+                <PreviewIcon />
+              </label>
+              {showAdd ? (
+                <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
+                  <PlusIcon />
+                </button>
+              ) : null}
+              {showFilters ? (
+                <button
+                  type="button"
+                  className="ghost side-rail-icon"
+                  title="Show filters"
+                  aria-label="Show filters"
+                  onClick={() => setSideOpen(true)}
+                >
+                  <FilterIcon />
+                  {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+                </button>
+              ) : null}
+              {showFilters ? (
+                <button
+                  type="button"
+                  className="ghost side-rail-icon"
+                  title="Reset filters"
+                  aria-label="Reset filters"
+                  disabled={activeFilterCount === 0}
+                  onClick={clearFilters}
+                >
+                  <ResetIcon />
+                </button>
+              ) : null}
+            </div>
+          )}
+        </aside>
+      </div>
+
+      {form}
+
+      {isClient && tooltip && !previewEnabled
+        ? createPortal(
+            <div className="record-tooltip" style={{ left: tooltip.x, top: tooltip.y }} role="tooltip">
+              <p className="record-tooltip-title">{title}</p>
+              <DetailList lines={tooltip.lines} />
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}
+
+/** @deprecated Prefer RecordWorkspace — alias kept for configurator migration */
+export const RecordTable = RecordWorkspace;

package/src/patterns/index.ts

@@ -0,0 +1,2 @@
+export { AppShell, type AppShellProps } from "./AppShell";
+export { RecordWorkspace, RecordTable, type TableColumn } from "./RecordWorkspace";

package/src/primitives/Button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+
+const variantClass: Record<ButtonVariant, string> = {
+  primary: "",
+  secondary: "secondary",
+  ghost: "ghost",
+  danger: "danger",
+};
+
+export function Button({
+  variant = "primary",
+  className = "",
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  children: ReactNode;
+}) {
+  const classes = ["aks-button", variantClass[variant], className].filter(Boolean).join(" ");
+  return (
+    <button type="button" className={classes} {...props}>
+      {children}
+    </button>
+  );
+}