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

♻️(react) update stories for themes

Browse Source 
The stories do not need CunninghamProvider anymore since it is
handled by the configuration for the themes support. Some stories
were also using wrong colors that didn't handle multiple themes.
This commit is contained in:
Nathan Vasse
2023-09-26 11:41:55 +02:00
committed by NathanVss
parent b94abbd6b3
commit b0d68becfe
11 changed files with 902 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useState } from "react";
import { faker } from "@faker-js/faker"; import { faker } from "@faker-js/faker";
import { DataGrid, SortModel } from ":/components/DataGrid/index"; import { DataGrid, SortModel } from ":/components/DataGrid/index";
import { usePagination } from ":/components/Pagination"; import { usePagination } from ":/components/Pagination";
import { CunninghamProvider } from ":/components/Provider";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid"; import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
import { DataList } from ":/components/DataGrid/DataList"; import { DataList } from ":/components/DataGrid/DataList";
@@ -15,36 +14,32 @@ export default {
export const Empty = () => { export const Empty = () => {
return ( return (
<CunninghamProvider> <DataGrid
<DataGrid columns={[
columns={[ {
{ field: "firstName",
field: "firstName", headerName: "First name",
headerName: "First name", highlight: true,
highlight: true, },
}, ]}
]} rows={[]}
rows={[]} />
/>
</CunninghamProvider>
); );
}; };
export const Loading = () => { export const Loading = () => {
return ( return (
<CunninghamProvider> <DataGrid
<DataGrid columns={[
columns={[ {
{ field: "firstName",
field: "firstName", headerName: "First name",
headerName: "First name", highlight: true,
highlight: true, },
}, ]}
]} rows={[]}
rows={[]} isLoading={true}
isLoading={true} />
/>
</CunninghamProvider>
); );
}; };
@@ -61,43 +56,41 @@ export const ClientSideWithoutPagination = () => {
[], [],
); );
return ( return (
<CunninghamProvider> <SimpleDataGrid
<SimpleDataGrid columns={[
columns={[ {
{ field: "firstName",
field: "firstName", headerName: "First name",
headerName: "First name", highlight: true,
highlight: true, },
}, {
{ field: "lastName",
field: "lastName", headerName: "Last name",
headerName: "Last name", },
}, {
{ field: "email",
field: "email", headerName: "Email",
headerName: "Email", highlight: true,
highlight: true, },
}, {
{ field: "address",
field: "address", headerName: "Address",
headerName: "Address", enableSorting: false,
enableSorting: false, },
}, {
{ headerName: "Actions",
headerName: "Actions", id: "actions",
id: "actions", renderCell: () => (
renderCell: () => ( <Button
<Button color="tertiary"
color="tertiary" size="small"
size="small" icon={<span className="material-icons">delete</span>}
icon={<span className="material-icons">delete</span>} />
/> ),
), },
}, ]}
]} rows={database}
rows={database} />
/>
</CunninghamProvider>
); );
}; };
@@ -116,7 +109,7 @@ export const ClientSideWithPagination = () => {
const [rowSelection, setRowSelection] = useState({}); const [rowSelection, setRowSelection] = useState({});
return ( return (
<CunninghamProvider> <>
<SimpleDataGrid <SimpleDataGrid
columns={[ columns={[
{ {
@@ -149,7 +142,7 @@ export const ClientSideWithPagination = () => {
onRowSelectionChange={setRowSelection} onRowSelectionChange={setRowSelection}
/> />
<div>Selected rows: {Object.keys(rowSelection).join(", ")}</div> <div>Selected rows: {Object.keys(rowSelection).join(", ")}</div>
</CunninghamProvider> </>
); );
}; };
@@ -208,48 +201,46 @@ export const FullServerSide = () => {
}, [pagination.page, sortModel]); }, [pagination.page, sortModel]);
return ( return (
<CunninghamProvider> <DataGrid
<DataGrid columns={[
columns={[ {
{ field: "firstName",
field: "firstName", headerName: "First name",
headerName: "First name", highlight: true,
highlight: true, },
}, {
{ field: "lastName",
field: "lastName", headerName: "Last name",
headerName: "Last name", },
}, {
{ field: "email",
field: "email", headerName: "Email",
headerName: "Email", highlight: true,
highlight: true, },
}, {
{ field: "address",
field: "address", headerName: "Address",
headerName: "Address", },
}, {
{ id: "actions",
id: "actions", renderCell: () => (
renderCell: () => ( <Button
<Button color="tertiary"
color="tertiary" size="small"
size="small" icon={<span className="material-icons">delete</span>}
icon={<span className="material-icons">delete</span>} />
/> ),
), },
}, ]}
]} rows={rows}
rows={rows} pagination={pagination}
pagination={pagination} sortModel={sortModel}
sortModel={sortModel} onSortModelChange={setSortModel}
onSortModelChange={setSortModel} isLoading={isLoading}
isLoading={isLoading} enableRowSelection={true}
enableRowSelection={true} rowSelection={rowSelection}
rowSelection={rowSelection} onRowSelectionChange={setRowSelection}
onRowSelectionChange={setRowSelection} />
/>
</CunninghamProvider>
); );
}; };
@@ -265,25 +256,23 @@ export const DataListOnly = () => {
); );
return ( return (
<CunninghamProvider> <DataList
<DataList rows={database}
rows={database} columns={[
columns={[ { field: "title" },
{ field: "title" }, { field: "date" },
{ field: "date" }, {
{ headerName: "actions",
headerName: "actions", id: "actions",
id: "actions", renderCell: () => {
renderCell: () => { return (
return ( <Button size="small" color="secondary">
<Button size="small" color="secondary"> Do it
Do it </Button>
</Button> );
);
},
}, },
]} },
/> ]}
</CunninghamProvider> />
); );
}; };

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

