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

package/dist/story/presets.js

@@ -0,0 +1,289 @@
+import fs from "node:fs";
+import path from "node:path";
+const PRESETS_FILE = ".stx/story/presets.json", STORAGE_VERSION = 1, MAX_RECENT = 10;
+
+export class PresetsManager {
+  storage;
+  storagePath;
+  dirty = !1;
+  constructor(rootDir) {
+    this.storagePath = path.join(rootDir, PRESETS_FILE);
+    this.storage = this.loadStorage();
+  }
+  loadStorage() {
+    try {
+      const content = fs.readFileSync(this.storagePath, "utf-8"), data = JSON.parse(content);
+      if (data.version !== STORAGE_VERSION)
+        return this.migrateStorage(data);
+      return data;
+    } catch {
+      return {
+        version: STORAGE_VERSION,
+        presets: [],
+        recentIds: []
+      };
+    }
+  }
+  migrateStorage(data) {
+    return {
+      version: STORAGE_VERSION,
+      presets: data.presets || [],
+      recentIds: data.recentIds || []
+    };
+  }
+  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;
+  }
+  createPreset(name, props, options = {}) {
+    const preset = {
+      id: generateId(),
+      name,
+      description: options.description,
+      props,
+      componentId: options.componentId,
+      created: Date.now(),
+      usageCount: 0,
+      tags: options.tags
+    };
+    this.storage.presets.push(preset);
+    this.dirty = !0;
+    return preset;
+  }
+  getPreset(id) {
+    return this.storage.presets.find((p) => p.id === id);
+  }
+  getAllPresets() {
+    return [...this.storage.presets];
+  }
+  getPresetsForComponent(componentId) {
+    return this.storage.presets.filter((p) => !p.componentId || p.componentId === componentId);
+  }
+  getRecentPresets() {
+    return this.storage.recentIds.map((id) => this.getPreset(id)).filter((p) => p !== void 0);
+  }
+  usePreset(id) {
+    const preset = this.getPreset(id);
+    if (!preset)
+      return;
+    preset.lastUsed = Date.now();
+    preset.usageCount++;
+    this.storage.recentIds = [
+      id,
+      ...this.storage.recentIds.filter((i) => i !== id)
+    ].slice(0, MAX_RECENT);
+    this.dirty = !0;
+    return preset;
+  }
+  updatePreset(id, updates) {
+    const preset = this.getPreset(id);
+    if (!preset)
+      return;
+    Object.assign(preset, updates);
+    this.dirty = !0;
+    return preset;
+  }
+  deletePreset(id) {
+    const index = this.storage.presets.findIndex((p) => p.id === id);
+    if (index === -1)
+      return !1;
+    this.storage.presets.splice(index, 1);
+    this.storage.recentIds = this.storage.recentIds.filter((i) => i !== id);
+    this.dirty = !0;
+    return !0;
+  }
+  searchPresets(query) {
+    const lowerQuery = query.toLowerCase();
+    return this.storage.presets.filter((preset) => {
+      if (preset.name.toLowerCase().includes(lowerQuery))
+        return !0;
+      if (preset.description?.toLowerCase().includes(lowerQuery))
+        return !0;
+      if (preset.tags?.some((t) => t.toLowerCase().includes(lowerQuery)))
+        return !0;
+      return !1;
+    });
+  }
+  getMostUsedPresets(limit = 5) {
+    return [...this.storage.presets].sort((a, b) => b.usageCount - a.usageCount).slice(0, limit);
+  }
+  exportPresets(ids) {
+    const presets = ids ? this.storage.presets.filter((p) => ids.includes(p.id)) : this.storage.presets;
+    return JSON.stringify({ presets }, null, 2);
+  }
+  importPresets(json, overwrite = !1) {
+    const data = JSON.parse(json);
+    let imported = 0;
+    for (const preset of data.presets) {
+      const existing = this.storage.presets.find((p) => p.id === preset.id);
+      if (existing && !overwrite)
+        continue;
+      if (existing)
+        Object.assign(existing, preset);
+      else
+        this.storage.presets.push(preset);
+      imported++;
+    }
+    if (imported > 0)
+      this.dirty = !0;
+    return imported;
+  }
+}
+function generateId() {
+  return `preset-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+export function getPresetsPanelHtml(presets) {
+  return `
+    <div class="presets-panel">
+      <div class="presets-header">
+        <h3>Presets</h3>
+        <button class="preset-save-btn" onclick="saveCurrentAsPreset()">+ Save Current</button>
+      </div>
+      <div class="presets-list">
+        ${presets.map((p) => `
+    <div class="preset-item" data-preset-id="${p.id}">
+      <div class="preset-info">
+        <div class="preset-name">${p.name}</div>
+        ${p.description ? `<div class="preset-desc">${p.description}</div>` : ""}
+      </div>
+      <div class="preset-actions">
+        <button class="preset-apply" onclick="applyPreset('${p.id}')">Apply</button>
+        <button class="preset-delete" onclick="deletePreset('${p.id}')">\xD7</button>
+      </div>
+    </div>
+  `).join("") || '<div class="presets-empty">No presets saved</div>'}
+      </div>
+    </div>
+  `;
+}
+export function getPresetsPanelStyles() {
+  return `
+    .presets-panel {
+      padding: 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .presets-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .presets-header h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .preset-save-btn {
+      padding: 4px 8px;
+      font-size: 12px;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .presets-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .preset-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      background: var(--bg);
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+    .preset-name {
+      font-weight: 500;
+      font-size: 13px;
+    }
+    .preset-desc {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .preset-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .preset-apply {
+      padding: 4px 8px;
+      font-size: 11px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .preset-delete {
+      padding: 4px 8px;
+      font-size: 11px;
+      background: transparent;
+      border: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+    }
+    .preset-delete:hover {
+      color: #ef4444;
+    }
+    .presets-empty {
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 13px;
+      padding: 20px;
+    }
+  `;
+}
+export function getPresetsScript() {
+  return `
+<script>
+window.__stxPresets = {
+  async saveCurrentAsPreset() {
+    const name = prompt('Preset name:');
+    if (!name) return;
+
+    const props = window.__stxProps || {};
+    const storyId = window.__stxStory?.currentStoryId;
+
+    const response = await fetch('/api/presets', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, props, componentId: storyId })
+    });
+
+    if (response.ok) {
+      window.__stxStory?.refreshPresets?.();
+    }
+  },
+
+  async applyPreset(id) {
+    const response = await fetch('/api/presets/' + id + '/use', { method: 'POST' });
+    const preset = await response.json();
+
+    if (preset.props) {
+      window.dispatchEvent(new CustomEvent('stx:props-change', {
+        detail: { props: preset.props }
+      }));
+    }
+  },
+
+  async deletePreset(id) {
+    if (!confirm('Delete this preset?')) return;
+
+    await fetch('/api/presets/' + id, { method: 'DELETE' });
+    window.__stxStory?.refreshPresets?.();
+  }
+};
+
+// Expose to global scope
+window.saveCurrentAsPreset = window.__stxPresets.saveCurrentAsPreset;
+window.applyPreset = window.__stxPresets.applyPreset;
+window.deletePreset = window.__stxPresets.deletePreset;
+</script>
+`;
+}

package/dist/story/props-validation.d.ts

@@ -0,0 +1,45 @@
+import type { StoryAnalyzedProp } from './types';
+/**
+ * Validate props against their definitions
+ */
+export declare function validateProps(props: Record<string, any>, definitions: StoryAnalyzedProp[]): ValidationResult;
+/**
+ * Generate validation script for client-side
+ */
+export declare function getValidationScript(definitions: StoryAnalyzedProp[]): string;
+/**
+ * Format validation result for display
+ */
+export declare function formatValidationResult(result: ValidationResult): string;
+/**
+ * Generate HTML for validation errors display
+ */
+export declare function generateValidationErrorsHTML(result: ValidationResult): string;
+/**
+ * Get validation panel styles
+ */
+export declare function getValidationStyles(): string;
+/**
+ * Validation result
+ */
+export declare interface ValidationResult {
+  valid: boolean
+  errors: ValidationError[]
+  warnings: ValidationWarning[]
+}
+/**
+ * Validation error
+ */
+export declare interface ValidationError {
+  prop: string
+  message: string
+  expected?: string
+  actual?: string
+}
+/**
+ * Validation warning
+ */
+export declare interface ValidationWarning {
+  prop: string
+  message: string
+}

package/dist/story/props-validation.js

@@ -0,0 +1,215 @@
+export function validateProps(props, definitions) {
+  const errors = [], warnings = [];
+  for (const def of definitions)
+    if (def.required && !(def.name in props))
+      errors.push({
+        prop: def.name,
+        message: `Required prop "${def.name}" is missing`,
+        expected: def.type
+      });
+  for (const [name, value] of Object.entries(props)) {
+    const def = definitions.find((d) => d.name === name);
+    if (!def) {
+      warnings.push({
+        prop: name,
+        message: `Unknown prop "${name}" - not defined in component`
+      });
+      continue;
+    }
+    const typeError = validateType(value, def.type, def.options);
+    if (typeError)
+      errors.push({
+        prop: name,
+        message: typeError,
+        expected: def.type,
+        actual: typeof value
+      });
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings
+  };
+}
+function validateType(value, type, options) {
+  if (value === null || value === void 0) {
+    if (type.includes("null") || type.includes("undefined") || type.includes("?"))
+      return null;
+    return `Expected ${type}, got ${value === null ? "null" : "undefined"}`;
+  }
+  const actualType = typeof value, normalizedType = type.toLowerCase().trim();
+  if (normalizedType.includes("|")) {
+    const types = normalizedType.split("|").map((t) => t.trim());
+    for (const t of types)
+      if (validateType(value, t, options) === null)
+        return null;
+    return `Expected one of ${types.join(" | ")}, got ${actualType}`;
+  }
+  if (options && options.length > 0) {
+    if (!options.includes(String(value)))
+      return `Expected one of [${options.join(", ")}], got "${value}"`;
+    return null;
+  }
+  switch (normalizedType) {
+    case "string":
+      if (actualType !== "string")
+        return `Expected string, got ${actualType}`;
+      break;
+    case "number":
+      if (actualType !== "number" || Number.isNaN(value))
+        return `Expected number, got ${actualType}`;
+      break;
+    case "boolean":
+      if (actualType !== "boolean")
+        return `Expected boolean, got ${actualType}`;
+      break;
+    case "array":
+    case "any[]":
+    case "array<any>":
+      if (!Array.isArray(value))
+        return `Expected array, got ${actualType}`;
+      break;
+    case "object":
+    case "record<string, any>":
+      if (actualType !== "object" || Array.isArray(value))
+        return `Expected object, got ${actualType}`;
+      break;
+    case "function":
+      if (actualType !== "function")
+        return `Expected function, got ${actualType}`;
+      break;
+    case "any":
+      break;
+    default:
+      if (normalizedType.startsWith("array<") || normalizedType.endsWith("[]")) {
+        if (!Array.isArray(value))
+          return `Expected array, got ${actualType}`;
+      }
+  }
+  return null;
+}
+export function getValidationScript(definitions) {
+  return `
+    window.__stxValidateProps = function(props) {
+      const definitions = ${JSON.stringify(definitions)};
+      const errors = [];
+      const warnings = [];
+
+      // Check required props
+      for (const def of definitions) {
+        if (def.required && !(def.name in props)) {
+          errors.push({
+            prop: def.name,
+            message: 'Required prop "' + def.name + '" is missing',
+            expected: def.type
+          });
+        }
+      }
+
+      // Validate provided props
+      for (const [name, value] of Object.entries(props)) {
+        const def = definitions.find(d => d.name === name);
+
+        if (!def) {
+          warnings.push({
+            prop: name,
+            message: 'Unknown prop "' + name + '"'
+          });
+          continue;
+        }
+
+        // Basic type validation
+        const actualType = typeof value;
+        const expectedType = def.type.toLowerCase();
+
+        if (expectedType === 'string' && actualType !== 'string') {
+          errors.push({ prop: name, message: 'Expected string, got ' + actualType });
+        }
+else if (expectedType === 'number' && actualType !== 'number') {
+          errors.push({ prop: name, message: 'Expected number, got ' + actualType });
+        }
+else if (expectedType === 'boolean' && actualType !== 'boolean') {
+          errors.push({ prop: name, message: 'Expected boolean, got ' + actualType });
+        }
+else if (expectedType === 'array' && !Array.isArray(value)) {
+          errors.push({ prop: name, message: 'Expected array, got ' + actualType });
+        }
+
+        // Check options
+        if (def.options && def.options.length > 0) {
+          if (!def.options.includes(String(value))) {
+            errors.push({
+              prop: name,
+              message: 'Expected one of [' + def.options.join(', ') + '], got "' + value + '"'
+            });
+          }
+        }
+      }
+
+      return { valid: errors.length === 0, errors, warnings };
+    };
+  `;
+}
+export function formatValidationResult(result) {
+  const lines = [];
+  if (result.valid)
+    lines.push("\u2713 All props are valid");
+  else {
+    lines.push("\u2717 Validation failed:");
+    for (const error of result.errors)
+      lines.push(`  \u2022 ${error.prop}: ${error.message}`);
+  }
+  if (result.warnings.length > 0) {
+    lines.push("");
+    lines.push("Warnings:");
+    for (const warning of result.warnings)
+      lines.push(`  \u26A0 ${warning.prop}: ${warning.message}`);
+  }
+  return lines.join(`
+`);
+}
+export function generateValidationErrorsHTML(result) {
+  if (result.valid && result.warnings.length === 0)
+    return "";
+  const errorItems = result.errors.map((e) => `
+    <div class="validation-error">
+      <strong>${e.prop}:</strong> ${e.message}
+    </div>
+  `).join(""), warningItems = result.warnings.map((w) => `
+    <div class="validation-warning">
+      <strong>${w.prop}:</strong> ${w.message}
+    </div>
+  `).join("");
+  return `
+    <div class="stx-validation-panel ${result.valid ? "warnings-only" : "has-errors"}">
+      ${errorItems}
+      ${warningItems}
+    </div>
+  `;
+}
+export function getValidationStyles() {
+  return `
+    .stx-validation-panel {
+      padding: 12px;
+      margin: 8px 0;
+      border-radius: 4px;
+      font-size: 13px;
+    }
+    .stx-validation-panel.has-errors {
+      background: #fee2e2;
+      border: 1px solid #ef4444;
+    }
+    .stx-validation-panel.warnings-only {
+      background: #fef3c7;
+      border: 1px solid #f59e0b;
+    }
+    .validation-error {
+      color: #dc2626;
+      margin-bottom: 4px;
+    }
+    .validation-warning {
+      color: #d97706;
+      margin-bottom: 4px;
+    }
+  `;
+}

package/dist/story/renderer.d.ts

@@ -0,0 +1,69 @@
+/**
+ * STX Story - Component Renderer
+ * Real component rendering using the STX process module
+ */
+import type { ServerStoryFile, StoryContext } from './types';
+/**
+ * Story render options
+ */
+export interface StoryRenderOptions {
+    /** Props to pass to the component */
+    props?: Record<string, any>;
+    /** Slots content */
+    slots?: Record<string, string>;
+    /** Include global styles */
+    includeStyles?: boolean;
+    /** Include Css CSS */
+    includeCss?: boolean;
+}
+/**
+ * Story render result
+ */
+export interface StoryRenderResult {
+    /** Rendered HTML */
+    html: string;
+    /** CSS extracted from component */
+    css: string;
+    /** JavaScript extracted from component */
+    js: string;
+    /** Errors during rendering */
+    errors: string[];
+    /** Render duration in ms */
+    duration: number;
+}
+/**
+ * Render a story component with props
+ */
+export declare function renderStoryComponent(ctx: StoryContext, componentPath: string, options?: StoryRenderOptions): Promise<StoryRenderResult>;
+/**
+ * Render a story variant
+ */
+export declare function renderStoryVariant(ctx: StoryContext, story: ServerStoryFile, variantId: string, props?: Record<string, any>): Promise<StoryRenderResult>;
+/**
+ * Render an inline template string
+ */
+export declare function renderInlineTemplate(ctx: StoryContext, template: string, props?: Record<string, any>): Promise<StoryRenderResult>;
+/**
+ * Clear the story component cache
+ */
+export declare function clearStoryCache(): void;
+/**
+ * Get cache statistics
+ */
+export declare function getCacheStats(): {
+    size: number;
+    entries: string[];
+};
+/**
+ * Preload components into cache
+ */
+export declare function preloadComponents(paths: string[]): Promise<number>;
+/**
+ * Generate preview HTML document
+ */
+export declare function generatePreviewDocument(result: StoryRenderResult, options?: {
+    title?: string;
+    theme?: 'light' | 'dark';
+    background?: string;
+    cssCss?: string;
+}): string;