@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/ui/misc/Chart.tsx

@@ -0,0 +1,162 @@
+import { charts } from "@valentinkolb/stdlib";
+import type { JSX } from "solid-js";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+
+/**
+ * Chart — minimal Solid wrapper around `stdlib.charts`.
+ *
+ * **Live-update story.** `charts.<kind>(opts)` returns an SVG string;
+ * Solid's `innerHTML` is reactive, so any time a prop (signal, store
+ * slice, derived value) changes, the SVG re-renders. No manual
+ * subscription, no imperative DOM patching. Trade-off: every change
+ * is a full SVG re-build, not a diff — fine for dashboard cadences
+ * (poll, websocket, store updates). Don't use this for 60fps streaming.
+ *
+ * **Sizing.** stdlib emits `<svg viewBox="0 0 W H">` with no width/
+ * height attributes, so the SVG would otherwise fall back to the
+ * browser's replaced-element default (300×150) and either overflow
+ * or look squished. We measure the wrapping `<div>` with a
+ * ResizeObserver and pass the actual pixel dimensions to stdlib —
+ * the viewBox matches the container, no aspect distortion, no
+ * letterboxing. Sizing the wrapper itself is the caller's job
+ * (`class="h-56 w-full"`, flex child, etc.). On SSR (no observer)
+ * the chart renders at stdlib's default size; the first client-side
+ * frame re-measures and re-renders.
+ *
+ * **Why so thin.** The props are a discriminated union over each
+ * stdlib chart function — `kind: "line"` brings in exactly the params
+ * `charts.line` expects, `kind: "bar"` brings in `charts.bar`'s, etc.
+ * Zero invented API, zero option renaming. If stdlib gains a new
+ * option, it's automatically available at every callsite.
+ *
+ * **Theming.** stdlib charts use `currentColor` for axes / ticks /
+ * tick labels — set the wrapping element's `color` (via Tailwind
+ * `text-dimmed` / `text-primary` / dark variants) and everything
+ * inherits. Series colors come from `--stdlib-chart-c1..c8` CSS
+ * custom properties; override on the parent for per-chart palettes.
+ *
+ * ```tsx
+ * <Chart kind="line" class="h-48 text-dimmed"
+ *        series={[{ data: points() }]}
+ *        yAxis={{ format: v => `€${v}k` }} />
+ *
+ * <Chart kind="donut" class="h-48" data={slices()} />
+ *
+ * <Chart kind="sparkline" class="w-24 h-6 text-emerald-600" data={trend()} />
+ * ```
+ */
+
+/** All chart kinds shipped by `stdlib.charts`. */
+export type ChartKind = keyof typeof charts;
+
+/**
+ * Per-kind props: `kind` discriminator + the exact options that
+ * `charts.<kind>` accepts, **minus** `width` / `height` (the wrapper
+ * owns those — they're derived from container measurement). Solid's
+ * component model handles discriminated unions natively, so callsites
+ * get full type safety.
+ */
+export type ChartProps = {
+  [K in ChartKind]: { kind: K; class?: string; style?: JSX.CSSProperties | string } & Omit<
+    Parameters<(typeof charts)[K]>[0],
+    "width" | "height"
+  >;
+}[ChartKind];
+
+/**
+ * Internal — strips wrapper-only keys from props and forwards the
+ * rest (plus measured size) to `charts[kind]`. The `any` is the
+ * price for dispatching one function call across 8 different option
+ * types; an explicit per-kind switch would type it but balloon the
+ * component for no runtime benefit.
+ */
+const renderSvg = (props: ChartProps, width: number, height: number): string => {
+  const { kind, class: _class, style: _style, ...opts } = props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (charts[kind] as (o: unknown) => string)({ ...(opts as any), width, height });
+};
+
+/** Empty-data short-circuit. Kept per-kind because stdlib's payload
+ *  key differs (series vs data vs groups). We're conservative: only
+ *  block on truly empty inputs; partially-filled series get rendered
+ *  as-is and stdlib handles the gaps. */
+const isEmpty = (props: ChartProps): boolean => {
+  if (props.kind === "line" || props.kind === "scatter") {
+    return !props.series?.length || props.series.every((s) => !s.data.length);
+  }
+  if (props.kind === "bar" || props.kind === "donut" || props.kind === "pie") {
+    return !props.data?.length;
+  }
+  if (props.kind === "histogram" || props.kind === "sparkline") {
+    return !props.data?.length;
+  }
+  if (props.kind === "boxplot") {
+    return !props.groups?.length;
+  }
+  return false;
+};
+
+const Chart = (props: ChartProps): JSX.Element => {
+  let containerRef: HTMLDivElement | undefined;
+  // Initial size matches stdlib's chart-function defaults so the SSR
+  // render is sensible. The observer updates this on the first
+  // client-side frame; the SVG re-renders reactively via innerHTML.
+  const [size, setSize] = createSignal({ width: 480, height: 280 });
+
+  onMount(() => {
+    if (!containerRef) return;
+    // Seed immediately from layout — avoids one wasted re-render in
+    // the case where the container already has its final size at
+    // mount time (the common case for dashboard widgets).
+    const rect = containerRef.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      setSize({ width: Math.round(rect.width), height: Math.round(rect.height) });
+    }
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      // Floor to integer pixels; sub-pixel jitter would trigger an
+      // SVG re-render on every scroll/zoom otherwise.
+      if (width > 0 && height > 0) {
+        setSize((prev) => {
+          const w = Math.round(width);
+          const h = Math.round(height);
+          return prev.width === w && prev.height === h ? prev : { width: w, height: h };
+        });
+      }
+    });
+    ro.observe(containerRef);
+    onCleanup(() => ro.disconnect());
+  });
+
+  return (
+    <Show
+      when={!isEmpty(props)}
+      fallback={
+        <div
+          ref={containerRef}
+          class={`flex items-center justify-center text-xs text-dimmed ${props.class ?? ""}`}
+          style={props.style}
+        >
+          No data
+        </div>
+      }
+    >
+      {/* The wrapping div is what the ResizeObserver watches. `block`
+          + the caller's sizing classes (h-48, w-full, flex-1, …) drive
+          the available space; the SVG inside fills it via viewBox =
+          container size. `innerHTML` is reactive in Solid — re-runs
+          on every prop / size change, so live data updates propagate
+          without ceremony. */}
+      <div
+        ref={containerRef}
+        class={`block ${props.class ?? ""}`}
+        style={props.style}
+        innerHTML={renderSvg(props, size().width, size().height)}
+      />
+    </Show>
+  );
+};
+
+export default Chart;