@@ -122,7 +122,7 @@ export const Success = {
export const Group = () => ( export const Group = () => (
<div> <div>
<div className="fs-l fw-bold mb-t">Your offices</div> <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<CheckboxGroup> <CheckboxGroup>
<Checkbox label="Paris" /> <Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} /> <Checkbox label="New York" text="United States" checked={true} />
@@ -135,7 +135,7 @@ export const Group = () => (
export const GroupError = () => ( export const GroupError = () => (
<div> <div>
<div className="fs-l fw-bold mb-t">Your offices</div> <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<CheckboxGroup state="error" text="An important error message"> <CheckboxGroup state="error" text="An important error message">
<Checkbox label="Paris" /> <Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} /> <Checkbox label="New York" text="United States" checked={true} />
@@ -148,7 +148,7 @@ export const GroupError = () => (
export const GroupSuccess = () => ( export const GroupSuccess = () => (
<div> <div>
<div className="fs-l fw-bold mb-t">Your offices</div> <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<CheckboxGroup state="success" text="Success message !"> <CheckboxGroup state="success" text="Success message !">
<Checkbox label="Paris" /> <Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} /> <Checkbox label="New York" text="United States" checked={true} />

120
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -16,16 +16,12 @@ export default {
} as Meta<typeof DatePicker>; } as Meta<typeof DatePicker>;
const Template: StoryFn<typeof DatePicker> = (args) => ( const Template: StoryFn<typeof DatePicker> = (args) => (
<CunninghamProvider> <DatePicker {...args} label="Pick a date" />
<DatePicker {...args} label="Pick a date" />
</CunninghamProvider>
); );
export const Default = () => ( export const Default = () => (
<div style={{ minHeight: "400px" }}> <div style={{ minHeight: "400px" }}>
<CunninghamProvider> <DatePicker label="Pick a date" />
<DatePicker label="Pick a date" />
</CunninghamProvider>
</div> </div>
); );
@@ -98,13 +94,11 @@ export const Fullwidth = {
export const CustomLocale = () => ( export const CustomLocale = () => (
<div style={{ minHeight: "400px" }}> <div style={{ minHeight: "400px" }}>
<CunninghamProvider> <DatePicker
<DatePicker label="Pick a date"
label="Pick a date" locale="hi-IN-u-ca-indian"
locale="hi-IN-u-ca-indian" defaultValue="2023-06-25T00:00:00.000+00:00"
defaultValue="2023-06-25T00:00:00.000+00:00" />
/>
</CunninghamProvider>
</div> </div>
); );
@@ -122,21 +116,19 @@ export const CunninghamLocale = () => (
export const Controlled = () => { export const Controlled = () => {
const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z"); const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
return ( return (
<CunninghamProvider> <div>
<div> <div className="clr-greyscale-900">
<div> Value: <span>{value?.toString()}</span>
Value: <span>{value?.toString()}</span>
</div>
<DatePicker
label="Pick a date"
value={value}
onChange={(e) => {
setValue(e);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
</div> </div>
</CunninghamProvider> <DatePicker
label="Pick a date"
value={value}
onChange={(e) => {
setValue(e);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
</div>
); );
}; };
@@ -153,47 +145,41 @@ export const ReactHookForm = () => {
}); });
return ( return (
<CunninghamProvider> <FormProvider {...methods}>
<FormProvider {...methods}> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} onSubmit={methods.handleSubmit(onSubmit)}
onSubmit={methods.handleSubmit(onSubmit)} >
> <RhfDatePicker name="date" label="Pick a date" fullWidth={true} />
<RhfDatePicker name="date" label="Pick a date" fullWidth={true} /> <Button fullWidth={true}>Submit</Button>
<Button fullWidth={true}>Submit</Button> </form>
</form> </FormProvider>
</FormProvider>
</CunninghamProvider>
); );
}; };
export const RangeDefault = () => { export const RangeDefault = () => {
return ( return (
<div style={{ minHeight: "400px" }}> <div style={{ minHeight: "400px" }}>
<CunninghamProvider> <DateRangePicker startLabel="Start date" endLabel="Due date" />
<DateRangePicker startLabel="Start date" endLabel="Due date" />
</CunninghamProvider>
</div> </div>
); );
}; };
export const RangeDefaultValue = () => { export const RangeDefaultValue = () => {
return ( return (
<CunninghamProvider> <DateRangePicker
<DateRangePicker startLabel="Start date"
startLabel="Start date" endLabel="Due date"
endLabel="Due date" defaultValue={[
defaultValue={[ "2023-05-23T00:00:00.000+00:00",
"2023-05-23T00:00:00.000+00:00", "2023-06-23T00:00:00.000+00:00",
"2023-06-23T00:00:00.000+00:00", ]}
]} />
/>
</CunninghamProvider>
); );
}; };
@@ -204,18 +190,16 @@ export const RangeControlled = () => {
]); ]);
return ( return (
<div> <div>
<CunninghamProvider> <div className="clr-greyscale-900">Value: {value?.join(" ")}</div>
<div>Value: {value?.join(" ")}</div> <DateRangePicker
<DateRangePicker startLabel="Start date"
startLabel="Start date" endLabel="Due date"
endLabel="Due date" minValue="2023-01-23T00:00:00.000+00:00"
minValue="2023-01-23T00:00:00.000+00:00" maxValue="2023-08-23T00:00:00.000+00:00"
maxValue="2023-08-23T00:00:00.000+00:00" value={value}
value={value} onChange={(e) => setValue(e)}
onChange={(e) => setValue(e)} />
/> <Button onClick={() => setValue(null)}>Reset</Button>
<Button onClick={() => setValue(null)}>Reset</Button>
</CunninghamProvider>
</div> </div>
); );
}; };

213
packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
View File

