@tldiagram/core-ui 1.90.1 → 1.92.0

package/src/demo/DemoPage.tsx

@@ -1,184 +0,0 @@
-/**
- * Demo entry point.
- * Overrides the real `api` singleton with localStorage-backed implementations
- * and patches window.history to redirect /views/:id → /demo/:id, all for the
- * lifetime of this component. Restores everything on unmount.
- * No auth required; served at /demo and /demo/:id routes.
- */
-
-import React, { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Box } from '@chakra-ui/react'
-import { api } from '../api/client'
-import ViewEditor from '../pages/ViewEditor'
-import { HeaderProvider } from '../components/HeaderContext'
-import { ThemeProvider } from '../context/ThemeContext'
-import { demoApi, initDemoStore } from './store'
-import { DEMO_VIEW_EDITOR_OPTIONS } from './viewEditor'
-
-// ── Override helpers ──────────────────────────────────────────────────────────
-
-type ApiOverride = Record<string, unknown>
-
-/**
- * Swap api methods + patch window.history so any /views/:id navigation is
- * silently rewritten to /demo/:id before React Router processes it.
- * Returns a function that restores everything.
- */
-function applyOverrides(): () => void {
-  const originals: [obj: ApiOverride, key: string, original: unknown][] = []
-
-  function swap(obj: ApiOverride, key: string, replacement: unknown) {
-    originals.push([obj, key, obj[key]])
-    obj[key] = replacement
-  }
-
-  // elements
-  const realElements = api.elements as unknown as ApiOverride
-  const demoElements = demoApi.elements as ApiOverride
-  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
-    swap(realElements, key, demoElements[key])
-  }
-
-  // workspace.elements
-  const realWsElements = (api.workspace as unknown as ApiOverride).elements as ApiOverride
-  const demoWsElements = demoApi.workspace.elements as ApiOverride
-  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
-    swap(realWsElements, key, demoWsElements[key])
-  }
-
-  // workspace.orgs.tagColors
-  const realTagColors = ((api.workspace as unknown as ApiOverride).orgs as ApiOverride).tagColors as ApiOverride
-  const demoTagColors = demoApi.workspace.orgs.tagColors as ApiOverride
-  for (const key of ['list', 'set']) {
-    swap(realTagColors, key, demoTagColors[key])
-  }
-
-  // workspace.views top-level methods + nested namespaces
-  const realViews = (api.workspace as unknown as ApiOverride).views as ApiOverride
-  const demoViews = demoApi.workspace.views as ApiOverride
-  for (const key of ['list', 'get', 'content', 'tree', 'create', 'update', 'delete', 'thumbnail', 'rename', 'setLevel', 'reparent']) {
-    swap(realViews, key, demoViews[key])
-  }
-  for (const ns of ['placements', 'layers', 'reactions', 'threads']) {
-    const realNs = realViews[ns] as ApiOverride
-    const demoNs = demoViews[ns] as ApiOverride
-    for (const key of Object.keys(demoNs)) {
-      swap(realNs, key, demoNs[key])
-    }
-  }
-
-  // workspace.connectors
-  const realConnectors = (api.workspace as unknown as ApiOverride).connectors as ApiOverride
-  const demoConnectors = demoApi.workspace.connectors as ApiOverride
-  for (const key of ['list', 'create', 'update', 'delete']) {
-    swap(realConnectors, key, demoConnectors[key])
-  }
-
-  // explore.load (cross-branch graph snapshot)
-  const realExplore = (api as unknown as ApiOverride).explore as ApiOverride
-  swap(realExplore, 'load', demoApi.explore.load)
-
-  // ── Patch window.history so /views/:id → /demo/:id before React Router sees it
-  const origPush = window.history.pushState.bind(window.history)
-  const origReplace = window.history.replaceState.bind(window.history)
-
-  function rewriteUrl(url: string | URL | null | undefined): string | URL | null | undefined {
-    if (typeof url !== 'string') return url
-    return url.replace(/\/views\/(\d+)/, '/demo/$1')
-  }
-
-  window.history.pushState = (state, title, url) => origPush(state, title, rewriteUrl(url))
-  window.history.replaceState = (state, title, url) => origReplace(state, title, rewriteUrl(url))
-
-  return () => {
-    for (const [obj, key, original] of originals) {
-      obj[key] = original
-    }
-    window.history.pushState = origPush
-    window.history.replaceState = origReplace
-  }
-}
-
-// ── Inner component overrides applied before children mount ─────────────────
-
-function DemoApp({
-  revealProgress,
-}: {
-  revealProgress: number
-}) {
-  // useState initializer runs synchronously during the first render of this
-  // component instance, before any child component mounts or any hook effect
-  // runs. This guarantees api overrides are in place for ViewEditor's first fetch.
-  const [restore] = useState<() => void>(() => {
-    initDemoStore()
-    return applyOverrides()
-  })
-
-  useEffect(() => restore, [restore])
-
-  return (
-    <ViewEditor
-      demoOptions={{ ...DEMO_VIEW_EDITOR_OPTIONS, revealProgress }}
-    />
-  )
-}
-
-// ── DemoNavigator: redirects bare /demo to the first root view ────────────────
-
-export function DemoNavigator() {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    // Call demoApi directly no need to apply global overrides here, which
-    // would otherwise be cleaned up after DemoApp mounts and clobber its patches.
-    initDemoStore()
-    demoApi.workspace.views.tree().then((tree) => {
-      const root = tree.find((v) => v.parent_view_id === null)
-      navigate(root ? `/demo/${root.id}` : '/demo/1', { replace: true })
-    }).catch(() => navigate('/demo/1', { replace: true }))
-  }, [navigate])
-
-  return null
-}
-
-// ── DemoPage ──────────────────────────────────────────────────────────────────
-
-export default function DemoPage() {
-  const [revealProgress, setRevealProgress] = useState(() => (window.self === window.top ? 1 : 0))
-
-  useEffect(() => {
-    if (window.self === window.top) {
-      setRevealProgress(1)
-      return
-    }
-
-    const handleMessage = (event: MessageEvent) => {
-      const data = event.data as { type?: unknown; progress?: unknown } | null
-      if (!data || data.type !== 'tldiagram-demo-progress') return
-
-      const nextProgress = Number(data.progress)
-      if (!Number.isFinite(nextProgress)) return
-
-      setRevealProgress(Math.max(0, Math.min(1, nextProgress)))
-    }
-
-    window.addEventListener('message', handleMessage)
-    return () => window.removeEventListener('message', handleMessage)
-  }, [])
-
-  return (
-    <ThemeProvider
-      storagePrefix="diag:demo"
-      defaultAccent="#63b3ed"
-      defaultBackground="#0d121e"
-      defaultElementColor="#2d3748"
-    >
-      <Box minH="100vh" bg="var(--bg-canvas)" style={{ '--editor-top-offset': '0px' } as React.CSSProperties}>
-        <HeaderProvider>
-          <DemoApp revealProgress={revealProgress} />
-        </HeaderProvider>
-      </Box>
-    </ThemeProvider>
-  )
-}

