@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/templates/production-app/src/LivePreviewRenderer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Live Preview Renderer
+ *
+ * This component takes generated JSX code as a string and renders it live
+ * using Babel standalone for JSX compilation and the component registry
+ * for component resolution.
+ */
+import React from 'react';
+interface LivePreviewRendererProps {
+    /** The JSX code string to render */
+    code: string;
+    /** Optional error handler */
+    onError?: (error: Error) => void;
+    /** Optional success handler */
+    onSuccess?: () => void;
+    /** Custom styles for the container */
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * Live Preview Renderer Component
+ */
+export declare const LivePreviewRenderer: React.FC<LivePreviewRendererProps>;
+export default LivePreviewRenderer;
+//# sourceMappingURL=LivePreviewRenderer.d.ts.map

package/dist/templates/production-app/src/LivePreviewRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivePreviewRenderer.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/LivePreviewRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,UAAU,wBAAwB;IAChC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAuJD;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgGlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/templates/production-app/src/LivePreviewRenderer.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Live Preview Renderer
+ *
+ * This component takes generated JSX code as a string and renders it live
+ * using Babel standalone for JSX compilation and the component registry
+ * for component resolution.
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import * as Babel from '@babel/standalone';
+// This import will be replaced with the actual component registry at build time
+import { componentRegistry, React as ReactExport } from './componentRegistry';
+// Error boundary to catch render errors
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error) {
+        this.props.onError?.(error);
+    }
+    componentDidUpdate(prevProps) {
+        // Reset error state when children change
+        if (prevProps.children !== this.props.children && this.state.hasError) {
+            this.setState({ hasError: false, error: null });
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs("div", { style: {
+                    padding: '16px',
+                    background: 'rgba(239, 68, 68, 0.1)',
+                    borderLeft: '3px solid #ef4444',
+                    borderRadius: '4px',
+                    color: '#ef4444',
+                    fontFamily: 'monospace',
+                    fontSize: '13px',
+                    whiteSpace: 'pre-wrap',
+                }, children: [_jsx("strong", { children: "Render Error:" }), _jsx("br", {}), this.state.error?.message] }));
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Extract JSX from generated code
+ * The AI typically returns a full story file, but we only need the JSX render content
+ */
+function extractJSX(code) {
+    // Remove markdown code blocks if present
+    let cleanCode = code.trim();
+    if (cleanCode.startsWith('```')) {
+        cleanCode = cleanCode
+            .replace(/^```(?:jsx|tsx|javascript|js|typescript|ts)?\n?/, '')
+            .replace(/\n?```$/, '');
+    }
+    // Try to extract JSX from a render function
+    const renderMatch = cleanCode.match(/render:\s*\(\)\s*=>\s*\(?([\s\S]*?)\)?\s*,?\s*\}/);
+    if (renderMatch) {
+        const jsx = renderMatch[1].trim();
+        // Remove trailing paren if present
+        return jsx.endsWith(')') && !jsx.includes('(') ? jsx.slice(0, -1) : jsx;
+    }
+    // Try to extract from args.children
+    const childrenMatch = cleanCode.match(/children:\s*\(?([\s\S]*?)\)?\s*\}/);
+    if (childrenMatch) {
+        const jsx = childrenMatch[1].trim();
+        return jsx.endsWith(')') && !jsx.includes('(') ? jsx.slice(0, -1) : jsx;
+    }
+    // If it looks like a JSX expression (starts with <), use it directly
+    if (cleanCode.trim().startsWith('<')) {
+        return cleanCode;
+    }
+    // Try to extract any JSX from the code
+    const jsxMatch = cleanCode.match(/<[A-Z][^]*$/);
+    if (jsxMatch) {
+        return jsxMatch[0];
+    }
+    // Return as-is and let Babel fail if it's not valid
+    return cleanCode;
+}
+/**
+ * Compile JSX code string to a React component
+ */
+function compileJSX(jsxCode) {
+    try {
+        // Create a scope object with all available components and React
+        const scope = {
+            React: ReactExport,
+            ...componentRegistry,
+            // Add common React hooks
+            useState: React.useState,
+            useEffect: React.useEffect,
+            useCallback: React.useCallback,
+            useMemo: React.useMemo,
+            useRef: React.useRef,
+        };
+        // Extract the JSX to render
+        const extractedJSX = extractJSX(jsxCode);
+        // Wrap in a function component
+        const wrappedCode = `
+      (function() {
+        const { ${Object.keys(scope).join(', ')} } = scope;
+        return function PreviewComponent() {
+          return (${extractedJSX});
+        };
+      })()
+    `;
+        // Transform JSX to JavaScript
+        const transformed = Babel.transform(wrappedCode, {
+            presets: ['react'],
+            filename: 'preview.tsx',
+        });
+        if (!transformed.code) {
+            throw new Error('Babel transformation produced no output');
+        }
+        // Create the component using Function constructor
+        // eslint-disable-next-line no-new-func
+        const createComponent = new Function('scope', `return ${transformed.code}`);
+        const Component = createComponent(scope);
+        return Component;
+    }
+    catch (error) {
+        console.error('JSX compilation error:', error);
+        throw error;
+    }
+}
+/**
+ * Live Preview Renderer Component
+ */
+export const LivePreviewRenderer = ({ code, onError, onSuccess, containerStyle, }) => {
+    const [compiledComponent, setCompiledComponent] = useState(null);
+    const [error, setError] = useState(null);
+    const previousCodeRef = useRef('');
+    // Compile the code when it changes
+    useEffect(() => {
+        if (!code || code === previousCodeRef.current) {
+            return;
+        }
+        previousCodeRef.current = code;
+        setError(null);
+        try {
+            const Component = compileJSX(code);
+            setCompiledComponent(() => Component);
+            onSuccess?.();
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            setCompiledComponent(null);
+            onError?.(error);
+        }
+    }, [code, onError, onSuccess]);
+    // Render error state
+    if (error) {
+        return (_jsx("div", { style: {
+                padding: '24px',
+                ...containerStyle,
+            }, children: _jsxs("div", { style: {
+                    padding: '16px',
+                    background: 'rgba(239, 68, 68, 0.1)',
+                    borderLeft: '3px solid #ef4444',
+                    borderRadius: '4px',
+                    color: '#ef4444',
+                }, children: [_jsx("div", { style: {
+                            fontWeight: 600,
+                            marginBottom: '8px',
+                            fontSize: '14px',
+                        }, children: "Compilation Error" }), _jsx("pre", { style: {
+                            margin: 0,
+                            fontFamily: '"Fira Code", Monaco, monospace',
+                            fontSize: '12px',
+                            lineHeight: 1.5,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }, children: error.message })] }) }));
+    }
+    // Render empty state
+    if (!compiledComponent) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: '#71717a',
+                ...containerStyle,
+            }, children: "Waiting for code..." }));
+    }
+    // Render the compiled component
+    const Component = compiledComponent;
+    return (_jsx("div", { style: {
+            padding: '24px',
+            minHeight: '200px',
+            ...containerStyle,
+        }, children: _jsx(ErrorBoundary, { onError: onError, children: _jsx(Component, {}) }) }));
+};
+export default LivePreviewRenderer;