@@ -5,7 +5,6 @@ import { useForm, FormProvider } from "react-hook-form";
import * as Yup from "yup"; import * as Yup from "yup";
import { RhfInput } from ":/components/Forms/Input/stories-utils"; import { RhfInput } from ":/components/Forms/Input/stories-utils";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
import { CunninghamProvider } from ":/components/Provider";
import { Radio, RadioGroup } from ":/components/Forms/Radio"; import { Radio, RadioGroup } from ":/components/Forms/Radio";
import { RhfSelect } from ":/components/Forms/Select/stories-utils"; import { RhfSelect } from ":/components/Forms/Select/stories-utils";
import { import {
@@ -55,119 +54,117 @@ const SportsBase = ({ values }: SportProps) => {
}, [values]); }, [values]);
return ( return (
<CunninghamProvider> <FormProvider {...methods}>
<FormProvider {...methods}> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} onSubmit={methods.handleSubmit(onSubmit)}
onSubmit={methods.handleSubmit(onSubmit)} >
<h1
className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }}
> >
<h1 Register
className="fs-h3 fw-bold clr-greyscale-900" </h1>
style={{ textAlign: "center" }}
>
Register
</h1>
<div> <div>
<div className="fs-l clr-greyscale-800 mb-t">Gender</div> <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
<RadioGroup <RadioGroup
state={getFieldState("gender", methods.formState)}
text={getFieldErrorMessage("gender", methods.formState)}
style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
>
<Radio
label="Male"
state={getFieldState("gender", methods.formState)} state={getFieldState("gender", methods.formState)}
text={getFieldErrorMessage("gender", methods.formState)} value="male"
style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }} {...methods.register("gender")}
>
<Radio
label="Male"
state={getFieldState("gender", methods.formState)}
value="male"
{...methods.register("gender")}
/>
<Radio
label="Female"
value="female"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
<Radio
label="Other"
value="other"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
</RadioGroup>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<RhfInput
label="First name"
state={getFieldState("firstName", methods.formState)}
text={getFieldErrorMessage("firstName", methods.formState)}
{...methods.register("firstName")}
/> />
<RhfInput <Radio
label="Last name" label="Female"
state={getFieldState("lastName", methods.formState)} value="female"
text={getFieldErrorMessage("lastName", methods.formState)} state={getFieldState("gender", methods.formState)}
{...methods.register("lastName")} {...methods.register("gender")}
/> />
</div> <Radio
label="Other"
value="other"
state={getFieldState("gender", methods.formState)}
{...methods.register("gender")}
/>
</RadioGroup>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<RhfInput
label="First name"
state={getFieldState("firstName", methods.formState)}
text={getFieldErrorMessage("firstName", methods.formState)}
{...methods.register("firstName")}
/>
<RhfInput
label="Last name"
state={getFieldState("lastName", methods.formState)}
text={getFieldErrorMessage("lastName", methods.formState)}
{...methods.register("lastName")}
/>
</div>
<RhfSelect <RhfSelect
name="competition" name="competition"
label="Competition" label="Competition"
options={[ options={[
{ {
label: "Athletics", label: "Athletics",
}, },
{ {
label: "Swimming", label: "Swimming",
}, },
{ {
label: "Marathon", label: "Marathon",
}, },
]} ]}
fullWidth={true} fullWidth={true}
/> />
<RhfSelect <RhfSelect
name="rewards" name="rewards"
label="Previous rewards" label="Previous rewards"
multi={true} multi={true}
options={[ options={[
{ {
label: "Bronze", label: "Bronze",
}, },
{ {
label: "Silver", label: "Silver",
}, },
{ {
label: "Gold", label: "Gold",
}, },
{ {
label: "Flocon", label: "Flocon",
}, },
{ {
label: "Ourson", label: "Ourson",
}, },
{ {
label: "Chamois", label: "Chamois",
}, },
]} ]}
fullWidth={true} fullWidth={true}
/> />
<Button fullWidth={true}>Apply</Button> <Button fullWidth={true}>Apply</Button>
<a <a
href="/#" href="/#"
className="clr-greyscale-800 fs-m" className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
> >
Need help ? Need help ?
</a> </a>
</form> </form>
</FormProvider> </FormProvider>
</CunninghamProvider>
); );
}; };

520
packages/react/src/components/Forms/Examples/index.stories.tsx
View File

