♻️(react) update stories for themes

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.

packages/react/src/components/DataGrid/index.stories.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import { faker } from "@faker-js/faker";
 import { DataGrid, SortModel } from ":/components/DataGrid/index";
 import { usePagination } from ":/components/Pagination";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
 import { DataList } from ":/components/DataGrid/DataList";
@@ -15,7 +14,6 @@ export default {
 
 export const Empty = () => {
   return (
-    <CunninghamProvider>
     <DataGrid
       columns={[
         {
@@ -26,13 +24,11 @@ export const Empty = () => {
       ]}
       rows={[]}
     />
-    </CunninghamProvider>
   );
 };
 
 export const Loading = () => {
   return (
-    <CunninghamProvider>
     <DataGrid
       columns={[
         {
@@ -44,7 +40,6 @@ export const Loading = () => {
       rows={[]}
       isLoading={true}
     />
-    </CunninghamProvider>
   );
 };
 
@@ -61,7 +56,6 @@ export const ClientSideWithoutPagination = () => {
     [],
   );
   return (
-    <CunninghamProvider>
     <SimpleDataGrid
       columns={[
         {
@@ -97,7 +91,6 @@ export const ClientSideWithoutPagination = () => {
       ]}
       rows={database}
     />
-    </CunninghamProvider>
   );
 };
 
@@ -116,7 +109,7 @@ export const ClientSideWithPagination = () => {
   const [rowSelection, setRowSelection] = useState({});
 
   return (
-    <CunninghamProvider>
+    <>
       <SimpleDataGrid
         columns={[
           {
@@ -149,7 +142,7 @@ export const ClientSideWithPagination = () => {
         onRowSelectionChange={setRowSelection}
       />
       <div>Selected rows: {Object.keys(rowSelection).join(", ")}</div>
-    </CunninghamProvider>
+    </>
   );
 };
 
@@ -208,7 +201,6 @@ export const FullServerSide = () => {
   }, [pagination.page, sortModel]);
 
   return (
-    <CunninghamProvider>
     <DataGrid
       columns={[
         {
@@ -249,7 +241,6 @@ export const FullServerSide = () => {
       rowSelection={rowSelection}
       onRowSelectionChange={setRowSelection}
     />
-    </CunninghamProvider>
   );
 };
 
@@ -265,7 +256,6 @@ export const DataListOnly = () => {
   );
 
   return (
-    <CunninghamProvider>
     <DataList
       rows={database}
       columns={[
@@ -284,6 +274,5 @@ export const DataListOnly = () => {
         },
       ]}
     />
-    </CunninghamProvider>
   );
 };

packages/react/src/components/Forms/Checkbox/index.stories.tsx

@@ -122,7 +122,7 @@ export const Success = {
 
 export const Group = () => (
   <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>
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
@@ -135,7 +135,7 @@ export const Group = () => (
 
 export const GroupError = () => (
   <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">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
@@ -148,7 +148,7 @@ export const GroupError = () => (
 
 export const GroupSuccess = () => (
   <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 !">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />

packages/react/src/components/Forms/DatePicker/index.stories.tsx

@@ -16,16 +16,12 @@ export default {
 } as Meta<typeof DatePicker>;
 
 const Template: StoryFn<typeof DatePicker> = (args) => (
-  <CunninghamProvider>
   <DatePicker {...args} label="Pick a date" />
-  </CunninghamProvider>
 );
 
 export const Default = () => (
   <div style={{ minHeight: "400px" }}>
-    <CunninghamProvider>
     <DatePicker label="Pick a date" />
-    </CunninghamProvider>
   </div>
 );
 
@@ -98,13 +94,11 @@ export const Fullwidth = {
 
 export const CustomLocale = () => (
   <div style={{ minHeight: "400px" }}>
-    <CunninghamProvider>
     <DatePicker
       label="Pick a date"
       locale="hi-IN-u-ca-indian"
       defaultValue="2023-06-25T00:00:00.000+00:00"
     />
-    </CunninghamProvider>
   </div>
 );
 
@@ -122,9 +116,8 @@ export const CunninghamLocale = () => (
 export const Controlled = () => {
   const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
   return (
-    <CunninghamProvider>
-      <div>
     <div>
+      <div className="clr-greyscale-900">
         Value: <span>{value?.toString()}</span>
       </div>
       <DatePicker
@@ -136,7 +129,6 @@ export const Controlled = () => {
       />
       <Button onClick={() => setValue("")}>Reset</Button>
     </div>
-    </CunninghamProvider>
   );
 };
 
@@ -153,7 +145,6 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
     <FormProvider {...methods}>
       <form
         style={{
@@ -168,23 +159,19 @@ export const ReactHookForm = () => {
         <Button fullWidth={true}>Submit</Button>
       </form>
     </FormProvider>
-    </CunninghamProvider>
   );
 };
 
 export const RangeDefault = () => {
   return (
     <div style={{ minHeight: "400px" }}>
-      <CunninghamProvider>
       <DateRangePicker startLabel="Start date" endLabel="Due date" />
-      </CunninghamProvider>
     </div>
   );
 };
 
 export const RangeDefaultValue = () => {
   return (
-    <CunninghamProvider>
     <DateRangePicker
       startLabel="Start date"
       endLabel="Due date"
@@ -193,7 +180,6 @@ export const RangeDefaultValue = () => {
         "2023-06-23T00:00:00.000+00:00",
       ]}
     />
-    </CunninghamProvider>
   );
 };
 
@@ -204,8 +190,7 @@ export const RangeControlled = () => {
   ]);
   return (
     <div>
-      <CunninghamProvider>
+      <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
-        <div>Value: {value?.join("  ")}</div>
       <DateRangePicker
         startLabel="Start date"
         endLabel="Due date"
@@ -215,7 +200,6 @@ export const RangeControlled = () => {
         onChange={(e) => setValue(e)}
       />
       <Button onClick={() => setValue(null)}>Reset</Button>
-      </CunninghamProvider>
     </div>
   );
 };

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

@@ -5,7 +5,6 @@ import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
 import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Button } from ":/components/Button";
-import { CunninghamProvider } from ":/components/Provider";
 import { Radio, RadioGroup } from ":/components/Forms/Radio";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 import {
@@ -55,7 +54,6 @@ const SportsBase = ({ values }: SportProps) => {
   }, [values]);
 
   return (
-    <CunninghamProvider>
     <FormProvider {...methods}>
       <form
         style={{
@@ -167,7 +165,6 @@ const SportsBase = ({ values }: SportProps) => {
         </a>
       </form>
     </FormProvider>
-    </CunninghamProvider>
   );
 };
 

packages/react/src/components/Forms/Examples/index.stories.tsx

@@ -5,7 +5,6 @@ import { Input } from ":/components/Forms/Input";
 import { Checkbox } from ":/components/Forms/Checkbox";
 import { Button } from ":/components/Button";
 import { Select } from ":/components/Forms/Select";
-import { CunninghamProvider } from ":/components/Provider";
 import { FileUploader } from ":/components/Forms/FileUploader";
 import { Switch } from ":/components/Forms/Switch";
 import { Radio } from ":/components/Forms/Radio";
@@ -55,7 +54,6 @@ export const Login = () => {
 
 export const Application = () => {
   return (
-    <CunninghamProvider>
     <form
       style={{
         display: "flex",
@@ -101,9 +99,7 @@ export const Application = () => {
         <Input label="City" fullWidth={true} />
       </div>
       <div>
-          <div className="fs-l clr-greyscale-800 mb-t">
+        <div className="fs-l clr-greyscale-800 mb-t">Your curriculum vitae</div>
-            Your curriculum vitae
-          </div>
         <FileUploader
           fullWidth={true}
           text="pdf only ( 4mb maximum )"
@@ -124,13 +120,11 @@ export const Application = () => {
         Need help ?
       </a>
     </form>
-    </CunninghamProvider>
   );
 };
 
 export const Sports = () => {
   return (
-    <CunninghamProvider>
     <form
       style={{
         display: "flex",
@@ -138,6 +132,7 @@ export const Sports = () => {
         gap: "1rem",
         width: "400px",
       }}
+      onSubmit={(e) => e.preventDefault()}
     >
       <h1
         className="fs-h3 fw-bold clr-greyscale-900"
@@ -217,13 +212,11 @@ export const Sports = () => {
         Need help ?
       </a>
     </form>
-    </CunninghamProvider>
   );
 };
 export const SportsDisabled = () => {
   const [withValues, setWithValues] = useState(false);
   return (
-    <CunninghamProvider>
     <form
       style={{
         display: "flex",
@@ -241,12 +234,7 @@ export const SportsDisabled = () => {
       <div>
         <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
         <div style={{ display: "flex", gap: "0.5rem" }}>
-            <Radio
+          <Radio name="gender" label="Male" fullWidth={true} disabled={true} />
-              name="gender"
-              label="Male"
-              fullWidth={true}
-              disabled={true}
-            />
           <Radio name="gender" label="Female" disabled={true} />
           <Radio name="gender" label="Other" disabled={true} />
         </div>
@@ -315,10 +303,7 @@ export const SportsDisabled = () => {
         endLabel="End date"
         value={
           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",
-                  "2023-06-23T00:00:00.000+00:00",
-                ]
             : undefined
         }
         fullWidth={true}
@@ -340,6 +325,5 @@ export const SportsDisabled = () => {
         Need help ?
       </a>
     </form>
-    </CunninghamProvider>
   );
 };

packages/react/src/components/Forms/FileUploader/index.stories.tsx

@@ -1,19 +1,12 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React, { useEffect, useRef, useState } from "react";
 import { faker } from "@faker-js/faker";
 import {
   FileUploader,
   FileUploaderRefType,
 } from ":/components/Forms/FileUploader/index";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 
-const Template: StoryFn<typeof FileUploader> = (args) => (
-  <CunninghamProvider>
-    <FileUploader {...args} />
-  </CunninghamProvider>
-);
-
 const FAKE_FILES = [
   new File(["42"], faker.lorem.sentence(5) + "pdf"),
   new File(["42"], faker.lorem.sentence(1) + "pdf"),
@@ -24,7 +17,6 @@ const FAKE_FILES = [
 const meta: Meta<typeof FileUploader> = {
   title: "Components/Forms/FileUploader",
   component: FileUploader,
-  render: Template,
 };
 
 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
     // border color ).
     return (
-      <Template
+      <FileUploader
         key={step === "fileSelected" ? step : "const"}
         {...stepToProps[step]}
       />
@@ -159,7 +151,6 @@ export const MonoValue = {
     const ref = useRef<FileUploaderRefType>(null);
     const [value, setValue] = useState<File[]>([]);
     return (
-      <CunninghamProvider>
       <div>
         <div>Value: {value.map((file) => file.name).join(", ")}</div>
         <FileUploader
@@ -168,7 +159,6 @@ export const MonoValue = {
         />
         <Button onClick={() => ref.current?.reset()}>Reset</Button>
       </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
     // border color ).
     return (
-      <Template
+      <FileUploader
         key={step === "fileSelected" ? step : "const"}
         multiple={true}
         {...stepToProps[step]}
@@ -287,7 +277,6 @@ export const MultiValue = {
     const ref = useRef<FileUploaderRefType>(null);
     const [value, setValue] = useState<File[]>([]);
     return (
-      <CunninghamProvider>
       <div>
         <div>Value: {value.map((file) => file.name).join(", ")}</div>
         <FileUploader
@@ -297,7 +286,6 @@ export const MultiValue = {
         />
         <Button onClick={() => ref.current?.reset()}>Reset</Button>
       </div>
-      </CunninghamProvider>
     );
   },
 };
@@ -314,7 +302,6 @@ export const Form = {
     };
 
     return (
-      <CunninghamProvider>
       <form onSubmit={handleSubmit}>
         <div>
           <FileUploader
@@ -336,7 +323,6 @@ export const Form = {
           <Button>Submit</Button>
         </div>
       </form>
-      </CunninghamProvider>
     );
   },
 };

packages/react/src/components/Forms/Input/index.stories.tsx

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

packages/react/src/components/Forms/Select/mono.stories.tsx

@@ -7,7 +7,6 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
 import { Button } from ":/components/Button";
-import { CunninghamProvider } from ":/components/Provider";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
 export default {
@@ -17,9 +16,7 @@ export default {
 
 const Template: StoryFn<typeof Select> = (args) => (
   <div style={{ paddingBottom: "200px" }}>
-    <CunninghamProvider>
     <Select {...args} />
-    </CunninghamProvider>
   </div>
 );
 
@@ -75,7 +72,6 @@ export const HiddenLabel = {
 export const Controlled = () => {
   const [value, setValue] = useState(OPTIONS[8].value);
   return (
-    <CunninghamProvider>
     <div>
       <div>
         Value: <span>{value}</span>
@@ -96,7 +92,6 @@ export const Controlled = () => {
         Set {OPTIONS[1].label}
       </Button>
     </div>
-    </CunninghamProvider>
   );
 };
 
@@ -151,7 +146,6 @@ export const SearchableDisabled = {
 export const SearchableControlled = () => {
   const [value, setValue] = useState(OPTIONS[8].value);
   return (
-    <CunninghamProvider>
     <div>
       <div>
         Value: <span>{value}</span>
@@ -173,7 +167,6 @@ export const SearchableControlled = () => {
         Set {OPTIONS[1].label}
       </Button>
     </div>
-    </CunninghamProvider>
   );
 };
 
@@ -244,7 +237,6 @@ export const FormExample = () => {
   };
 
   return (
-    <CunninghamProvider>
     <form onSubmit={handleSubmit}>
       <div className="mb-s">
         <Select
@@ -342,7 +334,6 @@ export const FormExample = () => {
       </div>
       <Button>Submit</Button>
     </form>
-    </CunninghamProvider>
   );
 };
 
@@ -374,7 +365,6 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
     <FormProvider {...methods}>
       <form
         style={{
@@ -385,7 +375,9 @@ export const ReactHookForm = () => {
         }}
         onSubmit={methods.handleSubmit(onSubmit)}
       >
-          <div>Where will the 2024 Olympics take place?</div>
+        <div className="clr-greyscale-900">
+          Where will the 2024 Olympics take place?
+        </div>
         <RhfSelect
           name="joTown"
           label="Select a city"
@@ -408,6 +400,5 @@ export const ReactHookForm = () => {
         <Button fullWidth={true}>Submit</Button>
       </form>
     </FormProvider>
-    </CunninghamProvider>
   );
 };

packages/react/src/components/Forms/Select/multi.stories.tsx

@@ -6,7 +6,6 @@ import { Meta, StoryFn } from "@storybook/react";
 import { faker } from "@faker-js/faker";
 import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
@@ -15,13 +14,13 @@ export default {
   component: Select,
 } as Meta<typeof Select>;
 
-const Template: StoryFn<typeof Select> = (args) => (
+const Template: StoryFn<typeof Select> = (args) => {
+  return (
     <div style={{ paddingBottom: "200px" }}>
-    <CunninghamProvider>
       <Select {...args} multi={true} />
-    </CunninghamProvider>
     </div>
   );
+};
 
 const CITIES = Array.from({ length: 10 }).map(() => faker.location.city());
 const OPTIONS = CITIES.map((city) => ({
@@ -71,9 +70,8 @@ export const HiddenLabel = {
 export const Controlled = () => {
   const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
   return (
-    <CunninghamProvider>
-      <div>
     <div>
+      <div className="clr-greyscale-900">
         Value: <span>{JSON.stringify(value)}</span>
       </div>
       <Select
@@ -85,7 +83,6 @@ export const Controlled = () => {
       />
       <Button onClick={() => setValue([])}>Reset</Button>
     </div>
-    </CunninghamProvider>
   );
 };
 
@@ -136,9 +133,8 @@ export const SearchableDisabled = {
 export const SearchableControlled = () => {
   const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
   return (
-    <CunninghamProvider>
-      <div>
     <div>
+      <div className="clr-greyscale-900">
         Value: <span>{JSON.stringify(value)}</span>
       </div>
       <Select
@@ -151,7 +147,6 @@ export const SearchableControlled = () => {
       />
       <Button onClick={() => setValue([])}>Reset</Button>
     </div>
-    </CunninghamProvider>
   );
 };
 
@@ -232,7 +227,6 @@ export const FormExample = () => {
   };
 
   return (
-    <CunninghamProvider>
     <form onSubmit={handleSubmit}>
       <div className="mb-s">
         <Select
@@ -314,7 +308,6 @@ export const FormExample = () => {
 
       <Button>Submit</Button>
     </form>
-    </CunninghamProvider>
   );
 };
 
@@ -353,7 +346,6 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
     <FormProvider {...methods}>
       <form
         style={{
@@ -364,7 +356,9 @@ export const ReactHookForm = () => {
         }}
         onSubmit={methods.handleSubmit(onSubmit)}
       >
-          <div>Which cities are capital of countries ?</div>
+        <div className="clr-greyscale-900">
+          Which cities are capital of countries ?
+        </div>
         <RhfSelect
           name="capitalCity"
           label="Select a city"
@@ -392,6 +386,5 @@ export const ReactHookForm = () => {
         <Button fullWidth={true}>Submit</Button>
       </form>
     </FormProvider>
-    </CunninghamProvider>
   );
 };

packages/react/src/components/Forms/Switch/index.stories.tsx

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

packages/react/src/components/Pagination/index.stories.tsx

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