@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/story/controls/index.js

@@ -0,0 +1,320 @@
+function normalizeOptions(options) {
+  if (!options)
+    return [];
+  if (Array.isArray(options))
+    return options;
+  return Object.entries(options).map(([value, label]) => ({ value, label }));
+}
+export function renderControl(config, value, onChange) {
+  const { type, title } = config;
+  switch (type) {
+    case "text":
+      return renderTextControl(title || "", value, onChange);
+    case "number":
+      return renderNumberControl(title || "", value, onChange, config);
+    case "boolean":
+      return renderCheckboxControl(title || "", value, onChange);
+    case "select":
+      return renderSelectControl(title || "", value, onChange, config);
+    case "radio":
+      return renderRadioControl(title || "", value, onChange, config);
+    case "color":
+      return renderColorControl(title || "", value, onChange);
+    case "textarea":
+      return renderTextareaControl(title || "", value, onChange);
+    case "slider":
+      return renderSliderControl(title || "", value, onChange, config);
+    case "json":
+      return renderJsonControl(title || "", value, onChange);
+    case "date":
+      return renderDateControl(title || "", value, onChange);
+    case "buttongroup":
+      return renderButtonGroupControl(title || "", value, onChange, config);
+    default:
+      return renderTextControl(title || "", value, onChange);
+  }
+}
+export function renderTextControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-text">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="text"
+        class="stx-control-input"
+        value="${escapeHtml(String(value || ""))}"
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function renderNumberControl(title, value, onChange, config) {
+  const min = config.min !== void 0 ? `min="${config.min}"` : "", max = config.max !== void 0 ? `max="${config.max}"` : "", step = config.step !== void 0 ? `step="${config.step}"` : "";
+  return `
+    <div class="stx-control stx-control-number">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="number"
+        class="stx-control-input"
+        value="${value ?? 0}"
+        ${min} ${max} ${step}
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function renderCheckboxControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-checkbox">
+      <label class="stx-control-label">
+        <input
+          type="checkbox"
+          class="stx-control-checkbox-input"
+          ${value ? "checked" : ""}
+          onchange="${onChange}"
+        />
+        <span>${escapeHtml(title)}</span>
+      </label>
+    </div>
+  `;
+}
+export function renderSelectControl(title, value, onChange, config) {
+  const optionsHtml = normalizeOptions(config.options).map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt, selected = optValue === value ? "selected" : "";
+    return `<option value="${escapeHtml(String(optValue))}" ${selected}>${escapeHtml(String(optLabel))}</option>`;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-select">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <select class="stx-control-input" onchange="${onChange}">
+        ${optionsHtml}
+      </select>
+    </div>
+  `;
+}
+export function renderRadioControl(title, value, onChange, config) {
+  const options = normalizeOptions(config.options), name = `radio-${title.toLowerCase().replace(/\s+/g, "-")}`, optionsHtml = options.map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt, checked = optValue === value ? "checked" : "";
+    return `
+        <label class="stx-control-radio-option">
+          <input
+            type="radio"
+            name="${name}"
+            value="${escapeHtml(String(optValue))}"
+            ${checked}
+            onchange="${onChange}"
+          />
+          <span>${escapeHtml(String(optLabel))}</span>
+        </label>
+      `;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-radio">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-radio-group">
+        ${optionsHtml}
+      </div>
+    </div>
+  `;
+}
+export function renderColorControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-color">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-color-wrapper">
+        <input
+          type="color"
+          class="stx-control-color-input"
+          value="${escapeHtml(value || "#000000")}"
+          onchange="${onChange}"
+        />
+        <input
+          type="text"
+          class="stx-control-input stx-control-color-text"
+          value="${escapeHtml(value || "#000000")}"
+          onchange="${onChange}"
+        />
+      </div>
+    </div>
+  `;
+}
+export function renderTextareaControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-textarea">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <textarea
+        class="stx-control-textarea-input"
+        onchange="${onChange}"
+      >${escapeHtml(String(value || ""))}</textarea>
+    </div>
+  `;
+}
+export function renderSliderControl(title, value, onChange, config) {
+  const min = config.min ?? 0, max = config.max ?? 100, step = config.step ?? 1;
+  return `
+    <div class="stx-control stx-control-slider">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-slider-wrapper">
+        <input
+          type="range"
+          class="stx-control-slider-input"
+          value="${value ?? min}"
+          min="${min}"
+          max="${max}"
+          step="${step}"
+          onchange="${onChange}"
+          oninput="this.nextElementSibling.textContent = this.value"
+        />
+        <span class="stx-control-slider-value">${value ?? min}</span>
+      </div>
+    </div>
+  `;
+}
+export function renderJsonControl(title, value, onChange) {
+  const jsonStr = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  return `
+    <div class="stx-control stx-control-json">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <textarea
+        class="stx-control-json-input"
+        onchange="${onChange}"
+      >${escapeHtml(jsonStr)}</textarea>
+    </div>
+  `;
+}
+export function renderDateControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-date">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="date"
+        class="stx-control-input"
+        value="${escapeHtml(value || "")}"
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function getControlStyles() {
+  return `
+    .stx-control {
+      margin-bottom: 12px;
+    }
+    .stx-control-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #666);
+      margin-bottom: 4px;
+    }
+    .stx-control-input {
+      width: 100%;
+      padding: 6px 8px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      font-size: 13px;
+      background: var(--bg, #fff);
+      color: var(--text, #333);
+    }
+    .stx-control-input:focus {
+      outline: none;
+      border-color: var(--primary, #3b82f6);
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    }
+    .stx-control-checkbox {
+      display: flex;
+      align-items: center;
+    }
+    .stx-control-checkbox label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+    .stx-control-checkbox-input {
+      width: 16px;
+      height: 16px;
+    }
+    .stx-control-radio-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .stx-control-radio-option {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .stx-control-color-wrapper {
+      display: flex;
+      gap: 8px;
+    }
+    .stx-control-color-input {
+      width: 40px;
+      height: 32px;
+      padding: 2px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .stx-control-color-text {
+      flex: 1;
+    }
+    .stx-control-textarea-input,
+    .stx-control-json-input {
+      width: 100%;
+      min-height: 80px;
+      padding: 8px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: inherit;
+      resize: vertical;
+      background: var(--bg, #fff);
+      color: var(--text, #333);
+    }
+    .stx-control-json-input {
+      font-family: monospace;
+      font-size: 12px;
+    }
+    .stx-control-slider-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .stx-control-slider-input {
+      flex: 1;
+    }
+    .stx-control-slider-value {
+      min-width: 40px;
+      text-align: right;
+      font-size: 13px;
+      color: var(--text-secondary, #666);
+    }
+  `;
+}
+export function renderButtonGroupControl(title, value, onChange, config) {
+  const buttonsHtml = normalizeOptions(config.options).map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt;
+    return `
+        <button
+          type="button"
+          class="stx-control-btn-group-btn ${optValue === value ? "active" : ""}"
+          data-value="${escapeHtml(String(optValue))}"
+          onclick="${onChange}"
+        >${escapeHtml(String(optLabel))}</button>
+      `;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-btn-group">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-btn-group-wrapper">
+        ${buttonsHtml}
+      </div>
+    </div>
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}