@@ -5,7 +5,6 @@ import { Input } from ":/components/Forms/Input";
import { Checkbox } from ":/components/Forms/Checkbox"; import { Checkbox } from ":/components/Forms/Checkbox";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
import { Select } from ":/components/Forms/Select"; import { Select } from ":/components/Forms/Select";
import { CunninghamProvider } from ":/components/Provider";
import { FileUploader } from ":/components/Forms/FileUploader"; import { FileUploader } from ":/components/Forms/FileUploader";
import { Switch } from ":/components/Forms/Switch"; import { Switch } from ":/components/Forms/Switch";
import { Radio } from ":/components/Forms/Radio"; import { Radio } from ":/components/Forms/Radio";
@@ -55,291 +54,276 @@ export const Login = () => {
export const Application = () => { export const Application = () => {
return ( return (
<CunninghamProvider> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} >
<h1
className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }}
> >
<h1 Application
className="fs-h3 fw-bold clr-greyscale-900" </h1>
style={{ textAlign: "center" }} <Select
> label="Context"
Application options={[
</h1> {
<Select label: "Ask a document",
label="Context" },
options={[ {
{ label: "Download files",
label: "Ask a document", },
}, {
{ label: "Ask for help",
label: "Download files", },
}, ]}
{ fullWidth={true}
label: "Ask for help", />
}, <div style={{ display: "flex", gap: "1rem" }}>
]} <Input label="First name" />
<Input label="Last name" />
</div>
<Input
label="Email address"
fullWidth={true}
text="Only @acme.com domain is authorized"
/>
<div style={{ display: "flex", gap: "1rem" }}>
<div style={{ width: "25%" }}>
<Input label="ZIP" fullWidth={true} />
</div>
<Input label="City" fullWidth={true} />
</div>
<div>
<div className="fs-l clr-greyscale-800 mb-t">Your curriculum vitae</div>
<FileUploader
fullWidth={true} fullWidth={true}
text="pdf only ( 4mb maximum )"
accept="application/pdf"
/> />
<div style={{ display: "flex", gap: "1rem" }}> </div>
<Input label="First name" /> <div>
<Input label="Last name" /> <Switch label="SMS Notification" fullWidth={true} />
</div> <Switch label="Subscribe to newsletter" fullWidth={true} />
<Input </div>
label="Email address" <Checkbox label="Agree to the terms and services" fullWidth={true} />
fullWidth={true} <Button fullWidth={true}>Apply</Button>
text="Only @acme.com domain is authorized" <a
/> href="/#"
<div style={{ display: "flex", gap: "1rem" }}> className="clr-greyscale-800 fs-m"
<div style={{ width: "25%" }}> style={{ textAlign: "center" }}
<Input label="ZIP" fullWidth={true} /> >
</div> Need help ?
<Input label="City" fullWidth={true} /> </a>
</div> </form>
<div>
<div className="fs-l clr-greyscale-800 mb-t">
Your curriculum vitae
</div>
<FileUploader
fullWidth={true}
text="pdf only ( 4mb maximum )"
accept="application/pdf"
/>
</div>
<div>
<Switch label="SMS Notification" fullWidth={true} />
<Switch label="Subscribe to newsletter" fullWidth={true} />
</div>
<Checkbox label="Agree to the terms and services" fullWidth={true} />
<Button fullWidth={true}>Apply</Button>
<a
href="/#"
className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }}
>
Need help ?
</a>
</form>
</CunninghamProvider>
); );
}; };
export const Sports = () => { export const Sports = () => {
return ( return (
<CunninghamProvider> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} onSubmit={(e) => e.preventDefault()}
>
<h1
className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }}
> >
<h1 Register
className="fs-h3 fw-bold clr-greyscale-900" </h1>
style={{ textAlign: "center" }} <div>
> <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
Register <div style={{ display: "flex", gap: "0.5rem" }}>
</h1> <Radio name="gender" label="Male" fullWidth={true} />
<div> <Radio name="gender" label="Female" />
<div className="fs-l clr-greyscale-800 mb-t">Gender</div> <Radio name="gender" label="Other" />
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio name="gender" label="Male" fullWidth={true} />
<Radio name="gender" label="Female" />
<Radio name="gender" label="Other" />
</div>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<Input label="First name" />
<Input label="Last name" />
</div> </div>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<Input label="First name" />
<Input label="Last name" />
</div>
<DatePicker label="Date of birth" fullWidth={true} /> <DatePicker label="Date of birth" fullWidth={true} />
<Select <Select
label="Competition" label="Competition"
options={[ options={[
{ {
label: "Athletics", label: "Athletics",
}, },
{ {
label: "Swimming", label: "Swimming",
}, },
{ {
label: "Marathon", label: "Marathon",
}, },
]} ]}
fullWidth={true} fullWidth={true}
/> />
<Select <Select
label="Previous rewards" label="Previous rewards"
multi={true} multi={true}
options={[ options={[
{ {
label: "Bronze", label: "Bronze",
}, },
{ {
label: "Silver", label: "Silver",
}, },
{ {
label: "Gold", label: "Gold",
}, },
{ {
label: "Flocon", label: "Flocon",
}, },
{ {
label: "Ourson", label: "Ourson",
}, },
{ {
label: "Chamois", label: "Chamois",
}, },
]} ]}
fullWidth={true} fullWidth={true}
/> />
<DateRangePicker <DateRangePicker
startLabel="Start date" startLabel="Start date"
endLabel="End date" endLabel="End date"
defaultValue={[ defaultValue={[
"2023-05-23T00:00:00.000+00:00", "2023-05-23T00:00:00.000+00:00",
"2023-06-23T00:00:00.000+00:00", "2023-06-23T00:00:00.000+00:00",
]} ]}
fullWidth={true} fullWidth={true}
/> />
<Button fullWidth={true}>Apply</Button> <Button fullWidth={true}>Apply</Button>
<a <a
href="/#" href="/#"
className="clr-greyscale-800 fs-m" className="clr-greyscale-800 fs-m"
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
> >
Need help ? Need help ?
</a> </a>
</form> </form>
</CunninghamProvider>
); );
}; };
export const SportsDisabled = () => { export const SportsDisabled = () => {
const [withValues, setWithValues] = useState(false); const [withValues, setWithValues] = useState(false);
return ( return (
<CunninghamProvider> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} >
<h1
className="fs-h3 fw-bold clr-greyscale-900"
style={{ textAlign: "center" }}
> >
<h1 Register
className="fs-h3 fw-bold clr-greyscale-900" </h1>
style={{ textAlign: "center" }} <div>
> <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
Register <div style={{ display: "flex", gap: "0.5rem" }}>
</h1> <Radio name="gender" label="Male" fullWidth={true} disabled={true} />
<div> <Radio name="gender" label="Female" disabled={true} />
<div className="fs-l clr-greyscale-800 mb-t">Gender</div> <Radio name="gender" label="Other" disabled={true} />
<div style={{ display: "flex", gap: "0.5rem" }}>
<Radio
name="gender"
label="Male"
fullWidth={true}
disabled={true}
/>
<Radio name="gender" label="Female" disabled={true} />
<Radio name="gender" label="Other" disabled={true} />
</div>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<Input
label="First name"
disabled={true}
value={withValues ? "John" : undefined}
/>
<Input label="Last name" disabled={true} />
</div> </div>
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<Input
label="First name"
disabled={true}
value={withValues ? "John" : undefined}
/>
<Input label="Last name" disabled={true} />
</div>
<DatePicker <DatePicker
label="Date of birth" label="Date of birth"
fullWidth={true} fullWidth={true}
disabled={true} disabled={true}
value={withValues ? "2023-05-23T00:00:00.000+00:00" : undefined} value={withValues ? "2023-05-23T00:00:00.000+00:00" : undefined}
/> />
<Select <Select
disabled={true} disabled={true}
label="Competition" label="Competition"
options={[ options={[
{ {
label: "Athletics", label: "Athletics",
}, },
{ {
label: "Swimming", label: "Swimming",
}, },
{ {
label: "Marathon", label: "Marathon",
}, },
]} ]}
fullWidth={true} fullWidth={true}
value={withValues ? "Swimming" : undefined} value={withValues ? "Swimming" : undefined}
/> />
<Select <Select
disabled={true} disabled={true}
label="Previous rewards" label="Previous rewards"
multi={true} multi={true}
options={[ options={[
{ {
label: "Bronze", label: "Bronze",
}, },
{ {
label: "Silver", label: "Silver",
}, },
{ {
label: "Gold", label: "Gold",
}, },
{ {
label: "Flocon", label: "Flocon",
}, },
{ {
label: "Ourson", label: "Ourson",
}, },
{ {
label: "Chamois", label: "Chamois",
}, },
]} ]}
fullWidth={true} fullWidth={true}
value={withValues ? ["Silver"] : undefined} value={withValues ? ["Silver"] : undefined}
/> />
<DateRangePicker <DateRangePicker
startLabel="Start date" startLabel="Start date"
endLabel="End date" endLabel="End date"
value={ value={
withValues withValues
? [ ? ["2023-05-23T00:00:00.000+00:00", "2023-06-23T00:00:00.000+00:00"]
"2023-05-23T00:00:00.000+00:00", : undefined
"2023-06-23T00:00:00.000+00:00", }
] fullWidth={true}
: undefined disabled={true}
} />
fullWidth={true} <Switch
disabled={true} label="Enable values"
/> checked={withValues}
<Switch onChange={(e) => setWithValues(e.target.checked)}
label="Enable values" />
checked={withValues} <Button fullWidth={true} disabled={true}>
onChange={(e) => setWithValues(e.target.checked)} Apply
/> </Button>
<Button fullWidth={true} disabled={true}> <a
Apply href="/#"
</Button> className="clr-greyscale-800 fs-m"
<a style={{ textAlign: "center" }}
href="/#" >
className="clr-greyscale-800 fs-m" Need help ?
style={{ textAlign: "center" }} </a>
> </form>
Need help ?
</a>
</form>
</CunninghamProvider>
); );
}; };

