@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/config/propertyDefinitions.js

@@ -0,0 +1,809 @@
+/**
+ * Property definitions for intelligent field type detection
+ * Maps component types and property names to appropriate editors
+ */
+// Design system tokens for spacing and sizing
+export const SPACING_TOKENS = [0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64];
+export const SIZE_TOKENS = ['small', 'medium', 'large'];
+export const BUTTON_TYPES = ['default', 'primary', 'dashed', 'text', 'link'];
+export const STATUS_TYPES = ['success', 'warning', 'error', 'info'];
+export const INPUT_SIZES = ['small', 'middle', 'large'];
+// Common prop options
+export const COMMON_OPTIONS = {
+    size: SIZE_TOKENS.map(size => ({ label: size.charAt(0).toUpperCase() + size.slice(1), value: size })),
+    inputSize: INPUT_SIZES.map(size => ({ label: size.charAt(0).toUpperCase() + size.slice(1), value: size })),
+    buttonType: BUTTON_TYPES.map(type => ({ label: type.charAt(0).toUpperCase() + type.slice(1), value: type })),
+    status: STATUS_TYPES.map(status => ({ label: status.charAt(0).toUpperCase() + status.slice(1), value: status })),
+    spacingTokens: SPACING_TOKENS.map(token => ({ label: `${token}px`, value: token })),
+    booleanOptions: [
+        { label: 'True', value: true },
+        { label: 'False', value: false }
+    ]
+};
+// Boolean properties that should use Switch components
+export const BOOLEAN_PROPERTIES = new Set([
+    'disabled',
+    'loading',
+    'ghost',
+    'block',
+    'danger',
+    'allowClear',
+    'autoFocus',
+    'bordered',
+    'hoverable',
+    'checked',
+    'defaultChecked',
+    'indeterminate',
+    'autosize',
+    'showCount',
+    'showSearch',
+    'multiple',
+    'clearable',
+    'searchable',
+    'virtual',
+    'showArrow',
+    'open',
+    'visible',
+    'closable',
+    'destroyOnClose',
+    'forceRender',
+    'mask',
+    'maskClosable',
+    'keyboard',
+    'autoDestroy',
+    'preserveDrawerHeight',
+    'push',
+    'placement',
+    'getContainer',
+    'afterVisibleChange',
+    'onClose'
+]);
+// Select/Enum properties with their options
+export const SELECT_PROPERTIES = {
+    type: COMMON_OPTIONS.buttonType,
+    size: COMMON_OPTIONS.size,
+    htmlType: [
+        { label: 'Button', value: 'button' },
+        { label: 'Submit', value: 'submit' },
+        { label: 'Reset', value: 'reset' }
+    ],
+    shape: [
+        { label: 'Default', value: 'default' },
+        { label: 'Circle', value: 'circle' },
+        { label: 'Round', value: 'round' }
+    ],
+    status: COMMON_OPTIONS.status,
+    variant: [
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Borderless', value: 'borderless' },
+        { label: 'Filled', value: 'filled' }
+    ],
+    mode: [
+        { label: 'Default', value: undefined },
+        { label: 'Multiple', value: 'multiple' },
+        { label: 'Tags', value: 'tags' }
+    ],
+    placement: [
+        { label: 'Top', value: 'top' },
+        { label: 'Bottom', value: 'bottom' },
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' }
+    ],
+    align: [
+        { label: 'Start', value: 'start' },
+        { label: 'Center', value: 'center' },
+        { label: 'End', value: 'end' }
+    ],
+    justify: [
+        { label: 'Start', value: 'start' },
+        { label: 'Center', value: 'center' },
+        { label: 'End', value: 'end' },
+        { label: 'Space Between', value: 'space-between' },
+        { label: 'Space Around', value: 'space-around' },
+        { label: 'Space Evenly', value: 'space-evenly' }
+    ],
+    direction: [
+        { label: 'Horizontal', value: 'horizontal' },
+        { label: 'Vertical', value: 'vertical' }
+    ],
+    wrap: [
+        { label: 'Wrap', value: true },
+        { label: 'No Wrap', value: false }
+    ]
+};
+// Number properties with constraints
+export const NUMBER_PROPERTIES = {
+    span: { min: 0, max: 24, step: 1 },
+    offset: { min: 0, max: 24, step: 1 },
+    order: { min: -1, max: 10, step: 1 },
+    flex: { min: 0, max: 10, step: 0.1 },
+    gutter: { min: 0, max: 64, step: 4, unit: 'px' },
+    tabIndex: { min: -1, max: 1000, step: 1 },
+    rows: { min: 1, max: 20, step: 1 },
+    maxLength: { min: 0, max: 10000, step: 1 },
+    precision: { min: 0, max: 10, step: 1 },
+    step: { min: 0.01, max: 1000, step: 0.01 },
+    min: { min: -Infinity, max: Infinity, step: 1 },
+    max: { min: -Infinity, max: Infinity, step: 1 },
+    defaultValue: { min: -Infinity, max: Infinity, step: 1 },
+    value: { min: -Infinity, max: Infinity, step: 1 }
+};
+// Color properties
+export const COLOR_PROPERTIES = new Set([
+    'color',
+    'backgroundColor',
+    'borderColor',
+    'textColor',
+    'primaryColor',
+    'secondaryColor',
+    'successColor',
+    'warningColor',
+    'errorColor',
+    'infoColor'
+]);
+// Spacing properties that should use design tokens
+export const SPACING_PROPERTIES = new Set([
+    'margin',
+    'padding',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'gap',
+    'rowGap',
+    'columnGap'
+]);
+// Component-specific property definitions
+export const COMPONENT_PROPERTIES = {
+    Button: {
+        type: {
+            name: 'type',
+            type: 'select',
+            label: 'Type',
+            description: 'Button type',
+            options: SELECT_PROPERTIES.type,
+            defaultValue: 'default'
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Button size',
+            options: SELECT_PROPERTIES.size,
+            defaultValue: 'middle'
+        },
+        shape: {
+            name: 'shape',
+            type: 'select',
+            label: 'Shape',
+            description: 'Button shape',
+            options: SELECT_PROPERTIES.shape,
+            defaultValue: 'default'
+        },
+        htmlType: {
+            name: 'htmlType',
+            type: 'select',
+            label: 'HTML Type',
+            description: 'Button HTML type',
+            options: SELECT_PROPERTIES.htmlType,
+            defaultValue: 'button'
+        },
+        danger: {
+            name: 'danger',
+            type: 'boolean',
+            label: 'Danger',
+            description: 'Set danger status',
+            defaultValue: false
+        },
+        ghost: {
+            name: 'ghost',
+            type: 'boolean',
+            label: 'Ghost',
+            description: 'Make background transparent',
+            defaultValue: false
+        },
+        loading: {
+            name: 'loading',
+            type: 'boolean',
+            label: 'Loading',
+            description: 'Show loading spinner',
+            defaultValue: false
+        },
+        block: {
+            name: 'block',
+            type: 'boolean',
+            label: 'Block',
+            description: 'Make button full width',
+            defaultValue: false
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the button',
+            defaultValue: false
+        }
+    },
+    Input: {
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Input size',
+            options: COMMON_OPTIONS.inputSize,
+            defaultValue: 'middle'
+        },
+        variant: {
+            name: 'variant',
+            type: 'select',
+            label: 'Variant',
+            description: 'Input variant',
+            options: SELECT_PROPERTIES.variant,
+            defaultValue: 'outlined'
+        },
+        status: {
+            name: 'status',
+            type: 'select',
+            label: 'Status',
+            description: 'Validation status',
+            options: SELECT_PROPERTIES.status
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the input',
+            defaultValue: false
+        },
+        allowClear: {
+            name: 'allowClear',
+            type: 'boolean',
+            label: 'Allow Clear',
+            description: 'Show clear button',
+            defaultValue: false
+        },
+        autoFocus: {
+            name: 'autoFocus',
+            type: 'boolean',
+            label: 'Auto Focus',
+            description: 'Auto focus on mount',
+            defaultValue: false
+        },
+        showCount: {
+            name: 'showCount',
+            type: 'boolean',
+            label: 'Show Count',
+            description: 'Show character count',
+            defaultValue: false
+        },
+        maxLength: {
+            name: 'maxLength',
+            type: 'number',
+            label: 'Max Length',
+            description: 'Maximum input length',
+            validation: {
+                min: NUMBER_PROPERTIES.maxLength.min,
+                max: NUMBER_PROPERTIES.maxLength.max
+            }
+        }
+    },
+    Card: {
+        bordered: {
+            name: 'bordered',
+            type: 'boolean',
+            label: 'Bordered',
+            description: 'Show card border',
+            defaultValue: true
+        },
+        hoverable: {
+            name: 'hoverable',
+            type: 'boolean',
+            label: 'Hoverable',
+            description: 'Lift up when hover card',
+            defaultValue: false
+        },
+        loading: {
+            name: 'loading',
+            type: 'boolean',
+            label: 'Loading',
+            description: 'Show loading state',
+            defaultValue: false
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Card size',
+            options: SELECT_PROPERTIES.size,
+            defaultValue: 'default'
+        }
+    },
+    Select: {
+        mode: {
+            name: 'mode',
+            type: 'select',
+            label: 'Mode',
+            description: 'Select mode',
+            options: SELECT_PROPERTIES.mode
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Select size',
+            options: COMMON_OPTIONS.inputSize,
+            defaultValue: 'middle'
+        },
+        variant: {
+            name: 'variant',
+            type: 'select',
+            label: 'Variant',
+            description: 'Select variant',
+            options: SELECT_PROPERTIES.variant,
+            defaultValue: 'outlined'
+        },
+        status: {
+            name: 'status',
+            type: 'select',
+            label: 'Status',
+            description: 'Validation status',
+            options: SELECT_PROPERTIES.status
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the select',
+            defaultValue: false
+        },
+        loading: {
+            name: 'loading',
+            type: 'boolean',
+            label: 'Loading',
+            description: 'Show loading spinner',
+            defaultValue: false
+        },
+        allowClear: {
+            name: 'allowClear',
+            type: 'boolean',
+            label: 'Allow Clear',
+            description: 'Show clear button',
+            defaultValue: false
+        },
+        showSearch: {
+            name: 'showSearch',
+            type: 'boolean',
+            label: 'Show Search',
+            description: 'Enable search functionality',
+            defaultValue: false
+        },
+        virtual: {
+            name: 'virtual',
+            type: 'boolean',
+            label: 'Virtual',
+            description: 'Use virtual scrolling',
+            defaultValue: true
+        },
+        showArrow: {
+            name: 'showArrow',
+            type: 'boolean',
+            label: 'Show Arrow',
+            description: 'Show dropdown arrow',
+            defaultValue: true
+        }
+    },
+    Checkbox: {
+        checked: {
+            name: 'checked',
+            type: 'boolean',
+            label: 'Checked',
+            description: 'Checked state',
+            defaultValue: false
+        },
+        defaultChecked: {
+            name: 'defaultChecked',
+            type: 'boolean',
+            label: 'Default Checked',
+            description: 'Initial checked state',
+            defaultValue: false
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the checkbox',
+            defaultValue: false
+        },
+        indeterminate: {
+            name: 'indeterminate',
+            type: 'boolean',
+            label: 'Indeterminate',
+            description: 'Indeterminate state',
+            defaultValue: false
+        }
+    },
+    Switch: {
+        checked: {
+            name: 'checked',
+            type: 'boolean',
+            label: 'Checked',
+            description: 'Checked state',
+            defaultValue: false
+        },
+        defaultChecked: {
+            name: 'defaultChecked',
+            type: 'boolean',
+            label: 'Default Checked',
+            description: 'Initial checked state',
+            defaultValue: false
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the switch',
+            defaultValue: false
+        },
+        loading: {
+            name: 'loading',
+            type: 'boolean',
+            label: 'Loading',
+            description: 'Show loading state',
+            defaultValue: false
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Switch size',
+            options: [
+                { label: 'Default', value: 'default' },
+                { label: 'Small', value: 'small' }
+            ],
+            defaultValue: 'default'
+        }
+    },
+    Space: {
+        align: {
+            name: 'align',
+            type: 'select',
+            label: 'Align',
+            description: 'Align items',
+            options: SELECT_PROPERTIES.align,
+            defaultValue: 'center'
+        },
+        direction: {
+            name: 'direction',
+            type: 'select',
+            label: 'Direction',
+            description: 'Space direction',
+            options: SELECT_PROPERTIES.direction,
+            defaultValue: 'horizontal'
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Space size',
+            options: [
+                { label: 'Small', value: 'small' },
+                { label: 'Middle', value: 'middle' },
+                { label: 'Large', value: 'large' }
+            ],
+            defaultValue: 'small'
+        },
+        wrap: {
+            name: 'wrap',
+            type: 'boolean',
+            label: 'Wrap',
+            description: 'Auto wrap line',
+            defaultValue: false
+        }
+    },
+    Divider: {
+        type: {
+            name: 'type',
+            type: 'select',
+            label: 'Type',
+            description: 'Divider type',
+            options: [
+                { label: 'Horizontal', value: 'horizontal' },
+                { label: 'Vertical', value: 'vertical' }
+            ],
+            defaultValue: 'horizontal'
+        },
+        orientation: {
+            name: 'orientation',
+            type: 'select',
+            label: 'Orientation',
+            description: 'Text orientation',
+            options: [
+                { label: 'Center', value: 'center' },
+                { label: 'Left', value: 'left' },
+                { label: 'Right', value: 'right' }
+            ],
+            defaultValue: 'center'
+        },
+        dashed: {
+            name: 'dashed',
+            type: 'boolean',
+            label: 'Dashed',
+            description: 'Use dashed line',
+            defaultValue: false
+        },
+        plain: {
+            name: 'plain',
+            type: 'boolean',
+            label: 'Plain',
+            description: 'Plain text style',
+            defaultValue: false
+        }
+    },
+    IconButton: {
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Button size',
+            options: [
+                { label: 'Small', value: 'small' },
+                { label: 'Medium', value: 'medium' },
+                { label: 'Large', value: 'large' }
+            ],
+            defaultValue: 'medium'
+        },
+        color: {
+            name: 'color',
+            type: 'select',
+            label: 'Color',
+            description: 'Button color',
+            options: [
+                { label: 'Default', value: 'default' },
+                { label: 'Primary', value: 'primary' },
+                { label: 'Secondary', value: 'secondary' },
+                { label: 'Error', value: 'error' },
+                { label: 'Info', value: 'info' },
+                { label: 'Success', value: 'success' },
+                { label: 'Warning', value: 'warning' }
+            ],
+            defaultValue: 'default'
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the button',
+            defaultValue: false
+        },
+        edge: {
+            name: 'edge',
+            type: 'select',
+            label: 'Edge',
+            description: 'Position relative to container edge',
+            options: [
+                { label: 'None', value: false },
+                { label: 'Start', value: 'start' },
+                { label: 'End', value: 'end' }
+            ],
+            defaultValue: false
+        }
+    },
+    TextField: {
+        variant: {
+            name: 'variant',
+            type: 'select',
+            label: 'Variant',
+            description: 'TextField variant',
+            options: [
+                { label: 'Outlined', value: 'outlined' },
+                { label: 'Filled', value: 'filled' },
+                { label: 'Standard', value: 'standard' }
+            ],
+            defaultValue: 'outlined'
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'TextField size',
+            options: [
+                { label: 'Small', value: 'small' },
+                { label: 'Medium', value: 'medium' }
+            ],
+            defaultValue: 'medium'
+        },
+        color: {
+            name: 'color',
+            type: 'select',
+            label: 'Color',
+            description: 'TextField color',
+            options: [
+                { label: 'Primary', value: 'primary' },
+                { label: 'Secondary', value: 'secondary' },
+                { label: 'Error', value: 'error' },
+                { label: 'Info', value: 'info' },
+                { label: 'Success', value: 'success' },
+                { label: 'Warning', value: 'warning' }
+            ],
+            defaultValue: 'primary'
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the field',
+            defaultValue: false
+        },
+        required: {
+            name: 'required',
+            type: 'boolean',
+            label: 'Required',
+            description: 'Mark field as required',
+            defaultValue: false
+        },
+        fullWidth: {
+            name: 'fullWidth',
+            type: 'boolean',
+            label: 'Full Width',
+            description: 'Make field full width',
+            defaultValue: false
+        },
+        multiline: {
+            name: 'multiline',
+            type: 'boolean',
+            label: 'Multiline',
+            description: 'Enable multiline input',
+            defaultValue: false
+        },
+        rows: {
+            name: 'rows',
+            type: 'number',
+            label: 'Rows',
+            description: 'Number of rows for multiline',
+            validation: { min: 1, max: 20 },
+            defaultValue: 4
+        }
+    },
+    Chip: {
+        variant: {
+            name: 'variant',
+            type: 'select',
+            label: 'Variant',
+            description: 'Chip variant',
+            options: [
+                { label: 'Filled', value: 'filled' },
+                { label: 'Outlined', value: 'outlined' }
+            ],
+            defaultValue: 'filled'
+        },
+        size: {
+            name: 'size',
+            type: 'select',
+            label: 'Size',
+            description: 'Chip size',
+            options: [
+                { label: 'Small', value: 'small' },
+                { label: 'Medium', value: 'medium' }
+            ],
+            defaultValue: 'medium'
+        },
+        color: {
+            name: 'color',
+            type: 'select',
+            label: 'Color',
+            description: 'Chip color',
+            options: [
+                { label: 'Default', value: 'default' },
+                { label: 'Primary', value: 'primary' },
+                { label: 'Secondary', value: 'secondary' },
+                { label: 'Error', value: 'error' },
+                { label: 'Info', value: 'info' },
+                { label: 'Success', value: 'success' },
+                { label: 'Warning', value: 'warning' }
+            ],
+            defaultValue: 'default'
+        },
+        clickable: {
+            name: 'clickable',
+            type: 'boolean',
+            label: 'Clickable',
+            description: 'Make chip clickable',
+            defaultValue: false
+        },
+        disabled: {
+            name: 'disabled',
+            type: 'boolean',
+            label: 'Disabled',
+            description: 'Disable the chip',
+            defaultValue: false
+        }
+    }
+};
+/**
+ * Get property type based on property name and value
+ */
+export function getPropertyType(propName, value, componentType) {
+    // Check component-specific definitions first
+    if (componentType && COMPONENT_PROPERTIES[componentType]?.[propName]) {
+        return COMPONENT_PROPERTIES[componentType][propName].type;
+    }
+    // Boolean properties
+    if (BOOLEAN_PROPERTIES.has(propName) || typeof value === 'boolean') {
+        return 'boolean';
+    }
+    // Select properties
+    if (SELECT_PROPERTIES[propName]) {
+        return 'select';
+    }
+    // Number properties
+    if (NUMBER_PROPERTIES[propName] || typeof value === 'number') {
+        return 'number';
+    }
+    // Color properties
+    if (COLOR_PROPERTIES.has(propName)) {
+        return 'color';
+    }
+    // Spacing properties
+    if (SPACING_PROPERTIES.has(propName)) {
+        return 'spacing';
+    }
+    // Special cases
+    if (propName === 'size' && typeof value === 'string') {
+        return 'select';
+    }
+    if (propName === 'icon') {
+        return 'icon';
+    }
+    // Default to string
+    return 'string';
+}
+/**
+ * Get property definition for a specific component and property
+ */
+export function getPropertyDefinition(componentType, propName) {
+    return COMPONENT_PROPERTIES[componentType]?.[propName] || null;
+}
+/**
+ * Get select options for a property
+ */
+export function getSelectOptions(propName, componentType) {
+    // Check component-specific definitions first
+    if (componentType && COMPONENT_PROPERTIES[componentType]) {
+        const componentProp = COMPONENT_PROPERTIES[componentType][propName];
+        if (componentProp && componentProp.options) {
+            return componentProp.options;
+        }
+    }
+    // Fall back to common options
+    return SELECT_PROPERTIES[propName] || [];
+}
+/**
+ * Get number constraints for a property
+ */
+export function getNumberConstraints(propName) {
+    return NUMBER_PROPERTIES[propName] || {};
+}
+/**
+ * Check if a property should use a specific editor type
+ */
+export function shouldUseEditor(propName, editorType) {
+    switch (editorType) {
+        case 'boolean':
+            return BOOLEAN_PROPERTIES.has(propName);
+        case 'select':
+            return !!SELECT_PROPERTIES[propName];
+        case 'number':
+            return !!NUMBER_PROPERTIES[propName];
+        case 'color':
+            return COLOR_PROPERTIES.has(propName);
+        case 'spacing':
+            return SPACING_PROPERTIES.has(propName);
+        default:
+            return false;
+    }
+}
+//# sourceMappingURL=propertyDefinitions.js.map