Upgrade from Storybook v7 -> Storybook v8 #11734

jesstelford · 2024-03-14T05:12:35Z

About 90% of the upgrade was handled by npx storybook@latest upgrade 🎉 (Feels like just yesterday we did the upgrade from v6 -> v7 😅)

Node v18

Storybook v8 requires node v18. But we're still stuck on node v16.

🚨 This PR is blocked by;

Performance

Calculated using hyperfine:

hyperfine --parameter-list branch main,storybook-8 --setup='git checkout {branch} && yarn && yarn build --filter=@shopify/polaris' --prepare='rm -rf polaris-react/build-internal/storybook/' --warmup 1 'yarn workspace @shopify/polaris run storybook:build --quiet'

main

Benchmark 1: yarn workspace @shopify/polaris run storybook:build --quiet
  Time (mean ± σ):     24.362 s ±  0.387 s    [User: 39.938 s, System: 4.076 s]
  Range (min … max):   23.896 s … 25.034 s    10 runs

storybook-8

Benchmark 2: yarn workspace @shopify/polaris run storybook:build --quiet
  Time (mean ± σ):     29.486 s ±  1.321 s    [User: 40.765 s, System: 3.868 s]
  Range (min … max):   28.419 s … 32.763 s    10 runs

Results

Summary
  yarn workspace @shopify/polaris run storybook:build --quiet (branch = main) ran
    1.21 ± 0.06 times faster than yarn workspace @shopify/polaris run storybook:build --quiet (branch = storybook-8)

Combined with the slow-down seen in the upgrade to v7, I'm starting to think Chromatic's marketing about better performance isn't true for us 😅

BPScott · 2024-03-16T07:02:48Z

I'm kicking this SB8 update over in checkout-web and found a storybook-a11y-test patch that works for SB8 (I've not tested if it falls back well in SB7/SB6) over in: https://github.com/Shopify/checkout-web/compare/sb8?expand=1

