refactor: migrate storybook from v5 to v8 and update component stories #51
Conversation
ShriD2003
changed the title
| @@ -81,6 +81,7 @@ | |||
| "@lingui/react": "^4.11.2", | |||
| "@redux-devtools/extension": "^3.2.2", | |||
| "@reduxjs/toolkit": "^1.8.0", | |||
| "@storybook/addon-a11y": "^8.2.9", | |||
There was a problem hiding this comment.
Why do we need this in dependencies ? It should go to dev dependency ?
There was a problem hiding this comment.
Right, Thank you for pointing that out! I've moved it to devDependencies as suggested.
| @@ -219,8 +227,8 @@ | |||
| "react-floki": "^1.0.70", | |||
| "rimraf": "2.6.3", | |||
| "shelljs": "0.8.3", | |||
| "storybook-addon-intl": "^2.4.1", | |||
| "storybook-addon-smart-knobs": "^5.0.0", | |||
There was a problem hiding this comment.
This is not required now ? Why is this removed ?
There was a problem hiding this comment.
Yes, this is not required. As of versions > v6 we can now use @storybook/addon-controls for dynamically editing props, therefore eliminating the need for an additional addon-smart-knobs
There was a problem hiding this comment.
@storybook/addon-controls is required to be added or it comes by default ?
There was a problem hiding this comment.
@storybook/addon-controls needs to be added ( recommended )
| @@ -33,6 +33,5 @@ module.exports = ({ config }) => { | |||
| }); | |||
| config.resolve.modules.push('app'); | |||
| config.resolve.extensions.push('.js', '.jsx', '.react.js'); | |||
| config.module.rules[0].use[0].options.plugins = [require.resolve('babel-plugin-react-docgen')]; | |||
There was a problem hiding this comment.
This is removed because the doc generation is done by default on the new version ?
There was a problem hiding this comment.
Yes , Post v6 doc-gen support is by default.
.storybook/main.ts
Outdated
| import type { StorybookConfig } from '@storybook/react-webpack5'; | ||
|
|
||
| const config: StorybookConfig = { | ||
| addons: [ | ||
| '@storybook/addon-webpack5-compiler-swc', | ||
| '@storybook/addon-onboarding', | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@chromatic-com/storybook', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-a11y', | ||
| 'storybook-addon-intl' | ||
| ], | ||
| framework: { | ||
| name: '@storybook/react-webpack5', | ||
| options: {} | ||
| }, | ||
| stories: ['../app/components/**/stories/**/*.mdx', '../app/components/**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'] | ||
| }; | ||
| export default config; |
There was a problem hiding this comment.
Also can we add the configuration to auto generate docs
docs: {
autodocs: true
},
.storybook/main.ts
Outdated
| import type { StorybookConfig } from '@storybook/react-webpack5'; | ||
|
|
||
| const config: StorybookConfig = { | ||
| addons: [ | ||
| '@storybook/addon-webpack5-compiler-swc', | ||
| '@storybook/addon-onboarding', | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@chromatic-com/storybook', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-a11y', | ||
| 'storybook-addon-intl' | ||
| ], | ||
| framework: { | ||
| name: '@storybook/react-webpack5', | ||
| options: {} | ||
| }, | ||
| stories: ['../app/components/**/stories/**/*.mdx', '../app/components/**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'] | ||
| }; | ||
| export default config; |
There was a problem hiding this comment.
I think we need to also add support for lingui. Because we move from react intl to lingui
There was a problem hiding this comment.
https://github.com/wednesday-solutions/react-template/tree/master/.storybook
Refer the files from here
There was a problem hiding this comment.
Right, Thank you for pointing that out! I've now added support for lingui
Description
Storybook Upgrade:
Storybook v5 to v8, ensuring compatibility with the latest features and improvements.Story Updates:Playwright and CI Integration-Added Playwright configuration to enable automated end-to-end testing within the project.
-CI Integration: Configured the CI pipeline to automatically build Storybook and run tests against it using concurrently, http-server, and wait-on to ensure that all components are thoroughly tested within the Storybook environment during the CI process.
Additional Changes:Gif