package/dist/story/desktop-preview.d.ts

@@ -0,0 +1,34 @@
+import type { ServerStoryFile, StoryContext } from './types';
+/**
+ * Check if desktop preview is available
+ */
+export declare function isDesktopPreviewAvailable(): Promise<boolean>;
+/**
+ * Open a story in a native desktop window
+ */
+export declare function openDesktopPreview(ctx: StoryContext, story: ServerStoryFile, variantId: string, options?: DesktopPreviewOptions): Promise<DesktopPreviewInstance | null>;
+/**
+ * Get desktop preview button HTML
+ */
+export declare function getDesktopPreviewButton(storyId: string, variantId: string): string;
+/**
+ * Get desktop preview styles
+ */
+export declare function getDesktopPreviewStyles(): string;
+/**
+ * Desktop preview options
+ */
+export declare interface DesktopPreviewOptions {
+  width?: number
+  height?: number
+  title?: string
+  devTools?: boolean
+}
+/**
+ * Desktop preview instance
+ */
+export declare interface DesktopPreviewInstance {
+  close: () => void
+  reload: () => void
+  update: (html: string) => void
+}

package/dist/story/desktop-preview.js

@@ -0,0 +1,105 @@
+export async function isDesktopPreviewAvailable() {
+  try {
+    return typeof (await import("@stacksjs/desktop")).createWindowWithHTML === "function";
+  } catch {
+    return !1;
+  }
+}
+export async function openDesktopPreview(ctx, story, variantId, options = {}) {
+  try {
+    const desktop = await import("@stacksjs/desktop"), variant = story.story?.variants.find((v) => v.id === variantId);
+    if (!variant)
+      return null;
+    const title = options.title || `${story.fileName} - ${variant.title}`, html = generatePreviewHTML(ctx, story, variant), _window = await desktop.createWindowWithHTML(html, {
+      title,
+      width: options.width || 800,
+      height: options.height || 600
+    });
+    return {
+      close: () => {},
+      reload: () => {},
+      update: (_html) => {}
+    };
+  } catch (error) {
+    console.warn("Desktop preview not available:", error);
+    return null;
+  }
+}
+function generatePreviewHTML(ctx, story, variant) {
+  const { theme } = ctx.config;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${story.fileName} - ${variant.title}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      padding: 24px;
+      background: ${theme.defaultColorScheme === "dark" ? "#1a1a1a" : "#ffffff"};
+      color: ${theme.defaultColorScheme === "dark" ? "#ffffff" : "#333333"};
+    }
+    .preview-header {
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid ${theme.defaultColorScheme === "dark" ? "#404040" : "#e0e0e0"};
+    }
+    .preview-title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .preview-subtitle {
+      font-size: 12px;
+      color: ${theme.defaultColorScheme === "dark" ? "#a0a0a0" : "#666666"};
+    }
+    .preview-content {
+      padding: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="preview-header">
+    <div class="preview-title">${story.fileName}</div>
+    <div class="preview-subtitle">${variant.title}</div>
+  </div>
+  <div class="preview-content">
+    ${variant.source || "<!-- No source -->"}
+  </div>
+  <script>
+    window.__stxProps = ${JSON.stringify(variant.state || {})};
+  </script>
+</body>
+</html>`;
+}
+export function getDesktopPreviewButton(storyId, variantId) {
+  return `
+    <button
+      class="stx-desktop-preview-btn"
+      onclick="window.__stxStory.openDesktopPreview('${storyId}', '${variantId}')"
+      title="Open in native window"
+    >
+      \uD83D\uDDA5\uFE0F Desktop
+    </button>
+  `;
+}
+export function getDesktopPreviewStyles() {
+  return `
+    .stx-desktop-preview-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .stx-desktop-preview-btn:hover {
+      background: var(--bg-secondary);
+    }
+  `;
+}

package/dist/story/docs-generator.d.ts

@@ -0,0 +1,30 @@
+import type { AnalyzedComponent, ServerStoryFile, StoryContext } from './types';
+/**
+ * Generate documentation for all components
+ */
+export declare function generateStoryDocs(ctx: StoryContext, components: AnalyzedComponent[], options?: DocsOptions): Promise<void>;
+/**
+ * Generate documentation index
+ */
+export declare function generateDocsIndex(components: AnalyzedComponent[]): string;
+/**
+ * Generate documentation for a single component
+ */
+export declare function generateComponentDocs(component: AnalyzedComponent, storyFile?: ServerStoryFile, options?: DocsOptions): string;
+/**
+ * Generate JSON catalog of all components
+ */
+export declare function generateComponentCatalog(components: AnalyzedComponent[]): string;
+/**
+ * Export design tokens from components
+ */
+export declare function exportDesignTokens(components: AnalyzedComponent[]): Record<string, any>;
+/**
+ * Documentation options
+ */
+export declare interface DocsOptions {
+  outDir?: string
+  includeStories?: boolean
+  includeSource?: boolean
+  template?: string
+}

package/dist/story/docs-generator.js

@@ -0,0 +1,187 @@
+import fs from "node:fs";
+import path from "node:path";
+import { stateDir } from "../state-dir.js";
+export async function generateStoryDocs(ctx, components, options = {}) {
+  const outDir = options.outDir || stateDir(ctx.root, "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)
+  };
+}