Good codebase hygeine. But also, I need it so I can [upgrade to Storybook v8](#11734) which requires me to move to `@storybook/test-runner` which requires Jest 29.

jesstelford · 2024-04-23T09:09:28Z

polaris-react/scripts/accessibility-check.js

@@ -1,40 +0,0 @@
-/* eslint-disable no-console */


Replaced with polaris-react/.storybook/test-runner.ts

jesstelford · 2024-04-23T09:09:58Z

polaris-react/package.json

@@ -52,7 +52,8 @@
    "clean": "rm -rf .turbo node_modules build build-internal",
    "start": "serve ./build-internal/storybook/static -l ${POLARIS_STORYBOOK_PORT:=6006}",
    "storybook": "storybook dev -p ${POLARIS_STORYBOOK_PORT:=6006} --quiet",
-    "storybook:build": "storybook build -o build-internal/storybook/static"
+    "storybook:build": "storybook build -o build-internal/storybook/static",
+    "storybook:test": "concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'http-server build-internal/storybook/static --port 6006 --silent' 'wait-on tcp:6006 && test-storybook --maxWorkers=2 polaris-react/src/components/Modal/Modal.stories.tsx'"


This command is from the Storybook docs

jesstelford · 2024-04-23T09:10:17Z

polaris-react/playground/DetailsPage.tsx

@@ -52,6 +52,7 @@ import type {DropZoneProps, PageProps} from '../src';
 import styles from './DetailsPage.module.css';

 export const DetailsPage = {
+  tags: ['skip-tests'],


This used to be in polaris-react/scripts/accessibility-check.js

jesstelford · 2024-04-23T09:11:14Z

polaris-react/src/components/Banner/Banner.stories.tsx

@@ -142,6 +142,7 @@ export const InAModal = {
      <div style={{height: '500px'}}>
        <Button onClick={handleChange}>Open</Button>
        <Modal
+          instant


Prevents the accessibility checker from running while the CSS fade-in transition for Modal is still happening and giving false positives for color contrast issues.

jesstelford · 2024-04-23T09:11:55Z

polaris-react/src/components/Modal/Modal.stories.tsx


 export default {
  component: Modal,
 } as Meta<typeof Modal>;

 export const Default = {
+  play: async ({canvasElement}) => {
+    await transitionsAllSettled(canvasElement);


Prevents the accessibility checker from running while the CSS fade-in transition for Modal is still happening and giving false positives for color contrast issues.

jesstelford · 2024-04-23T10:41:11Z

polaris-react/.storybook/test-runner.ts

@@ -0,0 +1,35 @@
+/* eslint-env node */


🙏 🙇 Thankyou @BPScott for pointing me in the right direction with this one!
🤜 🤛

@ShabanaRumane

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#11535](#11535) [`bcd16df24`](bcd16df) Thanks [@ShabanaRumane](https://github.com/ShabanaRumane)! - Added support for setting `maxHeight` and `minHeight` on `Popover.Pane` and `Combobox` - [#11907](#11907) [`45308c97a`](45308c9) Thanks [@zakwarsame](https://github.com/zakwarsame)! - Added an optional `fiterLabel` prop to `ActionList` to allow for a custom placeholder ### Patch Changes - [#11897](#11897) [`a83084b3b`](a83084b) Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed edges of disabled `IndexTable.Row` `Checkbox` triggering selection - [#11924](#11924) [`5ec70e688`](5ec70e6) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest 29 - [#11929](#11929) [`9ee700be6`](9ee700b) Thanks [@sophschneider](https://github.com/sophschneider)! - Rounded `Navigation` at `mdDown` behind a feature flag - [#11923](#11923) [`ce13c4366`](ce13c43) Thanks [@jesstelford](https://github.com/jesstelford)! - Update dev dependency: `postcss-import@^15.1.0` -> `postcss-import@^16.1.0` - [#11925](#11925) [`364ada59e`](364ada5) Thanks [@sophschneider](https://github.com/sophschneider)! - Updated Frame to only apply rounded Frame when passed a `topBar` - [#11734](#11734) [`1fef06256`](1fef062) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to Storybook v8 - [#11898](#11898) [`1539f0e7c`](1539f0e) Thanks [@jesstelford](https://github.com/jesstelford)! - Removed extra padding around `IndexTable.Row` `Checkbox` - [#11927](#11927) [`5a32a3ff6`](5a32a3f) Thanks [@sophschneider](https://github.com/sophschneider)! - Added `prefers-reduced-motion` media queries to `Frame` width transitions - [#11930](#11930) [`b111629d7`](b111629) Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate Storybook stories to CSF v3 - [#11805](#11805) [`0a9b72721`](0a9b727) Thanks [@LA1CH3](https://github.com/LA1CH3)! - Fixed `IndexTable` `loading` prop to correctly show/hide loading UI when prop value changes - Updated dependencies \[[`5ec70e688`](5ec70e6)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - [#11924](#11924) [`5ec70e688`](5ec70e6) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest 29 ## @shopify/[email protected] ### Patch Changes - [#11924](#11924) [`5ec70e688`](5ec70e6) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest 29 - [#11930](#11930) [`b111629d7`](b111629) Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate Storybook stories to CSF v3 - Updated dependencies \[[`5ec70e688`](5ec70e6)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - [#11924](#11924) [`5ec70e688`](5ec70e6) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest 29 ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`5ec70e688`](5ec70e6)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`5ec70e688`](5ec70e6)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - [#11924](#11924) [`5ec70e688`](5ec70e6) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest 29 - Updated dependencies \[[`a83084b3b`](a83084b), [`5ec70e688`](5ec70e6), [`9ee700be6`](9ee700b), [`bcd16df24`](bcd16df), [`ce13c4366`](ce13c43), [`364ada59e`](364ada5), [`1fef06256`](1fef062), [`45308c97a`](45308c9), [`1539f0e7c`](1539f0e), [`5a32a3ff6`](5a32a3f), [`b111629d7`](b111629), [`0a9b72721`](0a9b727)]: - @shopify/[email protected] - @shopify/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

jesstelford force-pushed the storybook-8 branch from def0140 to fe2e8ef Compare March 14, 2024 05:13

jesstelford changed the base branch from multiline-comments to main March 14, 2024 05:13

jesstelford added Tech Debt Key dependency Engineering Priority: Low Small, subtle details Blocked Something is preventing progress on this issue labels Mar 14, 2024

lgriffee added #gsd:38846 Admin Quality Improvements (Q1 2024) and removed #gsd:38846 Admin Quality Improvements (Q1 2024) labels Mar 15, 2024

jesstelford marked this pull request as draft March 17, 2024 22:57

aaronccasanova force-pushed the storybook-8 branch from fe2e8ef to f4259c0 Compare April 19, 2024 21:52

github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024

aaronccasanova force-pushed the main branch from 9f6fc03 to b71eff5 Compare April 20, 2024 02:33

jesstelford force-pushed the storybook-8 branch from f4259c0 to 6254f30 Compare April 22, 2024 11:19

github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 22, 2024

jesstelford force-pushed the storybook-8 branch from 6254f30 to bd0a4e8 Compare April 22, 2024 11:21

jesstelford mentioned this pull request Apr 22, 2024

Upgrade to Jest 29 #11924

Merged

jesstelford changed the base branch from main to jest-29 April 22, 2024 12:47

jesstelford force-pushed the storybook-8 branch 2 times, most recently from 6c30c94 to b706003 Compare April 22, 2024 13:58

alex-page approved these changes Apr 22, 2024

View reviewed changes

Base automatically changed from jest-29 to main April 23, 2024 00:26

jesstelford added a commit that referenced this pull request Apr 23, 2024

Upgrade to Jest 29 (#11924)

5ec70e6

Good codebase hygeine. But also, I need it so I can [upgrade to Storybook v8](#11734) which requires me to move to `@storybook/test-runner` which requires Jest 29.

jesstelford removed the Blocked Something is preventing progress on this issue label Apr 23, 2024

jesstelford force-pushed the storybook-8 branch 5 times, most recently from c5b469e to def7af2 Compare April 23, 2024 09:07

jesstelford commented Apr 23, 2024

View reviewed changes

jesstelford force-pushed the storybook-8 branch from def7af2 to 339efa7 Compare April 23, 2024 09:13

jesstelford marked this pull request as ready for review April 23, 2024 09:13

jesstelford force-pushed the storybook-8 branch 2 times, most recently from e840d03 to d534e60 Compare April 23, 2024 10:40

jesstelford commented Apr 23, 2024

View reviewed changes

Upgrade from Storybook v7 -> Storybook v8

2b6a8cd

jesstelford force-pushed the storybook-8 branch from d534e60 to 2b6a8cd Compare April 23, 2024 13:58

jesstelford merged commit 1fef062 into main Apr 23, 2024
12 of 13 checks passed

jesstelford deleted the storybook-8 branch April 23, 2024 23:41

shopify-github-actions-access bot mentioned this pull request Apr 23, 2024

Version Packages #11922

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade from Storybook v7 -> Storybook v8 #11734

Upgrade from Storybook v7 -> Storybook v8 #11734

jesstelford commented Mar 14, 2024 •

edited

Loading

BPScott commented Mar 16, 2024

jesstelford Apr 23, 2024

jesstelford Apr 23, 2024

jesstelford Apr 23, 2024

jesstelford Apr 23, 2024

jesstelford Apr 23, 2024

jesstelford Apr 23, 2024 •

edited

Loading

Upgrade from Storybook v7 -> Storybook v8 #11734

Upgrade from Storybook v7 -> Storybook v8 #11734

Conversation

jesstelford commented Mar 14, 2024 • edited Loading

Node v18

Performance

BPScott commented Mar 16, 2024

jesstelford Apr 23, 2024

Choose a reason for hiding this comment

jesstelford Apr 23, 2024

Choose a reason for hiding this comment

jesstelford Apr 23, 2024

Choose a reason for hiding this comment

jesstelford Apr 23, 2024

Choose a reason for hiding this comment

jesstelford Apr 23, 2024

Choose a reason for hiding this comment

jesstelford Apr 23, 2024 • edited Loading

Choose a reason for hiding this comment

jesstelford commented Mar 14, 2024 •

edited

Loading

jesstelford Apr 23, 2024 •

edited

Loading