@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/layout/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/select/Select.stories.d.ts

@@ -0,0 +1,94 @@
+import type { StoryObj } from '@storybook/sveltekit';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<import("./types.js").SelectProps, {
+        init: () => Promise<{
+            result: import("./types.js").DropdownInstance[];
+            destroy(): void;
+        } | undefined>;
+    }, "selected">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        options: {
+            control: string;
+            description: string;
+        };
+        selected: {
+            control: string;
+            description: string;
+        };
+        defaultText: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        enableSearch: {
+            control: string;
+            description: string;
+        };
+        preventNoSelection: {
+            control: string;
+            description: string;
+        };
+        width: {
+            control: string;
+            description: string;
+        };
+        dropdownWidth: {
+            control: string;
+            description: string;
+        };
+        dropdownHeight: {
+            control: string;
+            description: string;
+        };
+        placement: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        hide: {
+            control: string;
+            description: string;
+        };
+        className: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
+export declare const Disabled: Story;
+export declare const WithSearch: Story;
+export declare const WithDescriptions: Story;
+export declare const WithIcons: Story;
+export declare const CustomDimensions: Story;
+export declare const CompactSelect: Story;
+export declare const WideSelect: Story;
+export declare const PreventDeselection: Story;
+export declare const MixedOptions: Story;
+export declare const TopPlacement: Story;
+export declare const LeftPlacement: Story;
+export declare const RightPlacement: Story;
+export declare const InteractiveExample: Story;
+export declare const EmptyOptions: Story;
+export declare const SingleOption: Story;
+export declare const LongOptions: Story;
+export declare const AccessibilityTest: Story;
+export declare const ManyOptions: Story;

package/dist/ui/components/select/Select.stories.js

