@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/services/CodeGenerator.js

@@ -0,0 +1,359 @@
+/**
+ * CodeGenerator - Generates clean story code from visual edits
+ */
+export class CodeGenerator {
+    constructor(options = {}) {
+        this.options = {
+            framework: 'react',
+            includeImports: true,
+            includeHelpers: true,
+            prettier: true,
+            indentSize: 2,
+            useTypeScript: true,
+            ...options
+        };
+        this.imports = new Set();
+        this.helperImports = new Set();
+        this.componentMap = new Map();
+    }
+    /**
+     * Generate story code from components
+     */
+    generateStoryCode(components, rootId, storyName = 'Generated') {
+        this.componentMap = components;
+        this.imports.clear();
+        this.helperImports.clear();
+        const root = components.get(rootId);
+        if (!root) {
+            throw new Error('Root component not found');
+        }
+        // Analyze components to determine imports
+        this.analyzeImports(root);
+        // Generate the story code
+        const parts = [];
+        // Add imports
+        if (this.options.includeImports) {
+            parts.push(this.generateImports());
+        }
+        // Add story metadata
+        parts.push(this.generateStoryMeta(storyName));
+        // Add the story component
+        parts.push(this.generateStoryComponent(root, storyName));
+        return parts.filter(Boolean).join('\n\n');
+    }
+    /**
+     * Generate JSX code for a component tree
+     */
+    generateComponentCode(component, indent = 0) {
+        const indentStr = this.getIndent(indent);
+        const props = this.generateProps(component);
+        const hasChildren = component.children && component.children.length > 0;
+        const hasTextContent = component.textContent !== undefined && component.textContent !== '';
+        // Handle layout helpers specially
+        if (component.isHelper) {
+            return this.generateHelperCode(component, indent);
+        }
+        // Determine component name
+        const componentName = this.getComponentName(component.type);
+        // Build opening tag
+        let code = `${indentStr}<${componentName}`;
+        if (props) {
+            code += props.includes('\n')
+                ? `\n${this.getIndent(indent + 1)}${props}\n${indentStr}`
+                : ` ${props}`;
+        }
+        // Self-closing tag if no children
+        if (!hasChildren && !hasTextContent) {
+            code += ' />';
+            return code;
+        }
+        code += '>';
+        // Add text content
+        if (hasTextContent) {
+            code += component.textContent;
+        }
+        // Add children
+        if (hasChildren) {
+            if (hasTextContent) {
+                code += '\n';
+            }
+            else {
+                code += '\n';
+            }
+            const childrenCode = component.children
+                .map(childId => {
+                const childComponent = this.componentMap.get(childId);
+                return childComponent ? this.generateComponentCode(childComponent, indent + 1) : '';
+            })
+                .filter(Boolean)
+                .join('\n');
+            code += childrenCode;
+            code += `\n${indentStr}`;
+        }
+        // Closing tag
+        code += `</${componentName}>`;
+        return code;
+    }
+    /**
+     * Generate props string for a component
+     */
+    generateProps(component) {
+        const props = [];
+        // Add style prop if present
+        if (component.style && Object.keys(component.style).length > 0) {
+            const styleStr = this.generateStyleProp(component.style);
+            props.push(`style=${styleStr}`);
+        }
+        // Add other props
+        if (component.props) {
+            Object.entries(component.props).forEach(([key, value]) => {
+                if (key === 'style')
+                    return; // Already handled
+                const propStr = this.generatePropValue(key, value);
+                if (propStr) {
+                    props.push(propStr);
+                }
+            });
+        }
+        return props.join(' ');
+    }
+    /**
+     * Generate style prop object
+     */
+    generateStyleProp(style) {
+        const entries = Object.entries(style)
+            .filter(([_, value]) => value !== undefined && value !== '')
+            .map(([key, value]) => {
+            const formattedKey = key;
+            const formattedValue = typeof value === 'string' && !value.match(/^\d+$/)
+                ? `'${value}'`
+                : value;
+            return `${formattedKey}: ${formattedValue}`;
+        });
+        if (entries.length === 0)
+            return '{}';
+        if (entries.length === 1) {
+            return `{ ${entries[0]} }`;
+        }
+        return `{\n${entries.map(e => `    ${e}`).join(',\n')}\n  }`;
+    }
+    /**
+     * Generate prop value string
+     */
+    generatePropValue(key, value) {
+        if (value === undefined || value === null)
+            return '';
+        // Boolean props
+        if (typeof value === 'boolean') {
+            return value ? key : `${key}={false}`;
+        }
+        // String props
+        if (typeof value === 'string') {
+            return `${key}="${value}"`;
+        }
+        // Number props
+        if (typeof value === 'number') {
+            return `${key}={${value}}`;
+        }
+        // Object/Array props
+        if (typeof value === 'object') {
+            const jsonStr = JSON.stringify(value, null, 2);
+            return `${key}={${jsonStr}}`;
+        }
+        return '';
+    }
+    /**
+     * Generate code for layout helpers
+     */
+    generateHelperCode(component, indent) {
+        const indentStr = this.getIndent(indent);
+        const helperName = component.type;
+        // Track helper import
+        this.helperImports.add(helperName);
+        // Generate props specific to helpers
+        const props = [];
+        // Extract spacing props from style
+        if (component.style) {
+            const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, ...otherStyles } = component.style;
+            // Add spacing props
+            if (padding !== undefined)
+                props.push(`p="${padding}"`);
+            if (paddingTop !== undefined)
+                props.push(`pt="${paddingTop}"`);
+            if (paddingRight !== undefined)
+                props.push(`pr="${paddingRight}"`);
+            if (paddingBottom !== undefined)
+                props.push(`pb="${paddingBottom}"`);
+            if (paddingLeft !== undefined)
+                props.push(`pl="${paddingLeft}"`);
+            if (margin !== undefined)
+                props.push(`m="${margin}"`);
+            if (marginTop !== undefined)
+                props.push(`mt="${marginTop}"`);
+            if (marginRight !== undefined)
+                props.push(`mr="${marginRight}"`);
+            if (marginBottom !== undefined)
+                props.push(`mb="${marginBottom}"`);
+            if (marginLeft !== undefined)
+                props.push(`ml="${marginLeft}"`);
+            // Add layout props for Flex/Stack/Grid
+            if (helperName === 'Flex' || helperName === 'Stack' || helperName === 'HStack') {
+                if (otherStyles.gap)
+                    props.push(`gap="${otherStyles.gap}"`);
+                if (otherStyles.flexDirection)
+                    props.push(`direction="${otherStyles.flexDirection}"`);
+                if (otherStyles.justifyContent) {
+                    const justify = otherStyles.justifyContent.replace('flex-', '').replace('space-', '');
+                    props.push(`justify="${justify}"`);
+                }
+                if (otherStyles.alignItems) {
+                    const align = otherStyles.alignItems.replace('flex-', '');
+                    props.push(`align="${align}"`);
+                }
+            }
+            if (helperName === 'Grid') {
+                if (otherStyles.gridTemplateColumns) {
+                    const cols = otherStyles.gridTemplateColumns.match(/repeat\((\d+)/)?.[1] || otherStyles.gridTemplateColumns;
+                    props.push(`columns={${cols}}`);
+                }
+                if (otherStyles.gap)
+                    props.push(`gap="${otherStyles.gap}"`);
+            }
+            // Add remaining styles
+            const remainingStyles = Object.entries(otherStyles)
+                .filter(([key]) => !['gap', 'flexDirection', 'justifyContent', 'alignItems', 'gridTemplateColumns'].includes(key));
+            if (remainingStyles.length > 0) {
+                const styleObj = Object.fromEntries(remainingStyles);
+                props.push(`style=${this.generateStyleProp(styleObj)}`);
+            }
+        }
+        const hasChildren = component.children && component.children.length > 0;
+        const propsStr = props.join(' ');
+        if (!hasChildren) {
+            return `${indentStr}<${helperName}${propsStr ? ' ' + propsStr : ''} />`;
+        }
+        let code = `${indentStr}<${helperName}${propsStr ? ' ' + propsStr : ''}>`;
+        code += '\n';
+        const childrenCode = component.children
+            .map(childId => {
+            const childComponent = this.componentMap.get(childId);
+            return childComponent ? this.generateComponentCode(childComponent, indent + 1) : '';
+        })
+            .filter(Boolean)
+            .join('\n');
+        code += childrenCode;
+        code += `\n${indentStr}</${helperName}>`;
+        return code;
+    }
+    /**
+     * Analyze component tree to determine imports
+     */
+    analyzeImports(component) {
+        // Add component to imports
+        if (!component.isHelper) {
+            this.imports.add(component.type);
+        }
+        else {
+            this.helperImports.add(component.type);
+        }
+        // Recursively analyze children
+        if (component.children) {
+            component.children.forEach(childId => {
+                const childComponent = this.componentMap.get(childId);
+                if (childComponent) {
+                    this.analyzeImports(childComponent);
+                }
+            });
+        }
+    }
+    /**
+     * Generate import statements
+     */
+    generateImports() {
+        const importLines = [];
+        // React import
+        importLines.push("import React from 'react';");
+        // Helper imports (if any)
+        if (this.helperImports.size > 0 && this.options.includeHelpers) {
+            const helpers = Array.from(this.helperImports).sort();
+            importLines.push(`import { ${helpers.join(', ')} } from '../components/LayoutHelpers';`);
+        }
+        // Component imports (grouped by type)
+        const componentImports = Array.from(this.imports).sort();
+        if (componentImports.length > 0) {
+            // Group by common patterns
+            const designSystemImports = componentImports.filter(c => ['Button', 'Input', 'Select', 'Card', 'Badge', 'Avatar'].includes(c));
+            const layoutImports = componentImports.filter(c => ['Container', 'Box', 'Flex', 'Grid'].includes(c) && !this.helperImports.has(c));
+            const textImports = componentImports.filter(c => ['Text', 'Heading', 'Image'].includes(c));
+            if (designSystemImports.length > 0) {
+                importLines.push(`// Design system components`);
+                importLines.push(`import { ${designSystemImports.join(', ')} } from '@your-design-system/react';`);
+            }
+            if (layoutImports.length > 0) {
+                importLines.push(`// Layout components`);
+                importLines.push(`import { ${layoutImports.join(', ')} } from '@your-design-system/layout';`);
+            }
+            if (textImports.length > 0) {
+                importLines.push(`// Typography components`);
+                importLines.push(`import { ${textImports.join(', ')} } from '@your-design-system/typography';`);
+            }
+        }
+        return importLines.join('\n');
+    }
+    /**
+     * Generate story metadata
+     */
+    generateStoryMeta(storyName) {
+        return `export default {
+  title: 'Generated/${storyName}',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};`;
+    }
+    /**
+     * Generate story component
+     */
+    generateStoryComponent(root, storyName) {
+        const componentCode = this.generateComponentCode(root, 1);
+        return `export const ${this.toPascalCase(storyName)} = () => (
+${componentCode}
+);`;
+    }
+    /**
+     * Get component name (handle special cases)
+     */
+    getComponentName(type) {
+        // Map common HTML elements
+        const htmlMap = {
+            'Container': 'div',
+            'Text': 'p',
+            'Heading': 'h2',
+            'Image': 'img',
+            'List': 'ul',
+            'ListItem': 'li',
+            'Link': 'a'
+        };
+        // Check if it's a helper
+        if (this.helperImports.has(type)) {
+            return type;
+        }
+        // Return mapped HTML element or original type
+        return htmlMap[type] || type;
+    }
+    /**
+     * Get indent string
+     */
+    getIndent(level) {
+        return ' '.repeat(this.options.indentSize * level);
+    }
+    /**
+     * Convert string to PascalCase
+     */
+    toPascalCase(str) {
+        return str
+            .replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : '')
+            .replace(/^./, c => c.toUpperCase());
+    }
+}
+//# sourceMappingURL=CodeGenerator.js.map