package/dist/templates/production-app/src/componentRegistry.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Component Registry
+ *
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ * This file is generated at build time by story-ui
+ *
+ * It exports all components from your component library
+ * for use in the live preview renderer.
+ *
+ * NOTE: This is a sample/placeholder registry for development.
+ * When you run `story-ui deploy`, this file will be regenerated
+ * with your actual component library imports.
+ */
+import React from 'react';
+export declare const componentRegistry: Record<string, React.ComponentType<any>>;
+export declare const availableComponents: string[];
+export { React };
+export declare function getComponent(name: string): React.ComponentType<any> | undefined;
+export declare function hasComponent(name: string): boolean;
+//# sourceMappingURL=componentRegistry.d.ts.map

package/dist/templates/production-app/src/componentRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentRegistry.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/componentRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA0Q1B,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAStE,CAAC;AAGF,eAAO,MAAM,mBAAmB,UAS/B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC;AAGjB,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE/E;AAGD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD"}

package/dist/templates/production-app/src/componentRegistry.js

@@ -0,0 +1,316 @@
+/**
+ * Component Registry
+ *
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ * This file is generated at build time by story-ui
+ *
+ * It exports all components from your component library
+ * for use in the live preview renderer.
+ *
+ * NOTE: This is a sample/placeholder registry for development.
+ * When you run `story-ui deploy`, this file will be regenerated
+ * with your actual component library imports.
+ */
+import React from 'react';
+// Sample placeholder components for development/testing
+// These will be replaced with actual component imports from your library
+const PlaceholderButton = ({ children, variant = 'filled', color = '#6366f1', size = 'md', disabled, onClick }) => {
+    const sizes = {
+        xs: { padding: '4px 8px', fontSize: '11px' },
+        sm: { padding: '6px 12px', fontSize: '12px' },
+        md: { padding: '8px 16px', fontSize: '14px' },
+        lg: { padding: '10px 20px', fontSize: '16px' },
+        xl: { padding: '12px 24px', fontSize: '18px' },
+    };
+    const baseStyles = {
+        ...sizes[size],
+        borderRadius: '6px',
+        fontWeight: 500,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        transition: 'all 150ms ease',
+        border: 'none',
+        fontFamily: 'inherit',
+    };
+    const variantStyles = {
+        filled: { backgroundColor: color, color: 'white' },
+        outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
+        subtle: { backgroundColor: `${color}20`, color },
+        light: { backgroundColor: `${color}15`, color },
+    };
+    return style = {};
+    {
+        baseStyles, ;
+        variantStyles[variant];
+    }
+};
+disabled = { disabled };
+onClick = { onClick }
+    >
+        { children }
+    < /button>;
+;
+;
+const PlaceholderCard = ({ children, shadow = 'sm', padding = 'md', radius = 'md', withBorder = false }) => {
+    const paddings = { xs: '8px', sm: '12px', md: '16px', lg: '24px', xl: '32px' };
+    const radii = { xs: '4px', sm: '6px', md: '8px', lg: '12px', xl: '16px' };
+    const shadows = {
+        xs: '0 1px 2px rgba(0,0,0,0.05)',
+        sm: '0 1px 3px rgba(0,0,0,0.1)',
+        md: '0 4px 6px rgba(0,0,0,0.1)',
+        lg: '0 10px 15px rgba(0,0,0,0.1)',
+        xl: '0 20px 25px rgba(0,0,0,0.15)',
+    };
+    return style = {};
+    {
+        backgroundColor: '#1e1e1e',
+            padding;
+        paddings[padding],
+            borderRadius;
+        radii[radius],
+            boxShadow;
+        shadows[shadow],
+            border;
+        withBorder ? '1px solid #27272a' : 'none',
+        ;
+    }
+};
+    >
+        { children }
+    < /div>;
+;
+;
+const PlaceholderText = ({ children, size = 'md', weight = 400, color, align = 'left' }) => {
+    const sizes = { xs: '11px', sm: '13px', md: '14px', lg: '16px', xl: '18px' };
+    return style = {};
+    {
+        fontSize: sizes[size],
+            fontWeight;
+        weight,
+            color;
+        color || '#fafafa',
+            textAlign;
+        align,
+            margin;
+        0,
+            lineHeight;
+        1.5,
+        ;
+    }
+};
+    >
+        { children }
+    < /p>;
+;
+;
+const PlaceholderTitle = ({ children, order = 1, color, align = 'left' }) => {
+    const sizes = {
+        1: '32px',
+        2: '28px',
+        3: '24px',
+        4: '20px',
+        5: '18px',
+        6: '16px',
+    };
+    const Tag = `h${order}`;
+    return style = {};
+    {
+        fontSize: sizes[order],
+            fontWeight;
+        700,
+            color;
+        color || '#fafafa',
+            textAlign;
+        align,
+            margin;
+        0,
+            lineHeight;
+        1.25,
+        ;
+    }
+};
+    >
+        { children }
+    < /Tag>;
+;
+;
+const PlaceholderStack = ({ children, spacing = 'md', align = 'stretch' }) => {
+    const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
+    return style = {};
+    {
+        display: 'flex',
+            flexDirection;
+        'column',
+            gap;
+        spacings[spacing],
+            alignItems;
+        align,
+        ;
+    }
+};
+    >
+        { children }
+    < /div>;
+;
+;
+const PlaceholderGroup = ({ children, spacing = 'md', justify = 'flex-start', align = 'center', wrap = 'wrap' }) => {
+    const spacings = { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '32px' };
+    return style = {};
+    {
+        display: 'flex',
+            flexDirection;
+        'row',
+            gap;
+        spacings[spacing],
+            justifyContent;
+        justify,
+            alignItems;
+        align,
+            flexWrap;
+        wrap,
+        ;
+    }
+};
+    >
+        { children }
+    < /div>;
+;
+;
+const PlaceholderBadge = ({ children, color = '#6366f1', variant = 'light', size = 'md' }) => {
+    const sizes = {
+        xs: { padding: '2px 6px', fontSize: '10px' },
+        sm: { padding: '3px 8px', fontSize: '11px' },
+        md: { padding: '4px 10px', fontSize: '12px' },
+        lg: { padding: '5px 12px', fontSize: '13px' },
+        xl: { padding: '6px 14px', fontSize: '14px' },
+    };
+    const variantStyles = {
+        filled: { backgroundColor: color, color: 'white' },
+        outline: { backgroundColor: 'transparent', border: `1px solid ${color}`, color },
+        light: { backgroundColor: `${color}20`, color },
+    };
+    return style = {};
+    {
+    }
+};
+sizes[size],
+;
+variantStyles[variant],
+    borderRadius;
+'9999px',
+    fontWeight;
+500,
+    display;
+'inline-flex',
+    alignItems;
+'center',
+    justifyContent;
+'center',
+;
+    >
+        { children }
+    < /span>;
+;
+;
+const PlaceholderTextInput = ({ label, placeholder, value, onChange, disabled, error, description }) => {
+    return style = {};
+    {
+        display: 'flex', flexDirection;
+        'column', gap;
+        '4px';
+    }
+};
+ >
+    { label } && style;
+{
+    {
+        fontSize: '14px', fontWeight;
+        500, color;
+        '#fafafa';
+    }
+}
+ >
+    { label }
+    < /label>;
+{
+    description && style;
+    {
+        {
+            fontSize: '12px', color;
+            '#71717a';
+        }
+    }
+     > { description } < /span>;
+}
+type;
+"text";
+placeholder = { placeholder };
+value = { value };
+onChange = { onChange };
+disabled = { disabled };
+style = {};
+{
+    padding: '8px 12px',
+        fontSize;
+    '14px',
+        borderRadius;
+    '6px',
+        border;
+    `1px solid ${error ? '#ef4444' : '#27272a'}`,
+        backgroundColor;
+    '#1a1a1a',
+        color;
+    '#fafafa',
+        outline;
+    'none',
+        opacity;
+    disabled ? 0.5 : 1,
+    ;
+}
+/>;
+{
+    error && style;
+    {
+        {
+            fontSize: '12px', color;
+            '#ef4444';
+        }
+    }
+     > { error } < /span>;
+}
+/div>;
+;
+;
+// Component registry - maps component names to their implementations
+// This will be replaced with actual component imports at build time
+export const componentRegistry = {
+    Button: PlaceholderButton,
+    Card: PlaceholderCard,
+    Text: PlaceholderText,
+    Title: PlaceholderTitle,
+    Stack: PlaceholderStack,
+    Group: PlaceholderGroup,
+    Badge: PlaceholderBadge,
+    TextInput: PlaceholderTextInput,
+};
+// List of available component names
+export const availableComponents = [
+    'Button',
+    'Card',
+    'Text',
+    'Title',
+    'Stack',
+    'Group',
+    'Badge',
+    'TextInput',
+];
+// Export React for use in compiled code
+export { React };
+// Helper to get a component by name
+export function getComponent(name) {
+    return componentRegistry[name];
+}
+// Check if a component exists
+export function hasComponent(name) {
+    return name in componentRegistry;
+}

