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

package/dist/story/types.d.ts

@@ -0,0 +1,342 @@
+/**
+ * STX Story - Component showcase and testing
+ * Type definitions for the story feature
+ */
+/**
+ * Tree group configuration for organizing stories
+ */
+export interface TreeGroupConfig {
+    /** Display title for the group */
+    title: string;
+    /** Unique identifier for the group */
+    id?: string;
+    /** Function to determine if a file belongs to this group */
+    include?: (file: StoryTreeFile) => boolean;
+}
+/**
+ * Responsive viewport preset
+ */
+export interface ResponsivePreset {
+    /** Display label */
+    label: string;
+    /** Viewport width in pixels */
+    width: number;
+    /** Viewport height in pixels (optional) */
+    height?: number;
+}
+/**
+ * Background preset for story canvas
+ */
+export interface BackgroundPreset {
+    /** Display label */
+    label: string;
+    /** Background color (CSS value) */
+    color: string;
+    /** Contrast color for text (optional) */
+    contrastColor?: string;
+}
+/**
+ * Story theme configuration
+ */
+export interface StoryThemeConfig {
+    /** Title displayed in the story UI */
+    title?: string;
+    /** Logo configuration */
+    logo?: {
+        /** Square logo (for favicon/small displays) */
+        square?: string;
+        /** Light theme logo */
+        light?: string;
+        /** Dark theme logo */
+        dark?: string;
+    };
+    /** Favicon path */
+    favicon?: string;
+    /** Custom colors */
+    colors?: {
+        /** Primary accent color shades */
+        primary?: Record<string, string>;
+        /** Gray color shades */
+        gray?: Record<string, string>;
+    };
+    /** Default color scheme */
+    defaultColorScheme?: 'light' | 'dark' | 'auto';
+    /** Hide the color scheme toggle */
+    hideColorSchemeSwitch?: boolean;
+    /** CSS class to apply for dark mode */
+    darkClass?: string;
+}
+/**
+ * Story tree configuration
+ */
+export interface StoryTreeConfig {
+    /** How to generate tree paths from files */
+    file?: 'title' | 'path' | ((file: StoryTreeFile) => string[]);
+    /** Sort order for tree items */
+    order?: 'asc' | ((a: string, b: string) => number);
+    /** Group configurations */
+    groups?: TreeGroupConfig[];
+}
+/**
+ * Story configuration (part of StxConfig)
+ */
+export interface StoryConfig {
+    /** Enable the story feature */
+    enabled?: boolean;
+    /** Output directory for built story site */
+    outDir?: string;
+    /** Glob patterns to match story files */
+    storyMatch?: string[];
+    /** Glob patterns to ignore */
+    storyIgnored?: string[];
+    /** Tree organization configuration */
+    tree?: StoryTreeConfig;
+    /** Theme configuration */
+    theme?: StoryThemeConfig;
+    /** Responsive viewport presets */
+    responsivePresets?: ResponsivePreset[];
+    /** Background presets */
+    backgroundPresets?: BackgroundPreset[];
+    /** Auto-apply contrast color to text */
+    autoApplyContrastColor?: boolean;
+    /** Path to setup file for global configuration */
+    setupFile?: string;
+    /** Default server port */
+    port?: number;
+    /** Disable auto-generated props controls globally */
+    autoPropsDisabled?: boolean;
+}
+/**
+ * File information for tree configuration
+ */
+export interface StoryTreeFile {
+    /** Story title */
+    title: string;
+    /** File path */
+    path: string;
+}
+/**
+ * Server-side story file representation
+ */
+export interface ServerStoryFile {
+    /** Unique identifier */
+    id: string;
+    /** Absolute file path */
+    path: string;
+    /** Relative file path */
+    relativePath: string;
+    /** File name without extension */
+    fileName: string;
+    /** Generated tree path */
+    treePath?: string[];
+    /** Tree file data for config functions */
+    treeFile?: StoryTreeFile;
+    /** Parsed story data */
+    story?: ServerStory;
+}
+/**
+ * Story layout configuration
+ */
+export type StoryLayout = {
+    type: 'single';
+    iframe?: boolean;
+} | {
+    type: 'grid';
+    width?: number | string;
+};
+/**
+ * Server-side story representation
+ */
+export interface ServerStory {
+    /** Unique identifier */
+    id: string;
+    /** Story title */
+    title: string;
+    /** Group this story belongs to */
+    group?: string;
+    /** Story variants */
+    variants: ServerVariant[];
+    /** Layout configuration */
+    layout?: StoryLayout;
+    /** Icon name (iconify format) */
+    icon?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Show only in docs, not in canvas */
+    docsOnly?: boolean;
+    /** Disable auto-generated props controls for this story */
+    autoPropsDisabled?: boolean;
+}
+/**
+ * Server-side variant representation
+ */
+export interface ServerVariant {
+    /** Unique identifier */
+    id: string;
+    /** Variant title */
+    title: string;
+    /** Icon name */
+    icon?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Initial state for controls */
+    state?: Record<string, any>;
+    /** Source code for display */
+    source?: string;
+    /** Disable responsive controls */
+    responsiveDisabled?: boolean;
+}
+/**
+ * Tree leaf node (story)
+ */
+export interface ServerTreeLeaf {
+    /** Display title */
+    title: string;
+    /** Index in story files array */
+    index: number;
+}
+/**
+ * Tree folder node
+ */
+export interface ServerTreeFolder {
+    /** Display title */
+    title: string;
+    /** Child nodes */
+    children: ServerTreeNode[];
+}
+/**
+ * Tree group node
+ */
+export interface ServerTreeGroup {
+    /** Indicates this is a group */
+    group: true;
+    /** Group identifier */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Child nodes */
+    children: ServerTreeNode[];
+}
+/**
+ * Any tree node type
+ */
+export type ServerTreeNode = ServerTreeGroup | ServerTreeFolder | ServerTreeLeaf;
+/**
+ * Complete server tree
+ */
+export type ServerTree = ServerTreeNode[];
+/**
+ * Analyzed component prop for story
+ */
+export interface StoryAnalyzedProp {
+    /** Prop name */
+    name: string;
+    /** Inferred or declared type */
+    type: string;
+    /** Whether the prop is required */
+    required: boolean;
+    /** Default value if any */
+    default?: any;
+    /** Description from JSDoc */
+    description?: string;
+    /** Options for enum/select types */
+    options?: any[];
+}
+/**
+ * Analyzed component slot
+ */
+export interface AnalyzedSlot {
+    /** Slot name ('default' for main slot) */
+    name: string;
+    /** Description from comments */
+    description?: string;
+}
+/**
+ * Directive usage in a component
+ */
+export interface DirectiveUsage {
+    /** Directive name (e.g., 'if', 'foreach', 'component') */
+    name: string;
+    /** Number of times used */
+    count: number;
+}
+/**
+ * Analyzed component metadata
+ */
+export interface AnalyzedComponent {
+    /** Component name */
+    name: string;
+    /** File path */
+    path: string;
+    /** Component description */
+    description?: string;
+    /** Analyzed props */
+    props: StoryAnalyzedProp[];
+    /** Analyzed slots */
+    slots: AnalyzedSlot[];
+    /** Component dependencies (other components used) */
+    dependencies: string[];
+    /** CSS classes used (for Css) */
+    cssClasses: string[];
+    /** Directives used in the component */
+    directives?: DirectiveUsage[];
+    /** Category/group */
+    category?: string;
+    /** Tags for filtering */
+    tags?: string[];
+}
+/**
+ * Control type for prop editing
+ */
+export type ControlType = 'text' | 'number' | 'boolean' | 'select' | 'radio' | 'color' | 'date' | 'json' | 'textarea' | 'slider' | 'buttongroup';
+/**
+ * Control configuration
+ */
+export interface ControlConfig {
+    /** Control type */
+    type: ControlType;
+    /** Display title */
+    title?: string;
+    /** Options for select/radio */
+    options?: {
+        value: any;
+        label: string;
+    }[] | string[] | Record<string, string>;
+    /** Min value for number/slider */
+    min?: number;
+    /** Max value for number/slider */
+    max?: number;
+    /** Step for number/slider */
+    step?: number;
+}
+/**
+ * Story context for server operations
+ */
+export interface StoryContext {
+    /** Root directory */
+    root: string;
+    /** Resolved configuration */
+    config: ResolvedStoryConfig;
+    /** Discovered story files */
+    storyFiles: ServerStoryFile[];
+    /** Built tree structure */
+    tree?: ServerTree;
+    /** Mode (dev or build) */
+    mode: 'dev' | 'build';
+}
+/**
+ * Resolved story configuration with all defaults applied
+ */
+export interface ResolvedStoryConfig {
+    enabled: boolean;
+    outDir: string;
+    storyMatch: string[];
+    storyIgnored: string[];
+    tree: Required<StoryTreeConfig>;
+    theme: StoryThemeConfig;
+    responsivePresets: ResponsivePreset[];
+    backgroundPresets: BackgroundPreset[];
+    autoApplyContrastColor: boolean;
+    setupFile?: string;
+    port: number;
+}

