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.
d2iq · Jun 7, 2022 · 70414d8 · 70414d8
1 parent 6e4cc9c
commit 70414d8
Show file tree

Hide file tree

Showing 7 changed files with 713 additions and 98 deletions.
diff --git a/.github/workflows/chromatic.yml 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
diff --git 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
@@ -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
@@ -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",