94
packages/react/src/components/Forms/FileUploader/index.stories.tsx
View File

@@ -1,19 +1,12 @@
import { Meta, StoryFn } from "@storybook/react"; import { Meta } from "@storybook/react";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { faker } from "@faker-js/faker"; import { faker } from "@faker-js/faker";
import { import {
FileUploader, FileUploader,
FileUploaderRefType, FileUploaderRefType,
} from ":/components/Forms/FileUploader/index"; } from ":/components/Forms/FileUploader/index";
import { CunninghamProvider } from ":/components/Provider";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
const Template: StoryFn<typeof FileUploader> = (args) => (
<CunninghamProvider>
<FileUploader {...args} />
</CunninghamProvider>
);
const FAKE_FILES = [ const FAKE_FILES = [
new File(["42"], faker.lorem.sentence(5) + "pdf"), new File(["42"], faker.lorem.sentence(5) + "pdf"),
new File(["42"], faker.lorem.sentence(1) + "pdf"), new File(["42"], faker.lorem.sentence(1) + "pdf"),
@@ -24,7 +17,6 @@ const FAKE_FILES = [
const meta: Meta<typeof FileUploader> = { const meta: Meta<typeof FileUploader> = {
title: "Components/Forms/FileUploader", title: "Components/Forms/FileUploader",
component: FileUploader, component: FileUploader,
render: Template,
}; };
export default meta; export default meta;
@@ -146,7 +138,7 @@ export const MonoStatesShowcase = {
// the fake default files. In all other step we want it to be persistant in order to see transitions ( like the // the fake default files. In all other step we want it to be persistant in order to see transitions ( like the
// border color ). // border color ).
return ( return (
<Template <FileUploader
key={step === "fileSelected" ? step : "const"} key={step === "fileSelected" ? step : "const"}
{...stepToProps[step]} {...stepToProps[step]}
/> />
@@ -159,16 +151,14 @@ export const MonoValue = {
const ref = useRef<FileUploaderRefType>(null); const ref = useRef<FileUploaderRefType>(null);
const [value, setValue] = useState<File[]>([]); const [value, setValue] = useState<File[]>([]);
return ( return (
<CunninghamProvider> <div>
<div> <div>Value: {value.map((file) => file.name).join(", ")}</div>
<div>Value: {value.map((file) => file.name).join(", ")}</div> <FileUploader
<FileUploader onFilesChange={(e) => setValue(e.target.value)}
onFilesChange={(e) => setValue(e.target.value)} ref={ref}
ref={ref} />
/> <Button onClick={() => ref.current?.reset()}>Reset</Button>
<Button onClick={() => ref.current?.reset()}>Reset</Button> </div>
</div>
</CunninghamProvider>
); );
}, },
}; };
@@ -273,7 +263,7 @@ export const MultiStatesShowcase = {
// the fake default files. In all other step we want it to be persistant in order to see transitions ( like the // the fake default files. In all other step we want it to be persistant in order to see transitions ( like the
// border color ). // border color ).
return ( return (
<Template <FileUploader
key={step === "fileSelected" ? step : "const"} key={step === "fileSelected" ? step : "const"}
multiple={true} multiple={true}
{...stepToProps[step]} {...stepToProps[step]}
@@ -287,17 +277,15 @@ export const MultiValue = {
const ref = useRef<FileUploaderRefType>(null); const ref = useRef<FileUploaderRefType>(null);
const [value, setValue] = useState<File[]>([]); const [value, setValue] = useState<File[]>([]);
return ( return (
<CunninghamProvider> <div>
<div> <div>Value: {value.map((file) => file.name).join(", ")}</div>
<div>Value: {value.map((file) => file.name).join(", ")}</div> <FileUploader
<FileUploader onFilesChange={(e) => setValue(e.target.value)}
onFilesChange={(e) => setValue(e.target.value)} ref={ref}
ref={ref} multiple={true}
multiple={true} />
/> <Button onClick={() => ref.current?.reset()}>Reset</Button>
<Button onClick={() => ref.current?.reset()}>Reset</Button> </div>
</div>
</CunninghamProvider>
); );
}, },
}; };
@@ -314,29 +302,27 @@ export const Form = {
}; };
return ( return (
<CunninghamProvider> <form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}> <div>
<div> <FileUploader
<FileUploader name="files"
name="files" text="JPG, PNG or GIF - Max file size 2MB"
text="JPG, PNG or GIF - Max file size 2MB" accept="image/png, image/jpeg, image/gif"
accept="image/png, image/jpeg, image/gif" multiple={true}
multiple={true} />
/> </div>
</div> <div className="mt-s">
<div className="mt-s"> <FileUploader
<FileUploader name="file"
name="file" text="JPG, PNG or GIF - Max file size 2MB"
text="JPG, PNG or GIF - Max file size 2MB" accept="image/png, image/jpeg, image/gif"
accept="image/png, image/jpeg, image/gif" />
/> </div>
</div>
<div className="mt-s"> <div className="mt-s">
<Button>Submit</Button> <Button>Submit</Button>
</div> </div>
</form> </form>
</CunninghamProvider>
); );
}, },
}; };

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

