handoff-app 1.1.0-0 → 1.1.0-1

package/config/docs/system/alert.md

@@ -5,26 +5,3 @@ image: component-alert
 metaTitle: 'Alerts | Handoff Design System'
 metaDescription: 'Alerts are used to communicate a state that affects a system, feature or page. They are used to provide feedback about an action that has taken place.'
 ---
-
-### Accessibility
-
-Make it clear what this alert does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with alerts
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with alerts
-
-  </div>
-</div>
-
----

package/config/docs/system/button.md

@@ -5,30 +5,3 @@ image: component-button
 metaTitle: 'Buttons | Handoff Design System'
 metaDescription: 'Buttons allow users to take actions and make choices, with a single click.'
 ---
-
-### Accessibility
-
-Make it clear what this button does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- Make it clear what this button does for the user.
-- Use at most two buttons in one group.
-- Attribute indicating if the element should be.
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- Use more than two words for call to action.
-- First letter of each sentence defaults to a capital letter.
-- Attribute indicating if the element should be.
-
-  </div>
-</div>
-
----

package/config/docs/system/checkbox.md

@@ -5,26 +5,3 @@ image: component-checkbox
 metaTitle: 'Checkboxes | Handoff Design System'
 metaDescription: 'Checkboxes create an on/off boolean switch that can be built into array.'
 ---
-
-### Accessibility
-
-Make it clear what this checkboxes does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with checkboxes
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with checkboxes
-
-  </div>
-</div>
-
----

package/config/docs/system/input.md

@@ -6,26 +6,3 @@ image: component-input
 metaTitle: 'Inputs | Handoff Design System'
 metaDescription: 'Form input controls like <input> and <textarea>.'
 ---
-
-### Accessibility
-
-Make it clear what this input does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with inputs
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with inputs
-
-  </div>
-</div>
-
----

package/config/docs/system/modal.md

@@ -7,26 +7,3 @@ metaTitle: 'Modal dialogs | Handoff Design System'
 metaDescription: 'Modal dialogs present popup information to inform users of important information
 and sometimes allow the user to take action.'
 ---
-
-### Accessibility
-
-Make it clear what this modal does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with modals
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with modals
-
-  </div>
-</div>
-
----

package/config/docs/system/pagination.md

@@ -5,26 +5,3 @@ image: component-pagination
 metaTitle: 'Pagination | Handoff Design System'
 metaDescription: 'Pagination provides swift access to all pages, while indicating that more pages exist.'
 ---
-
-### Accessibility
-
-Make it clear what this pagination widget does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with pagination
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with pagination
-
-  </div>
-</div>
-
----

package/config/docs/system/radio.md

@@ -5,26 +5,3 @@ image: component-radio
 metaTitle: 'Radios | Handoff Design System'
 metaDescription: 'Radios create an on/off boolean switch that can be built into array.'
 ---
-
-### Accessibility
-
-Make it clear what this radio widget does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with radio
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with radio
-
-  </div>
-</div>
-
----

package/config/docs/system/select.md

@@ -5,26 +5,3 @@ image: component-select
 metaTitle: 'Selects | Handoff Design System'
 metaDescription: 'Selects create dropdowns for selecting a single entry from a list.'
 ---
-
-### Accessibility
-
-Make it clear what this select widget does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with select
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with select
-
-  </div>
-</div>
-
----

package/config/docs/system/switch.md

@@ -2,29 +2,6 @@
 title: Switches
 description: Switches render a single boolean toggle that has an off state and an on state.
 image: component-switch
-metaTitle: 'Selects | Handoff Design System'
+metaTitle: 'Switches | Handoff Design System'
 metaDescription: 'Switches render a single boolean toggle that has an off state and an on state.'
 ---
-
-### Accessibility
-
-Make it clear what this switch widget does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with switches
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with switches
-
-  </div>
-</div>
-
----

package/config/docs/system/tooltip.md

