@stacksjs/stx 0.2.95 → 0.2.97

package/dist/story/docs-generator.js

@@ -1,2 +1,186 @@
-// @bun
-import{Aa as b,Ba as c,Ca as d,Da as e,za as a}from"../chunk-6b5k6w2q.js";import"../chunk-xv34zbp4.js";export{a as generateStoryDocs,b as generateDocsIndex,c as generateComponentDocs,d as generateComponentCatalog,e as exportDesignTokens};
+import fs from "node:fs";
+import path from "node:path";
+export async function generateStoryDocs(ctx, components, options = {}) {
+  const outDir = options.outDir || path.join(ctx.root, ".stx", "docs");
+  await fs.promises.mkdir(outDir, { recursive: !0 });
+  const indexContent = generateDocsIndex(components);
+  await fs.promises.writeFile(path.join(outDir, "README.md"), indexContent);
+  for (const component of components) {
+    const storyFile = ctx.storyFiles.find((f) => f.fileName.replace(".story", "") === component.name), content = generateComponentDocs(component, storyFile, options);
+    await fs.promises.writeFile(path.join(outDir, `${component.name}.md`), content);
+  }
+}
+export function generateDocsIndex(components) {
+  const lines = [];
+  lines.push("# Component Documentation");
+  lines.push("");
+  lines.push("This documentation is auto-generated from component source files.");
+  lines.push("");
+  lines.push("## Components");
+  lines.push("");
+  const categorized = new Map, uncategorized = [];
+  for (const component of components)
+    if (component.category) {
+      const list = categorized.get(component.category) || [];
+      list.push(component);
+      categorized.set(component.category, list);
+    } else
+      uncategorized.push(component);
+  for (const [category, comps] of categorized) {
+    lines.push(`### ${category}`);
+    lines.push("");
+    for (const comp of comps)
+      lines.push(`- [${comp.name}](./${comp.name}.md) - ${comp.description || "No description"}`);
+    lines.push("");
+  }
+  if (uncategorized.length > 0) {
+    if (categorized.size > 0) {
+      lines.push("### Other");
+      lines.push("");
+    }
+    for (const comp of uncategorized)
+      lines.push(`- [${comp.name}](./${comp.name}.md) - ${comp.description || "No description"}`);
+    lines.push("");
+  }
+  return lines.join(`
+`);
+}
+export function generateComponentDocs(component, storyFile, options = {}) {
+  const lines = [];
+  lines.push(`# ${component.name}`);
+  lines.push("");
+  if (component.description) {
+    lines.push(component.description);
+    lines.push("");
+  }
+  if (component.tags && component.tags.length > 0) {
+    lines.push(`**Tags:** ${component.tags.join(", ")}`);
+    lines.push("");
+  }
+  if (component.props.length > 0) {
+    lines.push("## Props");
+    lines.push("");
+    lines.push("| Name | Type | Required | Default | Description |");
+    lines.push("|------|------|----------|---------|-------------|");
+    for (const prop of component.props) {
+      const required = prop.required ? "\u2713" : "", defaultVal = prop.default !== void 0 ? `\`${JSON.stringify(prop.default)}\`` : "-", description = prop.description || "-";
+      lines.push(`| ${prop.name} | \`${prop.type}\` | ${required} | ${defaultVal} | ${description} |`);
+    }
+    lines.push("");
+  }
+  if (component.slots.length > 0) {
+    lines.push("## Slots");
+    lines.push("");
+    lines.push("| Name | Description |");
+    lines.push("|------|-------------|");
+    for (const slot of component.slots) {
+      const description = slot.description || "-";
+      lines.push(`| ${slot.name} | ${description} |`);
+    }
+    lines.push("");
+  }
+  if (component.dependencies.length > 0) {
+    lines.push("## Dependencies");
+    lines.push("");
+    lines.push("This component uses the following components:");
+    lines.push("");
+    for (const dep of component.dependencies)
+      lines.push(`- ${dep}`);
+    lines.push("");
+  }
+  if (component.cssClasses.length > 0) {
+    lines.push("## CSS Classes");
+    lines.push("");
+    lines.push("The following CSS classes are used:");
+    lines.push("");
+    lines.push("```");
+    lines.push(component.cssClasses.join(" "));
+    lines.push("```");
+    lines.push("");
+  }
+  if (options.includeStories && storyFile?.story) {
+    lines.push("## Examples");
+    lines.push("");
+    for (const variant of storyFile.story.variants) {
+      lines.push(`### ${variant.title}`);
+      lines.push("");
+      if (variant.source) {
+        lines.push("```html");
+        lines.push(variant.source);
+        lines.push("```");
+        lines.push("");
+      }
+    }
+  }
+  lines.push("## Usage");
+  lines.push("");
+  lines.push("```html");
+  lines.push(generateUsageExample(component));
+  lines.push("```");
+  lines.push("");
+  return lines.join(`
+`);
+}
+function generateUsageExample(component) {
+  const props = component.props.filter((p) => p.required || p.default !== void 0).map((p) => {
+    if (p.type === "boolean")
+      return p.default ? p.name : "";
+    if (p.type === "string")
+      return `${p.name}="${p.default || "value"}"`;
+    return `:${p.name}="${JSON.stringify(p.default)}"`;
+  }).filter(Boolean).join(" "), hasSlots = component.slots.length > 0, defaultSlot = component.slots.find((s) => s.name === "default");
+  if (hasSlots && defaultSlot)
+    return `<${component.name} ${props}>
+  Content goes here
+</${component.name}>`;
+  return `<${component.name} ${props} />`;
+}
+export function generateComponentCatalog(components) {
+  const catalog = components.map((c) => ({
+    name: c.name,
+    description: c.description,
+    category: c.category,
+    tags: c.tags,
+    props: c.props.map((p) => ({
+      name: p.name,
+      type: p.type,
+      required: p.required,
+      default: p.default,
+      description: p.description
+    })),
+    slots: c.slots.map((s) => ({
+      name: s.name,
+      description: s.description
+    }))
+  }));
+  return JSON.stringify(catalog, null, 2);
+}
+export function exportDesignTokens(components) {
+  const tokens = {
+    colors: new Set,
+    spacing: new Set,
+    typography: new Set,
+    borders: new Set,
+    shadows: new Set
+  };
+  for (const component of components)
+    for (const cls of component.cssClasses) {
+      if (cls.match(/^(?:text|bg|border|fill|stroke)-/))
+        tokens.colors.add(cls);
+      if (cls.match(/^(?:p|m|gap|space)-/))
+        tokens.spacing.add(cls);
+      if (cls.match(/^(?:text|font|leading|tracking)-/))
+        tokens.typography.add(cls);
+      if (cls.match(/^(?:border|rounded)-/))
+        tokens.borders.add(cls);
+      if (cls.match(/^shadow/))
+        tokens.shadows.add(cls);
+    }
+  return {
+    colors: Array.from(tokens.colors),
+    spacing: Array.from(tokens.spacing),
+    typography: Array.from(tokens.typography),
+    borders: Array.from(tokens.borders),
+    shadows: Array.from(tokens.shadows)
+  };
+}

