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

package/data/templates/dashboard-composer/sample-layout.json

@@ -0,0 +1,147 @@
+{
+  "schemaVersion": 1,
+  "id": "personal-workspace",
+  "theme": "utopia-default",
+  "columns": 12,
+  "blocks": [
+    {
+      "id": "today-tasks",
+      "type": "todo-list",
+      "version": 1,
+      "placement": {
+        "column": 1,
+        "span": 4,
+        "order": 1,
+        "compactSpan": 12
+      },
+      "props": {
+        "title": "Today’s priorities",
+        "filter": "all",
+        "density": "default",
+        "showCompleted": true
+      },
+      "locked": false
+    },
+    {
+      "id": "team-calendar",
+      "type": "calendar-panel",
+      "version": 1,
+      "placement": {
+        "column": 5,
+        "span": 8,
+        "order": 2,
+        "compactSpan": 12
+      },
+      "props": {
+        "direction": "inherit",
+        "initialScrollHour": 8,
+        "locale": "en-US",
+        "secondaryCalendar": "none",
+        "showAgendaAlternative": false,
+        "view": "week",
+        "timeZone": "Asia/Seoul"
+      },
+      "locked": false
+    },
+    {
+      "id": "progress-metrics",
+      "type": "metric-grid",
+      "version": 1,
+      "placement": {
+        "column": 1,
+        "span": 6,
+        "order": 3,
+        "compactSpan": 12
+      },
+      "props": {
+        "metrics": ["open", "completed", "focus"],
+        "density": "compact",
+        "comparison": "previous-period"
+      },
+      "locked": true
+    },
+    {
+      "id": "workspace-activity",
+      "type": "activity-feed",
+      "version": 1,
+      "placement": {
+        "column": 7,
+        "span": 6,
+        "order": 4,
+        "compactSpan": 12
+      },
+      "props": {
+        "density": "default",
+        "direction": "inherit",
+        "groupBy": "day",
+        "locale": "en-US",
+        "pageSize": 3,
+        "showSources": true,
+        "timeZone": "Asia/Seoul"
+      },
+      "locked": false
+    },
+    {
+      "id": "agent-operations",
+      "type": "agent-status",
+      "version": 1,
+      "placement": {
+        "column": 1,
+        "span": 12,
+        "order": 5,
+        "compactSpan": 12
+      },
+      "props": {
+        "density": "default",
+        "direction": "inherit",
+        "filter": "all",
+        "locale": "en-US",
+        "maxItems": 4,
+        "showApprovals": true,
+        "timeZone": "Asia/Seoul"
+      },
+      "locked": false
+    },
+    {
+      "id": "delivery-issues",
+      "type": "issue-table",
+      "version": 1,
+      "placement": {
+        "column": 1,
+        "span": 6,
+        "order": 6,
+        "compactSpan": 12
+      },
+      "props": {
+        "view": "active",
+        "density": "compact",
+        "columns": ["title", "status", "priority", "owner", "due"]
+      },
+      "locked": false
+    },
+    {
+      "id": "delivery-throughput",
+      "type": "chart-panel",
+      "version": 1,
+      "placement": {
+        "column": 7,
+        "span": 6,
+        "order": 7,
+        "compactSpan": 12
+      },
+      "props": {
+        "chartType": "line",
+        "comparison": "previous-period",
+        "showTable": false
+      },
+      "locked": false
+    }
+  ],
+  "regions": [
+    {
+      "id": "progress-summary",
+      "locked": true,
+      "blockIds": ["progress-metrics"]
+    }
+  ]
+}

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

