docs(Storybook): upgrade to Storybook V8 #639

ze-flo · 2024-05-06T05:18:17Z

Description

Migrate from Storybook@7.x.x to Storybook@8.0.10

Detail

Converts *.stories.mdx to CSF3 + MDX using script
Applies changes from v8 migration script
Fixes linting and TS issues
Cleans-up stories
~~Upgrades to getColorV8 from @zendeskgarden/react-theming to avoid future breaking-changes~~

Checklist

🌐 demo is up-to-date (npm start)
~~💂‍♂️ includes new unit tests~~
~~♿ tested for WCAG 2.1 AA compliance~~
📝 tested in Chrome, Firefox, Safari, and Edge

coveralls · 2024-05-06T05:22:28Z

coverage: 95.992%. remained the same
when pulling 2d491dd on ze-flo/storybook-v8-migration
into 2fa495f on main.

ze-flo · 2024-05-06T05:22:14Z

.storybook/main.js

+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+


Following recommendations for monorepo environments.

ze-flo · 2024-05-06T05:29:34Z

.eslintrc.json

@@ -36,7 +36,8 @@
      "files": ["*.stories.tsx", "packages/*/demo/**/*"],
      "rules": {
        "react/button-has-type": "off",
-        "react/no-array-index-key": "off"
+        "react/no-array-index-key": "off",
+        "func-name-matching": "off"


To support React hooks and useArgs within story's render field, the docs recommend using this syntax to avoid linting errors.

{ render: function Render (args) {...} ... }

Disabling func-name-matching is preferable to turning off react-hooks/rules-of-hooks.

From that link...

To avoid linting issues, it is recommended to use a function with a capitalized name. If you are not concerned with linting, you may use an arrow function.

Are you sure they aren't referring to their own Storybook linter (which we don't use)? If so, then Garden would definitely prefer arrow functions.

That applies to our eslint config as well. To be clear, we can still use arrow functions and should do so when not using hooks.

func-name-matching expects { render: function render {...} }, however react-hooks/rules-of-hooks requires that a function be PascalCased when using hooks. Disabling react-hooks/rules-of-hooks can lead to bugs but turning off func-name-matching won't. That's why I think it's a better choice.

The alternative is to move that function elsewhere.

const Controlled: Story = { render: function Render (args) {...} ... }

Becomes

export const Controlled: Story = { render: Render, ... } function Render (args) {...}

But I think it's more cumbersome and would reduce readability.

ic – yeah, then what you have is the right trade-off. Thanks for the explanation.

ze-flo · 2024-05-06T05:30:47Z

.storybook/preview.js

@@ -8,7 +8,7 @@
 import React, { StrictMode } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { create } from '@storybook/theming/create';
-import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';


Future-proofing until v9 upgrade.

I think we'd prefer to leave this as getColor so that it is forced to be addressed when this repo renovates up to v9.

ze-flo · 2024-05-06T05:31:44Z

packages/accordion/demo/accordion.stories.tsx

