Convertiv · bradmering · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/Changelog.md b/Changelog.md
@@ -6,6 +6,33 @@ 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).
 
+## \[1.2.2] - 2026-04-09
+
+This patch release clears ESLint failures in the Next.js app pages and aligns
+several code paths with the compiler target so production builds succeed without
+enabling `--downlevelIteration`.
+
+### Lint and code quality
+
+* Resolved `no-else-return`, `no-unused-vars`, `camelcase`, `prefer-const`,
+  `eqeqeq`, `no-nested-ternary`, `no-lonely-if`, and `no-use-before-define`
+  across static pages (catch-all docs, assets, foundations, home, system, and
+  design-token foundation pages).
+* Removed or refactored unused `getStaticProps` context parameters, props, and
+  locals; normalized naming (e.g. font machine keys); simplified icon detail
+  routing query handling.
+* Reordered helper components (token color/effect/typography tables, component
+  token previews) ahead of page components where required for declaration order.
+* Converted `getComponentPreviews` to a hoisted `function` declaration and
+  refactored the component token table for clearer control flow.
+
+### Build / TypeScript compatibility
+
+* Avoid iterating `Map` / `Set` / `Iterable` / `matchAll` results directly in
+  `for...of` where the compile target requires it: use `Array.from(...)` or
+  equivalent helpers in the config-diff registry, snapshot diff, CSF import
+  parsing, and component artifact sync.
+
 ## \[1.2.1] - 2026-04-08
 
 This is a minor release that fixes a bug in the new config diff calculator.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "1.2.1",
+  "version": "1.2.2-1",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

