handoff-app 1.1.2 → 1.1.3-1

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

@@ -3,8 +3,9 @@ import { groupBy, upperFirst } from 'lodash';
 import type { GetStaticProps } from 'next';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../components/ui/table';
@@ -61,7 +62,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
       <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

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

@@ -4,8 +4,9 @@ import type { GetStaticProps } from 'next';
 import React, { ReactElement } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import Layout from '../../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../../components/Markdown/MarkdownComponents';
+import { MarkdownComponents, remarkCodeMeta } from '../../../../components/Markdown/MarkdownComponents';
 import AnchorNav from '../../../../components/Navigation/AnchorNav';
 import HeadersType from '../../../../components/Typography/Headers';
 import { Table, TableBody, TableCell, TableRow } from '../../../../components/ui/table';
@@ -53,7 +54,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config, design }: Fo
       <div className="mt-10 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div>
           <div className="prose">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
+            <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm, remarkCodeMeta]} rehypePlugins={[rehypeRaw]}>
               {content}
             </ReactMarkdown>
           </div>

package/src/app-builder/build.ts

@@ -9,7 +9,7 @@ import processComponents from '../transformers/preview/component/builder';
 import { Logger } from '../utils/logger';
 import { generateTokensApi, persistClientConfig } from './client-config';
 import { getAppPath, syncPublicFiles } from './paths';
-import { WatcherState, getRuntimeComponentsPathsToWatch, watchAppSource, watchGlobalEntries, watchPages, watchPublicDirectory, watchRuntimeComponents, watchRuntimeConfiguration } from './watchers';
+import { WatcherState, getRuntimeComponentsPathsToWatch, watchAppSource, watchComponentDirectories, watchGlobalEntries, watchPages, watchPublicDirectory, watchRuntimeComponents, watchRuntimeConfiguration } from './watchers';
 import { createWebSocketServer } from './websocket';
 
 const escapeForSingleQuotedJsString = (value: string): string => value.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
@@ -193,11 +193,13 @@ export const watchApp = async (handoff: Handoff): Promise<void> => {
     debounce: false,
     runtimeComponentsWatcher: null,
     runtimeConfigurationWatcher: null,
+    componentDirectoriesWatcher: null,
   };
 
   watchPublicDirectory(handoff, wss, state, chokidarConfig);
   watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
   watchRuntimeConfiguration(handoff, state);
+  watchComponentDirectories(handoff, state, chokidarConfig);
   watchGlobalEntries(handoff, state, chokidarConfig);
   watchPages(handoff, chokidarConfig);
 };

package/src/app-builder/watchers.ts

@@ -15,6 +15,7 @@ export interface WatcherState {
   debounce: boolean;
   runtimeComponentsWatcher: chokidar.FSWatcher | null;
   runtimeConfigurationWatcher: chokidar.FSWatcher | null;
+  componentDirectoriesWatcher: chokidar.FSWatcher | null;
 }
 
 /**
@@ -258,13 +259,9 @@ export const watchRuntimeConfiguration = (handoff: Handoff, state: WatcherState)
             state.debounce = true;
             try {
               file = path.dirname(file);
-              // Reload the Handoff instance to pick up configuration changes
               handoff.reload();
-              // After reloading, persist the updated client configuration
               await persistClientConfig(handoff);
-              // Restart the runtime components watcher to track potentially updated/added/removed components
               watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
-              // Process components based on the updated configuration and file path
               await processComponents(handoff, path.basename(file));
             } catch (e) {
               Logger.error('Error reloading runtime configuration:', e);
@@ -277,3 +274,68 @@ export const watchRuntimeConfiguration = (handoff: Handoff, state: WatcherState)
     });
   }
 };
+
+/**
+ * Watches the parent component directories from config.entries.components
+ * for new components being added. When a new config file (e.g. button.json)
+ * appears in a new subdirectory, reloads the runtime config and restarts
+ * the component/configuration watchers so the new component is picked up.
+ */
+export const watchComponentDirectories = (handoff: Handoff, state: WatcherState, chokidarConfig: chokidar.WatchOptions) => {
+  if (state.componentDirectoriesWatcher) {
+    state.componentDirectoriesWatcher.close();
+  }
+
+  const componentPaths = handoff.config.entries?.components ?? [];
+  if (componentPaths.length === 0) return;
+
+  const dirsToWatch: string[] = [];
+  for (const componentPath of componentPaths) {
+    const resolved = path.resolve(handoff.workingPath, componentPath);
+    if (fs.existsSync(resolved) && fs.statSync(resolved).isDirectory()) {
+      dirsToWatch.push(resolved);
+    }
+  }
+
+  if (dirsToWatch.length === 0) return;
+
+  const knownComponents = new Set(Object.keys(handoff.runtimeConfig?.entries?.components ?? {}));
+
+  state.componentDirectoriesWatcher = chokidar.watch(dirsToWatch, {
+    ...chokidarConfig,
+    depth: 1,
+  });
+
+  state.componentDirectoriesWatcher.on('add', async (file) => {
+    const basename = path.basename(file);
+    const dirName = path.basename(path.dirname(file));
+
+    const isConfigFile = basename.endsWith('.json') || basename.endsWith('.js') || basename.endsWith('.cjs');
+    const isNewComponent = isConfigFile && basename.startsWith(dirName) && !knownComponents.has(dirName);
+
+    if (!isNewComponent) return;
+
+    if (!state.debounce) {
+      state.debounce = true;
+      try {
+        Logger.warn(`New component detected: ${dirName}. Reloading configuration...`);
+        handoff.reload();
+        knownComponents.add(dirName);
+
+        // Update known set with all current components
+        for (const id of Object.keys(handoff.runtimeConfig?.entries?.components ?? {})) {
+          knownComponents.add(id);
+        }
+
+        await persistClientConfig(handoff);
+        watchRuntimeComponents(handoff, state, getRuntimeComponentsPathsToWatch(handoff));
+        watchRuntimeConfiguration(handoff, state);
+        await processComponents(handoff, dirName);
+      } catch (e) {
+        Logger.error('Error processing new component:', e);
+      } finally {
+        state.debounce = false;
+      }
+    }
+  });
+};

