Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade to Storybook 7 #4503

Merged
merged 1 commit into from
Jun 30, 2023
Merged

Upgrade to Storybook 7 #4503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions .babelrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100
}
}
],
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-typescript"
],
"plugins": []
}
94 changes: 40 additions & 54 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,24 @@
const path = require('path');
const webpack = require('webpack');

let SpeedMeasurePlugin;
if (process.env.MEASURE) {
SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
}

module.exports = {
stories: ['../jsapp/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
// NB:
// 'storybook-addon-swc' may improve build speed in the future.
// - At time of writing, the build performance gains are negated because it
// switches to a slower refresh plugin and also causes other compatibility
// issues in Storybook 6.
// - Testing with React 16.14.0 and Storybook 7 (beta) seemed to perform
// well.
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'
// NB:
// 'storybook-addon-swc' may improve build speed in the future.
// - At time of writing, the build performance gains are negated because it
// switches to a slower refresh plugin and also causes other compatibility
// issues in Storybook 6.
// - Testing with React 16.14.0 and Storybook 7 (beta) seemed to perform
// well.
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',

framework: {
name: '@storybook/react-webpack5',
options: {}
},
typescript: {
reactDocgen: 'react-docgen-typescript-plugin',
Expand All @@ -38,33 +33,26 @@ module.exports = {
jsapp: path.join(__dirname, '../jsapp'),
js: path.join(__dirname, '../jsapp/js'),
scss: path.join(__dirname, '../jsapp/scss'),
utils: path.join(__dirname, '../jsapp/js/utils'),
},
},
utils: path.join(__dirname, '../jsapp/js/utils')
}
}
});
config.module.rules.push(
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.module\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
},
sourceMap: true,
},
config.module.rules.push({
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.module\.scss$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
},
'sass-loader',
],
}
);
sourceMap: true
}
}, 'sass-loader']
});

// Build speed improvements
applySpeedTweaks(config);
Expand All @@ -76,16 +64,18 @@ module.exports = {
}
return config;
},
managerWebpack: async (config) => {
managerWebpack: async config => {
// Build speed improvements
applySpeedTweaks(config);

if (process.env.MEASURE) {
const smp = new SpeedMeasurePlugin();
return smp.wrap(config);
}
return config;
},
docs: {
autodocs: true
}
Comment on lines +76 to +78
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the autodocs! They might need some work to get fully functional, though. KoboPrompt and KoboModal don't close and obscure the docs. KoboDropdown and KoboSelect also clip outside of the doc view's bounds when expanded, but the docs are still accessible and the story displays fine on the Primary tab so that's probably not worth spending much energy on.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A migration added this. I could go either way on it. Could disable it or just ignore the defects for now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went back and forth about it, and I think the immediate benefit for frontend devs from having code examples outweighs having some wonky Storybook bits, so I'm approving. If you don't mind, could you create an issue/task to update the docs pages?

};

/// Apply some customizations to the config, intended to decrease build time
Expand All @@ -95,18 +85,14 @@ function applySpeedTweaks(config) {
// that relies on filesystem case-insensitivity in file imports.
// - We can let CI detect this instead, or use ESLint.
// 'import/no-unresolved': [2, { caseSensitive: true }]
config.plugins = config.plugins.filter(
(plugin) => plugin.constructor.name !== 'CaseSensitivePathsPlugin'
);
config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'CaseSensitivePathsPlugin');

// Use swc to make the Terser step faster
if (config.mode === 'production') {
const TerserPlugin = require('terser-webpack-plugin');
config.optimization.minimizer = [
new TerserPlugin({
minify: TerserPlugin.swcMinify,
terserOptions: {},
}),
];
config.optimization.minimizer = [new TerserPlugin({
minify: TerserPlugin.swcMinify,
terserOptions: {}
})];
}
}
}