From 767e98197252f1c7f53feb5c07a3d1667c0989c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Wed, 20 Sep 2023 12:05:07 +0200 Subject: [PATCH 1/8] button stories --- src/components/button/ButtonIcon.stories.mdx | 175 ------------------ src/components/button/ButtonIcon.stories.tsx | 163 ++++++++++++++++ .../button/ButtonIconLink.stories.mdx | 76 -------- .../button/ButtonIconLink.stories.tsx | 103 +++++++++++ src/components/button/ButtonLink.stories.mdx | 105 ----------- src/components/button/ButtonLink.stories.tsx | 111 +++++++++++ 6 files changed, 377 insertions(+), 356 deletions(-) delete mode 100644 src/components/button/ButtonIcon.stories.mdx create mode 100644 src/components/button/ButtonIcon.stories.tsx delete mode 100644 src/components/button/ButtonIconLink.stories.mdx create mode 100644 src/components/button/ButtonIconLink.stories.tsx delete mode 100644 src/components/button/ButtonLink.stories.mdx create mode 100644 src/components/button/ButtonLink.stories.tsx diff --git a/src/components/button/ButtonIcon.stories.mdx b/src/components/button/ButtonIcon.stories.mdx deleted file mode 100644 index 4fdc721b..00000000 --- a/src/components/button/ButtonIcon.stories.mdx +++ /dev/null @@ -1,175 +0,0 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Theme } from '../../../.storybook/components' -import { Tone, Mode, Size } from '../types' -import { ButtonVariant } from './types' -import { ButtonIcon } from './ButtonIcon' - - - -# ButtonIcon - -export const Template = ({ ...args }) => - - - - {Template.bind({})} - - - -### Props - - - -All the other externally defined props are - -``` -React.DetailedHTMLProps, HTMLButtonElement> -``` - - - - - -Additionally, all the `button.modeVariantTone` themes are used. See [Button](/docs/components-button-button--default-story#theme). - -## Mode - -The `Mode` determines if the component is placed on LIGHT or DARK background. - - - - - - -
- -
- - - -## Variants - -The `Variant` determine if there is a background fill and a border. The `transparent` variant, while being transparent, still keep the same size as the other variants. - - - - - - - - - - - - - -## Size - -The size determine the padding between the button text and its border. - - - - - - - - - - - - - -## Tone - -The tone of the button determine it's background color. Given the prop, the component will look at the Tailwind config to determine its color. - -For additional information about Tailwind config, please refer to the [Tailwind documentation on colors](https://tailwindcss.com/docs/customizing-colors). - - - - - - - - - - - - - - - - - - - - - - -## Tone Custom - -If the provided colors are not satisfying the needs of a project, it is possible to add your own colors. In the following example, it is moderated what needs to be added to the `reactui.config.js`. See [ReactUI Integrations](https://github.com/aboutbits/react-ui-integrations) for more information. - -```js -module.exports = { - button: { - variantTone: { - SOLID: { - purple: - 'bg-purple-500 hover:bg-purple-600 text-white outline-purple-500', - }, - GHOST: { - purple: - 'hover:bg-purple-50 focus:bg-purple-50 border-purple-500 focus:border-transparent text-purple-500 outline-purple-500', - }, - TRANSPARENT: { - purple: 'hover:bg-purple-50 text-purple-500 focus:outline-purple-500', - }, - }, - }, -} -``` - - - - - - diff --git a/src/components/button/ButtonIcon.stories.tsx b/src/components/button/ButtonIcon.stories.tsx new file mode 100644 index 00000000..30533494 --- /dev/null +++ b/src/components/button/ButtonIcon.stories.tsx @@ -0,0 +1,163 @@ +import { + Controls, + Description, + Markdown, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { Source } from '@storybook/blocks' +import { Theme } from '../../../.storybook/components' +import { Mode, Size, Tone } from '../types' +import { ButtonVariant } from './types' +import { ButtonIcon } from './ButtonIcon' + +const icons = { + options: ['Info', 'Add'], + mapping: { + Info: IconInfo, + Add: IconAdd, + }, +} + +const meta = { + component: ButtonIcon, + args: { + disabled: false, + mode: Mode.Light, + variant: ButtonVariant.Solid, + size: Size.Md, + tone: Tone.Primary, + icon: IconAdd, + }, + argTypes: { + icon: icons, + }, + parameters: { + docs: { + page: () => ( + <> + + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Theme component="button" items={['buttonIcon']} /> + <Markdown> + Additionally, all the `button.modeVariantTone` themes are used. See + [Button](/docs/components-button-button--default-story#theme). + </Markdown> + <Stories /> + <Source + code={ + 'module.exports = {\n' + + ' button: {\n' + + ' variantTone: {\n' + + ' SOLID: {\n' + + ' purple:\n' + + " 'bg-purple-500 hover:bg-purple-600 text-white outline-purple-500',\n" + + ' },\n' + + ' GHOST: {\n' + + ' purple:\n' + + " 'hover:bg-purple-50 focus:bg-purple-50 border-purple-500 focus:border-transparent text-purple-500 outline-purple-500',\n" + + ' },\n' + + ' TRANSPARENT: {\n' + + " purple: 'hover:bg-purple-50 text-purple-500 focus:outline-purple-500',\n" + + ' },\n' + + ' },\n' + + ' },\n' + + '}' + } + ></Source> + </> + ), + }, + }, +} satisfies Meta<typeof ButtonIcon> +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +/** + * The `Mode` determines if the component is placed on LIGHT or DARK background. + */ + +export const Modes: Story = { + render: (args) => ( + <div className="flex flex-row items-center gap-6"> + <ButtonIcon {...args} mode={Mode.Light} /> + <div className="bg-neutral-700 p-5"> + <ButtonIcon {...args} mode={Mode.Dark} /> + </div> + </div> + ), +} + +export const Variants: Story = { + render: (args) => ( + <div className="flex flex-row items-center gap-6"> + <ButtonIcon {...args} variant={ButtonVariant.Solid} /> + <ButtonIcon {...args} variant={ButtonVariant.Ghost} /> + <ButtonIcon {...args} variant={ButtonVariant.Transparent} /> + </div> + ), + parameters: { + docs: { + description: { + story: + 'The `Variant` determine if there is a background fill and a border. The `transparent` variant, while being transparent, still keep the same size as the other variants.\n', + }, + }, + }, +} + +/** + * The size determine the padding between the button text and its border. + */ + +export const Sizes: Story = { + render: (args) => ( + <div className="flex flex-row items-center gap-6"> + <ButtonIcon {...args} size={Size.Sm} /> + <ButtonIcon {...args} size={Size.Md} /> + <ButtonIcon {...args} size={Size.Lg} /> + </div> + ), +} + +/** + * he tone of the button determine it's background color. Given the prop, the component will look at the Tailwind config to determine its color. + * + * For additional information about Tailwind config, please refer to the [Tailwind documentation on colors](https://tailwindcss.com/docs/customizing-colors). + */ +export const Tones: Story = { + render: (args) => ( + <div className="flex flex-row items-center gap-6"> + <ButtonIcon {...args} tone={Tone.Primary} /> + <ButtonIcon {...args} tone={Tone.Neutral} /> + <ButtonIcon {...args} tone={Tone.Success} /> + <ButtonIcon {...args} tone={Tone.Warning} /> + <ButtonIcon {...args} tone={Tone.Critical} /> + <ButtonIcon {...args} tone={Tone.Informative} /> + </div> + ), +} + +/** + * If the provided colors are not satisfying the needs of a project, it is possible to add your own colors. In the following example, it is moderated what needs to be added to the `reactui.config.js`. See [ReactUI Integrations](https://github.com/aboutbits/react-ui-integrations) for more information. + */ + +export const CustomPurple: Story = { + render: (args) => ( + <ButtonIcon + {...args} + className="bg-purple-500 text-white outline-purple-500 hover:bg-purple-600" + /> + ), +} diff --git a/src/components/button/ButtonIconLink.stories.mdx b/src/components/button/ButtonIconLink.stories.mdx deleted file mode 100644 index 280c5646..00000000 --- a/src/components/button/ButtonIconLink.stories.mdx +++ /dev/null @@ -1,76 +0,0 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Tone, Mode, Size } from '../types' -import { ButtonVariant } from './types' -import { ButtonIconLink } from './ButtonIconLink' - -<Meta title="Components/Button/ButtonIconLink" component={ButtonIconLink} /> - -# ButtonIconLink - -export const Template = ({ ...args }) => <ButtonIconLink {...args} /> - -<Canvas> - <Story - name="Default" - args={{ - href: '#', - disabled: false, - mode: Mode.Light, - variant: ButtonVariant.Solid, - size: Size.Md, - tone: Tone.Primary, - icon: 'Add', - }} - argTypes={{ - mode: { - options: Object.values(Mode), - control: { type: 'radio' }, - }, - variant: { - options: Object.values(ButtonVariant), - control: { type: 'radio' }, - }, - size: { - options: Object.values(Size), - control: { type: 'radio' }, - }, - tone: { - options: Object.values(Tone), - control: { type: 'select' }, - }, - icon: { - options: ['Add', 'Info'], - mapping: { Add: IconAdd, Info: IconInfo }, - control: { type: 'select' }, - }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - - - -All themes are the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - -## Mode - -The mode is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - -## Variants - -The variants are the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - -## Size - -The size is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - -## Tone - -The tone is the same as for the [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx new file mode 100644 index 00000000..6adfe837 --- /dev/null +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -0,0 +1,103 @@ +import { + Controls, + Description, + Markdown, + Primary, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { Mode, Size, Tone } from '../types' +import { ButtonVariant } from './types' +import { ButtonIconLink } from './ButtonIconLink' + +const icons = { + options: ['Info', 'Add'], + mapping: { + Info: IconInfo, + Add: IconAdd, + }, +} + +const meta = { + component: ButtonIconLink, + args: { + href: '#', + disabled: false, + mode: Mode.Light, + variant: ButtonVariant.Solid, + size: Size.Md, + tone: Tone.Primary, + icon: IconAdd, + }, + argTypes: { + mode: { + options: Object.values(Mode), + control: { type: 'radio' }, + }, + variant: { + options: Object.values(ButtonVariant), + control: { type: 'radio' }, + }, + size: { + options: Object.values(Size), + control: { type: 'radio' }, + }, + tone: { + options: Object.values(Tone), + control: { type: 'select' }, + }, + icon: { + options: ['Info', 'Add'], + mapping: { + Info: IconInfo, + Add: IconAdd, + }, + control: { type: 'select' }, + }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Markdown> + All themes are the same as for the + [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). + </Markdown> + <Subheading>Mode</Subheading> + <Markdown> + The mode is the same as for the + [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). + </Markdown> + <Subheading>Variants</Subheading> + <Markdown> + The variants are the same as for the + [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). + </Markdown> + <Subheading>Size</Subheading>{' '} + <Markdown> + The size is the same as for the + [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). + </Markdown> + <Subheading>Tone</Subheading> + <Markdown> + The tone is the same as for the + [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). + </Markdown> + </> + ), + }, + }, +} satisfies Meta<typeof ButtonIconLink> +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} diff --git a/src/components/button/ButtonLink.stories.mdx b/src/components/button/ButtonLink.stories.mdx deleted file mode 100644 index 362fcaf6..00000000 --- a/src/components/button/ButtonLink.stories.mdx +++ /dev/null @@ -1,105 +0,0 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import { Tone, Mode, Size } from '../types' -import { ButtonVariant } from './types' -import { ButtonLink } from './ButtonLink' - -<Meta title="Components/Button/ButtonLink" component={ButtonLink} /> - -# ButtonLink - -The ButtonLink component has the looks of a Button, but is an anchor tag under the hood. -You can define the type of link in the ReactUIProvider. By default, it will be a plain HTML anchor tag. - -export const Template = ({ children, ...args }) => ( - <ButtonLink {...args}>{children}</ButtonLink> -) - -<Canvas> - <Story - name="Default" - args={{ - children: 'Default Button', - href: '#ButtonLink', - disabled: false, - internal: true, - mode: Mode.Light, - variant: ButtonVariant.Solid, - size: Size.Md, - tone: Tone.Primary, - iconStart: 'None', - iconEnd: 'None', - }} - argTypes={{ - mode: { - options: Object.values(Mode), - control: { type: 'radio' }, - }, - variant: { - options: Object.values(ButtonVariant), - control: { type: 'radio' }, - }, - size: { - options: Object.values(Size), - control: { type: 'radio' }, - }, - tone: { - options: Object.values(Tone), - control: { type: 'select' }, - }, - iconStart: { - options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, - control: { type: 'select' }, - }, - iconEnd: { - options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, - control: { type: 'select' }, - }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> - -All the other externally defined props are - -``` -AnchorHTMLAttributes<HTMLAnchorElement> -``` - - - -All themes are the same as for the [Button](/docs/components-button-button--default-story#theme). - -## Examples - -<Canvas> - <Story name="External link"> - <ButtonLink href="/" internal={false}> - External link - </ButtonLink> - </Story> -</Canvas> - -## Mode - -The mode is the same as for the [Button](/docs/components-button-button--default-story#size). - -## Variants - -The variants are the same as for the [Button](/docs/components-button-button--default-story#variants). - -## Size - -The size is the same as for the [Button](/docs/components-button-button--default-story#size). - -## Tone - -The tone is the same as for the [Button](/docs/components-button-button--default-story#tone). diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx new file mode 100644 index 00000000..25b20ab6 --- /dev/null +++ b/src/components/button/ButtonLink.stories.tsx @@ -0,0 +1,111 @@ +import { ButtonLink } from './ButtonLink' +import { Mode, Size, Tone } from '../types' +import { ButtonVariant } from './types' +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { + Controls, + Description, + Markdown, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' + +const meta = { + component: ButtonLink, + title: 'Components/button/ButtonLink', + args: { + children: 'Default Button', + href: '#ButtonLink', + disabled: false, + internal: true, + mode: Mode.Light, + variant: ButtonVariant.Solid, + size: Size.Md, + tone: Tone.Primary, + iconStart: undefined, + iconEnd: undefined, + }, + argTypes: { + mode: { + options: Object.values(Mode), + control: { type: 'radio' }, + }, + variant: { + options: Object.values(ButtonVariant), + control: { type: 'radio' }, + }, + size: { + options: Object.values(Size), + control: { type: 'radio' }, + }, + tone: { + options: Object.values(Tone), + control: { type: 'select' }, + }, + iconStart: { + options: ['None', 'Add', 'Info'], + mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + control: { type: 'select' }, + }, + iconEnd: { + options: ['None', 'Add', 'Info'], + mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + control: { type: 'select' }, + }, + }, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Markdown> + All themes are the same as for the + [Button](/docs/components-button-button--default-story#theme). + </Markdown> + <Stories /> + <Subheading>Mode</Subheading> + <Markdown> + The mode is the same as for the + [Button](/docs/components-button-button--default-story#size). + </Markdown> + <Subheading>Size</Subheading> + <Markdown> + The size is the same as for the + [Button](/docs/components-button-button--default-story#size). + </Markdown> + <Subheading>Variants</Subheading> + <Markdown> + The variants are the same as for the + [Button](/docs/components-button-button--default-story#variants). + </Markdown> + <Subheading>Tone</Subheading> + <Markdown> + The tone is the same as for the + [Button](/docs/components-button-button--default-story#tone). + </Markdown> + </> + ), + }, + }, +} satisfies Meta<typeof ButtonLink> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + +export const ExternalLink: Story = { + args: { + href: '/', + internal: false, + }, +} From f9f05632792ee7bfb3d2c42d776f8c4d09af1ef4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Wed, 20 Sep 2023 15:07:57 +0200 Subject: [PATCH 2/8] submit button stories --- .../button/SubmitButton.stories.mdx | 75 ------------------- .../button/SubmitButton.stories.tsx | 71 ++++++++++++++++++ 2 files changed, 71 insertions(+), 75 deletions(-) delete mode 100644 src/components/button/SubmitButton.stories.mdx create mode 100644 src/components/button/SubmitButton.stories.tsx diff --git a/src/components/button/SubmitButton.stories.mdx b/src/components/button/SubmitButton.stories.mdx deleted file mode 100644 index 16de4a45..00000000 --- a/src/components/button/SubmitButton.stories.mdx +++ /dev/null @@ -1,75 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs' -import { action } from '@storybook/addon-actions' -import { Form, useForm } from 'react-hook-form' -import { SubmitButton } from './SubmitButton' - -<Meta - title="Components/Button/SubmitButton" - component={SubmitButton} - decorators={[ - (Story) => { - const form = useForm() - return ( - <Form form={form} onSubmit={action('onSubmit')}> - <Story /> - </Form> - ) - }, - ]} -/> - -export const Template = ({ children, ...args }) => ( - <SubmitButton {...args}>{children}</SubmitButton> -) - -# SubmitButton - -The **_default values_** for variant, size, and tone can be found in the [Button Section](/docs/components-button-button--default-story). - -The submit button uses `React Hook Form` to automatically disable during submitting. - -When the submit button is not placed inside a form (i.e. it has no form context), you can use the `formControl` prop to pass the control of the form. - -## Usage - -```jsx -const form = useForm({ defaultValues: { name: '', email: '' }}) -<Form - form={form} - onSubmit={async (values) => { - await new Promise((resolve) => setTimeout(resolve, 1000)) - alert(JSON.stringify(values, null, 2)) - }} -> - <Input name="email" type="email" /> - <SubmitButton>Submit</SubmitButton> -</Form> -``` - -<Canvas> - <Story - name="Default" - args={{ children: 'Submit' }} - argTypes={{ onClick: { control: false } }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props: - -<ArgsTable story="Default" /> - -All the other externally defined props are: - -``` -React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ButtonProps -``` - -## Disabled - -<Canvas> - <Story name="Disabled" args={{ children: 'Submit', disabled: true }}> - {Template.bind({})} - </Story> -</Canvas> diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx new file mode 100644 index 00000000..63ce2158 --- /dev/null +++ b/src/components/button/SubmitButton.stories.tsx @@ -0,0 +1,71 @@ +import { SubmitButton } from './SubmitButton' +import { action } from '@storybook/addon-actions' +import { + Controls, + Description, + Markdown, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/addon-docs' +import { Source } from '@storybook/blocks' +import { Meta, StoryObj } from '@storybook/react' +import { Form } from '../react-hook-form' +import { useForm } from 'react-hook-form' + +const meta = { + component: SubmitButton, + parameters: { + docs: { + page: () => ( + <> + <Title /> + <Markdown> + The **_default values_** for variant, size, and tone can be found in + the [Button Section](/docs/components-button-button--default-story). + The submit button uses `React Hook Form` to automatically disable + during submitting. When the submit button is not placed inside a + form (i.e. it has no form context), you can use the `formControl` + prop to pass the control of the form. + </Markdown> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Stories /> + </> + ), + }, + }, + decorators: [ + (Story) => { + const form = useForm() + const onSubmit = async () => { + await new Promise((resolve) => setTimeout(resolve, 1000)) + alert("You've submitted the form successfully!") + } + return ( + <Form form={form} onSubmit={onSubmit}> + <Story /> + </Form> + ) + }, + ], +} satisfies Meta<typeof SubmitButton> + +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = { + render: (args) => { + return <SubmitButton {...args}>Submit</SubmitButton> + }, +} + +export const Disabled: Story = { + args: { + disabled: true, + children: 'Submit', + }, +} From af8b2e6753ba9da86d681f5cbd624f72bd705466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Wed, 20 Sep 2023 15:10:22 +0200 Subject: [PATCH 3/8] add some icons as example --- src/components/button/SubmitButton.stories.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index 63ce2158..950748bd 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -13,9 +13,23 @@ import { Source } from '@storybook/blocks' import { Meta, StoryObj } from '@storybook/react' import { Form } from '../react-hook-form' import { useForm } from 'react-hook-form' +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' const meta = { component: SubmitButton, + argTypes: { + iconStart: { + options: ['None', 'Add', 'Info'], + mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + control: { type: 'select' }, + }, + iconEnd: { + options: ['None', 'Add', 'Info'], + mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + control: { type: 'select' }, + }, + }, parameters: { docs: { page: () => ( From 9683f649872fab85f4f7503b39754147cefdd1fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Wed, 20 Sep 2023 15:15:39 +0200 Subject: [PATCH 4/8] change link to Button --- src/components/button/SubmitButton.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index 950748bd..50c7e1ee 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -37,11 +37,11 @@ const meta = { <Title /> <Markdown> The **_default values_** for variant, size, and tone can be found in - the [Button Section](/docs/components-button-button--default-story). - The submit button uses `React Hook Form` to automatically disable - during submitting. When the submit button is not placed inside a - form (i.e. it has no form context), you can use the `formControl` - prop to pass the control of the form. + the [Button Section](/docs/components-button-button--docs). The + submit button uses `React Hook Form` to automatically disable during + submitting. When the submit button is not placed inside a form (i.e. + it has no form context), you can use the `formControl` prop to pass + the control of the form. </Markdown> <Primary /> <Subheading>Props</Subheading> From 97d065f20e5f95dc28ea5a42930a0e08bd312259 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Wed, 20 Sep 2023 15:17:06 +0200 Subject: [PATCH 5/8] remove unsed imports --- src/components/button/SubmitButton.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index 50c7e1ee..6d4e9e22 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -1,15 +1,12 @@ import { SubmitButton } from './SubmitButton' -import { action } from '@storybook/addon-actions' import { Controls, - Description, Markdown, Primary, Stories, Subheading, Title, } from '@storybook/addon-docs' -import { Source } from '@storybook/blocks' import { Meta, StoryObj } from '@storybook/react' import { Form } from '../react-hook-form' import { useForm } from 'react-hook-form' From 0f612660d3226b511098906a82e93f5351371155 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Wed, 20 Sep 2023 15:29:04 +0200 Subject: [PATCH 6/8] lint fix --- src/components/button/ButtonIconLink.stories.tsx | 8 -------- src/components/button/ButtonLink.stories.tsx | 6 +++--- src/components/button/SubmitButton.stories.tsx | 4 ++-- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx index 6adfe837..cb14b85b 100644 --- a/src/components/button/ButtonIconLink.stories.tsx +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -13,14 +13,6 @@ import { Mode, Size, Tone } from '../types' import { ButtonVariant } from './types' import { ButtonIconLink } from './ButtonIconLink' -const icons = { - options: ['Info', 'Add'], - mapping: { - Info: IconInfo, - Add: IconAdd, - }, -} - const meta = { component: ButtonIconLink, args: { diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx index 25b20ab6..0a5cb271 100644 --- a/src/components/button/ButtonLink.stories.tsx +++ b/src/components/button/ButtonLink.stories.tsx @@ -1,6 +1,3 @@ -import { ButtonLink } from './ButtonLink' -import { Mode, Size, Tone } from '../types' -import { ButtonVariant } from './types' import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { @@ -13,6 +10,9 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' +import { Mode, Size, Tone } from '../types' +import { ButtonVariant } from './types' +import { ButtonLink } from './ButtonLink' const meta = { component: ButtonLink, diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index 6d4e9e22..9842b69c 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -1,4 +1,3 @@ -import { SubmitButton } from './SubmitButton' import { Controls, Markdown, @@ -8,10 +7,11 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import { Form } from '../react-hook-form' import { useForm } from 'react-hook-form' import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { Form } from '../react-hook-form' +import { SubmitButton } from './SubmitButton' const meta = { component: SubmitButton, From 3b8564685cb2e7e4b35acc623df428d87aa55a19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Mon, 25 Sep 2023 11:47:48 +0200 Subject: [PATCH 7/8] cleanup --- src/components/button/ButtonIcon.stories.tsx | 20 +++---------- .../button/ButtonIconLink.stories.tsx | 29 ++++--------------- src/components/button/ButtonLink.stories.tsx | 27 ++--------------- .../button/SubmitButton.stories.tsx | 11 ++----- src/components/button/SubmitButton.tsx | 7 +++++ 5 files changed, 20 insertions(+), 74 deletions(-) diff --git a/src/components/button/ButtonIcon.stories.tsx b/src/components/button/ButtonIcon.stories.tsx index 30533494..2b49db7c 100644 --- a/src/components/button/ButtonIcon.stories.tsx +++ b/src/components/button/ButtonIcon.stories.tsx @@ -46,7 +46,10 @@ const meta = { <Primary /> <Subheading>Props</Subheading> <Controls /> - <Theme component="button" items={['buttonIcon']} /> + <Theme + component="button" + items={['buttonIcon', 'modeVariantTone', 'button']} + /> <Markdown> Additionally, all the `button.modeVariantTone` themes are used. See [Button](/docs/components-button-button--default-story#theme). @@ -83,11 +86,6 @@ export default meta type Story = StoryObj<typeof meta> export const Default: Story = {} - -/** - * The `Mode` determines if the component is placed on LIGHT or DARK background. - */ - export const Modes: Story = { render: (args) => ( <div className="flex flex-row items-center gap-6"> @@ -117,10 +115,6 @@ export const Variants: Story = { }, } -/** - * The size determine the padding between the button text and its border. - */ - export const Sizes: Story = { render: (args) => ( <div className="flex flex-row items-center gap-6"> @@ -131,11 +125,6 @@ export const Sizes: Story = { ), } -/** - * he tone of the button determine it's background color. Given the prop, the component will look at the Tailwind config to determine its color. - * - * For additional information about Tailwind config, please refer to the [Tailwind documentation on colors](https://tailwindcss.com/docs/customizing-colors). - */ export const Tones: Story = { render: (args) => ( <div className="flex flex-row items-center gap-6"> @@ -152,7 +141,6 @@ export const Tones: Story = { /** * If the provided colors are not satisfying the needs of a project, it is possible to add your own colors. In the following example, it is moderated what needs to be added to the `reactui.config.js`. See [ReactUI Integrations](https://github.com/aboutbits/react-ui-integrations) for more information. */ - export const CustomPurple: Story = { render: (args) => ( <ButtonIcon diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx index cb14b85b..049fab74 100644 --- a/src/components/button/ButtonIconLink.stories.tsx +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -12,6 +12,7 @@ import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Mode, Size, Tone } from '../types' import { ButtonVariant } from './types' import { ButtonIconLink } from './ButtonIconLink' +import { Theme } from '../../../.storybook/components' const meta = { component: ButtonIconLink, @@ -59,30 +60,10 @@ const meta = { <Primary /> <Subheading>Props</Subheading> <Controls /> - <Markdown> - All themes are the same as for the - [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - </Markdown> - <Subheading>Mode</Subheading> - <Markdown> - The mode is the same as for the - [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - </Markdown> - <Subheading>Variants</Subheading> - <Markdown> - The variants are the same as for the - [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - </Markdown> - <Subheading>Size</Subheading>{' '} - <Markdown> - The size is the same as for the - [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - </Markdown> - <Subheading>Tone</Subheading> - <Markdown> - The tone is the same as for the - [ButtonIcon](/docs/components-button-buttonicon--default-story#theme). - </Markdown> + <Theme + component="button" + items={['buttonIcon', 'modeVariantTone', 'button']} + /> </> ), }, diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx index 0a5cb271..eda39ca6 100644 --- a/src/components/button/ButtonLink.stories.tsx +++ b/src/components/button/ButtonLink.stories.tsx @@ -13,6 +13,7 @@ import { Meta, StoryObj } from '@storybook/react' import { Mode, Size, Tone } from '../types' import { ButtonVariant } from './types' import { ButtonLink } from './ButtonLink' +import { Theme } from '../../../.storybook/components' const meta = { component: ButtonLink, @@ -66,31 +67,7 @@ const meta = { <Primary /> <Subheading>Props</Subheading> <Controls /> - <Markdown> - All themes are the same as for the - [Button](/docs/components-button-button--default-story#theme). - </Markdown> - <Stories /> - <Subheading>Mode</Subheading> - <Markdown> - The mode is the same as for the - [Button](/docs/components-button-button--default-story#size). - </Markdown> - <Subheading>Size</Subheading> - <Markdown> - The size is the same as for the - [Button](/docs/components-button-button--default-story#size). - </Markdown> - <Subheading>Variants</Subheading> - <Markdown> - The variants are the same as for the - [Button](/docs/components-button-button--default-story#variants). - </Markdown> - <Subheading>Tone</Subheading> - <Markdown> - The tone is the same as for the - [Button](/docs/components-button-button--default-story#tone). - </Markdown> + <Theme component={'button'} items={['button', 'modeVariantTone']} /> </> ), }, diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index 9842b69c..b4198994 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -1,6 +1,6 @@ import { Controls, - Markdown, + Description, Primary, Stories, Subheading, @@ -32,14 +32,7 @@ const meta = { page: () => ( <> <Title /> - <Markdown> - The **_default values_** for variant, size, and tone can be found in - the [Button Section](/docs/components-button-button--docs). The - submit button uses `React Hook Form` to automatically disable during - submitting. When the submit button is not placed inside a form (i.e. - it has no form context), you can use the `formControl` prop to pass - the control of the form. - </Markdown> + <Description /> <Primary /> <Subheading>Props</Subheading> <Controls /> diff --git a/src/components/button/SubmitButton.tsx b/src/components/button/SubmitButton.tsx index a81130d2..3dd7efcf 100644 --- a/src/components/button/SubmitButton.tsx +++ b/src/components/button/SubmitButton.tsx @@ -25,6 +25,13 @@ function SubmitButtonComponent<F extends FieldValues>( } // Type assertion required for a component with forwarded ref and generic type + +/** + * The submit button uses `React Hook Form` to automatically disable during + * submitting. When the submit button is not placed inside a form (i.e. + * it has no form context), you can use the `formControl` prop to pass + * the control of the form. + */ export const SubmitButton = forwardRef(SubmitButtonComponent) as < F extends FieldValues, >( From 03992c86b145391f0b2c3f0a1a21a9b082bbe0f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Mon, 25 Sep 2023 11:55:07 +0200 Subject: [PATCH 8/8] lint fix --- src/components/button/ButtonIconLink.stories.tsx | 3 +-- src/components/button/ButtonLink.stories.tsx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx index 049fab74..ff64f958 100644 --- a/src/components/button/ButtonIconLink.stories.tsx +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -1,7 +1,6 @@ import { Controls, Description, - Markdown, Primary, Subheading, Title, @@ -10,9 +9,9 @@ import { Meta, StoryObj } from '@storybook/react' import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Mode, Size, Tone } from '../types' +import { Theme } from '../../../.storybook/components' import { ButtonVariant } from './types' import { ButtonIconLink } from './ButtonIconLink' -import { Theme } from '../../../.storybook/components' const meta = { component: ButtonIconLink, diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx index eda39ca6..b427ae10 100644 --- a/src/components/button/ButtonLink.stories.tsx +++ b/src/components/button/ButtonLink.stories.tsx @@ -3,7 +3,6 @@ import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Controls, Description, - Markdown, Primary, Stories, Subheading, @@ -11,9 +10,9 @@ import { } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' import { Mode, Size, Tone } from '../types' +import { Theme } from '../../../.storybook/components' import { ButtonVariant } from './types' import { ButtonLink } from './ButtonLink' -import { Theme } from '../../../.storybook/components' const meta = { component: ButtonLink, @@ -67,7 +66,8 @@ const meta = { <Primary /> <Subheading>Props</Subheading> <Controls /> - <Theme component={'button'} items={['button', 'modeVariantTone']} /> + <Theme component="button" items={['button', 'modeVariantTone']} /> + <Stories /> </> ), },