Storybook stories file that showcases the SelectButton component with various configurations and interactive examples. Provides visual documentation and testing scenarios for the component's different states and props. ## Key Components - **Meta Configuration**: Defines story metadata with Storybook controls for title, description, selected state, and disabled state - **Static Stories**: Individual stories showcasing different SelectButton configurations (default, selected, with icons, images, tags) - **Interactive Examples**: Dynamic stories demonstrating group selection behavior with state management ## Usage Example ```typescript // Basic story configuration export const Default: Story = { args: { title: 'Option', description: 'Description text', selected: false, }, } // Interactive group example export const InteractiveGroup = { render: () => { const [selectedId, setSelectedId] = useState('monitor') const options = [ { id: 'monitor', title: 'Monitor', icon: }, { id: 'web', title: 'Web App', icon: }, ] return (
{options.map((option) => ( setSelectedId(option.id)} {...option} /> ))}
) }, } ``` The stories cover all SelectButton variants including icons from Lucide React, images, tags, disabled states, and real-world selection group interactions for comprehensive component testing and documentation.