@@ -0,0 +1,396 @@
+import { CheckIcon, UndoIcon } from '../../icons';
+import Select from './Select.svelte';
+// Mock options for stories
+const basicOptions = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+    { label: 'Option 5', value: 'option5' }
+];
+const optionsWithDescriptions = [
+    {
+        label: 'Basic Plan',
+        value: 'basic',
+        description: 'Perfect for individuals and small teams',
+        descriptionTitle: 'Free'
+    },
+    {
+        label: 'Pro Plan',
+        value: 'pro',
+        description: 'Advanced features for growing businesses',
+        descriptionTitle: '$29/month'
+    },
+    {
+        label: 'Enterprise Plan',
+        value: 'enterprise',
+        description: 'Full-scale solution for large organizations',
+        descriptionTitle: 'Custom pricing'
+    }
+];
+const optionsWithIcons = [
+    {
+        label: 'Approved',
+        value: 'approved',
+        labelIcon: CheckIcon,
+        description: 'Item has been approved'
+    },
+    {
+        label: 'Reset',
+        value: 'reset',
+        labelIcon: UndoIcon,
+        description: 'Reset to default state'
+    }
+];
+const mixedOptions = [
+    { label: 'Simple Option', value: 'simple' },
+    { label: 'Disabled Option', value: 'disabled', isDisabled: true },
+    {
+        label: 'Complex Option',
+        value: 'complex',
+        description: 'This option has both description and custom styling',
+        descriptionTitle: 'Pro Feature',
+        className: 'custom-option-class'
+    }
+];
+const meta = {
+    title: 'Ui/Select',
+    component: Select,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A flexible dropdown select component with search, keyboard navigation, and rich option formatting.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'object',
+            description: 'Array of selectable options with labels and values'
+        },
+        selected: {
+            control: 'text',
+            description: 'Currently selected value (bindable)'
+        },
+        defaultText: {
+            control: 'text',
+            description: 'Text to display when no option is selected'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the select is disabled'
+        },
+        enableSearch: {
+            control: 'boolean',
+            description: 'Enable search/filter functionality'
+        },
+        preventNoSelection: {
+            control: 'boolean',
+            description: 'Prevent deselection of the current value'
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the select button'
+        },
+        dropdownWidth: {
+            control: 'text',
+            description: 'Width of the dropdown menu'
+        },
+        dropdownHeight: {
+            control: 'text',
+            description: 'Maximum height of the dropdown menu'
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['top', 'bottom', 'left', 'right'],
+            description: 'Placement of the dropdown relative to the trigger'
+        },
+        hide: {
+            control: 'boolean',
+            description: 'Whether to hide the component'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select an option'
+    }
+};
+export const WithSelection = {
+    args: {
+        options: basicOptions,
+        selected: 'option2',
+        defaultText: 'Select an option'
+    }
+};
+export const Disabled = {
+    args: {
+        options: basicOptions,
+        disabled: true,
+        defaultText: 'Disabled select'
+    }
+};
+// Search functionality
+export const WithSearch = {
+    args: {
+        options: basicOptions,
+        enableSearch: true,
+        defaultText: 'Searchable select'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Enable search functionality to filter options by typing.'
+            }
+        }
+    }
+};
+// Rich content options
+export const WithDescriptions = {
+    args: {
+        options: optionsWithDescriptions,
+        defaultText: 'Choose a plan',
+        dropdownWidth: '300px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Options can include descriptions and titles for rich content display.'
+            }
+        }
+    }
+};
+export const WithIcons = {
+    args: {
+        options: optionsWithIcons,
+        defaultText: 'Select status',
+        dropdownWidth: '250px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Options can include icons alongside labels and descriptions.'
+            }
+        }
+    }
+};
+// Different sizes and layouts
+export const CustomDimensions = {
+    args: {
+        options: basicOptions,
+        width: '300px',
+        dropdownWidth: '350px',
+        dropdownHeight: '150px',
+        defaultText: 'Custom sized select'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Customize the width and height of both the select button and dropdown.'
+            }
+        }
+    }
+};
+export const CompactSelect = {
+    args: {
+        options: basicOptions,
+        width: '120px',
+        dropdownWidth: '120px',
+        defaultText: 'Compact'
+    }
+};
+export const WideSelect = {
+    args: {
+        options: basicOptions,
+        width: '400px',
+        dropdownWidth: '400px',
+        defaultText: 'Wide selection field'
+    }
+};
+// Behavioral variants
+export const PreventDeselection = {
+    args: {
+        options: basicOptions,
+        selected: 'option1',
+        preventNoSelection: true,
+        defaultText: 'Cannot deselect'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Prevent users from deselecting the current option by clicking it again.'
+            }
+        }
+    }
+};
+export const MixedOptions = {
+    args: {
+        options: mixedOptions,
+        defaultText: 'Mixed option types',
+        dropdownWidth: '280px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates a mix of simple, disabled, and complex options with various features.'
+            }
+        }
+    }
+};
+// Placement variations
+export const TopPlacement = {
+    args: {
+        options: basicOptions,
+        placement: 'top',
+        defaultText: 'Dropdown opens above'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Configure dropdown placement relative to the trigger button.'
+            }
+        }
+    }
+};
+export const LeftPlacement = {
+    args: {
+        options: basicOptions,
+        placement: 'left',
+        defaultText: 'Opens to left'
+    }
+};
+export const RightPlacement = {
+    args: {
+        options: basicOptions,
+        placement: 'right',
+        defaultText: 'Opens to right'
+    }
+};
+// Interactive examples
+export const InteractiveExample = {
+    render: (args) => ({
+        Component: Select,
+        props: {
+            ...args,
+            onchange: (event) => {
+                console.log('Selection changed:', event.value);
+                // In a real app, you might update some state here
+                alert(`Selected: ${event.value || 'None'}`);
+            }
+        }
+    }),
+    args: {
+        options: basicOptions,
+        defaultText: 'Click to see change event'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates the change event handler that fires when selection changes.'
+            }
+        }
+    }
+};
+// Edge cases and error states
+export const EmptyOptions = {
+    args: {
+        options: [],
+        defaultText: 'No options available'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Handles the case when no options are provided.'
+            }
+        }
+    }
+};
+export const SingleOption = {
+    args: {
+        options: [{ label: 'Only Option', value: 'only' }],
+        defaultText: 'Single option'
+    }
+};
+export const LongOptions = {
+    args: {
+        options: [
+            {
+                label: 'This is a very long option label that might overflow',
+                value: 'long1',
+                description: 'And this is an even longer description that explains the purpose of this particular option in great detail'
+            },
+            {
+                label: 'Another extremely long option with lots of text',
+                value: 'long2',
+                description: 'Short desc'
+            },
+            {
+                label: 'Short',
+                value: 'short',
+                description: 'But this description is much longer than the label and contains a lot of explanatory text about what this option does'
+            }
+        ],
+        dropdownWidth: '300px',
+        defaultText: 'Long content handling'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tests how the component handles long labels and descriptions with text wrapping.'
+            }
+        }
+    }
+};
+// Accessibility testing
+export const AccessibilityTest = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Accessibility test',
+        id: 'accessible-select'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tests accessibility features like ARIA attributes and keyboard navigation.'
+            }
+        },
+        a11y: {
+            config: {
+                rules: [
+                    { id: 'select-name', enabled: true },
+                    { id: 'aria-valid-attr-value', enabled: true }
+                ]
+            }
+        }
+    }
+};
+// Performance testing with many options
+export const ManyOptions = {
+    args: {
+        options: Array.from({ length: 100 }, (_, i) => ({
+            label: `Option ${i + 1}`,
+            value: `option${i + 1}`,
+            ...(i % 10 === 0 ? { description: `Description for option ${i + 1}` } : {}),
+            ...(i % 15 === 0 ? { isDisabled: true } : {})
+        })),
+        enableSearch: true,
+        defaultText: '100 options with search',
+        dropdownHeight: '200px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Performance test with many options. Search functionality helps manage large lists.'
+            }
+        }
+    }
+};