@@ -0,0 +1,198 @@
+* { box-sizing: border-box; }
+html, body, #root {
+  min-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin: 0;
+}
+html { scrollbar-gutter: stable; }
+html,
+body {
+  overflow-x: clip;
+}
+body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
+.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-modal); translate: 0 -200%; }
+.skip-link:focus { translate: 0; }
+
+.dashboard-composer-template {
+  min-block-size: 100vh;
+  padding: var(--page-gutter);
+  background: var(--background);
+  color: var(--foreground);
+  text-align: start;
+}
+
+.dashboard-composer-template > * {
+  max-inline-size: var(--container-wide);
+  margin-inline: auto;
+}
+
+.dashboard-composer-template :is(h1, h2, p) {
+  margin: 0;
+}
+
+.composer-header,
+.composer-controls,
+.composer-palette {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--space-5);
+  padding-block: var(--space-5);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.composer-header > div:first-child,
+.composer-controls > div:first-child,
+.composer-palette > div:first-child {
+  display: grid;
+  gap: var(--space-2);
+  max-inline-size: 52rem;
+}
+
+.composer-header > div:last-child,
+.composer-controls > div:nth-child(2),
+.composer-palette > div:last-child {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.composer-header span,
+.composer-controls > div:first-child > span,
+.composer-palette > 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;
+}
+
+.composer-header p,
+.composer-json p {
+  color: var(--muted-foreground);
+  line-height: var(--line-height-body);
+}
+
+.composer-controls {
+  display: grid;
+  grid-template-columns: minmax(14rem, .8fr) minmax(22rem, 1.2fr);
+  align-items: center;
+}
+
+.composer-controls > div:nth-child(2) {
+  justify-content: end;
+}
+
+.composer-controls output {
+  display: flex;
+  align-items: center;
+  grid-column: 1 / -1;
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+  color: var(--foreground);
+}
+
+.composer-controls output > span {
+  overflow-wrap: anywhere;
+}
+
+.composer-palette {
+  align-items: center;
+}
+
+.dashboard-composer-template > .ceramic-dashboard-renderer {
+  padding-block: var(--space-5);
+}
+
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='calendar-panel'] {
+  min-block-size: 34rem;
+}
+
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='todo-list'] {
+  min-block-size: 34rem;
+}
+
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='activity-feed'] {
+  min-block-size: 24rem;
+}
+
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='agent-status'] {
+  min-block-size: 30rem;
+}
+
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='issue-table'],
+.dashboard-composer-template .ceramic-dashboard-block[data-block-type='chart-panel'] {
+  min-block-size: 34rem;
+}
+
+.dashboard-composer-template .ceramic-kpi-grid {
+  border: 0;
+}
+
+.composer-json {
+  margin-block: var(--space-4);
+  padding: var(--space-4);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.composer-json summary {
+  cursor: pointer;
+  font-weight: var(--font-weight-semibold);
+}
+
+.composer-json p {
+  margin-block-start: var(--space-2);
+}
+
+.composer-json pre {
+  max-block-size: 30rem;
+  overflow: auto;
+  margin-block-end: 0;
+  padding: var(--space-3);
+  background: var(--background);
+  font-size: var(--font-size-small);
+}
+
+@media (max-width: 64rem) {
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='calendar-panel'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='todo-list'] {
+    min-block-size: 30rem;
+  }
+}
+
+@media (max-width: 48rem) {
+  .composer-header,
+  .composer-palette {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .composer-header > div:last-child,
+  .composer-palette > div:last-child {
+    display: grid;
+  }
+
+  .composer-controls {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .composer-controls > div:nth-child(2) {
+    display: grid;
+    justify-content: stretch;
+  }
+
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='calendar-panel'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='todo-list'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='activity-feed'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='agent-status'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='issue-table'],
+  .dashboard-composer-template .ceramic-dashboard-block[data-block-type='chart-panel'] {
+    min-block-size: auto;
+  }
+}

package/data/templates/dashboard-composer/template.manifest.json

@@ -0,0 +1,34 @@
+{
+  "id": "template-dashboard-composer",
+  "name": "Dashboard Composer",
+  "category": "application-dashboard",
+  "status": "available",
+  "purpose": "A live Ceramic Layout JSON runtime and optional Puck editing layer for real To-do, Calendar, Issue Table, Chart Panel, Activity Feed, Agent Status, and Metrics blocks.",
+  "packageImport": "@utopia-studio-design/design-system/Composition",
+  "packageDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@puckeditor/core": "^0.22.4"
+  },
+  "sourcePath": "templates/dashboard-composer/main.tsx",
+  "entryPath": "templates/dashboard-composer/index.html",
+  "blocks": ["todo-list", "calendar-panel", "issue-table", "chart-panel", "activity-feed", "agent-status", "metric-grid"],
+  "features": {
+    "layoutRenderer": true,
+    "agentMutationValidation": true,
+    "humanArrangeControls": true,
+    "lockedRegions": true,
+    "darkMode": true,
+    "rtl": true,
+    "responsiveMinimum": "320px",
+    "puckAdapter": true,
+    "puckVersion": "0.22",
+    "selfHostedEditorAssets": true,
+    "agentStatusStateLab": true
+  },
+  "translations": {
+    "ar": {
+      "name": "مؤلف لوحة المعلومات",
+      "purpose": "وقت تشغيل مباشر لتخطيط Ceramic JSON يعرض كتل المهام والتقويم وجدول المشكلات والمخططات والنشاط وحالة الوكلاء والمقاييس الحقيقية ويعيد ترتيبها."
+    }
+  }
+}

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

