@nlabs/gothamjs
Version:
Platform
159 lines (158 loc) • 13.6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { I18nextProvider, initReactI18next } from 'react-i18next';
import { i18n } from '../../i18n/index.js';
import { gothamColors } from '../../utils/colorUtils.js';
import { TextField } from './TextField.js';
const meta = {
argTypes: {
borderColor: {
control: 'select',
defaultValue: 'secondary',
description: 'The color of the border',
options: gothamColors
},
borderType: {
control: 'select',
defaultValue: 'underline',
description: 'The type of border of the text field',
options: [
'solid',
'rounded',
'none',
'underline'
]
},
hasError: {
control: 'boolean',
defaultValue: false,
description: 'Whether the text field has an error'
},
labelColor: {
control: 'select',
defaultValue: 'white',
description: 'The color of the label',
options: gothamColors
},
multiline: {
control: 'boolean',
defaultValue: false,
description: 'Whether the text field is multiline'
},
pattern: {
control: 'text',
description: 'The pattern of the text field'
},
placeholderColor: {
control: 'select',
defaultValue: 'secondary',
description: 'The color of the placeholder',
options: gothamColors
},
rows: {
control: 'number',
defaultValue: 1,
description: 'The number of rows of the text field'
},
textColor: {
control: 'select',
defaultValue: 'white',
description: 'The color of the text',
options: gothamColors
}
},
component: TextField,
decorators: [
(Story)=>{
const methods = useForm();
// Initialize i18n for Storybook
const storyI18n = i18n.createInstance();
storyI18n.use(initReactI18next).init({
resources: {
en: {
translation: {
'Textfield placeholder': 'Textfield placeholder',
'Enter email address': 'Enter email address',
'Description': 'Description'
}
}
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
return /*#__PURE__*/ _jsx(I18nextProvider, {
i18n: storyI18n,
children: /*#__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/TextField'
};
export default meta;
export const Default = {
args: {
borderColor: 'secondary',
borderType: 'underline',
disabled: false,
error: false,
label: 'Default TextField',
labelColor: 'black',
name: 'default',
placeholder: 'Textfield placeholder',
placeholderColor: 'secondary',
required: true
}
};
export const Multiline = {
args: {
borderColor: 'secondary',
borderType: 'solid',
disabled: false,
error: false,
label: 'Default TextField',
labelColor: 'black',
multiline: true,
name: 'default',
placeholder: 'Description',
placeholderColor: 'secondary',
required: true,
rows: 1,
textColor: 'black'
}
};
export const WithPattern = {
args: {
disabled: false,
label: 'Email TextField',
name: 'email',
pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$',
placeholder: 'Enter email address'
}
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1RleHRGaWVsZC9UZXh0RmllbGQuc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7Rm9ybVByb3ZpZGVyLCB1c2VGb3JtfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nO1xuaW1wb3J0IHtJMThuZXh0UHJvdmlkZXIsIGluaXRSZWFjdEkxOG5leHR9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHtpMThufSBmcm9tICcuLi8uLi9pMThuL2luZGV4LmpzJztcblxuaW1wb3J0IHtnb3RoYW1Db2xvcnN9IGZyb20gJy4uLy4uL3V0aWxzL2NvbG9yVXRpbHMuanMnO1xuaW1wb3J0IHtUZXh0RmllbGR9IGZyb20gJy4vVGV4dEZpZWxkLmpzJztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAbmxhYnMvbGV4L3N0b3J5Ym9vayc7XG5cbmNvbnN0IG1ldGE6IE1ldGE8dHlwZW9mIFRleHRGaWVsZD4gPSB7XG4gIGFyZ1R5cGVzOiB7XG4gICAgYm9yZGVyQ29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgZGVmYXVsdFZhbHVlOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNvbG9yIG9mIHRoZSBib3JkZXInLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfSxcbiAgICBib3JkZXJUeXBlOiB7XG4gICAgICBjb250cm9sOiAnc2VsZWN0JyxcbiAgICAgIGRlZmF1bHRWYWx1ZTogJ3VuZGVybGluZScsXG4gICAgICBkZXNjcmlwdGlvbjogJ1RoZSB0eXBlIG9mIGJvcmRlciBvZiB0aGUgdGV4dCBmaWVsZCcsXG4gICAgICBvcHRpb25zOiBbJ3NvbGlkJywgJ3JvdW5kZWQnLCAnbm9uZScsICd1bmRlcmxpbmUnXVxuICAgIH0sXG4gICAgaGFzRXJyb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHRWYWx1ZTogZmFsc2UsXG4gICAgICBkZXNjcmlwdGlvbjogJ1doZXRoZXIgdGhlIHRleHQgZmllbGQgaGFzIGFuIGVycm9yJ1xuICAgIH0sXG4gICAgbGFiZWxDb2xvcjoge1xuICAgICAgY29udHJvbDogJ3NlbGVjdCcsXG4gICAgICBkZWZhdWx0VmFsdWU6ICd3aGl0ZScsXG4gICAgICBkZXNjcmlwdGlvbjogJ1RoZSBjb2xvciBvZiB0aGUgbGFiZWwnLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfSxcbiAgICBtdWx0aWxpbmU6IHtcbiAgICAgIGNvbnRyb2w6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHRWYWx1ZTogZmFsc2UsXG4gICAgICBkZXNjcmlwdGlvbjogJ1doZXRoZXIgdGhlIHRleHQgZmllbGQgaXMgbXVsdGlsaW5lJ1xuICAgIH0sXG4gICAgcGF0dGVybjoge1xuICAgICAgY29udHJvbDogJ3RleHQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgcGF0dGVybiBvZiB0aGUgdGV4dCBmaWVsZCdcbiAgICB9LFxuICAgIHBsYWNlaG9sZGVyQ29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgZGVmYXVsdFZhbHVlOiAnc2Vjb25kYXJ5JyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnVGhlIGNvbG9yIG9mIHRoZSBwbGFjZWhvbGRlcicsXG4gICAgICBvcHRpb25zOiBnb3RoYW1Db2xvcnNcbiAgICB9LFxuICAgIHJvd3M6IHtcbiAgICAgIGNvbnRyb2w6ICdudW1iZXInLFxuICAgICAgZGVmYXVsdFZhbHVlOiAxLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgbnVtYmVyIG9mIHJvd3Mgb2YgdGhlIHRleHQgZmllbGQnXG4gICAgfSxcbiAgICB0ZXh0Q29sb3I6IHtcbiAgICAgIGNvbnRyb2w6ICdzZWxlY3QnLFxuICAgICAgZGVmYXVsdFZhbHVlOiAnd2hpdGUnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaGUgY29sb3Igb2YgdGhlIHRleHQnLFxuICAgICAgb3B0aW9uczogZ290aGFtQ29sb3JzXG4gICAgfVxuICB9LFxuICBjb21wb25lbnQ6IFRleHRGaWVsZCxcbiAgZGVjb3JhdG9yczogW1xuICAgIChTdG9yeSkgPT4ge1xuICAgICAgY29uc3QgbWV0aG9kcyA9IHVzZUZvcm0oKTtcblxuICAgICAgLy8gSW5pdGlhbGl6ZSBpMThuIGZvciBTdG9yeWJvb2tcbiAgICAgIGNvbnN0IHN0b3J5STE4biA9IGkxOG4uY3JlYXRlSW5zdGFuY2UoKTtcbiAgICAgIHN0b3J5STE4blxuICAgICAgICAudXNlKGluaXRSZWFjdEkxOG5leHQpXG4gICAgICAgIC5pbml0KHtcbiAgICAgICAgICByZXNvdXJjZXM6IHtcbiAgICAgICAgICAgIGVuOiB7XG4gICAgICAgICAgICAgIHRyYW5zbGF0aW9uOiB7XG4gICAgICAgICAgICAgICAgJ1RleHRmaWVsZCBwbGFjZWhvbGRlcic6ICdUZXh0ZmllbGQgcGxhY2Vob2xkZXInLFxuICAgICAgICAgICAgICAgICdFbnRlciBlbWFpbCBhZGRyZXNzJzogJ0VudGVyIGVtYWlsIGFkZHJlc3MnLFxuICAgICAgICAgICAgICAgICdEZXNjcmlwdGlvbic6ICdEZXNjcmlwdGlvbidcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgIH0sXG4gICAgICAgICAgbG5nOiAnZW4nLFxuICAgICAgICAgIGZhbGxiYWNrTG5nOiAnZW4nLFxuICAgICAgICAgIGludGVycG9sYXRpb246IHtcbiAgICAgICAgICAgIGVzY2FwZVZhbHVlOiBmYWxzZSxcbiAgICAgICAgICB9LFxuICAgICAgICB9KTtcblxuICAgICAgcmV0dXJuIChcbiAgICAgICAgPEkxOG5leHRQcm92aWRlciBpMThuPXtzdG9yeUkxOG59PlxuICAgICAgICAgIDxGb3JtUHJvdmlkZXIgey4uLm1ldGhvZHN9PlxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJwLTQgbWF4LXctbWRcIj5cbiAgICAgICAgICAgICAgPFN0b3J5IC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L0Zvcm1Qcm92aWRlcj5cbiAgICAgICAgPC9JMThuZXh0UHJvdmlkZXI+XG4gICAgICApO1xuICAgIH1cbiAgXSxcbiAgcGFyYW1ldGVyczoge1xuICAgIGJhY2tncm91bmRzOiB7XG4gICAgICBkZWZhdWx0OiAnbGlnaHQnLFxuICAgICAgdmFsdWVzOiBbXG4gICAgICAgIHtuYW1lOiAnbGlnaHQnLCB2YWx1ZTogJyNmZmZmZmYnfSxcbiAgICAgICAge25hbWU6ICdkYXJrJywgdmFsdWU6ICcjMWExYTFhJ31cbiAgICAgIF1cbiAgICB9LFxuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0aXRsZTogJ0NvbXBvbmVudHMvVGV4dEZpZWxkJ1xufTtcblxuZXhwb3J0IGRlZmF1bHQgbWV0YTtcbnR5cGUgU3RvcnkgPSBTdG9yeU9iajx0eXBlb2YgVGV4dEZpZWxkPjtcblxuZXhwb3J0IGNvbnN0IERlZmF1bHQ6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgYm9yZGVyQ29sb3I6ICdzZWNvbmRhcnknLFxuICAgIGJvcmRlclR5cGU6ICd1bmRlcmxpbmUnLFxuICAgIGRpc2FibGVkOiBmYWxzZSxcbiAgICBlcnJvcjogZmFsc2UsXG4gICAgbGFiZWw6ICdEZWZhdWx0IFRleHRGaWVsZCcsXG4gICAgbGFiZWxDb2xvcjogJ2JsYWNrJyxcbiAgICBuYW1lOiAnZGVmYXVsdCcsXG4gICAgcGxhY2Vob2xkZXI6ICdUZXh0ZmllbGQgcGxhY2Vob2xkZXInLFxuICAgIHBsYWNlaG9sZGVyQ29sb3I6ICdzZWNvbmRhcnknLFxuICAgIHJlcXVpcmVkOiB0cnVlXG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBNdWx0aWxpbmU6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgYm9yZGVyQ29sb3I6ICdzZWNvbmRhcnknLFxuICAgIGJvcmRlclR5cGU6ICdzb2xpZCcsXG4gICAgZGlzYWJsZWQ6IGZhbHNlLFxuICAgIGVycm9yOiBmYWxzZSxcbiAgICBsYWJlbDogJ0RlZmF1bHQgVGV4dEZpZWxkJyxcbiAgICBsYWJlbENvbG9yOiAnYmxhY2snLFxuICAgIG11bHRpbGluZTogdHJ1ZSxcbiAgICBuYW1lOiAnZGVmYXVsdCcsXG4gICAgcGxhY2Vob2xkZXI6ICdEZXNjcmlwdGlvbicsXG4gICAgcGxhY2Vob2xkZXJDb2xvcjogJ3NlY29uZGFyeScsXG4gICAgcmVxdWlyZWQ6IHRydWUsXG4gICAgcm93czogMSxcbiAgICB0ZXh0Q29sb3I6ICdibGFjaydcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFdpdGhQYXR0ZXJuOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGRpc2FibGVkOiBmYWxzZSxcbiAgICBsYWJlbDogJ0VtYWlsIFRleHRGaWVsZCcsXG4gICAgbmFtZTogJ2VtYWlsJyxcbiAgICBwYXR0ZXJuOiAnW2EtejAtOS5fJSstXStAW2EtejAtOS4tXStcXFxcLlthLXpdezIsfSQnLFxuICAgIHBsYWNlaG9sZGVyOiAnRW50ZXIgZW1haWwgYWRkcmVzcydcbiAgfVxufTsiXSwibmFtZXMiOlsiUmVhY3QiLCJGb3JtUHJvdmlkZXIiLCJ1c2VGb3JtIiwiSTE4bmV4dFByb3ZpZGVyIiwiaW5pdFJlYWN0STE4bmV4dCIsImkxOG4iLCJnb3RoYW1Db2xvcnMiLCJUZXh0RmllbGQiLCJtZXRhIiwiYXJnVHlwZXMiLCJib3JkZXJDb2xvciIsImNvbnRyb2wiLCJkZWZhdWx0VmFsdWUiLCJkZXNjcmlwdGlvbiIsIm9wdGlvbnMiLCJib3JkZXJUeXBlIiwiaGFzRXJyb3IiLCJsYWJlbENvbG9yIiwibXVsdGlsaW5lIiwicGF0dGVybiIsInBsYWNlaG9sZGVyQ29sb3IiLCJyb3dzIiwidGV4dENvbG9yIiwiY29tcG9uZW50IiwiZGVjb3JhdG9ycyIsIlN0b3J5IiwibWV0aG9kcyIsInN0b3J5STE4biIsImNyZWF0ZUluc3RhbmNlIiwidXNlIiwiaW5pdCIsInJlc291cmNlcyIsImVuIiwidHJhbnNsYXRpb24iLCJsbmciLCJmYWxsYmFja0xuZyIsImludGVycG9sYXRpb24iLCJlc2NhcGVWYWx1ZSIsImRpdiIsImNsYXNzTmFtZSIsInBhcmFtZXRlcnMiLCJiYWNrZ3JvdW5kcyIsImRlZmF1bHQiLCJ2YWx1ZXMiLCJuYW1lIiwidmFsdWUiLCJsYXlvdXQiLCJ0aXRsZSIsIkRlZmF1bHQiLCJhcmdzIiwiZGlzYWJsZWQiLCJlcnJvciIsImxhYmVsIiwicGxhY2Vob2xkZXIiLCJyZXF1aXJlZCIsIk11bHRpbGluZSIsIldpdGhQYXR0ZXJuIl0sIm1hcHBpbmdzIjoiO0FBQUEsT0FBT0EsV0FBVyxRQUFRO0FBQzFCLFNBQVFDLFlBQVksRUFBRUMsT0FBTyxRQUFPLGtCQUFrQjtBQUN0RCxTQUFRQyxlQUFlLEVBQUVDLGdCQUFnQixRQUFPLGdCQUFnQjtBQUNoRSxTQUFRQyxJQUFJLFFBQU8sc0JBQXNCO0FBRXpDLFNBQVFDLFlBQVksUUFBTyw0QkFBNEI7QUFDdkQsU0FBUUMsU0FBUyxRQUFPLGlCQUFpQjtBQUl6QyxNQUFNQyxPQUErQjtJQUNuQ0MsVUFBVTtRQUNSQyxhQUFhO1lBQ1hDLFNBQVM7WUFDVEMsY0FBYztZQUNkQyxhQUFhO1lBQ2JDLFNBQVNSO1FBQ1g7UUFDQVMsWUFBWTtZQUNWSixTQUFTO1lBQ1RDLGNBQWM7WUFDZEMsYUFBYTtZQUNiQyxTQUFTO2dCQUFDO2dCQUFTO2dCQUFXO2dCQUFRO2FBQVk7UUFDcEQ7UUFDQUUsVUFBVTtZQUNSTCxTQUFTO1lBQ1RDLGNBQWM7WUFDZEMsYUFBYTtRQUNmO1FBQ0FJLFlBQVk7WUFDVk4sU0FBUztZQUNUQyxjQUFjO1lBQ2RDLGFBQWE7WUFDYkMsU0FBU1I7UUFDWDtRQUNBWSxXQUFXO1lBQ1RQLFNBQVM7WUFDVEMsY0FBYztZQUNkQyxhQUFhO1FBQ2Y7UUFDQU0sU0FBUztZQUNQUixTQUFTO1lBQ1RFLGFBQWE7UUFDZjtRQUNBTyxrQkFBa0I7WUFDaEJULFNBQVM7WUFDVEMsY0FBYztZQUNkQyxhQUFhO1lBQ2JDLFNBQVNSO1FBQ1g7UUFDQWUsTUFBTTtZQUNKVixTQUFTO1lBQ1RDLGNBQWM7WUFDZEMsYUFBYTtRQUNmO1FBQ0FTLFdBQVc7WUFDVFgsU0FBUztZQUNUQyxjQUFjO1lBQ2RDLGFBQWE7WUFDYkMsU0FBU1I7UUFDWDtJQUNGO0lBQ0FpQixXQUFXaEI7SUFDWGlCLFlBQVk7UUFDVixDQUFDQztZQUNDLE1BQU1DLFVBQVV4QjtZQUVoQixnQ0FBZ0M7WUFDaEMsTUFBTXlCLFlBQVl0QixLQUFLdUIsY0FBYztZQUNyQ0QsVUFDR0UsR0FBRyxDQUFDekIsa0JBQ0owQixJQUFJLENBQUM7Z0JBQ0pDLFdBQVc7b0JBQ1RDLElBQUk7d0JBQ0ZDLGFBQWE7NEJBQ1gseUJBQXlCOzRCQUN6Qix1QkFBdUI7NEJBQ3ZCLGVBQWU7d0JBQ2pCO29CQUNGO2dCQUNGO2dCQUNBQyxLQUFLO2dCQUNMQyxhQUFhO2dCQUNiQyxlQUFlO29CQUNiQyxhQUFhO2dCQUNmO1lBQ0Y7WUFFRixxQkFDRSxLQUFDbEM7Z0JBQWdCRSxNQUFNc0I7MEJBQ3JCLGNBQUEsS0FBQzFCO29CQUFjLEdBQUd5QixPQUFPOzhCQUN2QixjQUFBLEtBQUNZO3dCQUFJQyxXQUFVO2tDQUNiLGNBQUEsS0FBQ2Q7Ozs7UUFLWDtLQUNEO0lBQ0RlLFlBQVk7UUFDVkMsYUFBYTtZQUNYQyxTQUFTO1lBQ1RDLFFBQVE7Z0JBQ047b0JBQUNDLE1BQU07b0JBQVNDLE9BQU87Z0JBQVM7Z0JBQ2hDO29CQUFDRCxNQUFNO29CQUFRQyxPQUFPO2dCQUFTO2FBQ2hDO1FBQ0g7UUFDQUMsUUFBUTtJQUNWO0lBQ0FDLE9BQU87QUFDVDtBQUVBLGVBQWV2QyxLQUFLO0FBR3BCLE9BQU8sTUFBTXdDLFVBQWlCO0lBQzVCQyxNQUFNO1FBQ0p2QyxhQUFhO1FBQ2JLLFlBQVk7UUFDWm1DLFVBQVU7UUFDVkMsT0FBTztRQUNQQyxPQUFPO1FBQ1BuQyxZQUFZO1FBQ1oyQixNQUFNO1FBQ05TLGFBQWE7UUFDYmpDLGtCQUFrQjtRQUNsQmtDLFVBQVU7SUFDWjtBQUNGLEVBQUU7QUFFRixPQUFPLE1BQU1DLFlBQW1CO0lBQzlCTixNQUFNO1FBQ0p2QyxhQUFhO1FBQ2JLLFlBQVk7UUFDWm1DLFVBQVU7UUFDVkMsT0FBTztRQUNQQyxPQUFPO1FBQ1BuQyxZQUFZO1FBQ1pDLFdBQVc7UUFDWDBCLE1BQU07UUFDTlMsYUFBYTtRQUNiakMsa0JBQWtCO1FBQ2xCa0MsVUFBVTtRQUNWakMsTUFBTTtRQUNOQyxXQUFXO0lBQ2I7QUFDRixFQUFFO0FBRUYsT0FBTyxNQUFNa0MsY0FBcUI7SUFDaENQLE1BQU07UUFDSkMsVUFBVTtRQUNWRSxPQUFPO1FBQ1BSLE1BQU07UUFDTnpCLFNBQVM7UUFDVGtDLGFBQWE7SUFDZjtBQUNGLEVBQUUifQ==