@tpitre/story-ui 2.8.0 → 3.0.0

package/dist/playground/stories/PlaygroundProperties.stories.js

@@ -0,0 +1,342 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Storybook stories for testing Properties Panel functionality
+ */
+import React from 'react';
+import { Playground } from '../components/Playground/Playground';
+import { usePlaygroundStore } from '../store/playgroundStore';
+const meta = {
+    title: 'StoryUI/Playground/Properties',
+    component: Playground,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+// Helper to initialize with components for testing properties
+const initializeWithPropertiesTest = () => {
+    const store = usePlaygroundStore.getState();
+    // Clear existing
+    store.components.clear();
+    // Root container
+    store.addComponent({
+        id: 'root',
+        type: 'Container',
+        displayName: 'Root Container',
+        props: {
+            style: {
+                padding: '32px',
+                minHeight: '100vh',
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+            }
+        },
+        children: []
+    });
+    // Card with various styles
+    store.addComponent({
+        id: 'card1',
+        type: 'Card',
+        displayName: 'Styled Card',
+        parentId: 'root',
+        props: {
+            style: {
+                padding: '24px',
+                margin: '16px',
+                background: 'white',
+                borderRadius: '12px',
+                boxShadow: '0 10px 40px rgba(0, 0, 0, 0.15)',
+                maxWidth: '600px'
+            }
+        },
+        children: []
+    });
+    // Heading
+    store.addComponent({
+        id: 'heading1',
+        type: 'Heading',
+        displayName: 'Title',
+        parentId: 'card1',
+        textContent: 'Properties Panel Demo',
+        props: {
+            style: {
+                fontSize: '28px',
+                fontWeight: 'bold',
+                color: '#1a202c',
+                marginBottom: '16px'
+            }
+        }
+    });
+    // Text with spacing
+    store.addComponent({
+        id: 'text1',
+        type: 'Text',
+        displayName: 'Description',
+        parentId: 'card1',
+        textContent: 'Click on any component to edit its properties. Try adjusting spacing, colors, typography, and layout properties.',
+        props: {
+            style: {
+                fontSize: '16px',
+                lineHeight: '1.6',
+                color: '#4a5568',
+                marginBottom: '24px'
+            }
+        }
+    });
+    // Flex container
+    store.addComponent({
+        id: 'flex1',
+        type: 'HStack',
+        displayName: 'Button Group',
+        parentId: 'card1',
+        props: {
+            style: {
+                display: 'flex',
+                gap: '12px',
+                justifyContent: 'center',
+                flexWrap: 'wrap'
+            }
+        },
+        children: []
+    });
+    // Buttons with different styles
+    store.addComponent({
+        id: 'button1',
+        type: 'Button',
+        displayName: 'Primary Button',
+        parentId: 'flex1',
+        textContent: 'Primary',
+        props: {
+            style: {
+                padding: '12px 24px',
+                background: '#667eea',
+                color: 'white',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer',
+                transition: 'all 0.3s'
+            }
+        }
+    });
+    store.addComponent({
+        id: 'button2',
+        type: 'Button',
+        displayName: 'Secondary Button',
+        parentId: 'flex1',
+        textContent: 'Secondary',
+        props: {
+            style: {
+                padding: '12px 24px',
+                background: 'transparent',
+                color: '#667eea',
+                border: '2px solid #667eea',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer'
+            }
+        }
+    });
+    // Build tree structure
+    const root = store.components.get('root');
+    const card = store.components.get('card1');
+    const heading = store.components.get('heading1');
+    const text = store.components.get('text1');
+    const flex = store.components.get('flex1');
+    const button1 = store.components.get('button1');
+    const button2 = store.components.get('button2');
+    if (root && card && heading && text && flex && button1 && button2) {
+        flex.children = ['button1', 'button2'];
+        card.children = ['heading1', 'text1', 'flex1'];
+        root.children = ['card1'];
+        store.components.set('flex1', flex);
+        store.components.set('card1', card);
+        store.components.set('root', root);
+    }
+    // Set mode and open properties
+    store.setMode('edit');
+    store.setSidebarTab('components');
+    store.togglePropertiesPanel(); // Open the panel
+    // Select the card to show properties
+    store.selectComponent('card1');
+};
+export const SpacingEditor = {
+    render: () => {
+        React.useEffect(() => {
+            initializeWithPropertiesTest();
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Spacing Editor (Priority Feature)',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Test the spacing editor - the top priority feature. Select components and adjust margin/padding with visual feedback and linked/unlinked modes.'
+            }
+        }
+    }
+};
+export const AllPropertyTypes = {
+    render: () => {
+        React.useEffect(() => {
+            initializeWithPropertiesTest();
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'All Property Types',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Test all property editor types: text, number, color, select, boolean, and spacing. Click different components to see various property types.'
+            }
+        }
+    }
+};
+export const RealTimeUpdates = {
+    render: () => {
+        React.useEffect(() => {
+            const store = usePlaygroundStore.getState();
+            // Simple setup for real-time testing
+            store.components.clear();
+            store.addComponent({
+                id: 'root',
+                type: 'Container',
+                displayName: 'Root',
+                props: { style: { padding: '40px', minHeight: '100vh', background: '#f7fafc' } },
+                children: []
+            });
+            store.addComponent({
+                id: 'box1',
+                type: 'Box',
+                displayName: 'Live Update Box',
+                parentId: 'root',
+                props: {
+                    style: {
+                        width: '300px',
+                        height: '200px',
+                        padding: '20px',
+                        margin: '20px auto',
+                        background: '#4299e1',
+                        borderRadius: '8px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }
+                },
+                children: []
+            });
+            store.addComponent({
+                id: 'text1',
+                type: 'Text',
+                displayName: 'Dynamic Text',
+                parentId: 'box1',
+                textContent: 'Edit my properties!',
+                props: {
+                    style: {
+                        color: 'white',
+                        fontSize: '24px',
+                        fontWeight: 'bold'
+                    }
+                }
+            });
+            // Build tree
+            const root = store.components.get('root');
+            const box = store.components.get('box1');
+            const text = store.components.get('text1');
+            if (root && box && text) {
+                box.children = ['text1'];
+                root.children = ['box1'];
+                store.components.set('box1', box);
+                store.components.set('root', root);
+            }
+            store.setMode('edit');
+            store.selectComponent('box1'); // This will open the properties panel automatically
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Real-Time Updates',
+    parameters: {
+        docs: {
+            description: {
+                story: 'See property changes update in real-time. Adjust colors, spacing, text, and layout properties to see immediate visual feedback.'
+            }
+        }
+    }
+};
+export const StyleGroups = {
+    render: () => {
+        React.useEffect(() => {
+            const store = usePlaygroundStore.getState();
+            store.components.clear();
+            // Create a component with all style groups
+            store.addComponent({
+                id: 'root',
+                type: 'Container',
+                displayName: 'Root',
+                props: { style: { padding: '40px', minHeight: '100vh' } },
+                children: []
+            });
+            store.addComponent({
+                id: 'demo1',
+                type: 'Box',
+                displayName: 'All Styles Demo',
+                parentId: 'root',
+                textContent: 'Component with all style properties',
+                props: {
+                    style: {
+                        // Spacing
+                        margin: '20px',
+                        padding: '30px',
+                        // Layout
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        gap: '16px',
+                        // Sizing
+                        width: '400px',
+                        height: '300px',
+                        minWidth: '300px',
+                        maxWidth: '500px',
+                        // Typography
+                        fontSize: '18px',
+                        fontWeight: 'bold',
+                        fontFamily: 'system-ui',
+                        lineHeight: '1.5',
+                        textAlign: 'center',
+                        color: '#2d3748',
+                        // Background
+                        background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+                        // Border
+                        border: '2px solid #e2e8f0',
+                        borderRadius: '16px',
+                        // Effects
+                        opacity: 0.95,
+                        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+                        transform: 'rotate(-2deg)',
+                        transition: 'all 0.3s ease'
+                    }
+                }
+            });
+            const root = store.components.get('root');
+            const demo = store.components.get('demo1');
+            if (root && demo) {
+                root.children = ['demo1'];
+                store.components.set('root', root);
+            }
+            store.setMode('edit');
+            store.selectComponent('demo1'); // This will open the properties panel automatically
+        }, []);
+        return _jsx(Playground, { initialMode: "edit" });
+    },
+    name: 'Style Groups Organization',
+    parameters: {
+        docs: {
+            description: {
+                story: 'See how style properties are organized into logical groups: Spacing, Layout, Size, Typography, Background, Border, and Effects.'
+            }
+        }
+    }
+};
+//# sourceMappingURL=PlaygroundProperties.stories.js.map

package/dist/playground/stories/PlaygroundProperties.stories.js.map

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

package/dist/playground/types/index.d.ts

@@ -0,0 +1,251 @@
+/**
+ * Core TypeScript interfaces for StoryUI Playground
+ */
+import type { CSSProperties, ComponentType } from 'react';
+/**
+ * Represents a component instance in the playground canvas
+ */
+export interface PlaygroundComponent {
+    /** Unique identifier for the component instance */
+    id: string;
+    /** Component type (e.g., 'Button', 'Card', 'FlexContainer') */
+    type: string;
+    /** Component display name for UI */
+    displayName?: string;
+    /** Props passed to the component */
+    props: Record<string, any>;
+    /** Child component IDs (for containers) */
+    children?: string[];
+    /** Direct text content (for text nodes) */
+    textContent?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Parent component ID */
+    parentId?: string;
+    /** Position within parent's children array */
+    index?: number;
+    /** Whether this is a layout helper component */
+    isHelper?: boolean;
+    /** Lock state preventing editing */
+    locked?: boolean;
+    /** Visibility state */
+    hidden?: boolean;
+}
+/**
+ * Component metadata from the registry
+ */
+export interface ComponentDefinition {
+    /** Component name matching import */
+    name: string;
+    /** Display name for UI */
+    displayName: string;
+    /** Loaded React component */
+    component: ComponentType<any>;
+    /** Component category for palette */
+    category: ComponentCategory;
+    /** Prop definitions */
+    props: PropDefinition[];
+    /** Available drop zones */
+    dropZones: DropZoneDefinition[];
+    /** Default props when creating new instance */
+    defaultProps?: Record<string, any>;
+    /** Whether component accepts children */
+    acceptsChildren: boolean;
+    /** Component documentation URL */
+    docUrl?: string;
+    /** Example usage snippets */
+    examples?: string[];
+    /** Preview thumbnail */
+    thumbnail?: string;
+    /** Tags for search */
+    tags?: string[];
+}
+/**
+ * Component categories for organization
+ */
+export type ComponentCategory = 'layout' | 'content' | 'forms' | 'navigation' | 'feedback' | 'data-display' | 'overlay' | 'media' | 'helpers';
+/**
+ * Definition of a component prop
+ */
+export interface PropDefinition {
+    /** Prop name */
+    name: string;
+    /** Prop type */
+    type: PropType;
+    /** Display label */
+    label?: string;
+    /** Help text */
+    description?: string;
+    /** Default value */
+    defaultValue?: any;
+    /** Whether prop is required */
+    required?: boolean;
+    /** Possible values for select/enum types */
+    options?: PropOption[];
+    /** Validation rules */
+    validation?: PropValidation;
+    /** Group for organization in panel */
+    group?: string;
+    /** Display order */
+    order?: number;
+    /** Whether to show in basic/advanced mode */
+    advanced?: boolean;
+}
+/**
+ * Supported prop types
+ */
+export type PropType = 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'color' | 'spacing' | 'size' | 'icon' | 'date' | 'json' | 'function' | 'component' | 'slot';
+/**
+ * Option for select props
+ */
+export interface PropOption {
+    label: string;
+    value: any;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * Prop validation rules
+ */
+export interface PropValidation {
+    min?: number;
+    max?: number;
+    pattern?: string;
+    custom?: (value: any) => boolean | string;
+}
+/**
+ * Spacing value for margin/padding
+ */
+export interface SpacingValue {
+    top: string | number;
+    right: string | number;
+    bottom: string | number;
+    left: string | number;
+    unit: 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw' | 'auto';
+    linked: boolean;
+}
+/**
+ * Item being dragged
+ */
+export interface DraggedItem {
+    /** Item ID (for existing components) */
+    id?: string;
+    /** Drag operation type */
+    type: 'new-component' | 'move-component' | 'resize';
+    /** Component type (for new components) */
+    componentType?: string;
+    /** Component data (for moves) */
+    component?: PlaygroundComponent;
+    /** Drag source */
+    source: 'palette' | 'canvas' | 'tree';
+    /** Initial mouse position */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Offset from component origin */
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Drop zone definition
+ */
+export interface DropZone {
+    /** Unique drop zone ID */
+    id: string;
+    /** Parent component ID */
+    componentId: string;
+    /** Accepted component types */
+    accepts: string[] | ((item: DraggedItem) => boolean);
+    /** Whether zone is currently active */
+    isActive: boolean;
+    /** Whether item is over zone */
+    isOver: boolean;
+    /** Can accept current dragged item */
+    canDrop: boolean;
+    /** DOM rect for zone */
+    rect?: DOMRect;
+    /** Drop zone type */
+    type: 'container' | 'slot' | 'list' | 'grid' | 'before' | 'after';
+    /** Insert index for ordered drops */
+    insertIndex?: number;
+    /** Maximum children allowed */
+    maxChildren?: number;
+    /** Current children count */
+    childCount?: number;
+}
+/**
+ * Drop zone definition for component metadata
+ */
+export interface DropZoneDefinition {
+    /** Zone identifier */
+    id: string;
+    /** Display label */
+    label?: string;
+    /** Accepted component types */
+    accepts: string[] | 'all';
+    /** Zone type */
+    type: 'container' | 'slot' | 'list' | 'grid';
+    /** Max items allowed */
+    maxItems?: number;
+}
+/**
+ * Canvas snapshot for history
+ */
+export interface CanvasSnapshot {
+    components: Map<string, PlaygroundComponent>;
+    timestamp: number;
+    description?: string;
+}
+/**
+ * Playground modes
+ */
+export type PlaygroundMode = 'view' | 'edit' | 'code' | 'preview' | 'responsive';
+/**
+ * Sidebar tabs
+ */
+export type SidebarTab = 'ai' | 'components' | 'structure' | 'assets' | 'templates';
+/**
+ * Drop result after successful drop
+ */
+export interface DropResult {
+    /** Target drop zone */
+    dropZone: DropZone;
+    /** New parent component ID */
+    parentId: string;
+    /** Insert index */
+    index: number;
+    /** Whether drop was successful */
+    success: boolean;
+    /** ID of component that was created or moved */
+    componentId?: string;
+    /** Error message if failed */
+    error?: string;
+}
+/**
+ * Alignment guide for snapping
+ */
+export interface AlignmentGuide {
+    type: 'vertical' | 'horizontal';
+    position: number;
+    source: string;
+    priority: number;
+}
+/**
+ * Template definition
+ */
+export interface Template {
+    id: string;
+    name: string;
+    description?: string;
+    components: PlaygroundComponent[];
+    thumbnail?: string;
+    tags: string[];
+    createdAt: Date;
+    updatedAt: Date;
+    author?: string;
+    downloads?: number;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/playground/types/index.d.ts.map

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

package/dist/playground/types/index.js

@@ -0,0 +1,5 @@
+/**
+ * Core TypeScript interfaces for StoryUI Playground
+ */
+export {};
+//# sourceMappingURL=index.js.map

package/dist/playground/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../playground/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG"}