@@ -163,7 +163,7 @@ export const Controlled = () => {
const [value, setValue] = React.useState("I am controlled"); const [value, setValue] = React.useState("I am controlled");
return ( return (
<div> <div>
<div> <div className="clr-greyscale-900">
Value: <span>{value}</span> Value: <span>{value}</span>
</div> </div>
<Input <Input

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

@@ -7,7 +7,6 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils"; import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
import { Select } from ":/components/Forms/Select"; import { Select } from ":/components/Forms/Select";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
import { CunninghamProvider } from ":/components/Provider";
import { RhfSelect } from ":/components/Forms/Select/stories-utils"; import { RhfSelect } from ":/components/Forms/Select/stories-utils";
export default { export default {
@@ -17,9 +16,7 @@ export default {
const Template: StoryFn<typeof Select> = (args) => ( const Template: StoryFn<typeof Select> = (args) => (
<div style={{ paddingBottom: "200px" }}> <div style={{ paddingBottom: "200px" }}>
<CunninghamProvider> <Select {...args} />
<Select {...args} />
</CunninghamProvider>
</div> </div>
); );
@@ -75,28 +72,26 @@ export const HiddenLabel = {
export const Controlled = () => { export const Controlled = () => {
const [value, setValue] = useState(OPTIONS[8].value); const [value, setValue] = useState(OPTIONS[8].value);
return ( return (
<CunninghamProvider> <div>
<div> <div>
<div> Value: <span>{value}</span>
Value: <span>{value}</span>
</div>
<Select
label="Select a city"
options={OPTIONS}
value={value}
onChange={(e) => {
setValue(e.target.value as string);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
<Button onClick={() => setValue(OPTIONS[0].value)}>
Set {OPTIONS[0].label}
</Button>
<Button onClick={() => setValue(OPTIONS[1].value)}>
Set {OPTIONS[1].label}
</Button>
</div> </div>
</CunninghamProvider> <Select
label="Select a city"
options={OPTIONS}
value={value}
onChange={(e) => {
setValue(e.target.value as string);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
<Button onClick={() => setValue(OPTIONS[0].value)}>
Set {OPTIONS[0].label}
</Button>
<Button onClick={() => setValue(OPTIONS[1].value)}>
Set {OPTIONS[1].label}
</Button>
</div>
); );
}; };
@@ -151,29 +146,27 @@ export const SearchableDisabled = {
export const SearchableControlled = () => { export const SearchableControlled = () => {
const [value, setValue] = useState(OPTIONS[8].value); const [value, setValue] = useState(OPTIONS[8].value);
return ( return (
<CunninghamProvider> <div>
<div> <div>
<div> Value: <span>{value}</span>
Value: <span>{value}</span>
</div>
<Select
label="Select a city"
options={OPTIONS}
searchable={true}
value={value}
onChange={(e) => {
setValue(e.target.value as string);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
<Button onClick={() => setValue(OPTIONS[0].value)}>
Set {OPTIONS[0].label}
</Button>
<Button onClick={() => setValue(OPTIONS[1].value)}>
Set {OPTIONS[1].label}
</Button>
</div> </div>
</CunninghamProvider> <Select
label="Select a city"
options={OPTIONS}
searchable={true}
value={value}
onChange={(e) => {
setValue(e.target.value as string);
}}
/>
<Button onClick={() => setValue("")}>Reset</Button>
<Button onClick={() => setValue(OPTIONS[0].value)}>
Set {OPTIONS[0].label}
</Button>
<Button onClick={() => setValue(OPTIONS[1].value)}>
Set {OPTIONS[1].label}
</Button>
</div>
); );
}; };
@@ -244,105 +237,103 @@ export const FormExample = () => {
}; };
return ( return (
<CunninghamProvider> <form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your city"
label="Your city" name="city"
name="city" options={OPTIONS}
options={OPTIONS} defaultValue={OPTIONS[2].value}
defaultValue={OPTIONS[2].value} text="The city you were born in"
text="The city you were born in" state="success"
state="success" />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your gender"
label="Your gender" name="gender"
name="gender" options={[
options={[ {
{ label: "Male",
label: "Male", },
}, {
{ label: "Female",
label: "Female", },
}, {
{ label: "Other",
label: "Other", },
}, ]}
]} />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your department"
label="Your department" name="department"
name="department" searchable={true}
searchable={true} options={[
options={[ {
{ label: "Legal",
label: "Legal", },
}, {
{ label: "Tech",
label: "Tech", },
}, {
{ label: "AI",
label: "AI", },
}, {
{ label: "Accounting",
label: "Accounting", },
}, ]}
]} />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your grade"
label="Your grade" text="Any error you want"
text="Any error you want" name="grade"
name="grade" searchable={true}
searchable={true} options={[
options={[ {
{ label: "Level 1",
label: "Level 1", },
}, {
{ label: "Level 2",
label: "Level 2", },
}, {
{ label: "Level 3",
label: "Level 3", },
}, {
{ label: "Emperor",
label: "Emperor", },
}, ]}
]} state="error"
state="error" />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your plan"
label="Your plan" text="This field is disabled"
text="This field is disabled" name="grade"
name="grade" disabled={true}
disabled={true} options={[
options={[ {
{ label: "Bronze",
label: "Bronze", },
}, {
{ label: "Silver",
label: "Silver", },
}, {
{ label: "Gold",
label: "Gold", },
}, {
{ label: "Platinum",
label: "Platinum", },
}, ]}
]} defaultValue="Platinum"
defaultValue="Platinum" />
/> </div>
</div> <Button>Submit</Button>
<Button>Submit</Button> </form>
</form>
</CunninghamProvider>
); );
}; };
@@ -374,40 +365,40 @@ export const ReactHookForm = () => {
}); });
return ( return (
<CunninghamProvider> <FormProvider {...methods}>
<FormProvider {...methods}> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} onSubmit={methods.handleSubmit(onSubmit)}
onSubmit={methods.handleSubmit(onSubmit)} >
> <div className="clr-greyscale-900">
<div>Where will the 2024 Olympics take place?</div> Where will the 2024 Olympics take place?
<RhfSelect </div>
name="joTown" <RhfSelect
label="Select a city" name="joTown"
fullWidth={true} label="Select a city"
options={[ fullWidth={true}
{ options={[
label: "Dijon", {
value: CitiesOptionEnum.DIJON, label: "Dijon",
}, value: CitiesOptionEnum.DIJON,
{ },
label: "Paris", {
value: CitiesOptionEnum.PARIS, label: "Paris",
}, value: CitiesOptionEnum.PARIS,
{ },
label: "Tokyo", {
value: CitiesOptionEnum.TOKYO, label: "Tokyo",
}, value: CitiesOptionEnum.TOKYO,
]} },
/> ]}
<Button fullWidth={true}>Submit</Button> />
</form> <Button fullWidth={true}>Submit</Button>
</FormProvider> </form>
</CunninghamProvider> </FormProvider>
); );
}; };

309
packages/react/src/components/Forms/Select/multi.stories.tsx
View File

@@ -6,7 +6,6 @@ import { Meta, StoryFn } from "@storybook/react";
import { faker } from "@faker-js/faker"; import { faker } from "@faker-js/faker";
import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils"; import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
import { Select } from ":/components/Forms/Select"; import { Select } from ":/components/Forms/Select";
import { CunninghamProvider } from ":/components/Provider";
import { Button } from ":/components/Button"; import { Button } from ":/components/Button";
import { RhfSelect } from ":/components/Forms/Select/stories-utils"; import { RhfSelect } from ":/components/Forms/Select/stories-utils";
@@ -15,13 +14,13 @@ export default {
component: Select, component: Select,
} as Meta<typeof Select>; } as Meta<typeof Select>;
const Template: StoryFn<typeof Select> = (args) => ( const Template: StoryFn<typeof Select> = (args) => {
<div style={{ paddingBottom: "200px" }}> return (
<CunninghamProvider> <div style={{ paddingBottom: "200px" }}>
<Select {...args} multi={true} /> <Select {...args} multi={true} />
</CunninghamProvider> </div>
</div> );
); };
const CITIES = Array.from({ length: 10 }).map(() => faker.location.city()); const CITIES = Array.from({ length: 10 }).map(() => faker.location.city());
const OPTIONS = CITIES.map((city) => ({ const OPTIONS = CITIES.map((city) => ({
@@ -71,21 +70,19 @@ export const HiddenLabel = {
export const Controlled = () => { export const Controlled = () => {
const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]); const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
return ( return (
<CunninghamProvider> <div>
<div> <div className="clr-greyscale-900">
<div> Value: <span>{JSON.stringify(value)}</span>
Value: <span>{JSON.stringify(value)}</span>
</div>
<Select
label="Select cities"
multi={true}
options={OPTIONS}
value={value}
onChange={(e) => setValue(e.target.value as string[])}
/>
<Button onClick={() => setValue([])}>Reset</Button>
</div> </div>
</CunninghamProvider> <Select
label="Select cities"
multi={true}
options={OPTIONS}
value={value}
onChange={(e) => setValue(e.target.value as string[])}
/>
<Button onClick={() => setValue([])}>Reset</Button>
</div>
); );
}; };
@@ -136,22 +133,20 @@ export const SearchableDisabled = {
export const SearchableControlled = () => { export const SearchableControlled = () => {
const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]); const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
return ( return (
<CunninghamProvider> <div>
<div> <div className="clr-greyscale-900">
<div> Value: <span>{JSON.stringify(value)}</span>
Value: <span>{JSON.stringify(value)}</span>
</div>
<Select
label="Select cities"
options={OPTIONS}
searchable={true}
multi={true}
value={value}
onChange={(e) => setValue(e.target.value as string[])}
/>
<Button onClick={() => setValue([])}>Reset</Button>
</div> </div>
</CunninghamProvider> <Select
label="Select cities"
options={OPTIONS}
searchable={true}
multi={true}
value={value}
onChange={(e) => setValue(e.target.value as string[])}
/>
<Button onClick={() => setValue([])}>Reset</Button>
</div>
); );
}; };
@@ -232,89 +227,87 @@ export const FormExample = () => {
}; };
return ( return (
<CunninghamProvider> <form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your favorite cities"
label="Your favorite cities" name="cities"
name="cities" options={OPTIONS}
options={OPTIONS} text="The cities you love the most"
text="The cities you love the most" state="success"
state="success" defaultValue={[OPTIONS[4].value]}
defaultValue={[OPTIONS[4].value]} multi={true}
multi={true} />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your departments"
label="Your departments" name="departments"
name="departments" searchable={true}
searchable={true} multi={true}
multi={true} options={[
options={[ {
{ label: "Legal",
label: "Legal", },
}, {
{ label: "Tech",
label: "Tech", },
}, {
{ label: "AI",
label: "AI", },
}, {
{ label: "Accounting",
label: "Accounting", },
}, ]}
]} />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your skills"
label="Your skills" text="Any error you want"
text="Any error you want" name="skills"
name="skills" multi={true}
multi={true} options={[
options={[ {
{ label: "Front-end",
label: "Front-end", },
}, {
{ label: "Back-end",
label: "Back-end", },
}, {
{ label: "Full-stack",
label: "Full-stack", },
}, ]}
]} state="error"
state="error" />
/> </div>
</div> <div className="mb-s">
<div className="mb-s"> <Select
<Select label="Your options"
label="Your options" text="This field is disabled"
text="This field is disabled" name="grade"
name="grade" disabled={true}
disabled={true} multi={true}
multi={true} options={[
options={[ {
{ label: "Bronze",
label: "Bronze", },
}, {
{ label: "Silver",
label: "Silver", },
}, {
{ label: "Gold",
label: "Gold", },
}, {
{ label: "Platinum",
label: "Platinum", },
}, ]}
]} defaultValue={["Platinum", "Gold"]}
defaultValue={["Platinum", "Gold"]} />
/> </div>
</div>
<Button>Submit</Button> <Button>Submit</Button>
</form> </form>
</CunninghamProvider>
); );
}; };
@@ -353,45 +346,45 @@ export const ReactHookForm = () => {
}); });
return ( return (
<CunninghamProvider> <FormProvider {...methods}>
<FormProvider {...methods}> <form
<form style={{
style={{ display: "flex",
display: "flex", flexDirection: "column",
flexDirection: "column", gap: "1rem",
gap: "1rem", width: "400px",
width: "400px", }}
}} onSubmit={methods.handleSubmit(onSubmit)}
onSubmit={methods.handleSubmit(onSubmit)} >
> <div className="clr-greyscale-900">
<div>Which cities are capital of countries ?</div> Which cities are capital of countries ?
<RhfSelect </div>
name="capitalCity" <RhfSelect
label="Select a city" name="capitalCity"
multi={true} label="Select a city"
fullWidth={true} multi={true}
options={[ fullWidth={true}
{ options={[
label: "Dijon", {
value: CitiesOptionEnum.DIJON, label: "Dijon",
}, value: CitiesOptionEnum.DIJON,
{ },
label: "Paris", {
value: CitiesOptionEnum.PARIS, label: "Paris",
}, value: CitiesOptionEnum.PARIS,
{ },
label: "Tokyo", {
value: CitiesOptionEnum.TOKYO, label: "Tokyo",
}, value: CitiesOptionEnum.TOKYO,
{ },
label: "Vannes", {
value: CitiesOptionEnum.VANNES, label: "Vannes",
}, value: CitiesOptionEnum.VANNES,
]} },
/> ]}
<Button fullWidth={true}>Submit</Button> />
</form> <Button fullWidth={true}>Submit</Button>
</FormProvider> </form>
</CunninghamProvider> </FormProvider>
); );
}; };

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

