eventx-design-system/dist/components/Select.stories.js

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { Select } from './Select';
const meta = {
    title: 'Components/Select',
    component: Select,
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        size: {
            control: { type: 'select' },
            options: ['sm', 'md', 'lg'],
        },
        disabled: {
            control: { type: 'boolean' },
        },
        fullWidth: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
const sampleOptions = [
    { value: 'option1', label: 'Opção 1' },
    { value: 'option2', label: 'Opção 2' },
    { value: 'option3', label: 'Opção 3' },
    { value: 'option4', label: 'Opção 4' },
    { value: 'option5', label: 'Opção 5' },
];
const SelectExample = ({ size = 'md', ...props }) => {
    const [value, setValue] = useState();
    return (_jsx(Select, { options: sampleOptions, value: value, onChange: setValue, placeholder: "Selecione uma op\u00E7\u00E3o", size: size, ...props }));
};
export const Default = {
    render: (args) => _jsx(SelectExample, { ...args }),
};
export const Small = {
    render: (args) => _jsx(SelectExample, { size: "sm", ...args }),
};
export const Large = {
    render: (args) => _jsx(SelectExample, { size: "lg", ...args }),
};
export const WithDisabledOptions = {
    render: (args) => {
        const [value, setValue] = useState();
        const optionsWithDisabled = [
            { value: 'option1', label: 'Opção 1' },
            { value: 'option2', label: 'Opção 2', disabled: true },
            { value: 'option3', label: 'Opção 3' },
            { value: 'option4', label: 'Opção 4', disabled: true },
            { value: 'option5', label: 'Opção 5' },
        ];
        return (_jsx(Select, { placeholder: "Selecione uma op\u00E7\u00E3o", ...args, options: optionsWithDisabled, value: value, onChange: setValue }));
    },
};
export const Disabled = {
    render: () => _jsx(SelectExample, { disabled: true }),
};
export const CustomPlaceholder = {
    render: () => (_jsx(Select, { options: sampleOptions, value: undefined, onChange: () => { }, placeholder: "Escolha sua op\u00E7\u00E3o favorita" })),
};
export const NotFullWidth = {
    render: () => _jsx(SelectExample, { fullWidth: false }),
};