@tulip-systems/create-app 0.12.3 → 0.13.0

package/dist/templates/code/src/app/admin/history/_components/diff.client.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { convertEditorContentToPlainText, type EditorJSONContent } from "@tulip-systems/editor";
+import { Button } from "@tulip-systems/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@tulip-systems/ui/collapsible";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@tulip-systems/ui/empty";
+import { Switch } from "@tulip-systems/ui/switch";
+import { diffLines, diffWordsWithSpace } from "diff";
+import equal from "fast-deep-equal";
+import { ChevronDownIcon, FileDiffIcon } from "lucide-react";
+import { useState } from "react";
+import { applyHistoryChanges } from "../_lib/helpers";
+import { type HistoryDiff, historyDiffInputSchema, type JSONValue } from "../_lib/validators";
+import {
+  FieldComparison,
+  FieldComparisonAdded,
+  FieldComparisonCell,
+  FieldComparisonHeader,
+  FieldComparisonHeading,
+  FieldComparisonLabel,
+  FieldComparisonRemoved,
+  FieldComparisonRow,
+} from "./field-comparison";
+
+/**
+ * Convert stored field names to labels without module-specific mappings.
+ */
+function fieldLabel(key: string): string {
+  return key
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replaceAll("_", " ")
+    .replaceAll("-", " ")
+    .replace(/\bid\b/gi, "ID")
+    .replace(/^./, (letter) => letter.toUpperCase());
+}
+
+/**
+ * Identify nested objects and editor documents without resolving related records.
+ */
+function isObject(value: JSONValue | undefined): value is Record<string, JSONValue> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * Convert recognized editor documents to readable text.
+ */
+function editorText(value: JSONValue | undefined): string | undefined {
+  if (!isObject(value) || value.type !== "doc" || !Array.isArray(value.content)) return undefined;
+  return convertEditorContentToPlainText(value as EditorJSONContent);
+}
+
+/**
+ * Render values as content, preserving empty and absent states and grouping array items.
+ */
+function StoredValue({ value }: { value: JSONValue | undefined }) {
+  if (value === undefined) return <span className="text-muted-foreground italic">Not present</span>;
+  if (value === null) return <span className="text-muted-foreground italic">No value (null)</span>;
+  if (value === "") return <span className="text-muted-foreground italic">Empty text</span>;
+  if (Array.isArray(value)) {
+    if (!value.length) return <span className="text-muted-foreground italic">Empty list</span>;
+    return (
+      <ol className="list-inside list-decimal space-y-3">
+        {value.map((item, index) => (
+          <li key={`${index}:${JSON.stringify(item)}`}>
+            <StoredValue value={item} />
+          </li>
+        ))}
+      </ol>
+    );
+  }
+  if (isObject(value)) {
+    if (!Object.keys(value).length)
+      return <span className="text-muted-foreground italic">Empty object</span>;
+    return (
+      <dl className="space-y-3">
+        {Object.entries(value).map(([key, item]) => (
+          <div key={key}>
+            <dt className="mb-1 text-muted-foreground text-xs">{fieldLabel(key)}</dt>
+            <dd>
+              <StoredValue value={item} />
+            </dd>
+          </div>
+        ))}
+      </dl>
+    );
+  }
+  return <span className="whitespace-pre-wrap break-words">{String(value)}</span>;
+}
+
+/**
+ * Present formatted fields with a local switch for unchanged values.
+ */
+function FormattedComparison({
+  before,
+  after,
+}: {
+  before: JSONValue | undefined;
+  after: JSONValue | undefined;
+}) {
+  const [showUnchanged, setShowUnchanged] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FieldComparison>
+        <FieldComparisonHeader>
+          <FieldComparisonHeading>Before</FieldComparisonHeading>
+          <FieldComparisonHeading>After</FieldComparisonHeading>
+        </FieldComparisonHeader>
+        {!showUnchanged && equal(before, after) ? (
+          <p className="px-4 py-3 text-muted-foreground">No fields changed.</p>
+        ) : (
+          <FormattedFields before={before} after={after} showUnchanged={showUnchanged} />
+        )}
+      </FieldComparison>
+
+      <label
+        htmlFor="history-show-unchanged"
+        className="flex items-center gap-2 self-end text-muted-foreground text-sm"
+      >
+        <Switch
+          id="history-show-unchanged"
+          checked={showUnchanged}
+          onCheckedChange={setShowUnchanged}
+        />
+        Show unchanged fields
+      </label>
+    </div>
+  );
+}
+
+/**
+ * Compare fields in compact rows, using readable paths for nested values.
+ */
+function FormattedFields({
+  label,
+  before,
+  after,
+  showUnchanged,
+}: {
+  label?: string;
+  before: JSONValue | undefined;
+  after: JSONValue | undefined;
+  showUnchanged: boolean;
+}) {
+  const changed = !equal(before, after);
+  if (!changed && !showUnchanged) return null;
+  const beforeText = editorText(before);
+  const afterText = editorText(after);
+  const left = beforeText ?? before;
+  const right = afterText ?? after;
+
+  if ((isObject(left) || left === undefined) && (isObject(right) || right === undefined)) {
+    const keys = [...new Set([...Object.keys(left ?? {}), ...Object.keys(right ?? {})])].toSorted();
+    if (keys.length) {
+      return (
+        <>
+          {keys.map((key) => (
+            <FormattedFields
+              key={key}
+              label={label ? `${label} › ${fieldLabel(key)}` : fieldLabel(key)}
+              before={Object.hasOwn(left ?? {}, key) ? left?.[key] : undefined}
+              after={Object.hasOwn(right ?? {}, key) ? right?.[key] : undefined}
+              showUnchanged={showUnchanged}
+            />
+          ))}
+        </>
+      );
+    }
+  }
+
+  const words =
+    typeof left === "string" && typeof right === "string" ? diffWordsWithSpace(left, right) : null;
+
+  return (
+    <FieldComparisonRow aria-label={label ?? "Value"}>
+      <FieldComparisonCell>
+        <FieldComparisonLabel className="flex flex-wrap items-center gap-2">
+          {label ?? "Value"}
+          {!changed && <span className="font-normal">Unchanged</span>}
+        </FieldComparisonLabel>
+        {words && left !== "" ? (
+          <span className="whitespace-pre-wrap break-words">
+            {words.map((part, index) => {
+              if (part.added) return null;
+              if (!part.removed) return part.value;
+              return (
+                <FieldComparisonRemoved key={`${index}:${part.value}`}>
+                  {part.value}
+                </FieldComparisonRemoved>
+              );
+            })}
+          </span>
+        ) : (
+          <div
+            className={changed && after === undefined ? "text-destructive line-through" : undefined}
+          >
+            <StoredValue value={left} />
+          </div>
+        )}
+      </FieldComparisonCell>
+      <FieldComparisonCell>
+        <FieldComparisonLabel className="flex flex-wrap items-center gap-2">
+          {label ?? "Value"}
+          {!changed && <span className="font-normal">Unchanged</span>}
+        </FieldComparisonLabel>
+        {words && right !== "" ? (
+          <span className="whitespace-pre-wrap break-words">
+            {words.map((part, index) => {
+              if (part.removed) return null;
+              if (!part.added) return part.value;
+              return (
+                <FieldComparisonAdded key={`${index}:${part.value}`}>
+                  {part.value}
+                </FieldComparisonAdded>
+              );
+            })}
+          </span>
+        ) : (
+          <div className={changed && before === undefined ? "text-primary" : undefined}>
+            <StoredValue value={right} />
+          </div>
+        )}
+      </FieldComparisonCell>
+      {changed && beforeText !== undefined && beforeText === afterText && (
+        <p className="col-span-2 px-4 pb-3 text-muted-foreground text-xs">
+          Formatting or structure changed. The text is unchanged.
+        </p>
+      )}
+    </FieldComparisonRow>
+  );
+}
+
+/**
+ * Show complete before/after JSON snapshots with changed lines highlighted.
+ */
+function TechnicalComparison({ before, after }: { before: JSONValue; after: JSONValue }) {
+  const parts = diffLines(
+    `${JSON.stringify(before, null, 2)}\n`,
+    `${JSON.stringify(after, null, 2)}\n`,
+  );
+  return (
+    <FieldComparison>
+      <FieldComparisonHeader>
+        <FieldComparisonHeading>Before snapshot</FieldComparisonHeading>
+        <FieldComparisonHeading>After snapshot</FieldComparisonHeading>
+      </FieldComparisonHeader>
+      <div className="py-2">
+        {parts.map((part, index) => {
+          if (part.added && parts[index - 1]?.removed) return null;
+          const addition = part.removed ? parts[index + 1] : part;
+
+          return (
+            <FieldComparisonRow key={`${index}:${part.value}`} className="not-last:border-b-0">
+              <FieldComparisonCell className="py-0 font-mono text-xs leading-6">
+                <pre className="whitespace-pre-wrap break-all">
+                  {part.removed && (
+                    <FieldComparisonRemoved className="block rounded-none no-underline">
+                      {part.value}
+                    </FieldComparisonRemoved>
+                  )}
+                  {!part.removed && !part.added && part.value}
+                </pre>
+              </FieldComparisonCell>
+              <FieldComparisonCell className="py-0 font-mono text-xs leading-6">
+                <pre className="whitespace-pre-wrap break-all">
+                  {addition?.added && (
+                    <FieldComparisonAdded className="block rounded-none">
+                      {addition.value}
+                    </FieldComparisonAdded>
+                  )}
+                  {!part.removed && !part.added && part.value}
+                </pre>
+              </FieldComparisonCell>
+            </FieldComparisonRow>
+          );
+        })}
+      </div>
+    </FieldComparison>
+  );
+}
+
+/**
+ * Reconstruct the final resource once, then display field comparisons independently of patch operations.
+ */
+export function HistoryDiffComparison({ diff }: { diff: HistoryDiff | null }) {
+  if (!diff) {
+    return (
+      <Empty className="min-h-[80vh] border py-12">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <FileDiffIcon aria-hidden="true" />
+          </EmptyMedia>
+          <EmptyTitle>No diff recorded</EmptyTitle>
+          <EmptyDescription>
+            Detailed changes were not recorded for this history entry.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  const parsed = historyDiffInputSchema.safeParse(diff);
+  if (!parsed.success) {
+    return (
+      <Empty className="min-h-[80vh] border py-12">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <FileDiffIcon aria-hidden="true" />
+          </EmptyMedia>
+          <EmptyTitle>Diff unavailable</EmptyTitle>
+          <EmptyDescription>
+            This history entry uses a diff format that cannot be displayed.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+  const after = applyHistoryChanges(parsed.data.snapshot, parsed.data.changes);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="group w-full">
+            Changes
+            <ChevronDownIcon className="ml-auto group-data-[state=open]:rotate-180" />
+          </Button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="pt-3 pb-8">
+          <FormattedComparison
+            before={
+              parsed.data.changes[0]?.op === "add" && parsed.data.changes[0].path === ""
+                ? undefined
+                : parsed.data.snapshot
+            }
+            after={after}
+          />
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="group w-full">
+            Technical changes
+            <ChevronDownIcon className="ml-auto group-data-[state=open]:rotate-180" />
+          </Button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="pt-3 pb-6">
+          <TechnicalComparison before={parsed.data.snapshot} after={after} />
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Collapsible>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="group w-full">
+            Payload
+            <ChevronDownIcon className="ml-auto group-data-[state=open]:rotate-180" />
+          </Button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="pt-3 pb-6">
+          <pre className="max-h-96 overflow-auto rounded-md border bg-muted/30 p-4 text-xs leading-6">
+            {JSON.stringify(parsed.data.changes, null, 2)}
+          </pre>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/history/_components/field-comparison.tsx

@@ -0,0 +1,153 @@
+import { cn } from "@tulip-systems/ui/cn";
+import type { ComponentProps } from "react";
+
+/**
+ * Contain a two-column comparison in a bordered card that scrolls on narrow screens.
+ *
+ * @example
+ * <FieldComparison>
+ *   <FieldComparisonHeader>
+ *     <FieldComparisonHeading>Before</FieldComparisonHeading>
+ *     <FieldComparisonHeading>After</FieldComparisonHeading>
+ *   </FieldComparisonHeader>
+ *   <FieldComparisonRow>
+ *     <FieldComparisonCell>
+ *       <FieldComparisonLabel>Status</FieldComparisonLabel>
+ *       <FieldComparisonRemoved>Planned</FieldComparisonRemoved>
+ *     </FieldComparisonCell>
+ *     <FieldComparisonCell>
+ *       <FieldComparisonLabel>Status</FieldComparisonLabel>
+ *       <FieldComparisonAdded>Active</FieldComparisonAdded>
+ *     </FieldComparisonCell>
+ *   </FieldComparisonRow>
+ * </FieldComparison>
+ */
+function FieldComparison({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div className={cn("overflow-x-auto rounded-md border border-border", className)} {...props}>
+      <div className="min-w-[36rem]">{children}</div>
+    </div>
+  );
+}
+
+/**
+ * Align two column headings above the comparison rows.
+ *
+ * @example
+ * <FieldComparisonHeader>
+ *   <FieldComparisonHeading>Before</FieldComparisonHeading>
+ *   <FieldComparisonHeading>After</FieldComparisonHeading>
+ * </FieldComparisonHeader>
+ */
+function FieldComparisonHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("grid grid-cols-2 border-border border-b bg-muted/50", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Label a column, matching the content spacing and center divider below it.
+ *
+ * @example
+ * <FieldComparisonHeading>Before snapshot</FieldComparisonHeading>
+ */
+function FieldComparisonHeading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "min-w-0 border-border px-4 py-2 font-medium text-muted-foreground text-xs even:border-l",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Align a pair of cells with equal widths and a subtle separator between rows.
+ *
+ * @example
+ * <FieldComparisonRow>
+ *   <FieldComparisonCell>Planned</FieldComparisonCell>
+ *   <FieldComparisonCell>Active</FieldComparisonCell>
+ * </FieldComparisonRow>
+ */
+function FieldComparisonRow({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div className={cn("grid grid-cols-2 border-border not-last:border-b", className)} {...props} />
+  );
+}
+
+/**
+ * Hold arbitrary comparison content with consistent padding and a center divider.
+ *
+ * @example
+ * <FieldComparisonCell>
+ *   <FieldComparisonLabel>Title</FieldComparisonLabel>
+ *   Swimwise
+ * </FieldComparisonCell>
+ */
+function FieldComparisonCell({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "min-w-0 break-words border-border px-4 py-2.5 text-sm leading-relaxed even:border-l",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Display a muted field label above a cell's value.
+ *
+ * @example
+ * <FieldComparisonLabel>Settings › Visibility</FieldComparisonLabel>
+ */
+function FieldComparisonLabel({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div className={cn("mb-1 font-medium text-muted-foreground text-xs", className)} {...props} />
+  );
+}
+
+/**
+ * Mark removed content with semantic deletion markup and Tulip's destructive color.
+ *
+ * @example
+ * <FieldComparisonRemoved>Planned</FieldComparisonRemoved>
+ */
+function FieldComparisonRemoved({ className, ...props }: ComponentProps<"del">) {
+  return (
+    <del className={cn("rounded-sm bg-destructive/10 text-destructive", className)} {...props} />
+  );
+}
+
+/**
+ * Mark added content with semantic insertion markup and Tulip's primary color.
+ *
+ * @example
+ * <FieldComparisonAdded>Active</FieldComparisonAdded>
+ */
+function FieldComparisonAdded({ className, ...props }: ComponentProps<"ins">) {
+  return (
+    <ins
+      className={cn("rounded-sm bg-primary/10 text-primary no-underline", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  FieldComparison,
+  FieldComparisonAdded,
+  FieldComparisonCell,
+  FieldComparisonHeader,
+  FieldComparisonHeading,
+  FieldComparisonLabel,
+  FieldComparisonRemoved,
+  FieldComparisonRow,
+};

package/dist/templates/code/src/app/admin/history/_components/tables.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { TableColumnDef } from "@tulip-systems/data-tables";
+import {
+  createTableConfig,
+  TableConfigProvider,
+  usePaginationStrategy,
+} from "@tulip-systems/data-tables/client";
+import { offsetPagination } from "@tulip-systems/query";
+import { useFilters, usePagination, useSorting } from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import type { HistoryColumn } from "../_config/columns-data";
+import { historyFilters } from "../_config/filters";
+import { historyTableSorts } from "../_config/sorting";
+
+export function HistoryPaginationTableProvider({
+  columns,
+  children,
+}: PropsWithChildren<{ columns: TableColumnDef<HistoryColumn>[] }>) {
+  const filtering = useFilters(historyFilters);
+  const sorting = useSorting(historyTableSorts);
+  const pagination = usePagination(offsetPagination);
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.history.list.queryOptions({ input }));
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  const config = createTableConfig<HistoryColumn>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/code/src/app/admin/history/_components/toolbars.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch } from "@tulip-systems/query/client";
+import { Suspense } from "react";
+import { orpc } from "@/server/router/client";
+import { historyFilters } from "../_config/filters";
+
+const descriptors = resolveFilterDescriptors(historyFilters);
+
+export function HistoryTableToolbar() {
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        <FilterSearch
+          placeholder="Search resources, actions or actors…"
+          filter={descriptors.search}
+        />
+
+        <Suspense>
+          <HistoryResourceFilter />
+          <HistoryActionFilter />
+          <HistoryActorFilter />
+        </Suspense>
+      </TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Available resource types are supplied by recorded entries.
+ */
+function HistoryResourceFilter() {
+  const { data } = useSuspenseQuery(orpc.history.filterResourceTypes.queryOptions());
+  return <FilterCombobox title="Resource" filter={descriptors.resourceType} options={data} />;
+}
+
+/**
+ * Action keys remain open so modules can introduce additional actions.
+ */
+function HistoryActionFilter() {
+  const { data } = useSuspenseQuery(orpc.history.filterActions.queryOptions());
+  return <FilterCombobox title="Action" filter={descriptors.action} options={data} />;
+}
+
+/**
+ * Account IDs identify actors even when their recorded names change.
+ */
+function HistoryActorFilter() {
+  const { data } = useSuspenseQuery(orpc.history.filterActors.queryOptions());
+  return <FilterCombobox title="Who" filter={descriptors.actorId} options={data} />;
+}

package/dist/templates/code/src/app/admin/history/_config/columns-data.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { formatDateTime } from "@tulip-systems/core";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { TableTextCell } from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import type { HistoryEntry } from "../_lib/validators";
+
+export type HistoryColumn = HistoryEntry;
+
+export const historyColumns: TableColumnDef<HistoryColumn>[] = [
+  {
+    id: "summary",
+    // Render stored resource facts verbatim; modules own labels and context order.
+    accessorFn: (entry) =>
+      [entry.resourceType, entry.resourceLabel, entry.action].filter(Boolean).join(" · "),
+    enableSorting: false,
+    header: ({ column }) => <TableColumnHeader column={column} title="What happened" />,
+    cell: ({ getValue, row }) => (
+      <TableTextCell className="whitespace-nowrap">
+        <Link className="hover:underline" href={`/admin/history/${row.original.id}`}>
+          {getValue<string>()}
+
+          {row.original.context.length > 0 && (
+            <span className="text-muted-foreground">
+              {" — "}
+              {row.original.context.map((item) => `${item.type}: ${item.label}`).join(" › ")}
+            </span>
+          )}
+        </Link>
+      </TableTextCell>
+    ),
+  },
+  {
+    accessorKey: "actorName",
+    header: ({ column }) => <TableColumnHeader column={column} title="Who" />,
+    cell: ({ row }) => <TableTextCell>{row.getValue("actorName")}</TableTextCell>,
+  },
+  {
+    id: "action",
+    accessorFn: (entry) => entry.action,
+    header: ({ column }) => <TableColumnHeader column={column} title="Action" />,
+    cell: ({ row }) => <TableTextCell>{row.getValue("action")}</TableTextCell>,
+  },
+  {
+    accessorKey: "resourceLabel",
+    header: ({ column }) => <TableColumnHeader column={column} title="Resource title" />,
+    cell: ({ row }) => (
+      <TableTextCell className="whitespace-nowrap">{row.getValue("resourceLabel")}</TableTextCell>
+    ),
+  },
+  {
+    accessorKey: "occurredAt",
+    header: ({ column }) => <TableColumnHeader column={column} title="When" />,
+    cell: ({ row }) => (
+      <TableTextCell className="whitespace-nowrap">
+        {formatDateTime(row.original.occurredAt)}
+      </TableTextCell>
+    ),
+  },
+];