chore(docs): introduce storybook and migrate react-tabs examples #873

austingreendev · 2020-09-08T17:49:19Z

Description

This PR begins our migration from multiple Styleguidist builds to a single Storybook instance. This will significantly reduce our build times and improve the development and consumer experience for our "knobs" style examples.

I've used the react-tabs package as the first migration example as it's already documented on the new website.

Detail

Storybook Config

storybook v6 includes a lot of new things and I've tried to stick as close to their opinionated defaults as possible. Some unique things to point out:

Storybook now handles Typescript compilation automatically 🥳 They accomplish this with the @babel/preset-typescript preset and a TS checker that runs in a separate process.
- Unfortunately this preset is unable handle mixed type exports. As we migrate packages over we may need to tweak our TS syntax to export these types separately, but they don't affect the compiled output in any way.
- Some tsconfig and module alias changes were necessary for this to compile correctly. This shouldn't affect our build output, but a lot of this complexity can be removed once styleguidist is fully gone.
I've added an eslint-loader and svgr to the default webpack config
The manager and preview themes have been modified to use our font-family, sizing, and default color set
The "essential" addons are included by default, but I've also included the a11y-addon which includes an axe panel showing applicable rules as well as a color filter dropdown.

Story format

For each package we can include the README similar to stylguidist. I've also created a basic example format which:

Allows a story to be configured via control knobs
Can be tested with RTL and Bedrock styling
Shows the prop-sheets for all related components (excluding HTMLAttribute and other extensions)

TODO

~~Fix README reference link formatting~~
- Removed root README
~~Correct IE11 issues (something to do with our babel config customization)~~
- Now extend the default storybook babel config
Once a format is decided, choose whether to update the template package at this time

Checklist

👌 design updates are Garden Designer approved (add the
designer as a reviewer)
🌐 Styleguidist demo is up-to-date (yarn start)
⬅️ renders as expected with reversed (RTL) direction
🤘 renders as expected with Bedrock CSS (?bedrock)
♿ analyzed via axe and evaluated using VoiceOver
~~💂‍♂️ includes new unit tests~~
📝 tested in Chrome, Firefox, Safari, Edge, and IE11

.circleci/config.yml

austingreendev · 2020-09-08T17:50:12Z

.eslintignore

@@ -1 +0,0 @@
-packages/notifications/index.d.ts


This file should have been removed with the v8 release

austingreendev · 2020-09-08T17:51:59Z

packages/tabs/src/elements/Tabs.tsx

    ref
  ) => {
+    const theme = useContext(ThemeContext);


I updated the theme reference logic here to align with the more recent components. This doesn't affect the public API.

austingreendev · 2020-09-08T17:52:47Z

packages/tabs/stories/Tabs.stories.tsx

+
+export default {
+  title: 'Components/Tabs',
+  subcomponents: { Tabs, TabList, Tab, TabPanel },


By only listing subcomponents we don't have to override the arguments that we don't want to display in the story controls.

coveralls · 2020-09-08T18:10:13Z

Coverage decreased (-0.3%) to 95.82% when pulling 7a81311 on agreen/storybook into 8f0c098 on main.

jzempel

Just a quick run-through while this is in draft mode. This is going to be a very nice QoL improvement.

.eslintrc.json

.storybook/babel.config.js

.storybook/gardenTheme.js

.storybook/manager-head.html

jzempel · 2020-09-08T20:03:00Z

.storybook/preview.js

+  locale: {
+    name: 'direction',
+    description: 'Locale direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'ltr', title: 'LTR' },
+        { value: 'rtl', title: 'RTL' }
+      ]
+    }
+  },
+  bedrock: {
+    name: 'bedrock',
+    description: 'CSS Bedrock',
+    defaultValue: 'disabled',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'disabled', title: 'Disabled' },
+        { value: 'enabled', title: 'Enabled' }
+      ]
+    }
+  }


Can these be made to work like the "Grid" toggle rather than choosing from a menu?

Looking through their docs I haven't been able to find anything about different global toolbar types. Since it's an essential plugin it seems they have a deeper integration than we do in preview.js. I'll keep looking through their docs though.

Does this shed any light? https://github.com/storybookjs/storybook/blob/cf7c1c33dfe05e4dbe93f6121d42d058e5db3825/addons/backgrounds/src/containers/BackgroundSelector.tsx#L189-L209

Without a fully-custom addon I'm not sure we will be able to replicate this. Feels like it could be a good follow-on before we would make the global cut.

Ok, let's capture the task and see if we can make something of it. Just having the functionality is fine for now.

demo/index.html

package.json

packages/tabs/stories/Tabs.stories.tsx

utils/styleguide/public/images/garden.svg

utils/test/garden-test-utils.tsx

austingreendev · 2020-09-09T18:54:11Z

@jzempel IE11 support could be tricky here. I'm now extending the default babel configuration provided by Storybook, but it seems they have an IE11 regression in the most recent release storybookjs/storybook#12179

I feel comfortable going forward with this knowing that all of our internal consumers have recently ended IE11 support. We should still be conscious of it in the main site, but we should be ok in the short-term here.

