Skip to content

Commit

Permalink
Upgrade to latest storybook and chromatic (#2944)
Browse files Browse the repository at this point in the history
  • Loading branch information
carbonrobot authored Nov 1, 2024
1 parent 6df868f commit 29fd241
Show file tree
Hide file tree
Showing 7 changed files with 1,405 additions and 2,993 deletions.
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ module.exports = {
"plugin:react-hooks/recommended",
"plugin:eslint-comments/recommended",
"prettier",
"plugin:storybook/recommended",
],
rules: {
"eslint-comments/disable-enable-pair": "off",
Expand Down
109 changes: 40 additions & 69 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,69 +1,40 @@
import type { StorybookConfig } from "@storybook/react-webpack5";

/* globals __dirname:false */
const path = require("path");
const glob = require("glob");
const ROOT = path.resolve(__dirname, "..");
const PKGS = path.resolve(ROOT, "packages");
const STORIES = path.resolve(ROOT, "stories");

const wrapForPnp = (packageName) =>
path.dirname(require.resolve(path.join(packageName, "package.json")));

const config: StorybookConfig = {
webpackFinal: async (config) => {
// Read all the victory packages and alias.
glob.sync(path.join(PKGS, "victory*/package.json")).forEach((pkgPath) => {
const key = path.dirname(path.relative(PKGS, pkgPath));
if (config?.resolve?.alias) {
config.resolve.alias[key] = path.resolve(path.dirname(pkgPath));
}
});

return config;
},

addons: [
"@storybook/addon-essentials",
{
name: "@storybook/addon-storysource",
options: {
rule: {
test: [/\.stories\.(jsx?|tsx?)$/],
include: [STORIES],
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
],

// Use glob to locate the stories, because it ignores our circular dependencies.
stories: glob.sync("../**/*.stories.@(js|jsx|ts|tsx)", {
cwd: __dirname,
}),

framework: {
name: wrapForPnp("@storybook/react-webpack5"),
options: {
builder: {
useSWC: true,
},
},
},

typescript: {
// typescript compilation check is disabled until we upgrade the babel version
// which is required for the latest version of storybook to do typechecking
// https://github.com/FormidableLabs/victory/issues/2746
check: false,
checkOptions: {
typescript: {
configFile: path.join(__dirname, "../tsconfig.base.json"),
},
},
},
};

export default config;
import type { StorybookConfig } from "@storybook/react-webpack5";

/* globals __dirname:false */
const path = require("path");
const ROOT = path.resolve(__dirname, "..");
const STORIES = path.resolve(ROOT, "stories");

const wrapForPnp = (packageName) =>
path.dirname(require.resolve(path.join(packageName, "package.json")));

const config: StorybookConfig = {
addons: [
"@storybook/addon-essentials",
{
name: "@storybook/addon-storysource",
options: {
rule: {
test: [/\.stories\.(jsx?|tsx?)$/],
include: [STORIES],
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
wrapForPnp("@storybook/addon-webpack5-compiler-swc"),
"@chromatic-com/storybook",
],

stories: ["../stories/**/*.stories.tsx"],

framework: {
name: wrapForPnp("@storybook/react-webpack5"),
options: {
builder: {},
},
},
};

export default config;
18 changes: 10 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,12 @@
"@babel/preset-react": "7.23.3",
"@babel/preset-typescript": "7.23.3",
"@changesets/cli": "^2.24.1",
"@storybook/addon-essentials": "^7.6.10",
"@storybook/addon-storysource": "^7.6.10",
"@storybook/react": "^7.6.7",
"@storybook/react-webpack5": "^7.6.7",
"@chromatic-com/storybook": "^3.2.2",
"@storybook/addon-essentials": "^8.4.1",
"@storybook/addon-storysource": "^8.4.1",
"@storybook/addon-webpack5-compiler-swc": "1.0.5",
"@storybook/react": "^8.4.1",
"@storybook/react-webpack5": "^8.4.1",
"@svitejs/changesets-changelog-github-compact": "^0.1.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
Expand All @@ -54,8 +56,8 @@
"babel-plugin-lodash": "3.3.4",
"babel-plugin-module-resolver": "5.0.0",
"babel-preset-react-native": "4.0.1",
"chromatic": "^6.7.1",
"concurrently": "^7.3.0",
"chromatic": "^11.16.3",
"concurrently": "^9.0.1",
"cpx2": "^4.2.0",
"cross-env": "^7.0.3",
"css-loader": "^7.1.2",
Expand All @@ -69,7 +71,7 @@
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.0.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-storybook": "^0.10.2",
"fork-ts-checker-webpack-plugin": "^8.0.0",
"fs-extra": "^10.0.0",
"glob": "8.0.3",
Expand All @@ -96,7 +98,7 @@
"sass": "^1.80.3",
"sass-loader": "^16.0.2",
"seedrandom": "^3.0.5",
"storybook": "^7.6.7",
"storybook": "^8.4.1",
"style-loader": "^4.0.0",
"styled-components": "^5.3.5",
"ts-jest": "^29.1.2",
Expand Down
Loading

0 comments on commit 29fd241

Please sign in to comment.