@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/components/Playground/Playground.module.css

@@ -0,0 +1,308 @@
+/* Playground main styles */
+
+.playground {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f9fafb;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 20px;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.headerLeft,
+.headerCenter,
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.headerLeft {
+  flex: 1;
+}
+
+.headerCenter {
+  flex: 0 0 auto;
+}
+
+.headerRight {
+  flex: 1;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.exportButton {
+  padding: 8px 16px;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.exportButton:hover {
+  background: #2563eb;
+}
+
+.logo {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.modeToggle {
+  display: flex;
+  background: #f3f4f6;
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.modeButton {
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.modeButton.active {
+  background: white;
+  color: #1f2937;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.zoomControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #f3f4f6;
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.zoomButton {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: white;
+  border-radius: 4px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+}
+
+.zoomButton:hover:not(:disabled) {
+  background: #e5e7eb;
+}
+
+.zoomButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zoomValue {
+  min-width: 50px;
+  text-align: center;
+  font-size: 14px;
+  color: #4b5563;
+}
+
+/* Main Layout */
+.main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 280px;
+  background: white;
+  border-right: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarTabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.tab {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+}
+
+.tab:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+
+.activeTab {
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
+  background: white;
+}
+
+.sidebarContent {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Canvas Container */
+.canvasContainer {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Properties Panel */
+.propertiesPanel {
+  width: 320px;
+  background: white;
+  border-left: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+}
+
+.propertiesHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.propertiesTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.componentIcon {
+  font-size: 16px;
+}
+
+.closeButton {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: #6b7280;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+}
+
+.closeButton:hover {
+  background: #e5e7eb;
+  color: #1f2937;
+}
+
+.propertiesContent {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.emptyProperties {
+  color: #9ca3af;
+  text-align: center;
+  padding: 32px 16px;
+  font-size: 14px;
+}
+
+/* Status Bar */
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  height: 32px;
+  padding: 0 20px;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.statusItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Placeholders */
+.placeholder {
+  padding: 32px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 14px;
+  background: #f9fafb;
+  border-radius: 8px;
+  margin: 16px;
+}
+
+/* Drag and Drop */
+.dragGhost {
+  pointer-events: none;
+  opacity: 0.8;
+  transform: rotate(5deg);
+  z-index: 1000;
+}
+
+.newComponentGhost {
+  padding: 12px 16px;
+  background: #3b82f6;
+  color: white;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  border: 2px solid #60a5fa;
+}

package/dist/playground/components/PropertiesPanel/PropertiesPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PropertiesPanel - Main panel for editing component properties
+ */
+import React from 'react';
+export interface PropertiesPanelProps {
+    componentId?: string;
+    onClose?: () => void;
+}
+export declare const PropertiesPanel: React.FC<PropertiesPanelProps>;
+//# sourceMappingURL=PropertiesPanel.d.ts.map

package/dist/playground/components/PropertiesPanel/PropertiesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../../../playground/components/PropertiesPanel/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAqBpD,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAoCD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqS1D,CAAC"}

package/dist/playground/components/PropertiesPanel/PropertiesPanel.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PropertiesPanel - Main panel for editing component properties
+ */
+import { useCallback, useMemo } from 'react';
+import { usePlaygroundStore } from '../../store/playgroundStore';
+import { SpacingEditor } from '../PropertyEditors/SpacingEditor';
+import { TextEditor } from '../PropertyEditors/TextEditor';
+import { NumberEditor } from '../PropertyEditors/NumberEditor';
+import { SelectEditor } from '../PropertyEditors/SelectEditor';
+import { BooleanEditor } from '../PropertyEditors/BooleanEditor';
+import { ColorEditor } from '../PropertyEditors/ColorEditor';
+import { TokenEditor, SPACING_TOKENS, SIZE_TOKENS } from '../PropertyEditors/TokenEditor';
+import { IconEditor } from '../PropertyEditors/IconEditor';
+import { getPropertyType, getSelectOptions, getNumberConstraints, getPropertyDefinition, shouldUseEditor } from '../../config/propertyDefinitions';
+import styles from './PropertiesPanel.module.css';
+// Common style properties grouped by category
+const STYLE_GROUPS = {
+    spacing: {
+        label: 'Spacing',
+        properties: ['margin', 'padding']
+    },
+    layout: {
+        label: 'Layout',
+        properties: ['display', 'flexDirection', 'justifyContent', 'alignItems', 'gap', 'flexWrap']
+    },
+    sizing: {
+        label: 'Size',
+        properties: ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight']
+    },
+    typography: {
+        label: 'Typography',
+        properties: ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight', 'textAlign', 'color']
+    },
+    background: {
+        label: 'Background',
+        properties: ['background', 'backgroundColor', 'backgroundImage']
+    },
+    border: {
+        label: 'Border',
+        properties: ['border', 'borderRadius', 'borderColor', 'borderWidth', 'borderStyle']
+    },
+    effects: {
+        label: 'Effects',
+        properties: ['opacity', 'boxShadow', 'transform', 'transition']
+    }
+};
+export const PropertiesPanel = ({ componentId, onClose }) => {
+    const { components, updateComponent, selectedIds } = usePlaygroundStore();
+    // Get the component to edit
+    const component = useMemo(() => {
+        const id = componentId || (selectedIds.size === 1 ? Array.from(selectedIds)[0] : null);
+        return id ? components.get(id) : null;
+    }, [componentId, selectedIds, components]);
+    const handleStyleChange = useCallback((property, value) => {
+        if (!component)
+            return;
+        updateComponent(component.id, {
+            style: {
+                ...component.style,
+                [property]: value
+            }
+        });
+    }, [component, updateComponent]);
+    const handlePropChange = useCallback((property, value) => {
+        if (!component)
+            return;
+        updateComponent(component.id, {
+            props: {
+                ...component.props,
+                [property]: value
+            }
+        });
+    }, [component, updateComponent]);
+    const handleTextContentChange = useCallback((value) => {
+        if (!component)
+            return;
+        updateComponent(component.id, {
+            textContent: value
+        });
+    }, [component, updateComponent]);
+    const renderPropertyEditor = (propName, value, isStyle = false) => {
+        const componentType = component?.type;
+        const type = getPropertyType(propName, value, componentType);
+        const onChange = isStyle ?
+            (val) => handleStyleChange(propName, val) :
+            (val) => handlePropChange(propName, val);
+        // Create unique key that includes component ID to force re-render when component changes
+        const editorKey = `${component?.id}-${propName}-${isStyle ? 'style' : 'prop'}`;
+        // Get property definition for enhanced options
+        const propDef = componentType ? getPropertyDefinition(componentType, propName) : null;
+        switch (type) {
+            case 'spacing':
+                // Check if it should use TokenEditor for spacing values
+                if (shouldUseEditor(propName, 'spacing') && (propName === 'gap' || propName.includes('gap'))) {
+                    return (_jsx(TokenEditor, { value: value, onChange: onChange, label: propDef?.label || propName, tokens: SPACING_TOKENS, unit: "px" }, editorKey));
+                }
+                return (_jsx(SpacingEditor, { value: value, onChange: onChange, property: propName, label: propDef?.label || propName }, editorKey));
+            case 'color':
+                return (_jsx(ColorEditor, { value: value, onChange: onChange, label: propDef?.label || propName }, editorKey));
+            case 'number':
+                const numberConstraints = getNumberConstraints(propName);
+                return (_jsx(NumberEditor, { value: typeof value === 'string' ? parseFloat(value) : value, onChange: onChange, label: propDef?.label || propName, min: numberConstraints.min, max: numberConstraints.max, step: numberConstraints.step, unit: numberConstraints.unit }, editorKey));
+            case 'boolean':
+                return (_jsx(BooleanEditor, { value: value, onChange: onChange, label: propDef?.label || propName, description: propDef?.description }, editorKey));
+            case 'select':
+                const selectOptions = getSelectOptions(propName, componentType);
+                // Use TokenEditor for size properties
+                if (propName === 'size' && selectOptions.length <= 3) {
+                    return (_jsx(TokenEditor, { value: value, onChange: onChange, label: propDef?.label || propName, tokens: SIZE_TOKENS, allowCustom: false }, editorKey));
+                }
+                return (_jsx(SelectEditor, { value: value, onChange: onChange, options: selectOptions, label: propDef?.label || propName, placeholder: `Select ${propName}...` }, editorKey));
+            case 'icon':
+                return (_jsx(IconEditor, { value: value, onChange: onChange, label: propDef?.label || propName, placeholder: `Select ${propName}...` }, editorKey));
+            default:
+                return (_jsx(TextEditor, { value: value, onChange: onChange, label: propDef?.label || propName, placeholder: propDef?.description }, editorKey));
+        }
+    };
+    if (!component) {
+        return (_jsx("div", { className: styles.panel, children: _jsx("div", { className: styles.emptyState, children: _jsx("p", { children: "Select a component to edit its properties" }) }) }));
+    }
+    return (_jsxs("div", { className: styles.panel, children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.componentInfo, children: [_jsx("span", { className: styles.componentType, children: component.type }), component.displayName && (_jsx("span", { className: styles.componentName, children: component.displayName }))] }), onClose && (_jsx("button", { className: styles.closeButton, onClick: onClose, children: "\u2715" }))] }), _jsxs("div", { className: styles.content, children: [component.textContent !== undefined && (_jsxs("div", { className: styles.section, children: [_jsx("h3", { className: styles.sectionTitle, children: "Content" }), _jsx(TextEditor, { value: component.textContent, onChange: handleTextContentChange, label: "Text", multiline: true }, `${component.id}-textContent`)] })), _jsxs("div", { className: styles.section, children: [_jsx("h3", { className: styles.sectionTitle, children: "Styles" }), _jsxs("div", { className: styles.group, children: [_jsx("h4", { className: styles.groupTitle, children: "Spacing" }), _jsx(SpacingEditor, { value: component.style?.margin, onChange: (val) => handleStyleChange('margin', val), property: "margin", label: "Margin" }, `${component.id}-margin`), _jsx(SpacingEditor, { value: component.style?.padding, onChange: (val) => handleStyleChange('padding', val), property: "padding", label: "Padding" }, `${component.id}-padding`)] }), Object.entries(STYLE_GROUPS).map(([groupKey, group]) => {
+                                if (groupKey === 'spacing')
+                                    return null; // Already rendered above
+                                const relevantProps = group.properties.filter(prop => {
+                                    const styleProp = prop;
+                                    return component.style?.[styleProp] !== undefined || groupKey === 'layout';
+                                });
+                                if (relevantProps.length === 0)
+                                    return null;
+                                return (_jsxs("div", { className: styles.group, children: [_jsx("h4", { className: styles.groupTitle, children: group.label }), relevantProps.map(prop => {
+                                            const styleProp = prop;
+                                            return renderPropertyEditor(prop, component.style?.[styleProp], true);
+                                        })] }, groupKey));
+                            })] }), component.props && Object.keys(component.props).length > 0 && (_jsxs("div", { className: styles.section, children: [_jsx("h3", { className: styles.sectionTitle, children: "Properties" }), Object.entries(component.props).map(([propName, value]) => {
+                                // Skip style prop as it's handled separately
+                                if (propName === 'style')
+                                    return null;
+                                return renderPropertyEditor(propName, value, false);
+                            })] })), _jsxs("div", { className: styles.quickActions, children: [_jsx("button", { className: styles.actionButton, onClick: () => {
+                                    updateComponent(component.id, {
+                                        style: {}
+                                    });
+                                }, children: "Reset Styles" }), _jsx("button", { className: styles.actionButton, onClick: () => {
+                                    updateComponent(component.id, {
+                                        hidden: !component.hidden
+                                    });
+                                }, children: component.hidden ? 'Show' : 'Hide' })] })] })] }));
+};
+//# sourceMappingURL=PropertiesPanel.js.map

package/dist/playground/components/PropertiesPanel/PropertiesPanel.js.map

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

package/dist/playground/components/PropertiesPanel/PropertiesPanel.module.css

@@ -0,0 +1,155 @@
+/* PropertiesPanel styles */
+
+.panel {
+  width: 100%;
+  height: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f9fafb;
+}
+
+.componentInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.componentType {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.componentName {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.closeButton {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #6b7280;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.closeButton:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.section {
+  margin-bottom: 24px;
+}
+
+.sectionTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.group {
+  margin-bottom: 20px;
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid #f3f4f6;
+}
+
+.groupTitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 32px;
+  text-align: center;
+}
+
+.emptyState p {
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.quickActions {
+  display: flex;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.actionButton {
+  flex: 1;
+  padding: 8px 12px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.actionButton:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  color: #374151;
+}
+
+.actionButton:active {
+  background: #e5e7eb;
+}
+
+/* Scrollbar styling */
+.content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: #f9fafb;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.content::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}

package/dist/playground/components/PropertiesPanel/index.d.ts

@@ -0,0 +1,3 @@
+export { PropertiesPanel } from './PropertiesPanel';
+export type { PropertiesPanelProps } from './PropertiesPanel';
+//# sourceMappingURL=index.d.ts.map

package/dist/playground/components/PropertiesPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../playground/components/PropertiesPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/playground/components/PropertiesPanel/index.js

@@ -0,0 +1,2 @@
+export { PropertiesPanel } from './PropertiesPanel';
+//# sourceMappingURL=index.js.map

package/dist/playground/components/PropertiesPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../playground/components/PropertiesPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/playground/components/PropertyEditors/BooleanEditor.d.ts

@@ -0,0 +1,12 @@
+/**
+ * BooleanEditor - Toggle switch for boolean properties using MUI Switch
+ */
+import React from 'react';
+export interface BooleanEditorProps {
+    value?: boolean;
+    onChange: (value: boolean) => void;
+    label?: string;
+    description?: string;
+}
+export declare const BooleanEditor: React.FC<BooleanEditorProps>;
+//# sourceMappingURL=BooleanEditor.d.ts.map

package/dist/playground/components/PropertyEditors/BooleanEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../playground/components/PropertyEditors/BooleanEditor.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiCtD,CAAC"}