@nlabs/gothamjs/lib/components/SelectField/SelectField.stories.js

Platform

import { jsx as _jsx } from "react/jsx-runtime";
import { FormProvider, useForm } from 'react-hook-form';
import { SelectField } from './SelectField.js';
import { gothamColors } from '../../utils/colorUtils.js';
const meta = {
    argTypes: {
        color: {
            control: 'select',
            description: 'The color of the select field',
            options: gothamColors
        },
        defaultValue: {
            control: 'text',
            description: 'The default selected value'
        },
        label: {
            control: 'text',
            description: 'The label text for the select field'
        },
        name: {
            control: 'text',
            description: 'The name of the select field'
        },
        options: {
            control: 'object',
            description: 'Array of select options'
        }
    },
    component: SelectField,
    decorators: [
        (Story)=>{
            const methods = useForm();
            return /*#__PURE__*/ _jsx(FormProvider, {
                ...methods,
                children: /*#__PURE__*/ _jsx("div", {
                    className: "flex flex-col items-center justify-center min-h-screen w-full p-4",
                    style: {
                        width: '300px'
                    },
                    children: /*#__PURE__*/ _jsx(Story, {})
                })
            });
        }
    ],
    title: 'Components/SelectField'
};
export default meta;
const defaultOptions = [
    {
        id: 1,
        label: 'First Option',
        value: '1'
    },
    {
        id: 2,
        label: 'Second Option',
        value: '2'
    },
    {
        id: 3,
        label: 'Third Option',
        value: '3'
    }
];
export const Default = {
    args: {
        label: 'Select an Option',
        name: 'selectGroup',
        options: defaultOptions
    }
};
export const WithDefaultValue = {
    args: {
        defaultValue: '2',
        label: 'Select an Option',
        name: 'selectGroupWithDefault',
        options: defaultOptions
    }
};
export const WithIcons = {
    args: {
        label: 'Select a Category',
        name: 'categorySelect',
        options: [
            {
                icon: 'briefcase',
                id: 1,
                label: 'Work',
                value: 'work'
            },
            {
                icon: 'user',
                id: 2,
                label: 'Personal',
                value: 'personal'
            },
            {
                icon: 'shopping-cart',
                id: 3,
                label: 'Shopping',
                value: 'shopping'
            }
        ]
    }
};
export const WithImages = {
    args: {
        label: 'Select a Country',
        name: 'countrySelect',
        options: [
            {
                id: 1,
                image: 'https://flagcdn.com/w20/us.png',
                label: 'United States',
                value: 'us'
            },
            {
                id: 2,
                image: 'https://flagcdn.com/w20/gb.png',
                label: 'United Kingdom',
                value: 'gb'
            },
            {
                id: 3,
                image: 'https://flagcdn.com/w20/ca.png',
                label: 'Canada',
                value: 'ca'
            }
        ]
    }
};
export const WithLongLabels = {
    args: {
        label: 'Select a Plan',
        name: 'planSelect',
        options: [
            {
                id: 1,
                label: 'Basic Plan - Perfect for individuals and small projects',
                value: 'basic'
            },
            {
                id: 2,
                label: 'Professional Plan - Ideal for growing businesses with advanced features',
                value: 'pro'
            },
            {
                id: 3,
                label: 'Enterprise Plan - Full-featured solution with dedicated support',
                value: 'enterprise'
            }
        ]
    }
};

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1NlbGVjdEZpZWxkL1NlbGVjdEZpZWxkLnN0b3JpZXMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Rm9ybVByb3ZpZGVyLCB1c2VGb3JtfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nO1xuXG5pbXBvcnQge1NlbGVjdEZpZWxkfSBmcm9tICcuL1NlbGVjdEZpZWxkLmpzJztcbmltcG9ydCB7Z290aGFtQ29sb3JzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgU2VsZWN0RmllbGQ+ID0ge1xuICBhcmdUeXBlczoge1xuICAgIGNvbG9yOiB7XG4gICAgICBjb250cm9sOiAnc2VsZWN0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNvbG9yIG9mIHRoZSBzZWxlY3QgZmllbGQnLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfSxcbiAgICBkZWZhdWx0VmFsdWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGRlZmF1bHQgc2VsZWN0ZWQgdmFsdWUnXG4gICAgfSxcbiAgICBsYWJlbDoge1xuICAgICAgY29udHJvbDogJ3RleHQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgbGFiZWwgdGV4dCBmb3IgdGhlIHNlbGVjdCBmaWVsZCdcbiAgICB9LFxuICAgIG5hbWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIG5hbWUgb2YgdGhlIHNlbGVjdCBmaWVsZCdcbiAgICB9LFxuICAgIG9wdGlvbnM6IHtcbiAgICAgIGNvbnRyb2w6ICdvYmplY3QnLFxuICAgICAgZGVzY3JpcHRpb246ICdBcnJheSBvZiBzZWxlY3Qgb3B0aW9ucydcbiAgICB9XG4gIH0sXG4gIGNvbXBvbmVudDogU2VsZWN0RmllbGQsXG4gIGRlY29yYXRvcnM6IFtcbiAgICAoU3RvcnkpID0+IHtcbiAgICAgIGNvbnN0IG1ldGhvZHMgPSB1c2VGb3JtKCk7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIG1pbi1oLXNjcmVlbiB3LWZ1bGwgcC00XCIgc3R5bGU9e3t3aWR0aDogJzMwMHB4J319PlxuICAgICAgICAgICAgPFN0b3J5IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRm9ybVByb3ZpZGVyPlxuICAgICAgKTtcbiAgICB9XG4gIF0sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9TZWxlY3RGaWVsZCdcbn07XG5cbmV4cG9ydCBkZWZhdWx0IG1ldGE7XG50eXBlIFN0b3J5ID0gU3RvcnlPYmo8dHlwZW9mIFNlbGVjdEZpZWxkPjtcblxuY29uc3QgZGVmYXVsdE9wdGlvbnMgPSBbXG4gIHtcbiAgICBpZDogMSxcbiAgICBsYWJlbDogJ0ZpcnN0IE9wdGlvbicsXG4gICAgdmFsdWU6ICcxJ1xuICB9LFxuICB7XG4gICAgaWQ6IDIsXG4gICAgbGFiZWw6ICdTZWNvbmQgT3B0aW9uJyxcbiAgICB2YWx1ZTogJzInXG4gIH0sXG4gIHtcbiAgICBpZDogMyxcbiAgICBsYWJlbDogJ1RoaXJkIE9wdGlvbicsXG4gICAgdmFsdWU6ICczJ1xuICB9XG5dO1xuXG5leHBvcnQgY29uc3QgRGVmYXVsdDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ1NlbGVjdCBhbiBPcHRpb24nLFxuICAgIG5hbWU6ICdzZWxlY3RHcm91cCcsXG4gICAgb3B0aW9uczogZGVmYXVsdE9wdGlvbnNcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhEZWZhdWx0VmFsdWU6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgZGVmYXVsdFZhbHVlOiAnMicsXG4gICAgbGFiZWw6ICdTZWxlY3QgYW4gT3B0aW9uJyxcbiAgICBuYW1lOiAnc2VsZWN0R3JvdXBXaXRoRGVmYXVsdCcsXG4gICAgb3B0aW9uczogZGVmYXVsdE9wdGlvbnNcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhJY29uczogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ1NlbGVjdCBhIENhdGVnb3J5JyxcbiAgICBuYW1lOiAnY2F0ZWdvcnlTZWxlY3QnLFxuICAgIG9wdGlvbnM6IFtcbiAgICAgIHtcbiAgICAgICAgaWNvbjogJ2JyaWVmY2FzZScsXG4gICAgICAgIGlkOiAxLFxuICAgICAgICBsYWJlbDogJ1dvcmsnLFxuICAgICAgICB2YWx1ZTogJ3dvcmsnXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpY29uOiAndXNlcicsXG4gICAgICAgIGlkOiAyLFxuICAgICAgICBsYWJlbDogJ1BlcnNvbmFsJyxcbiAgICAgICAgdmFsdWU6ICdwZXJzb25hbCdcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGljb246ICdzaG9wcGluZy1jYXJ0JyxcbiAgICAgICAgaWQ6IDMsXG4gICAgICAgIGxhYmVsOiAnU2hvcHBpbmcnLFxuICAgICAgICB2YWx1ZTogJ3Nob3BwaW5nJ1xuICAgICAgfVxuICAgIF1cbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhJbWFnZXM6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgbGFiZWw6ICdTZWxlY3QgYSBDb3VudHJ5JyxcbiAgICBuYW1lOiAnY291bnRyeVNlbGVjdCcsXG4gICAgb3B0aW9uczogW1xuICAgICAge1xuICAgICAgICBpZDogMSxcbiAgICAgICAgaW1hZ2U6ICdodHRwczovL2ZsYWdjZG4uY29tL3cyMC91cy5wbmcnLFxuICAgICAgICBsYWJlbDogJ1VuaXRlZCBTdGF0ZXMnLFxuICAgICAgICB2YWx1ZTogJ3VzJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6IDIsXG4gICAgICAgIGltYWdlOiAnaHR0cHM6Ly9mbGFnY2RuLmNvbS93MjAvZ2IucG5nJyxcbiAgICAgICAgbGFiZWw6ICdVbml0ZWQgS2luZ2RvbScsXG4gICAgICAgIHZhbHVlOiAnZ2InXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogMyxcbiAgICAgICAgaW1hZ2U6ICdodHRwczovL2ZsYWdjZG4uY29tL3cyMC9jYS5wbmcnLFxuICAgICAgICBsYWJlbDogJ0NhbmFkYScsXG4gICAgICAgIHZhbHVlOiAnY2EnXG4gICAgICB9XG4gICAgXVxuICB9XG59O1xuXG5leHBvcnQgY29uc3QgV2l0aExvbmdMYWJlbHM6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgbGFiZWw6ICdTZWxlY3QgYSBQbGFuJyxcbiAgICBuYW1lOiAncGxhblNlbGVjdCcsXG4gICAgb3B0aW9uczogW1xuICAgICAge1xuICAgICAgICBpZDogMSxcbiAgICAgICAgbGFiZWw6ICdCYXNpYyBQbGFuIC0gUGVyZmVjdCBmb3IgaW5kaXZpZHVhbHMgYW5kIHNtYWxsIHByb2plY3RzJyxcbiAgICAgICAgdmFsdWU6ICdiYXNpYydcbiAgICAgIH0sXG4gICAgICB7XG4gICAgICAgIGlkOiAyLFxuICAgICAgICBsYWJlbDogJ1Byb2Zlc3Npb25hbCBQbGFuIC0gSWRlYWwgZm9yIGdyb3dpbmcgYnVzaW5lc3NlcyB3aXRoIGFkdmFuY2VkIGZlYXR1cmVzJyxcbiAgICAgICAgdmFsdWU6ICdwcm8nXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBpZDogMyxcbiAgICAgICAgbGFiZWw6ICdFbnRlcnByaXNlIFBsYW4gLSBGdWxsLWZlYXR1cmVkIHNvbHV0aW9uIHdpdGggZGVkaWNhdGVkIHN1cHBvcnQnLFxuICAgICAgICB2YWx1ZTogJ2VudGVycHJpc2UnXG4gICAgICB9XG4gICAgXVxuICB9XG59OyJdLCJuYW1lcyI6WyJGb3JtUHJvdmlkZXIiLCJ1c2VGb3JtIiwiU2VsZWN0RmllbGQiLCJnb3RoYW1Db2xvcnMiLCJtZXRhIiwiYXJnVHlwZXMiLCJjb2xvciIsImNvbnRyb2wiLCJkZXNjcmlwdGlvbiIsIm9wdGlvbnMiLCJkZWZhdWx0VmFsdWUiLCJsYWJlbCIsIm5hbWUiLCJjb21wb25lbnQiLCJkZWNvcmF0b3JzIiwiU3RvcnkiLCJtZXRob2RzIiwiZGl2IiwiY2xhc3NOYW1lIiwic3R5bGUiLCJ3aWR0aCIsInRpdGxlIiwiZGVmYXVsdE9wdGlvbnMiLCJpZCIsInZhbHVlIiwiRGVmYXVsdCIsImFyZ3MiLCJXaXRoRGVmYXVsdFZhbHVlIiwiV2l0aEljb25zIiwiaWNvbiIsIldpdGhJbWFnZXMiLCJpbWFnZSIsIldpdGhMb25nTGFiZWxzIl0sIm1hcHBpbmdzIjoiO0FBQUEsU0FBUUEsWUFBWSxFQUFFQyxPQUFPLFFBQU8sa0JBQWtCO0FBRXRELFNBQVFDLFdBQVcsUUFBTyxtQkFBbUI7QUFDN0MsU0FBUUMsWUFBWSxRQUFPLDRCQUE0QjtBQUt2RCxNQUFNQyxPQUFpQztJQUNyQ0MsVUFBVTtRQUNSQyxPQUFPO1lBQ0xDLFNBQVM7WUFDVEMsYUFBYTtZQUNiQyxTQUFTTjtRQUNYO1FBQ0FPLGNBQWM7WUFDWkgsU0FBUztZQUNUQyxhQUFhO1FBQ2Y7UUFDQUcsT0FBTztZQUNMSixTQUFTO1lBQ1RDLGFBQWE7UUFDZjtRQUNBSSxNQUFNO1lBQ0pMLFNBQVM7WUFDVEMsYUFBYTtRQUNmO1FBQ0FDLFNBQVM7WUFDUEYsU0FBUztZQUNUQyxhQUFhO1FBQ2Y7SUFDRjtJQUNBSyxXQUFXWDtJQUNYWSxZQUFZO1FBQ1YsQ0FBQ0M7WUFDQyxNQUFNQyxVQUFVZjtZQUNoQixxQkFDRSxLQUFDRDtnQkFBYyxHQUFHZ0IsT0FBTzswQkFDdkIsY0FBQSxLQUFDQztvQkFBSUMsV0FBVTtvQkFBb0VDLE9BQU87d0JBQUNDLE9BQU87b0JBQU87OEJBQ3ZHLGNBQUEsS0FBQ0w7OztRQUlUO0tBQ0Q7SUFDRE0sT0FBTztBQUNUO0FBRUEsZUFBZWpCLEtBQUs7QUFHcEIsTUFBTWtCLGlCQUFpQjtJQUNyQjtRQUNFQyxJQUFJO1FBQ0paLE9BQU87UUFDUGEsT0FBTztJQUNUO0lBQ0E7UUFDRUQsSUFBSTtRQUNKWixPQUFPO1FBQ1BhLE9BQU87SUFDVDtJQUNBO1FBQ0VELElBQUk7UUFDSlosT0FBTztRQUNQYSxPQUFPO0lBQ1Q7Q0FDRDtBQUVELE9BQU8sTUFBTUMsVUFBaUI7SUFDNUJDLE1BQU07UUFDSmYsT0FBTztRQUNQQyxNQUFNO1FBQ05ILFNBQVNhO0lBQ1g7QUFDRixFQUFFO0FBRUYsT0FBTyxNQUFNSyxtQkFBMEI7SUFDckNELE1BQU07UUFDSmhCLGNBQWM7UUFDZEMsT0FBTztRQUNQQyxNQUFNO1FBQ05ILFNBQVNhO0lBQ1g7QUFDRixFQUFFO0FBRUYsT0FBTyxNQUFNTSxZQUFtQjtJQUM5QkYsTUFBTTtRQUNKZixPQUFPO1FBQ1BDLE1BQU07UUFDTkgsU0FBUztZQUNQO2dCQUNFb0IsTUFBTTtnQkFDTk4sSUFBSTtnQkFDSlosT0FBTztnQkFDUGEsT0FBTztZQUNUO1lBQ0E7Z0JBQ0VLLE1BQU07Z0JBQ05OLElBQUk7Z0JBQ0paLE9BQU87Z0JBQ1BhLE9BQU87WUFDVDtZQUNBO2dCQUNFSyxNQUFNO2dCQUNOTixJQUFJO2dCQUNKWixPQUFPO2dCQUNQYSxPQUFPO1lBQ1Q7U0FDRDtJQUNIO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTU0sYUFBb0I7SUFDL0JKLE1BQU07UUFDSmYsT0FBTztRQUNQQyxNQUFNO1FBQ05ILFNBQVM7WUFDUDtnQkFDRWMsSUFBSTtnQkFDSlEsT0FBTztnQkFDUHBCLE9BQU87Z0JBQ1BhLE9BQU87WUFDVDtZQUNBO2dCQUNFRCxJQUFJO2dCQUNKUSxPQUFPO2dCQUNQcEIsT0FBTztnQkFDUGEsT0FBTztZQUNUO1lBQ0E7Z0JBQ0VELElBQUk7Z0JBQ0pRLE9BQU87Z0JBQ1BwQixPQUFPO2dCQUNQYSxPQUFPO1lBQ1Q7U0FDRDtJQUNIO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTVEsaUJBQXdCO0lBQ25DTixNQUFNO1FBQ0pmLE9BQU87UUFDUEMsTUFBTTtRQUNOSCxTQUFTO1lBQ1A7Z0JBQ0VjLElBQUk7Z0JBQ0paLE9BQU87Z0JBQ1BhLE9BQU87WUFDVDtZQUNBO2dCQUNFRCxJQUFJO2dCQUNKWixPQUFPO2dCQUNQYSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRUQsSUFBSTtnQkFDSlosT0FBTztnQkFDUGEsT0FBTztZQUNUO1NBQ0Q7SUFDSDtBQUNGLEVBQUUifQ==