handoff-app 1.0.3 → 1.0.5

package/dist/transformers/preview/component/api.js

@@ -95,20 +95,21 @@ exports.writeComponentApi = writeComponentApi;
  * @param componentData
  */
 const updateComponentSummaryApi = (handoff_1, componentData_1, ...args_1) => __awaiter(void 0, [handoff_1, componentData_1, ...args_1], void 0, function* (handoff, componentData, isFullRebuild = false) {
+    var _a;
     if (isFullRebuild) {
         // Full rebuild: replace the entire file
         yield writeComponentSummaryAPI(handoff, componentData);
         return;
     }
     // Partial update: merge with existing data
-    const apiPath = path_1.default.resolve(handoff.workingPath, 'public/api/components.json');
+    const apiPath = path_1.default.resolve(handoff.workingPath, `${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/components.json`);
     let existingData = [];
     if (fs_extra_1.default.existsSync(apiPath)) {
         try {
             const existing = yield fs_extra_1.default.readFile(apiPath, 'utf8');
             existingData = JSON.parse(existing);
         }
-        catch (_a) {
+        catch (_b) {
             // Corrupt or missing JSON — treat as empty
             existingData = [];
         }

package/dist/transformers/preview/component/builder.js

@@ -313,6 +313,7 @@ function processComponents(handoff, id, segmentToProcess, options) {
  * @returns
  */
 const buildComponentSummary = (id, data) => {
+    var _a;
     return {
         id,
         title: data.title,
@@ -325,7 +326,7 @@ const buildComponentSummary = (id, data) => {
         tags: data.tags ? data.tags : [],
         properties: data.properties,
         previews: data.previews,
-        path: `/api/component/${id}.json`,
+        path: `${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/component/${id}.json`,
     };
 };
 exports.default = processComponents;

package/dist/transformers/utils/handlebars.js

@@ -52,9 +52,10 @@ exports.registerHandlebarsHelpers = registerHandlebarsHelpers;
  * @returns Handlebars context object
  */
 const createHandlebarsContext = (data, previewData) => {
+    var _a, _b, _c, _d, _e;
     return {
-        style: `<link rel="stylesheet" href="/api/component/shared.css"><link rel="stylesheet" href="/api/component/${data.id}.css">\n<link rel="stylesheet" href="/assets/css/preview.css">`,
-        script: `<script src="/api/component/${data.id}.js"></script>\n<script src="/assets/js/preview.js"></script><script>var fields = ${JSON.stringify(data.properties)};</script>`,
+        style: `<link rel="stylesheet" href="${(_a = process.env.HANDOFF_APP_BASE_PATH) !== null && _a !== void 0 ? _a : ''}/api/component/shared.css"><link rel="stylesheet" href="${(_b = process.env.HANDOFF_APP_BASE_PATH) !== null && _b !== void 0 ? _b : ''}/api/component/${data.id}.css">\n<link rel="stylesheet" href="${(_c = process.env.HANDOFF_APP_BASE_PATH) !== null && _c !== void 0 ? _c : ''}/assets/css/preview.css">`,
+        script: `<script src="${(_d = process.env.HANDOFF_APP_BASE_PATH) !== null && _d !== void 0 ? _d : ''}/api/component/${data.id}.js"></script>\n<script src="${(_e = process.env.HANDOFF_APP_BASE_PATH) !== null && _e !== void 0 ? _e : ''}/assets/js/preview.js"></script><script>var fields = ${JSON.stringify(data.properties)};</script>`,
         properties: previewData.values || {},
         fields: data.properties,
         title: data.title,

package/package.json

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

package/src/app/components/Component/Preview.tsx

@@ -303,7 +303,7 @@ export const ComponentDisplay: React.FC<{
                         className="h-7 px-3 hover:bg-gray-300 [&_svg]:size-3"
                         onClick={() => {
                           // open in new tab
-                          window.open('/api/component/' + previewUrl, '_blank');
+                          window.open(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${previewUrl}`, '_blank');
                         }}
                         variant="ghost"
                       >
@@ -333,7 +333,7 @@ export const ComponentDisplay: React.FC<{
                       display: 'block',
                       margin: '0 auto',
                     }}
-                    src={`/api/component/` + previewUrl}
+                    src={`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${previewUrl}`}
                   />
                 </div>
               ) : (
@@ -539,9 +539,9 @@ const hasNestedProperties = (row: SlotMetadata): boolean => {
   );
 };
 
-const TableRows: React.FC<{ 
-  rows: SlotMetadata[]; 
-  openSheet: (field: SlotMetadata) => void; 
+const TableRows: React.FC<{
+  rows: SlotMetadata[];
+  openSheet: (field: SlotMetadata) => void;
   depth?: number;
   parentPath?: string;
 }> = ({
@@ -550,24 +550,24 @@ const TableRows: React.FC<{
   depth = 0,
   parentPath = '',
 }) => {
-  return (
-    <>
-      {rows.map((row, i) => {
-        if (!row) return null;
-        const currentPath = parentPath ? `${parentPath}.${row.key || row.name}` : (row.key || row.name);
-        return (
-          <ExpandableTableRow 
-            key={`row-${currentPath}-${i}`}
-            row={row} 
-            openSheet={openSheet} 
-            depth={depth}
-            path={currentPath}
-          />
-        );
-      })}
-    </>
-  );
-};
+    return (
+      <>
+        {rows.map((row, i) => {
+          if (!row) return null;
+          const currentPath = parentPath ? `${parentPath}.${row.key || row.name}` : (row.key || row.name);
+          return (
+            <ExpandableTableRow
+              key={`row-${currentPath}-${i}`}
+              row={row}
+              openSheet={openSheet}
+              depth={depth}
+              path={currentPath}
+            />
+          );
+        })}
+      </>
+    );
+  };
 
 const humanReadableSizeRule = (rule: string, value: any) => {
   switch (rule) {
@@ -597,9 +597,9 @@ const humanReadableSizeRule = (rule: string, value: any) => {
  * An expandable table row that can show nested properties
  * Supports deep nesting with visual indentation and expand/collapse
  */
-const ExpandableTableRow: React.FC<{ 
-  row: SlotMetadata; 
-  openSheet: (field: SlotMetadata) => void; 
+const ExpandableTableRow: React.FC<{
+  row: SlotMetadata;
+  openSheet: (field: SlotMetadata) => void;
   depth: number;
   path: string;
 }> = ({
@@ -608,104 +608,104 @@ const ExpandableTableRow: React.FC<{
   depth,
   path,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const nested = getNestedProperties(row);
-  const canExpand = hasNestedProperties(row);
-  
-  const getSizeDisplay = (row: SlotMetadata) => {
-    if (!row.rules) return '-';
-
-    // Find the first applicable size rule
-    const sizeRules = ['dimensions', 'content', 'maxSize'];
-    const rule = Object.keys(row.rules).find((r) => sizeRules.includes(r));
-
-    return rule ? humanReadableSizeRule(rule, row.rules[rule]) : '-';
-  };
+    const [isExpanded, setIsExpanded] = useState(false);
+    const nested = getNestedProperties(row);
+    const canExpand = hasNestedProperties(row);
 
-  // Calculate indent based on depth (each level adds 20px)
-  const indentPx = depth * 20;
-  
-  // Get background color based on depth for visual hierarchy
-  const getDepthBgClass = (depth: number) => {
-    if (depth === 0) return '';
-    if (depth === 1) return 'bg-gray-50/50 dark:bg-gray-800/30';
-    if (depth === 2) return 'bg-gray-100/50 dark:bg-gray-800/50';
-    return 'bg-gray-100/70 dark:bg-gray-800/70';
-  };
+    const getSizeDisplay = (row: SlotMetadata) => {
+      if (!row.rules) return '-';
 
-  const handleRowClick = (e: React.MouseEvent) => {
-    // If clicking on the expand button area, don't open the sheet
-    if ((e.target as HTMLElement).closest('.expand-toggle')) {
-      return;
-    }
-    openSheet(row);
-  };
+      // Find the first applicable size rule
+      const sizeRules = ['dimensions', 'content', 'maxSize'];
+      const rule = Object.keys(row.rules).find((r) => sizeRules.includes(r));
 
-  const handleExpandToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
+      return rule ? humanReadableSizeRule(rule, row.rules[rule]) : '-';
+    };
 
-  return (
-    <>
-      <TableRow 
-        className={`h-10 cursor-pointer border-b-[0.5px] ${getDepthBgClass(depth)}`} 
-        onClick={handleRowClick}
-      >
-        <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1">
-          <div className="flex items-center" style={{ paddingLeft: `${indentPx}px` }}>
-            {canExpand ? (
-              <button 
-                className="expand-toggle mr-2 flex h-5 w-5 items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700"
-                onClick={handleExpandToggle}
-                aria-label={isExpanded ? 'Collapse' : 'Expand'}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="h-4 w-4 text-gray-500" />
-                ) : (
-                  <ChevronRight className="h-4 w-4 text-gray-500" />
-                )}
-              </button>
-            ) : (
-              <span className="mr-2 w-5" /> 
-            )}
-            <span className={depth > 0 ? 'text-gray-700 dark:text-gray-300' : ''}>
-              {startCase(row.name)}
-            </span>
-            {canExpand && (
-              <span className="ml-2 text-xs text-gray-400">
-                ({Object.keys(nested || {}).length} {row.type === 'array' ? 'item fields' : 'fields'})
+    // Calculate indent based on depth (each level adds 20px)
+    const indentPx = depth * 20;
+
+    // Get background color based on depth for visual hierarchy
+    const getDepthBgClass = (depth: number) => {
+      if (depth === 0) return '';
+      if (depth === 1) return 'bg-gray-50/50 dark:bg-gray-800/30';
+      if (depth === 2) return 'bg-gray-100/50 dark:bg-gray-800/50';
+      return 'bg-gray-100/70 dark:bg-gray-800/70';
+    };
+
+    const handleRowClick = (e: React.MouseEvent) => {
+      // If clicking on the expand button area, don't open the sheet
+      if ((e.target as HTMLElement).closest('.expand-toggle')) {
+        return;
+      }
+      openSheet(row);
+    };
+
+    const handleExpandToggle = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsExpanded(!isExpanded);
+    };
+
+    return (
+      <>
+        <TableRow
+          className={`h-10 cursor-pointer border-b-[0.5px] ${getDepthBgClass(depth)}`}
+          onClick={handleRowClick}
+        >
+          <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1">
+            <div className="flex items-center" style={{ paddingLeft: `${indentPx}px` }}>
+              {canExpand ? (
+                <button
+                  className="expand-toggle mr-2 flex h-5 w-5 items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+                  onClick={handleExpandToggle}
+                  aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                  )}
+                </button>
+              ) : (
+                <span className="mr-2 w-5" />
+              )}
+              <span className={depth > 0 ? 'text-gray-700 dark:text-gray-300' : ''}>
+                {startCase(row.name)}
               </span>
-            )}
-          </div>
-        </TableCell>
-        <TableCell className="border-r-[0.5px] px-3.5 py-1">
-          <Badge variant={getVariantForType(row.type)} className="rounded-xl px-2.5">
-            {row.type}
-          </Badge>
-          {row.type === 'array' && row.items?.type && (
-            <Badge variant="outline" className="ml-1 rounded-xl px-2 text-[10px]">
-              {row.items.type}[]
+              {canExpand && (
+                <span className="ml-2 text-xs text-gray-400">
+                  ({Object.keys(nested || {}).length} {row.type === 'array' ? 'item fields' : 'fields'})
+                </span>
+              )}
+            </div>
+          </TableCell>
+          <TableCell className="border-r-[0.5px] px-3.5 py-1">
+            <Badge variant={getVariantForType(row.type)} className="rounded-xl px-2.5">
+              {row.type}
             </Badge>
-          )}
-        </TableCell>
-        <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
-          {getSizeDisplay(row)}
-        </TableCell>
-        <TableCell className="border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
-          <span className="slot-description line-clamp-1">{row.description || row.generic || '-'}</span>
-        </TableCell>
-      </TableRow>
-      
-      {/* Render nested properties when expanded */}
-      {isExpanded && nested && nested.length > 0 && (
-        <TableRows 
-          rows={nested} 
-          openSheet={openSheet} 
-          depth={depth + 1}
-          parentPath={path}
-        />
-      )}
-    </>
-  );
-};
+            {row.type === 'array' && row.items?.type && (
+              <Badge variant="outline" className="ml-1 rounded-xl px-2 text-[10px]">
+                {row.items.type}[]
+              </Badge>
+            )}
+          </TableCell>
+          <TableCell className="whitespace-nowrap border-l-[0.5px] border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
+            {getSizeDisplay(row)}
+          </TableCell>
+          <TableCell className="border-r-[0.5px] px-4 py-1 text-gray-600 dark:text-gray-300">
+            <span className="slot-description line-clamp-1">{row.description || row.generic || '-'}</span>
+          </TableCell>
+        </TableRow>
+
+        {/* Render nested properties when expanded */}
+        {isExpanded && nested && nested.length > 0 && (
+          <TableRows
+            rows={nested}
+            openSheet={openSheet}
+            depth={depth + 1}
+            parentPath={path}
+          />
+        )}
+      </>
+    );
+  };

package/src/app/components/ComponentSearch.tsx

@@ -9,7 +9,7 @@ import React from 'react';
  */
 export const getComponentList = async (): Promise<ComponentListObject[]> => {
   // Try to load the component from the public json
-  let data = await fetch(`/api/components.json`).then((res) => res.json());
+  let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
   return data as ComponentListObject[];
 };
 

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

@@ -206,6 +206,9 @@ export const staticBuildMenu = () => {
   // // Contents of docs
   const docRoot = path.join(process.env.HANDOFF_MODULE_PATH ?? '', 'config/docs');
   // Get the file list
+  if(!fs.existsSync(docRoot)) {
+    return [];
+  }
   const files = fs.readdirSync(docRoot);
   let list = files;
   const workingPages = path.resolve(process.env.HANDOFF_WORKING_PATH ?? '', 'pages');
@@ -277,7 +280,7 @@ export const staticBuildMenu = () => {
           title: metadata.menuTitle ?? metadata.title,
           external,
           weight: metadata.weight ?? 0,
-          path: filepath,
+          path: `${filepath}`,
           subSections,
         };
       }
@@ -287,6 +290,7 @@ export const staticBuildMenu = () => {
 };
 
 const staticBuildComponentMenu = (type?: boolean | string) => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
   let menu = [];
   let components = fetchComponents({ includeTokens: false });
   if (typeof type === 'string' && type !== '') {
@@ -305,7 +309,7 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
       if (component.name) {
         title = component.name;
       }
-      menuGroup.menu.push({ path: `system/component/${component.id}`, title });
+      menuGroup.menu.push({ path: `${basePath}/system/component/${component.id}`, title });
     });
     // sort the menu group by name alphabetical
     menuGroup.menu = menuGroup.menu.sort((a, b) => a.title.localeCompare(b.title));
@@ -317,22 +321,24 @@ const staticBuildComponentMenu = (type?: boolean | string) => {
 };
 
 const staticBuildTokensMenu = () => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
+
   const menu = [
     {
       title: `Foundations`,
-      path: `system/tokens/foundations`,
+      path: `${basePath}/system/tokens/foundations`,
       menu: [
         {
           title: `Colors`,
-          path: `system/tokens/foundations/colors`,
+          path: `${basePath}/system/tokens/foundations/colors`,
         },
         {
           title: `Effects`,
-          path: `system/tokens/foundations/effects`,
+          path: `${basePath}/system/tokens/foundations/effects`,
         },
         {
           title: `Typography`,
-          path: `system/tokens/foundations/typography`,
+          path: `${basePath}/system/tokens/foundations/typography`,
         },
       ],
     },
@@ -352,14 +358,14 @@ const staticBuildTokensMenu = () => {
       if (component.name) {
         title = component.name;
       }
-      componentMenuItems.push({ path: `system/tokens/components/${component.id}`, title });
+      componentMenuItems.push({ path: `${basePath}/system/tokens/components/${component.id}`, title });
     });
   });
 
   if (componentMenuItems.length > 0) {
     menu.push({
       title: `Components`,
-      path: `system/tokens/components`,
+      path: `${basePath}/system/tokens/components`,
       menu: componentMenuItems,
     });
   }
@@ -368,9 +374,11 @@ const staticBuildTokensMenu = () => {
 };
 
 const staticBuildTokenMenu = () => {
+  const basePath = (process.env.HANDOFF_APP_BASE_PATH ?? '').replace(/^\//, '');
+
   let subSections = {
     title: 'Tokens',
-    path: 'system/tokens',
+    path: `${basePath}/system/tokens`,
     menu: [],
   };
   const tokens = getTokens();

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

@@ -110,7 +110,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
   const [componentPreviews, setComponentPreviews] = useState<PreviewObject | [string, PreviewObject][]>();
 
   const fetchComponents = async () => {
-    let data = await fetch(`/api/component/${id}.json`).then((res) => res.json());
+    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${id}.json`).then((res) => res.json());
     setComponent(data as PreviewObject);
   };
 

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

@@ -67,7 +67,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(`/api/components.json`).then((res) => res.json());
+    let data = await fetch(`${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/components.json`).then((res) => res.json());
     setComponents(data as PreviewObject[]);
   };
   useEffect(() => {
@@ -108,7 +108,7 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
     );
   }
 
-  const apiUrl = (window.location.origin && window.location.origin) + `/api/components.json`;
+  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">

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

@@ -39,14 +39,14 @@ export const getStaticProps: GetStaticProps = async (context) => {
         ...fetchDocPageMarkdown('docs/', 'system', `/system`).props,
         components: components
           ? components.reduce(
-              (acc, component) => ({
-                ...acc,
-                ...{
-                  [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
-                },
-              }),
-              {}
-            )
+            (acc, component) => ({
+              ...acc,
+              ...{
+                [component]: fetchDocPageMetadataAndContent('docs/components/', component).metadata,
+              },
+            }),
+            {}
+          )
           : null,
       } as ComponentPageDocumentationProps,
     },
@@ -61,14 +61,14 @@ 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(`/api/components.json`).then((res) => res.json());
+    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) + `/api/components.json`;
+  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">

package/src/cli.ts

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

package/src/commands/index.ts

@@ -5,6 +5,7 @@ import ejectConfigCommand from './eject/config';
 import ejectPagesCommand from './eject/pages';
 import ejectThemeCommand from './eject/theme';
 import fetchCommand from './fetch';
+import initCommand from './init';
 import makeComponentCommand from './make/component';
 import makePageCommand from './make/page';
 import makeTemplateCommand from './make/template';
@@ -20,6 +21,7 @@ export const commands = [
   ejectPagesCommand,
   ejectThemeCommand,
   fetchCommand,
+  initCommand,
   makePageCommand,
   makeComponentCommand,
   makeTemplateCommand,

package/src/commands/init/index.ts

@@ -0,0 +1,17 @@
+import { CommandModule } from 'yargs';
+import create from '../../create';
+
+export interface InitArgs {}
+
+const command: CommandModule<{}, InitArgs> = {
+  command: 'init',
+  describe: 'Initialize a new Handoff project with interactive wizard',
+  builder: (yargs) => {
+    return yargs;
+  },
+  handler: async () => {
+    await create();
+  },
+};
+
+export default command;