@tpitre/story-ui 3.0.0 → 3.2.0

package/dist/playground/config/propertyDefinitions.js

@@ -1,809 +0,0 @@
-/**
- * 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