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

package/data/templates/dashboard-composer/visual-editor/VisualEditorApp.tsx

@@ -0,0 +1,343 @@
+import {
+  Component,
+  Suspense,
+  createContext,
+  lazy,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ErrorInfo,
+  type ReactNode,
+} from 'react'
+import type { Data } from '@puckeditor/core'
+import { Badge } from '@utopia-studio-design/design-system/Badge'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import type { SchedulerEvent } from '@utopia-studio-design/design-system/Calendar'
+import type {
+  CeramicLayoutBlock,
+  CeramicLayoutDocument,
+} from '@utopia-studio-design/design-system/Composition'
+import { AgentStatusBlock } from '../AgentStatusBlock'
+import { resolveAgentStatusConfiguration } from '../agent-status-contract'
+import { getAgentStatusFixture } from '../agent-status-fixture'
+import { ActivityFeedBlock } from '../ActivityFeedBlock'
+import { resolveActivityFeedConfiguration } from '../activity-feed-contract'
+import { getActivityFeedFixture } from '../activity-feed-fixture'
+import {
+  KPIGrid,
+  type MetricDefinition,
+} from '../AnalyticsMetricBlocks'
+import { SchedulerShell } from '../CalendarApplicationBlocks'
+import { resolveCalendarPanelConfiguration } from '../calendar-panel-contract'
+import {
+  TodoListBlock,
+  type CeramicBlockRenderer,
+  type TodoFilter,
+  type TodoItem,
+} from '../DashboardComposerBlocks'
+import {
+  ChartPanelRegistryBlock,
+  IssueTableRegistryBlock,
+} from '../RegistryDataBlocks'
+import {
+  ceramicLayoutToPuckData,
+  createCeramicPuckConfig,
+  puckDataToCeramicLayout,
+} from '../CeramicPuckAdapter'
+import '../agent-status.css'
+import '../activity-feed.css'
+import '../analytics-dashboard.css'
+import '../calendar-application.css'
+import '../dashboard-composer.css'
+import initialLayoutDocument from '../sample-layout.json'
+
+const PuckEditorSurface = lazy(() => import('./PuckEditorSurface'))
+
+const initialLayout = initialLayoutDocument as CeramicLayoutDocument
+const anchorDate = new Date(2026, 2, 9, 12)
+
+const initialTasks: TodoItem[] = [
+  { id: 'puck-todo-1', title: 'Review the visual editor boundary', completed: true, dueLabel: 'Today', priority: 'high' },
+  { id: 'puck-todo-2', title: 'Rearrange the Calendar block', completed: false, dueLabel: 'Today', priority: 'medium' },
+  { id: 'puck-todo-3', title: 'Publish validated Layout JSON', completed: false, dueLabel: 'Tomorrow', priority: 'low' },
+]
+
+const events: SchedulerEvent[] = [
+  {
+    id: 'puck-review',
+    title: 'Puck adapter review',
+    start: '2026-03-09T01:00:00.000Z',
+    end: '2026-03-09T02:00:00.000Z',
+    tone: 'accent',
+  },
+  {
+    id: 'registry-check',
+    title: 'Registry contract check',
+    start: '2026-03-10T04:00:00.000Z',
+    end: '2026-03-10T05:00:00.000Z',
+    tone: 'positive',
+  },
+]
+
+const arabicEventTitles: Record<string, string> = {
+  'puck-review': 'مراجعة محرر Puck',
+  'registry-check': 'فحص عقد السجل',
+}
+
+const metrics: MetricDefinition[] = [
+  { id: 'open', label: 'Open tasks', value: 2, change: -33, changeLabel: 'vs yesterday' },
+  { id: 'completed', label: 'Completed', value: 8, change: 14, changeLabel: 'this week' },
+  { id: 'focus', label: 'Focus hours', value: 12.5, change: 6, changeLabel: 'this week' },
+]
+
+interface EditorFixtureData {
+  compact: boolean
+  tasks: TodoItem[]
+  setTasks: (tasks: TodoItem[]) => void
+}
+
+const EditorFixtureContext = createContext<EditorFixtureData | null>(null)
+
+function useEditorFixture() {
+  const value = useContext(EditorFixtureContext)
+  if (!value) throw new Error('Puck block renderer must be used inside EditorFixtureContext.')
+  return value
+}
+
+function TodoRenderer({ block }: { block: CeramicLayoutBlock }) {
+  const { tasks, setTasks } = useEditorFixture()
+  return (
+    <TodoListBlock
+      density={(block.props.density as 'compact' | 'default' | 'comfortable') ?? 'default'}
+      filter={(block.props.filter as TodoFilter) ?? 'all'}
+      items={tasks}
+      showCompleted={block.props.showCompleted !== false}
+      title={(block.props.title as string) ?? 'Today’s tasks'}
+      onItemsChange={setTasks}
+    />
+  )
+}
+
+function CalendarRenderer({
+  block,
+  direction,
+}: {
+  block: CeramicLayoutBlock
+  direction: 'ltr' | 'rtl'
+}) {
+  const { compact } = useEditorFixture()
+  const configuration = resolveCalendarPanelConfiguration(block.props, { compact, direction })
+  const displayEvents = configuration.locale.startsWith('ar')
+    ? events.map((event) => ({
+      ...event,
+      title: arabicEventTitles[event.id] ?? event.title,
+    }))
+    : events
+  return (
+    <SchedulerShell
+      {...configuration}
+      date={anchorDate}
+      events={displayEvents}
+      permissions={{ create: false, edit: false, move: false, resize: false, duplicate: false, delete: false }}
+      onDateChange={() => undefined}
+      onEventsChange={() => undefined}
+      onViewChange={() => undefined}
+    />
+  )
+}
+
+function MetricsRenderer({ block }: { block: CeramicLayoutBlock }) {
+  const metricIds = new Set((block.props.metrics as string[]) ?? metrics.map((metric) => metric.id))
+  return (
+    <KPIGrid
+      density={(block.props.density as 'compact' | 'default' | 'comfortable') ?? 'compact'}
+      metrics={metrics.filter((metric) => metricIds.has(metric.id))}
+    />
+  )
+}
+
+function ActivityRenderer({
+  block,
+  direction,
+}: {
+  block: CeramicLayoutBlock
+  direction: 'ltr' | 'rtl'
+}) {
+  const configuration = resolveActivityFeedConfiguration(block.props, { direction })
+  return (
+    <ActivityFeedBlock
+      {...configuration}
+      items={getActivityFeedFixture(configuration.locale)}
+    />
+  )
+}
+
+function AgentStatusRenderer({
+  block,
+  direction,
+}: {
+  block: CeramicLayoutBlock
+  direction: 'ltr' | 'rtl'
+}) {
+  const configuration = resolveAgentStatusConfiguration(block.props, { direction })
+  return (
+    <AgentStatusBlock
+      {...configuration}
+      items={getAgentStatusFixture(configuration.locale)}
+    />
+  )
+}
+
+const renderers: Record<string, CeramicBlockRenderer> = {
+  'agent-status': AgentStatusRenderer,
+  'activity-feed': ActivityRenderer,
+  'calendar-panel': CalendarRenderer,
+  'chart-panel': ChartPanelRegistryBlock,
+  'issue-table': IssueTableRegistryBlock,
+  'metric-grid': MetricsRenderer,
+  'todo-list': TodoRenderer,
+}
+
+class EditorLoadBoundary extends Component<
+  { children: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false }
+
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('The optional Puck editor failed to load.', error, info)
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <div className="ceramic-puck-editor-state" role="alert">
+          <strong>Visual editor could not load.</strong>
+          <p>The Ceramic layout is safe. Reload this optional editing layer to try again.</p>
+          <Button onClick={() => window.location.reload()}>Retry loading editor</Button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default function VisualEditorApp() {
+  const [layout, setLayout] = useState<CeramicLayoutDocument>(() => structuredClone(initialLayout))
+  const [puckData, setPuckData] = useState<Data>(() => ceramicLayoutToPuckData(initialLayout))
+  const [tasks, setTasks] = useState(initialTasks)
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr')
+  const [dark, setDark] = useState(false)
+  const [compact, setCompact] = useState(() => window.matchMedia('(max-width: 48rem)').matches)
+  const [feedback, setFeedback] = useState('Registry connected. Reorder a block or edit a registered field.')
+  const [valid, setValid] = useState(true)
+  const config = useMemo(
+    () => createCeramicPuckConfig({
+      colorMode: dark ? 'dark' : 'light',
+      direction,
+      layout,
+      renderers,
+    }),
+    [dark, direction, layout],
+  )
+  const fixture = useMemo(() => ({ compact, tasks, setTasks }), [compact, tasks])
+
+  useEffect(() => {
+    const media = window.matchMedia('(max-width: 48rem)')
+    const handleChange = () => setCompact(media.matches)
+    media.addEventListener('change', handleChange)
+    return () => media.removeEventListener('change', handleChange)
+  }, [])
+
+  const inspectDraft = (data: Data) => {
+    setPuckData(data)
+    const result = puckDataToCeramicLayout(data, layout)
+    setValid(result.ok)
+    setFeedback(
+      result.ok
+        ? 'Draft is valid Ceramic Layout JSON. Publish to apply it to this demo session.'
+        : `Draft rejected: ${result.issues[0] ?? 'Unknown registry violation.'}`,
+    )
+  }
+
+  const publish = (data: Data) => {
+    const result = puckDataToCeramicLayout(data, layout)
+    if (!result.ok || !result.layout) {
+      setValid(false)
+      setFeedback(`Publish rejected: ${result.issues[0] ?? 'Unknown registry violation.'}`)
+      return
+    }
+    setLayout(result.layout)
+    setPuckData(ceramicLayoutToPuckData(result.layout))
+    setValid(true)
+    setFeedback('Published to this demo session after Ceramic mutation validation.')
+  }
+
+  return (
+    <EditorFixtureContext.Provider value={fixture}>
+      <main
+        className="ceramic-puck-editor"
+        data-color-mode={dark ? 'dark' : 'light'}
+        data-preview-direction={direction}
+        data-theme="utopia-default"
+        dir="ltr"
+      >
+        <header className="ceramic-puck-editor-header">
+          <div>
+            <span>Optional editing layer</span>
+            <h1>Ceramic blocks, arranged with Puck</h1>
+            <p>Puck edits only registered semantic fields. Ceramic still validates the published Layout JSON.</p>
+          </div>
+          <div aria-label="Visual editor controls">
+            <Button asChild variant="outline">
+              <a href="/templates/dashboard-composer/">Back to runtime</a>
+            </Button>
+            <Button variant="outline" onClick={() => setDirection((value) => value === 'ltr' ? 'rtl' : 'ltr')}>
+              {direction === 'ltr' ? 'Switch canvas to RTL' : 'Switch canvas to LTR'}
+            </Button>
+            <Button variant="outline" onClick={() => setDark((value) => !value)}>
+              {dark ? 'Switch to light' : 'Switch to dark'}
+            </Button>
+          </div>
+          <output aria-live="polite" data-valid={valid}>
+            <Badge variant={valid ? 'secondary' : 'destructive'}>
+              {valid ? 'Registry valid' : 'Registry rejected'}
+            </Badge>
+            <span>{feedback}</span>
+          </output>
+        </header>
+
+        <section aria-label="Puck visual editor" className="ceramic-puck-editor-shell">
+          <EditorLoadBoundary>
+            <Suspense
+              fallback={(
+                <div className="ceramic-puck-editor-state" role="status" aria-live="polite">
+                  <strong>Loading visual editor…</strong>
+                  <p>The Ceramic shell is ready while the optional editing layer loads.</p>
+                </div>
+              )}
+            >
+              <PuckEditorSurface
+                config={config}
+                data={puckData}
+                onChange={inspectDraft}
+                onPublish={publish}
+              />
+            </Suspense>
+          </EditorLoadBoundary>
+        </section>
+
+        <details className="ceramic-puck-json">
+          <summary>Inspect the last validated Layout JSON</summary>
+          <pre>{JSON.stringify(layout, null, 2)}</pre>
+        </details>
+      </main>
+    </EditorFixtureContext.Provider>
+  )
+}