package/dist/templates/production-app/src/main.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Production App Entry Point
+ *
+ * This is the main entry point for the Story UI production app.
+ * It renders the main App component which provides the Lovable/Bolt-style
+ * interface for generating and previewing UI components.
+ */
+import './index.css';
+//# sourceMappingURL=main.d.ts.map

package/dist/templates/production-app/src/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../templates/production-app/src/main.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,aAAa,CAAC"}

package/dist/templates/production-app/src/main.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Production App Entry Point
+ *
+ * This is the main entry point for the Story UI production app.
+ * It renders the main App component which provides the Lovable/Bolt-style
+ * interface for generating and previewing UI components.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+// Mount the app
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+    throw new Error('Root element not found. Make sure there is a <div id="root"></div> in your HTML.');
+}
+ReactDOM.createRoot(rootElement).render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));

package/dist/templates/production-app/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/templates/production-app/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../templates/production-app/vite.config.ts"],"names":[],"mappings":";AAKA,wBA6EG"}

package/dist/templates/production-app/vite.config.js

@@ -0,0 +1,71 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    // Load env file based on mode
+    const env = loadEnv(mode, process.cwd(), '');
+    return {
+        plugins: [react()],
+        // Define environment variables to expose to the client
+        define: {
+            // Backend API URL - required for production
+            'import.meta.env.VITE_BACKEND_URL': JSON.stringify(env.VITE_BACKEND_URL || 'http://localhost:4001'),
+            // App title customization
+            'import.meta.env.VITE_APP_TITLE': JSON.stringify(env.VITE_APP_TITLE || 'Story UI'),
+        },
+        // Resolve aliases for cleaner imports
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+                '@components': path.resolve(__dirname, './src/components'),
+            },
+        },
+        // Server configuration for development
+        server: {
+            port: 5173,
+            strictPort: false,
+            host: true, // Listen on all addresses
+            // Proxy API requests to backend in development
+            proxy: {
+                '/mcp': {
+                    target: env.VITE_BACKEND_URL || 'http://localhost:4001',
+                    changeOrigin: true,
+                },
+                '/story-ui': {
+                    target: env.VITE_BACKEND_URL || 'http://localhost:4001',
+                    changeOrigin: true,
+                },
+            },
+        },
+        // Build configuration
+        build: {
+            outDir: 'dist',
+            sourcemap: mode === 'development',
+            // Optimize chunk size
+            rollupOptions: {
+                output: {
+                    manualChunks: {
+                        // Split vendor chunks for better caching
+                        'vendor-react': ['react', 'react-dom'],
+                        'vendor-babel': ['@babel/standalone'],
+                    },
+                },
+            },
+            // Target modern browsers
+            target: 'es2020',
+            // Minification
+            minify: 'esbuild',
+        },
+        // Optimize dependencies
+        optimizeDeps: {
+            include: ['react', 'react-dom', '@babel/standalone'],
+        },
+        // Preview server configuration (for testing production build locally)
+        preview: {
+            port: 4173,
+            strictPort: false,
+            host: true,
+        },
+    };
+});