NXT-4206: Updated storybook to version 10#850
NXT-4206: Updated storybook to version 10#850daniel-stoian-lgp wants to merge 11 commits intodevelopfrom
Conversation
# Conflicts: # samples/sampler/npm-shrinkwrap.json # samples/sampler/package.json
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #850 +/- ##
========================================
Coverage 85.08% 85.08%
========================================
Files 118 118
Lines 4491 4491
Branches 1226 1226
========================================
Hits 3821 3821
Misses 517 517
Partials 153 153 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
# Conflicts: # samples/sampler/custom-addon/ToolbarTab.js # samples/sampler/npm-shrinkwrap.json # samples/sampler/package.json
|
Please list the breaking changes between Storybook v9 -> v10 in |
| /* global __dirname */ | ||
| import webpack from '@enact/storybook-utils/configs/webpack.js'; | ||
| import {readFileSync} from 'fs'; | ||
| import {dirname, resolve} from 'path'; |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
import {dirname, resolve} from 'path';
The code has been added, but you need to write in Additional consideration why it was added and where it is used.
| import {readFileSync} from 'fs'; | ||
| import {dirname, resolve} from 'path'; | ||
| import {loadCsf} from 'storybook/internal/csf-tools'; | ||
| import {fileURLToPath} from 'url'; |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
import {fileURLToPath} from 'url';
The code has been added, but you need to write in Additional consideration why it was added and where it is used.
| const webpack = require('@enact/storybook-utils/configs/webpack'); | ||
| const {loadCsf} = require('storybook/internal/csf-tools'); | ||
| const {readFileSync} = require('fs'); | ||
| const __filename = fileURLToPath(import.meta.url); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
const __filename = fileURLToPath(import.meta.url);
The code has been added, but you need to write in Additional consideration why it was added and where it is used.
| const {loadCsf} = require('storybook/internal/csf-tools'); | ||
| const {readFileSync} = require('fs'); | ||
| const __filename = fileURLToPath(import.meta.url); | ||
| const __dirname = dirname(__filename); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
const __dirname = dirname(__filename);
The code has been added, but you need to write in Additional consideration why it was added and where it is used.
| '../custom-addon/manager.js' | ||
| '@storybook/addon-docs' | ||
| ], | ||
| managerEntries: [resolve(__dirname, '../custom-addon/manager.js')], |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
managerEntries: [resolve(__dirname, '../custom-addon/manager.js')],
The code has been added, but you need to write in Additional consideration why it was added and where it is used.
| toolbarParamKey={toolbarParamKey} | ||
| /> | ||
| ); | ||
| return React.createElement(ToolbarTab, { |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
There was a problem hiding this comment.
return React.createElement(ToolbarTab, {
The code has been changed, but you need to write in Additional consideration why it was changed and where it is used.
| const renderHighlightColorPickerTab = () => <Toolbar param={HIGHLIGHT_PARAM_KEY} isColorPicker />; | ||
| const renderDefaultSkinsTab = () => <Toolbar param={DEFAULTSKINS_PARAM_KEY} isColorPicker={false} />; | ||
| const renderAccentColorPickerTab = () => | ||
| React.createElement(Toolbar, {param: ACCENT_PARAM_KEY, isColorPicker: true}); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| React.createElement(Toolbar, {param: ACCENT_PARAM_KEY, isColorPicker: true}); | ||
|
|
||
| const renderHighlightColorPickerTab = () => | ||
| React.createElement(Toolbar, {param: HIGHLIGHT_PARAM_KEY, isColorPicker: true}); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| React.createElement(Toolbar, {param: HIGHLIGHT_PARAM_KEY, isColorPicker: true}); | ||
|
|
||
| const renderDefaultSkinsTab = () => | ||
| React.createElement(Toolbar, {param: DEFAULTSKINS_PARAM_KEY, isColorPicker: false}); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| if (isColorPicker) { | ||
| return { | ||
| center: <ColorPicker colorPickerType={colorPickerType} />, | ||
| center: React.createElement(ColorPicker, {colorPickerType: colorPickerType}), |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| > | ||
| <ToolbarTab toolbarParamKey={toolbarParamKey} /> | ||
| </WithTooltip> | ||
| return React.createElement( |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| if (globals['show all skins'] === "true") return null; | ||
|
|
||
| return <DefaultSkinToolbarTab toolbarParamKey={toolbarParamKey} />; | ||
| return React.createElement(DefaultSkinToolbarTab, {toolbarParamKey: toolbarParamKey}); |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
| {toolbarParamKey} | ||
| </IconButton> | ||
| const ToolbarTab = ({isActive, toggleState, toolbarParamKey}) => { | ||
| return React.createElement( |
There was a problem hiding this comment.
Add a change log and related link into Additional consideration.
4 participants
Checklist
Issue Resolved / Feature Added
Latest storybook is 10.x
Resolution
Updated storybook to version 10
Update configuration to work with ESM
Changed custom addon configuration to work in ESM
In the release notes for storybook 10 it denotes as the only breaking change that Storybook is now ESM only:
https://github.com/storybookjs/storybook/releases/tag/v10.0.0
Additional Considerations
Migration guide made by storybook team: https://storybook.js.org/docs/releases/migration-guide
fileURLToPathhas been imported fromurlanddirnamehas been imported frompath. This imports will be used to create similar files in ESM as we had in commonJS thus minimizing the changes made to this repo.fileURLToPathwill be used to create the__filenamewe use as a parameter fordirname(const __filename = fileURLToPath(import.meta.url)).We use
dirnameto create the variable__dirnamewhich used to be a global variable and pass it to thewebpackfunction as a parameter (const __dirname = dirname(__filename)).This is the node documentation for this functions:
https://nodejs.org/api/url.html#urlfileurltopathurl-options
https://nodejs.org/api/path.html#pathdirnamepath
When it comes to our custom addons, it is recommended to switch from
exportEntriestomanagerEntries(https://storybook.js.org/docs/addons/addon-migration-guide). For this reason we added a new property in our export object calledmanagerEntriessuch:managerEntries: [resolve(__dirname, '../custom-addon/manager.js')].We also needed to change syntax from JSX to React.createComponent because, since the change to ESM, storybook does not permit use of JSX in addons. This components are used in the same way as before, just the return statement was changed from
return () => <Component {...props} />toreturn React.createElement(Component, {...props}).Links
NXT-4206
Comments
Enact-DCO-1.0-Signed-off-by: Daniel Stoian (daniel.stoian@lgepartner.com)