handoff-app 1.1.3 → 1.2.0-0

package/src/transformers/preview/component/api.ts

@@ -2,6 +2,22 @@ import fs from 'fs-extra';
 import path from 'path';
 import Handoff from '../../../index';
 import { ComponentListObject, TransformComponentTokensResult } from '../types';
+import { getDocumentedPreviews } from './previews';
+
+const sanitizeComponentApiData = (
+  component: TransformComponentTokensResult
+): TransformComponentTokensResult => {
+  if (!component) return component;
+
+  const sanitized = {
+    ...component,
+    previews: getDocumentedPreviews(component.previews),
+  };
+
+  delete sanitized.internalPatternPreviews;
+
+  return sanitized;
+};
 
 /**
  * Merges values from a source object into a target object, returning a new object.
@@ -66,18 +82,19 @@ export const writeComponentApi = async (
 ) => {
   const outputDirPath = path.resolve(getAPIPath(handoff), 'component');
   const outputFilePath = path.resolve(outputDirPath, `${id}.json`);
+  const sanitizedComponent = sanitizeComponentApiData(component);
 
   if (fs.existsSync(outputFilePath)) {
     const existingJson = await fs.readFile(outputFilePath, 'utf8');
     if (existingJson) {
       try {
-        const existingData = JSON.parse(existingJson) as TransformComponentTokensResult;
+        const existingData = sanitizeComponentApiData(JSON.parse(existingJson) as TransformComponentTokensResult);
 
         // Special case: always allow page to be cleared when undefined
         // This handles the case where page slices are removed
-        const finalPreserveKeys = component.page === undefined ? preserveKeys.filter((key) => key !== 'page') : preserveKeys;
+        const finalPreserveKeys = sanitizedComponent.page === undefined ? preserveKeys.filter((key) => key !== 'page') : preserveKeys;
 
-        const mergedData = updateObject(existingData, component, finalPreserveKeys);
+        const mergedData = sanitizeComponentApiData(updateObject(existingData, sanitizedComponent, finalPreserveKeys));
         await fs.writeFile(outputFilePath, JSON.stringify(mergedData, null, 2));
         return;
       } catch (_) {
@@ -90,7 +107,7 @@ export const writeComponentApi = async (
     fs.mkdirSync(outputDirPath, { recursive: true });
   }
 
-  await fs.writeFile(outputFilePath, JSON.stringify(component, null, 2));
+  await fs.writeFile(outputFilePath, JSON.stringify(sanitizedComponent, null, 2));
 };
 
 /**
@@ -112,7 +129,10 @@ export const updateComponentSummaryApi = async (handoff: Handoff, componentData:
   if (fs.existsSync(apiPath)) {
     try {
       const existing = await fs.readFile(apiPath, 'utf8');
-      existingData = JSON.parse(existing);
+      existingData = (JSON.parse(existing) as ComponentListObject[]).map((component) => ({
+        ...component,
+        previews: getDocumentedPreviews(component.previews),
+      }));
     } catch {
       // Corrupt or missing JSON — treat as empty
       existingData = [];
@@ -140,7 +160,7 @@ export const readComponentApi = async (handoff: Handoff, id: string): Promise<Tr
     try {
       const existingJson = await fs.readFile(outputFilePath, 'utf8');
       if (existingJson) {
-        return JSON.parse(existingJson) as TransformComponentTokensResult;
+        return sanitizeComponentApiData(JSON.parse(existingJson) as TransformComponentTokensResult);
       }
     } catch (_) {
       // Unable to parse existing file
@@ -174,7 +194,7 @@ export const readComponentMetadataApi = async (handoff: Handoff, id: string): Pr
     categories: componentData.categories ? componentData.categories : [],
     tags: componentData.tags ? componentData.tags : [],
     properties: componentData.properties,
-    previews: componentData.previews,
+    previews: getDocumentedPreviews(componentData.previews),
     path: `/api/component/${id}.json`,
   };
 };

package/src/transformers/preview/component/builder.ts

@@ -16,8 +16,9 @@ import {
 import Handoff from '../../../index';
 import { Logger } from '../../../utils/logger';
 import { ensureIds } from '../../utils/schema';
-import { ComponentListObject, ComponentType, TransformComponentTokensResult } from '../types';
+import { ComponentListObject, ComponentType, OptionalPreviewRender, TransformComponentTokensResult } from '../types';
 import { readComponentApi, readComponentMetadataApi, updateComponentSummaryApi, writeComponentApi } from './api';
+import { getDocumentedPreviews } from './previews';
 import buildComponentCss from './css';
 import buildPreviews from './html';
 import buildComponentJs from './javascript';
@@ -75,6 +76,13 @@ const ensureDefaultPreview = (data: TransformComponentTokensResult): void => {
   }
 };
 
+const getBuildPreviews = (data: TransformComponentTokensResult): { [key: string]: OptionalPreviewRender } => {
+  return {
+    ...(data?.previews || {}),
+    ...(data?.internalPatternPreviews || {}),
+  };
+};
+
 /**
  * Returns a normalized build plan describing which component segments need rebuilding.
  *
@@ -269,10 +277,11 @@ export async function processComponents(
         data.css = existingData.css;
         data.sass = existingData.sass;
       }
-      // If we're not building previews, preserve pre-existing HTML, code snippet, and previews.
+      // If we're not building previews, preserve pre-existing HTML, code snippet, usage, and previews.
       if (!buildPlan.previews) {
         data.html = existingData.html;
         data.code = existingData.code;
+        data.usage = existingData.usage;
         data.previews = existingData.previews;
       }
       /**
@@ -302,7 +311,14 @@ export async function processComponents(
     }
     // Build previews (HTML, snapshots, etc) if needed.
     if (buildPlan.previews) {
-      data = await buildPreviews(data, handoff, components);
+      data = await buildPreviews(
+        {
+          ...data,
+          previews: getBuildPreviews(data),
+        },
+        handoff,
+        components
+      );
     }
 
     /**
@@ -317,6 +333,7 @@ export async function processComponents(
     // Ensure that every property within the properties array/object contains an 'id' field.
     // This guarantees unique identification for property entries, which is useful for updates and API consumers.
     data.properties = ensureIds(data.properties);
+    data.previews = getDocumentedPreviews(data.previews);
 
     // Write the updated component data to the API file for external access and caching.
     //console.log('data', data);
@@ -374,7 +391,7 @@ const buildComponentSummary = (id: string, data: TransformComponentTokensResult)
     categories: data.categories ? data.categories : [],
     tags: data.tags ? data.tags : [],
     properties: data.properties,
-    previews: data.previews,
+    previews: getDocumentedPreviews(data.previews),
     path: `${process.env.HANDOFF_APP_BASE_PATH ?? ''}/api/component/${id}.json`,
   };
 };

package/src/transformers/preview/component/html.ts

@@ -1,6 +1,7 @@
 import react from '@vitejs/plugin-react';
 import { Types as CoreTypes } from 'handoff-core';
 import { InlineConfig, build as viteBuild } from 'vite';
+import { RendererKind } from '../../../declarations/types';
 import Handoff from '../../../index';
 import { Logger } from '../../../utils/logger';
 import { csfRenderPlugin, handlebarsPreviewsPlugin, ssrRenderPlugin } from '../../plugins';
@@ -8,6 +9,18 @@ import viteBaseConfig from '../../vite-config';
 import { getComponentOutputPath } from '../component';
 import { TransformComponentTokensResult } from '../types';
 
+const resolveRenderer = (data: TransformComponentTokensResult): RendererKind | undefined => {
+  const templatePath = data.entries?.template || '';
+  return (
+    data.renderer ||
+    (data.entries?.story || templatePath.match(/\.stories\.(jsx|tsx|js|ts)$/) ? 'csf' : undefined) ||
+    (data.entries?.component || (templatePath.includes('.tsx') && !templatePath.match(/\.stories\.(jsx|tsx|js|ts)$/))
+      ? 'react'
+      : undefined) ||
+    (templatePath.includes('.hbs') ? 'handlebars' : undefined)
+  );
+};
+
 /**
  * Builds previews for components using Vite and Handlebars.
  *
@@ -29,13 +42,13 @@ export const buildPreviews = async (
 ): Promise<TransformComponentTokensResult> => {
   if (!data.entries?.template) return data;
 
+  const resolvedRenderer = resolveRenderer(data);
+
   const plugins = [
     ...(viteBaseConfig.plugins || []),
-    ...(data.entries.template.includes('.hbs') ? [handlebarsPreviewsPlugin(data, components, handoff)] : []),
-    ...(data.entries.template.match(/\.stories\.(jsx|tsx)$/) ? [csfRenderPlugin(data, components, handoff)] : []),
-    ...(data.entries.template.includes('.tsx') && !data.entries.template.match(/\.stories\.(jsx|tsx)$/)
-      ? [react(), ssrRenderPlugin(data, components, handoff)]
-      : []),
+    ...(resolvedRenderer === 'handlebars' ? [handlebarsPreviewsPlugin(data, components, handoff)] : []),
+    ...(resolvedRenderer === 'csf' ? [csfRenderPlugin(data, components, handoff)] : []),
+    ...(resolvedRenderer === 'react' ? [react(), ssrRenderPlugin(data, components, handoff)] : []),
   ];
 
   // Store the current NODE_ENV value before vite build

package/src/transformers/preview/component/previews.ts

@@ -0,0 +1,12 @@
+import type { OptionalPreviewRender } from '../types';
+
+/**
+ * Returns previews exposed in docs/API; synthetic pattern previews (`__pattern_*`) are omitted.
+ */
+export const getDocumentedPreviews = (
+  previews?: { [key: string]: OptionalPreviewRender }
+): { [key: string]: OptionalPreviewRender } => {
+  return Object.fromEntries(
+    Object.entries(previews || {}).filter(([key]) => !key.startsWith('__pattern_'))
+  );
+};

