From 70414d8431c0d29a09f709699c77e52306b1b590 Mon Sep 17 00:00:00 2001 From: Russell Anderson Date: Tue, 7 Jun 2022 08:52:10 -0500 Subject: [PATCH] refactor: introduce chromatic (#730) * refactor: introduce chromatic Chromatic is a tool that will give us side by side visual comparisons of our storybook with the one deployed on main, as well as ephemeral environments with every branch that is pushed. This should help us QA quickly and find more bugs. * refactor: remove faker js dependency Using faker to generate data on each render would negate much of the benefit of Chromatic, which will automatically do screenshot diffs between branches to make visual changes easier to glean and QA. There is questionable benefit to faking this every time versus simply using some static data for the rendering. I don't think this dependency will be particularly missed. --- .github/workflows/chromatic.yml | 27 ++ package-lock.json | 35 +- package.json | 5 +- packages/pagination/mockPaginationData.json | 204 ++++++++++ packages/pagination/pagination.stories.tsx | 6 +- packages/tablev2/mockTableData.json | 404 ++++++++++++++++++++ packages/tablev2/tablev2.stories.tsx | 130 +++---- 7 files changed, 713 insertions(+), 98 deletions(-) create mode 100644 .github/workflows/chromatic.yml create mode 100644 packages/pagination/mockPaginationData.json create mode 100644 packages/tablev2/mockTableData.json diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 000000000..d10e96aff --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,27 @@ +# .github/workflows/chromatic.yml + +# Workflow name +name: "Chromatic" + +# Event for the workflow +on: push + +# List of jobs +jobs: + chromatic-deployment: + # Operating System + runs-on: ubuntu-latest + # Job steps + steps: + - uses: actions/checkout@v1 + - name: Install dependencies + run: npm ci + - name: Prebuild storybook + run: npm run prebuild:storybook + # 👇 Adds Chromatic as a step in the workflow + - name: Publish to Chromatic + uses: chromaui/action@v1 + # Chromatic GitHub Action options + with: + # 👇 Chromatic projectToken, refer to the manage page to obtain it. + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/package-lock.json b/package-lock.json index decda2425..6b9f6bc8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,6 @@ "@babel/types": "7.16.0", "@commitlint/cli": "7.2.0", "@commitlint/config-conventional": "7.1.2", - "@faker-js/faker": "6.3.1", "@storybook/addon-a11y": "6.5.6", "@storybook/addon-essentials": "6.5.6", "@storybook/addons": "6.5.6", @@ -62,6 +61,7 @@ "acorn": "8.7.1", "babel-loader": "8.2.3", "cache-loader": "4.1.0", + "chromatic": "6.5.6", "commander": "9.2.0", "core-js": "3.19.2", "csstype": "3.0.10", @@ -2650,16 +2650,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@faker-js/faker": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-6.3.1.tgz", - "integrity": "sha512-8YXBE2ZcU/pImVOHX7MWrSR/X5up7t6rPWZlk34RwZEcdr3ua6X+32pSd6XuOQRN+vbuvYNfA6iey8NbrjuMFQ==", - "dev": true, - "engines": { - "node": ">=14.0.0", - "npm": ">=6.0.0" - } - }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -12327,6 +12317,17 @@ "node": ">=10" } }, + "node_modules/chromatic": { + "version": "6.5.6", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.6.tgz", + "integrity": "sha512-kXuqh3I9NZQYDR7ov5jvGatFVymkkb8fLOPFTg7XyKhAFv3qRlwR/c5Nsz5LpfuXrPAZfPVrNL7l2SROrDP96A==", + "dev": true, + "bin": { + "chroma": "bin/main.cjs", + "chromatic": "bin/main.cjs", + "chromatic-cli": "bin/main.cjs" + } + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -37950,12 +37951,6 @@ } } }, - "@faker-js/faker": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-6.3.1.tgz", - "integrity": "sha512-8YXBE2ZcU/pImVOHX7MWrSR/X5up7t6rPWZlk34RwZEcdr3ua6X+32pSd6XuOQRN+vbuvYNfA6iey8NbrjuMFQ==", - "dev": true - }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -45247,6 +45242,12 @@ "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "dev": true }, + "chromatic": { + "version": "6.5.6", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.6.tgz", + "integrity": "sha512-kXuqh3I9NZQYDR7ov5jvGatFVymkkb8fLOPFTg7XyKhAFv3qRlwR/c5Nsz5LpfuXrPAZfPVrNL7l2SROrDP96A==", + "dev": true + }, "chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", diff --git a/package.json b/package.json index 22fecdda8..2425a06ad 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,8 @@ "storybook": "start-storybook -p 6006", "test": "npx jest", "test:integration": "./scripts/test-integration", - "test:watch": "jest --watch" + "test:watch": "jest --watch", + "chromatic": "chromatic" }, "files": [ "dist", @@ -75,7 +76,6 @@ "@babel/types": "7.16.0", "@commitlint/cli": "7.2.0", "@commitlint/config-conventional": "7.1.2", - "@faker-js/faker": "6.3.1", "@storybook/addon-a11y": "6.5.6", "@storybook/addon-essentials": "6.5.6", "@storybook/addons": "6.5.6", @@ -100,6 +100,7 @@ "acorn": "8.7.1", "babel-loader": "8.2.3", "cache-loader": "4.1.0", + "chromatic": "6.5.6", "commander": "9.2.0", "core-js": "3.19.2", "csstype": "3.0.10", diff --git a/packages/pagination/mockPaginationData.json b/packages/pagination/mockPaginationData.json new file mode 100644 index 000000000..12f9fb9d1 --- /dev/null +++ b/packages/pagination/mockPaginationData.json @@ -0,0 +1,204 @@ +{ + "mockPaginationData": [ + "Mertie.Rohan97", + "Marie_Fritsch36", + "Karson.Raynor55", + "Bessie.Cremin4", + "Lisette52", + "Keanu.Grant83", + "Casandra_Graham79", + "Candido_Carroll18", + "Skye.Walker31", + "Delia43", + "Carleton.Padberg", + "Keagan_Stroman", + "Treva.Sauer52", + "Obie.Bartell", + "Ivah32", + "Maude_Wilderman", + "Rhea.Grimes", + "Brook13", + "Germaine_Monahan8", + "Eliane.Bernhard", + "Micheal64", + "Vaughn.Mann", + "Natalia.Bergstrom7", + "Ariane.Murphy", + "Dee_Funk", + "Ansel_Quigley", + "Frederik17", + "Aidan29", + "Eriberto_Sauer", + "Vince.Brown87", + "Trever88", + "Vivienne_Aufderhar25", + "Jackson_Schmitt76", + "Riley81", + "Joyce_Howell", + "Judd_Schaden", + "Antonette_Abshire56", + "Victor.Nader", + "Eladio.Jast", + "Carlos.Wuckert", + "Celestino.Maggio", + "Marianne99", + "Maggie_Will90", + "Freddy4", + "Pauline.Ebert", + "Clyde41", + "Adrienne_Heidenreich55", + "Jennings25", + "Xzavier50", + "Gerardo_Spencer", + "Samson_Barton32", + "Daisha.Collins", + "Peggie94", + "Jayden6", + "Meagan_Sporer", + "Margarette.Lang", + "Fermin68", + "Nia.Kuphal", + "Edythe.Ernser27", + "Abelardo_Jenkins", + "Brant_Gleason60", + "Kailee_Mueller31", + "Julie.Lang17", + "Israel.Wyman", + "Alayna_Robel", + "Clement_Nicolas", + "Mellie.Orn", + "Emiliano.Douglas", + "Lulu48", + "Jakayla_Dach96", + "Cristian_Beer", + "Bernita23", + "Adelia_Paucek", + "Roy9", + "Kaylee78", + "Clare31", + "Darrin.Cronin", + "Everardo69", + "Edythe.OConner", + "Nelson33", + "Royal53", + "Royal_Monahan13", + "Ricardo_Bailey", + "Estefania87", + "Benton.Langosh", + "Twila66", + "Carmela3", + "Lonie_Connelly", + "Clifton5", + "Issac.Kuvalis", + "Everett34", + "Ole_Goyette", + "Reece_Boehm", + "Mason_Kuvalis61", + "Madisen66", + "Clara17", + "Nola52", + "Kevin18", + "Dorthy_Kerluke", + "Kaela66", + "Maybelle_Graham24", + "Clement.Brekke", + "Dustin16", + "Bobbie_Greenholt", + "Craig_Sawayn", + "Hallie84", + "Percival_Murazik", + "Jada.Predovic", + "Lou.Rolfson", + "Amya.Dibbert", + "Edgar.Roberts", + "Rosella15", + "Hillard20", + "Jeffrey_Reichert", + "Edythe_Bernhard", + "Beth_OConnell28", + "Watson60", + "Arch_Hahn", + "Terrell_Quitzon", + "Davion63", + "Annalise41", + "Tony.Marks", + "Leopold98", + "Rupert.Hauck", + "Carolyn_Bradtke", + "Jayme_Boyle3", + "Mossie_Rau55", + "Katrina.Heidenreich", + "Krista.Kunze21", + "Nola.Pfeffer", + "Audra28", + "Ansley86", + "Scarlett.Rodriguez46", + "Shad_Steuber98", + "Vaughn_Lueilwitz0", + "Mckenna53", + "Deven11", + "Palma_Weissnat", + "Hank_DAmore66", + "Drew_Lakin", + "Akeem31", + "Felton85", + "Therese54", + "Elisabeth.Schaefer", + "Loma10", + "Branson_Gulgowski77", + "Chris.Lubowitz79", + "Kaitlin_Hyatt70", + "Raleigh_Schaden", + "Retta_Bahringer", + "Robin.Berge99", + "Reynold_Lindgren71", + "Charley.Ritchie21", + "Deshawn40", + "Nadia_Okuneva", + "Desmond_Mosciski82", + "Lexie46", + "Arthur.Fisher51", + "Amalia.Bayer81", + "Juliet_Grady52", + "Pearlie.Lockman", + "Brayan_Hickle", + "Harvey_Keebler", + "Devin_Schneider0", + "Eriberto.Jaskolski53", + "Lynn_Corwin", + "Ricardo.Fritsch90", + "Luna_Lemke", + "Seth.Green", + "Jakayla37", + "Loren_Lakin61", + "Magnolia23", + "Trisha_Crooks61", + "Ivah.Huels", + "Alvah_Klein", + "London.Erdman", + "Kailyn_Barton41", + "Delpha_Leffler37", + "Edd.Adams74", + "Greta72", + "Jarrett.Harvey58", + "Houston19", + "Brandt62", + "Pete69", + "Jammie41", + "Chauncey55", + "Theron49", + "Jazmin_Medhurst5", + "Vergie75", + "Nicola45", + "Thomas.Pfannerstill47", + "Estel.Zemlak15", + "Sylvester_Pacocha17", + "Marcos.Schmitt", + "Darius72", + "Mariam17", + "Kenyatta_Leffler", + "Francisco_Weissnat63", + "Adrian_Labadie", + "Solon.Rodriguez90" + ] +} diff --git a/packages/pagination/pagination.stories.tsx b/packages/pagination/pagination.stories.tsx index 70412e5ef..02ceb68e5 100644 --- a/packages/pagination/pagination.stories.tsx +++ b/packages/pagination/pagination.stories.tsx @@ -1,14 +1,10 @@ import * as React from "react"; -import { faker } from "@faker-js/faker"; import { Story, Meta } from "@storybook/react"; import Pagination, { PaginationProps } from "./Pagination"; import PaginationContainer from "./PaginationContainer"; import { BorderedList } from "../list"; import usePageChange from "./usePageChange"; - -const initialData = Array.from({ length: 200 }, () => - faker.internet.userName() -); +import { mockPaginationData as initialData } from "./mockPaginationData.json"; export default { title: "Navigation/Pagination", diff --git a/packages/tablev2/mockTableData.json b/packages/tablev2/mockTableData.json new file mode 100644 index 000000000..ebe263ef6 --- /dev/null +++ b/packages/tablev2/mockTableData.json @@ -0,0 +1,404 @@ +{ + "mockTableData": [ + { + "name": "Mrs. Leon Senger", + "phone": "542-606-5517 x775", + "username": "Arnold.Emmerich94", + "email": "Rudy.Morar6@gmail.com", + "website": "mundane-fleece.com", + "company": { + "name": "Greenholt, Blanda and Pagac" + } + }, + { + "name": "Carmen Conn", + "phone": "720.996.8444", + "username": "Edmund_Cole32", + "email": "Kale.Hessel@yahoo.com", + "website": "near-ocelot.org", + "company": { + "name": "Kulas - Prosacco" + } + }, + { + "name": "Naomi Mitchell", + "phone": null, + "username": "Carlee46", + "email": "Janie_Kuvalis@yahoo.com", + "website": "dramatic-confidence.info", + "company": { + "name": "Schmidt, Monahan and Stehr" + } + }, + { + "name": "Maureen Dicki", + "phone": "278.287.8898 x686", + "username": "Aurelie.Renner99", + "email": "Ryleigh8@hotmail.com", + "website": "flaky-porch.com", + "company": { + "name": "Kozey Inc" + } + }, + { + "name": "Lorenzo Haley", + "phone": "1-790-655-9714", + "username": "Reggie.Mosciski96", + "email": "Eloisa_Mosciski@hotmail.com", + "website": "repentant-vehicle.name", + "company": { + "name": "Fahey and Sons" + } + }, + { + "name": "Dana Strosin", + "phone": "511-601-8737 x60533", + "username": "Cleve9", + "email": "Meagan_Sauer21@hotmail.com", + "website": "physical-login.name", + "company": { + "name": "Stoltenberg and Sons" + } + }, + { + "name": "Tanya Durgan", + "phone": "1-708-531-7219 x5300", + "username": "Jarred.Jast72", + "email": "Sandrine_Goodwin@yahoo.com", + "website": "gray-objective.com", + "company": { + "name": "Mraz and Sons" + } + }, + { + "name": "Vickie Rippin", + "phone": "802-959-1000 x97385", + "username": "Leopold_Hermann", + "email": "Manuela_Howell27@yahoo.com", + "website": "sleepy-brush.org", + "company": { + "name": "West, Muller and Bechtelar" + } + }, + { + "name": "Miss Sylvester Hackett", + "phone": "1-450-436-8036", + "username": "Bonnie_Stehr", + "email": "Lincoln_MacGyver32@hotmail.com", + "website": "competent-distortion.org", + "company": { + "name": "Miller - Haley" + } + }, + { + "name": "Kristine Bergstrom", + "phone": "630.962.9050 x2901", + "username": "Ellsworth.Hartmann0", + "email": "Ramiro85@yahoo.com", + "website": "competent-steam.com", + "company": { + "name": "Huels - Turcotte" + } + }, + { + "name": "Virginia Christiansen", + "phone": null, + "username": "Trudie_Koch", + "email": "Meagan11@hotmail.com", + "website": "dependable-tub.com", + "company": { + "name": "Bednar Group" + } + }, + { + "name": "Pat Effertz I", + "phone": "1-794-790-9296", + "username": "Samara_Murphy21", + "email": "Forrest_Keebler@gmail.com", + "website": "red-gadget.name", + "company": { + "name": "Metz Group" + } + }, + { + "name": "Renee Marvin", + "phone": null, + "username": "Joesph.Schulist50", + "email": "Earline22@gmail.com", + "website": "misty-stance.com", + "company": { + "name": "Parisian - Cruickshank" + } + }, + { + "name": "Elias Beier", + "phone": null, + "username": "Rosemary1", + "email": "Kaylie_Zboncak@hotmail.com", + "website": "misguided-virtue.name", + "company": { + "name": "Bogan LLC" + } + }, + { + "name": "Ray Moen", + "phone": "456-288-4999 x91587", + "username": "Francisco32", + "email": "Esperanza.Koepp@hotmail.com", + "website": "parallel-raft.com", + "company": { + "name": "Botsford, Harris and Renner" + } + }, + { + "name": "Leona Shields", + "phone": "226.330.0864 x16094", + "username": "Garett50", + "email": "Jodie55@gmail.com", + "website": "querulous-signature.org", + "company": { + "name": "Marquardt Inc" + } + }, + { + "name": "Milton Quitzon", + "phone": "814.352.1604", + "username": "Arvid_Walsh", + "email": "Selena_Fahey83@hotmail.com", + "website": "those-cutting.name", + "company": { + "name": "Hudson, Fahey and Marquardt" + } + }, + { + "name": "Amy Funk", + "phone": "432-437-7745 x39453", + "username": "Emiliano42", + "email": "Estefania.Rogahn70@yahoo.com", + "website": "other-battle.com", + "company": { + "name": "Huel Inc" + } + }, + { + "name": "Santos Pacocha", + "phone": "230-508-7197", + "username": "Casimer.Schroeder35", + "email": "Kieran.Kertzmann65@hotmail.com", + "website": "jittery-trim.org", + "company": { + "name": "Pfeffer, Bauch and Orn" + } + }, + { + "name": "Lorenzo Bergnaum", + "phone": "1-517-963-8164 x341", + "username": "Quinn5", + "email": "Wava97@gmail.com", + "website": "jaunty-step-father.net", + "company": { + "name": "Frami LLC" + } + }, + { + "name": "Mrs. Edith Wehner", + "phone": null, + "username": "Beau28", + "email": "Frederick28@gmail.com", + "website": "outrageous-wont.org", + "company": { + "name": "Waters Group" + } + }, + { + "name": "Anna Nicolas", + "phone": "867-740-0596", + "username": "Alexzander69", + "email": "Anya.Schulist87@gmail.com", + "website": "downright-flat.info", + "company": { + "name": "Gusikowski Inc" + } + }, + { + "name": "Wayne Bayer", + "phone": null, + "username": "Obie.Schmitt3", + "email": "Alfred_Howe@yahoo.com", + "website": "prudent-knot.com", + "company": { + "name": "Jerde - Conn" + } + }, + { + "name": "Shelly Klocko", + "phone": "1-603-461-4235", + "username": "Cordell.Huels", + "email": "Elmira50@gmail.com", + "website": "husky-wraparound.biz", + "company": { + "name": "Pfeffer, Bayer and Becker" + } + }, + { + "name": "Wilbert Ullrich", + "phone": null, + "username": "Carroll.McKenzie", + "email": "Coby.Grady59@hotmail.com", + "website": "distant-upward.net", + "company": { + "name": "Barrows - Berge" + } + }, + { + "name": "Andre Mayert", + "phone": "345.493.5452", + "username": "Amy_Fay", + "email": "Aliza.Schmidt@yahoo.com", + "website": "eminent-mercury.org", + "company": { + "name": "Will - Towne" + } + }, + { + "name": "Jeffery Hermann", + "phone": null, + "username": "Kennedy.Grimes18", + "email": "Coralie24@yahoo.com", + "website": "several-wildlife.net", + "company": { + "name": "Von, Cassin and Daugherty" + } + }, + { + "name": "Homer Schmeler", + "phone": "283.564.7829", + "username": "Brendan.Graham75", + "email": "Kellie_Ratke@yahoo.com", + "website": "bogus-felony.net", + "company": { + "name": "Hartmann - Runte" + } + }, + { + "name": "Ms. Jaime Hane", + "phone": null, + "username": "Katrina_Thompson70", + "email": "Lizeth.Christiansen@hotmail.com", + "website": "infantile-vol.com", + "company": { + "name": "Walsh Group" + } + }, + { + "name": "Tamara Champlin", + "phone": "343-363-0007 x87303", + "username": "Tia.Collier58", + "email": "Scottie6@yahoo.com", + "website": "young-emu.biz", + "company": { + "name": "Leuschke - McGlynn" + } + }, + { + "name": "Leah Frami", + "phone": null, + "username": "Mellie50", + "email": "Mathew.MacGyver@gmail.com", + "website": "yearly-interaction.name", + "company": { + "name": "Fadel Inc" + } + }, + { + "name": "Rodolfo Hilll", + "phone": null, + "username": "Samson_Cruickshank49", + "email": "Lesly_Haag39@yahoo.com", + "website": "gifted-angel.biz", + "company": { + "name": "Braun - Collins" + } + }, + { + "name": "Jana Konopelski", + "phone": "1-726-339-7800 x94518", + "username": "Myron_Bayer", + "email": "Kathlyn.Jerde99@yahoo.com", + "website": "alienated-husband.name", + "company": { + "name": "Krajcik - Beer" + } + }, + { + "name": "Tommie Wuckert MD", + "phone": "(531) 441-8714 x70335", + "username": "Kassandra_Veum30", + "email": "Elyssa_Altenwerth1@yahoo.com", + "website": "whispered-whip.org", + "company": { + "name": "Windler, Pacocha and Volkman" + } + }, + { + "name": "Jodi McKenzie", + "phone": "1-815-883-8685 x75076", + "username": "Virginie_Kozey", + "email": "Silas_Goodwin@gmail.com", + "website": "plastic-maiden.biz", + "company": { + "name": "Hoeger and Sons" + } + }, + { + "name": "Wallace Predovic", + "phone": "(467) 745-1790 x07813", + "username": "Ansley91", + "email": "Paxton_Herman@gmail.com", + "website": "determined-strand.biz", + "company": { + "name": "Denesik - Kuvalis" + } + }, + { + "name": "Arturo Luettgen", + "phone": "1-935-424-9280 x7367", + "username": "Stewart.Ledner", + "email": "Alysha_Dietrich@hotmail.com", + "website": "buoyant-interferometer.org", + "company": { + "name": "King and Sons" + } + }, + { + "name": "Jasmine McKenzie Sr.", + "phone": "1-314-592-2079", + "username": "Mauricio.Bosco", + "email": "Elmira5@gmail.com", + "website": "dishonest-manifestation.net", + "company": { + "name": "Abernathy Inc" + } + }, + { + "name": "Lamar Ryan", + "phone": "1-434-846-0725 x90248", + "username": "Hailee_Runolfsdottir", + "email": "Tony.Lockman@hotmail.com", + "website": "spherical-arcade.org", + "company": { + "name": "Bernier, Schmidt and Schoen" + } + }, + { + "name": "Mr. Armando Tremblay", + "phone": "(444) 928-1043 x28551", + "username": "Cordia_Abshire", + "email": "Assunta_Cormier@gmail.com", + "website": "positive-cauliflower.biz", + "company": { + "name": "Kreiger, Dare and Schmitt" + } + } + ] +} diff --git a/packages/tablev2/tablev2.stories.tsx b/packages/tablev2/tablev2.stories.tsx index cb23363d7..7fbd6871c 100644 --- a/packages/tablev2/tablev2.stories.tsx +++ b/packages/tablev2/tablev2.stories.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import { Faker, faker } from "@faker-js/faker"; import { DropdownSection, DropdownMenuItem } from "../dropdownMenu"; import { Flex, FlexItem } from "../styleUtils/layout"; import { Text } from "../styleUtils/typography"; import { Icon } from "../icon"; import { SystemIcons } from "../icons/dist/system-icons-enum"; import { greyLightLighten1 } from "../design-tokens/build/js/designTokens"; +import { mockTableData } from "./mockTableData.json"; import { Table, @@ -35,42 +35,20 @@ interface User { } const { floor, random } = Math; const getRandomInt = (max: number) => floor(random() * floor(max)); -const createCard = (_, id: number) => ({ - id, - name: faker.name.findName(), - phone: Math.random() > 0.8 ? null : faker.phone.phoneNumber(), - username: faker.internet.userName(), - email: faker.internet.email(), - website: faker.internet.domainName(), - company: { name: faker.company.companyName() } -}); -const initialData = Array.from({ length: ROWS }, createCard); -function update(data: A[]) { + +const initialData = mockTableData + .slice(0, ROWS) + .map((card, index) => ({ ...card, id: index })); + +function update(data: A[], cursor: number) { const indexToReplace = getRandomInt(data.length); - const newEntry = createCard(null, data[indexToReplace].id); + const newEntry = mockTableData[cursor]; return data.map(e => - e.id === newEntry.id ? { ...newEntry, name: e.name } : e + e.id === indexToReplace + ? { ...newEntry, name: e.name, id: indexToReplace } + : e ); } -const DataUpdateContainer = ({ - children, - updateRateMs -}: { - children: (_: { items: User[] }) => JSX.Element; - updateRateMs: number; -}) => { - const [items, setItems] = React.useState(initialData); - // update data every couple milliseconds - React.useEffect(() => { - const timeout = setTimeout( - () => void setItems(update(items)), - updateRateMs - ); - return () => void clearTimeout(timeout); - }); - - return children({ items }); -}; const defaultColumns = [ { id: "name", header: "Name", render: x => x.name }, @@ -81,20 +59,6 @@ const defaultColumns = [ { id: "company", header: "Company", render: x => x.company.name } ]; -const StoryWithVariableCols = () => { - const [cols, setCols] = React.useState(defaultColumns); - - // every seconds we're changing the columns to show. - everySecond(i => { - const toRemove = i % 2 ? [] : ["email", "phone"]; - setCols(defaultColumns.filter(c => !toRemove.includes(c.id))); - }); - - return ( - el.id.toString()} columns={cols} /> - ); -}; - export default { title: "Data Listing/Table", component: Table @@ -108,20 +72,51 @@ export const Default = () => ( /> ); -export const WithVariableCols = () => ; +export const WithVariableCols = () => { + const [cols, setCols] = React.useState(defaultColumns); -export const WithUpdatingData = () => ( - - {({ items }) => ( -
el.id.toString()} - columns={defaultColumns} - /> - )} - -); + // every second we're changing the columns to show. + React.useEffect(() => { + let i = 0; + const intervalId = setInterval(() => { + const toRemove = i % 2 ? [] : ["email", "phone"]; + setCols(defaultColumns.filter(c => !toRemove.includes(c.id))); + i = i + 1; + }, 1000); + return () => clearInterval(intervalId); + }, [setCols]); + + return ( +
el.id.toString()} columns={cols} /> + ); +}; + +export const WithUpdatingData = () => { + const [items, setItems] = React.useState(initialData); + const cursor = React.useRef(ROWS); + // update data every couple milliseconds + React.useEffect(() => { + const timeout = setTimeout(() => { + if (cursor.current >= mockTableData.length) { + clearTimeout(timeout); + } else { + setItems(update(items, cursor.current)); + + cursor.current++; + } + }, 1000); + return () => void clearTimeout(timeout); + }, [cursor, items, setItems]); + + return ( +
el.id.toString()} + columns={defaultColumns} + /> + ); +}; export const ColumnsWithCustomWidths = () => (
( export const UsingOnStateChange = () => ( <> -

Resize a colum and check the browser console.

+

Resize a column and check the browser console.

( /> ); - -/* eslint-disable react-hooks/rules-of-hooks */ -const everySecond = fn => { - const [i, setI] = React.useState(0); - let intervalId = null; - React.useEffect(() => { - intervalId = setInterval(() => { - setI(i + 1); - fn(i); - }, 1000); - return () => clearInterval(intervalId); - }); -};