@utopia-studio-design/design-system-cli 0.4.1 → 0.6.0

package/data/blocks/dashboard-composer/dashboard-composer.css

@@ -0,0 +1,328 @@
+.ceramic-todo-list {
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: var(--space-4);
+  background: var(--surface);
+  color: var(--foreground);
+}
+
+.ceramic-todo-list > header,
+.ceramic-todo-items > li,
+.ceramic-todo-items label,
+.ceramic-todo-items > li > div,
+.ceramic-todo-create,
+.ceramic-dashboard-block-toolbar,
+.ceramic-dashboard-block-toolbar > div {
+  display: flex;
+  align-items: center;
+}
+
+.ceramic-todo-list > header,
+.ceramic-todo-items > li,
+.ceramic-dashboard-block-toolbar {
+  justify-content: space-between;
+}
+
+.ceramic-todo-list > header {
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding-block-end: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-todo-list > header > div {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--space-1);
+}
+
+.ceramic-todo-list h2,
+.ceramic-todo-list p {
+  margin: 0;
+}
+
+.ceramic-todo-list > header 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-todo-items {
+  display: grid;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ceramic-todo-items > li {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding-block: var(--space-2);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-todo-list[data-density='compact'] .ceramic-todo-items > li {
+  padding-block: var(--space-1);
+}
+
+.ceramic-todo-list[data-density='comfortable'] .ceramic-todo-items > li {
+  padding-block: var(--space-3);
+}
+
+.ceramic-todo-items label {
+  gap: var(--space-2);
+  min-inline-size: 0;
+}
+
+.ceramic-todo-items label > span {
+  overflow-wrap: anywhere;
+}
+
+.ceramic-todo-items > li[data-completed='true'] label > span {
+  color: var(--muted-foreground);
+  text-decoration: line-through;
+}
+
+.ceramic-todo-items > li > div {
+  flex: 0 0 auto;
+  gap: var(--space-1);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-todo-state {
+  display: grid;
+  gap: var(--space-1);
+  min-block-size: 8rem;
+  align-content: center;
+  justify-items: start;
+  color: var(--muted-foreground);
+}
+
+.ceramic-todo-state strong {
+  color: var(--foreground);
+}
+
+.ceramic-todo-create {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  margin-block-start: auto;
+  padding-block-start: var(--space-2);
+}
+
+.ceramic-todo-create .uds-input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+.ceramic-todo-create .uds-button {
+  flex: 0 0 auto;
+}
+
+.ceramic-dashboard-renderer {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.ceramic-dashboard-block {
+  display: flex;
+  flex-direction: column;
+  grid-column: var(--ceramic-block-column) / span var(--ceramic-block-span);
+  min-inline-size: 0;
+  overflow: clip;
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-dashboard-block > :not(.ceramic-dashboard-block-toolbar) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.ceramic-dashboard-block[data-locked='true'] {
+  border-color: var(--interaction-selection-border);
+}
+
+.ceramic-dashboard-block-toolbar {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding: var(--space-2) var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+  background: var(--muted);
+}
+
+.ceramic-dashboard-block-toolbar > div {
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-dashboard-block-toolbar strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ceramic-dashboard-missing,
+.ceramic-dashboard-error {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  color: var(--muted-foreground);
+}
+
+.ceramic-dashboard-missing strong,
+.ceramic-dashboard-error strong {
+  color: var(--foreground);
+}
+
+.ceramic-dashboard-block .uds-scheduler-root {
+  border: 0;
+}
+
+.ceramic-puck-canvas {
+  container-name: ceramic-puck-canvas;
+  container-type: inline-size;
+  min-block-size: 100%;
+  min-inline-size: 0;
+  padding: var(--space-4);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.ceramic-puck-canvas > [class*='_DropZone_'] {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.ceramic-puck-block-preview {
+  display: flex;
+  flex-direction: column;
+  grid-column: span var(--ceramic-puck-span);
+  min-block-size: 20rem;
+  min-inline-size: 0;
+  overflow: clip;
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-puck-block-preview[data-block-type='calendar-panel'] {
+  block-size: 34rem;
+  min-block-size: 34rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='todo-list'] {
+  container-type: inline-size;
+}
+
+.ceramic-puck-block-preview[data-block-type='activity-feed'] {
+  min-block-size: 24rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='agent-status'] {
+  min-block-size: 30rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='issue-table'],
+.ceramic-puck-block-preview[data-block-type='chart-panel'] {
+  min-block-size: 34rem;
+}
+
+.ceramic-puck-block-preview[data-locked='true'] {
+  border-color: var(--interaction-selection-border);
+}
+
+.ceramic-puck-block-preview .uds-scheduler-root,
+.ceramic-puck-block-preview .ceramic-kpi-grid {
+  border: 0;
+}
+
+.ceramic-issue-table-block,
+.ceramic-chart-panel-block {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  block-size: 100%;
+  padding: var(--space-3);
+  background: var(--surface);
+}
+
+.ceramic-issue-table-block .uds-database-root {
+  block-size: 100%;
+}
+
+.ceramic-chart-panel-state {
+  display: grid;
+  place-content: center;
+  justify-items: start;
+  gap: var(--space-2);
+  min-block-size: 20rem;
+  padding: var(--space-4);
+  color: var(--muted-foreground);
+}
+
+.ceramic-chart-panel-state strong {
+  color: var(--foreground);
+}
+
+@container (max-width: 30rem) {
+  .ceramic-puck-block-preview .ceramic-todo-items > li {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ceramic-puck-block-preview .ceramic-todo-items > li > div {
+    padding-inline-start: calc(var(--control-size-sm) + var(--space-2));
+  }
+}
+
+@container ceramic-puck-canvas (max-width: 42rem) {
+  .ceramic-puck-block-preview {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 48rem) {
+  .ceramic-dashboard-block {
+    grid-column: 1 / -1;
+    grid-row: auto;
+  }
+
+  .ceramic-puck-block-preview {
+    grid-column: 1 / -1;
+  }
+
+  .ceramic-dashboard-block-toolbar {
+    align-items: start;
+  }
+}
+
+@media (max-width: 28rem) {
+  .ceramic-dashboard-block-toolbar > div:first-child .uds-badge {
+    display: none;
+  }
+
+  .ceramic-dashboard-block-toolbar > div:first-child strong {
+    overflow: visible;
+    white-space: normal;
+  }
+
+  .ceramic-todo-items > li {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ceramic-todo-items > li > div {
+    padding-inline-start: calc(var(--control-size-sm) + var(--space-2));
+  }
+}

package/data/blocks/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/blocks/database-workspace/README.md

@@ -0,0 +1,9 @@
+# Database Workspace blocks
+
+Copyable Ceramic blocks for a schema-driven Notion-style workspace:
+`DatabaseToolbar`, `DatabaseTableBlock`, `SavedViewsBar`,
+`RecordDetailDrawer`, and `BulkActionBar`.
+
+Product code owns persistence, permissions, queries, and copy/paste data.
+Ceramic owns the semantic grid, mobile record transformation, states, keyboard
+model, tokens, and optimistic recovery contract.

package/data/blocks/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%;
+  }
+}