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

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 { 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,16 +151,14 @@ 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
onFilesChange={(e) => setValue(e.target.value)}
ref={ref}
/>
<Button onClick={() => ref.current?.reset()}>Reset</Button>
</div>
</CunninghamProvider>
<div>
<div>Value: {value.map((file) => file.name).join(", ")}</div>
<FileUploader
onFilesChange={(e) => setValue(e.target.value)}
ref={ref}
/>
<Button onClick={() => ref.current?.reset()}>Reset</Button>
</div>
);
},
};
@@ -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,17 +277,15 @@ 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
onFilesChange={(e) => setValue(e.target.value)}
ref={ref}
multiple={true}
/>
<Button onClick={() => ref.current?.reset()}>Reset</Button>
</div>
</CunninghamProvider>
<div>
<div>Value: {value.map((file) => file.name).join(", ")}</div>
<FileUploader
onFilesChange={(e) => setValue(e.target.value)}
ref={ref}
multiple={true}
/>
<Button onClick={() => ref.current?.reset()}>Reset</Button>
</div>
);
},
};
@@ -314,29 +302,27 @@ export const Form = {
};
return (
<CunninghamProvider>
<form onSubmit={handleSubmit}>
<div>
<FileUploader
name="files"
text="JPG, PNG or GIF - Max file size 2MB"
accept="image/png, image/jpeg, image/gif"
multiple={true}
/>
</div>
<div className="mt-s">
<FileUploader
name="file"
text="JPG, PNG or GIF - Max file size 2MB"
accept="image/png, image/jpeg, image/gif"
/>
</div>
<form onSubmit={handleSubmit}>
<div>
<FileUploader
name="files"
text="JPG, PNG or GIF - Max file size 2MB"
accept="image/png, image/jpeg, image/gif"
multiple={true}
/>
</div>
<div className="mt-s">
<FileUploader
name="file"
text="JPG, PNG or GIF - Max file size 2MB"
accept="image/png, image/jpeg, image/gif"
/>
</div>
<div className="mt-s">
<Button>Submit</Button>
</div>
</form>
</CunninghamProvider>
<div className="mt-s">
<Button>Submit</Button>
</div>
</form>
);
},
};