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

package/data/templates/dashboard-composer/CeramicPuckAdapter.tsx

@@ -0,0 +1,380 @@
+import * as React from 'react'
+import type { Config, Data, Field } from '@puckeditor/core'
+import {
+  getCeramicBlockDefinition,
+  listCeramicBlockDefinitions,
+  validateCeramicAgentMutation,
+  type CeramicBlockDefinition,
+  type CeramicLayoutBlock,
+  type CeramicLayoutDocument,
+  type CeramicPropRule,
+} from '@utopia-studio-design/design-system/Composition'
+import type { CeramicBlockRenderer } from './DashboardComposerBlocks'
+
+type PuckBlockProps = Record<string, unknown> & { id: string }
+
+export interface CeramicPuckConversionResult {
+  layout: CeramicLayoutDocument | null
+  issues: string[]
+  ok: boolean
+}
+
+export interface CeramicPuckAdapterOptions {
+  colorMode?: 'light' | 'dark'
+  direction?: 'ltr' | 'rtl'
+  layout: CeramicLayoutDocument
+  renderers: Record<string, CeramicBlockRenderer>
+}
+
+const fallbackDefaults: Record<string, Record<string, unknown>> = {
+  'agent-status': {
+    density: 'default',
+    direction: 'inherit',
+    filter: 'all',
+    locale: 'en-US',
+    maxItems: 6,
+    showApprovals: true,
+    timeZone: 'UTC',
+  },
+  'activity-feed': {
+    density: 'default',
+    direction: 'inherit',
+    groupBy: 'day',
+    locale: 'en-US',
+    pageSize: 4,
+    showSources: true,
+    timeZone: 'UTC',
+  },
+  'calendar-panel': {
+    direction: 'inherit',
+    initialScrollHour: 8,
+    locale: 'en-US',
+    secondaryCalendar: 'none',
+    showAgendaAlternative: false,
+    timeZone: 'UTC',
+    view: 'week',
+  },
+  'chart-panel': {
+    chartType: 'line',
+    comparison: 'previous-period',
+    showTable: false,
+  },
+  'issue-table': {
+    columns: ['title', 'status', 'priority', 'owner', 'due'],
+    density: 'default',
+    view: 'active',
+  },
+  'metric-grid': {
+    comparison: 'previous-period',
+    density: 'compact',
+    metrics: ['open', 'completed', 'focus'],
+  },
+  'todo-list': {
+    density: 'default',
+    filter: 'all',
+    showCompleted: true,
+    title: 'New task list',
+  },
+}
+
+function makeArrayField(label: string, rule: Extract<CeramicPropRule, { type: 'array' }>): Field {
+  return {
+    type: 'custom',
+    label,
+    render: ({ id, onChange, value }) => (
+      <textarea
+        aria-describedby={`${id}-hint`}
+        aria-label={label}
+        id={id}
+        rows={4}
+        value={Array.isArray(value) ? value.join('\n') : ''}
+        onChange={(event) => {
+          const values = event.currentTarget.value
+            .split('\n')
+            .map((entry) => entry.trim())
+            .filter(Boolean)
+          if (rule.items.type === 'number') {
+            onChange(values.map(Number).filter(Number.isFinite))
+            return
+          }
+          if (rule.items.type === 'boolean') {
+            onChange(values.map((entry) => entry === 'true'))
+            return
+          }
+          onChange(values)
+        }}
+      />
+    ),
+  } as Field
+}
+
+function fieldFromRule(name: string, rule: CeramicPropRule): Field {
+  const label = name.replace(/([a-z])([A-Z])/g, '$1 $2')
+  if (rule.type === 'string' && rule.enum) {
+    return {
+      type: 'select',
+      label,
+      options: rule.enum.map((value) => ({ label: value, value })),
+    }
+  }
+  if (rule.type === 'string') return { type: 'text', label }
+  if (rule.type === 'number') {
+    return {
+      type: 'number',
+      label,
+      min: rule.minimum,
+      max: rule.maximum,
+    }
+  }
+  if (rule.type === 'boolean') {
+    return {
+      type: 'radio',
+      label,
+      options: [
+        { label: 'Show', value: true },
+        { label: 'Hide', value: false },
+      ],
+    }
+  }
+  return makeArrayField(label, rule)
+}
+
+function registeredProps(
+  definition: CeramicBlockDefinition,
+  props: Record<string, unknown>,
+) {
+  const allowed = new Set(Object.keys(definition.propsSchema.properties))
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => allowed.has(key)),
+  )
+}
+
+function blockSpan(
+  definition: CeramicBlockDefinition,
+  block: CeramicLayoutBlock | undefined,
+  columns: number,
+) {
+  if (block && definition.allowedSpans.includes(block.placement.span)) {
+    return block.placement.span
+  }
+  return Math.max(...definition.allowedSpans.filter((span) => span <= columns))
+}
+
+function packBlocks(
+  blocks: CeramicLayoutBlock[],
+  columns: number,
+  lockedIds: Set<string>,
+) {
+  let cursor = 1
+  return [...blocks]
+    .sort((left, right) => left.placement.order - right.placement.order)
+    .map((block) => {
+    if (lockedIds.has(block.id)) {
+      cursor = 1
+      return block
+    }
+    if (cursor + block.placement.span - 1 > columns) cursor = 1
+    const column = cursor
+    cursor += block.placement.span
+    if (cursor > columns) cursor = 1
+    return {
+      ...block,
+      placement: {
+        ...block.placement,
+        column,
+      },
+    }
+  })
+}
+
+export function ceramicLayoutToPuckData(layout: CeramicLayoutDocument): Data {
+  return {
+    content: [...layout.blocks]
+      .sort((left, right) => left.placement.order - right.placement.order)
+      .map((block) => ({
+        type: block.type,
+        props: {
+          id: block.id,
+          ...block.props,
+        },
+      })),
+    root: {},
+  }
+}
+
+export function puckDataToCeramicLayout(
+  data: Data,
+  current: CeramicLayoutDocument,
+): CeramicPuckConversionResult {
+  const currentById = new Map(current.blocks.map((block) => [block.id, block]))
+  const lockedIds = new Set([
+    ...current.blocks.filter((block) => block.locked).map((block) => block.id),
+    ...(current.regions ?? []).flatMap((region) => region.locked ? region.blockIds : []),
+  ])
+  const lockedOrders = new Set(
+    current.blocks
+      .filter((block) => lockedIds.has(block.id))
+      .map((block) => block.placement.order),
+  )
+  const issues: string[] = []
+  let nextOrder = 1
+  const nextBlocks = data.content.flatMap((item) => {
+    const definition = getCeramicBlockDefinition(item.type)
+    if (!definition || definition.availability !== 'available') {
+      issues.push(`Puck returned an unregistered or unavailable block type: ${String(item.type)}.`)
+      return []
+    }
+    const itemProps = item.props as PuckBlockProps
+    const previous = currentById.get(itemProps.id)
+    const props = registeredProps(definition, itemProps)
+    const span = blockSpan(definition, previous, current.columns)
+    const locked = lockedIds.has(itemProps.id)
+    if (!locked) {
+      while (lockedOrders.has(nextOrder)) nextOrder += 1
+    }
+    const order = locked && previous ? previous.placement.order : nextOrder++
+    if (locked) nextOrder = Math.max(nextOrder, order + 1)
+    return [{
+      id: itemProps.id,
+      type: definition.id,
+      version: definition.version,
+      placement: {
+        column: locked && previous ? previous.placement.column : 1,
+        span,
+        order,
+        compactSpan: previous?.placement.compactSpan ?? current.columns,
+      },
+      props,
+      locked: previous?.locked ?? false,
+    } satisfies CeramicLayoutBlock]
+  })
+
+  const blockIds = new Set(nextBlocks.map((block) => block.id))
+  const next: CeramicLayoutDocument = {
+    ...current,
+    blocks: packBlocks(nextBlocks, current.columns, lockedIds),
+    regions: current.regions?.map((region) => ({
+      ...region,
+      blockIds: region.blockIds.filter((blockId) => blockIds.has(blockId)),
+    })),
+  }
+  const mutation = validateCeramicAgentMutation(current, next)
+  const mutationIssues = mutation.issues.map((issue) => issue.message)
+  return {
+    layout: issues.length || !mutation.ok ? null : next,
+    issues: [...issues, ...mutationIssues],
+    ok: issues.length === 0 && mutation.ok,
+  }
+}
+
+export function createCeramicPuckConfig({
+  colorMode = 'light',
+  direction = 'ltr',
+  layout,
+  renderers,
+}: CeramicPuckAdapterOptions): Config {
+  const currentById = new Map(layout.blocks.map((block) => [block.id, block]))
+  const lockedIds = new Set([
+    ...layout.blocks.filter((block) => block.locked).map((block) => block.id),
+    ...(layout.regions ?? []).flatMap((region) => region.locked ? region.blockIds : []),
+  ])
+  const definitions = listCeramicBlockDefinitions({ renderableOnly: true })
+    .filter((definition) => renderers[definition.id])
+  const components = Object.fromEntries(definitions.map((definition) => {
+    const Renderer = renderers[definition.id]
+    const fields = Object.fromEntries(
+      definition.agentPermissions.editableProps
+        .filter((name) => definition.propsSchema.properties[name])
+        .map((name) => [name, fieldFromRule(name, definition.propsSchema.properties[name])]),
+    )
+    const defaults = {
+      ...(fallbackDefaults[definition.id] ?? {}),
+      ...(layout.blocks.find((block) => block.type === definition.id)?.props ?? {}),
+    }
+
+    return [definition.id, {
+      defaultProps: defaults,
+      fields,
+      inline: true,
+      label: definition.title,
+      permissions: {
+        delete: definition.agentPermissions.remove,
+        drag: definition.agentPermissions.move,
+        duplicate: definition.agentPermissions.create,
+        edit: definition.agentPermissions.editableProps.length > 0,
+        insert: definition.agentPermissions.create,
+      },
+      resolvePermissions: ({ props }: { props: PuckBlockProps }, { permissions }: { permissions: Record<string, boolean> }) => (
+        lockedIds.has(props.id)
+          ? { ...permissions, delete: false, drag: false, duplicate: false, edit: false }
+          : permissions
+      ),
+      render: (allProps: PuckBlockProps & {
+        editMode?: boolean
+        puck: {
+          dragRef?: React.Ref<HTMLElement>
+        }
+      }) => {
+        const { editMode: _editMode, id, puck, ...rawProps } = allProps
+        const previous = currentById.get(id)
+        const block: CeramicLayoutBlock = {
+          id,
+          type: definition.id,
+          version: definition.version,
+          placement: previous?.placement ?? {
+            column: 1,
+            span: blockSpan(definition, undefined, layout.columns),
+            order: 1,
+            compactSpan: layout.columns,
+          },
+          props: registeredProps(definition, rawProps),
+          locked: lockedIds.has(id),
+        }
+        return (
+          <article
+            className="ceramic-puck-block-preview"
+            data-block-type={definition.id}
+            data-locked={block.locked || undefined}
+            ref={puck.dragRef}
+            style={{
+              '--ceramic-puck-span': block.placement.span,
+            } as React.CSSProperties}
+          >
+            <Renderer block={block} direction={direction} />
+          </article>
+        )
+      },
+    }]
+  }))
+
+  const categories = Object.fromEntries(
+    [...new Set(definitions.map((definition) => definition.category))].map((category) => [
+      category,
+      {
+        components: definitions
+          .filter((definition) => definition.category === category)
+          .map((definition) => definition.id),
+        defaultExpanded: true,
+        title: category,
+      },
+    ]),
+  )
+
+  return {
+    categories,
+    components,
+    root: {
+      render: ({ children }: { children: React.ReactNode }) => (
+        <main
+          aria-label="Ceramic Puck canvas"
+          className="ceramic-puck-canvas"
+          data-color-mode={colorMode}
+          data-theme={layout.theme}
+          dir={direction}
+        >
+          {children}
+        </main>
+      ),
+    },
+  } as Config
+}