diff --git a/src/app/pages/[...slug]/index.tsx b/src/app/pages/[...slug]/index.tsx
@@ -41,26 +41,7 @@ export const getStaticProps: GetStaticProps = (context) => {
 export default function DocCatchAllPage({ content, menu, metadata, current, config }: DocumentationProps) {
   const bodyRef = useRef<HTMLDivElement>(null);
 
-  if (content) {
-    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 className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
-          <div className="min-w-0">
-            <div className="prose mb-10" ref={bodyRef}>
-              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
-                {content}
-              </ReactMarkdown>
-            </div>
-          </div>
-          <PageTOC body={bodyRef} title="On This Page" />
-        </div>
-      </Layout>
-    );
-  } else {
+  if (!content) {
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
         <Head>
@@ -85,4 +66,23 @@ export default function DocCatchAllPage({ content, menu, metadata, current, conf
       </div>
     );
   }
+
+  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 className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
+        <div className="min-w-0">
+          <div className="prose mb-10" ref={bodyRef}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
+              {content}
+            </ReactMarkdown>
+          </div>
+        </div>
+        <PageTOC body={bodyRef} title="On This Page" />
+      </div>
+    </Layout>
+  );
 }
diff --git a/src/app/pages/assets/fonts.tsx b/src/app/pages/assets/fonts.tsx
@@ -21,7 +21,7 @@ import { fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig, g
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   const fonts = fs.readdirSync(
     path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', '.handoff', `${process.env.HANDOFF_PROJECT_ID}`, 'public', 'fonts')
   );
@@ -45,16 +45,15 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const FontsPage = ({ content, menu, metadata, current, customFonts, design, config }: FontDocumentationProps) => {
+const FontsPage = ({ content, menu, metadata, customFonts, design, config }: 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);
+    const machineName = fontFamily.replace(/\s/g, '');
+    const custom = customFonts.find((font) => font === machineName);
     if (custom) {
-      return `/fonts/${machine_name}.zip`;
-    } else {
-      return `https://fonts.google.com/specimen/${fontFamily}`;
+      return `/fonts/${machineName}.zip`;
     }
+    return `https://fonts.google.com/specimen/${fontFamily}`;
   });
   return (
     <div className="c-page">

diff --git a/src/app/pages/assets/index.tsx b/src/app/pages/assets/index.tsx
@@ -18,7 +18,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'assets', `/assets`).props,
@@ -27,7 +27,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const AssetsPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
+const AssetsPage = ({ content, menu, metadata, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

diff --git a/src/app/pages/assets/logos.tsx b/src/app/pages/assets/logos.tsx
@@ -17,7 +17,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`).props,
@@ -26,7 +26,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   };
 };
 
-const AssetsLogosPage = ({ content, menu, metadata, current, config }: DocumentationProps) => {
+const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps) => {
   return (
     <div className="c-page">
       <Head>

diff --git a/src/app/pages/foundations/colors.tsx b/src/app/pages/foundations/colors.tsx
@@ -22,7 +22,7 @@ import { getTokens } from '../../components/util';
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...util.fetchFoundationDocPageMarkdown('docs/foundations/', 'colors', `/foundations`).props,

diff --git a/src/app/pages/foundations/icons/[name]/index.tsx b/src/app/pages/foundations/icons/[name]/index.tsx
@@ -58,7 +58,7 @@ export async function getStaticPaths() {
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = (context) => {
+export const getStaticProps: GetStaticProps = () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'icons', `/foundations`).props,
@@ -68,10 +68,13 @@ export const getStaticProps: GetStaticProps = (context) => {
   };
 };
 
-export default function SingleIcon({ content, menu, metadata, current, config, assets }: AssetDocumentationProps) {
+export default function SingleIcon({ menu, metadata, current, config, assets }: AssetDocumentationProps) {
   const router = useRouter();
-  let { name } = router.query;
-  const icon = assets?.icons.find((icon) => icon.icon === name);
+  const nameParam = router.query.name;
+  let name = undefined;
+  if (typeof nameParam === 'string') { name = nameParam } else if (Array.isArray(nameParam)) { name = nameParam[0] } else { name = undefined }
+  const icon = assets?.icons.find((i) => i.icon === name);
+
   const copySvg = React.useCallback<React.MouseEventHandler>(
     (event) => {
       event.preventDefault();

diff --git a/src/app/pages/foundations/icons/index.tsx b/src/app/pages/foundations/icons/index.tsx
@@ -52,7 +52,7 @@ export const DisplayIcon: React.FC<{ icon: CoreTypes.IAssetObject }> = ({ icon }
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'icons', `/foundations`).props,

diff --git a/src/app/pages/foundations/index.tsx b/src/app/pages/foundations/index.tsx
@@ -17,7 +17,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'foundations', `/foundations`).props,

diff --git a/src/app/pages/foundations/logo.tsx b/src/app/pages/foundations/logo.tsx
@@ -36,7 +36,7 @@ import { buttonVariants } from '../../components/ui/button';
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/foundations/', 'logo', `/foundations`).props,

diff --git a/src/app/pages/foundations/typography.tsx b/src/app/pages/foundations/typography.tsx
@@ -62,16 +62,6 @@ const Typography = ({
     };
   }, {} as FontFamily);
 
-  const type_copy = config?.app?.type_copy ?? 'Almost before we knew it, we had left the ground.';
-
-  const typographyCategories = typography.reduce((acc, type) => {
-    if (type.name.includes('/')) {
-      const category = type.name.split('/')[0].trim();
-      acc.add(category);
-    }
-    return acc;
-  }, new Set<string>());
-
   return (
     <Layout config={config} menu={menu} metadata={metadata} current={current}>
       <div className="flex flex-col gap-2 pb-7">

diff --git a/src/app/pages/index.tsx b/src/app/pages/index.tsx
@@ -2,7 +2,6 @@ import { ArrowRight, Component, Hexagon, Layers, Shapes } from 'lucide-react';
 import { GetStaticProps } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
@@ -21,7 +20,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       ...fetchDocPageMarkdown('docs/', 'index', `/`).props,
@@ -31,8 +30,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
 };
 
 const Home = ({ content, menu, metadata, config, current }: DocumentationProps) => {
-  const router = useRouter();
-
   return (
     <Layout config={config} menu={menu} current={current} metadata={metadata} fullWidthHero={true}>
       <div className="w-full bg-linear-to-r py-12 dark:from-gray-900 dark:to-gray-800 sm:py-20">

diff --git a/src/app/pages/system/component/[component]/index.tsx b/src/app/pages/system/component/[component]/index.tsx
@@ -110,7 +110,7 @@ export const getStaticProps = async (context) => {
 };
 
 function filterPreviews(previews: Record<string, OptionalPreviewRender>, filter: Filter): Record<string, OptionalPreviewRender> {
-  return Object.fromEntries(Object.entries(previews).filter(([_, preview]) => evaluateFilter(preview.values, filter)));
+  return Object.fromEntries(Object.entries(previews).filter(([, preview]) => evaluateFilter(preview.values, filter)));
 }
 
 const GenericComponentPage = ({ menu, metadata, current, id, config, componentHotReloadIsAvailable, previousComponent, nextComponent }) => {
@@ -123,7 +123,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
   const componentRoute = (componentId: string) => `${normalizedBasePath}/system/component/${componentId}`;
 
   const fetchComponents = async () => {
-    let data = await fetch(`${normalizedBasePath}/api/component/${id}.json`).then((res) => res.json());
+    const data = await fetch(`${normalizedBasePath}/api/component/${id}.json`).then((res) => res.json());
     setComponent(data as PreviewObject);
   };
 

diff --git a/src/app/pages/system/index.tsx b/src/app/pages/system/index.tsx
@@ -30,7 +30,7 @@ type ComponentPageDocumentationProps = DocumentationProps;
  * @param context GetStaticProps
  * @returns
  */
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps: GetStaticProps = async () => {
   // Read current slug
   const config = getClientRuntimeConfig();
   return {
@@ -49,7 +49,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
   // 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());
+    const data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
     setComponents(data as PreviewObject[]);
   };
   useEffect(() => {