@@ -0,0 +1,132 @@
+import {
+  Puck,
+  usePuck,
+  type Config,
+  type Data,
+} from '@puckeditor/core'
+import { useMemo } from 'react'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import '@puckeditor/core/no-external.css'
+
+export interface PuckEditorSurfaceProps {
+  config: Config
+  data: Data
+  onChange: (data: Data) => void
+  onPublish: (data: Data) => void
+}
+
+function CeramicPuckHeader({
+  onPublish,
+}: {
+  onPublish: (data: Data) => void
+}) {
+  const {
+    appState,
+    dispatch,
+    history,
+  } = usePuck()
+  const { leftSideBarVisible, rightSideBarVisible } = appState.ui
+
+  const togglePanel = (panel: 'left' | 'right') => {
+    const isCompact = window.matchMedia('(max-width: 637px)').matches
+    const visible = panel === 'left' ? leftSideBarVisible : rightSideBarVisible
+    dispatch({
+      type: 'setUi',
+      ui: {
+        [`${panel}SideBarVisible`]: !visible,
+        ...(isCompact
+          ? {
+              [panel === 'left' ? 'rightSideBarVisible' : 'leftSideBarVisible']: false,
+            }
+          : {}),
+      },
+    })
+  }
+
+  return (
+    <header className="ceramic-puck-chrome-header">
+      <div aria-label="Editor panels" className="ceramic-puck-panel-controls" role="group">
+        <Button
+          aria-label="Blocks panel"
+          aria-pressed={leftSideBarVisible}
+          size="sm"
+          variant="outline"
+          onClick={() => togglePanel('left')}
+        >
+          Blocks
+        </Button>
+        <Button
+          aria-label="Properties panel"
+          aria-pressed={rightSideBarVisible}
+          size="sm"
+          variant="outline"
+          onClick={() => togglePanel('right')}
+        >
+          Properties
+        </Button>
+      </div>
+
+      <h2>
+        <span>Ceramic Dashboard</span>
+        <code>Dashboard / Personal workspace</code>
+      </h2>
+
+      <div aria-label="Document actions" className="ceramic-puck-document-actions">
+        <Button
+          aria-label="Undo"
+          disabled={!history.hasPast}
+          size="sm"
+          variant="ghost"
+          onClick={history.back}
+        >
+          Undo
+        </Button>
+        <Button
+          aria-label="Redo"
+          disabled={!history.hasFuture}
+          size="sm"
+          variant="ghost"
+          onClick={history.forward}
+        >
+          Redo
+        </Button>
+        <Button size="sm" onClick={() => onPublish(appState.data)}>
+          Publish
+        </Button>
+      </div>
+    </header>
+  )
+}
+
+export default function PuckEditorSurface({
+  config,
+  data,
+  onChange,
+  onPublish,
+}: PuckEditorSurfaceProps) {
+  const overrides = useMemo(
+    () => ({
+      header: () => <CeramicPuckHeader onPublish={onPublish} />,
+    }),
+    [onPublish],
+  )
+
+  return (
+    <Puck
+      config={config}
+      data={data}
+      height="100%"
+      iframe={{ enabled: false }}
+      overrides={overrides}
+      permissions={{ insert: true }}
+      ui={{ rightSideBarVisible: false }}
+      viewports={[
+        { width: 1280, height: 900, label: 'Desktop' },
+        { width: 768, height: 1024, label: 'Tablet' },
+        { width: 320, height: 800, label: 'Mobile' },
+      ]}
+      onChange={onChange}
+      onPublish={onPublish}
+    />
+  )
+}