package/data/templates/dashboard-composer/visual-editor/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A Puck visual editor generated from the Ceramic Composition Registry."
+    />
+    <link rel="icon" href="data:," />
+    <title>Ceramic Visual Editor — Dashboard Composer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/data/templates/dashboard-composer/visual-editor/main.tsx

@@ -0,0 +1,95 @@
+import {
+  Component,
+  StrictMode,
+  Suspense,
+  lazy,
+  type ErrorInfo,
+  type ReactNode,
+} from 'react'
+import { createRoot } from 'react-dom/client'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import './styles.css'
+
+const VisualEditorApp = lazy(() => import('./VisualEditorApp'))
+
+function EditorBootShell({
+  failed = false,
+}: {
+  failed?: boolean
+}) {
+  return (
+    <main
+      className="ceramic-puck-editor"
+      data-color-mode="light"
+      data-preview-direction="ltr"
+      data-theme="utopia-default"
+      dir="ltr"
+    >
+      <header className="ceramic-puck-editor-header">
+        <div>
+          <span>Optional editing layer</span>
+          <h1>Ceramic blocks, arranged with Puck</h1>
+          <p>Puck edits only registered semantic fields. Ceramic still validates the published Layout JSON.</p>
+        </div>
+      </header>
+      <section aria-label="Puck visual editor" className="ceramic-puck-editor-shell">
+        <div
+          className="ceramic-puck-editor-state"
+          role={failed ? 'alert' : 'status'}
+          aria-live="polite"
+        >
+          <strong>{failed ? 'Visual editor could not start.' : 'Preparing Ceramic editor…'}</strong>
+          <p>
+            {failed
+              ? 'The saved layout is safe. Reload the optional editing route to try again.'
+              : 'The page shell is ready while registered blocks and editing controls load.'}
+          </p>
+          {failed ? (
+            <button
+              className="ceramic-puck-retry"
+              type="button"
+              onClick={() => window.location.reload()}
+            >
+              Retry loading editor
+            </button>
+          ) : null}
+        </div>
+      </section>
+    </main>
+  )
+}
+
+class EditorBootBoundary extends Component<
+  { children: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false }
+
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('The Ceramic visual editor runtime failed to load.', error, info)
+  }
+
+  render() {
+    return this.state.failed ? <EditorBootShell failed /> : this.props.children
+  }
+}
+
+const root = createRoot(document.getElementById('root')!)
+root.render(
+  <StrictMode>
+    <EditorBootBoundary>
+      <Suspense fallback={<EditorBootShell />}>
+        <VisualEditorApp />
+      </Suspense>
+    </EditorBootBoundary>
+  </StrictMode>,
+)
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => root.unmount())
+}