package/src/transformers/preview/pattern/api.ts

@@ -0,0 +1,66 @@
+import fs from 'fs-extra';
+import path from 'path';
+import Handoff from '../../../index';
+import { PatternListObject, PatternObject } from '../types';
+
+export const getPatternAPIPath = (handoff: Handoff): string => {
+  const patternPath = path.resolve(handoff.workingPath, 'public/api/pattern');
+  if (!fs.existsSync(patternPath)) {
+    fs.mkdirSync(patternPath, { recursive: true });
+  }
+  return patternPath;
+};
+
+export const writePatternApi = async (
+  id: string,
+  pattern: PatternObject,
+  handoff: Handoff
+): Promise<void> => {
+  const outputDir = getPatternAPIPath(handoff);
+  const outputFilePath = path.resolve(outputDir, `${id}.json`);
+  await fs.writeFile(outputFilePath, JSON.stringify(pattern, null, 2));
+};
+
+export const writePatternHtml = async (
+  id: string,
+  html: string,
+  handoff: Handoff
+): Promise<void> => {
+  const outputDir = getPatternAPIPath(handoff);
+  const outputFilePath = path.resolve(outputDir, `${id}.html`);
+  await fs.writeFile(outputFilePath, html);
+};
+
+export const writePatternSummaryApi = async (
+  handoff: Handoff,
+  patterns: PatternListObject[]
+): Promise<void> => {
+  const apiPath = path.resolve(handoff.workingPath, 'public/api');
+  if (!fs.existsSync(apiPath)) {
+    fs.mkdirSync(apiPath, { recursive: true });
+  }
+  patterns.sort((a, b) => a.title.localeCompare(b.title));
+  await fs.writeFile(
+    path.resolve(apiPath, 'patterns.json'),
+    JSON.stringify(patterns, null, 2)
+  );
+};
+
+export const syncPatternArtifacts = async (
+  handoff: Handoff,
+  validIds: Iterable<string>
+): Promise<void> => {
+  const validIdSet = new Set(validIds);
+  const patternPath = getPatternAPIPath(handoff);
+  const entries = await fs.readdir(patternPath);
+
+  for (const entry of entries) {
+    const parsed = path.parse(entry);
+    const isPatternArtifact = parsed.ext === '.json' || parsed.ext === '.html';
+    if (!isPatternArtifact) continue;
+
+    if (!validIdSet.has(parsed.name)) {
+      await fs.remove(path.resolve(patternPath, entry));
+    }
+  }
+};