package/src/demo/seed.ts

@@ -1,67 +0,0 @@
-import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer } from '../types'
-
-const NOW = new Date().toISOString()
-
-export const DEMO_ELEMENTS: LibraryElement[] = [
-  { id: 1, name: 'User', kind: 'person', description: 'End user of the system', technology: null, url: null, logo_url: "https://tldiagram.com/app/icons/azure-users.png", technology_connectors: [], tags: ['external'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 2, name: 'Web App', kind: 'service', description: 'React single-page application', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: true, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 3, name: 'API Gateway', kind: 'service', description: 'REST API gateway', technology: 'Golang', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 4, name: 'Auth Service', kind: 'service', description: 'Handles authentication & sessions', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 5, name: 'Frontend', kind: 'service', description: 'React frontend bundle', technology: 'React', url: null, logo_url: null, technology_connectors: [], tags: ['frontend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 6, name: 'Backend', kind: 'service', description: 'Core business logic API', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 7, name: 'PostgreSQL', kind: 'database', description: 'Primary relational database', technology: 'PostgreSQL', url: null, logo_url: null, technology_connectors: [], tags: ['data'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 8, name: 'Redis Cache', kind: 'database', description: 'In-memory cache and session store', technology: 'Redis', url: null, logo_url: null, technology_connectors: [], tags: ['data'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-  { id: 9, name: 'CDN', kind: 'service', description: 'Content delivery network', technology: 'Cloudflare', url: null, logo_url: null, technology_connectors: [], tags: ['external', 'infrastructure'], has_view: false, view_label: null, created_at: NOW, updated_at: NOW },
-]
-
-export const DEMO_VIEWS: ViewTreeNode[] = [
-  {
-    id: 1, name: 'System Context', description: 'Top-level system context view', level_label: 'Context', level: 1, depth: 0,
-    owner_element_id: null, parent_view_id: null, created_at: NOW, updated_at: NOW, children: [
-      {
-        id: 2, name: 'Web App – Containers', description: 'Container-level view of the Web App', level_label: 'Container', level: 2, depth: 1,
-        owner_element_id: 2, parent_view_id: 1, created_at: NOW, updated_at: NOW, children: [],
-      },
-    ],
-  },
-]
-
-type ViewPlacements = Record<number, PlacedElement[]>
-type ViewConnectors = Record<number, Connector[]>
-
-export const DEMO_PLACEMENTS: ViewPlacements = {
-  1: [
-    { id: 101, view_id: 1, element_id: 1, position_x: 80, position_y: 200, name: 'User', kind: 'person', description: 'End user of the system', technology: null, url: null, logo_url: "https://tldiagram.com/app/icons/azure-users.png", technology_connectors: [], tags: ['external'], has_view: false, view_label: null },
-    { id: 102, view_id: 1, element_id: 2, position_x: 380, position_y: 200, name: 'Web App', kind: 'service', description: 'React single-page application', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: true, view_label: null },
-    { id: 103, view_id: 1, element_id: 3, position_x: 680, position_y: 200, name: 'API Gateway', kind: 'service', description: 'REST API gateway', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
-    { id: 104, view_id: 1, element_id: 4, position_x: 380, position_y: 400, name: 'Auth Service', kind: 'service', description: 'Handles authentication & sessions', technology: 'Auth0', url: null, logo_url: "https://tldiagram.com/app/icons/auth0.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
-    { id: 105, view_id: 1, element_id: 9, position_x: 380, position_y: 0, name: 'CDN', kind: 'service', description: 'Content delivery network', technology: 'Cloudflare', url: null, logo_url: "https://tldiagram.com/app/icons/cloudflare.png", technology_connectors: [], tags: ['external', 'infrastructure'], has_view: false, view_label: null },
-    { id: 106, view_id: 1, element_id: 10, position_x: 680, position_y: 0, name: 'Stripe', kind: 'service', description: 'Payment', technology: 'Stripe', url: null, logo_url: "https://tldiagram.com/app/icons/stripe.png", technology_connectors: [], tags: ['external', 'billing'], has_view: false, view_label: null },
-  ],
-  2: [
-    { id: 201, view_id: 2, element_id: 5, position_x: 80, position_y: 200, name: 'Frontend', kind: 'service', description: 'React frontend bundle', technology: 'React', url: null, logo_url: "https://tldiagram.com/app/icons/react.png", technology_connectors: [], tags: ['frontend'], has_view: false, view_label: null },
-    { id: 202, view_id: 2, element_id: 6, position_x: 380, position_y: 200, name: 'Backend', kind: 'service', description: 'Core business logic API', technology: 'Go', url: null, logo_url: "https://tldiagram.com/app/icons/golang.png", technology_connectors: [], tags: ['backend'], has_view: false, view_label: null },
-    { id: 203, view_id: 2, element_id: 7, position_x: 680, position_y: 200, name: 'PostgreSQL', kind: 'database', description: 'Primary relational database', technology: 'PostgreSQL', url: null, logo_url: "https://tldiagram.com/app/icons/postgresql.png", technology_connectors: [], tags: ['data'], has_view: false, view_label: null },
-    { id: 204, view_id: 2, element_id: 8, position_x: 680, position_y: 400, name: 'Redis Cache', kind: 'database', description: 'In-memory cache and session store', technology: 'Redis', url: null, logo_url: "https://tldiagram.com/app/icons/redis.png", technology_connectors: [], tags: ['data'], has_view: false, view_label: null },
-  ],
-}
-
-export const DEMO_CONNECTORS: ViewConnectors = {
-  1: [
-    { id: 1001, view_id: 1, source_element_id: 1, target_element_id: 2, label: 'Uses', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
-    { id: 1002, view_id: 1, source_element_id: 2, target_element_id: 3, label: 'API calls', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
-    { id: 1003, view_id: 1, source_element_id: 2, target_element_id: 4, label: 'Auth', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'bottom', target_handle: 'top', created_at: NOW, updated_at: NOW },
-    { id: 1004, view_id: 1, source_element_id: 2, target_element_id: 9, label: 'Serves via', description: null, relationship: null, direction: 'backward', style: 'bezier', url: null, source_handle: 'top', target_handle: 'bottom', created_at: NOW, updated_at: NOW },
-    { id: 1005, view_id: 1, source_element_id: 3, target_element_id: 10, label: 'Billing', description: null, relationship: null, direction: 'both', style: 'bezier', url: null, source_handle: 'top', target_handle: 'bottom', created_at: NOW, updated_at: NOW },
-  ],
-  2: [
-    { id: 2001, view_id: 2, source_element_id: 5, target_element_id: 6, label: 'HTTP/JSON', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
-    { id: 2002, view_id: 2, source_element_id: 6, target_element_id: 7, label: 'Reads / Writes', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'right', target_handle: 'left', created_at: NOW, updated_at: NOW },
-    { id: 2003, view_id: 2, source_element_id: 6, target_element_id: 8, label: 'Cache', description: null, relationship: null, direction: 'forward', style: 'bezier', url: null, source_handle: 'bottom', target_handle: 'left', created_at: NOW, updated_at: NOW },
-  ],
-}
-
-export const DEMO_LAYERS: Record<number, ViewLayer[]> = {
-  1: [],
-  2: [],
-}