@signalflare-ai/ui 0.5.0 → 1.0.0

package/scripts/component-registry/variant-parser.ts

@@ -35,9 +35,10 @@ export function extractBaseStylesFromFile(filePath: string): string | null {
 
     // Match: export const SF_*_BASE_STYLES = "..." or '...' or `...`
     // Handles multi-line strings with template literals
-    const baseStylesMatch = content.match(
-      /export\s+const\s+SF_\w+_BASE_STYLES\s*=\s*["'`]([^"'`]+)["'`]/
-    );
+    const baseStylesMatch =
+      /export\s+const\s+SF_\w+_BASE_STYLES\s*=\s*["'`]([^"'`]+)["'`]/.exec(
+        content
+      );
 
     if (baseStylesMatch) {
       return baseStylesMatch[1].trim();
@@ -102,11 +103,9 @@ export function parseVariantsObject(
       if (!variantBlock) continue;
 
       // Extract description if present
-      const descMatch = variantBlock.match(
-        /description\s*:\s*["']([^"']*)["']/
-      );
+      const descMatch = /description\s*:\s*["']([^"']*)["']/.exec(variantBlock);
       // Extract classes if present (for Figma plugin consumption)
-      const classesMatch = variantBlock.match(/classes\s*:\s*["']([^"']*)["']/);
+      const classesMatch = /classes\s*:\s*["']([^"']*)["']/.exec(variantBlock);
 
       // Extract state classes from the classes string
       const stateClasses = classesMatch
@@ -160,13 +159,12 @@ export function extractVariantsFromFile(
     const content = readFileSync(filePath, "utf-8");
 
     // Find SF_*_VARIANTS export start position
-    const variantsStartMatch = content.match(
-      /export\s+const\s+SF_\w+_VARIANTS\s*=\s*/
+    const variantsStartMatch = /export\s+const\s+SF_\w+_VARIANTS\s*=\s*/.exec(
+      content
     );
     // Find SF_*_DEFAULT_VARIANTS export start position
-    const defaultsStartMatch = content.match(
-      /export\s+const\s+SF_\w+_DEFAULT_VARIANTS\s*=\s*/
-    );
+    const defaultsStartMatch =
+      /export\s+const\s+SF_\w+_DEFAULT_VARIANTS\s*=\s*/.exec(content);
 
     if (!variantsStartMatch || !defaultsStartMatch) {
       return null;
@@ -207,23 +205,130 @@ export function extractVariantsFromFile(
 /**
  * Parse a styling object string into a ComponentStyling object.
  * Handles nested objects like container, title, description, closeButton, etc.
+ *
+ * Uses regex-based parsing instead of eval/new Function for security.
+ * Prevents RCE if file contents are compromised.
  */
 function parseStylingObject(objStr: string): ComponentStyling | null {
   try {
     // Remove 'as const' suffix if present
     const cleanedStr = objStr.replace(/\s*as\s+const\s*$/, "");
 
-    // Use Function constructor to safely evaluate the object literal
-    // This is safe because we control the input (it comes from our own source files)
-    // oxlint-disable-next-line eslint/no-new-func, typescript/no-implied-eval
-    const parsed = new Function(`return ${cleanedStr}`)();
+    // Security: Parse as JSON-like structure instead of executing code
+    // This prevents RCE if a source file is compromised
+    const result = parseObjectLiteralSafely(cleanedStr);
 
-    return parsed as ComponentStyling;
+    return result as ComponentStyling;
   } catch {
     return null;
   }
 }
 
+/**
+ * Safely parse a JavaScript object literal without using eval/Function.
+ * Handles nested objects and string values.
+ */
+function parseObjectLiteralSafely(
+  objStr: string
+): Record<string, unknown> | null {
+  const result: Record<string, unknown> = {};
+
+  // Remove outer braces
+  const content = objStr.trim().replace(/^\{/, "").replace(/\}$/, "").trim();
+  if (!content) return {};
+
+  // Split by top-level commas (not inside nested braces)
+  const properties = splitTopLevelProperties(content);
+
+  for (const prop of properties) {
+    const match = /^\s*(\w+)\s*:\s*(.+)$/s.exec(prop);
+    if (!match) continue;
+
+    const key = match[1];
+    const valueStr = match[2].trim();
+
+    // Parse the value
+    result[key] = parseValue(valueStr);
+  }
+
+  return result;
+}
+
+/**
+ * Split object properties by commas, respecting nested braces.
+ */
+function splitTopLevelProperties(content: string): string[] {
+  const properties: string[] = [];
+  let depth = 0;
+  let current = "";
+
+  for (const char of content) {
+    if (char === "{") {
+      depth++;
+      current += char;
+    } else if (char === "}") {
+      depth--;
+      current += char;
+    } else if (char === "," && depth === 0) {
+      if (current.trim()) {
+        properties.push(current.trim());
+      }
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+
+  if (current.trim()) {
+    properties.push(current.trim());
+  }
+
+  return properties;
+}
+
+/**
+ * Parse a value string into its JavaScript representation.
+ */
+function parseValue(valueStr: string): unknown {
+  valueStr = valueStr.trim();
+
+  // Handle nested objects
+  if (valueStr.startsWith("{")) {
+    return parseObjectLiteralSafely(valueStr);
+  }
+
+  // Handle arrays
+  if (valueStr.startsWith("[")) {
+    try {
+      // Arrays are typically simple in styling configs
+      return JSON.parse(valueStr.replace(/'/g, '"'));
+    } catch {
+      return null;
+    }
+  }
+
+  // Handle strings (single or double quotes)
+  const stringMatch = /^["'](.+)["']$/s.exec(valueStr);
+  if (stringMatch) {
+    return stringMatch[1];
+  }
+
+  // Handle numbers
+  if (/^-?\d+(\.\d+)?$/.test(valueStr)) {
+    return Number(valueStr);
+  }
+
+  // Handle booleans
+  if (valueStr === "true") return true;
+  if (valueStr === "false") return false;
+
+  // Handle null/undefined
+  if (valueStr === "null") return null;
+  if (valueStr === "undefined") return undefined;
+
+  return valueStr;
+}
+
 /**
  * Extract SF_*_STYLING from a component file.
  * Returns the styling object or null if not found.
@@ -238,8 +343,8 @@ export function extractStylingFromFile(
     const content = readFileSync(filePath, "utf-8");
 
     // Find SF_*_STYLING export start position
-    const stylingStartMatch = content.match(
-      /export\s+const\s+SF_\w+_STYLING\s*=\s*/
+    const stylingStartMatch = /export\s+const\s+SF_\w+_STYLING\s*=\s*/.exec(
+      content
     );
 
     if (!stylingStartMatch) {

package/scripts/convert-demos-to-stories.ts

@@ -0,0 +1,253 @@
+#!/usr/bin/env bun
+/**
+ * One-shot script: Generate Storybook story files from docs demos.
+ *
+ * Reads `packages/docs/src/components/demos/{Name}Demo.tsx`, extracts all
+ * exported functions, and writes `.stories.tsx` files that re-use the
+ * demo components as individual story renders.
+ *
+ * Stories are dev-only files (excluded from the library build), so
+ * cross-package imports into `packages/docs/...` are acceptable here.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const REGISTRY_ROOT = path.resolve(import.meta.dir, "..");
+const DOCS_DEMOS_DIR = path.resolve(
+  REGISTRY_ROOT,
+  "../docs/src/components/demos"
+);
+
+type Entry = {
+  kind: "component" | "block";
+  dirName: string; // kebab-case
+  pascalName: string;
+  demoFile: string; // path to demo file
+  storyFile: string; // path where story should be written
+  title: string; // storybook title
+};
+
+function toPascalCase(kebab: string): string {
+  return kebab
+    .split("-")
+    .map((p) => {
+      // Special cases for AI and common acronyms
+      if (p === "ai") return "Ai";
+      return p.charAt(0).toUpperCase() + p.slice(1);
+    })
+    .join("");
+}
+
+// Some demo files have non-standard names; map them manually
+const SPECIAL_DEMO_NAMES: Record<string, string> = {
+  "signalflare-ai-logo": "SignalFlareAILogoDemo.tsx",
+  chart: "chart-demo.tsx",
+  menubar: "MenuBarDemo.tsx",
+  loader: "LoaderDemo.tsx", // also has SkeletonLineDemo
+};
+
+function getDemoFilename(kebabName: string): string {
+  if (SPECIAL_DEMO_NAMES[kebabName]) return SPECIAL_DEMO_NAMES[kebabName];
+  return `${toPascalCase(kebabName)}Demo.tsx`;
+}
+
+function collectEntries(): Entry[] {
+  const entries: Entry[] = [];
+
+  // Components
+  const componentsDir = path.join(REGISTRY_ROOT, "src/components");
+  for (const dirName of fs.readdirSync(componentsDir)) {
+    const compDir = path.join(componentsDir, dirName);
+    if (!fs.statSync(compDir).isDirectory()) continue;
+
+    const storyPath = path.join(compDir, `${dirName}.stories.tsx`);
+    if (fs.existsSync(storyPath)) continue; // Skip existing
+
+    const demoFilename = getDemoFilename(dirName);
+    const demoPath = path.join(DOCS_DEMOS_DIR, demoFilename);
+    if (!fs.existsSync(demoPath)) continue; // Skip if no demo
+
+    entries.push({
+      kind: "component",
+      dirName,
+      pascalName: toPascalCase(dirName),
+      demoFile: demoPath,
+      storyFile: storyPath,
+      title: `Components/${toPascalCase(dirName)}`,
+    });
+  }
+
+  // Blocks
+  const blocksDir = path.join(REGISTRY_ROOT, "src/blocks");
+  if (fs.existsSync(blocksDir)) {
+    for (const dirName of fs.readdirSync(blocksDir)) {
+      const blockDir = path.join(blocksDir, dirName);
+      if (!fs.statSync(blockDir).isDirectory()) continue;
+
+      const storyPath = path.join(blockDir, `${dirName}.stories.tsx`);
+      if (fs.existsSync(storyPath)) continue;
+
+      const demoFilename = getDemoFilename(dirName);
+      const demoPath = path.join(DOCS_DEMOS_DIR, demoFilename);
+      if (!fs.existsSync(demoPath)) continue;
+
+      entries.push({
+        kind: "block",
+        dirName,
+        pascalName: toPascalCase(dirName),
+        demoFile: demoPath,
+        storyFile: storyPath,
+        title: `Blocks/${toPascalCase(dirName)}`,
+      });
+    }
+  }
+
+  return entries;
+}
+
+/**
+ * Extract exported function names from a demo source file.
+ * Matches: `export function Foo(` and `export const Foo = (...) =>`
+ */
+function extractExportedDemoFunctions(source: string): string[] {
+  // Strip template literal contents so we don't match `export function`
+  // inside code strings.
+  const cleaned = source.replace(/`(?:\\.|[^`\\])*`/g, "``");
+
+  const names = new Set<string>();
+
+  // Only match at start of a line (after optional whitespace) to avoid
+  // matching inside expressions/strings.
+  const fnRegex = /^\s*export\s+function\s+([A-Z][A-Za-z0-9_]*)\s*\(/gm;
+  let m: RegExpExecArray | null = fnRegex.exec(cleaned);
+  while (m) {
+    names.add(m[1]);
+    m = fnRegex.exec(cleaned);
+  }
+
+  const constRegex =
+    /^\s*export\s+const\s+([A-Z][A-Za-z0-9_]*)\s*(?::\s*[^=]+)?=\s*(?:\([^)]*\)\s*=>|function)/gm;
+  m = constRegex.exec(cleaned);
+  while (m) {
+    names.add(m[1]);
+    m = constRegex.exec(cleaned);
+  }
+
+  return Array.from(names);
+}
+
+/**
+ * Strip trailing "Demo" from a demo function name to get a cleaner Story name.
+ * e.g., "BannerVariantsDemo" → "Variants", "BannerDefaultDemo" → "Default"
+ * Falls back to the original name if stripping doesn't yield something useful.
+ */
+function deriveStoryName(demoFnName: string, componentPascal: string): string {
+  let s = demoFnName;
+  // Strip "Demo" suffix
+  if (s.endsWith("Demo")) s = s.slice(0, -4);
+  // Strip component prefix
+  if (s.startsWith(componentPascal) && s.length > componentPascal.length) {
+    s = s.slice(componentPascal.length);
+  }
+  // If empty, use "Default"
+  if (!s) s = "Default";
+  return s;
+}
+
+function demoImportPath(entry: Entry): string {
+  // From src/components/{name}/ or src/blocks/{name}/ to docs demos
+  const depth = entry.kind === "component" ? 4 : 4;
+  const up = "../".repeat(depth);
+  const relFromRegistry = path.relative(
+    REGISTRY_ROOT,
+    entry.demoFile.replace(/\.tsx$/, "")
+  );
+  return `${up}docs/${relFromRegistry.replace("../", "")}`;
+}
+
+function buildDemoImportPath(entry: Entry): string {
+  // Story lives at packages/registry/src/{components|blocks}/{name}/{name}.stories.tsx
+  // Demo lives at packages/docs/src/components/demos/{Name}Demo.tsx
+  // Relative path: ../../../../docs/src/components/demos/{Name}Demo
+  const demoBase = path.basename(entry.demoFile).replace(/\.tsx$/, "");
+  return `../../../../docs/src/components/demos/${demoBase}`;
+}
+
+function generateStoryFile(entry: Entry): string | null {
+  const source = fs.readFileSync(entry.demoFile, "utf8");
+  const demoFns = extractExportedDemoFunctions(source);
+  if (demoFns.length === 0) return null;
+
+  const importPath = buildDemoImportPath(entry);
+
+  const storyNames = new Set<string>();
+  const storyExports = demoFns.map((fn) => {
+    let storyName = deriveStoryName(fn, entry.pascalName);
+    // Ensure uniqueness within this file
+    let i = 2;
+    const base = storyName;
+    while (storyNames.has(storyName)) {
+      storyName = `${base}${i}`;
+      i++;
+    }
+    storyNames.add(storyName);
+    // Alias the imported demo to avoid colliding with the story name
+    const aliased = `Demo_${fn}`;
+    return {
+      exportLine: `export const ${storyName}: Story = {
+  render: () => <${aliased} />,
+};`,
+      importEntry: `${fn} as ${aliased}`,
+    };
+  });
+
+  const importsList = storyExports.map((s) => s.importEntry).join(",\n  ");
+
+  return `import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  ${importsList},
+} from "${importPath}";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const meta: Meta<any> = {
+  title: "${entry.title}",
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Story = StoryObj<any>;
+
+${storyExports.map((s) => s.exportLine).join("\n\n")}
+`;
+}
+
+function main() {
+  const entries = collectEntries();
+  console.log(`Found ${entries.length} entries to process:`);
+  for (const e of entries) {
+    console.log(`  [${e.kind}] ${e.dirName} ← ${path.basename(e.demoFile)}`);
+  }
+
+  let written = 0;
+  let skipped = 0;
+  for (const entry of entries) {
+    const content = generateStoryFile(entry);
+    if (!content) {
+      console.log(`  ⚠ Skipped ${entry.dirName} (no exported demo functions)`);
+      skipped++;
+      continue;
+    }
+    fs.writeFileSync(entry.storyFile, content, "utf8");
+    console.log(`  ✓ Wrote ${path.relative(REGISTRY_ROOT, entry.storyFile)}`);
+    written++;
+  }
+
+  console.log(`\nDone. Wrote ${written} story files, skipped ${skipped}.`);
+}
+
+main();

package/scripts/css-build.ts

@@ -9,8 +9,8 @@ import {
 import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = import.meta.filename;
+const __dirname = import.meta.dirname;
 
 const srcDir = join(__dirname, "../src/styles");
 const distDir = join(__dirname, "../dist/styles");
@@ -29,7 +29,8 @@ const cssFiles: string[] = [
   "theme-sf.css",
   "theme-fedramp.css",
   "theme-minimal.css",
-  "theme-navigator.css",
+  "theme-blue-tint.css",
+  "shadcn.css",
 ];
 
 cssFiles.forEach((file) => {

package/scripts/generate-primitives.ts

@@ -11,8 +11,8 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
 import { join, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __filename = import.meta.filename;
+const __dirname = import.meta.dirname;
 
 const PRIMITIVES_DIR = join(__dirname, "../src/primitives");
 const PRIMITIVES_FILE = join(PRIMITIVES_DIR, "index.ts");
@@ -33,6 +33,14 @@ const EXCLUDED_EXPORTS = new Set([
   "./use-render", // Internal hook
 ]);
 
+// Prefixes to exclude (e.g. "./internals/*" are implementation details)
+const EXCLUDED_PREFIXES = ["./internals/"];
+
+function isExcluded(subpath: string): boolean {
+  if (EXCLUDED_EXPORTS.has(subpath)) return true;
+  return EXCLUDED_PREFIXES.some((prefix) => subpath.startsWith(prefix));
+}
+
 function main() {
   // Read base-ui package.json
   if (!existsSync(BASE_UI_PACKAGE)) {
@@ -45,7 +53,7 @@ function main() {
 
   // Extract and sort component subpaths alphabetically
   const subpaths = Object.keys(exports)
-    .filter((key) => key.startsWith("./") && !EXCLUDED_EXPORTS.has(key))
+    .filter((key) => key.startsWith("./") && !isExcluded(key))
     .sort();
 
   // Ensure directory exists