package/src/transformers/preview/pattern/builder.ts

@@ -0,0 +1,94 @@
+import fs from 'fs-extra';
+import path from 'path';
+import Handoff from '../../../index';
+import { Logger } from '../../../utils/logger';
+import { PatternListObject } from '../types';
+import { syncPatternArtifacts, writePatternApi, writePatternHtml, writePatternSummaryApi } from './api';
+import { composePatternHtml } from './html';
+
+/**
+ * Process all pattern declarations and compose their HTML from pre-built
+ * component preview files. This function must run AFTER buildComponents
+ * so that all component preview HTML files already exist on disk.
+ */
+export async function processPatterns(handoff: Handoff): Promise<PatternListObject[]> {
+  const runtimePatterns = handoff.runtimeConfig?.entries?.patterns ?? {};
+  const patternIds = Object.keys(runtimePatterns);
+  const result: PatternListObject[] = [];
+
+  if (patternIds.length === 0) {
+    await syncPatternArtifacts(handoff, []);
+    await writePatternSummaryApi(handoff, result);
+    return result;
+  }
+
+  Logger.info(`Building ${patternIds.length} pattern(s)...`);
+
+  const componentOutputDir = path.resolve(handoff.workingPath, 'public/api/component');
+  const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
+
+  for (const patternId of patternIds) {
+    const pattern = runtimePatterns[patternId];
+    const fragments: { componentId: string; html: string }[] = [];
+    let hasErrors = false;
+
+    for (let i = 0; i < pattern.components.length; i++) {
+      const ref = pattern.components[i];
+
+      if (ref.resolved === false && !ref.resolvedPreview) {
+        hasErrors = true;
+        continue;
+      }
+
+      const previewKey = ref.resolvedPreview || ref.preview || 'default';
+      const htmlFileName = `${ref.id}-${previewKey}.html`;
+      const htmlFilePath = path.resolve(componentOutputDir, htmlFileName);
+
+      if (!fs.existsSync(htmlFilePath)) {
+        const error =
+          `Pattern "${patternId}" component[${i}] ("${ref.id}") preview file not found: ${htmlFileName}. ` +
+          `Ensure the component has a preview named "${previewKey}".`;
+        Logger.warn(error);
+        ref.resolved = false;
+        hasErrors = true;
+        continue;
+      }
+
+      ref.resolved = true;
+      const html = await fs.readFile(htmlFilePath, 'utf8');
+      fragments.push({ componentId: ref.id, html });
+    }
+
+    if (fragments.length === 0) {
+      Logger.warn(`Pattern "${patternId}" produced no fragments. Skipping.`);
+      continue;
+    }
+
+    if (hasErrors) {
+      Logger.warn(`Pattern "${patternId}" has missing components but will be composed from available fragments.`);
+    }
+
+    const composedHtml = composePatternHtml(patternId, pattern.title, fragments, basePath);
+    const patternUrl = `${patternId}.html`;
+
+    const patternData: PatternListObject = {
+      ...pattern,
+      url: patternUrl,
+      path: `${basePath}/api/pattern/${patternId}.json`,
+    };
+
+    await writePatternHtml(patternId, composedHtml, handoff);
+    await writePatternApi(patternId, patternData, handoff);
+
+    result.push(patternData);
+    Logger.debug(`Built pattern: ${patternId} (${fragments.length} component(s))`);
+  }
+
+  await syncPatternArtifacts(handoff, result.map((pattern) => pattern.id));
+  await writePatternSummaryApi(handoff, result);
+  Logger.info(`Finished building ${result.length} pattern(s).`);
+
+  return result;
+}
+
+export default processPatterns;