package/dist/story/ui/code-panel.d.ts

@@ -0,0 +1,43 @@
+import type { AnalyzedComponent, ServerStoryFile } from '../types';
+/**
+ * Generate code panel HTML
+ */
+// eslint-disable-next-line pickier/no-unused-vars
+export declare function generateCodePanel(story: ServerStoryFile, component: AnalyzedComponent | null, activeTab?: CodePanelTab): string;
+/**
+ * Get source code for a component
+ */
+export declare function getComponentSource(filePath: string): Promise<string>;
+/**
+ * Get story code with current props
+ */
+export declare function getStoryCode(componentName: string, props: Record<string, any>): string;
+/**
+ * Get props as JSON
+ */
+export declare function getPropsJson(props: Record<string, any>): string;
+/**
+ * Apply syntax highlighting to code
+ * Uses simple regex-based highlighting without external deps
+ */
+export declare function highlightCode(code: string, language: string): string;
+/**
+ * Get syntax highlighting styles
+ */
+export declare function getHighlightStyles(): string;
+/**
+ * Get code panel styles
+ */
+export declare function getCodePanelStyles(): string;
+/**
+ * Copy code to clipboard (client-side)
+ */
+export declare function getCopyCodeScript(): string;
+/**
+ * Open in VS Code (client-side)
+ */
+export declare function getOpenInVSCodeScript(filePath: string): string;
+/**
+ * Code panel tabs
+ */
+export type CodePanelTab = 'source' | 'story' | 'compiled' | 'props';

