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

package/dist/story/generator.js

@@ -0,0 +1,165 @@
+export function generateAutoStory(component) {
+  const id = generateId(component.name), variants = generateVariants(component);
+  return {
+    id,
+    title: component.name,
+    variants,
+    layout: { type: "single" }
+  };
+}
+function generateVariants(component) {
+  const variants = [], defaultState = {};
+  for (const prop of component.props)
+    if (prop.default !== void 0)
+      defaultState[prop.name] = prop.default;
+  variants.push({
+    id: "default",
+    title: "Default",
+    state: defaultState
+  });
+  for (const prop of component.props)
+    if (prop.type === "boolean" && prop.default === !1) {
+      const state = { ...defaultState, [prop.name]: !0 };
+      variants.push({
+        id: `with-${prop.name}`,
+        title: `With ${formatPropName(prop.name)}`,
+        state
+      });
+    }
+  for (const prop of component.props)
+    if (prop.options && prop.options.length > 0) {
+      for (const option of prop.options)
+        if (option !== prop.default) {
+          const state = { ...defaultState, [prop.name]: option };
+          variants.push({
+            id: `${prop.name}-${String(option).toLowerCase()}`,
+            title: `${formatPropName(prop.name)}: ${option}`,
+            state
+          });
+        }
+    }
+  return variants;
+}
+export function inferControl(prop) {
+  const config = { type: inferControlType(prop) };
+  if (prop.options && prop.options.length > 0)
+    config.options = prop.options.map((opt) => typeof opt === "string" ? { value: opt, label: opt } : opt);
+  config.title = formatPropName(prop.name);
+  return config;
+}
+function inferControlType(prop) {
+  const type = prop.type.toLowerCase();
+  if (prop.options && prop.options.length > 0)
+    return prop.options.length <= 4 ? "radio" : "select";
+  if (type === "boolean" || type === "bool")
+    return "boolean";
+  if (type === "number" || type === "int" || type === "float")
+    return "number";
+  if (type === "string" || type === "text") {
+    if (prop.name.toLowerCase().includes("color"))
+      return "color";
+    if (prop.name.toLowerCase().includes("description") || prop.name.toLowerCase().includes("content") || prop.name.toLowerCase().includes("text"))
+      return "textarea";
+    return "text";
+  }
+  if (type === "array" || type === "object" || type.startsWith("{") || type.startsWith("["))
+    return "json";
+  if (type === "date")
+    return "date";
+  return "text";
+}
+export function generateControls(props) {
+  return props.map(inferControl);
+}
+export function generateStorySource(componentName, state) {
+  const props = Object.entries(state).map(([key, value]) => {
+    if (typeof value === "string")
+      return `${key}="${value}"`;
+    if (typeof value === "boolean")
+      return value ? key : "";
+    return `:${key}="${JSON.stringify(value)}"`;
+  }).filter(Boolean).join(" ");
+  return `<${componentName} ${props} />`;
+}
+function formatPropName(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+function generateId(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+export function generateStoryFileContent(component) {
+  const story = generateAutoStory(component), controls = generateControls(component.props), initStateProps = component.props.map((prop) => {
+    const defaultVal = prop.default !== void 0 ? JSON.stringify(prop.default) : getDefaultForType(prop.type);
+    return `    ${prop.name}: ${defaultVal}`;
+  }).join(`,
+`), controlComponents = controls.map((ctrl, i) => {
+    const prop = component.props[i];
+    return `      <${getControlTag(ctrl.type)} v-model="state.${prop.name}" title="${ctrl.title}" />`;
+  }).join(`
+`);
+  return `<!-- Auto-generated story for ${component.name} -->
+<script>
+import ${component.name} from './${component.name}.stx'
+
+function initState() {
+  return {
+${initStateProps}
+  }
+}
+</script>
+
+<Story title="${component.name}">
+  <Variant title="Playground" :init-state="initState">
+    <template #default="{ state }">
+      <${component.name} v-bind="state" />
+    </template>
+
+    <template #controls="{ state }">
+${controlComponents}
+    </template>
+  </Variant>
+
+${story.variants.slice(1).map((v) => `  <Variant title="${v.title}">
+    <${component.name} ${formatStateAsProps(v.state || {})} />
+  </Variant>`).join(`
+
+`)}
+</Story>
+`;
+}
+function getDefaultForType(type) {
+  const t = type.toLowerCase();
+  if (t === "boolean")
+    return "false";
+  if (t === "number")
+    return "0";
+  if (t === "array")
+    return "[]";
+  if (t === "object")
+    return "{}";
+  return "''";
+}
+function getControlTag(type) {
+  return {
+    text: "StxText",
+    number: "StxNumber",
+    boolean: "StxCheckbox",
+    select: "StxSelect",
+    radio: "StxRadio",
+    color: "StxColorSelect",
+    json: "StxJson",
+    date: "StxText",
+    textarea: "StxTextarea",
+    slider: "StxSlider",
+    buttongroup: "StxButtonGroup"
+  }[type] || "StxText";
+}
+function formatStateAsProps(state) {
+  return Object.entries(state).map(([key, value]) => {
+    if (typeof value === "string")
+      return `${key}="${value}"`;
+    if (typeof value === "boolean")
+      return value ? key : `:${key}="false"`;
+    return `:${key}="${JSON.stringify(value)}"`;
+  }).join(" ");
+}

package/dist/story/hmr.d.ts

@@ -0,0 +1,62 @@
+/**
+ * STX Story - Hot Module Reload
+ * WebSocket-based HMR for story updates
+ */
+import type { ServerWebSocket } from 'bun';
+/**
+ * HMR message types
+ */
+export type HmrMessageType = 'connected' | 'story-update' | 'story-add' | 'story-remove' | 'config-change' | 'full-reload' | 'error';
+/**
+ * HMR message structure
+ */
+export interface HmrMessage {
+    type: HmrMessageType;
+    data?: any;
+    timestamp?: number;
+}
+/**
+ * Create WebSocket upgrade handler for HMR
+ */
+export interface HmrWebSocketHandler {
+    open: (ws: ServerWebSocket<unknown>) => void;
+    close: (ws: ServerWebSocket<unknown>) => void;
+    message: (ws: ServerWebSocket<unknown>, message: string | ArrayBuffer) => void;
+}
+export declare function createHmrHandler(): HmrWebSocketHandler;
+/**
+ * Broadcast a message to all connected clients
+ */
+export declare function broadcast(message: HmrMessage): void;
+/**
+ * Notify clients of a story update
+ */
+export declare function notifyStoryUpdate(storyId: string, data?: any): void;
+/**
+ * Notify clients of a new story
+ */
+export declare function notifyStoryAdd(storyId: string, data?: any): void;
+/**
+ * Notify clients of a removed story
+ */
+export declare function notifyStoryRemove(storyId: string): void;
+/**
+ * Notify clients of a config change
+ */
+export declare function notifyConfigChange(): void;
+/**
+ * Notify clients to do a full reload
+ */
+export declare function notifyFullReload(): void;
+/**
+ * Notify clients of an error
+ */
+export declare function notifyError(error: string): void;
+/**
+ * Get the number of connected clients
+ */
+export declare function getClientCount(): number;
+/**
+ * Get HMR client script to inject into the page
+ */
+export declare function getHmrClientScript(wsUrl: string): string;

package/dist/story/hmr.js

@@ -0,0 +1,131 @@
+const clients = new Set;
+export function createHmrHandler() {
+  return {
+    open(ws) {
+      clients.add(ws);
+      ws.send(JSON.stringify({
+        type: "connected",
+        timestamp: Date.now()
+      }));
+    },
+    close(ws) {
+      clients.delete(ws);
+    },
+    message(_ws, _message) {}
+  };
+}
+export function broadcast(message) {
+  const payload = JSON.stringify({
+    ...message,
+    timestamp: message.timestamp || Date.now()
+  });
+  for (const client of clients)
+    try {
+      client.send(payload);
+    } catch {
+      clients.delete(client);
+    }
+}
+export function notifyStoryUpdate(storyId, data) {
+  broadcast({
+    type: "story-update",
+    data: { storyId, ...data }
+  });
+}
+export function notifyStoryAdd(storyId, data) {
+  broadcast({
+    type: "story-add",
+    data: { storyId, ...data }
+  });
+}
+export function notifyStoryRemove(storyId) {
+  broadcast({
+    type: "story-remove",
+    data: { storyId }
+  });
+}
+export function notifyConfigChange() {
+  broadcast({
+    type: "config-change"
+  });
+}
+export function notifyFullReload() {
+  broadcast({
+    type: "full-reload"
+  });
+}
+export function notifyError(error) {
+  broadcast({
+    type: "error",
+    data: { error }
+  });
+}
+export function getClientCount() {
+  return clients.size;
+}
+export function getHmrClientScript(wsUrl) {
+  return `
+<script>
+(function() {
+  const ws = new WebSocket('${wsUrl}');
+
+  ws.onopen = function() {
+    console.log('[STX Story] HMR connected');
+  };
+
+  ws.onmessage = function(event) {
+    const message = JSON.parse(event.data);
+
+    switch (message.type) {
+      case 'connected':
+        console.log('[STX Story] Connected to HMR server');
+        break;
+
+      case 'story-update':
+        console.log('[STX Story] Story updated:', message.data.storyId);
+        // Reload the current story if it matches
+        if (window.__stxStory && window.__stxStory.currentStoryId === message.data.storyId) {
+          window.__stxStory.reloadCurrentStory();
+        }
+        break;
+
+      case 'story-add':
+        console.log('[STX Story] Story added:', message.data.storyId);
+        window.__stxStory && window.__stxStory.refreshStoryList();
+        break;
+
+      case 'story-remove':
+        console.log('[STX Story] Story removed:', message.data.storyId);
+        window.__stxStory && window.__stxStory.refreshStoryList();
+        break;
+
+      case 'config-change':
+        console.log('[STX Story] Config changed, reloading...');
+        location.reload();
+        break;
+
+      case 'full-reload':
+        console.log('[STX Story] Full reload requested');
+        location.reload();
+        break;
+
+      case 'error':
+        console.error('[STX Story] Error:', message.data.error);
+        break;
+    }
+  };
+
+  ws.onclose = function() {
+    console.log('[STX Story] HMR disconnected, attempting reconnect...');
+    setTimeout(function() {
+      location.reload();
+    }, 1000);
+  };
+
+  ws.onerror = function(error) {
+    console.error('[STX Story] WebSocket error:', error);
+  };
+})();
+</script>
+`;
+}

package/dist/story/hot-swap.d.ts

@@ -0,0 +1,46 @@
+/**
+ * STX Story - Hot Swap
+ * Switch story variants without full page reload
+ */
+/**
+ * Hot swap state
+ */
+export interface HotSwapState {
+    /** Current story ID */
+    storyId: string | null;
+    /** Current variant ID */
+    variantId: string | null;
+    /** Current props */
+    props: Record<string, any>;
+    /** Iframe element reference */
+    iframe: HTMLIFrameElement | null;
+}
+/**
+ * Hot swap options
+ */
+export interface HotSwapOptions {
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Preserve scroll position */
+    preserveScroll?: boolean;
+    /** Callback before swap */
+    onBeforeSwap?: (state: HotSwapState) => void;
+    /** Callback after swap */
+    onAfterSwap?: (state: HotSwapState) => void;
+}
+/**
+ * Generate hot swap client script
+ * Injects into the story UI for seamless variant switching
+ */
+export declare function getHotSwapScript(): string;
+/**
+ * Generate variant selector UI
+ */
+export declare function getVariantSelectorHtml(variants: Array<{
+    id: string;
+    title: string;
+}>, currentVariantId: string): string;
+/**
+ * Generate variant selector styles
+ */
+export declare function getVariantSelectorStyles(): string;

package/dist/story/hot-swap.js

@@ -0,0 +1,207 @@
+export function getHotSwapScript() {
+  return `
+<script>
+(function() {
+  // Hot swap state
+  window.__stxHotSwap = {
+    storyId: null,
+    variantId: null,
+    props: {},
+    iframe: null,
+
+    // Initialize hot swap
+    init: function(iframeSelector) {
+      this.iframe = document.querySelector(iframeSelector);
+      if (!this.iframe) {
+        console.warn('[STX Story] Hot swap iframe not found');
+        return;
+      }
+
+      // Listen for variant changes
+      window.addEventListener('stx:variant-change', this.handleVariantChange.bind(this));
+      window.addEventListener('stx:props-change', this.handlePropsChange.bind(this));
+
+      console.log('[STX Story] Hot swap initialized');
+    },
+
+    // Handle variant change
+    handleVariantChange: function(event) {
+      const { storyId, variantId } = event.detail;
+
+      if (this.storyId === storyId && this.variantId === variantId) {
+        return; // No change
+      }
+
+      this.storyId = storyId;
+      this.variantId = variantId;
+
+      this.swapContent();
+    },
+
+    // Handle props change
+    handlePropsChange: function(event) {
+      const { props } = event.detail;
+      this.props = { ...this.props, ...props };
+      this.updateProps();
+    },
+
+    // Swap iframe content without reload
+    swapContent: async function() {
+      if (!this.iframe || !this.storyId || !this.variantId) return;
+
+      // Save scroll position
+      const scrollTop = this.iframe.contentWindow?.scrollY || 0;
+      const scrollLeft = this.iframe.contentWindow?.scrollX || 0;
+
+      // Fetch new content
+      try {
+        const response = await fetch('/api/render/' + this.storyId + '/' + this.variantId);
+        const data = await response.json();
+
+        if (data.html) {
+          // Fade out
+          this.iframe.style.opacity = '0.5';
+          this.iframe.style.transition = 'opacity 150ms ease';
+
+          // Update content
+          const doc = this.iframe.contentDocument;
+          if (doc) {
+            // Find body or create one
+            let body = doc.body;
+            if (!body) {
+              doc.write('<html><head></head><body></body></html>');
+              body = doc.body;
+            }
+
+            // Update body content
+            body.innerHTML = data.html;
+
+            // Update styles if provided
+            if (data.css) {
+              let styleEl = doc.getElementById('stx-component-styles');
+              if (!styleEl) {
+                styleEl = doc.createElement('style');
+                styleEl.id = 'stx-component-styles';
+                doc.head.appendChild(styleEl);
+              }
+              styleEl.textContent = data.css;
+            }
+
+            // Restore scroll position
+            this.iframe.contentWindow?.scrollTo(scrollLeft, scrollTop);
+          }
+
+          // Fade in
+          setTimeout(() => {
+            this.iframe.style.opacity = '1';
+          }, 50);
+
+          // Dispatch event
+          window.dispatchEvent(new CustomEvent('stx:swap-complete', {
+            detail: { storyId: this.storyId, variantId: this.variantId }
+          }));
+        }
+      }
+catch (error) {
+        console.error('[STX Story] Hot swap failed:', error);
+        // Fallback to full reload
+        this.iframe.src = '/preview/' + this.storyId + '/' + this.variantId;
+      }
+    },
+
+    // Update props in iframe without content swap
+    updateProps: function() {
+      if (!this.iframe) return;
+
+      const win = this.iframe.contentWindow;
+      if (win && win.__stxProps) {
+        Object.assign(win.__stxProps, this.props);
+
+        // Trigger re-render if component supports it
+        if (win.__stxRerender) {
+          win.__stxRerender(this.props);
+        }
+
+        window.dispatchEvent(new CustomEvent('stx:props-updated', {
+          detail: { props: this.props }
+        }));
+      }
+    },
+
+    // Select a variant
+    selectVariant: function(storyId, variantId) {
+      window.dispatchEvent(new CustomEvent('stx:variant-change', {
+        detail: { storyId, variantId }
+      }));
+    },
+
+    // Update a prop
+    updateProp: function(name, value) {
+      window.dispatchEvent(new CustomEvent('stx:props-change', {
+        detail: { props: { [name]: value } }
+      }));
+    },
+
+    // Reset props to defaults
+    resetProps: function() {
+      this.props = {};
+      this.swapContent();
+    }
+  };
+
+  // Auto-initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+      window.__stxHotSwap.init('#preview-iframe');
+    });
+  }
+else {
+    window.__stxHotSwap.init('#preview-iframe');
+  }
+})();
+</script>
+`;
+}
+export function getVariantSelectorHtml(variants, currentVariantId) {
+  return `
+    <div class="variant-selector">
+      ${variants.map((v) => `
+    <button
+      class="variant-btn ${v.id === currentVariantId ? "active" : ""}"
+      onclick="window.__stxHotSwap.selectVariant(window.__stxHotSwap.storyId, '${v.id}')"
+    >
+      ${v.title}
+    </button>
+  `).join("")}
+    </div>
+  `;
+}
+export function getVariantSelectorStyles() {
+  return `
+    .variant-selector {
+      display: flex;
+      gap: 4px;
+      padding: 8px;
+      background: var(--bg-secondary);
+      border-radius: 6px;
+    }
+    .variant-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 150ms ease;
+    }
+    .variant-btn:hover {
+      background: var(--bg-secondary);
+    }
+    .variant-btn.active {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+  `;
+}

package/dist/story/index.d.ts

@@ -0,0 +1,99 @@
+export type { CreateContextOptions } from './context';
+export type { ServerOptions, StoryServer } from './server';
+/**
+ * STX Story - Component showcase and testing
+ *
+ * Native component explorer for stx, providing:
+ * - Automatic component discovery
+ * - Interactive prop editing
+ * - Visual regression testing
+ * - Documentation generation
+ */
+// Addons
+export * from './addons';
+// Analytics
+export * from './analytics';
+// Auto-generate Stories
+export * from './auto-stories';
+// Bookmarks
+export * from './bookmarks';
+// Bun Test Integration
+export * from './bun-test';
+// CLI
+export * from './cli';
+// Collection (scanner, analyzer, tree)
+export * from './collect/index';
+// Commands
+export * from './commands/index';
+// Compiled Output
+export * from './compiled-output';
+// Composition (dependency graph)
+export * from './composition';
+// Configuration
+export {
+  defaultBackgroundPresets,
+  defaultResponsivePresets,
+  defaultStoryConfig,
+  getDefaultStoryConfig,
+  resolveStoryConfig,
+} from './config';
+// Config Watcher
+export * from './config-watcher';
+// Context
+export {
+  createContext,
+  updateContextStoryFiles,
+  updateContextTree,
+} from './context';
+// Controls
+export * from './controls/index';
+// Desktop Preview
+export * from './desktop-preview';
+// Docs Generator
+export * from './docs-generator';
+// Errors
+export * from './errors';
+// Figma Export
+export * from './figma-export';
+// Generator
+export * from './generator';
+// Css CSS
+export * from './ts-css';
+// HMR
+export * from './hmr';
+// Hot Swap
+export * from './hot-swap';
+// Interactions
+export * from './interactions';
+// Keyboard Shortcuts
+export * from './keyboard-shortcuts';
+// Output (terminal styling)
+export * from './output';
+// Performance Profiling
+export * from './performance';
+// Presets
+export * from './presets';
+// Props Validation
+export * from './props-validation';
+// Renderer
+export * from './renderer';
+// Search
+export * from './search';
+// Search Index
+export * from './search-index';
+// Server
+export { createStoryServer } from './server';
+// Setup
+export * from './setup';
+// Snapshots
+export * from './snapshots';
+// Testing
+export * from './testing';
+// Theme
+export * from './theme';
+// Types
+export * from './types';
+// UI Components
+export * from './ui/index';
+// Visual Testing
+export * from './visual-testing';