+};
+
+export const Controlled: Story = {
+  render: function Render(args) {


Following the docs recommended syntax when using hooks within the render fn.

~~ditto .. can Garden opt for arrow functions? Or are they referring to the hooks linter?~~

jzempel

Hard to tell if there's more magic in v8 or if there was a lot of MDX magic in v7 that is now being passed along to the consumer 😅 . But solid work here @ze-flo

jzempel · 2024-05-06T21:49:39Z

package.json

+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-mdx-gfm": "^8.0.9",
    "@storybook/addon-styling": "1.3.7",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",


All dependencies should be exact versions – no ^ ranges

jzempel · 2024-05-07T13:48:58Z

packages/focusvisible/demo/focusvisible.mdx

@@ -0,0 +1,19 @@
+import { Meta, Controls, Canvas, Story, Markdown } from '@storybook/blocks';
+import README from '../README.md';
+import * as FocusvisibleStories from './focusvisible.stories';


Suggested change

import * as FocusvisibleStories from './focusvisible.stories';

import * as FocusVisibleStories from './focusvisible.stories';

[nit]

jzempel · 2024-05-07T13:55:27Z

packages/scrollregion/demo/scrollregion.mdx

@@ -0,0 +1,19 @@
+import { Meta, Controls, Canvas, Story, Markdown } from '@storybook/blocks';
+import README from '../README.md';
+import * as ScrollregionStories from './scrollregion.stories';


Suggested change

import * as ScrollregionStories from './scrollregion.stories';

import * as ScrollRegionStories from './scrollregion.stories';

[nit]

geotrev

👌🏻 Appreciate your diligence on the component signatures in the Story objects. Came together really nice!

geotrev · 2024-05-07T16:08:42Z

.storybook/main.js

-    '@storybook/addon-a11y'
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    '@storybook/addon-webpack5-compiler-babel'


Did you end up having any insights into why the SWC compiler was having issues?

Not sure what the root cause is. I'll have to dig deeper on that in a follow-up PR.

ze-flo · 2024-05-07T18:24:57Z

👌🏻 Appreciate your diligence on the component signatures in the Story objects. Came together really nice!

Everything is type-safe now. That uncovered a few errors that are now fixed. 🙌

ze-flo added 10 commits May 5, 2024 11:07

chore(Storybook): run mdx > csf migration script

522751d

chore(Stories): fix imports and type stories

3544c32

chore(Stories): cleanup and remane ext to .stories.tsx

0832338

chore(eslintrc): disable func-name-matching for stories

f8e8fed

chore(Stories): fix eslint errors

3969200

chore(stories.mdx): remove unused imports

07ece18

chore(Storybook): run v8 migration script

18baab8

chore(Storybook): fix import

46d15fe

chore(Stories.tsx): replace deprecated Story w/ StoryFn type

a24d94c

refactor(Stories): fix types, clean up, prettier

5e352ae

ze-flo requested a review from a team as a code owner May 6, 2024 05:18

zendesk-garden deployed to staging May 6, 2024 05:24 View deployment

ze-flo commented May 6, 2024

View reviewed changes

jzempel requested changes May 7, 2024

View reviewed changes

ze-flo force-pushed the ze-flo/storybook-v8-migration branch from 8745fd8 to 5e352ae Compare May 7, 2024 14:57

zendesk-garden deployed to staging May 7, 2024 15:03 View deployment

ze-flo added 3 commits May 7, 2024 05:05

chore: upgrade and version lock Storybook deps

437996a

chore: Fix casing

8db9ee8

style(*.mdx): run prettier

2d491dd

zendesk-garden deployed to staging May 7, 2024 15:14 View deployment

geotrev approved these changes May 7, 2024

View reviewed changes

jzempel approved these changes May 7, 2024

View reviewed changes

ze-flo merged commit 778fdef into main May 7, 2024
4 checks passed

ze-flo deleted the ze-flo/storybook-v8-migration branch May 7, 2024 19:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(Storybook): upgrade to Storybook V8 #639

docs(Storybook): upgrade to Storybook V8 #639

ze-flo commented May 6, 2024 •

edited

Loading

coveralls commented May 6, 2024 •

edited

Loading

ze-flo May 6, 2024

ze-flo May 6, 2024

jzempel May 6, 2024

ze-flo May 7, 2024

jzempel May 7, 2024

ze-flo May 6, 2024

jzempel May 6, 2024

ze-flo May 6, 2024

jzempel May 7, 2024 •

edited

Loading

jzempel left a comment

jzempel May 6, 2024

jzempel May 7, 2024

jzempel May 7, 2024

geotrev left a comment

geotrev May 7, 2024

ze-flo May 7, 2024

ze-flo commented May 7, 2024

	import * as FocusvisibleStories from './focusvisible.stories';
	import * as FocusVisibleStories from './focusvisible.stories';

	import * as ScrollregionStories from './scrollregion.stories';
	import * as ScrollRegionStories from './scrollregion.stories';

docs(Storybook): upgrade to Storybook V8 #639

docs(Storybook): upgrade to Storybook V8 #639

Conversation

ze-flo commented May 6, 2024 • edited Loading

Description

Detail

Checklist

coveralls commented May 6, 2024 • edited Loading

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

Choose a reason for hiding this comment

jzempel May 7, 2024 • edited Loading

Choose a reason for hiding this comment

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

geotrev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ze-flo commented May 7, 2024

ze-flo commented May 6, 2024 •

edited

Loading

coveralls commented May 6, 2024 •

edited

Loading

jzempel May 7, 2024 •

edited

Loading