@@ -119,7 +119,9 @@ export const Controlled = {
const [checked, setChecked] = React.useState(false); const [checked, setChecked] = React.useState(false);
return ( return (
<div> <div>
<div>Value: {JSON.stringify(checked)}</div> <div className="clr-greyscale-900">
Value: {JSON.stringify(checked)}
</div>
<Switch <Switch
checked={checked} checked={checked}
onChange={(e) => setChecked(e.target.checked)} onChange={(e) => setChecked(e.target.checked)}

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

@@ -1,7 +1,6 @@
import { Meta } from "@storybook/react"; import { Meta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Pagination, usePagination } from ":/components/Pagination/index"; import { Pagination, usePagination } from ":/components/Pagination/index";
import { CunninghamProvider } from ":/components/Provider";
export default { export default {
title: "Components/Pagination", title: "Components/Pagination",
@@ -13,11 +12,7 @@ export const Basic = () => {
defaultPagesCount: 100, defaultPagesCount: 100,
defaultPage: 50, defaultPage: 50,
}); });
return ( return <Pagination {...pagination} />;
<CunninghamProvider>
<Pagination {...pagination} />
</CunninghamProvider>
);
}; };
export const List = () => { export const List = () => {
@@ -49,18 +44,16 @@ export const List = () => {
}, [pagination.page]); }, [pagination.page]);
return ( return (
<CunninghamProvider> <div>
<div> <div>
<div> {items.map((item) => (
{items.map((item) => ( <div className="p-t bg-secondary-300 mb-t" key={item}>
<div className="p-t bg-secondary-300 mb-t" key={item}> {item}
{item} </div>
</div> ))}
))}
</div>
<Pagination {...pagination} />
</div> </div>
</CunninghamProvider> <Pagination {...pagination} />
</div>
); );
}; };
@@ -76,9 +69,5 @@ export const ForcePage = () => {
clearTimeout(timeout); clearTimeout(timeout);
}; };
}, []); }, []);
return ( return <Pagination {...pagination} />;
<CunninghamProvider>
<Pagination {...pagination} />
</CunninghamProvider>
);
}; };