chore: upgrading storybook to version 8 #674
Conversation
georgewrmarshall
added
the
team-design-system
georgewrmarshall
force-pushed
the
upgrade/sb-8
branch
from
8498312
to
2206a92
Compare
|
👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎ This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. Ignoring: Next stepsTake a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with |
georgewrmarshall
force-pushed
the
upgrade/sb-8
branch
from
2206a92
to
3162cce
Compare
|
@SocketSecurity ignore npm/[email protected] |
| "@storybook/addon-actions", | ||
| "@storybook/react-webpack5", | ||
| "babel-loader", | ||
| "dependency-tree", | ||
| "eslint-plugin-node", | ||
| "sass", | ||
| "webpack", |
There was a problem hiding this comment.
Removing unused dependencies from dep check
| "@yarnpkg/fslib", | ||
| "@chromatic-com/storybook", | ||
| "@storybook/addon-essentials", | ||
| "@storybook/addon-interactions", | ||
| "@storybook/addon-links", | ||
| "@storybook/blocks", | ||
| "@storybook/test" |
There was a problem hiding this comment.
Adding new dependencies to depcheck file otherwise we get a linting error this is a known issue with the module template set up
| @@ -78,3 +78,5 @@ node_modules/ | |||
|
|
|||
| # Storybook build folder | |||
| storybook-static | |||
|
|
|||
| *storybook.log | |||
There was a problem hiding this comment.
Part of storybook 8. It now provides error logs
| docs: { | ||
| autodocs: true, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Migrating to typescript
| @@ -22,3 +23,5 @@ export const parameters = { | |||
| }, | |||
| }, | |||
| }; | |||
|
|
|||
| export default preview; | |||
There was a problem hiding this comment.
Migrating to typescript
| ## **Pre-merge reviewer checklist** | ||
|
|
||
| - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). | ||
| - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. |
There was a problem hiding this comment.
This was merged by mistake the pull request template lives in the .github directory here https://github.com/MetaMask/design-tokens/blob/main/.github/PULL_REQUEST_TEMPLATE.md
|
|
||
| <Meta title="Getting Started/Introduction" /> | ||
|
|
||
| <Markdown>{README}</Markdown> |
There was a problem hiding this comment.
Removed .stories per new storybook v8 standards
| @@ -1,4 +1,4 @@ | |||
| import { Meta } from '@storybook/addon-docs'; | |||
| import { Meta } from '@storybook/blocks'; | |||
There was a problem hiding this comment.
Replacing deprecated addon-docs
| <Meta title="Design Tokens/Shadows" /> | ||
|
|
There was a problem hiding this comment.
Not required as this is used as the docs page for shadows
| @@ -1,29 +1,29 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Updating shadow stories to CSF3 format
| @@ -1,6 +1,7 @@ | |||
| import { Meta, Canvas, Story } from '@storybook/addon-docs'; | |||
There was a problem hiding this comment.
Updating MDX to reflect v8 conventions
| "tsup>@swc/core": false, | ||
| "tsup>esbuild": false | ||
| "tsup>esbuild": true, | ||
| "vite>esbuild": false | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Removing unused dependencies and general clean up of package.json file
|
|
||
| export default defineConfig({ | ||
| plugins: [react()], // Enables fast refresh for React during development | ||
| }); |
There was a problem hiding this comment.
Vite config as we now use vite to load storybook as opposed to webpack
Description
This PR represents a significant upgrade of our Storybook environment from version 7 to version 8, aligning with the latest advancements and features as outlined in the Storybook 8 release notes. Alongside the version upgrade, we are transitioning our build system to use Vite for improved storybook build performance and developer experience. Additionally, this update includes the migration of our MDX files to the newest format supported in Storybook 8, ensuring our documentation and component stories leverage the full capabilities of the latest version. The motivation behind these changes is to enhance our development workflow, embrace modern tooling, and maintain our project's alignment with the best practices and standards in the frontend ecosystem.
Related issues
Fixes: N/A
Manual testing steps
To ensure a smooth transition and verify the successful upgrade:
yarn storybookto launch the upgraded Storybook environment.Screenshots/Recordings
Before
before720.mov
After
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist
This PR is a pivotal step in leveraging the latest Storybook features and improvements, setting a strong foundation for future development and storytelling within our project.