handoff-app 0.5.1 → 0.5.2

package/Changelog.md

@@ -6,6 +6,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.2] - 2023-06-14
+
+### Changes
+
+- Tokens, changelog and previews are now read form the file system using the `fs.readFileSync` instead of the `import` statement.
+- Updated the Next.js app pages to utilize `getStaticProps` for fetching of the configuration and the exported tokens.
+- Removed `componentExists` utility method as it's no longer used
+- Removed `mapComponentSize` utility method as it's no longer used
+
+### Bugfixes
+
+- By changing the way in which the configuration, tokens, changelog and previews are read and passed into the pages a bug has been resolved that would occur while running the `fetch` command while the `dev` command was already running which would cause the app from stop responding correctly and would require app restart.
+
 ## [0.5.1] - 2023-06-01
 
 ### Changes
@@ -136,6 +149,8 @@ integration: {
 
 - The new exportable schema has normalized the token output, fixing several small
   inconsistencies in the way tokens were created.
+- Fixes a warning caused by loading the config into the next app outside of the
+  static properties
 
 ## [0.4.3] - 2023-04-19
 

package/components/Header.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { getConfig } from 'config';
 import NavLink from './NavLink';
-import { SectionLink, staticBuildMenu } from './util';
+import { SectionLink } from './util';
 import React from 'react';
 
 const config = getConfig();

package/components/util/index.ts

@@ -1,6 +1,9 @@
 import { Config } from 'client-config';
 import { getConfig } from 'config';
-import { ExportableDefinition, ExportableIndex, ExportableOptions } from 'figma-exporter/src/types';
+import { ChangelogRecord } from 'figma-exporter/src/changelog';
+import { ExportResult } from 'figma-exporter/src/config';
+import { Component } from 'figma-exporter/src/exporters/components/extractor';
+import { ExportableDefinition, ExportableOptions, PreviewJson, PreviewObject } from 'figma-exporter/src/types';
 import { filterOutNull } from 'figma-exporter/src/utils';
 import * as fs from 'fs-extra';
 import matter from 'gray-matter';
@@ -43,21 +46,37 @@ export interface DocumentationProps {
   content: string;
   menu: SectionLink[];
   current: SectionLink;
+  config: Config;
+}
+
+export interface ChangelogDocumentationProps extends DocumentationProps {
+  changelog: ChangelogRecord[];
+}
+
+export interface FontDocumentationProps extends DocumentationProps {
+  customFonts: string[];
+  design: ExportResult['design'];
+}
+
+export interface AssetDocumentationProps extends DocumentationProps {
+  assets: ExportResult['assets'];
 }
 
 export interface ComponentDocumentationProps extends DocumentationProps {
   scss: string;
   css: string;
   types: string;
-  componentFound: boolean;
-  component: string;
   exportable: ExportableDefinition;
+  components: Component[];
+  previews: PreviewObject[];
+  component: string;
 }
 
 export interface FoundationDocumentationProps extends DocumentationProps {
   scss: string;
   css: string;
   types: string;
+  design: ExportResult['design'];
 }
 /**
  * List the default paths
@@ -159,26 +178,6 @@ export const buildL2StaticPaths = () => {
   return paths;
 };
 
-/**
- * Does a component exist in figma? Check the length of the component tokens
- * @param component
- * @param config
- * @returns
- */
-export const componentExists = (component: string, config?: Config): boolean => {
-  if (!config) {
-    config = getConfig();
-  }
-  const componentKey = pluralizeComponent(component) ?? false;
-  // If this is a component (we define it in the tokens file)
-  // but it has a length of 0, return the menu as undefined even
-  // if its set in the file list
-  if (config.components[componentKey] && config.components[componentKey].length === 0) {
-    return false;
-  }
-  return true;
-};
-
 /**
  * Build the static menu for rendeirng pages
  * @returns SectionLink[]
@@ -187,7 +186,6 @@ export const staticBuildMenu = () => {
   // Contents of docs
   const files = fs.readdirSync('docs');
   const sections: SectionLink[] = [];
-  const config = getConfig();
 
   // Build path tree
   const custom = files
@@ -281,7 +279,6 @@ export const fetchCompDocPageMarkdown = (path: string, slug: string | undefined,
   return {
     props: {
       ...fetchDocPageMarkdown(path, slug, id).props,
-      // componentFound: slug ? componentExists(slug, undefined) : false,
       scss: slug ? fetchTokensString(slug, 'scss') : '',
       css: slug ? fetchTokensString(slug, 'css') : '',
       types: slug ? fetchTokensString(slug, 'types') : '',
@@ -367,6 +364,21 @@ export const fetchFoundationDocPageMarkdown = (path: string, slug: string | unde
   };
 };
 
+export const getTokens = () : ExportResult => {
+  const data = fs.readFileSync('./exported/tokens.json', 'utf-8');
+  return JSON.parse(data.toString()) as ExportResult;
+}
+
+export const getChangelog = () => {
+  const data = fs.readFileSync('./exported/changelog.json', 'utf-8');
+  return JSON.parse(data.toString()) as ChangelogRecord[];
+}
+
+export const getPreview = () : PreviewJson => {
+  const data = fs.readFileSync('./exported/preview.json', 'utf-8');
+  return JSON.parse(data.toString()) as PreviewJson;
+}
+
 /**
  * Reduce a slug which can be either an array or string, to just a string by
  * plucking the first element

package/config.ts

@@ -1,17 +1,7 @@
 import config from './client-config';
 import type { Config } from './figma-exporter/src/config';
-import type { ChangelogRecord } from './figma-exporter/src/changelog';
-import type { PreviewJson } from 'figma-exporter/src/types';
-import elements from './exported/tokens.json';
-import changelog from './exported/changelog.json';
-import preview from './exported/preview.json';
 
 export const getConfig = () => {
   // Check to see if there is a config in the root of the project
-  const parsed = { ...config, ...elements } as unknown as Config;
-  return parsed;
-};
-
-export const getChangelog = () => (changelog || []) as unknown as ChangelogRecord[];
-
-export const getPreview = () => (preview || []) as unknown as PreviewJson;
+  return { ...config } as unknown as Config;
+};

package/figma-exporter/dist/declarations/src/config.d.ts

@@ -46,6 +46,19 @@ export interface ComponentSizeMap {
   css: string;
 }
 
+export interface ExportResult {
+  design: {
+    color: ColorObject[];
+    effect: EffectObject[];
+    typography: TypographyObject[];
+  };
+  components: DocumentComponentsObject;
+  assets: {
+    icons: AssetObject[];
+    logos: AssetObject[];
+  };
+}
+
 export interface Config {
   title: string;
   client: string;
@@ -62,16 +75,6 @@ export interface Config {
   type_copy: string;
   color_sort: string[];
   component_sort: string[];
-  design: {
-    color: ColorObject[];
-    effect: EffectObject[];
-    typography: TypographyObject[];
-  };
-  components: DocumentComponentsObject;
-  assets: {
-    icons: AssetObject[];
-    logos: AssetObject[];
-  };
   /**
    * @default { icons: "/icons.zip", logos: "/logos.zip" }
    */

package/figma-exporter/dist/declarations/src/utils/config.d.ts

@@ -3,9 +3,3 @@
  * @returns Config
  */
 export declare const getFetchConfig: () => any;
-/**
- * Map a component size to the right name
- * @param figma
- * @returns
- */
-export declare const mapComponentSize: (figma: string, component?: string) => string;

package/figma-exporter/src/config.d.ts

@@ -46,6 +46,19 @@ export interface ComponentSizeMap {
   css: string;
 }
 
+export interface ExportResult {
+  design: {
+    color: ColorObject[];
+    effect: EffectObject[];
+    typography: TypographyObject[];
+  };
+  components: DocumentComponentsObject;
+  assets: {
+    icons: AssetObject[];
+    logos: AssetObject[];
+  };
+}
+
 export interface Config {
   title: string;
   client: string;
@@ -62,16 +75,6 @@ export interface Config {
   type_copy: string;
   color_sort: string[];
   component_sort: string[];
-  design: {
-    color: ColorObject[];
-    effect: EffectObject[];
-    typography: TypographyObject[];
-  };
-  components: DocumentComponentsObject;
-  assets: {
-    icons: AssetObject[];
-    logos: AssetObject[];
-  };
   /**
    * @default { icons: "/icons.zip", logos: "/logos.zip" }
    */

package/figma-exporter/src/utils/config.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import { ComponentSizeMap } from '../config';
 
 /**
  * Get Config
@@ -17,25 +16,4 @@ export const getFetchConfig = () => {
   const parsed = { ...config };
 
   return parsed;
-};
-
-/**
- * Map a component size to the right name
- * @param figma
- * @returns
- */
-export const mapComponentSize = (figma: string, component?: string): string => {
-  const config = getFetchConfig();
-  if (component) {
-    if (config.figma.components[component]?.size) {
-      const componentMap = config.components[component]?.size as ComponentSizeMap[];
-      const componentSize = componentMap.find((size) => size.figma === figma);
-      if (componentSize && componentSize?.css) {
-        return componentSize?.css;
-      }
-    }
-  }
-  const coreMap = config.figma.size as ComponentSizeMap[];
-  const size = coreMap.find((size) => size.figma === figma);
-  return size?.css ?? figma;
-};
+};

package/package.json

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

package/pages/[level1]/[level2]/index.tsx

@@ -1,6 +1,5 @@
 import { buildL2StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams, reduceSlugToString } from 'components/util';
 import { GetStaticProps } from 'next';
-import { getConfig } from 'config';
 import Head from 'next/head';
 import Header from 'components/Header';
 import CustomNav from 'components/SideNav/Custom';
@@ -42,8 +41,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
   return fetchDocPageMarkdown(`docs/${level1}/`, reduceSlugToString(level2), `/${level1}`);
 };
 
-const config = getConfig();
-
 /**
  * Render Docs page
  * @param param0

package/pages/[level1]/index.tsx

@@ -2,7 +2,6 @@ import Header from 'components/Header';
 import CustomNav from 'components/SideNav/Custom';
 import { buildL1StaticPaths, DocumentationProps, fetchDocPageMarkdown, IParams, reduceSlugToString } from 'components/util';
 import { MarkdownComponents } from 'components/Markdown/MarkdownComponents';
-import { getConfig } from 'config';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import rehypeRaw from 'rehype-raw';
@@ -33,8 +32,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
   return fetchDocPageMarkdown('docs/', reduceSlugToString(level1), `/${level1}`);
 };
 
-const config = getConfig();
-
 /**
  * Render Docs page
  * @param param0

package/pages/assets/fonts.tsx

@@ -2,19 +2,15 @@ import * as React from 'react';
 import type { GetStaticProps, NextPage } from 'next';
 import uniq from 'lodash/uniq';
 import * as fs from 'fs-extra';
-import { getConfig } from 'config';
 import Icon from 'components/Icon';
-
 import Head from 'next/head';
-import { DocumentationProps, fetchDocPageMarkdown, SectionLink, staticBuildMenu } from 'components/util';
+import { fetchDocPageMarkdown, FontDocumentationProps, getTokens } from 'components/util';
 import Header from 'components/Header';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import CustomNav from 'components/SideNav/Custom';
 import { MarkdownComponents } from 'components/Markdown/MarkdownComponents';
 import rehypeRaw from 'rehype-raw';
 
-const config = getConfig();
-const fontFamilies: string[] = uniq(config.design.typography.map((type) => type.values.fontFamily));
 /**
  * This statically renders content from the markdown, creating menu and providing
  * metadata
@@ -24,11 +20,9 @@ const fontFamilies: string[] = uniq(config.design.typography.map((type) => type.
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  const markdown = fetchDocPageMarkdown('docs/assets/', 'fonts', `/assets`);
   const fonts = fs.readdirSync('public/fonts');
   const customFonts: string[] = [];
-  console.log(fonts);
+
   fonts.map((font) => {
     if (font.endsWith('.zip')) {
       // We have a custom font
@@ -36,16 +30,18 @@ export const getStaticProps: GetStaticProps = async (context) => {
       customFonts.push(name);
     }
   });
+
   return {
-    props: { ...markdown.props, customFonts },
+    props: {
+      ...fetchDocPageMarkdown('docs/assets/', 'fonts', `/assets`).props,
+      design: getTokens().design,
+      customFonts,
+    },
   };
 };
 
-interface FontDocProps extends DocumentationProps {
-  customFonts: string[];
-}
-
-const FontsPage = ({ content, menu, metadata, current, customFonts }: FontDocProps) => {
+const FontsPage = ({ content, menu, metadata, current, customFonts, design }: FontDocumentationProps) => {
+  const fontFamilies: string[] = uniq(design.typography.map((type) => type.values.fontFamily));
   const fontLinks: string[] = fontFamilies.map((fontFamily) => {
     const machine_name = fontFamily.replace(/\s/g, '');
     const custom = customFonts.find((font) => font === machine_name);

package/pages/assets/icons/{[name].tsx → [name]/index.tsx}

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import type { GetStaticProps, NextPage } from 'next';
+import type { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 import HtmlReactParser from 'html-react-parser';
-import * as fs from 'fs-extra';
 import { AssetObject } from 'figma-exporter/src/types';
 import { getConfig } from 'config';
 import Icon from 'components/Icon';
-
 import Head from 'next/head';
 import Header from 'components/Header';
-import { DocumentationProps, fetchDocPageMarkdown, SectionLink, staticBuildMenu } from 'components/util';
-import path from 'path';
+import { AssetDocumentationProps, fetchDocPageMarkdown, getTokens } from 'components/util';
 import CustomNav from 'components/SideNav/Custom';
 
-const config = getConfig();
-
 const DisplayIcon: React.FC<{ icon: AssetObject }> = ({ icon }) => {
   const htmlData = React.useMemo(() => {
     // For SSR
@@ -36,21 +31,24 @@ const DisplayIcon: React.FC<{ icon: AssetObject }> = ({ icon }) => {
 
   return <>{HtmlReactParser(htmlData)}</>;
 };
+
 /**
  * Render all index pages
  * @returns
  */
 export async function getStaticPaths() {
-  const paths = config.assets.icons.map((icon) => ({
+  const paths = getTokens().assets.icons.map((icon) => ({
     params: {
       name: icon.name,
     },
   }));
+
   return {
     paths,
     fallback: true,
   };
 }
+
 /**
  * This statically renders content from the markdown, creating menu and providing
  * metadata
@@ -60,14 +58,19 @@ export async function getStaticPaths() {
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  return fetchDocPageMarkdown('docs/assets/', 'icons', `/assets`);
+  return {
+    props: {
+      ...fetchDocPageMarkdown('docs/assets/', 'icons', `/assets`).props,
+      config: getConfig(),
+      assets: getTokens().assets,
+    }
+  };
 };
 
-const SingleIcon = ({ content, menu, metadata, current }: DocumentationProps) => {
+export default function SingleIcon({ content, menu, metadata, current, config, assets }: AssetDocumentationProps) {
   const router = useRouter();
   let { name } = router.query;
-  const icon = config.assets.icons.find((icon) => icon.icon === name);
+  const icon = assets?.icons.find((icon) => icon.icon === name);
   const copySvg = React.useCallback<React.MouseEventHandler>(
     (event) => {
       event.preventDefault();
@@ -77,16 +80,18 @@ const SingleIcon = ({ content, menu, metadata, current }: DocumentationProps) =>
     },
     [icon]
   );
+
   if(!menu){
     menu = [];
   }
+  
   return (
     <div className="c-page">
       <Head>
         {!icon ? (
-          <title>{`Icon Not Found | ${config.client} Design System`}</title>
+          <title>{`Icon Not Found | ${config?.client} Design System`}</title>
         ) : (
-          <title>{`${icon.name} Icon | ${config.client} Design System`}</title>
+          <title>{`${icon.name} Icon | ${config?.client} Design System`}</title>
         )}
       </Head>
       <Header menu={menu} />
@@ -199,4 +204,3 @@ const SingleIcon = ({ content, menu, metadata, current }: DocumentationProps) =>
     </div>
   );
 };
-export default SingleIcon;

package/pages/assets/icons/index.tsx

@@ -1,21 +1,17 @@
 import * as React from 'react';
-import type { GetStaticProps, NextPage } from 'next';
+import type { GetStaticProps } from 'next';
 import Link from 'next/link';
-
 import type { AssetObject } from 'figma-exporter/src/types';
 import { getConfig } from 'config';
 import Icon from 'components/Icon';
-
 import Head from 'next/head';
 import Header from 'components/Header';
-import { DocumentationProps, fetchDocPageMarkdown, SectionLink, staticBuildMenu } from 'components/util';
+import { AssetDocumentationProps, fetchDocPageMarkdown, getTokens } from 'components/util';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import CustomNav from 'components/SideNav/Custom';
 import { MarkdownComponents } from 'components/Markdown/MarkdownComponents';
 import rehypeRaw from 'rehype-raw';
 
-const config = getConfig();
-
 const DisplayIcon: React.FC<{ icon: AssetObject }> = ({ icon }) => {
   const htmlData = React.useMemo(() => {
     // For SSR
@@ -57,18 +53,23 @@ const DisplayIcon: React.FC<{ icon: AssetObject }> = ({ icon }) => {
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  return fetchDocPageMarkdown('docs/assets/', 'icons', `/assets`);
+  return {
+    props: {
+      ...fetchDocPageMarkdown('docs/assets/', 'icons', `/assets`).props,
+      config: getConfig(),
+      assets: getTokens().assets,
+    }
+  };
 };
 
-const IconsPage = ({ content, menu, metadata, current }: DocumentationProps) => {
+const IconsPage = ({ content, menu, metadata, current, config, assets }: AssetDocumentationProps) => {
   const [search, setSearch] = React.useState('');
 
   const icons = search
-    ? config.assets.icons.filter((icon) => {
+    ? assets.icons.filter((icon) => {
         return icon.index.includes(search);
       })
-    : config.assets.icons;
+    : assets.icons;
 
   const filterList = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
     setSearch(event.currentTarget.value.toLowerCase().replace(/[\W_]+/g, ' '));

package/pages/assets/index.tsx

@@ -1,8 +1,6 @@
-import type { GetStaticProps, NextPage } from 'next';
-
+import type { GetStaticProps } from 'next';
 import { getConfig } from 'config';
 import Icon from 'components/Icon';
-
 import NavLink from 'components/NavLink';
 import Head from 'next/head';
 import { DocumentationProps, fetchDocPageMarkdown } from 'components/util';
@@ -12,7 +10,6 @@ import CustomNav from 'components/SideNav/Custom';
 import { MarkdownComponents } from 'components/Markdown/MarkdownComponents';
 import rehypeRaw from 'rehype-raw';
 
-const config = getConfig();
 /**
  * This statically renders content from the markdown, creating menu and providing
  * metadata
@@ -22,11 +19,15 @@ const config = getConfig();
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  return fetchDocPageMarkdown('docs/', 'assets', `/assets`);
+  return {
+    props: {
+      ...fetchDocPageMarkdown('docs/', 'assets', `/assets`).props,
+      config: getConfig(),
+    }
+  }
 };
 
-const AssetsPage = ({ content, menu, metadata, current }: DocumentationProps) => {
+const AssetsPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

package/pages/assets/logos.tsx

@@ -1,8 +1,6 @@
-import type { GetStaticProps, NextPage } from 'next';
-
+import type { GetStaticProps } from 'next';
 import { getConfig } from 'config';
 import Icon from 'components/Icon';
-
 import Head from 'next/head';
 import { DocumentationProps, fetchDocPageMarkdown, SectionLink, staticBuildMenu } from 'components/util';
 import Header from 'components/Header';
@@ -11,7 +9,6 @@ import CustomNav from 'components/SideNav/Custom';
 import { MarkdownComponents } from 'components/Markdown/MarkdownComponents';
 import rehypeRaw from 'rehype-raw';
 
-const config = getConfig();
 /**
  * This statically renders content from the markdown, creating menu and providing
  * metadata
@@ -21,11 +18,15 @@ const config = getConfig();
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  return fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`);
+  return {
+    props: {
+      ...fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`).props,
+      config: getConfig(),
+    }
+  }
 };
 
-const AssetsLogosPage = ({ content, menu, metadata, current }: DocumentationProps) => {
+const AssetsLogosPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

package/pages/changelog.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import type { GetStaticProps, NextPage } from 'next';
+import type { GetStaticProps } from 'next';
 import { format } from 'date-fns';
-
-import { getChangelog, getConfig } from 'config';
 import Icon from 'components/Icon';
 import Head from 'next/head';
-import { DocumentationProps, fetchDocPageMarkdown } from 'components/util';
+import { ChangelogDocumentationProps, fetchDocPageMarkdown, getChangelog } from 'components/util';
 import Header from 'components/Header';
 import CustomNav from 'components/SideNav/Custom';
+import { getConfig } from 'config';
 
 const getCountLabel = (count: number, singular: string, plural: string) => {
   if (count === 1) {
@@ -17,10 +16,6 @@ const getCountLabel = (count: number, singular: string, plural: string) => {
   return plural;
 };
 
-const changelog = getChangelog();
-
-const config = getConfig();
-
 /**
  * This statically renders content from the markdown, creating menu and providing
  * metadata
@@ -30,11 +25,16 @@ const config = getConfig();
  * @returns
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  return fetchDocPageMarkdown('docs/', 'changelog', `/changelog`);
+  return {
+    props: {
+      ...fetchDocPageMarkdown('docs/', 'changelog', `/changelog`).props,
+      config: getConfig(),
+      changelog: getChangelog(),
+    }
+  }
 };
 
-const ChangeLogPage = ({ content, menu, metadata, current }: DocumentationProps) => {
+const ChangeLogPage = ({ content, menu, metadata, current, config, changelog }: ChangelogDocumentationProps) => {
   return (
     <div className="c-page">
       <Head>