hzhu

Looking good 👍

packages/tabs/README.md

jzempel · 2020-09-11T16:02:04Z

IE11 support could be tricky here.

Oh no. What's the plan for Garden to get new components out the door with guaranteed IE11 support (still needed here, unfortunately)?

jzempel

Nice, improved, future-proof config 🎉 Also, README is looking niiice.

.circleci/config.yml

.storybook/gardenTheme.js

.storybook/preview.js

jzempel

[nit] Should the "change preview background" grid icon remain visible in the header? Doesn't look like it does anything.

This.is.awesome.

austingreendev · 2020-09-11T18:41:33Z

change preview background

This should be removed right now. I've disabled the backgrounds plugin which I believe is where this is coming from. We may need to customize further once we look into tweaking the CSS Bedrock dropdown.

jzempel · 2020-09-11T18:49:50Z

This should be removed right now.

The latest deployment sez otherwise 🤷

austingreendev · 2020-09-11T18:52:24Z

You're correct. It should be gone though. Will add it to the CSS Bedrock task to look into this.

chore(docs): introduce storybook and migrate react-tabs examples

cee3682

austingreendev added the PR: Docs 📝 label Sep 8, 2020

austingreendev requested a review from a team September 8, 2020 17:49

austingreendev commented Sep 8, 2020

View reviewed changes

zendesk-garden temporarily deployed to staging September 8, 2020 18:09 Inactive

jzempel requested changes Sep 8, 2020

View reviewed changes

Austin Green added 6 commits September 8, 2020 13:24

Fix alias typo

2e5676e

Remove Garden colors from theme

9fd8f13

Remove Google analytics

6f7e6e6

Deep-link tabs example

66c9485

Remove unused palette object

e0dc080

Only disable single tab

404ffad

zendesk-garden temporarily deployed to staging September 8, 2020 21:12 Inactive

Austin Green added 4 commits September 9, 2020 11:17

Remove root README

6192e33

Use storybook default babel config

7eed5d0

Make no-duplicate-imports rule more granular

0d2f7a9

Automatically generate babel alias

3cee9e5

austingreendev marked this pull request as ready for review September 9, 2020 18:52

hzhu reviewed Sep 9, 2020

View reviewed changes

packages/tabs/README.md Show resolved Hide resolved

zendesk-garden temporarily deployed to staging September 9, 2020 19:25 Inactive

Update README to use hook syntax

a1d52b1

zendesk-garden temporarily deployed to staging September 9, 2020 20:47 Inactive

Merge branch 'main' into agreen/storybook

fecb2e8

zendesk-garden temporarily deployed to staging September 11, 2020 00:10 Inactive

jzempel reviewed Sep 11, 2020

View reviewed changes

.circleci/config.yml Show resolved Hide resolved

.storybook/gardenTheme.js Outdated Show resolved Hide resolved

.storybook/preview.js Outdated Show resolved Hide resolved

Address JZ comments

7a81311

hzhu approved these changes Sep 11, 2020

View reviewed changes

.storybook/preview.js Outdated Show resolved Hide resolved

zendesk-garden temporarily deployed to staging September 11, 2020 18:21 Inactive

jzempel approved these changes Sep 11, 2020

View reviewed changes

austingreendev merged commit 4e57981 into main Sep 11, 2020

austingreendev deleted the agreen/storybook branch September 11, 2020 18:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(docs): introduce storybook and migrate react-tabs examples #873

chore(docs): introduce storybook and migrate react-tabs examples #873

austingreendev commented Sep 8, 2020 •

edited

austingreendev Sep 8, 2020

austingreendev Sep 8, 2020

austingreendev Sep 8, 2020

coveralls commented Sep 8, 2020 •

edited

jzempel left a comment

jzempel Sep 8, 2020

austingreendev Sep 8, 2020

jzempel Sep 8, 2020

austingreendev Sep 11, 2020

jzempel Sep 11, 2020

austingreendev commented Sep 9, 2020

hzhu left a comment

jzempel commented Sep 11, 2020

jzempel left a comment

jzempel left a comment

austingreendev commented Sep 11, 2020

jzempel commented Sep 11, 2020 •

edited

austingreendev commented Sep 11, 2020

		@@ -1 +0,0 @@
		packages/notifications/index.d.ts

chore(docs): introduce storybook and migrate react-tabs examples #873

chore(docs): introduce storybook and migrate react-tabs examples #873

Conversation

austingreendev commented Sep 8, 2020 • edited

Description

Detail

Storybook Config

Story format

TODO

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Sep 8, 2020 • edited

jzempel left a 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

austingreendev commented Sep 9, 2020

hzhu left a comment

Choose a reason for hiding this comment

jzempel commented Sep 11, 2020

jzempel left a comment

Choose a reason for hiding this comment

jzempel left a comment

Choose a reason for hiding this comment

austingreendev commented Sep 11, 2020

jzempel commented Sep 11, 2020 • edited

austingreendev commented Sep 11, 2020

austingreendev commented Sep 8, 2020 •

edited

coveralls commented Sep 8, 2020 •

edited

jzempel commented Sep 11, 2020 •

edited