Experience 8346: Add configuration for local instance of Storybook #8803

stephenkao · 2023-03-22T13:58:57Z

This changeset adds the initial configuration needed to spin up Storybook locally. It's incredibly simple right now, but it should include most addons that we need. Also included are very simple CSF examples for the StaticAlert and USLink components as a proof-of-concept.

There's a known error with React 18 here, but it shouldn't affect us for the time being. We could also install the bleeding-edge version of Storybook, but it looks like there are other issues with that as well -- so I recommend just sticking with the latest stable version until the next version is officially out.

Test Steps:

Run yarn install to get latest dependencies
Run yarn run storybook to run Storybook locally
Go to localhost:6006 (will happen automatically)
Browse the Storybook 🙏

Changes

Checklist

Testing

Tested locally?
~~- [ ] Ran ./prime test or ./gradlew testSmoke against local Docker ReportStream container?~~
(For Changes to /frontend-react/...) Ran npm run lint:write?
~~- [ ] Added tests?~~

frontend-react/.eslintrc.js

stephenkao · 2023-03-22T14:06:37Z

frontend-react/.storybook/preview.js

+
+initializeWorker();
+
+function withRestHooksCacheProvider(Story) {


We could add an all-in-one HOC like we do in tests, but I figure the granularity might be good. Not really an issue either way, though!

stephenkao · 2023-03-22T14:06:46Z

frontend-react/.storybook/preview.js

+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        matchers: {


These are included by default on installation, but they're useful!

stephenkao · 2023-03-22T14:07:11Z

frontend-react/.storybook/preview.js

+import "../src/content/generated/global.out.css";
+
+// mock all dates in stories to make sure we don't run into date-related inconsistencies
+MockDate.set("2023-01-01");


This'd be especially useful if we start using snapshots with Chromatic.

I'm curious how this will interact with faker.js if we end up using it but something to worry about later.

stephenkao · 2023-03-22T14:08:26Z

frontend-react/.storybook/preview.js

+    options: {
+        storySort: {
+            method: "alphabetical",
+            order: [],


Not sure what the order should be yet since our component system is still in a limbo state.

stephenkao · 2023-03-22T14:08:30Z

frontend-react/.storybook/preview.js

+    },
+};
+
+initializeWorker();


MSW isn't hooked up yet, but we might as well get it started 🤷

stephenkao · 2023-03-22T14:43:24Z

frontend-react/.storybook/main.js

+    core: {
+        builder: "@storybook/builder-webpack5",
+    },
+    refs: {


Allows for composition with other/external Storybooks. Everything's still going through network requests so browsing external stories won't be as snappy as our own, but it's still nice to have everything in one place.

penny-lischer · 2023-03-29T20:12:35Z

@stephenkao do we need a readme file for storybook that contains at the very least...
All components should have a *.stories.tsx file in their directory next to their tests.

penny-lischer · 2023-03-29T20:15:31Z

@stephenkao do we want to include a markdown Introduction file describing an overview and the difference between our components and Trussworks and when to use one over the other?

stephenkao · 2023-03-30T18:06:55Z

@stephenkao do we need a readme file for storybook that contains at the very least... All components should have a *.stories.tsx file in their directory next to their tests.

@stephenkao do we want to include a markdown Introduction file describing an overview and the difference between our components and Trussworks and when to use one over the other?

My feeling is that Storybook documentation can happen as part of a separate ticket since it involves establishing guidelines and conventions as well. This changeset is specifically to get a local instance runnable so we can start to use it now as we're developing new changes. What are your thoughts about this?

penny-lischer

LGTM

jpandersen87 · 2023-03-31T17:40:37Z

frontend-react/.storybook/preview.js

+import "../src/content/generated/global.out.css";
+
+// mock all dates in stories to make sure we don't run into date-related inconsistencies
+MockDate.set("2023-01-01");


I'm curious how this will interact with faker.js if we end up using it but something to worry about later.

This changeset adds the initial configuration needed to spin up Storybook locally. It's incredibly simple right now, but it should include most addons that we need. Also included are very simple CSF examples for the StaticAlert and USLink components as a proof-of-concept. There's a known error with React 18 [here](storybookjs/storybook#17831 (comment)), but it shouldn't affect us for the time being. We could also install the bleeding-edge version of Storybook, but it looks like there are other issues with that as well -- so I recommend just sticking with the latest stable version until the next version is officially out.

sonarcloud · 2023-04-03T14:30:08Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.0% Duplication

etanb · 2023-04-03T20:14:55Z

frontend-react/.storybook/main.js

+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "@storybook/addon-a11y",


for later, but this might be a really nice package to see the states of different components without the need of dev tools: https://storybook.js.org/addons/storybook-addon-pseudo-states

stephenkao added the experience Team label to flag issues owned by the Experience Team label Mar 22, 2023

stephenkao requested review from etanb, jpandersen87 and penny-lischer March 22, 2023 13:58

stephenkao commented Mar 22, 2023

View reviewed changes

frontend-react/.eslintrc.js Outdated Show resolved Hide resolved

stephenkao temporarily deployed to staging March 22, 2023 13:59 — with GitHub Actions Inactive

stephenkao force-pushed the experience/8346/local-storybook branch from aea92ef to 5c14704 Compare March 22, 2023 14:01

stephenkao temporarily deployed to staging March 22, 2023 14:01 — with GitHub Actions Inactive

stephenkao force-pushed the experience/8346/local-storybook branch from 5c14704 to 5c90872 Compare March 22, 2023 14:03

stephenkao temporarily deployed to staging March 22, 2023 14:04 — with GitHub Actions Inactive

stephenkao commented Mar 22, 2023

View reviewed changes

frontend-react/.storybook/preview.js

},

};

initializeWorker();

Copy link

Author

stephenkao Mar 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MSW isn't hooked up yet, but we might as well get it started 🤷

stephenkao commented Mar 22, 2023

View reviewed changes

stephenkao force-pushed the experience/8346/local-storybook branch from 5c90872 to 8112f11 Compare March 24, 2023 16:42

stephenkao temporarily deployed to staging March 24, 2023 16:42 — with GitHub Actions Inactive

stephenkao force-pushed the experience/8346/local-storybook branch from 8112f11 to a52b8ce Compare March 28, 2023 14:03

stephenkao temporarily deployed to staging March 28, 2023 14:04 — with GitHub Actions Inactive

stephenkao force-pushed the experience/8346/local-storybook branch from a52b8ce to 51ed086 Compare March 30, 2023 16:08

stephenkao temporarily deployed to staging March 30, 2023 16:08 — with GitHub Actions Inactive

stephenkao force-pushed the experience/8346/local-storybook branch from 51ed086 to 2806447 Compare March 30, 2023 18:05

stephenkao temporarily deployed to staging March 30, 2023 18:05 — with GitHub Actions Inactive

penny-lischer approved these changes Mar 30, 2023

View reviewed changes

jpandersen87 approved these changes Mar 31, 2023

View reviewed changes

stephenkao force-pushed the experience/8346/local-storybook branch from 2806447 to 93b95b4 Compare April 3, 2023 14:17

stephenkao temporarily deployed to staging April 3, 2023 14:17 — with GitHub Actions Inactive

stephenkao enabled auto-merge (squash) April 3, 2023 14:21

stephenkao merged commit 5fc30cd into master Apr 3, 2023
2 of 3 checks passed

stephenkao deleted the experience/8346/local-storybook branch April 3, 2023 14:30

etanb reviewed Apr 3, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Experience 8346: Add configuration for local instance of Storybook #8803

Experience 8346: Add configuration for local instance of Storybook #8803

stephenkao commented Mar 22, 2023 •

edited

stephenkao Mar 22, 2023

stephenkao Mar 22, 2023

stephenkao Mar 22, 2023

jpandersen87 Mar 31, 2023

stephenkao Mar 22, 2023

stephenkao Mar 22, 2023

stephenkao Mar 22, 2023

penny-lischer commented Mar 29, 2023

penny-lischer commented Mar 29, 2023

stephenkao commented Mar 30, 2023

penny-lischer left a comment

jpandersen87 Mar 31, 2023

sonarcloud bot commented Apr 3, 2023

etanb Apr 3, 2023


		initializeWorker();

		function withRestHooksCacheProvider(Story) {

Experience 8346: Add configuration for local instance of Storybook #8803

Experience 8346: Add configuration for local instance of Storybook #8803

Conversation

stephenkao commented Mar 22, 2023 • edited

Changes

Checklist

Testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

penny-lischer commented Mar 29, 2023

penny-lischer commented Mar 29, 2023

stephenkao commented Mar 30, 2023

penny-lischer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarcloud bot commented Apr 3, 2023

Choose a reason for hiding this comment

stephenkao commented Mar 22, 2023 •

edited