@@ -5,26 +5,3 @@ image: component-tooltip
 metaTitle: 'Tooltips | Handoff Design System'
 metaDescription: 'Tooltips are informative message that appears when a user interacts with an element.'
 ---
-
-### Accessibility
-
-Make it clear what this tooltip widget does for the user.
-
-<div className="c-do-dont">
-  <div className="c-do-dont__do">
-
-<Check /> DO
-
-- What to do with tooltips
-
-  </div>
-  <div className="c-do-dont__dont">
-
-<X /> DON&apos;T
-
-- What not to do with tooltips
-
-  </div>
-</div>
-
----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.1.0-0",
+  "version": "1.1.0-1",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

package/src/app/components/util/index.ts

@@ -308,7 +308,7 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
   Object.keys(groupedComponents).forEach((group) => {
     const menuGroup = { title: group || 'Uncategorized', menu: [] };
     groupedComponents[group].forEach((component) => {
-      const docs = fetchDocPageMetadataAndContent('docs/components/', component.id);
+      const docs = fetchDocPageMetadataAndContent('docs/system/', component.id);
       let title = startCase(component.id);
       if (docs.metadata.title) {
         title = docs.metadata.title;
@@ -357,7 +357,7 @@ const staticBuildTokensMenu = () => {
   const groupedComponents = groupBy(components, (e) => e.group ?? '');
   Object.keys(groupedComponents).forEach((group) => {
     groupedComponents[group].forEach((component) => {
-      const docs = fetchDocPageMetadataAndContent('docs/components/', component.id);
+      const docs = fetchDocPageMetadataAndContent('docs/system/', component.id);
       let title = startCase(component.id);
       if (docs.metadata.title) {
         title = docs.metadata.title;
@@ -677,7 +677,7 @@ export const filterOutUndefined = <T>(value: T): value is NonNullable<T> => valu
 export const titleString = (prefix: string | null): string => {
   const config = getClientRuntimeConfig();
   const prepend = prefix ? `${prefix} | ` : '';
-  return `${prefix}${config?.app?.client} Design System`;
+  return `${prepend}${config?.app?.client} Design System`;
 };
 
 /**

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

@@ -2,6 +2,7 @@
 import { OptionalPreviewRender } from '@handoff/transformers/preview/types';
 import { PreviewObject } from '@handoff/types/preview';
 import { evaluateFilter, type Filter } from '@handoff/utils/filter';
+import { startCase } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
@@ -16,7 +17,7 @@ import HeadersType from '../../../../components/Typography/Headers';
 import { Button } from '../../../../components/ui/button';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '../../../../components/ui/drawer';
 import { JsonTreeView } from '../../../../components/ui/json-tree-view';
-import { fetchComponents, getClientRuntimeConfig, getCurrentSection, IParams, staticBuildMenu } from '../../../../components/util';
+import { fetchComponents, fetchDocPageMetadataAndContent, getClientRuntimeConfig, getCurrentSection, IParams, staticBuildMenu } from '../../../../components/util';
 
 /**
  * Render all index pages
@@ -73,13 +74,17 @@ export const getStaticProps = async (context) => {
   const components = fetchComponents()!;
   const menu = staticBuildMenu();
   const config = getClientRuntimeConfig();
-  const metadata = components.find((c) => c.id === component);
+  const componentData = components.find((c) => c.id === component);
+  const docs = fetchDocPageMetadataAndContent('docs/system/', component as string);
   const componentHotReloadIsAvailable = process.env.NODE_ENV === 'development';
-  const sameGroupComponents = components.filter((c) => c.group === metadata?.group);
+  const sameGroupComponents = components.filter((c) => c.group === componentData?.group);
   const groupIndex = sameGroupComponents.findIndex((c) => c.id === component);
   const previousComponent = sameGroupComponents[groupIndex - 1] ?? null;
   const nextComponent = sameGroupComponents[groupIndex + 1] ?? null;
 
+  const fallbackTitle = componentData.name || startCase(component as string);
+  const fallbackMetaTitle = `${fallbackTitle}${config?.app?.client ? ` | ${config.app.client} Design System` : ''}`;
+
   return {
     props: {
       id: component,
@@ -89,10 +94,12 @@ export const getStaticProps = async (context) => {
       config,
       current: getCurrentSection(menu, '/system') ?? [],
       metadata: {
-        ...metadata,
-        title: metadata.name,
-        description: metadata.description,
-        image: 'hero-brand-assets',
+        ...componentData,
+        title: componentData.name || docs.metadata.title || startCase(component as string),
+        description: componentData.description,
+        metaTitle: docs.metadata.metaTitle || fallbackMetaTitle,
+        metaDescription: docs.metadata.metaDescription || componentData.description,
+        image: docs.metadata.image || 'hero-brand-assets',
       },
       componentHotReloadIsAvailable,
       previousComponent,

package/src/app/pages/system/component/index.tsx

@@ -1,92 +1,15 @@
-import type { GetStaticProps } from 'next';
-import Head from 'next/head';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import ComponentSearch from '../../../components/ComponentSearch';
-import Footer from '../../../components/Footer';
-import { MarkdownComponents } from '../../../components/Markdown/MarkdownComponents';
-import Header from '../../../components/old/Header';
-import {
-  DocumentationProps,
-  fetchComponents,
-  fetchDocPageMarkdown,
-  fetchDocPageMetadataAndContent,
-  getClientRuntimeConfig,
-  Metadata,
-} from '../../../components/util';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
-type ComponentPageDocumentationProps = DocumentationProps & {
-  components: { [id: string]: Metadata };
-};
-
-/**
- * This statically renders content from the markdown, creating menu and providing
- * metadata
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  const components = fetchComponents()?.map((c) => c.id) ?? [];
-  const config = getClientRuntimeConfig();
-  return {
-    ...{
-      props: {
-        config,
-        ...fetchDocPageMarkdown('docs/', 'components', `/components`).props,
-        components: components.reduce(
-          (acc, component) => ({
-            ...acc,
-            ...{
-              [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
-            },
-          }),
-          {}
-        ),
-      } as ComponentPageDocumentationProps,
-    },
-  };
-};
+const ComponentIndexRedirect = () => {
+  const router = useRouter();
+  const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
 
-/**
- * Define the components page
- * @param param0
- * @returns
- */
-const ComponentsListPage = ({ content, menu, metadata, current, components, config }: ComponentPageDocumentationProps) => {
-  return (
-    <div className="c-page">
-      <Head>
-        <title>{metadata.metaTitle}</title>
-        <meta name="description" content={metadata.metaDescription} />
-      </Head>
-      <Header menu={menu} config={config} />
-      <section className="c-content">
-        <div className="o-container-fluid">
-          <div className="c-hero c-hero--boxed c-hero--bg-blue">
-            <div>
-              <h1 className="c-title--extra-large">{metadata.title}</h1>
-              <p>{metadata.description}</p>
-            </div>
-          </div>
+  useEffect(() => {
+    router.replace(`${basePath}/system`);
+  }, [router, basePath]);
 
-          <div className="o-row">
-            <div className="o-col-12@md">
-              <ComponentSearch />
-            </div>
-          </div>
-          <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </div>
-      </section>
-      <Footer config={config} />
-    </div>
-  );
+  return null;
 };
 
-export default ComponentsListPage;
+export default ComponentIndexRedirect;

package/src/app/pages/system/index.tsx

@@ -15,16 +15,11 @@ import { JsonTreeView } from '../../components/ui/json-tree-view';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/ui/tooltip';
 import {
   DocumentationProps,
-  fetchComponents,
   fetchDocPageMarkdown,
-  fetchDocPageMetadataAndContent,
   getClientRuntimeConfig,
-  Metadata,
 } from '../../components/util';
 
-type ComponentPageDocumentationProps = DocumentationProps & {
-  components: { [id: string]: Metadata };
-};
+type ComponentPageDocumentationProps = DocumentationProps;
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -36,26 +31,12 @@ type ComponentPageDocumentationProps = DocumentationProps & {
  */
 export const getStaticProps: GetStaticProps = async (context) => {
   // Read current slug
-  const components = fetchComponents()?.map((c) => c.id);
   const config = getClientRuntimeConfig();
   return {
-    ...{
-      props: {
-        config,
-        ...fetchDocPageMarkdown('docs/', 'system', `/system`).props,
-        components: components
-          ? components.reduce(
-            (acc, component) => ({
-              ...acc,
-              ...{
-                [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
-              },
-            }),
-            {}
-          )
-          : null,
-      } as ComponentPageDocumentationProps,
-    },
+    props: {
+      config,
+      ...fetchDocPageMarkdown('docs/', 'system', `/system`).props,
+    } as ComponentPageDocumentationProps,
   };
 };
 /**

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

@@ -38,6 +38,19 @@ export const getStaticProps = async (context) => {
   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 fallbackTitle = componentData?.name || 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 || '',
+    metaTitle: markdownProps.metadata.metaTitle || fallbackMetaTitle,
+    metaDescription: markdownProps.metadata.metaDescription || componentData?.description || '',
+  };
 
   return {
     props: {
@@ -45,7 +58,7 @@ export const getStaticProps = async (context) => {
       component: componentObject ?? {},
       menu,
       config,
-      ...fetchCompDocPageMarkdown('docs/', `/system/${componentSlug}`, `/system`).props,
+      ...markdownProps,
     },
   };
 };

package/src/app/pages/system/tokens/index.tsx

@@ -1,90 +1,15 @@
-import { PreviewObject } from '@handoff/types/preview';
-import type { GetStaticProps } from 'next';
-import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import { APIComponentList } from '../../../components/Component/ComponentLists';
-import Layout from '../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../components/Markdown/MarkdownComponents';
-import HeadersType from '../../../components/Typography/Headers';
-import {
-  DocumentationProps,
-  fetchComponents,
-  fetchDocPageMarkdown,
-  fetchDocPageMetadataAndContent,
-  getClientRuntimeConfig,
-  Metadata,
-} from '../../../components/util';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
-type ComponentPageDocumentationProps = DocumentationProps & {
-  components: { [id: string]: Metadata };
-};
+const TokensIndexRedirect = () => {
+  const router = useRouter();
+  const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
 
-/**
- * This statically renders content from the markdown, creating menu and providing
- * metadata
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  const components = fetchComponents()?.map((c) => c.id);
-  const config = getClientRuntimeConfig();
-  return {
-    ...{
-      props: {
-        config,
-        ...fetchDocPageMarkdown('docs/', 'system', `/system`).props,
-        components: components
-          ? components.reduce(
-            (acc, component) => ({
-              ...acc,
-              ...{
-                [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
-              },
-            }),
-            {}
-          )
-          : null,
-      } as ComponentPageDocumentationProps,
-    },
-  };
-};
-/**
- * Define the components page
- * @param param0
- * @returns
- */
-const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentPageDocumentationProps) => {
-  // Fetch components from api
-  const [components, setComponents] = useState<PreviewObject[]>(undefined);
-  const fetchComponents = async () => {
-    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
-    setComponents(data as PreviewObject[]);
-  };
   useEffect(() => {
-    fetchComponents();
-  }, []);
-  if (!components) return <p>Loading...</p>;
-  const apiUrl = (window.location.origin && window.location.origin) + `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`;
-  return (
-    <Layout config={config} menu={menu} current={current} metadata={metadata}>
-      <div className="flex flex-col gap-2 pb-7">
-        <HeadersType.H1>{metadata.title}</HeadersType.H1>
-        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
-      </div>
-      <div>
-        <div className="prose mb-10">
-          <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
-            {content}
-          </ReactMarkdown>
-        </div>
-        <APIComponentList components={components} />
-      </div>
-    </Layout>
-  );
+    router.replace(`${basePath}/system`);
+  }, [router, basePath]);
+
+  return null;
 };
 
-export default ComponentsPage;
+export default TokensIndexRedirect;