@utopia-studio-design/design-system-cli 0.4.0 → 0.5.0

package/data/templates/dashboard-composer/visual-editor/styles.css

@@ -0,0 +1,310 @@
+* { box-sizing: border-box; }
+html, body, #root {
+  min-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin: 0;
+}
+html, body { overflow-x: clip; }
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+.ceramic-puck-editor {
+  --puck-color-surface: var(--surface);
+  --puck-color-surface-muted: var(--muted);
+  --puck-color-surface-subtle: var(--background);
+  --puck-color-surface-inverse: var(--foreground);
+  --puck-color-border: var(--border);
+  --puck-color-border-hover: var(--foreground-subtle);
+  --puck-color-border-muted: var(--border);
+  --puck-color-border-inverse: var(--muted-foreground);
+  --puck-color-text: var(--foreground);
+  --puck-color-text-secondary: var(--muted-foreground);
+  --puck-color-text-muted: var(--muted-foreground);
+  --puck-color-text-subtle: var(--foreground-subtle);
+  --puck-color-text-inverse: var(--background);
+  --puck-color-interactive: var(--primary);
+  --puck-color-interactive-hover: var(--primary-hover);
+  --puck-color-interactive-active: var(--primary-active);
+  --puck-color-interactive-subtle: var(--interaction-selection-surface);
+  --puck-color-interactive-soft: var(--surface-hover);
+  --puck-color-interactive-soft-hover: var(--surface-strong);
+  --puck-color-interactive-neutral-hover: var(--surface-hover);
+  --puck-color-interactive-inverse-hover: var(--primary-hover);
+  --puck-color-interactive-inverse-active: var(--primary-active);
+  --puck-color-focus-ring: var(--focus-ring);
+  --puck-color-selection-bg: color-mix(
+    in srgb,
+    var(--interaction-selection-border) 10%,
+    transparent
+  );
+  --puck-color-selection-border: var(--interaction-selection-border);
+  --puck-color-highlight: var(--primary);
+  --puck-color-bg-disabled: var(--muted);
+  --puck-color-text-disabled: var(--foreground-subtle);
+  --puck-color-overlay-backdrop: color-mix(in srgb, var(--background) 24%, var(--foreground) 76%);
+  --puck-font-family: var(--font-sans);
+  --puck-font-weight-regular: var(--font-weight-regular);
+  --puck-font-weight-medium: var(--font-weight-medium);
+  --puck-font-weight-semibold: var(--font-weight-semibold);
+  --puck-font-weight-bold: var(--font-weight-strong);
+  --puck-space-1: var(--space-1);
+  --puck-space-2: var(--space-2);
+  --puck-space-3: var(--space-3);
+  --puck-space-4: var(--space-4);
+  --puck-space-5: var(--space-6);
+  --puck-space-chrome-gutter: var(--space-4);
+  --puck-field-font-size: var(--button-font-size);
+  --puck-field-label-font-size: var(--font-size-supporting);
+  --puck-field-label-font-weight: var(--font-weight-medium);
+  --puck-field-space-x: var(--space-3);
+  --puck-field-space-y: var(--space-2);
+  --puck-field-radius: var(--radius-control);
+  --puck-iconbutton-radius: var(--radius-control);
+  --puck-iconbutton-space: var(--space-2);
+  --puck-radius-xs: var(--radius-control);
+  --puck-radius-s: var(--radius-control);
+  --puck-radius-m: var(--radius-control);
+  --puck-radius-l: var(--radius-surface);
+  --puck-border-width-hairline: var(--border-width-hairline);
+  --puck-border-width-regular: var(--border-width-hairline);
+  --puck-border-width-focus: var(--focus-ring-width);
+  --puck-duration-fast: var(--duration-fast);
+  --puck-duration-medium: var(--duration-medium);
+  --puck-duration-slow: var(--duration-slow);
+  --puck-ease-emphasized: var(--ease-standard);
+  min-block-size: 100vh;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.ceramic-puck-editor :is(h1, p) {
+  margin: 0;
+}
+
+.ceramic-puck-editor-header {
+  display: grid;
+  grid-template-columns: minmax(20rem, 1fr) auto;
+  gap: var(--space-3) var(--space-5);
+  padding: var(--space-4) var(--page-gutter);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-puck-editor-header > div:first-child {
+  display: grid;
+  gap: var(--space-1);
+  max-inline-size: 52rem;
+}
+
+.ceramic-puck-editor-header > div:first-child > span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.ceramic-puck-editor-header p {
+  color: var(--muted-foreground);
+}
+
+.ceramic-puck-editor-header > div:nth-child(2) {
+  display: flex;
+  align-items: start;
+  justify-content: end;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.ceramic-puck-editor-header output {
+  display: flex;
+  align-items: center;
+  grid-column: 1 / -1;
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-width-hairline) solid var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+}
+
+.ceramic-puck-editor-header output > span {
+  overflow-wrap: anywhere;
+}
+
+.ceramic-puck-editor-shell {
+  block-size: max(46rem, calc(100vh - 13rem));
+  min-inline-size: 0;
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-puck-editor-shell .Puck {
+  block-size: 100%;
+}
+
+.ceramic-puck-chrome-header {
+  display: grid;
+  grid-template-columns: auto minmax(14rem, 1fr) auto;
+  align-items: center;
+  gap: var(--space-3);
+  min-block-size: var(--space-16);
+  padding: var(--space-3) var(--space-4);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+  color: var(--foreground);
+}
+
+.ceramic-puck-chrome-header h2 {
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ceramic-puck-chrome-header h2 code {
+  min-inline-size: 0;
+  overflow: hidden;
+  margin-inline-start: var(--space-2);
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-supporting);
+  font-weight: var(--font-weight-regular);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ceramic-puck-panel-controls,
+.ceramic-puck-document-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ceramic-puck-panel-controls .uds-button[aria-pressed='true'] {
+  border-color: var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+  color: var(--foreground);
+}
+
+.ceramic-puck-document-actions {
+  justify-content: end;
+}
+
+.ceramic-puck-editor-shell :is(
+  input:not([type='radio']):not([type='checkbox']),
+  select
+) {
+  min-block-size: var(--input-height);
+}
+
+.ceramic-puck-editor-shell textarea {
+  inline-size: 100%;
+  min-block-size: calc(var(--input-height) * 2);
+  resize: block;
+}
+
+.ceramic-puck-editor-state {
+  display: grid;
+  place-content: center;
+  justify-items: start;
+  gap: var(--space-2);
+  min-block-size: 100%;
+  padding: var(--space-5) var(--page-gutter);
+  background: var(--surface);
+  color: var(--foreground);
+}
+
+.ceramic-puck-editor-state p {
+  max-inline-size: 38rem;
+  color: var(--muted-foreground);
+}
+
+.ceramic-puck-retry {
+  min-block-size: var(--button-height);
+  padding-inline: var(--space-4);
+  border: var(--border-width-hairline) solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--background);
+  color: var(--foreground);
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+}
+
+.ceramic-puck-retry:hover {
+  background: var(--surface-hover);
+}
+
+.ceramic-puck-retry:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.ceramic-puck-json {
+  margin: var(--space-4) var(--page-gutter);
+  padding: var(--space-4);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-puck-json summary {
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+}
+
+.ceramic-puck-json pre {
+  max-block-size: 30rem;
+  overflow: auto;
+  padding: var(--space-3);
+  background: var(--background);
+}
+
+@media (max-width: 48rem) {
+  .ceramic-puck-editor-header {
+    grid-template-columns: 1fr;
+  }
+
+  .ceramic-puck-editor-header > div:nth-child(2) {
+    display: grid;
+    justify-content: stretch;
+  }
+
+  .ceramic-puck-editor-header output {
+    grid-column: 1;
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ceramic-puck-editor-shell {
+    block-size: max(42rem, calc(100vh - 20rem));
+  }
+
+  .ceramic-puck-chrome-header {
+    grid-template-columns: 1fr auto;
+  }
+
+  .ceramic-puck-chrome-header h2 {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    justify-content: start;
+  }
+
+  .ceramic-puck-panel-controls {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .ceramic-puck-document-actions {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .ceramic-puck-document-actions .uds-button[aria-label='Undo'],
+  .ceramic-puck-document-actions .uds-button[aria-label='Redo'] {
+    display: none;
+  }
+}

package/data/templates/database-workspace/DatabaseWorkspaceBlocks.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react'
+import { Badge } from '@utopia-studio-design/design-system/Badge'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import {
+  DatabasePropertyCell,
+  DatabaseRoot,
+  type DatabaseMutationAdapter,
+  type DatabasePermissions,
+  type DatabaseQuery,
+  type DatabaseRecord,
+  type DatabaseSchema,
+  type DatabaseState,
+  type DatabaseView,
+} from '@utopia-studio-design/design-system/Database'
+import './database-workspace.css'
+
+export interface DatabaseToolbarProps extends React.HTMLAttributes<HTMLElement> {
+  activeFilterCount?: number
+  activeSortCount?: number
+  groupLabel?: string
+  onCreate?: () => void
+  onFilter?: () => void
+  onSearchChange?: (value: string) => void
+  onSort?: () => void
+  searchValue?: string
+}
+
+export function DatabaseToolbar({
+  activeFilterCount = 0,
+  activeSortCount = 0,
+  groupLabel,
+  onCreate,
+  onFilter,
+  onSearchChange,
+  onSort,
+  searchValue = '',
+  ...props
+}: DatabaseToolbarProps) {
+  return (
+    <header className="ceramic-database-toolbar" {...props}>
+      <label>
+        <span className="uds-visually-hidden">Search records</span>
+        <input
+          placeholder="Search records"
+          type="search"
+          value={searchValue}
+          onChange={(event) => onSearchChange?.(event.target.value)}
+        />
+      </label>
+      <div>
+        <Button size="sm" variant="outline" onClick={onFilter}>
+          Filter {activeFilterCount ? `(${activeFilterCount})` : ''}
+        </Button>
+        <Button size="sm" variant="outline" onClick={onSort}>
+          Sort {activeSortCount ? `(${activeSortCount})` : ''}
+        </Button>
+        {groupLabel ? <Badge variant="outline">Grouped by {groupLabel}</Badge> : null}
+      </div>
+      <Button size="sm" onClick={onCreate}>New record</Button>
+    </header>
+  )
+}
+
+export interface SavedViewsBarProps extends React.HTMLAttributes<HTMLElement> {
+  activeViewId: string
+  onViewChange?: (viewId: string) => void
+  views: DatabaseView[]
+}
+
+export function SavedViewsBar({
+  activeViewId,
+  onViewChange,
+  views,
+  ...props
+}: SavedViewsBarProps) {
+  return (
+    <nav aria-label="Workspace views" className="ceramic-saved-views" {...props}>
+      {views.map((view) => (
+        <Button
+          aria-current={activeViewId === view.id ? 'page' : undefined}
+          key={view.id}
+          size="sm"
+          variant={activeViewId === view.id ? 'secondary' : 'ghost'}
+          onClick={() => onViewChange?.(view.id)}
+        >
+          {view.label}
+        </Button>
+      ))}
+    </nav>
+  )
+}
+
+export interface DatabaseTableBlockProps extends React.HTMLAttributes<HTMLElement> {
+  adapter?: DatabaseMutationAdapter
+  density?: 'compact' | 'default' | 'comfortable'
+  direction?: 'ltr' | 'rtl'
+  locale?: string
+  onRecordOpen?: (record: DatabaseRecord) => void
+  onCopyCell?: (text: string, recordId: string, propertyId: string) => void
+  onPasteCell?: (recordId: string, propertyId: string) => void
+  onRecordsChange?: (records: DatabaseRecord[]) => void
+  permissions?: DatabasePermissions
+  query?: DatabaseQuery
+  records: DatabaseRecord[]
+  schema: DatabaseSchema
+  state?: DatabaseState
+  views?: DatabaseView[]
+}
+
+export function DatabaseTableBlock({
+  adapter,
+  density,
+  direction,
+  locale,
+  onRecordOpen,
+  onCopyCell,
+  onPasteCell,
+  onRecordsChange,
+  permissions,
+  query,
+  records,
+  schema,
+  state,
+  views,
+  ...props
+}: DatabaseTableBlockProps) {
+  return (
+    <DatabaseRoot
+      adapter={adapter}
+      density={density}
+      direction={direction}
+      locale={locale}
+      permissions={permissions}
+      query={query}
+      records={records}
+      schema={schema}
+      state={state}
+      views={views}
+      onRecordOpen={onRecordOpen}
+      onCopyCell={onCopyCell}
+      onPasteCell={onPasteCell}
+      onRecordsChange={onRecordsChange}
+      {...props}
+    />
+  )
+}
+
+export interface RecordDetailDrawerProps extends React.HTMLAttributes<HTMLElement> {
+  onClose?: () => void
+  open: boolean
+  record: DatabaseRecord | null
+  schema: DatabaseSchema
+}
+
+export function RecordDetailDrawer({
+  onClose,
+  open,
+  record,
+  schema,
+  ...props
+}: RecordDetailDrawerProps) {
+  const drawerRef = React.useRef<HTMLElement>(null)
+  const closeRef = React.useRef<HTMLButtonElement>(null)
+  React.useLayoutEffect(() => {
+    if (!open || !record) return
+    const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null
+    closeRef.current?.focus()
+    return () => trigger?.focus()
+  }, [open, record])
+  if (!open || !record) return null
+  return (
+    <>
+      <div aria-hidden="true" className="ceramic-record-drawer-backdrop" onClick={onClose} />
+      <aside
+        aria-label="Record details"
+        aria-modal="true"
+        className="ceramic-record-drawer"
+        ref={drawerRef}
+        role="dialog"
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            onClose?.()
+            return
+          }
+          if (event.key !== 'Tab') return
+          const focusable = [...(drawerRef.current?.querySelectorAll<HTMLElement>(
+            'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+          ) ?? [])]
+          if (focusable.length === 0) return
+          const first = focusable[0]
+          const last = focusable.at(-1)!
+          if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault()
+            last.focus()
+          } else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault()
+            first.focus()
+          }
+        }}
+        {...props}
+      >
+        <header>
+          <div>
+            <span>Record detail</span>
+            <h2>{String(record.values[schema.primaryPropertyId] ?? 'Untitled')}</h2>
+          </div>
+          <Button ref={closeRef} aria-label="Close record details" isIconOnly variant="ghost" onClick={onClose}>×</Button>
+        </header>
+        <dl>
+          {schema.properties.map((property) => (
+            <div key={property.id}>
+              <dt>{property.label}</dt>
+              <dd>
+                <DatabasePropertyCell property={property} value={record.values[property.id]} />
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </aside>
+    </>
+  )
+}
+
+export interface BulkActionBarProps extends React.HTMLAttributes<HTMLElement> {
+  count: number
+  onClear?: () => void
+  onDelete?: () => void
+}
+
+export function BulkActionBar({ count, onClear, onDelete, ...props }: BulkActionBarProps) {
+  if (count === 0) return null
+  return (
+    <div aria-label="Selected record actions" className="ceramic-bulk-action-bar" role="toolbar" {...props}>
+      <strong>{count} selected</strong>
+      <Button size="sm" variant="ghost" onClick={onClear}>Clear</Button>
+      <Button size="sm" variant="destructive" onClick={onDelete}>Delete</Button>
+    </div>
+  )
+}

package/data/templates/database-workspace/README.md

@@ -0,0 +1,5 @@
+# Database Workspace template
+
+Runnable Ceramic fixture for schema-driven records, saved views, filtering,
+sorting, virtualization, inline editing, validation, optimistic recovery,
+permissions, RTL, and the desktop-grid to mobile-record-detail transformation.

package/data/templates/database-workspace/database-workspace.css

@@ -0,0 +1,107 @@
+.ceramic-database-toolbar {
+  display: grid;
+  grid-template-columns: minmax(12rem, 1fr) auto auto;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.ceramic-database-toolbar label,
+.ceramic-database-toolbar input {
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+.ceramic-database-toolbar input {
+  min-block-size: var(--button-height-sm);
+  border: var(--border-width-hairline) solid var(--input);
+  padding-inline: var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  font: inherit;
+}
+
+.ceramic-database-toolbar > div,
+.ceramic-saved-views {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.ceramic-saved-views {
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-record-drawer-backdrop {
+  position: fixed;
+  z-index: var(--z-overlay);
+  inset: 0;
+  background: var(--overlay);
+}
+
+.ceramic-record-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: var(--z-modal);
+  inline-size: min(100%, 28rem);
+  overflow: auto;
+  padding: var(--space-5);
+  border-inline-start: var(--border-width-strong) solid var(--border);
+  background: var(--popover-surface);
+  color: var(--foreground);
+}
+
+.ceramic-record-drawer header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.ceramic-record-drawer header div,
+.ceramic-record-drawer dl {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.ceramic-record-drawer :is(h2, dl, dd) {
+  margin: 0;
+}
+
+.ceramic-record-drawer header span,
+.ceramic-record-drawer dt {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+.ceramic-record-drawer dl > div {
+  display: grid;
+  gap: var(--space-1);
+  padding-block: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-record-drawer .uds-database-property-cell {
+  padding-inline: 0;
+}
+
+.ceramic-bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  inline-size: fit-content;
+  padding: var(--space-2);
+  border: var(--border-width-strong) solid var(--border);
+  background: var(--surface-elevated);
+}
+
+@media (max-width: 44rem) {
+  .ceramic-database-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .ceramic-database-toolbar > :last-child {
+    inline-size: 100%;
+  }
+}

package/data/templates/database-workspace/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Ceramic schema-driven database workspace template." />
+    <title>Database Workspace — Ceramic Design System</title>
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to database workspace</a>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>