@nlabs/gothamjs
Version:
Platform
143 lines (142 loc) • 11.1 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { FormProvider, useForm } from 'react-hook-form';
import { RadioField } from './RadioField.js';
import { gothamColors } from '../../utils/colorUtils.js';
const meta = {
argTypes: {
color: {
control: 'select',
description: 'The color of the radio group',
options: gothamColors
},
defaultValue: {
control: 'text',
description: 'The default selected value'
},
label: {
control: 'text',
description: 'The label text for the radio group'
},
name: {
control: 'text',
description: 'The name of the radio group'
},
optionClass: {
control: 'text',
description: 'The class name for the radio options'
},
options: {
control: 'object',
description: 'Array of radio options'
}
},
component: RadioField,
decorators: [
(Story)=>{
const methods = useForm();
return /*#__PURE__*/ _jsx(FormProvider, {
...methods,
children: /*#__PURE__*/ _jsx("div", {
className: "p-4 max-w-md",
children: /*#__PURE__*/ _jsx(Story, {})
})
});
}
],
parameters: {
backgrounds: {
default: 'light',
values: [
{
name: 'light',
value: '#ffffff'
},
{
name: 'dark',
value: '#1a1a1a'
}
]
},
layout: 'centered'
},
title: 'Components/RadioField'
};
export default meta;
const defaultOptions = [
{
description: 'This is the first option description',
id: 'option1',
label: 'First Option',
value: '1'
},
{
description: 'This is the second option description',
id: 'option2',
label: 'Second Option',
value: '2'
},
{
description: 'This is the third option description',
id: 'option3',
label: 'Third Option',
value: '3'
}
];
export const Default = {
args: {
label: 'Choose a Color',
name: 'colorSelection',
options: [
{
id: 'red',
label: 'Red',
value: 'red'
},
{
id: 'blue',
label: 'Blue',
value: 'blue'
},
{
id: 'green',
label: 'Green',
value: 'green'
}
]
}
};
export const WithDefaultValue = {
args: {
defaultValue: '2',
label: 'Select an Option',
name: 'radioGroupWithDefault',
options: defaultOptions
}
};
export const WithLongDescriptions = {
args: {
label: 'Select a Plan',
name: 'planSelection',
options: [
{
description: 'Perfect for individuals and small projects. Includes basic features and support.',
id: 'basic',
label: 'Basic Plan',
value: 'basic'
},
{
description: 'Ideal for growing businesses. Includes advanced features, priority support, and team collaboration tools.',
id: 'pro',
label: 'Professional Plan',
value: 'pro'
},
{
description: 'Enterprise-grade solution with all features, dedicated support, and custom integrations.',
id: 'enterprise',
label: 'Enterprise Plan',
value: 'enterprise'
}
]
}
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1JhZGlvRmllbGQvUmFkaW9GaWVsZC5zdG9yaWVzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0Zvcm1Qcm92aWRlciwgdXNlRm9ybX0gZnJvbSAncmVhY3QtaG9vay1mb3JtJztcblxuaW1wb3J0IHtSYWRpb0ZpZWxkfSBmcm9tICcuL1JhZGlvRmllbGQuanMnO1xuaW1wb3J0IHtnb3RoYW1Db2xvcnN9IGZyb20gJy4uLy4uL3V0aWxzL2NvbG9yVXRpbHMuanMnO1xuXG5pbXBvcnQgdHlwZSB7TWV0YSwgU3RvcnlPYmp9IGZyb20gJ0BubGFicy9sZXgvc3Rvcnlib29rJztcblxuY29uc3QgbWV0YTogTWV0YTx0eXBlb2YgUmFkaW9GaWVsZD4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgY29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgY29sb3Igb2YgdGhlIHJhZGlvIGdyb3VwJyxcbiAgICAgIG9wdGlvbnM6IGdvdGhhbUNvbG9yc1xuICAgIH0sXG4gICAgZGVmYXVsdFZhbHVlOiB7XG4gICAgICBjb250cm9sOiAndGV4dCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ1RoZSBkZWZhdWx0IHNlbGVjdGVkIHZhbHVlJ1xuICAgIH0sXG4gICAgbGFiZWw6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGxhYmVsIHRleHQgZm9yIHRoZSByYWRpbyBncm91cCdcbiAgICB9LFxuICAgIG5hbWU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIG5hbWUgb2YgdGhlIHJhZGlvIGdyb3VwJ1xuICAgIH0sXG4gICAgb3B0aW9uQ2xhc3M6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNsYXNzIG5hbWUgZm9yIHRoZSByYWRpbyBvcHRpb25zJ1xuICAgIH0sXG4gICAgb3B0aW9uczoge1xuICAgICAgY29udHJvbDogJ29iamVjdCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ0FycmF5IG9mIHJhZGlvIG9wdGlvbnMnXG4gICAgfVxuICB9LFxuICBjb21wb25lbnQ6IFJhZGlvRmllbGQsXG4gIGRlY29yYXRvcnM6IFtcbiAgICAoU3RvcnkpID0+IHtcbiAgICAgIGNvbnN0IG1ldGhvZHMgPSB1c2VGb3JtKCk7XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInAtNCBtYXgtdy1tZFwiPlxuICAgICAgICAgICAgPFN0b3J5IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvRm9ybVByb3ZpZGVyPlxuICAgICAgKTtcbiAgICB9XG4gIF0sXG4gIHBhcmFtZXRlcnM6IHtcbiAgICBiYWNrZ3JvdW5kczoge1xuICAgICAgZGVmYXVsdDogJ2xpZ2h0JyxcbiAgICAgIHZhbHVlczogW1xuICAgICAgICB7bmFtZTogJ2xpZ2h0JywgdmFsdWU6ICcjZmZmZmZmJ30sXG4gICAgICAgIHtuYW1lOiAnZGFyaycsIHZhbHVlOiAnIzFhMWExYSd9XG4gICAgICBdXG4gICAgfSxcbiAgICBsYXlvdXQ6ICdjZW50ZXJlZCdcbiAgfSxcbiAgdGl0bGU6ICdDb21wb25lbnRzL1JhZGlvRmllbGQnXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xudHlwZSBTdG9yeSA9IFN0b3J5T2JqPHR5cGVvZiBSYWRpb0ZpZWxkPjtcblxuY29uc3QgZGVmYXVsdE9wdGlvbnMgPSBbXG4gIHtcbiAgICBkZXNjcmlwdGlvbjogJ1RoaXMgaXMgdGhlIGZpcnN0IG9wdGlvbiBkZXNjcmlwdGlvbicsXG4gICAgaWQ6ICdvcHRpb24xJyxcbiAgICBsYWJlbDogJ0ZpcnN0IE9wdGlvbicsXG4gICAgdmFsdWU6ICcxJ1xuICB9LFxuICB7XG4gICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSBzZWNvbmQgb3B0aW9uIGRlc2NyaXB0aW9uJyxcbiAgICBpZDogJ29wdGlvbjInLFxuICAgIGxhYmVsOiAnU2Vjb25kIE9wdGlvbicsXG4gICAgdmFsdWU6ICcyJ1xuICB9LFxuICB7XG4gICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSB0aGlyZCBvcHRpb24gZGVzY3JpcHRpb24nLFxuICAgIGlkOiAnb3B0aW9uMycsXG4gICAgbGFiZWw6ICdUaGlyZCBPcHRpb24nLFxuICAgIHZhbHVlOiAnMydcbiAgfVxuXTtcblxuXG5leHBvcnQgY29uc3QgRGVmYXVsdDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBsYWJlbDogJ0Nob29zZSBhIENvbG9yJyxcbiAgICBuYW1lOiAnY29sb3JTZWxlY3Rpb24nLFxuICAgIG9wdGlvbnM6IFtcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdyZWQnLFxuICAgICAgICBsYWJlbDogJ1JlZCcsXG4gICAgICAgIHZhbHVlOiAncmVkJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdibHVlJyxcbiAgICAgICAgbGFiZWw6ICdCbHVlJyxcbiAgICAgICAgdmFsdWU6ICdibHVlJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgaWQ6ICdncmVlbicsXG4gICAgICAgIGxhYmVsOiAnR3JlZW4nLFxuICAgICAgICB2YWx1ZTogJ2dyZWVuJ1xuICAgICAgfVxuICAgIF1cbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhEZWZhdWx0VmFsdWU6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgZGVmYXVsdFZhbHVlOiAnMicsXG4gICAgbGFiZWw6ICdTZWxlY3QgYW4gT3B0aW9uJyxcbiAgICBuYW1lOiAncmFkaW9Hcm91cFdpdGhEZWZhdWx0JyxcbiAgICBvcHRpb25zOiBkZWZhdWx0T3B0aW9uc1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgV2l0aExvbmdEZXNjcmlwdGlvbnM6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgbGFiZWw6ICdTZWxlY3QgYSBQbGFuJyxcbiAgICBuYW1lOiAncGxhblNlbGVjdGlvbicsXG4gICAgb3B0aW9uczogW1xuICAgICAge1xuICAgICAgICBkZXNjcmlwdGlvbjogJ1BlcmZlY3QgZm9yIGluZGl2aWR1YWxzIGFuZCBzbWFsbCBwcm9qZWN0cy4gSW5jbHVkZXMgYmFzaWMgZmVhdHVyZXMgYW5kIHN1cHBvcnQuJyxcbiAgICAgICAgaWQ6ICdiYXNpYycsXG4gICAgICAgIGxhYmVsOiAnQmFzaWMgUGxhbicsXG4gICAgICAgIHZhbHVlOiAnYmFzaWMnXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBkZXNjcmlwdGlvbjogJ0lkZWFsIGZvciBncm93aW5nIGJ1c2luZXNzZXMuIEluY2x1ZGVzIGFkdmFuY2VkIGZlYXR1cmVzLCBwcmlvcml0eSBzdXBwb3J0LCBhbmQgdGVhbSBjb2xsYWJvcmF0aW9uIHRvb2xzLicsXG4gICAgICAgIGlkOiAncHJvJyxcbiAgICAgICAgbGFiZWw6ICdQcm9mZXNzaW9uYWwgUGxhbicsXG4gICAgICAgIHZhbHVlOiAncHJvJ1xuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgZGVzY3JpcHRpb246ICdFbnRlcnByaXNlLWdyYWRlIHNvbHV0aW9uIHdpdGggYWxsIGZlYXR1cmVzLCBkZWRpY2F0ZWQgc3VwcG9ydCwgYW5kIGN1c3RvbSBpbnRlZ3JhdGlvbnMuJyxcbiAgICAgICAgaWQ6ICdlbnRlcnByaXNlJyxcbiAgICAgICAgbGFiZWw6ICdFbnRlcnByaXNlIFBsYW4nLFxuICAgICAgICB2YWx1ZTogJ2VudGVycHJpc2UnXG4gICAgICB9XG4gICAgXVxuICB9XG59O1xuIl0sIm5hbWVzIjpbIkZvcm1Qcm92aWRlciIsInVzZUZvcm0iLCJSYWRpb0ZpZWxkIiwiZ290aGFtQ29sb3JzIiwibWV0YSIsImFyZ1R5cGVzIiwiY29sb3IiLCJjb250cm9sIiwiZGVzY3JpcHRpb24iLCJvcHRpb25zIiwiZGVmYXVsdFZhbHVlIiwibGFiZWwiLCJuYW1lIiwib3B0aW9uQ2xhc3MiLCJjb21wb25lbnQiLCJkZWNvcmF0b3JzIiwiU3RvcnkiLCJtZXRob2RzIiwiZGl2IiwiY2xhc3NOYW1lIiwicGFyYW1ldGVycyIsImJhY2tncm91bmRzIiwiZGVmYXVsdCIsInZhbHVlcyIsInZhbHVlIiwibGF5b3V0IiwidGl0bGUiLCJkZWZhdWx0T3B0aW9ucyIsImlkIiwiRGVmYXVsdCIsImFyZ3MiLCJXaXRoRGVmYXVsdFZhbHVlIiwiV2l0aExvbmdEZXNjcmlwdGlvbnMiXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFRQSxZQUFZLEVBQUVDLE9BQU8sUUFBTyxrQkFBa0I7QUFFdEQsU0FBUUMsVUFBVSxRQUFPLGtCQUFrQjtBQUMzQyxTQUFRQyxZQUFZLFFBQU8sNEJBQTRCO0FBSXZELE1BQU1DLE9BQWdDO0lBQ3BDQyxVQUFVO1FBQ1JDLE9BQU87WUFDTEMsU0FBUztZQUNUQyxhQUFhO1lBQ2JDLFNBQVNOO1FBQ1g7UUFDQU8sY0FBYztZQUNaSCxTQUFTO1lBQ1RDLGFBQWE7UUFDZjtRQUNBRyxPQUFPO1lBQ0xKLFNBQVM7WUFDVEMsYUFBYTtRQUNmO1FBQ0FJLE1BQU07WUFDSkwsU0FBUztZQUNUQyxhQUFhO1FBQ2Y7UUFDQUssYUFBYTtZQUNYTixTQUFTO1lBQ1RDLGFBQWE7UUFDZjtRQUNBQyxTQUFTO1lBQ1BGLFNBQVM7WUFDVEMsYUFBYTtRQUNmO0lBQ0Y7SUFDQU0sV0FBV1o7SUFDWGEsWUFBWTtRQUNWLENBQUNDO1lBQ0MsTUFBTUMsVUFBVWhCO1lBQ2hCLHFCQUNFLEtBQUNEO2dCQUFjLEdBQUdpQixPQUFPOzBCQUN2QixjQUFBLEtBQUNDO29CQUFJQyxXQUFVOzhCQUNiLGNBQUEsS0FBQ0g7OztRQUlUO0tBQ0Q7SUFDREksWUFBWTtRQUNWQyxhQUFhO1lBQ1hDLFNBQVM7WUFDVEMsUUFBUTtnQkFDTjtvQkFBQ1gsTUFBTTtvQkFBU1ksT0FBTztnQkFBUztnQkFDaEM7b0JBQUNaLE1BQU07b0JBQVFZLE9BQU87Z0JBQVM7YUFDaEM7UUFDSDtRQUNBQyxRQUFRO0lBQ1Y7SUFDQUMsT0FBTztBQUNUO0FBRUEsZUFBZXRCLEtBQUs7QUFHcEIsTUFBTXVCLGlCQUFpQjtJQUNyQjtRQUNFbkIsYUFBYTtRQUNib0IsSUFBSTtRQUNKakIsT0FBTztRQUNQYSxPQUFPO0lBQ1Q7SUFDQTtRQUNFaEIsYUFBYTtRQUNib0IsSUFBSTtRQUNKakIsT0FBTztRQUNQYSxPQUFPO0lBQ1Q7SUFDQTtRQUNFaEIsYUFBYTtRQUNib0IsSUFBSTtRQUNKakIsT0FBTztRQUNQYSxPQUFPO0lBQ1Q7Q0FDRDtBQUdELE9BQU8sTUFBTUssVUFBaUI7SUFDNUJDLE1BQU07UUFDSm5CLE9BQU87UUFDUEMsTUFBTTtRQUNOSCxTQUFTO1lBQ1A7Z0JBQ0VtQixJQUFJO2dCQUNKakIsT0FBTztnQkFDUGEsT0FBTztZQUNUO1lBQ0E7Z0JBQ0VJLElBQUk7Z0JBQ0pqQixPQUFPO2dCQUNQYSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRUksSUFBSTtnQkFDSmpCLE9BQU87Z0JBQ1BhLE9BQU87WUFDVDtTQUNEO0lBQ0g7QUFDRixFQUFFO0FBRUYsT0FBTyxNQUFNTyxtQkFBMEI7SUFDckNELE1BQU07UUFDSnBCLGNBQWM7UUFDZEMsT0FBTztRQUNQQyxNQUFNO1FBQ05ILFNBQVNrQjtJQUNYO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTUssdUJBQThCO0lBQ3pDRixNQUFNO1FBQ0puQixPQUFPO1FBQ1BDLE1BQU07UUFDTkgsU0FBUztZQUNQO2dCQUNFRCxhQUFhO2dCQUNib0IsSUFBSTtnQkFDSmpCLE9BQU87Z0JBQ1BhLE9BQU87WUFDVDtZQUNBO2dCQUNFaEIsYUFBYTtnQkFDYm9CLElBQUk7Z0JBQ0pqQixPQUFPO2dCQUNQYSxPQUFPO1lBQ1Q7WUFDQTtnQkFDRWhCLGFBQWE7Z0JBQ2JvQixJQUFJO2dCQUNKakIsT0FBTztnQkFDUGEsT0FBTztZQUNUO1NBQ0Q7SUFDSDtBQUNGLEVBQUUifQ==