@stacksjs/stx 0.2.95 → 0.2.96

package/dist/story/auto-stories.js

@@ -1,2 +1,158 @@
-// @bun
-import{Id as a,Jd as b,Kd as c,Ld as d}from"../chunk-43t7faps.js";import"../chunk-pznnww6k.js";import"../chunk-xqq1vxb6.js";import"../chunk-amaa1bev.js";import"../chunk-r5m9xtm7.js";import"../chunk-bs3gmfxz.js";import"../chunk-xv34zbp4.js";export{c as generateStoryForComponent,b as generateStoryContent,a as autoGenerateStories,d as autoGenerateCommand};
+import fs from "node:fs";
+import path from "node:path";
+import { analyzeComponentFile } from "./collect/analyzer.js";
+export async function autoGenerateStories(options) {
+  const {
+    componentsDir,
+    outputDir = componentsDir,
+    include = ["**/*.stx"],
+    exclude = ["**/*.story.stx", "**/node_modules/**"],
+    generateVariants = !0,
+    includeDefaults = !0,
+    overwrite = !1
+  } = options, results = [], componentFiles = await findComponentFiles(componentsDir, include, exclude);
+  for (const componentPath of componentFiles) {
+    const storyPath = componentPath.replace(/\.stx$/, ".story.stx"), storyExists = await fileExists(storyPath);
+    if (storyExists && !overwrite) {
+      results.push({
+        componentPath,
+        storyPath,
+        content: "",
+        status: "skipped"
+      });
+      continue;
+    }
+    const analysis = await analyzeComponentFile(componentPath), content = generateStoryContent(analysis, {
+      generateVariants,
+      includeDefaults
+    }), actualStoryPath = outputDir === componentsDir ? storyPath : path.join(outputDir, path.basename(storyPath));
+    await fs.promises.mkdir(path.dirname(actualStoryPath), { recursive: !0 });
+    await fs.promises.writeFile(actualStoryPath, content);
+    results.push({
+      componentPath,
+      storyPath: actualStoryPath,
+      content,
+      status: storyExists ? "updated" : "created"
+    });
+  }
+  return results;
+}
+export function generateStoryContent(analysis, options = {}) {
+  const { generateVariants = !0, includeDefaults = !0 } = options, variants = [], defaultProps = {};
+  if (includeDefaults) {
+    for (const prop of analysis.props)
+      if (prop.default !== void 0)
+        defaultProps[prop.name] = prop.default;
+  }
+  variants.push({
+    id: "default",
+    title: "Default",
+    state: defaultProps
+  });
+  if (generateVariants) {
+    for (const prop of analysis.props)
+      if (prop.type === "boolean") {
+        variants.push({
+          id: `${prop.name}-true`,
+          title: `${formatPropName(prop.name)} (true)`,
+          state: { ...defaultProps, [prop.name]: !0 }
+        });
+        variants.push({
+          id: `${prop.name}-false`,
+          title: `${formatPropName(prop.name)} (false)`,
+          state: { ...defaultProps, [prop.name]: !1 }
+        });
+      }
+    for (const prop of analysis.props)
+      if (prop.options && prop.options.length > 0)
+        for (const option of prop.options)
+          variants.push({
+            id: `${prop.name}-${option}`,
+            title: `${formatPropName(prop.name)}: ${option}`,
+            state: { ...defaultProps, [prop.name]: option }
+          });
+  }
+  const componentName = analysis.name, description = analysis.description || `Stories for ${componentName} component`, variantBlocks = variants.map((v) => {
+    const propsStr = Object.entries(v.state).map(([key, value]) => {
+      if (typeof value === "string")
+        return `${key}="${value}"`;
+      return `:${key}="${JSON.stringify(value)}"`;
+    }).join(" ");
+    return `
+@story('${v.title}')
+<${componentName} ${propsStr} />
+@endstory`;
+  }).join(`
+`);
+  return `<!--
+  ${description}
+  Auto-generated by STX Story
+-->
+
+<script>
+import ${componentName} from './${componentName}.stx'
+
+// Story metadata
+const meta = {
+  title: '${componentName}',
+  component: ${componentName},
+}
+</script>
+
+${variantBlocks}
+`;
+}
+export async function generateStoryForComponent(componentPath, options = {}) {
+  const analysis = await analyzeComponentFile(componentPath);
+  return generateStoryContent(analysis, options);
+}
+async function findComponentFiles(dir, include, exclude) {
+  const files = [];
+  async function walk(currentDir) {
+    const entries = await fs.promises.readdir(currentDir, { withFileTypes: !0 });
+    for (const entry of entries) {
+      const fullPath = path.join(currentDir, entry.name), relativePath = path.relative(dir, fullPath);
+      if (exclude.some((pattern) => matchGlob(relativePath, pattern)))
+        continue;
+      if (entry.isDirectory())
+        await walk(fullPath);
+      else if (entry.isFile()) {
+        if (include.some((pattern) => matchGlob(relativePath, pattern)))
+          files.push(fullPath);
+      }
+    }
+  }
+  await walk(dir);
+  return files;
+}
+function matchGlob(str, pattern) {
+  const regex = pattern.replace(/\*\*/g, "{{GLOBSTAR}}").replace(/\*/g, "[^/]*").replace(/\?/g, ".").replace(/\{\{GLOBSTAR\}\}/g, ".*");
+  return new RegExp(`^${regex}$`).test(str);
+}
+async function fileExists(filePath) {
+  try {
+    await fs.promises.access(filePath);
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+function formatPropName(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+export async function autoGenerateCommand(args) {
+  const componentsDir = args[0] || "./src/components", outputDir = args[1] || componentsDir;
+  console.log(`Scanning for components in ${componentsDir}...`);
+  const results = await autoGenerateStories({
+    componentsDir,
+    outputDir,
+    generateVariants: !0,
+    includeDefaults: !0
+  }), created = results.filter((r) => r.status === "created").length, updated = results.filter((r) => r.status === "updated").length, skipped = results.filter((r) => r.status === "skipped").length;
+  console.log(`
+Results:`);
+  console.log(`  Created: ${created}`);
+  console.log(`  Updated: ${updated}`);
+  console.log(`  Skipped: ${skipped}`);
+  console.log(`  Total: ${results.length}`);
+}

package/dist/story/bookmarks.js

@@ -1,2 +1,277 @@
-// @bun
-import{Ud as a,Vd as b,Wd as c,Xd as d}from"../chunk-pg1fvqb9.js";import"../chunk-xv34zbp4.js";export{d as getBookmarksScript,c as getBookmarksPanelStyles,b as getBookmarksPanelHtml,a as BookmarksManager};
+import fs from "node:fs";
+import path from "node:path";
+const BOOKMARKS_FILE = ".stx/story/bookmarks.json", STORAGE_VERSION = 1;
+
+export class BookmarksManager {
+  storage;
+  storagePath;
+  dirty = !1;
+  constructor(rootDir) {
+    this.storagePath = path.join(rootDir, BOOKMARKS_FILE);
+    this.storage = this.loadStorage();
+  }
+  loadStorage() {
+    try {
+      const content = fs.readFileSync(this.storagePath, "utf-8");
+      return JSON.parse(content);
+    } catch {
+      return { version: STORAGE_VERSION, bookmarks: [] };
+    }
+  }
+  async save() {
+    if (!this.dirty)
+      return;
+    const dir = path.dirname(this.storagePath);
+    await fs.promises.mkdir(dir, { recursive: !0 });
+    await fs.promises.writeFile(this.storagePath, JSON.stringify(this.storage, null, 2));
+    this.dirty = !1;
+  }
+  addBookmark(storyId, variantId, props, options = {}) {
+    const bookmark = {
+      id: generateId(),
+      name: options.name || `${storyId}/${variantId}`,
+      storyId,
+      variantId,
+      props,
+      created: Date.now(),
+      notes: options.notes,
+      color: options.color
+    };
+    this.storage.bookmarks.push(bookmark);
+    this.dirty = !0;
+    return bookmark;
+  }
+  getAllBookmarks() {
+    return [...this.storage.bookmarks];
+  }
+  getBookmarksForStory(storyId) {
+    return this.storage.bookmarks.filter((b) => b.storyId === storyId);
+  }
+  getBookmark(id) {
+    return this.storage.bookmarks.find((b) => b.id === id);
+  }
+  isBookmarked(storyId, variantId) {
+    return this.storage.bookmarks.some((b) => b.storyId === storyId && b.variantId === variantId);
+  }
+  updateBookmark(id, updates) {
+    const bookmark = this.getBookmark(id);
+    if (!bookmark)
+      return;
+    Object.assign(bookmark, updates);
+    this.dirty = !0;
+    return bookmark;
+  }
+  deleteBookmark(id) {
+    const index = this.storage.bookmarks.findIndex((b) => b.id === id);
+    if (index === -1)
+      return !1;
+    this.storage.bookmarks.splice(index, 1);
+    this.dirty = !0;
+    return !0;
+  }
+  toggleBookmark(storyId, variantId, props) {
+    const existing = this.storage.bookmarks.find((b) => b.storyId === storyId && b.variantId === variantId);
+    if (existing) {
+      this.deleteBookmark(existing.id);
+      return { added: !1 };
+    }
+    return { added: !0, bookmark: this.addBookmark(storyId, variantId, props) };
+  }
+  exportBookmarks() {
+    return JSON.stringify(this.storage, null, 2);
+  }
+  importBookmarks(json, merge = !0) {
+    const data = JSON.parse(json);
+    let imported = 0;
+    for (const bookmark of data.bookmarks) {
+      if (merge) {
+        const existing = this.storage.bookmarks.find((b) => b.id === bookmark.id);
+        if (existing)
+          Object.assign(existing, bookmark);
+        else
+          this.storage.bookmarks.push(bookmark);
+      } else
+        this.storage.bookmarks.push(bookmark);
+      imported++;
+    }
+    if (imported > 0)
+      this.dirty = !0;
+    return imported;
+  }
+}
+function generateId() {
+  return `bm-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+export function getBookmarksPanelHtml(bookmarks) {
+  return `
+    <div class="bookmarks-panel">
+      <div class="bookmarks-header">
+        <h3>\uD83D\uDCD1 Bookmarks</h3>
+        <button onclick="addCurrentBookmark()" title="Bookmark current">+</button>
+      </div>
+      <div class="bookmarks-list">
+        ${bookmarks.map((b) => `
+    <div class="bookmark-item" data-bookmark-id="${b.id}" style="${b.color ? `border-left: 3px solid ${b.color}` : ""}">
+      <div class="bookmark-info">
+        <div class="bookmark-name">${b.name}</div>
+        <div class="bookmark-path">${b.storyId} / ${b.variantId}</div>
+        ${b.notes ? `<div class="bookmark-notes">${b.notes}</div>` : ""}
+      </div>
+      <div class="bookmark-actions">
+        <button onclick="loadBookmark('${b.id}')" title="Load">\u25B6</button>
+        <button onclick="deleteBookmark('${b.id}')" title="Delete">\xD7</button>
+      </div>
+    </div>
+  `).join("") || '<div class="bookmarks-empty">No bookmarks yet</div>'}
+      </div>
+    </div>
+  `;
+}
+export function getBookmarksPanelStyles() {
+  return `
+    .bookmarks-panel {
+      padding: 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .bookmarks-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .bookmarks-header h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .bookmarks-header button {
+      padding: 4px 8px;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .bookmarks-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .bookmark-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      background: var(--bg);
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+    .bookmark-name {
+      font-weight: 500;
+      font-size: 13px;
+    }
+    .bookmark-path {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .bookmark-notes {
+      font-size: 11px;
+      color: var(--text-secondary);
+      font-style: italic;
+      margin-top: 4px;
+    }
+    .bookmark-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .bookmark-actions button {
+      padding: 4px 8px;
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    .bookmark-actions button:hover {
+      background: var(--bg-secondary);
+    }
+    .bookmarks-empty {
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 13px;
+      padding: 20px;
+    }
+  `;
+}
+export function getBookmarksScript() {
+  return `
+<script>
+window.__stxBookmarks = {
+  async loadBookmark(id) {
+    const response = await fetch('/api/bookmarks/' + id);
+    const bookmark = await response.json();
+
+    if (bookmark) {
+      window.__stxHotSwap?.selectVariant(bookmark.storyId, bookmark.variantId);
+      if (bookmark.props) {
+        window.dispatchEvent(new CustomEvent('stx:props-change', {
+          detail: { props: bookmark.props }
+        }));
+      }
+    }
+  },
+
+  async addCurrentBookmark() {
+    const name = prompt('Bookmark name:');
+    if (!name) return;
+
+    const storyId = window.__stxHotSwap?.storyId;
+    const variantId = window.__stxHotSwap?.variantId;
+    const props = window.__stxProps || {};
+
+    if (!storyId || !variantId) {
+      alert('No story selected');
+      return;
+    }
+
+    await fetch('/api/bookmarks', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, storyId, variantId, props })
+    });
+
+    window.__stxStory?.refreshBookmarks?.();
+  },
+
+  async deleteBookmark(id) {
+    if (!confirm('Delete this bookmark?')) return;
+
+    await fetch('/api/bookmarks/' + id, { method: 'DELETE' });
+    window.__stxStory?.refreshBookmarks?.();
+  },
+
+  async toggleCurrent() {
+    const storyId = window.__stxHotSwap?.storyId;
+    const variantId = window.__stxHotSwap?.variantId;
+    const props = window.__stxProps || {};
+
+    if (!storyId || !variantId) return;
+
+    await fetch('/api/bookmarks/toggle', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ storyId, variantId, props })
+    });
+
+    window.__stxStory?.refreshBookmarks?.();
+  }
+};
+
+window.loadBookmark = window.__stxBookmarks.loadBookmark.bind(window.__stxBookmarks);
+window.addCurrentBookmark = window.__stxBookmarks.addCurrentBookmark.bind(window.__stxBookmarks);
+window.deleteBookmark = window.__stxBookmarks.deleteBookmark.bind(window.__stxBookmarks);
+</script>
+`;
+}

package/dist/story/bun-test.js

@@ -1,2 +1,102 @@
-// @bun
-import{$d as d,Yd as a,Zd as b,_d as c,ae as e}from"../chunk-h7aq56qj.js";import"../chunk-hc2mf5h6.js";import"../chunk-0qnz93q2.js";import"../chunk-ngxfwzq3.js";import"../chunk-35faj94w.js";import"../chunk-xv34zbp4.js";export{e as watchStoryTests,c as runStoryTests,d as generateTestFile,b as createStoryTests,a as createStoryTestSuite};
+import { createContext } from "./context.js";
+import { runVisualTests } from "./testing.js";
+export async function createStoryTestSuite(options = {}) {
+  const { describe, test, expect } = await import("bun:test"), ctx = await createContext({ mode: "build" });
+  describe("STX Story Visual Tests", () => {
+    test("should pass visual regression tests", async () => {
+      const results = await runVisualTests(ctx, {
+        filter: options.filter,
+        threshold: options.threshold,
+        update: options.update
+      });
+      console.log(`
+Visual Tests: ${results.passed}/${results.total} passed`);
+      if (results.failed > 0) {
+        console.log(`
+Failed tests:`);
+        for (const failure of results.failures) {
+          console.log(`  \u2717 ${failure.storyId} - ${failure.variantId}`);
+          console.log(`    Difference: ${(failure.difference ?? 0).toFixed(2)}%`);
+        }
+      }
+      expect(results.failed).toBe(0);
+    }, options.timeout || 30000);
+  });
+}
+export async function createStoryTests(options = {}) {
+  const { describe, test, expect } = await import("bun:test"), ctx = await createContext({ mode: "build" }), { scanStoryFiles } = await import("./collect/scanner.js"), storyFiles = await scanStoryFiles(ctx);
+  describe("STX Stories", () => {
+    for (const storyFile of storyFiles) {
+      if (options.filter && options.filter.length > 0) {
+        if (!options.filter.some((f) => storyFile.fileName.toLowerCase().includes(f.toLowerCase())))
+          continue;
+      }
+      describe(storyFile.fileName, () => {
+        test("should render without errors", async () => {
+          const content = await Bun.file(storyFile.path).text();
+          expect(content).toBeTruthy();
+          expect(content.length).toBeGreaterThan(0);
+        });
+        if (storyFile.story)
+          for (const variant of storyFile.story.variants)
+            test(`variant: ${variant.title}`, async () => {
+              expect(variant.title).toBeTruthy();
+              if (variant.source)
+                expect(variant.source.length).toBeGreaterThan(0);
+            });
+      });
+    }
+  });
+}
+export async function runStoryTests(options = {}) {
+  const startTime = Date.now(), ctx = await createContext({ mode: "build" }), results = await runVisualTests(ctx, {
+    filter: options.filter,
+    threshold: options.threshold,
+    update: options.update
+  });
+  return {
+    passed: results.passed,
+    failed: results.failed,
+    total: results.total,
+    duration: Date.now() - startTime
+  };
+}
+export function generateTestFile(storyNames) {
+  return `/**
+ * Auto-generated story tests
+ * Run with: bun test
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { createContext } from '@stacksjs/stx/story'
+import { runVisualTests } from '@stacksjs/stx/story'
+
+${storyNames.map((name) => `import './${name}.story.stx'`).join(`
+`)}
+
+describe('Story Visual Tests', () => {
+  test('all stories pass visual regression', async () => {
+    const ctx = await createContext({ mode: 'build' })
+    const results = await runVisualTests(ctx)
+
+    expect(results.failed).toBe(0)
+  })
+})
+`;
+}
+export async function watchStoryTests(options = {}) {
+  const { watchStoryFiles } = await import("./collect/scanner.js"), ctx = await createContext({ mode: "dev" });
+  console.log("Watching for story changes...");
+  watchStoryFiles(ctx, async (event, file) => {
+    console.log(`
+${event}: ${file}`);
+    console.log("Running tests...");
+    const results = await runStoryTests(options);
+    if (results.failed > 0)
+      console.log(`
+\u274C ${results.failed} test(s) failed`);
+    else
+      console.log(`
+\u2713 All ${results.total} tests passed (${results.duration}ms)`);
+  });
+}