studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(react) migrate to Storybook 7

Browse Source 
This new release comes with breaking changes for stories and mdx docs.
This commit is contained in:
Nathan Vasse
2023-05-12 16:03:16 +02:00
committed by NathanVss
parent e7fc782b1c
commit 77721c3b6d
24 changed files with 2639 additions and 4187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react/src/components/Button/index.stories.mdx
View File

@@ -29,17 +29,17 @@ You can use icons within the button by passing the icon name as a prop.
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-button--icon-left"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-button--icon-right"/>
</Canvas>
You can also use button with only an icon.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-button--icon-only"/>
</Canvas>
@@ -49,7 +49,7 @@ The button can be disabled. The disabled button will render the same no matter w
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-button--disabled"/>
</Canvas>

189
packages/react/src/components/Button/index.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta } from "@storybook/react";
import React from "react";
import { Button } from "./index";
@@ -10,111 +10,118 @@ export default {
control: "boolean",
},
},
} as ComponentMeta<typeof Button>;
} as Meta<typeof Button>;
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: "Primary",
color: "primary",
export const Primary = {
args: {
children: "Primary",
color: "primary",
},
};
export const Secondary = Template.bind({});
Secondary.args = {
children: "Secondary",
color: "secondary",
export const Secondary = {
args: {
children: "Secondary",
color: "secondary",
},
};
export const Tertiary = Template.bind({});
Tertiary.args = {
children: "Tertiary",
color: "tertiary",
export const Tertiary = {
args: {
children: "Tertiary",
color: "tertiary",
},
};
export const Disabled = Template.bind({});
Disabled.args = {
children: "Disabled",
color: "primary",
disabled: true,
export const Disabled = {
args: {
children: "Disabled",
color: "primary",
disabled: true,
},
};
export const Danger = Template.bind({});
Danger.args = {
children: "Danger",
color: "danger",
export const Danger = {
args: {
children: "Danger",
color: "danger",
},
};
export const Small = Template.bind({});
Small.args = {
children: "Primary",
color: "primary",
size: "small",
export const Small = {
args: {
children: "Primary",
color: "primary",
size: "small",
},
};
export const IconLeft = Template.bind({});
IconLeft.args = {
children: "Icon",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
export const IconLeft = {
args: {
children: "Icon",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
},
};
export const IconRight = Template.bind({});
IconRight.args = {
children: "Icon",
iconPosition: "right",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
export const IconRight = {
args: {
children: "Icon",
iconPosition: "right",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
},
};
export const IconOnly = Template.bind({});
IconOnly.args = {
"aria-label": "Button with only an icon",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
export const IconOnly = {
args: {
"aria-label": "Button with only an icon",
icon: (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
/>
</svg>
),
color: "primary",
},
};

12
packages/react/src/components/DataGrid/index.stories.mdx
View File

@@ -40,7 +40,7 @@ This component is a wrapper around the more complicated DataGrid component. It i
Here a quick usage example
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--data-list-only"/>
</Canvas>
@@ -63,7 +63,7 @@ Sorting etc ...
Take a look at the following example that renders a table of users.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--client-side-without-pagination"/>
</Canvas>
@@ -74,7 +74,7 @@ with `enableRowSelection`, `rowSelection` and `onRowSelectionChange` props.
> Please click on checkboxes to select rows to see hows the `onRowSelectionChange` prop works, selected ids are displayed
below the table.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--client-side-with-pagination"/>
</Canvas>
@@ -94,7 +94,7 @@ pagination, sorting etc ...
Please take a look at the following example that simulates a server side data that's re-fetched on each page and sorting
change.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--full-server-side"/>
</Canvas>
@@ -152,7 +152,7 @@ outside the grid component ( for example to delete selected rows ).
The component provides out of the box a loading state that can be enabled by setting the `isLoading` props to `true`.
So feel free to use it between page or sorting changes when you are fetching data from a server.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--loading"/>
</Canvas>
@@ -160,7 +160,7 @@ So feel free to use it between page or sorting changes when you are fetching dat
The component automatically displays an empty state when there is no data to display and it is not loading.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-datagrid--empty"/>
</Canvas>

4
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta } from "@storybook/react";
import { Meta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react";
import { faker } from "@faker-js/faker";
import { DataGrid, SortModel } from ":/components/DataGrid/index";
@@ -11,7 +11,7 @@ import { DataList } from ":/components/DataGrid/DataList";
export default {
title: "Components/DataGrid",
component: DataGrid,
} as ComponentMeta<typeof DataGrid>;
} as Meta<typeof DataGrid>;
export const Empty = () => {
return (

20
packages/react/src/components/Forms/Checkbox/index.stories.mdx
View File

@@ -17,13 +17,13 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--default"/>
</Canvas>
**With label**
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-label"/>
</Canvas>
@@ -31,7 +31,7 @@ The `label` props is optional, but you can use it to provide a description of th
You can set the value of the checkbox in 3 different ways.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--default"/>
<Story id="components-forms-checkbox--indeterminate"/>
<Story id="components-forms-checkbox--checked"/>
@@ -41,7 +41,7 @@ You can set the value of the checkbox in 3 different ways.
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
@@ -49,7 +49,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo
As a regular checkbox, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--disabled"/>
</Canvas>
@@ -57,15 +57,15 @@ As a regular checkbox, you can disable it by using the `disabled` props.
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--success"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--error"/>
</Canvas>
@@ -73,13 +73,13 @@ You can use the following props to change the state of the Input component by us
It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--group"/>
</Canvas>
You can also define `state`, `text` props on the group component
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-checkbox--group-error"/>
<Story id="components-forms-checkbox--group-success"/>
</Canvas>

119
packages/react/src/components/Forms/Checkbox/index.stories.tsx
View File

@@ -1,74 +1,103 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
export default {
title: "Components/Forms/Checkbox",
component: Checkbox,
} as ComponentMeta<typeof Checkbox>;
} as Meta<typeof Checkbox>;
const Template: ComponentStory<typeof Checkbox> = (args) => (
const Template: StoryFn<typeof Checkbox> = (args) => (
<Checkbox {...args} aria-label="Checkbox" />
);
export const Default = Template.bind({});
Default.args = {};
export const Checked = Template.bind({});
Checked.args = {
checked: true,
export const Default = {
render: Template,
args: {},
};
export const Indeterminate = Template.bind({});
Indeterminate.args = {
indeterminate: true,
export const Checked = {
render: Template,
args: {
checked: true,
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
label: "Label",
export const Indeterminate = {
render: Template,
args: {
indeterminate: true,
},
};
export const LabelChecked = Template.bind({});
LabelChecked.args = {
checked: true,
label: "Label",
export const WithLabel = {
render: Template,
args: {
label: "Label",
},
};
export const WithTexts = Template.bind({});
WithTexts.args = {
checked: true,
label: "Label",
text: "This is an optional text",
export const LabelChecked = {
render: Template,
args: {
checked: true,
label: "Label",
},
};
export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
label: "Label",
export const WithTexts = {
render: Template,
args: {
checked: true,
label: "Label",
text: "This is an optional text",
},
};
export const DisabledChecked = Template.bind({});
DisabledChecked.args = {
checked: true,
disabled: true,
label: "Label",
export const Disabled = {
render: Template,
args: {
disabled: true,
label: "Label",
},
};
export const Error = Template.bind({});
Error.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "error",
export const DisabledChecked = {
render: Template,
args: {
checked: true,
disabled: true,
label: "Label",
},
};
export const Success = Template.bind({});
Success.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "success",
export const Error = {
render: Template,
args: {
checked: true,
label: "Label",
text: "This is an optional text",
state: "error",
},
};
export const Success = {
render: Template,
args: {
checked: true,
label: "Label",
text: "This is an optional text",
state: "success",
},
};
export const Group = () => (

43
packages/react/src/components/Forms/Field/index.stories.tsx
View File

@@ -1,34 +1,43 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { Field } from ":/components/Forms/Field/index";
export default {
title: "Components/Forms/Field",
component: Field,
} as ComponentMeta<typeof Field>;
} as Meta<typeof Field>;
const Template: ComponentStory<typeof Field> = (args) => (
const Template: StoryFn<typeof Field> = (args) => (
<Field {...args}>
<strong>Any children</strong>
</Field>
);
export const Default = Template.bind({});
Default.args = {
text: "This is an optional text",
rightText: "Right text",
export const Default = {
render: Template,
args: {
text: "This is an optional text",
rightText: "Right text",
},
};
export const Success = Template.bind({});
Success.args = {
state: "success",
text: "This is an optional success message",
rightText: "Right text",
export const Success = {
render: Template,
args: {
state: "success",
text: "This is an optional success message",
rightText: "Right text",
},
};
export const Error = Template.bind({});
Error.args = {
state: "error",
text: "This is an optional error message",
rightText: "Right text",
export const Error = {
render: Template,
args: {
state: "error",
text: "This is an optional error message",
rightText: "Right text",
},
};

24
packages/react/src/components/Forms/Input/index.stories.mdx
View File

@@ -24,15 +24,15 @@ Cunningham provides a versatile Input component that you can use in your forms.
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--default"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--success"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--error"/>
</Canvas>
@@ -40,7 +40,7 @@ You can use the following props to change the state of the Input component by us
As a regular input, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--disabled-empty"/>
<Story id="components-forms-input--disabled-filled"/>
</Canvas>
@@ -49,13 +49,13 @@ As a regular input, you can disable it by using the `disabled` props.
You can define an icon that will appear on the left side of the input by using the `icon` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--icon"/>
</Canvas>
You can also independently add an icon on the right side by using the `rightIcon` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--icon-right"/>
</Canvas>
@@ -63,13 +63,13 @@ You can also independently add an icon on the right side by using the `rightIcon
You can define a text that will appear below the input by using the `text` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-text"/>
</Canvas>
You can also independently add a text on the right side by using the `rightText` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-both-texts"/>
</Canvas>
@@ -77,7 +77,7 @@ You can also independently add a text on the right side by using the `rightText`
By default, the input has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--full-width"/>
</Canvas>
@@ -86,7 +86,7 @@ By default, the input has a default width, like all inputs. But you can force it
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
in mind to also define `charCounterMax`.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--char-counter"/>
</Canvas>
@@ -95,7 +95,7 @@ in mind to also define `charCounterMax`.
Like a native input, you can use the Input component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--controlled"/>
</Canvas>
@@ -103,7 +103,7 @@ using the component in a controlled way.
You can use the `ref` props to get a reference to the input element. The ref to the native input is nested inside the `input` attribute.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-input--with-ref"/>
</Canvas>

187
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta } from "@storybook/react";
import React, { useRef } from "react";
import { Input, InputRefType } from ":/components/Forms/Input/index";
import { Button } from ":/components/Button";
@@ -6,121 +6,134 @@ import { Button } from ":/components/Button";
export default {
title: "Components/Forms/Input",
component: Input,
} as ComponentMeta<typeof Input>;
} as Meta<typeof Input>;
const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
export const Default = Template.bind({});
Default.args = {
defaultValue: "Hello world",
label: "Your name",
export const Default = {
args: {
defaultValue: "Hello world",
label: "Your name",
},
};
export const Success = Template.bind({});
Success.args = {
defaultValue: "Hello world",
label: "Your name",
state: "success",
icon: <span className="material-icons">person</span>,
text: "This is an optional success message",
export const Success = {
args: {
defaultValue: "Hello world",
label: "Your name",
state: "success",
icon: <span className="material-icons">person</span>,
text: "This is an optional success message",
},
};
export const Error = Template.bind({});
Error.args = {
defaultValue: "Hello world",
label: "Your name",
state: "error",
icon: <span className="material-icons">person</span>,
text: "This is an optional error message",
export const Error = {
args: {
defaultValue: "Hello world",
label: "Your name",
state: "error",
icon: <span className="material-icons">person</span>,
text: "This is an optional error message",
},
};
export const DisabledEmpty = Template.bind({});
DisabledEmpty.args = {
label: "Your name",
icon: <span className="material-icons">person</span>,
disabled: true,
export const DisabledEmpty = {
args: {
label: "Your name",
icon: <span className="material-icons">person</span>,
disabled: true,
},
};
export const DisabledFilled = Template.bind({});
DisabledFilled.args = {
label: "Your name",
defaultValue: "John Doe",
icon: <span className="material-icons">person</span>,
disabled: true,
export const DisabledFilled = {
args: {
label: "Your name",
defaultValue: "John Doe",
icon: <span className="material-icons">person</span>,
disabled: true,
},
};
export const Empty = Template.bind({});
Empty.args = {
label: "Your email",
export const Empty = {
args: {
label: "Your email",
},
};
export const Icon = Template.bind({});
Icon.args = {
label: "Account balance",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
export const Icon = {
args: {
label: "Account balance",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
},
};
export const IconRight = Template.bind({});
IconRight.args = {
label: "Account balance",
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
export const IconRight = {
args: {
label: "Account balance",
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "1000",
},
};
export const IconBoth = Template.bind({});
IconBoth.args = {
label: "Not a recommended use",
icon: <span className="material-icons">attach_money</span>,
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "Is isn't recommended to use both icons",
export const IconBoth = {
args: {
label: "Not a recommended use",
icon: <span className="material-icons">attach_money</span>,
rightIcon: <span className="material-icons">attach_money</span>,
defaultValue: "Is isn't recommended to use both icons",
},
};
export const OverflowingText = Template.bind({});
OverflowingText.args = {
label: "Your name",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
export const OverflowingText = {
args: {
label: "Your name",
icon: <span className="material-icons">attach_money</span>,
defaultValue: "John Dave Mike Smith Doe Junior Senior Yoda Skywalker",
},
};
export const WithText = Template.bind({});
WithText.args = {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
export const WithText = {
args: {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
},
};
export const WithTextRight = Template.bind({});
WithTextRight.args = {
defaultValue: "Hello world",
label: "Your name",
rightText: "0/300",
export const WithTextRight = {
args: {
defaultValue: "Hello world",
label: "Your name",
rightText: "0/300",
},
};
export const WithBothTexts = Template.bind({});
WithBothTexts.args = {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
export const WithBothTexts = {
args: {
defaultValue: "Hello world",
label: "Your name",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
},
};
export const FullWidth = Template.bind({});
FullWidth.args = {
defaultValue: "Hello world",
label: "Your name",
fullWidth: true,
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
export const FullWidth = {
args: {
defaultValue: "Hello world",
label: "Your name",
fullWidth: true,
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
rightText: "0/300",
},
};
export const CharCounter = Template.bind({});
CharCounter.args = {
defaultValue: "CEO",
label: "Job title",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
charCounter: true,
charCounterMax: 30,
export const CharCounter = {
args: {
defaultValue: "CEO",
label: "Job title",
text: "This is a text, you can display anything you want here like warnings, informations or errors.",
charCounter: true,
charCounterMax: 30,
},
};
export const Controlled = () => {

17
packages/react/src/components/Forms/LabelledBox/index.stories.tsx
View File

@@ -1,20 +1,23 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { LabelledBox } from ":/components/Forms/LabelledBox/index";
export default {
title: "Components/Forms/LabelledBox",
component: LabelledBox,
} as ComponentMeta<typeof LabelledBox>;
} as Meta<typeof LabelledBox>;
const Template: ComponentStory<typeof LabelledBox> = (args) => (
const Template: StoryFn<typeof LabelledBox> = (args) => (
<div style={{ height: "3.5rem" }}>
<LabelledBox {...args} />
</div>
);
export const Default = Template.bind({});
Default.args = {
label: "Your label here",
children: <span className="clr-greyscale-800">Hello world</span>,
export const Default = {
render: Template,
args: {
label: "Your label here",
children: <span className="clr-greyscale-800">Hello world</span>,
},
};

20
packages/react/src/components/Forms/Radio/index.stories.mdx
View File

@@ -17,13 +17,13 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
</Canvas>
**With label**
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-label"/>
</Canvas>
@@ -31,7 +31,7 @@ The `label` props is optional, but you can use it to provide a description of th
You can set the value of the radio with the `checked` attribute.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
<Story id="components-forms-radio--checked"/>
</Canvas>
@@ -40,7 +40,7 @@ You can set the value of the radio with the `checked` attribute.
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
@@ -48,7 +48,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo
As a regular radio, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--disabled"/>
</Canvas>
@@ -56,15 +56,15 @@ As a regular radio, you can disable it by using the `disabled` props.
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--success"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--error"/>
</Canvas>
@@ -72,13 +72,13 @@ You can use the following props to change the state of the Input component by us
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--group"/>
</Canvas>
You can also define `state`, `text` props on the group component
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-radio--group-error"/>
<Story id="components-forms-radio--group-success"/>
</Canvas>

110
packages/react/src/components/Forms/Radio/index.stories.tsx
View File

@@ -1,69 +1,95 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
export default {
title: "Components/Forms/Radio",
component: Radio,
} as ComponentMeta<typeof Radio>;
} as Meta<typeof Radio>;
const Template: ComponentStory<typeof Radio> = (args) => (
const Template: StoryFn<typeof Radio> = (args) => (
<Radio {...args} aria-label="Radio" />
);
export const Default = Template.bind({});
Default.args = {};
export const Checked = Template.bind({});
Checked.args = {
checked: true,
export const Default = {
render: Template,
args: {},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
label: "Label",
export const Checked = {
render: Template,
args: {
checked: true,
},
};
export const WithLabelChecked = Template.bind({});
WithLabelChecked.args = {
label: "Label",
checked: true,
export const WithLabel = {
render: Template,
args: {
label: "Label",
},
};
export const WithText = Template.bind({});
WithText.args = {
label: "Label",
text: "Some optional text",
export const WithLabelChecked = {
render: Template,
args: {
label: "Label",
checked: true,
},
};
export const Disabled = Template.bind({});
Disabled.args = {
label: "Label",
disabled: true,
export const WithText = {
render: Template,
args: {
label: "Label",
text: "Some optional text",
},
};
export const DisabledChecked = Template.bind({});
DisabledChecked.args = {
label: "Label",
disabled: true,
checked: true,
text: "Some optional text",
export const Disabled = {
render: Template,
args: {
label: "Label",
disabled: true,
},
};
export const Error = Template.bind({});
Error.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "error",
export const DisabledChecked = {
render: Template,
args: {
label: "Label",
disabled: true,
checked: true,
text: "Some optional text",
},
};
export const Success = Template.bind({});
Success.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "success",
export const Error = {
render: Template,
args: {
checked: true,
label: "Label",
text: "This is an optional text",
state: "error",
},
};
export const Success = {
render: Template,
args: {
checked: true,
label: "Label",
text: "This is an optional text",
state: "success",
},
};
export const Group = () => {

14
packages/react/src/components/Forms/Select/index.stories.mdx
View File

@@ -36,7 +36,7 @@ As you can see the `value` is optional, if not provided, the `label` will be use
You can enable the text live filtering simply by using the `searchable` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--searchable-uncontrolled"/>
</Canvas>
@@ -44,11 +44,11 @@ You can enable the text live filtering simply by using the `searchable` props.
You can use the following props to change the state of the Select component by using the `state` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--success"/>
</Canvas>
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--error"/>
</Canvas>
@@ -56,7 +56,7 @@ You can use the following props to change the state of the Select component by u
As a regular select, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--disabled"/>
</Canvas>
@@ -64,7 +64,7 @@ As a regular select, you can disable it by using the `disabled` props.
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--with-text"/>
</Canvas>
@@ -72,7 +72,7 @@ As the component uses [Field](?path=/story/components-forms-field-doc--page), yo
By default, the select has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--full-width"/>
</Canvas>
@@ -81,7 +81,7 @@ By default, the select has a default width, like all inputs. But you can force i
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--controlled"/>
</Canvas>

161
packages/react/src/components/Forms/Select/mono.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React, { useState } from "react";
import { faker } from "@faker-js/faker";
import { Select } from ":/components/Forms/Select";
@@ -8,9 +8,9 @@ import { CunninghamProvider } from ":/components/Provider";
export default {
title: "Components/Forms/Select/Mono",
component: Select,
} as ComponentMeta<typeof Select>;
} as Meta<typeof Select>;
const Template: ComponentStory<typeof Select> = (args) => (
const Template: StoryFn<typeof Select> = (args) => (
<div style={{ paddingBottom: "200px" }}>
<CunninghamProvider>
<Select {...args} />
@@ -24,28 +24,38 @@ const OPTIONS = CITIES.map((city) => ({
value: city.toLowerCase(),
}));
export const Uncontrolled = Template.bind({});
Uncontrolled.args = {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
export const Uncontrolled = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
},
};
export const Disabled = Template.bind({});
Disabled.args = {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
disabled: true,
export const Disabled = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
disabled: true,
},
};
export const WithText = Template.bind({});
WithText.args = {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
text: "This is a text, you can display anything you want here like warnings, information or errors.",
export const WithText = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
text: "This is a text, you can display anything you want here like warnings, information or errors.",
},
};
export const Controlled = () => {
const [value, setValue] = useState(OPTIONS[8].value);
return (
@@ -66,40 +76,52 @@ export const Controlled = () => {
);
};
export const Overflow = Template.bind({});
Overflow.args = {
label: "Select a city",
options: [
{
value: "1",
label: "Very long long long long long long long city name",
},
],
defaultValue: "1",
export const Overflow = {
render: Template,
args: {
label: "Select a city",
options: [
{
value: "1",
label: "Very long long long long long long long city name",
},
],
defaultValue: "1",
},
};
export const SearchableEmpty = Template.bind({});
SearchableEmpty.args = {
label: "Select a city",
options: OPTIONS,
searchable: true,
export const SearchableEmpty = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
searchable: true,
},
};
export const SearchableUncontrolled = Template.bind({});
SearchableUncontrolled.args = {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
searchable: true,
export const SearchableUncontrolled = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
searchable: true,
},
};
export const SearchableDisabled = Template.bind({});
SearchableDisabled.args = {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
searchable: true,
disabled: true,
export const SearchableDisabled = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
defaultValue: OPTIONS[4].value,
searchable: true,
disabled: true,
},
};
export const SearchableControlled = () => {
@@ -123,27 +145,36 @@ export const SearchableControlled = () => {
);
};
export const FullWidth = Template.bind({});
FullWidth.args = {
label: "Select a city",
options: OPTIONS,
fullWidth: true,
export const FullWidth = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
fullWidth: true,
},
};
export const Success = Template.bind({});
Success.args = {
label: "Select a city",
options: OPTIONS,
state: "success",
text: "Well done",
export const Success = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
state: "success",
text: "Well done",
},
};
export const Error = Template.bind({});
Error.args = {
label: "Select a city",
options: OPTIONS,
state: "error",
text: "Something went wrong",
export const Error = {
render: Template,
args: {
label: "Select a city",
options: OPTIONS,
state: "error",
text: "Something went wrong",
},
};
export const FormExample = () => {

12
packages/react/src/components/Loader/index.stories.tsx
View File

@@ -1,13 +1,15 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import React from "react";
import { Loader } from ":/components/Loader/index";
export default {
title: "Components/Loader (WIP)",
component: Loader,
} as ComponentMeta<typeof Loader>;
} as Meta<typeof Loader>;
const Template: ComponentStory<typeof Loader> = () => <Loader />;
const Template: StoryFn<typeof Loader> = () => <Loader />;
export const Default = Template.bind({});
Default.args = {};
export const Default = {
render: Template,
args: {},
};

8
packages/react/src/components/Pagination/index.stories.mdx
View File

@@ -10,7 +10,7 @@ for synchronous loading as well as asynchronous loading. You can paginate your a
fetch it from a server, the component is really versatile.
<Canvas withSource={"none"}>
<Canvas sourceState="none">
<Story id="components-pagination--basic"/>
</Canvas>
@@ -30,7 +30,7 @@ The most basic usage you can make of it is this one, defining a pagination with
### Basic
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-pagination--basic"/>
</Canvas>
@@ -40,7 +40,7 @@ The most basic usage you can make of it is this one, defining a pagination with
But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better.
Let's make a component that paginate a list of random number.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-pagination--list"/>
</Canvas>
@@ -48,7 +48,7 @@ Let's make a component that paginate a list of random number.
You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
<Canvas withSource="open">
<Canvas sourceState="shown">
<Story id="components-pagination--force-page"/>
</Canvas>

4
packages/react/src/components/Pagination/index.stories.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta } from "@storybook/react";
import { Meta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react";
import { Pagination, usePagination } from ":/components/Pagination/index";
import { CunninghamProvider } from ":/components/Provider";
@@ -6,7 +6,7 @@ import { CunninghamProvider } from ":/components/Provider";
export default {
title: "Components/Pagination",
component: Pagination,
} as ComponentMeta<typeof Pagination>;
} as Meta<typeof Pagination>;
export const Basic = () => {
const pagination = usePagination({