package/src/transformers/preview/pattern/html.ts

@@ -0,0 +1,107 @@
+import escape from 'lodash/escape';
+import { parse } from 'node-html-parser';
+
+/**
+ * Composes multiple component preview HTML documents into a single-page HTML.
+ *
+ * Each component preview may be a React SSR document (with hydration scripts
+ * and a `#root` / `#__APP_PROPS__` pair) or a static Handlebars document.
+ *
+ * This function namespaces the element ids per-fragment so multiple React
+ * components can coexist and hydrate independently on the same page.
+ *
+ * Each hydration bundle gets its own `<script type="module">` tag for full
+ * module-level isolation. This is critical because esbuild bundles React
+ * into each script using module-scoped `var` declarations, and `hydrateRoot`
+ * is asynchronous — sharing a single module scope would cause later bundles
+ * to overwrite earlier React instances before hydration completes.
+ */
+export const composePatternHtml = (
+  _patternId: string,
+  patternTitle: string,
+  fragments: { componentId: string; html: string }[],
+  basePath: string
+): string => {
+  const cssHrefs = new Set<string>();
+  const bodyParts: string[] = [];
+  const scriptTags: string[] = [];
+
+  cssHrefs.add(`${basePath}/api/component/main.css`);
+  cssHrefs.add(`${basePath}/assets/css/preview.css`);
+
+  const seenComponents = new Set<string>();
+
+  for (let i = 0; i < fragments.length; i++) {
+    const { componentId, html } = fragments[i];
+
+    if (!seenComponents.has(componentId)) {
+      seenComponents.add(componentId);
+      cssHrefs.add(`${basePath}/api/component/${componentId}.css`);
+    }
+
+    const doc = parse(html);
+    const suffix = `_p${i}`;
+    const namespacedRootId = `root${suffix}`;
+    const namespacedPropsId = `__APP_PROPS__${suffix}`;
+
+    // -- Extract props JSON (React SSR) ------------------------------------
+    const propsScript = doc.querySelector('#__APP_PROPS__');
+    let propsContent = '{}';
+    if (propsScript) {
+      propsContent = propsScript.textContent || '{}';
+      propsScript.remove();
+    }
+
+    // -- Extract and rewrite hydration scripts (React SSR) -----------------
+    // Each script becomes its own <script type="module"> for full isolation.
+    const moduleScripts = doc.querySelectorAll('script[type="module"]');
+    for (const script of moduleScripts) {
+      let code = script.textContent || '';
+      if (code.trim()) {
+        code = code
+          .replace(/__APP_PROPS__/g, namespacedPropsId)
+          .replace(/getElementById\(\s*["']root["']\s*\)/g, `getElementById("${namespacedRootId}")`);
+        scriptTags.push(`    <script type="module">\n${code}\n    </script>`);
+      }
+      script.remove();
+    }
+
+    // -- Namespace the root element (React SSR) ----------------------------
+    const rootEl = doc.querySelector('#root');
+    if (rootEl) {
+      rootEl.setAttribute('id', namespacedRootId);
+    }
+
+    // -- Extract body content ----------------------------------------------
+    const bodyEl = doc.querySelector('body');
+    const bodyContent = bodyEl
+      ? bodyEl.innerHTML.trim()
+      : rootEl
+        ? rootEl.outerHTML
+        : doc.innerHTML || '';
+
+    bodyParts.push(
+      `    <div class="handoff-pattern-block" data-component="${componentId}" data-fragment="${i}">\n` +
+      `      <script id="${namespacedPropsId}" type="application/json">${propsContent}</script>\n` +
+      `      ${bodyContent}\n` +
+      `    </div>`
+    );
+  }
+
+  const linkTags = Array.from(cssHrefs)
+    .map((href) => `    <link rel="stylesheet" href="${href}" />`)
+    .join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+${linkTags}
+    <title>${escape(patternTitle)}</title>
+  </head>
+  <body>
+${bodyParts.join('\n')}
+${scriptTags.join('\n')}
+  </body>
+</html>`;
+};

package/src/transformers/preview/types.ts

@@ -1,5 +1,6 @@
 import type { GeneratedDocs } from 'handoff-docgen';
 import { Card } from '../../app/components/Component/Cards';
+import type { RendererKind } from '../../declarations/types';
 import { ValidationResult } from '../../types/preview';
 import { Filter } from '../../utils/filter';
 import { SlotMetadata } from './component';
@@ -108,15 +109,31 @@ export type ComponentObject = {
     scss?: string;
     /** Optional path to component template file (if available) */
     template?: string;
+    /** Optional path to React component source for preview rendering */
+    component?: string;
+    /** Optional path to CSF story file */
+    story?: string;
+    /** Optional path to schema file (if available) */
+    schema?: string;
+    /** Optional path to templates directory */
+    templates?: string;
   };
+  /** Optional explicit renderer id */
+  renderer?: RendererKind;
   /** Schema describing the expected properties (props/slots) for the component */
   properties: { [key: string]: SlotMetadata };
   /** Mapping of preview variations with values and titles for each (used to render sample states) */
   previews: { [key: string]: OptionalPreviewRender };
+  /** Internal previews generated only for pattern composition, not public docs */
+  internalPatternPreviews?: { [key: string]: OptionalPreviewRender };
   /** Optional array of high-level categories for search/filtering */
   categories?: string[];
   /** Optional array of tags for search/filtering (e.g. "primary", "interactive") */
   tags?: string[];
+  /** Optional markdown strings describing recommended usage patterns */
+  should_do?: string[];
+  /** Optional markdown strings describing anti-patterns to avoid */
+  should_not_do?: string[];
   /** Optional source Figma file or node URL for the component */
   figma?: string;
   /** Optional canonical Figma component name or ID (used for matching back to design tokens) */
@@ -125,7 +142,7 @@ export type ComponentObject = {
   page?: ComponentPageDefinition;
   /** Optional additional options for preview and transformer behaviors */
   options?: ComponentOptions;
-}
+};
 
 export type ComponentListObject = {
   id: string;
@@ -151,17 +168,23 @@ export type TransformComponentTokensResult = {
   css?: string;
   sass?: string;
   sharedStyles?: string;
+  usage?: string;
   title?: string;
   description?: string;
   previews?: { [key: string]: OptionalPreviewRender };
+  internalPatternPreviews?: { [key: string]: OptionalPreviewRender };
   properties?: { [key: string]: SlotMetadata };
   variant?: Record<string, string>;
   entries?: {
     js?: string;
     scss?: string;
     template?: string;
+    component?: string;
+    story?: string;
     schema?: string;
+    templates?: string;
   };
+  renderer?: RendererKind;
   options?: {
     preview?: {
       groupBy?: string;
@@ -176,8 +199,42 @@ export type OptionalPreviewRender = {
   title: string;
   values: { [key: string]: string | string[] | any };
   url: string;
+  usage?: string;
+  /** Optional source preview/story key used to derive this preview */
+  sourcePreview?: string;
 };
 
 export interface TransformedPreviewComponents {
   [key: string]: TransformComponentTokensResult[];
 }
+
+// ---------------------------------------------------------------------------
+// Pattern types
+// ---------------------------------------------------------------------------
+
+export type PatternComponentEntry = {
+  /** Component id reference */
+  id: string;
+  /** Named preview variant to use (optional if args provided) */
+  preview?: string;
+  /** Arg overrides (optional if preview provided) */
+  args?: Record<string, any>;
+  /** Preview key resolved during injectPatternPreviews (set at build time) */
+  resolvedPreview?: string;
+  /** Whether the pattern entry resolved to a usable component preview */
+  resolved?: boolean;
+};
+
+export type PatternObject = {
+  title: string;
+  description?: string;
+  group?: string;
+  tags?: string[];
+  components: PatternComponentEntry[];
+  url?: string;
+};
+
+export type PatternListObject = {
+  id: string;
+  path: string;
+} & PatternObject;

package/src/transformers/utils/csf.ts

@@ -0,0 +1,48 @@
+import { startCase } from 'lodash';
+import { OptionalPreviewRender } from '../preview/types';
+
+export type StoryObject = {
+  name?: string;
+  args?: Record<string, any>;
+  argTypes?: Record<string, any>;
+  render?: (args: Record<string, any>) => any;
+};
+
+export type CsfMeta = {
+  title?: string;
+  component?: any;
+  args?: Record<string, any>;
+  argTypes?: Record<string, any>;
+  render?: (args: Record<string, any>) => any;
+};
+
+export function getCsfStoryEntries(moduleExports: Record<string, any>): Array<[string, StoryObject]> {
+  return Object.entries(moduleExports).filter(([key, value]) => {
+    if (key === 'default' || key === '__esModule') return false;
+    if (typeof value === 'function') return true;
+    if (value && typeof value === 'object') return true;
+    return false;
+  }) as Array<[string, StoryObject]>;
+}
+
+export function createCsfStoryPreviews(
+  moduleExports: Record<string, any>
+): Record<string, OptionalPreviewRender> {
+  const meta = (moduleExports.default || {}) as CsfMeta;
+  const stories = getCsfStoryEntries(moduleExports);
+  const previews: Record<string, OptionalPreviewRender> = {};
+
+  for (const [storyKey, storyValue] of stories) {
+    const storyObj = (typeof storyValue === 'function' ? {} : storyValue) as StoryObject;
+    previews[storyKey] = {
+      title: storyObj.name || startCase(storyKey),
+      values: {
+        ...(meta.args || {}),
+        ...(storyObj.args || {}),
+      },
+      url: '',
+    };
+  }
+
+  return previews;
+}

package/src/transformers/utils/index.ts

@@ -17,6 +17,9 @@ export * from './build';
 // Module utilities
 export * from './module';
 
+// CSF utilities
+export * from './csf';
+
 // Handlebars utilities
 export * from './handlebars';