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

♻️(react) remove faker usage from stories

Browse Source 
Random data in stories was causing Chromatic to detect changes during
each build.
This commit is contained in:
Nathan Vasse
2024-03-18 16:32:01 +01:00
committed by NathanVss
parent f10e0e2fde
commit 9c614953b8
12 changed files with 50 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,9 @@
import { Meta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react";
import { faker } from "@faker-js/faker";
import databaseUsers from ":/components/DataGrid/resources/databaseUsers.json";
import databaseUsersServer from ":/components/DataGrid/resources/databaseUsersServer.json";
import databaseCars from ":/components/DataGrid/resources/databaseCars.json";
import databaseListOnly from ":/components/DataGrid/resources/databaseListOnly.json";
import { DataGrid, SortModel } from ":/components/DataGrid/index";
import { usePagination } from ":/components/Pagination";
import { Button } from ":/components/Button";
@@ -84,17 +87,6 @@ export const Loading = () => {
};
export const ClientSideWithoutPagination = () => {
const database = useMemo(
() =>
Array.from(Array(23)).map(() => ({
id: faker.string.uuid(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
email: faker.internet.email(),
address: faker.location.streetAddress(),
})),
[],
);
return (
<SimpleDataGrid
columns={[
@@ -129,23 +121,12 @@ export const ClientSideWithoutPagination = () => {
),
},
]}
rows={database}
rows={databaseUsers}
/>
);
};
export const ClientSideWithPagination = () => {
const database = useMemo(
() =>
Array.from(Array(23)).map(() => ({
id: faker.string.uuid(),
carName: faker.company.name(),
year: faker.date.past().getFullYear(),
price: +faker.commerce.price({ min: 5000, max: 5005 }),
})),
[],
);
const [rowSelection, setRowSelection] = useState({});
return (
@@ -167,7 +148,7 @@ export const ClientSideWithPagination = () => {
highlight: true,
},
]}
rows={database}
rows={databaseCars}
defaultPaginationParams={{
pageSize: 5,
}}
@@ -187,18 +168,7 @@ export const ClientSideWithPagination = () => {
};
export const FullServerSide = () => {
const database = useMemo(
() =>
Array.from(Array(191)).map(() => ({
id: faker.string.uuid(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
email: faker.internet.email(),
address: faker.location.streetAddress(),
country: faker.location.countryCode(),
})),
[],
);
const database = useMemo(() => [...databaseUsersServer], []);
const [rowSelection, setRowSelection] = useState({});
const [isLoading, setIsLoading] = useState(true);
const pagination = usePagination({ defaultPage: 10 });
@@ -304,19 +274,9 @@ export const FullServerSide = () => {
};
export const DataListOnly = () => {
const database = useMemo(
() =>
Array.from(Array(5)).map((_value, index) => ({
id: `list key for element ${index}`,
title: faker.word.sample(),
date: faker.date.past({ years: 1 }).toISOString(),
})),
[],
);
return (
<DataList
rows={database}
rows={databaseListOnly}
columns={[
{ field: "title" },
{ field: "date" },
@@ -337,17 +297,6 @@ export const DataListOnly = () => {
};
export const WithColumnWidth = () => {
const database = useMemo(
() =>
Array.from(Array(23)).map(() => ({
id: faker.string.uuid(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
email: faker.internet.email(),
address: faker.location.streetAddress(),
})),
[],
);
return (
<SimpleDataGrid
columns={[
@@ -385,7 +334,7 @@ export const WithColumnWidth = () => {
),
},
]}
rows={database}
rows={databaseUsersServer}
/>
);
};

1
packages/react/src/components/DataGrid/resources/databaseCars.json Normal file
View File

@@ -0,0 +1 @@
[{"id":"42e59801-eaf0-4cec-a9bb-8222788cd779","carName":"Hackett - Dickinson","year":2023,"price":5003},{"id":"92874aea-0984-473e-bb06-2e48f920099e","carName":"Brakus Group","year":2024,"price":5002},{"id":"5a29eb9c-2f43-498a-ad72-a2d9c933d8b5","carName":"Schamberger Inc","year":2023,"price":5005},{"id":"1c075a61-809b-4c32-bdf4-8679fe60957a","carName":"Schinner, Kertzmann and Mitchell","year":2023,"price":5003},{"id":"24091aba-94f2-4e0e-8ee1-5d83f80ad6a0","carName":"Ratke, Morissette and Beatty","year":2023,"price":5001},{"id":"f56b9138-8cc3-4175-86b4-4db860e3839f","carName":"Price LLC","year":2024,"price":5000},{"id":"d437fb53-a10b-46f9-8975-73568aa10635","carName":"Balistreri, Von and Wintheiser","year":2024,"price":5000},{"id":"fe4e25ef-2cd1-4ddd-9de9-b9cd4d51d3f4","carName":"Heathcote, Herzog and Casper","year":2023,"price":5005},{"id":"e41a2d28-6681-4bb2-988a-c4aac01a6d6b","carName":"Bins, Brown and Hirthe","year":2023,"price":5002},{"id":"f7acb144-40a5-4584-b5f2-9018c55bf98e","carName":"Welch Group","year":2023,"price":5000},{"id":"0d977b79-c762-478e-bed8-43d6faf1f7e7","carName":"Stroman and Sons","year":2024,"price":5000},{"id":"066aeb90-ff34-4f24-8d23-2df7dd4749ce","carName":"Padberg - Raynor","year":2023,"price":5002},{"id":"b242524e-1cc8-4d72-be79-430e881682f5","carName":"Emmerich, Breitenberg and Hand","year":2023,"price":5001},{"id":"88ea6672-ef61-468e-a0a0-cbe78ab4c9ca","carName":"Ratke, Abernathy and Macejkovic","year":2023,"price":5004},{"id":"5acfbdd8-0d1a-47a2-9a27-8cd998ce6f06","carName":"Ernser - Bartoletti","year":2023,"price":5005},{"id":"743eb166-853b-4501-ad26-3f5debcaaa98","carName":"Glover LLC","year":2024,"price":5000},{"id":"86508544-d335-4274-82e8-7b116a522651","carName":"Barton, Hodkiewicz and Harris","year":2023,"price":5002},{"id":"69c7b16a-124e-4c21-a906-efdacf7d305e","carName":"Dare and Sons","year":2024,"price":5005},{"id":"f1942cae-eb45-4540-9580-1276e84e3fa0","carName":"Ryan Inc","year":2023,"price":5005},{"id":"889763ec-881a-4bc6-af18-0d31ff46c000","carName":"Ziemann Inc","year":2023,"price":5005},{"id":"f9d65110-5be4-48e7-b80e-36d217b98a65","carName":"Borer, Miller and Watsica","year":2023,"price":5002},{"id":"81981644-07e7-45f4-af0b-ccd0503462be","carName":"Runolfsdottir Group","year":2023,"price":5000},{"id":"a27df970-ea88-4a24-91b4-a162ca3c7c43","carName":"White Inc","year":2023,"price":5000}]

1
packages/react/src/components/DataGrid/resources/databaseListOnly.json Normal file
View File

@@ -0,0 +1 @@
[{"id":"list key for element 0","title":"so","date":"2024-01-23T08:17:25.747Z"},{"id":"list key for element 1","title":"wonderfully","date":"2023-10-26T19:01:05.623Z"},{"id":"list key for element 2","title":"well","date":"2023-08-27T02:41:28.679Z"},{"id":"list key for element 3","title":"display","date":"2024-01-16T18:28:10.603Z"},{"id":"list key for element 4","title":"ew","date":"2024-01-30T07:35:02.300Z"}]

1
packages/react/src/components/DataGrid/resources/databaseUsers.json Normal file
View File

@@ -0,0 +1 @@
[{"id":"06ddec8b-6247-4ec9-ba91-79c819e9580a","firstName":"Margaretta","lastName":"O'Hara","email":"Betsy84@yahoo.com","address":"633 N Poplar Street"},{"id":"a0ef519f-130a-427a-b5cf-ce52f3c201af","firstName":"Neoma","lastName":"Fadel","email":"Rodger80@hotmail.com","address":"3043 Hailie Canyon"},{"id":"db2bceac-8550-4099-82d6-596ac295533b","firstName":"Rhoda","lastName":"Bechtelar","email":"Brielle71@yahoo.com","address":"20703 Barrows Flat"},{"id":"73e26d5d-04fa-4f00-a6ee-c48441951835","firstName":"Beverly","lastName":"Shanahan","email":"Patsy_Blanda@hotmail.com","address":"925 Barney Expressway"},{"id":"0a99a72e-ba6f-4e7a-a534-2cb0990455fc","firstName":"Shanna","lastName":"Feeney","email":"Gianni17@gmail.com","address":"4306 Crescent Road"},{"id":"c0a35059-5d36-4228-85b2-ff2b213259b3","firstName":"Daniela","lastName":"Stoltenberg","email":"Napoleon.Reichert7@yahoo.com","address":"994 Martin Luther King Jr Boulevard"},{"id":"38a760c7-510b-4c5b-852a-dc41c6f75dbc","firstName":"Dillan","lastName":"Homenick","email":"Dahlia66@hotmail.com","address":"761 Jakubowski Parkways"},{"id":"cb7cb284-fc59-469c-bca7-7812552c8cfd","firstName":"Christelle","lastName":"Breitenberg","email":"Otis.Lang@yahoo.com","address":"9193 Krajcik Bridge"},{"id":"6ec1dad9-f8c4-4d24-a68a-0eebe67a6077","firstName":"Karina","lastName":"Volkman","email":"Elliott73@yahoo.com","address":"268 Ricky Wells"},{"id":"133c9f92-741e-401a-9208-57637142ab77","firstName":"Damon","lastName":"Abshire","email":"Sammy.Aufderhar62@gmail.com","address":"830 Jazlyn Field"},{"id":"f5bdc634-ad6b-4097-841c-6c8c0e709897","firstName":"Otho","lastName":"Powlowski","email":"Gail25@hotmail.com","address":"23187 Queen's Road"},{"id":"dd0827aa-0d79-4b4d-a0b1-e016ccd99cba","firstName":"Percival","lastName":"Reilly","email":"Amani.Turner60@yahoo.com","address":"60337 Wyman Squares"},{"id":"1a56945a-c4de-4dfc-a59f-cd4092a2a26c","firstName":"Giovani","lastName":"Okuneva","email":"Jarred19@hotmail.com","address":"71744 McClure Park"},{"id":"73b8eb36-9660-436b-942c-40281fc349e4","firstName":"Reuben","lastName":"Wolf","email":"Cleve_Ullrich71@yahoo.com","address":"830 Katheryn Pine"},{"id":"36994c91-5661-41fb-a604-5fe1705439fb","firstName":"Neil","lastName":"Carroll","email":"Keon.Goldner@hotmail.com","address":"3517 North Lane"},{"id":"45aae4a5-6600-419a-a680-6d3e05269a37","firstName":"Jeff","lastName":"Herman","email":"Beulah98@hotmail.com","address":"79290 Schowalter Spurs"},{"id":"5b5f1111-d8b6-45ee-9988-dcda5aa60fb5","firstName":"Nico","lastName":"Hayes","email":"Braulio51@gmail.com","address":"84910 Jacklyn Ville"},{"id":"1d62a8de-d750-4195-bc15-7bb9b5ba7ff9","firstName":"Daniela","lastName":"White","email":"Amina56@gmail.com","address":"804 Quarry Lane"},{"id":"19a050e7-a34e-4a29-bed2-6bde01655711","firstName":"Rasheed","lastName":"Gerhold","email":"Johnny45@hotmail.com","address":"1296 Kuhlman Common"},{"id":"c2eb4ef6-ed80-40b6-aec9-a7c3bf3898ad","firstName":"Keven","lastName":"Ferry","email":"Murray_Smith@hotmail.com","address":"77429 Mill Road"},{"id":"a24ae6c3-f583-4262-bebc-78621afdff21","firstName":"Brittany","lastName":"O'Kon","email":"Nickolas82@hotmail.com","address":"19235 Koelpin Forge"},{"id":"f463cc65-ca3a-4f54-80d5-154dfd53670c","firstName":"Amelia","lastName":"Bechtelar","email":"Jaylan.Langosh74@gmail.com","address":"981 Murazik Hollow"},{"id":"f3514418-05bd-40f6-9c9d-ed512302ddf1","firstName":"Danial","lastName":"Spencer-Hartmann","email":"Roxane_Ritchie-Schoen97@gmail.com","address":"303 Cole Divide"}]

1
packages/react/src/components/DataGrid/resources/databaseUsersServer.json Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -1,6 +1,5 @@
import { Meta } from "@storybook/react";
import React, { useEffect, useRef, useState } from "react";
import { faker } from "@faker-js/faker";
import {
FileUploader,
FileUploaderRefType,
@@ -8,10 +7,10 @@ import {
import { Button } from ":/components/Button";
const FAKE_FILES = [
new File(["42"], faker.lorem.sentence(5) + "pdf"),
new File(["42"], faker.lorem.sentence(1) + "pdf"),
new File(["42"], faker.lorem.sentence(2) + "pdf"),
new File(["42"], faker.lorem.sentence(3) + "pdf"),
new File(["42"], "Adhuc civis creber super amita.pdf"),
new File(["42"], "CV.pdf"),
new File(["42"], "Adhuc civis.pdf"),
new File(["42"], "Adhuc civis creber.pdf"),
];
const meta: Meta<typeof FileUploader> = {

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

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from "@storybook/react";
import React, { useRef, useState } from "react";
import { useForm, FormProvider } from "react-hook-form";
import * as Yup from "yup";
import { faker } from "@faker-js/faker";
import { yupResolver } from "@hookform/resolvers/yup";
import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
import { Select, SelectHandle } from ":/components/Forms/Select";
@@ -23,7 +22,18 @@ const Template: StoryFn<typeof Select> = (args) => (
</div>
);
const CITIES = Array.from({ length: 10 }).map(() => faker.location.city());
const CITIES = [
"Woodbury",
"Port Gayle",
"Geovannichester",
"San Rafael",
"Conradchester",
"Geraldinehaven",
"Bofield",
"East Ansel",
"New Carlo",
"West Minnieborough",
];
const OPTIONS = CITIES.map((city) => ({
label: city,
value: city.toLowerCase(),

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

@@ -3,7 +3,6 @@ import { useForm, FormProvider } from "react-hook-form";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { Meta, StoryFn } from "@storybook/react";
import { faker } from "@faker-js/faker";
import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
import { Select, SelectHandle } from ":/components/Forms/Select";
import { Button } from ":/components/Button";
@@ -25,7 +24,18 @@ const Template: StoryFn<typeof Select> = (args) => {
);
};
const CITIES = Array.from({ length: 10 }).map(() => faker.location.city());
const CITIES = [
"Woodbury",
"Port Gayle",
"Geovannichester",
"San Rafael",
"Conradchester",
"Geraldinehaven",
"Bofield",
"East Ansel",
"New Carlo",
"West Minnieborough",
];
const OPTIONS = CITIES.map((city) => ({
label: city,
value: city.toLowerCase(),

8
packages/react/src/components/Modal/EdgeCases.stories.tsx
View File

@@ -1,9 +1,9 @@
import React, { useEffect } from "react";
import { faker } from "@faker-js/faker";
import { Meta } from "@storybook/react";
import { Button } from ":/components/Button";
import { CunninghamProvider } from ":/components/Provider";
import { Modal, ModalSize, useModal } from ":/components/Modal/index";
import longLorem from ":/components/Modal/resources/longLorem.json";
const meta: Meta = {
title: "Components/Modal/Edge Cases",
@@ -67,7 +67,7 @@ export const StackedModals = {
size={ModalSize.LARGE}
{...modal1}
>
{faker.lorem.lines(400)}
{longLorem.text}
</Modal>
<Modal
leftActions={<Button color="tertiary">Tertiary</Button>}
@@ -80,7 +80,7 @@ export const StackedModals = {
size={ModalSize.MEDIUM}
{...modal2}
>
{faker.lorem.lines(400)}
{longLorem.text}
</Modal>
<Modal
leftActions={<Button color="tertiary">Tertiary</Button>}
@@ -93,7 +93,7 @@ export const StackedModals = {
size={ModalSize.SMALL}
{...modal3}
>
{faker.lorem.lines(400)}
{longLorem.text}
</Modal>
{array.map((i) => (
<div key={i}>{i}</div>

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

@@ -1,9 +1,9 @@
import { Meta, StoryObj } from "@storybook/react";
import React, { useEffect } from "react";
import { faker } from "@faker-js/faker";
import { Modal, ModalSize, useModal } from ":/components/Modal/index";
import { Button } from ":/components/Button";
import { CunninghamProvider } from ":/components/Provider";
import longLorem from ":/components/Modal/resources/longLorem.json";
const meta: Meta<typeof Modal> = {
title: "Components/Modal",
@@ -189,6 +189,6 @@ export const FullWithContent: Story = {
<Button color="primary">Primary</Button>
</>
),
children: faker.lorem.lines(400),
children: longLorem.text,
},
};

1
packages/react/src/components/Modal/resources/longLorem.json Normal file
View File

File diff suppressed because one or more lines are too long

5
packages/react/src/components/Toast/index.stories.tsx
View File

@@ -1,6 +1,5 @@
import { Meta, StoryObj } from "@storybook/react";
import React, { useEffect } from "react";
import { faker } from "@faker-js/faker";
import { ProgressBar, Toast } from ":/components/Toast/index";
import { Button } from ":/components/Button";
import { useToastProvider } from ":/components/Toast/ToastProvider";
@@ -31,7 +30,7 @@ export const Demo: Story = {
];
useEffect(() => {
toast(faker.lorem.sentence({ min: 5, max: 10 }), VariantType.SUCCESS, {
toast("Adhuc civis creber super amita", VariantType.SUCCESS, {
primaryLabel: "Read more",
primaryOnClick: () => {
// eslint-disable-next-line no-alert
@@ -45,7 +44,7 @@ export const Demo: Story = {
<Button
onClick={() => {
const type = TYPES[Math.floor(Math.random() * TYPES.length)];
toast(faker.lorem.sentence({ min: 5, max: 10 }), type, {
toast("Adhuc civis creber super amita", type, {
primaryLabel: "Primary",
primaryOnClick: () => {
// eslint-disable-next-line no-alert