package/dist/story/ui/code-panel.js

@@ -0,0 +1,175 @@
+import fs from "node:fs";
+export function generateCodePanel(story, component, activeTab = "source") {
+  return `
+    <div class="stx-code-panel">
+      <div class="stx-code-tabs">
+        <button class="${activeTab === "source" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('source')">Source</button>
+        <button class="${activeTab === "story" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('story')">Story</button>
+        <button class="${activeTab === "compiled" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('compiled')">Compiled</button>
+        <button class="${activeTab === "props" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('props')">Props</button>
+      </div>
+      <div class="stx-code-toolbar">
+        <button onclick="window.__stxStory.copyCode()" title="Copy code">\uD83D\uDCCB Copy</button>
+        <button onclick="window.__stxStory.openInVSCode()" title="Open in VS Code">\uD83D\uDCDD VS Code</button>
+      </div>
+      <div class="stx-code-content" id="code-content">
+        <!-- Content loaded dynamically -->
+      </div>
+    </div>
+  `;
+}
+export async function getComponentSource(filePath) {
+  try {
+    return await fs.promises.readFile(filePath, "utf-8");
+  } catch {
+    return "// Unable to read source file";
+  }
+}
+export function getStoryCode(componentName, props) {
+  const propsStr = Object.entries(props).map(([key, value]) => {
+    if (typeof value === "string")
+      return `${key}="${value}"`;
+    if (typeof value === "boolean")
+      return value ? key : `:${key}="false"`;
+    if (typeof value === "number")
+      return `:${key}="${value}"`;
+    return `:${key}="${JSON.stringify(value).replace(/"/g, "'")}"`;
+  }).join(`
+  `);
+  return `<${componentName}
+  ${propsStr}
+/>`;
+}
+export function getPropsJson(props) {
+  return JSON.stringify(props, null, 2);
+}
+export function highlightCode(code, language) {
+  let highlighted = escapeHtml(code);
+  if (language === "html" || language === "stx")
+    highlighted = highlighted.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="hl-tag">$2</span>').replace(/([\w-]+)(=)/g, '<span class="hl-attr">$1</span>$2').replace(/(&quot;[^&]*&quot;)/g, '<span class="hl-string">$1</span>').replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="hl-comment">$1</span>').replace(/(@\w+)/g, '<span class="hl-directive">$1</span>').replace(/(\{\{[^}]*\}\})/g, '<span class="hl-interpolation">$1</span>');
+  else if (language === "json")
+    highlighted = highlighted.replace(/(&quot;\w+&quot;)(:)/g, '<span class="hl-key">$1</span>$2').replace(/(: )(&quot;[^&]*&quot;)/g, '$1<span class="hl-string">$2</span>').replace(/(: )(\d+)/g, '$1<span class="hl-number">$2</span>').replace(/(true|false|null)/g, '<span class="hl-boolean">$1</span>');
+  else if (language === "typescript" || language === "javascript")
+    highlighted = highlighted.replace(/\b(const|let|var|function|return|if|else|for|while|class|interface|type|export|import|from|async|await)\b/g, '<span class="hl-keyword">$1</span>').replace(/(&apos;[^&]*&apos;|&quot;[^&]*&quot;|`[^`]*`)/g, '<span class="hl-string">$1</span>').replace(/\b(\d+)\b/g, '<span class="hl-number">$1</span>').replace(/(\/\/.*$)/gm, '<span class="hl-comment">$1</span>').replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="hl-comment">$1</span>');
+  return `<pre class="hl-code"><code>${highlighted}</code></pre>`;
+}
+export function getHighlightStyles() {
+  return `
+    .hl-code {
+      margin: 0;
+      padding: 16px;
+      overflow: auto;
+      font-family: 'SF Mono', Monaco, Consolas, monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      background: var(--bg-secondary);
+      border-radius: 4px;
+    }
+    .hl-code code {
+      font-family: inherit;
+    }
+    .hl-tag { color: #22863a; }
+    .hl-attr { color: #6f42c1; }
+    .hl-string { color: #032f62; }
+    .hl-comment { color: #6a737d; font-style: italic; }
+    .hl-directive { color: #d73a49; font-weight: 500; }
+    .hl-interpolation { color: #e36209; }
+    .hl-key { color: #005cc5; }
+    .hl-number { color: #005cc5; }
+    .hl-boolean { color: #d73a49; }
+    .hl-keyword { color: #d73a49; }
+
+    .dark .hl-tag { color: #85e89d; }
+    .dark .hl-attr { color: #b392f0; }
+    .dark .hl-string { color: #9ecbff; }
+    .dark .hl-comment { color: #6a737d; }
+    .dark .hl-directive { color: #f97583; }
+    .dark .hl-interpolation { color: #ffab70; }
+    .dark .hl-key { color: #79b8ff; }
+    .dark .hl-number { color: #79b8ff; }
+    .dark .hl-boolean { color: #f97583; }
+    .dark .hl-keyword { color: #f97583; }
+  `;
+}
+export function getCodePanelStyles() {
+  return `
+    .stx-code-panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-left: 1px solid var(--border);
+    }
+    .stx-code-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-secondary);
+    }
+    .stx-code-tabs button {
+      padding: 8px 16px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+      border-bottom: 2px solid transparent;
+    }
+    .stx-code-tabs button:hover {
+      color: var(--text);
+    }
+    .stx-code-tabs button.active {
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+    }
+    .stx-code-toolbar {
+      display: flex;
+      gap: 8px;
+      padding: 8px;
+      border-bottom: 1px solid var(--border);
+    }
+    .stx-code-toolbar button {
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .stx-code-toolbar button:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-code-content {
+      flex: 1;
+      overflow: auto;
+      padding: 0;
+    }
+    ${getHighlightStyles()}
+  `;
+}
+export function getCopyCodeScript() {
+  return `
+    window.__stxStory.copyCode = function() {
+      const codeEl = document.querySelector('.hl-code code');
+      if (codeEl) {
+        navigator.clipboard.writeText(codeEl.textContent || '');
+        // Show toast
+        const toast = document.createElement('div');
+        toast.className = 'stx-toast';
+        toast.textContent = 'Copied to clipboard!';
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 2000);
+      }
+    };
+  `;
+}
+export function getOpenInVSCodeScript(filePath) {
+  return `
+    window.__stxStory.openInVSCode = function() {
+      // Use VS Code URL scheme
+      window.open('vscode://file/${filePath}', '_blank');
+    };
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}

package/dist/story/ui/controls-panel.d.ts

@@ -0,0 +1,25 @@
+import type { AnalyzedComponent } from '../types';
+/**
+ * Create initial controls panel state
+ */
+export declare function createControlsPanelState(component: AnalyzedComponent | null): ControlsPanelState;
+/**
+ * Generate controls panel HTML
+ */
+export declare function generateControlsPanel(component: AnalyzedComponent | null, state: ControlsPanelState): string;
+/**
+ * Generate auto props disabled message
+ */
+export declare function generateAutoPropsDisabled(): string;
+/**
+ * Get controls panel styles
+ */
+export declare function getControlsPanelStyles(): string;
+/**
+ * Controls panel state
+ */
+export declare interface ControlsPanelState {
+  collapsed: boolean
+  values: Record<string, any>
+  filter: string
+}