package/dist/story/errors.js

@@ -1,2 +1,239 @@
-// @bun
-import{Ea as a,Fa as b,Ga as c,Ha as d,Ia as e}from"../chunk-wf7zrjsw.js";import"../chunk-xv34zbp4.js";export{d as getErrorStyles,c as generateErrorHTML,b as formatStoryError,a as createStoryError,e as createErrorBoundary};
+export function createStoryError(type, message, details) {
+  const suggestions = getRecoverySuggestions(type, message);
+  return {
+    type,
+    message,
+    suggestions,
+    ...details
+  };
+}
+function getRecoverySuggestions(type, message) {
+  const suggestions = [];
+  switch (type) {
+    case "parse_error":
+      suggestions.push("Check for syntax errors in your .story.stx file");
+      suggestions.push("Ensure all tags are properly closed");
+      suggestions.push("Verify that <Story> and <Variant> components are used correctly");
+      break;
+    case "component_error":
+      suggestions.push("Check that the component file exists");
+      suggestions.push("Verify the import path is correct");
+      suggestions.push("Ensure all required props are provided");
+      break;
+    case "render_error":
+      suggestions.push("Check the browser console for more details");
+      suggestions.push("Verify that all dependencies are available");
+      suggestions.push("Try simplifying the component to isolate the issue");
+      break;
+    case "config_error":
+      suggestions.push("Check your stx.config.ts file for syntax errors");
+      suggestions.push("Verify that all required config options are set");
+      suggestions.push("Try using the default configuration");
+      break;
+    case "file_not_found":
+      suggestions.push("Check that the file path is correct");
+      suggestions.push("Verify the file exists in the specified location");
+      suggestions.push("Check for case sensitivity in the file path");
+      break;
+    case "circular_dependency":
+      suggestions.push("Review your component imports for circular references");
+      suggestions.push("Consider restructuring your components");
+      suggestions.push("Use lazy loading for problematic dependencies");
+      break;
+    case "prop_type_error":
+      suggestions.push("Check that the prop value matches the expected type");
+      suggestions.push("Review the component's prop definitions");
+      if (message.includes("required"))
+        suggestions.push("Ensure all required props are provided");
+      break;
+    default:
+      suggestions.push("Check the console for more details");
+      suggestions.push("Try restarting the story server");
+      suggestions.push("Report this issue if it persists");
+  }
+  return suggestions;
+}
+export function formatStoryError(error) {
+  const lines = [];
+  lines.push(`\u274C ${getErrorTitle(error.type)}`);
+  lines.push("");
+  lines.push(error.message);
+  lines.push("");
+  if (error.file) {
+    let location = `\uD83D\uDCC1 ${error.file}`;
+    if (error.line) {
+      location += `:${error.line}`;
+      if (error.column)
+        location += `:${error.column}`;
+    }
+    lines.push(location);
+    lines.push("");
+  }
+  if (error.suggestions && error.suggestions.length > 0) {
+    lines.push("\uD83D\uDCA1 Suggestions:");
+    for (const suggestion of error.suggestions)
+      lines.push(`   \u2022 ${suggestion}`);
+    lines.push("");
+  }
+  return lines.join(`
+`);
+}
+function getErrorTitle(type) {
+  return {
+    parse_error: "Parse Error",
+    component_error: "Component Error",
+    render_error: "Render Error",
+    config_error: "Configuration Error",
+    file_not_found: "File Not Found",
+    circular_dependency: "Circular Dependency",
+    prop_type_error: "Prop Type Error",
+    unknown: "Unknown Error"
+  }[type];
+}
+export function generateErrorHTML(error) {
+  const suggestionsHtml = error.suggestions ? error.suggestions.map((s) => `<li>${escapeHtml(s)}</li>`).join("") : "";
+  return `
+    <div class="stx-error">
+      <div class="stx-error-header">
+        <span class="stx-error-icon">\u274C</span>
+        <span class="stx-error-title">${getErrorTitle(error.type)}</span>
+      </div>
+      <div class="stx-error-message">${escapeHtml(error.message)}</div>
+      ${error.file ? `
+        <div class="stx-error-location">
+          \uD83D\uDCC1 ${escapeHtml(error.file)}${error.line ? `:${error.line}` : ""}${error.column ? `:${error.column}` : ""}
+        </div>
+      ` : ""}
+      ${suggestionsHtml ? `
+        <div class="stx-error-suggestions">
+          <div class="stx-error-suggestions-title">\uD83D\uDCA1 Suggestions:</div>
+          <ul>${suggestionsHtml}</ul>
+        </div>
+      ` : ""}
+      <div class="stx-error-actions">
+        <button onclick="window.__stxStory.dismissError()">Dismiss</button>
+        <button onclick="window.__stxStory.retryRender()">Retry</button>
+      </div>
+    </div>
+  `;
+}
+export function getErrorStyles() {
+  return `
+    .stx-error {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 16px;
+      font-family: var(--font-family);
+    }
+    .dark .stx-error {
+      background: #450a0a;
+      border-color: #7f1d1d;
+    }
+    .stx-error-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .stx-error-icon {
+      font-size: 20px;
+    }
+    .stx-error-title {
+      font-weight: 600;
+      font-size: 16px;
+      color: #dc2626;
+    }
+    .dark .stx-error-title {
+      color: #f87171;
+    }
+    .stx-error-message {
+      color: #991b1b;
+      margin-bottom: 12px;
+      font-family: var(--code-font-family);
+      font-size: 13px;
+      white-space: pre-wrap;
+    }
+    .dark .stx-error-message {
+      color: #fca5a5;
+    }
+    .stx-error-location {
+      color: #6b7280;
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
+    .stx-error-suggestions {
+      margin-bottom: 12px;
+    }
+    .stx-error-suggestions-title {
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: #374151;
+    }
+    .dark .stx-error-suggestions-title {
+      color: #d1d5db;
+    }
+    .stx-error-suggestions ul {
+      margin: 0;
+      padding-left: 20px;
+      color: #4b5563;
+      font-size: 13px;
+    }
+    .dark .stx-error-suggestions ul {
+      color: #9ca3af;
+    }
+    .stx-error-suggestions li {
+      margin-bottom: 4px;
+    }
+    .stx-error-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 16px;
+    }
+    .stx-error-actions button {
+      padding: 8px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+      background: white;
+      color: #374151;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .stx-error-actions button:hover {
+      background: #f3f4f6;
+    }
+    .dark .stx-error-actions button {
+      background: #374151;
+      border-color: #4b5563;
+      color: #f3f4f6;
+    }
+    .dark .stx-error-actions button:hover {
+      background: #4b5563;
+    }
+  `;
+}
+export function createErrorBoundary(content, componentName) {
+  return `
+    <div class="stx-error-boundary" data-component="${escapeHtml(componentName)}">
+      ${content}
+    </div>
+    <script>
+      (function() {
+        const boundary = document.currentScript.previousElementSibling;
+        window.addEventListener('error', function(e) {
+          if (boundary.contains(e.target)) {
+            boundary.innerHTML = window.__stxStory.renderError({
+              type: 'render_error',
+              message: e.message,
+              file: '${escapeHtml(componentName)}'
+            });
+          }
+        });
+      })();
+    </script>
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}

package/dist/story/figma-export.js

@@ -1,2 +1,224 @@
-// @bun
-import{Ja as a,Ka as b,La as c,Ma as d,Na as e,Oa as f}from"../chunk-bxc7kjsk.js";import"../chunk-xv34zbp4.js";export{e as generateFigmaPluginManifest,f as generateFigmaImportCode,d as figmaColorToCss,b as exportToFigmaFile,a as exportToFigma,c as cssColorToFigma};
+export function exportToFigma(components, options = {}) {
+  const {
+    includeVariants: _includeVariants = !0,
+    includeProps = !0,
+    frameWidth = 400,
+    frameHeight = 300,
+    componentSpacing = 40
+  } = options, figmaComponents = {}, figmaStyles = {}, canvasChildren = [];
+  let xOffset = 0;
+  for (const component of components) {
+    const componentId = generateId(), componentFrame = createComponentFrame(component, componentId, xOffset, 0, frameWidth, frameHeight, includeProps);
+    canvasChildren.push(componentFrame);
+    figmaComponents[componentId] = {
+      key: componentId,
+      name: component.name,
+      description: component.description || ""
+    };
+    xOffset += frameWidth + componentSpacing;
+  }
+  return {
+    name: "STX Components",
+    lastModified: new Date().toISOString(),
+    version: "1.0.0",
+    document: {
+      id: "0:0",
+      name: "Document",
+      type: "DOCUMENT",
+      children: [
+        {
+          id: "0:1",
+          name: "Components",
+          type: "CANVAS",
+          children: canvasChildren
+        }
+      ]
+    },
+    components: figmaComponents,
+    styles: figmaStyles
+  };
+}
+function createComponentFrame(component, id, x, y, width, height, includeProps) {
+  const children = [];
+  children.push({
+    id: `${id}:title`,
+    name: "Title",
+    type: "TEXT",
+    characters: component.name,
+    style: {
+      fontFamily: "Inter",
+      fontWeight: 600,
+      fontSize: 16
+    },
+    fills: [{ type: "SOLID", color: { r: 0, g: 0, b: 0, a: 1 } }]
+  });
+  if (component.description)
+    children.push({
+      id: `${id}:desc`,
+      name: "Description",
+      type: "TEXT",
+      characters: component.description,
+      style: {
+        fontFamily: "Inter",
+        fontWeight: 400,
+        fontSize: 12
+      },
+      fills: [{ type: "SOLID", color: { r: 0.4, g: 0.4, b: 0.4, a: 1 } }]
+    });
+  if (includeProps && component.props.length > 0) {
+    const propsFrame = createPropsFrame(component.props, `${id}:props`);
+    children.push(propsFrame);
+  }
+  children.push({
+    id: `${id}:preview`,
+    name: "Preview",
+    type: "RECTANGLE",
+    absoluteBoundingBox: { x: 0, y: 0, width: width - 32, height: 150 },
+    fills: [{ type: "SOLID", color: { r: 0.95, g: 0.95, b: 0.95, a: 1 } }],
+    strokes: [{ type: "SOLID", color: { r: 0.9, g: 0.9, b: 0.9, a: 1 } }],
+    strokeWeight: 1,
+    cornerRadius: 8
+  });
+  return {
+    id,
+    name: component.name,
+    type: "COMPONENT",
+    children,
+    absoluteBoundingBox: { x, y, width, height },
+    fills: [{ type: "SOLID", color: { r: 1, g: 1, b: 1, a: 1 } }],
+    strokes: [{ type: "SOLID", color: { r: 0.9, g: 0.9, b: 0.9, a: 1 } }],
+    strokeWeight: 1,
+    cornerRadius: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    paddingBottom: 16,
+    itemSpacing: 12,
+    layoutMode: "VERTICAL",
+    primaryAxisAlignItems: "MIN",
+    counterAxisAlignItems: "MIN"
+  };
+}
+function createPropsFrame(props, id) {
+  const children = [];
+  children.push({
+    id: `${id}:header`,
+    name: "Props Header",
+    type: "TEXT",
+    characters: "Props",
+    style: {
+      fontFamily: "Inter",
+      fontWeight: 600,
+      fontSize: 12
+    },
+    fills: [{ type: "SOLID", color: { r: 0.4, g: 0.4, b: 0.4, a: 1 } }]
+  });
+  for (let i = 0;i < props.length; i++) {
+    const prop = props[i];
+    children.push({
+      id: `${id}:prop:${i}`,
+      name: prop.name,
+      type: "TEXT",
+      characters: `${prop.name}: ${prop.type}${prop.required ? " (required)" : ""}`,
+      style: {
+        fontFamily: "SF Mono",
+        fontWeight: 400,
+        fontSize: 11
+      },
+      fills: [{ type: "SOLID", color: { r: 0.2, g: 0.2, b: 0.2, a: 1 } }]
+    });
+  }
+  return {
+    id,
+    name: "Props",
+    type: "FRAME",
+    children,
+    fills: [{ type: "SOLID", color: { r: 0.98, g: 0.98, b: 0.98, a: 1 } }],
+    cornerRadius: 6,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    itemSpacing: 4,
+    layoutMode: "VERTICAL",
+    primaryAxisAlignItems: "MIN",
+    counterAxisAlignItems: "MIN"
+  };
+}
+function generateId() {
+  return `${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
+}
+export async function exportToFigmaFile(components, outputPath, options = {}) {
+  const figmaDoc = exportToFigma(components, options), json = JSON.stringify(figmaDoc, null, 2), fs = await import("node:fs"), path = await import("node:path");
+  await fs.promises.mkdir(path.dirname(outputPath), { recursive: !0 });
+  await fs.promises.writeFile(outputPath, json);
+}
+export function cssColorToFigma(cssColor) {
+  if (cssColor.startsWith("#")) {
+    const hex = cssColor.slice(1), r = Number.parseInt(hex.slice(0, 2), 16) / 255, g = Number.parseInt(hex.slice(2, 4), 16) / 255, b = Number.parseInt(hex.slice(4, 6), 16) / 255, a = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+  }
+  const rgbMatch = cssColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbMatch)
+    return {
+      r: Number.parseInt(rgbMatch[1]) / 255,
+      g: Number.parseInt(rgbMatch[2]) / 255,
+      b: Number.parseInt(rgbMatch[3]) / 255,
+      a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1
+    };
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+export function figmaColorToCss(color) {
+  const r = Math.round(color.r * 255), g = Math.round(color.g * 255), b = Math.round(color.b * 255);
+  if (color.a === 1)
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  return `rgba(${r}, ${g}, ${b}, ${color.a})`;
+}
+export function generateFigmaPluginManifest(name) {
+  return {
+    name,
+    id: `stx-story-${name.toLowerCase().replace(/\s+/g, "-")}`,
+    api: "1.0.0",
+    main: "code.js",
+    ui: "ui.html",
+    editorType: ["figma"],
+    capabilities: ["inspect"],
+    permissions: ["currentuser"]
+  };
+}
+export function generateFigmaImportCode(components) {
+  const componentNames = components.map((c) => c.name).join(", ");
+  return `
+// Figma Plugin Code to import STX components
+// Run this in Figma's plugin console
+
+const components = ${JSON.stringify(components.map((c) => ({
+    name: c.name,
+    props: c.props.map((p) => ({ name: p.name, type: p.type }))
+  })), null, 2)};
+
+async function importComponents() {
+  for (const comp of components) {
+    const frame = figma.createFrame();
+    frame.name = comp.name;
+    frame.resize(400, 300);
+
+    // Add title
+    const title = figma.createText();
+    await figma.loadFontAsync({ family: "Inter", style: "Semi Bold" });
+    title.fontName = { family: "Inter", style: "Semi Bold" };
+    title.characters = comp.name;
+    title.fontSize = 16;
+    frame.appendChild(title);
+
+    // Position on canvas
+    frame.x = figma.viewport.center.x;
+    frame.y = figma.viewport.center.y;
+  }
+
+  figma.notify('Imported ${componentNames}');
+}
+
+importComponents();
+`;
+}