handoff-app 1.2.2-6 → 2.0.0-0

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",