package/src/ui/misc/CodeDisplay.tsx

@@ -0,0 +1,54 @@
+import { For, Show } from "solid-js";
+import CopyButton from "./CopyButton";
+import { type CodeDisplayLanguage, highlightCodeDisplayLines } from "./code-highlight";
+
+export type { CodeDisplayLanguage };
+
+export type CodeDisplayProps = {
+  code: string;
+  title?: string;
+  language?: CodeDisplayLanguage;
+  copy?: boolean;
+  lineNumbers?: boolean;
+  class?: string;
+};
+
+export default function CodeDisplay(props: CodeDisplayProps) {
+  const lines = () => highlightCodeDisplayLines(props.code, language());
+  const lineNumbers = () => props.lineNumbers ?? true;
+  const language = () => props.language ?? "text";
+  const hasHeader = () => Boolean(props.title || props.copy !== false);
+
+  return (
+    <div
+      class={`code-display my-3 overflow-hidden rounded-lg bg-zinc-100 ring-1 ring-inset ring-zinc-200/70 dark:bg-zinc-900/70 dark:ring-zinc-800/80 ${props.class ?? ""}`}
+    >
+      <Show when={hasHeader()}>
+        <div class="flex items-center justify-between gap-3 px-3 py-1.5">
+          <Show when={props.title}>{(title) => <p class="truncate text-xs font-semibold text-secondary">{title()}</p>}</Show>
+          <Show when={props.copy !== false}>
+            <CopyButton
+              text={props.code}
+              class="focus-ui inline-flex h-6 w-6 items-center justify-center rounded text-[10px] text-dimmed hover:bg-white/80 hover:text-primary dark:hover:bg-zinc-800"
+            />
+          </Show>
+        </div>
+      </Show>
+
+      <div class={`code-display-code overflow-x-auto px-3 ${hasHeader() ? "pb-2" : "py-2"} font-mono text-xs leading-5`}>
+        <div class="min-w-max">
+          <For each={lines()}>
+            {(line, index) => (
+              <div class={lineNumbers() ? "grid grid-cols-[2rem_1fr]" : "grid grid-cols-[1fr]"}>
+                <Show when={lineNumbers()}>
+                  <span class="select-none pr-3 text-right tabular-nums text-zinc-400 dark:text-zinc-600">{index() + 1}</span>
+                </Show>
+                <code class="whitespace-pre pr-4 font-mono text-primary" innerHTML={line || " "} />
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/misc/ContextMenu.tsx

@@ -20,7 +20,7 @@ export type ContextMenuProps = ParentProps<{
 }>;
 
 const ITEM_BASE_CLASSES =
-  "flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10";
+  "flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-zinc-100 dark:hover:bg-white/10";
 
 const getVariantClasses = (variant?: "danger") =>
   variant === "danger" ? "text-red-600 dark:text-red-400" : "text-zinc-700 dark:text-zinc-300";
@@ -178,7 +178,7 @@ export default function ContextMenu(props: ContextMenuProps) {
             ref={menuRef}
             role="menu"
             aria-label="Context menu"
-            class="fixed z-50 w-52 max-w-[min(22rem,calc(100vw-1rem))] overflow-y-auto rounded-xl border border-zinc-300/60 bg-white/95 p-0 text-zinc-900 shadow-lg ring-1 ring-black/5 backdrop-blur-sm dark:border-zinc-600/50 dark:bg-zinc-950/95 dark:text-zinc-100"
+            class="fixed z-50 w-52 max-w-[min(22rem,calc(100vw-1rem))] overflow-y-auto rounded-xl border border-zinc-300/60 bg-white/95 p-0 text-zinc-900 [box-shadow:var(--theme-shadow-float)] ring-1 ring-black/5 backdrop-blur-sm dark:border-zinc-600/50 dark:bg-zinc-950/95 dark:text-zinc-100"
             style={{
               left: `${Math.min(coords().x, window.innerWidth - 220)}px`,
               top: `${Math.min(coords().y, window.innerHeight - 320)}px`,

package/src/ui/misc/DataTable.tsx

@@ -0,0 +1,269 @@
+import { createEffect, createSignal, For, type JSX, onCleanup, onMount, Show } from "solid-js";
+import Placeholder from "./Placeholder";
+
+export type DataTableColumn<T> = {
+  id: string;
+  header: JSX.Element | ((ctx: { col: DataTableColumn<T> }) => JSX.Element);
+  subtitle?: JSX.Element | ((ctx: { col: DataTableColumn<T> }) => JSX.Element);
+  value?: keyof T | ((row: T) => unknown);
+  class?: string;
+  headerClass?: string;
+  cellClass?: string;
+};
+
+export type DataTableRenderCell<T> = (ctx: {
+  row: T;
+  col: DataTableColumn<T>;
+  value: unknown;
+  render: (value: unknown) => JSX.Element;
+}) => JSX.Element;
+
+export type DataTableRenderHeader<T> = (ctx: { col: DataTableColumn<T>; render: () => JSX.Element }) => JSX.Element;
+
+export type DataTableFooter<T> = {
+  values?: Record<string, unknown>;
+  renderCell?: (ctx: { col: DataTableColumn<T>; value: unknown; render: (value: unknown) => JSX.Element }) => JSX.Element;
+};
+
+export type DataTableProps<T> = {
+  rows: readonly T[];
+  columns: readonly DataTableColumn<T>[];
+  getRowId?: (row: T) => string;
+  selectedRowId?: string | null;
+  rowClass?: string | ((row: T) => string | undefined);
+  hoverRows?: boolean;
+  onRowClick?: (row: T) => void;
+  onRowDoubleClick?: (row: T) => void;
+  renderCell?: DataTableRenderCell<T>;
+  renderHeader?: DataTableRenderHeader<T>;
+  footer?: DataTableFooter<T>;
+  hasMore?: boolean;
+  loadingMore?: boolean;
+  onLoadMore?: () => void;
+  empty?: JSX.Element;
+  density?: "compact" | "normal";
+  stickyHeader?: boolean;
+  highlightColumns?: boolean;
+  verticalAlign?: "top" | "middle" | "bottom";
+  cellContentClass?: string;
+  fillHeight?: boolean;
+  class?: string;
+  tableClass?: string;
+  scrollPreserveKey?: string | false;
+};
+
+const defaultRender = (value: unknown): JSX.Element => {
+  if (value === null || value === undefined || value === "") return "—";
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number" || typeof value === "bigint") return String(value);
+  if (typeof value === "string") return value;
+  return JSON.stringify(value);
+};
+
+const renderColumnPart = <T,>(
+  part: DataTableColumn<T>["header"] | DataTableColumn<T>["subtitle"],
+  col: DataTableColumn<T>,
+): JSX.Element => {
+  if (typeof part === "function") return part({ col });
+  return part;
+};
+
+export default function DataTable<T>(props: DataTableProps<T>) {
+  const [hoveredColumn, setHoveredColumn] = createSignal<number | null>(null);
+  let scrollRef: HTMLDivElement | undefined;
+  let loadMoreRef: HTMLDivElement | undefined;
+  let hasMore = false;
+  let loadingMore = false;
+  let onLoadMore: (() => void) | undefined;
+  const rowId = (row: T) => props.getRowId?.(row);
+  const isInteractive = () => !!props.onRowClick || !!props.onRowDoubleClick;
+  const shouldHoverRows = () => props.hoverRows ?? isInteractive();
+  const shouldRenderLoadMoreSentinel = () => !!props.onLoadMore;
+  const cellPadding = () => (props.density === "compact" ? "px-3 py-1.5" : "px-3 py-2");
+  const headerPadding = () => (props.density === "compact" ? "px-3 py-1.5" : "px-3 py-2");
+  const cellContentClass = () => props.cellContentClass ?? "truncate";
+  const cellVerticalAlignClass = () =>
+    props.verticalAlign === "top" ? "align-top" : props.verticalAlign === "bottom" ? "align-bottom" : "align-middle";
+  const tableClass = () => props.tableClass ?? `w-full text-xs ${props.fillHeight ? "h-full" : ""}`;
+  const columnHoverClass = (index: number) =>
+    props.highlightColumns !== false && shouldHoverRows() && hoveredColumn() === index ? "bg-zinc-950/[0.015] dark:bg-black/[0.12]" : "";
+  const setHoveredColumnIfEnabled = (index: number) => {
+    if (shouldHoverRows()) setHoveredColumn(index);
+  };
+
+  const isNearBottom = () => {
+    if (!scrollRef) return false;
+    return scrollRef.scrollTop + scrollRef.clientHeight >= scrollRef.scrollHeight - 240;
+  };
+
+  const maybeLoadMore = () => {
+    if (!hasMore || loadingMore || !onLoadMore) return;
+    if (!isNearBottom()) return;
+    onLoadMore();
+  };
+
+  const valueOf = (row: T, col: DataTableColumn<T>) => {
+    if (typeof col.value === "function") return col.value(row);
+    if (col.value) return row[col.value];
+    return undefined;
+  };
+
+  const renderHeaderDefault = (col: DataTableColumn<T>): JSX.Element => (
+    <div class="flex flex-col gap-0.5 leading-tight">
+      <span class="text-primary font-semibold">{renderColumnPart(col.header, col)}</span>
+      <Show when={col.subtitle !== undefined}>
+        <span class="text-[10px] text-dimmed font-normal">{renderColumnPart(col.subtitle, col)}</span>
+      </Show>
+    </div>
+  );
+
+  const renderCellDefault = (row: T, col: DataTableColumn<T>) => defaultRender(valueOf(row, col));
+
+  const onRowKeyDown = (event: KeyboardEvent, row: T) => {
+    if (!isInteractive()) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    props.onRowClick?.(row);
+  };
+
+  const rowClass = (row: T) => {
+    if (typeof props.rowClass === "function") return props.rowClass(row) ?? "";
+    return props.rowClass ?? "";
+  };
+
+  onMount(() => {
+    if (typeof IntersectionObserver === "undefined" || !scrollRef || !loadMoreRef) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) maybeLoadMore();
+      },
+      { root: scrollRef, rootMargin: "240px" },
+    );
+    observer.observe(loadMoreRef);
+    onCleanup(() => observer.disconnect());
+  });
+
+  createEffect(() => {
+    props.rows.length;
+    hasMore = !!props.hasMore;
+    loadingMore = !!props.loadingMore;
+    onLoadMore = props.onLoadMore;
+    maybeLoadMore();
+  });
+
+  return (
+    <Show when={props.columns.length > 0} fallback={<Placeholder surface="paper">No columns.</Placeholder>}>
+      <div
+        ref={scrollRef}
+        role="region"
+        aria-label="Data table"
+        class={props.class ?? "paper overflow-auto flex-1 min-h-0"}
+        data-scroll-preserve={props.scrollPreserveKey || undefined}
+        onScroll={maybeLoadMore}
+        onMouseLeave={() => setHoveredColumn(null)}
+      >
+        <table class={tableClass()}>
+          <thead class={props.stickyHeader === false ? undefined : "sticky top-0 z-10 bg-zinc-50 dark:bg-zinc-950"}>
+            <tr class="border-b border-zinc-100 dark:border-zinc-800">
+              <For each={props.columns}>
+                {(col, index) => (
+                  <th
+                    class={`${headerPadding()} text-left ${columnHoverClass(index())} ${col.headerClass ?? ""} ${col.class ?? ""}`}
+                    onMouseEnter={() => setHoveredColumnIfEnabled(index())}
+                  >
+                    {props.renderHeader ? props.renderHeader({ col, render: () => renderHeaderDefault(col) }) : renderHeaderDefault(col)}
+                  </th>
+                )}
+              </For>
+            </tr>
+          </thead>
+          <Show when={props.footer}>
+            {(footer) => (
+              <tfoot class="sticky bottom-0 z-10 bg-zinc-50 dark:bg-zinc-950">
+                <tr class="border-t border-zinc-100 dark:border-zinc-800">
+                  <For each={props.columns}>
+                    {(col, index) => {
+                      const value = () => footer().values?.[col.id];
+                      return (
+                        <td
+                          class={`px-3 py-1.5 text-[11px] text-dimmed ${columnHoverClass(index())}`}
+                          onMouseEnter={() => setHoveredColumnIfEnabled(index())}
+                        >
+                          {footer().renderCell
+                            ? footer().renderCell!({ col, value: value(), render: defaultRender })
+                            : defaultRender(value())}
+                        </td>
+                      );
+                    }}
+                  </For>
+                </tr>
+              </tfoot>
+            )}
+          </Show>
+          <tbody>
+            <Show
+              when={props.rows.length > 0}
+              fallback={
+                <tr>
+                  <td class="p-0" colspan={props.columns.length}>
+                    <Placeholder>{props.empty ?? "No records"}</Placeholder>
+                  </td>
+                </tr>
+              }
+            >
+              <For each={props.rows}>
+                {(row) => {
+                  const id = () => rowId(row);
+                  const isSelected = () => props.selectedRowId && id() === props.selectedRowId;
+                  return (
+                    <tr
+                      class={`border-b border-zinc-100 dark:border-zinc-800/60 last:border-0 ${
+                        shouldHoverRows() ? `${isInteractive() ? "cursor-pointer" : ""} hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.12]` : ""
+                      } ${isSelected() ? "bg-blue-50 dark:bg-blue-900/20" : ""} ${rowClass(row)}`}
+                      tabIndex={isInteractive() ? 0 : undefined}
+                      onClick={() => props.onRowClick?.(row)}
+                      onDblClick={() => props.onRowDoubleClick?.(row)}
+                      onKeyDown={(e) => onRowKeyDown(e, row)}
+                    >
+                      <For each={props.columns}>
+                        {(col, index) => {
+                          const value = () => valueOf(row, col);
+                          return (
+                            <td
+                              class={`${cellPadding()} ${cellVerticalAlignClass()} max-w-[260px] ${columnHoverClass(index())} ${col.cellClass ?? ""} ${col.class ?? ""}`}
+                              onMouseEnter={() => setHoveredColumnIfEnabled(index())}
+                            >
+                              <div class={cellContentClass()}>
+                                {props.renderCell
+                                  ? props.renderCell({
+                                      row,
+                                      col,
+                                      value: value(),
+                                      render: (v) => renderCellDefault(row, { ...col, value: () => v }),
+                                    })
+                                  : defaultRender(value())}
+                              </div>
+                            </td>
+                          );
+                        }}
+                      </For>
+                    </tr>
+                  );
+                }}
+              </For>
+              <Show when={props.fillHeight}>
+                <tr aria-hidden="true">
+                  <td class="h-full p-0" colspan={props.columns.length} />
+                </tr>
+              </Show>
+            </Show>
+          </tbody>
+        </table>
+        <Show when={shouldRenderLoadMoreSentinel()}>
+          <div ref={loadMoreRef} class="h-1" aria-hidden="true" />
+        </Show>
+      </div>
+    </Show>
+  );
+}