package/src/cli.ts

@@ -19,7 +19,7 @@ class HandoffCliError extends Error {
  * Show the help message
  */
 const showVersion = () => {
-  return 'Handoff App - 1.1.2';
+  return 'Handoff App - 1.1.3';
 };
 
 /**

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

@@ -1,104 +0,0 @@
-import { GetStaticProps } from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import Layout from '../../../components/Layout/Main';
-import { MarkdownComponents } from '../../../components/Markdown/MarkdownComponents';
-import HeadersType from '../../../components/Typography/Headers';
-import {
-  buildL2StaticPaths,
-  DocumentationProps,
-  fetchDocPageMarkdown,
-  getClientRuntimeConfig,
-  IParams,
-  reduceSlugToString,
-} from '../../../components/util';
-
-export interface SubPageType {
-  params: {
-    level1: string;
-    level2: string;
-  };
-}
-/**
- * Render all index pages
- * @returns
- */
-export async function getStaticPaths() {
-  return {
-    paths: buildL2StaticPaths(),
-    fallback: false,
-  };
-}
-/**
- * Get all the markdown data, build a menu tree, and then fetch the contents
- * of the current page for rendering
- *
- * This is all done statically at build time
- * @param context GetStaticProps
- * @returns
- */
-export const getStaticProps: GetStaticProps = async (context) => {
-  // Read current slug
-  const { level1 } = context.params as IParams;
-  let { level2 } = context.params as IParams;
-  if (!level2) {
-    level2 = '404';
-  }
-  return {
-    props: {
-      ...fetchDocPageMarkdown(`docs/${level1}/`, reduceSlugToString(level2), `/${level1}`).props,
-      config: getClientRuntimeConfig(),
-    },
-  };
-};
-
-/**
- * Render Docs page
- * @param param0
- * @returns
- */
-export default function DocSubPage({ content, menu, metadata, current, config }: DocumentationProps) {
-  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>
-          <div className="prose mb-10">
-            <ReactMarkdown components={MarkdownComponents} rehypePlugins={[rehypeRaw]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </div>
-      </Layout>
-    );
-  } else {
-    return (
-      <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
-        <Head>
-          <title>404 - Page Not Found</title>
-          <meta name="description" content="Page Not Found" />
-        </Head>
-        <div className="flex flex-col items-center">
-          <div className="mb-2 text-7xl font-bold text-gray-800 dark:text-white">404</div>
-          <h1 className="mb-4 text-2xl font-semibold text-gray-700 dark:text-gray-300">Oops! Page not found.</h1>
-          <p className="mb-6 max-w-md text-center text-gray-500 dark:text-gray-400">
-            Sorry, the page you are looking for does not exist or has been moved.
-            <br />
-            Please check the URL or return to the homepage.
-          </p>
-          <Link
-            href="/"
-            className="rounded-md bg-blue-600 px-6 py-2 font-medium text-white shadow-md transition-colors duration-200 hover:bg-blue-700"
-          >
-            Go Home
-          </Link>
-        </div>
-      </div>
-    );
-  }
-}