@discourser/design-system 0.15.1 → 0.18.0

package/src/figma-codex/resolver.ts

@@ -0,0 +1,280 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import type { ParsedFigmaFile } from './parser';
+import type { FigmaCodexConfig } from './config';
+import type {
+  ComponentEntry,
+  PropDefinition,
+  SubComponentEntry,
+} from './schema';
+
+function resolveSourceFile(
+  importSource: string,
+  figmaFilePath: string,
+): string | null {
+  const baseDir = dirname(figmaFilePath);
+  const candidates = [
+    join(baseDir, importSource + '.tsx'),
+    join(baseDir, importSource + '.ts'),
+    join(baseDir, importSource, 'index.ts'),
+    join(baseDir, importSource, 'index.tsx'),
+    join(baseDir, importSource),
+  ];
+  for (const c of candidates) {
+    if (existsSync(c)) return c;
+  }
+  return null;
+}
+
+function resolveImplementationFile(sourceFile: string): string {
+  const content = readFileSync(sourceFile, 'utf-8');
+  // If this is an index that re-exports from a single file, resolve to that file
+  // Use a simple match without end-of-string anchor to handle trailing newlines
+  const reExportMatch = content.match(/from\s+['"]\.\/(\w+)['"]/);
+  if (reExportMatch) {
+    const implFile = join(dirname(sourceFile), reExportMatch[1] + '.tsx');
+    if (existsSync(implFile)) return implFile;
+  }
+  return sourceFile;
+}
+
+function extractProps(sourceContent: string): PropDefinition[] {
+  const props: PropDefinition[] = [];
+
+  // Step 1: Find the Props interface and extract its full body using balanced-brace tracking
+  const ifaceRe = /interface\s+\w+Props\s*\{/g;
+  const startMatch = ifaceRe.exec(sourceContent);
+  if (!startMatch) return props;
+
+  // Find the opening { of the interface body
+  const openBrace = sourceContent.indexOf(
+    '{',
+    startMatch.index + startMatch[0].length - 1,
+  );
+  let depth = 0;
+  let closeBrace = openBrace;
+  for (let i = openBrace; i < sourceContent.length; i++) {
+    if (sourceContent[i] === '{') depth++;
+    else if (sourceContent[i] === '}') {
+      depth--;
+      if (depth === 0) {
+        closeBrace = i;
+        break;
+      }
+    }
+  }
+
+  const body = sourceContent.slice(openBrace + 1, closeBrace);
+
+  // Step 2: Parse each prop using a position-based scanner
+  let pos = 0;
+
+  while (pos < body.length) {
+    // Skip whitespace
+    while (pos < body.length && /\s/.test(body[pos])) pos++;
+    if (pos >= body.length) break;
+
+    // Try to match JSDoc comment /** ... */
+    let jsdoc: string | undefined;
+    if (body.startsWith('/**', pos)) {
+      const endDoc = body.indexOf('*/', pos);
+      if (endDoc !== -1) {
+        jsdoc = body
+          .slice(pos + 3, endDoc)
+          .trim()
+          .replace(/\n\s*\*\s*/g, ' ');
+        pos = endDoc + 2;
+        while (pos < body.length && /\s/.test(body[pos])) pos++;
+      }
+    }
+
+    // Match prop name followed by optional `?` and `:`
+    const nameMatch = /^(\w+)(\?)?:/.exec(body.slice(pos));
+    if (!nameMatch) {
+      // Not a prop — skip to next semicolon or newline
+      const next = body.indexOf('\n', pos);
+      pos = next === -1 ? body.length : next + 1;
+      continue;
+    }
+
+    const [fullMatch, name, optional] = nameMatch;
+    pos += fullMatch.length;
+
+    if (name === 'children') {
+      // Skip children — find the next semicolon at depth 0
+      let bracketDepth = 0;
+      while (pos < body.length) {
+        const ch = body[pos];
+        if (ch === '(' || ch === '{') bracketDepth++;
+        else if ((ch === ')' || ch === '}') && bracketDepth > 0) bracketDepth--;
+        else if (ch === ';' && bracketDepth === 0) {
+          pos++;
+          break;
+        }
+        pos++;
+      }
+      continue;
+    }
+
+    // Skip whitespace after the colon
+    while (pos < body.length && body[pos] === ' ') pos++;
+
+    // Read the type: track () and {} depth, stop at ; when depth === 0
+    const typeStart = pos;
+    let bracketDepth = 0;
+    while (pos < body.length) {
+      const ch = body[pos];
+      if (ch === '(' || ch === '{') {
+        bracketDepth++;
+      } else if ((ch === ')' || ch === '}') && bracketDepth > 0) {
+        bracketDepth--;
+      } else if (ch === ';' && bracketDepth === 0) {
+        break;
+      } else if (ch === '\n' && bracketDepth === 0) {
+        break;
+      }
+      pos++;
+    }
+
+    const typeRaw = body.slice(typeStart, pos).trim();
+    // Normalize multi-line types: collapse internal whitespace sequences
+    const typeNormalized = typeRaw.replace(/\s+/g, ' ');
+
+    // Skip the terminating ; or newline
+    if (pos < body.length && (body[pos] === ';' || body[pos] === '\n')) pos++;
+
+    if (!name || !typeNormalized) continue;
+
+    props.push({
+      name,
+      type: typeNormalized,
+      required: !optional,
+      description: jsdoc?.trim(),
+    });
+  }
+
+  return props;
+}
+
+function extractSubComponents(sourceContent: string): SubComponentEntry[] {
+  const subs: SubComponentEntry[] = [];
+  const re =
+    /export\s+const\s+(\w+)\s+=\s+with(?:Provider|Context)\(ark\.(\w+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(sourceContent)) !== null) {
+    const [, name, element] = m;
+    subs.push({ name, element });
+  }
+  return subs;
+}
+
+function classifyComponent(
+  parsed: ParsedFigmaFile,
+  sourceContent: string,
+): 'simple' | 'compound' | 'composite' {
+  if (parsed.importStyle === 'namespace') return 'compound';
+  // Composite: imports from sibling DDS components (e.g., '../Accordion')
+  if (/from\s+['"]\.\.\//g.test(sourceContent)) return 'composite';
+  return 'simple';
+}
+
+function resolveSubpath(
+  parsed: ParsedFigmaFile,
+  config: FigmaCodexConfig,
+  projectRoot: string,
+): string | undefined {
+  try {
+    const pkgPath = join(projectRoot, 'package.json');
+    if (!existsSync(pkgPath)) return undefined;
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    const exports = pkg.exports as Record<string, unknown>;
+    if (!exports) return undefined;
+
+    const name = parsed.componentName;
+    for (const key of Object.keys(exports)) {
+      if (key === `./${name}` || key.endsWith(`/${name}`)) {
+        return `${config.packageName}${key.slice(1)}`;
+      }
+    }
+  } catch {
+    // ignore
+  }
+  return undefined;
+}
+
+export function resolveComponent(
+  parsed: ParsedFigmaFile,
+  config: FigmaCodexConfig,
+): ComponentEntry {
+  // Determine project root: walk up from figma file until we find package.json
+  let projectRoot = dirname(parsed.filePath);
+  for (let i = 0; i < 8; i++) {
+    if (existsSync(join(projectRoot, 'package.json'))) break;
+    projectRoot = dirname(projectRoot);
+  }
+
+  const sourceFile = resolveSourceFile(parsed.importSource, parsed.filePath);
+
+  let sourceContent = '';
+  if (sourceFile && existsSync(sourceFile)) {
+    sourceContent = readFileSync(sourceFile, 'utf-8');
+    // For index files, look for the actual implementation
+    if (sourceFile.endsWith('index.ts') || sourceFile.endsWith('index.tsx')) {
+      const implFile = resolveImplementationFile(sourceFile);
+      if (implFile !== sourceFile && existsSync(implFile)) {
+        sourceContent = readFileSync(implFile, 'utf-8');
+      }
+    }
+  }
+
+  // For composite components, types may be in a separate types.ts file
+  let typesContent = sourceContent;
+  if (sourceFile) {
+    const typesFile = join(dirname(sourceFile), 'types.ts');
+    if (existsSync(typesFile)) {
+      typesContent = readFileSync(typesFile, 'utf-8');
+    }
+  }
+
+  const componentType = classifyComponent(parsed, sourceContent);
+  const props = extractProps(typesContent);
+  const subComponents =
+    componentType === 'compound'
+      ? extractSubComponents(sourceContent)
+      : undefined;
+
+  const subpath = resolveSubpath(parsed, config, projectRoot);
+  const isNamespace = parsed.importStyle === 'namespace';
+  const importName = isNamespace
+    ? `* as ${parsed.componentName}`
+    : `{ ${parsed.componentName} }`;
+  const importFrom = subpath ?? `${config.packageName}/${parsed.componentName}`;
+  const primaryImport = `import ${importName} from '${importFrom}'`;
+
+  const namedExports = isNamespace
+    ? (subComponents?.map((s) => `${parsed.componentName}.${s.name}`) ?? [])
+    : [parsed.componentName];
+
+  const sourcePath = sourceFile
+    ? sourceFile.replace(projectRoot + '/', '')
+    : parsed.importSource;
+
+  return {
+    name: parsed.componentName,
+    type: componentType,
+    figma: {
+      fileKey: parsed.figmaFileKey,
+      nodeId: parsed.figmaNodeId,
+      url: parsed.figmaUrl,
+    },
+    imports: {
+      primary: primaryImport,
+      namedExports,
+      subpath,
+    },
+    props,
+    subComponents,
+    example: parsed.example,
+    sourcePath,
+  };
+}

package/src/figma-codex/schema.ts

@@ -0,0 +1,79 @@
+// src/figma-codex/schema.ts
+
+export interface FigmaCodex {
+  /** Schema version for forward compatibility */
+  version: '1.0.0';
+
+  /** Package name of the design system */
+  packageName: string;
+
+  /** ISO timestamp of generation */
+  generatedAt: string;
+
+  /** Git commit hash (if available) */
+  gitHash?: string;
+
+  /** Source Figma file(s) referenced */
+  figmaFiles: Record<
+    string,
+    {
+      fileKey: string;
+      fileName?: string;
+    }
+  >;
+
+  /** The component registry */
+  components: Record<string, ComponentEntry>;
+}
+
+export interface ComponentEntry {
+  /** Human-readable component name */
+  name: string;
+
+  /** Component type classification */
+  type: 'simple' | 'compound' | 'composite';
+
+  /** Figma reference */
+  figma: {
+    fileKey: string;
+    nodeId: string;
+    nodeName?: string;
+    url: string;
+  };
+
+  /** Import information */
+  imports: {
+    /** Primary import statement */
+    primary: string;
+    /** Named exports available */
+    namedExports: string[];
+    /** Package subpath, e.g. '@discourser/design-system/Breadcrumb' */
+    subpath?: string;
+  };
+
+  /** Prop interface (extracted from TypeScript source) */
+  props: PropDefinition[];
+
+  /** Sub-components for compound components */
+  subComponents?: SubComponentEntry[];
+
+  /** Example JSX from .figma.tsx */
+  example: string;
+
+  /** Source file path relative to project root */
+  sourcePath: string;
+}
+
+export interface PropDefinition {
+  name: string;
+  type: string; // TypeScript type as string
+  required: boolean;
+  description?: string; // JSDoc comment if available
+  defaultValue?: string;
+}
+
+export interface SubComponentEntry {
+  name: string; // e.g. 'Root', 'Header', 'Title'
+  element: string; // underlying HTML element, e.g. 'div', 'h2', 'nav'
+  description?: string;
+}

package/src/figma-codex/writer.ts

@@ -0,0 +1,54 @@
+import { writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { dirname, join, isAbsolute } from 'node:path';
+import { execSync } from 'node:child_process';
+import type { ComponentEntry, FigmaCodex } from './schema';
+
+interface WriteOptions {
+  packageName: string;
+  outputPath: string;
+}
+
+function getGitHash(cwd: string): string | undefined {
+  try {
+    return execSync('git rev-parse --short HEAD', {
+      cwd,
+      stdio: ['pipe', 'pipe', 'pipe'],
+    })
+      .toString()
+      .trim();
+  } catch {
+    return undefined;
+  }
+}
+
+export function writeManifest(
+  components: Record<string, ComponentEntry>,
+  options: WriteOptions,
+  projectRoot: string,
+): void {
+  const figmaFiles: FigmaCodex['figmaFiles'] = {};
+  for (const entry of Object.values(components)) {
+    const { fileKey } = entry.figma;
+    if (fileKey && !figmaFiles[fileKey]) {
+      figmaFiles[fileKey] = { fileKey };
+    }
+  }
+
+  const manifest: FigmaCodex = {
+    version: '1.0.0',
+    packageName: options.packageName,
+    generatedAt: new Date().toISOString(),
+    gitHash: getGitHash(projectRoot),
+    figmaFiles,
+    components,
+  };
+
+  const outPath = isAbsolute(options.outputPath)
+    ? options.outputPath
+    : join(projectRoot, options.outputPath);
+
+  const outDir = dirname(outPath);
+  if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+
+  writeFileSync(outPath, JSON.stringify(manifest, null, 2) + '\n', 'utf-8');
+}

package/src/preset/index.ts

@@ -21,6 +21,7 @@ import { tabs } from './recipes/tabs';
 
 // Park UI recipes - Navigation
 import { breadcrumb } from './recipes/breadcrumb';
+import { navigationMenu } from './recipes/navigation-menu';
 
 // Park UI recipes - Form Elements
 import { switchRecipe } from './recipes/switch';
@@ -47,8 +48,10 @@ import { heading } from './recipes/heading';
 
 // Custom Components
 import { stepper } from './recipes/stepper';
+import { contentCard } from './recipes/content-card';
 import { scenarioCard } from './recipes/scenario-card';
 import { scenarioQueue } from './recipes/scenario-queue';
+import { scenarioSettings } from './recipes/scenario-settings';
 
 // Park UI theme extensions
 import { layerStyles } from './layer-styles';
@@ -162,6 +165,7 @@ export const discourserPandaPreset = definePreset({
         tabs,
         // Navigation
         breadcrumb,
+        navigationMenu,
         // Form Elements
         switchComponent: switchRecipe,
         checkbox,
@@ -178,8 +182,10 @@ export const discourserPandaPreset = definePreset({
         tooltip,
         // Custom Components
         stepper,
+        contentCard,
         scenarioCard,
         scenarioQueue,
+        scenarioSettings,
       },
     },
   },

package/src/preset/recipes/accordion.ts

@@ -53,13 +53,16 @@ export const accordion = defineSlotRecipe({
       overflow: 'hidden',
       borderRadius: 'var(--accordion-radius)',
       _open: {
-        animationName: 'expand-height, fade-in',
-        animationDuration: 'normal',
+        animationName: 'slide-down',
+        animationDuration: '250ms',
+        animationTimingFunction: 'ease-out',
+        animationFillMode: 'forwards',
       },
       _closed: {
-        animationName: 'collapse-height, fade-out',
-        animationDuration: 'normal',
-        display: 'none',
+        animationName: 'slide-up',
+        animationDuration: '200ms',
+        animationTimingFunction: 'ease-out',
+        animationFillMode: 'forwards',
       },
     },
   },

package/src/preset/recipes/breadcrumb.ts

@@ -1,4 +1,4 @@
-import { defineSlotRecipe } from '@pandacss/dev'
+import { defineSlotRecipe } from '@pandacss/dev';
 
 export const breadcrumb = defineSlotRecipe({
   className: 'breadcrumb',
@@ -61,6 +61,38 @@ export const breadcrumb = defineSlotRecipe({
           _currentPage: { color: 'fg.default' },
         },
       },
+      discourser: {
+        list: {
+          gap: '2.5',
+          alignItems: 'center',
+        },
+        item: {
+          bg: 'transparent',
+          px: '1.5',
+          py: '1.5',
+          borderRadius: 'l2',
+          h: '9',
+          display: 'inline-flex',
+          alignItems: 'center',
+          _last: {
+            color: 'fg.default',
+            fontWeight: 'medium',
+            fontSize: 'md',
+            fontFeatureSettings: "'liga' 0, 'calt' 0",
+          },
+        },
+        link: {
+          color: 'fg.subtle',
+          fontWeight: 'medium',
+          fontSize: 'lg',
+          _hover: { color: 'fg.default' },
+          _currentPage: { color: 'fg.default', fontWeight: 'semibold' },
+        },
+        separator: {
+          color: 'primary.7',
+          _icon: { width: '27px', height: '27px' },
+        },
+      },
     },
     size: {
       xs: { list: { gap: '1', textStyle: 'xs' } },
@@ -74,4 +106,4 @@ export const breadcrumb = defineSlotRecipe({
     variant: 'plain',
     size: 'md',
   },
-})
+});

package/src/preset/recipes/content-card.ts

@@ -0,0 +1,124 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const contentCard = defineSlotRecipe({
+  className: 'content-card',
+  slots: [
+    'root',
+    'header',
+    'title',
+    'badgeBar',
+    'body',
+    'section',
+    'sectionTitle',
+    'separator',
+    'list',
+    'listItem',
+  ],
+  base: {
+    root: {
+      bg: 'neutral.1',
+      borderRadius: 'xl',
+      borderWidth: '2px',
+      borderColor: 'border.default',
+      display: 'flex',
+      flexDirection: 'column',
+      w: 'full',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4',
+    },
+    title: {
+      fontFamily: 'heading',
+      fontWeight: 'semibold',
+      fontSize: '2xl',
+      color: 'fg.default',
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1",
+    },
+    badgeBar: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '2.5',
+      px: '2.5',
+      py: '1',
+    },
+    body: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '9',
+      fontSize: 'xl',
+      lineHeight: '1.4',
+      color: 'fg.default',
+    },
+    section: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '5',
+    },
+    sectionTitle: {
+      fontFamily: 'heading',
+      fontWeight: 'semibold',
+      fontSize: '2xl',
+      color: 'fg.default',
+      fontVariationSettings: "'SOFT' 0, 'WONK' 1",
+      px: '2.5',
+      py: '2.5',
+    },
+    separator: {
+      borderTopWidth: '1px',
+      borderColor: 'border.default',
+      w: 'full',
+      my: '4',
+    },
+    list: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '5',
+      listStyleType: 'disc',
+      ps: '8',
+    },
+    listItem: {
+      fontSize: 'xl',
+      lineHeight: '1.4',
+      color: 'fg.default',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        root: { maxW: 'xl', pt: '6', px: '6', pb: '6' },
+        title: { fontSize: 'xl' },
+        body: { fontSize: 'lg' },
+        listItem: { fontSize: 'lg' },
+      },
+      md: {
+        root: { maxW: '2xl', pt: '10', px: '10', pb: '10', gap: '6' },
+        title: { fontSize: '2xl' },
+        body: { fontSize: 'xl' },
+        listItem: { fontSize: 'xl' },
+      },
+      lg: {
+        root: { maxW: '4xl', pt: '12', px: '12', pb: '12', gap: '8' },
+        title: { fontSize: '3xl' },
+        body: { fontSize: 'xl' },
+        listItem: { fontSize: 'xl' },
+      },
+    },
+    variant: {
+      elevated: {
+        root: { boxShadow: 'lg', borderWidth: '0' },
+      },
+      outline: {
+        root: { borderWidth: '2px', borderColor: 'border.default' },
+      },
+      flat: {
+        root: { borderWidth: '0', bg: 'transparent' },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+});

package/src/preset/recipes/index.ts

@@ -13,6 +13,7 @@ export * from './tabs';
 
 // Navigation
 export * from './breadcrumb';
+export * from './navigation-menu';
 
 // Form elements
 export * from './switch';
@@ -43,5 +44,8 @@ export * from './absolute-center';
 export * from './group';
 
 // Custom Components
+export * from './stepper';
+export * from './content-card';
 export * from './scenario-card';
 export * from './scenario-queue';
+export * from './scenario-settings';