package/dist/playground/services/CodeGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeGenerator.js","sourceRoot":"","sources":["../../../playground/services/CodeGenerator.ts"],"names":[],"mappings":"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"}

package/dist/playground/services/DragDropManager.d.ts

@@ -0,0 +1,95 @@
+/**
+ * DragDropManager - Manages drag and drop operations in the playground
+ */
+import type { DraggedItem, DropZone, DropResult } from '../types';
+export interface DragDropValidation {
+    canDrop: boolean;
+    reason?: string;
+    targetZone?: DropZone;
+}
+export declare class DragDropManager {
+    private store;
+    private activeDropZone;
+    constructor(store: any);
+    /**
+     * Start a drag operation
+     */
+    startDrag(item: DraggedItem, event?: DragEvent): void;
+    /**
+     * Update drag position and find active drop zone
+     */
+    updateDrag(event: DragEvent): void;
+    /**
+     * End drag operation and perform drop if valid
+     */
+    endDrag(overId?: string): DropResult | null;
+    /**
+     * Cancel drag operation
+     */
+    cancelDrag(): void;
+    /**
+     * Register a drop zone
+     */
+    registerDropZone(zone: DropZone): void;
+    /**
+     * Unregister a drop zone
+     */
+    unregisterDropZone(id: string): void;
+    /**
+     * Update drop zone properties
+     */
+    updateDropZone(id: string, updates: Partial<DropZone>): void;
+    /**
+     * Check if item can be dropped in zone
+     */
+    canDrop(item: DraggedItem, zone: DropZone): boolean;
+    /**
+     * Validate drop operation
+     */
+    validateDrop(item: DraggedItem, zone: DropZone): DragDropValidation;
+    /**
+     * Get drop zone at screen coordinates
+     */
+    getDropZoneAtPoint(x: number, y: number): DropZone | null;
+    /**
+     * Get all active drop zones
+     */
+    getActiveDropZones(): DropZone[];
+    /**
+     * Get nearest drop zone to coordinates
+     */
+    getNearestDropZone(x: number, y: number): DropZone | null;
+    /**
+     * Get insertion index for drop position
+     */
+    getInsertionIndex(zone: DropZone, y: number): number;
+    /**
+     * Perform the drop operation
+     */
+    private performDrop;
+    /**
+     * Get default props for component type
+     */
+    private getDefaultProps;
+    /**
+     * Clean up after drag operation
+     */
+    private cleanupDrag;
+    /**
+     * Update drop zone DOM rectangles
+     */
+    private updateDropZoneRects;
+    /**
+     * Check if point is inside rectangle
+     */
+    private pointInRect;
+    /**
+     * Check if one component is a descendant of another
+     */
+    private isDescendant;
+    /**
+     * Generate unique component ID
+     */
+    private generateComponentId;
+}
+//# sourceMappingURL=DragDropManager.d.ts.map

package/dist/playground/services/DragDropManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../playground/services/DragDropManager.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EACR,UAAU,EAEX,MAAM,UAAU,CAAC;AAGlB,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,QAAQ,CAAC;CACvB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,KAAK,CAAwB;IACrC,OAAO,CAAC,cAAc,CAAyB;gBAEnC,KAAK,EAAE,GAAG;IAItB;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI;IAsBrD;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IA4ClC;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI;IAwB3C;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAItC;;OAEG;IACH,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIpC;;OAEG;IACH,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;IAoCnD;;OAEG;IACH,YAAY,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,GAAG,kBAAkB;IAwCnE;;OAEG;IACH,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI;IA4BzD;;OAEG;IACH,kBAAkB,IAAI,QAAQ,EAAE;IAIhC;;OAEG;IACH,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI;IAoBzD;;OAEG;IACH,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IA2CpD;;OAEG;IACH,OAAO,CAAC,WAAW;IA0CnB;;OAEG;IACH,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,WAAW;IAwBnB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IA8B3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,OAAO,CAAC,YAAY;IAepB;;OAEG;IACH,OAAO,CAAC,mBAAmB;CAG5B"}