handoff-app 1.2.2-7 → 2.0.0-1

package/src/app/pages/system/pattern/[pattern]/index.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { buildArtifactUrl } from '@handoff/artifacts/url';
 import { PatternListObject } from '@handoff/transformers/preview/types';
 import { startCase } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -7,6 +8,7 @@ import rehypeRaw from 'rehype-raw';
 import Layout from '../../../../components/Layout/Main';
 import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
 import PrevNextNav from '../../../../components/Navigation/PrevNextNav';
+import NotFound from '../../../../components/NotFound';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../components/ui/accordion';
 import { Badge } from '../../../../components/ui/badge';
@@ -15,9 +17,9 @@ import {
   DocumentationProps,
   fetchPatterns,
   getClientRuntimeConfig,
-  getCurrentSection,
+  getNavProps,
   IParams,
-  staticBuildMenu,
+  isRegistryRuntime,
 } from '../../../../components/util';
 
 type PatternNavItem = { id: string; title: string; description: string; group: string };
@@ -89,18 +91,29 @@ const getArgSummary = (args?: Record<string, unknown>) => {
 };
 
 export async function getStaticPaths() {
+  // Registry content is mutable at runtime and may be empty/unreachable at build time, so resolve
+  // pattern pages on demand against the live DB instead of freezing the path list to the build
+  // snapshot. The static-export target stays fully prerendered (`fallback: false`).
+  if (isRegistryRuntime()) {
+    return { paths: [], fallback: 'blocking' as const };
+  }
   return {
-    paths: fetchPatterns()?.map((p) => ({ params: { pattern: p.id } })) ?? [],
+    paths: (await fetchPatterns()).map((p) => ({ params: { pattern: p.id } })),
     fallback: false,
   };
 }
 
 export const getStaticProps = async (context: { params: IParams }) => {
   const { pattern: patternId } = context.params;
-  const patterns = fetchPatterns() ?? [];
-  const menu = staticBuildMenu();
-  const config = getClientRuntimeConfig();
+  const patterns = await fetchPatterns();
   const patternData = patterns.find((p) => p.id === patternId);
+  // Under `fallback: 'blocking'` this runs on demand for arbitrary ids; surface a real 404 for ids
+  // that do not exist in the active mode.
+  if (!patternData) {
+    return { notFound: true };
+  }
+  const navProps = await getNavProps('/system');
+  const config = getClientRuntimeConfig();
 
   const sameGroupPatterns = patterns.filter((p) => p.group === patternData?.group);
   const groupIndex = sameGroupPatterns.findIndex((p) => p.id === patternId);
@@ -112,9 +125,8 @@ export const getStaticProps = async (context: { params: IParams }) => {
   return {
     props: {
       id: patternId,
-      menu,
+      ...navProps,
       config,
-      current: getCurrentSection(menu, '/system') ?? [],
       metadata: {
         title: fallbackTitle,
         description: patternData?.description || '',
@@ -130,6 +142,7 @@ export const getStaticProps = async (context: { params: IParams }) => {
 const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nextPattern }: PatternPageProps) => {
   const [pattern, setPattern] = useState<PatternListObject | undefined>(undefined);
   const [fetchError, setFetchError] = useState<string | undefined>(undefined);
+  const [patternNotFound, setPatternNotFound] = useState(false);
   const [iframeHeight, setIframeHeight] = useState('400px');
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
 
@@ -145,13 +158,20 @@ const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nex
     const controller = new AbortController();
     setPattern(undefined);
     setFetchError(undefined);
+    setPatternNotFound(false);
 
-    fetch(`${normalizedBasePath}/api/pattern/${id}.json`, { signal: controller.signal })
+    fetch(buildArtifactUrl(`pattern/${id}.json`, appBasePath), { signal: controller.signal })
       .then((res) => {
+        if (res.status === 404) {
+          setPatternNotFound(true);
+          return null;
+        }
         if (!res.ok) throw new Error(`Failed to load pattern: ${res.status} ${res.statusText}`);
         return res.json();
       })
-      .then((data) => setPattern(data as PatternListObject))
+      .then((data) => {
+        if (data) setPattern(data as PatternListObject);
+      })
       .catch((err) => {
         if (err.name !== 'AbortError') {
           setFetchError(err instanceof Error ? err.message : 'Failed to load pattern data.');
@@ -159,7 +179,7 @@ const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nex
       });
 
     return () => controller.abort();
-  }, [id, normalizedBasePath]);
+  }, [id, appBasePath]);
 
   const onIframeLoad = useCallback(() => {
     if (iframeRef.current?.contentWindow?.document?.body) {
@@ -167,8 +187,44 @@ const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nex
     }
   }, []);
 
-  if (fetchError) return <p className="p-4 text-red-500">{fetchError}</p>;
-  if (!pattern) return <p>Loading...</p>;
+  if (patternNotFound) {
+    return (
+      <Layout config={config} menu={menu} current={current} metadata={{ ...metadata, title: '404 - Page Not Found', metaTitle: '404 - Page Not Found' }}>
+        <div className="flex min-h-[60vh] flex-col items-center justify-center">
+          <NotFound />
+        </div>
+      </Layout>
+    );
+  }
+
+  if (fetchError) {
+    return (
+      <Layout config={config} menu={menu} current={current} metadata={metadata}>
+        <div className="flex min-h-[60vh] flex-col items-center justify-center gap-2">
+          <p className="text-lg font-semibold text-gray-700 dark:text-gray-300">Something went wrong</p>
+          <p className="text-sm text-red-500">{fetchError}</p>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (!pattern) {
+    return (
+      <Layout config={config} menu={menu} current={current} metadata={metadata}>
+        <div className="flex flex-col gap-3 pb-14" aria-busy="true" aria-live="polite">
+          <small className="text-sm font-medium text-sky-600 dark:text-gray-300">Patterns</small>
+          <HeadersType.H1>{metadata.title}</HeadersType.H1>
+          {metadata.description && (
+            <div className="prose max-w-[800px] text-xl font-light leading-relaxed text-gray-600 dark:text-gray-300">
+              <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+                {metadata.description}
+              </ReactMarkdown>
+            </div>
+          )}
+        </div>
+      </Layout>
+    );
+  }
 
   return (
     <Layout config={config} menu={menu} current={current} metadata={metadata}>
@@ -217,7 +273,7 @@ const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nex
                   display: 'block',
                   border: 'none',
                 }}
-                src={`${normalizedBasePath}/api/pattern/${pattern.url}`}
+                src={buildArtifactUrl(`pattern/${pattern.url}`, appBasePath)}
               />
             ) : (
               <div className="flex items-center justify-center p-8 text-sm text-gray-500">No preview available for this pattern.</div>

package/src/app/pages/system/tokens/components/[component]/index.tsx

@@ -8,13 +8,15 @@ import HeadersType from '../../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../../components/ui/table';
 import {
   ComponentDocumentationProps,
-  fetchCompDocPageMarkdown,
   fetchComponents,
+  fetchComponentTokens,
+  fetchCompDocPageMarkdown,
+  fetchLocalComponents,
   getClientRuntimeConfig,
   getTokens,
   IParams,
+  isRegistryRuntime,
   reduceSlugToString,
-  staticBuildMenu,
 } from '../../../../../components/util';
 import { getComponentInstanceScssTokens, tokenReferenceFormat } from '../../../../../components/util/token';
 import { filterOutNull } from '../../../../../lib/utils';
@@ -24,39 +26,65 @@ import { filterOutNull } from '../../../../../lib/utils';
  * @returns
  */
 export async function getStaticPaths() {
+  // In registry mode component token sets are published to the DB (possibly after this app was
+  // deployed), so paths cannot be frozen at build time — resolve them on demand.
+  if (isRegistryRuntime()) {
+    return { paths: [], fallback: 'blocking' };
+  }
   return {
-    paths: fetchComponents()?.map((exportable) => ({ params: { component: exportable.id } })) ?? [],
+    paths: fetchLocalComponents()?.map((exportable) => ({ params: { component: exportable.id } })) ?? [],
     fallback: false, // can also be true or 'blocking'
   };
 }
 
 export const getStaticProps = async (context) => {
   const { component } = context.params as IParams;
-  // get previews for components on this page
-  const menu = staticBuildMenu();
   const config = getClientRuntimeConfig();
   const componentSlug = reduceSlugToString(component);
-  const tokens = getTokens();
-  const componentObject = tokens?.components?.[componentSlug!] ?? null;
-  const markdownProps = fetchCompDocPageMarkdown('docs/', `/system/${componentSlug}`, `/system`).props;
-  const componentData = fetchComponents()?.find((c) => c.id === componentSlug);
+  const markdownProps = (await fetchCompDocPageMarkdown('docs/', `/system/${componentSlug}`, `/system`)).props;
+
+  let componentObject: CoreTypes.IFileComponentObject | null = null;
+  let displayName: string | undefined;
+  let description: string | undefined;
+
+  if (isRegistryRuntime()) {
+    // Registry mode: source the token set and its generated download strings from the DB-backed docs
+    // read API (mutable, publishable after deploy). Unknown ids resolve to a clean not-found.
+    const detail = await fetchComponentTokens(componentSlug!);
+    if (!detail) {
+      return { notFound: true };
+    }
+    componentObject = detail.component;
+    markdownProps.scss = detail.scss;
+    markdownProps.css = detail.css;
+    markdownProps.styleDictionary = detail.styleDictionary;
+    markdownProps.types = detail.types;
+    const record = (await fetchComponents()).find((c) => c.id === componentSlug);
+    displayName = record?.title;
+    description = record?.description;
+  } else {
+    const tokens = getTokens();
+    componentObject = tokens?.components?.[componentSlug!] ?? null;
+    const componentData = fetchLocalComponents()?.find((c) => c.id === componentSlug);
+    displayName = componentData?.name;
+    description = componentData?.description;
+  }
 
-  const fallbackTitle = componentData?.name || startCase(componentSlug);
+  const fallbackTitle = displayName || startCase(componentSlug);
   const fallbackMetaTitle = `${fallbackTitle}${config?.app?.client ? ` | ${config.app.client} Design System` : ''}`;
 
   markdownProps.metadata = {
     ...markdownProps.metadata,
-    title: componentData?.name || markdownProps.metadata.title || startCase(componentSlug),
-    description: markdownProps.metadata.description || componentData?.description || '',
+    title: displayName || markdownProps.metadata.title || startCase(componentSlug),
+    description: markdownProps.metadata.description || description || '',
     metaTitle: markdownProps.metadata.metaTitle || fallbackMetaTitle,
-    metaDescription: markdownProps.metadata.metaDescription || componentData?.description || '',
+    metaDescription: markdownProps.metadata.metaDescription || description || '',
   };
 
   return {
     props: {
       id: component,
       component: componentObject ?? {},
-      menu,
       config,
       ...markdownProps,
     },

package/src/app/pages/system/tokens/foundations/colors.tsx

@@ -9,7 +9,8 @@ import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markd
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../components/ui/table';
-import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens } from '../../../../components/util';
+import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens, buildTimeFoundationDesign } from '../../../../components/util';
+import { useFoundationTokens } from '../../../../components/util/useFoundationTokens';
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -25,8 +26,8 @@ export const getStaticProps: GetStaticProps = async () => {
     ...{
       props: {
         config,
-        ...fetchDocPageMarkdown('docs/', 'system/tokens/foundations/colors', `/system`).props,
-        design: getTokens().localStyles,
+        ...(await fetchDocPageMarkdown('docs/', 'system/tokens/foundations/colors', `/system`)).props,
+        design: buildTimeFoundationDesign(),
       } as FoundationDocumentationProps,
     },
   };
@@ -66,8 +67,9 @@ const ColorGroupTable = ({ colors }: { group: string; colors: CoreTypes.IColorOb
  * @param param0
  * @returns
  */
-const ComponentsPage = ({ content, menu, metadata, current, config, design }: FoundationDocumentationProps) => {
-  // Fetch components from api
+const ComponentsPage = ({ content, menu, metadata, current, config, design: designProp }: FoundationDocumentationProps) => {
+  // In registry mode the build-time `design` is empty; hydrate it from the docs read API on mount.
+  const { design } = useFoundationTokens('colors', { design: designProp });
 
   const colorGroups = Object.fromEntries(
     Object.entries(groupBy(design.color, 'group'))

package/src/app/pages/system/tokens/foundations/effects.tsx

@@ -9,7 +9,8 @@ import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markd
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../components/ui/table';
-import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens } from '../../../../components/util';
+import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens, buildTimeFoundationDesign } from '../../../../components/util';
+import { useFoundationTokens } from '../../../../components/util/useFoundationTokens';
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -25,8 +26,8 @@ export const getStaticProps: GetStaticProps = async () => {
     ...{
       props: {
         config,
-        ...fetchDocPageMarkdown('docs/', 'system/tokens/foundations/effects', `/system`).props,
-        design: getTokens().localStyles,
+        ...(await fetchDocPageMarkdown('docs/', 'system/tokens/foundations/effects', `/system`)).props,
+        design: buildTimeFoundationDesign(),
       } as FoundationDocumentationProps,
     },
   };
@@ -60,8 +61,9 @@ const EffectsTable = ({ effects }: { group: string; effects: CoreTypes.IEffectOb
  * @param param0
  * @returns
  */
-const ComponentsPage = ({ content, menu, metadata, current, config, design }: FoundationDocumentationProps) => {
-  // Fetch components from api
+const ComponentsPage = ({ content, menu, metadata, current, config, design: designProp }: FoundationDocumentationProps) => {
+  // In registry mode the build-time `design` is empty; hydrate it from the docs read API on mount.
+  const { design } = useFoundationTokens('effects', { design: designProp });
 
   const effectGroups = Object.fromEntries(
     Object.entries(groupBy(design.effect, 'group')).map(([groupKey, effects]) => {

package/src/app/pages/system/tokens/foundations/typography.tsx

@@ -10,7 +10,8 @@ import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markd
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableRow } from '../../../../components/ui/table';
-import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens } from '../../../../components/util';
+import { fetchDocPageMarkdown, FoundationDocumentationProps, getClientRuntimeConfig, getTokens, buildTimeFoundationDesign } from '../../../../components/util';
+import { useFoundationTokens } from '../../../../components/util/useFoundationTokens';
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -26,8 +27,8 @@ export const getStaticProps: GetStaticProps = async () => {
     ...{
       props: {
         config,
-        ...fetchDocPageMarkdown('docs/', 'system/tokens/foundations/typography', `/system`).props,
-        design: getTokens().localStyles,
+        ...(await fetchDocPageMarkdown('docs/', 'system/tokens/foundations/typography', `/system`)).props,
+        design: buildTimeFoundationDesign(),
       } as FoundationDocumentationProps,
     },
   };
@@ -84,7 +85,10 @@ const FontsTable = ({ types }: { types: CoreTypes.ITypographyObject[] }) => {
  * @param param0
  * @returns
  */
-const ComponentsPage = ({ content, menu, metadata, current, config, design }: FoundationDocumentationProps) => {
+const ComponentsPage = ({ content, menu, metadata, current, config, design: designProp }: FoundationDocumentationProps) => {
+  // In registry mode the build-time `design` is empty; hydrate it from the docs read API on mount.
+  const { design } = useFoundationTokens('typography', { design: designProp });
+
   const typography = design.typography.slice().sort((a, b) => {
     const l = (config?.app?.type_sort ?? []).indexOf(a.name) >>> 0;
     const r = (config?.app?.type_sort ?? []).indexOf(b.name) >>> 0;

package/src/app/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": "",
-    "target": "es5",
+    "target": "es2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -11,7 +10,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",