Upgrade to Storybook 7 (#1647)

* Remove storybook

* Install storybook

* Fix

* Format

* Update

* Disable background
This commit is contained in:
Nathan Bierema 2024-04-01 16:48:58 -04:00 committed by GitHub
parent b56a3aa0dc
commit 629419bd1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 687 additions and 1466 deletions

View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
extends: '../../eslintrc.js.base.json', extends: ['../../eslintrc.js.base.json', 'plugin:storybook/recommended'],
overrides: [ overrides: [
{ {
files: ['*.ts', '*.tsx'], files: ['*.ts', '*.tsx'],

View File

@ -1 +1,2 @@
storybook-static storybook-static
*storybook.log

View File

@ -1,24 +1,36 @@
import type { StorybookConfig } from '@storybook/react-webpack5'; import type { StorybookConfig } from '@storybook/react-webpack5';
import { join, dirname } from 'path';
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = { const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [ addons: [
'@storybook/addon-links', getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-links'),
{ {
name: '@storybook/addon-essentials', name: getAbsolutePath('@storybook/addon-essentials'),
options: { options: {
backgrounds: false, backgrounds: false,
}, },
}, },
'@storybook/addon-interactions', getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
], ],
framework: { framework: {
name: '@storybook/react-webpack5', name: getAbsolutePath('@storybook/react-webpack5'),
options: {}, options: {},
}, },
docs: { docs: {
autodocs: 'tag', autodocs: 'tag',
}, },
staticDirs: ['../fonts'],
}; };
export default config; export default config;

View File

@ -18,7 +18,12 @@ const withThemeProvider = (Story, context) => (
const preview: Preview = { const preview: Preview = {
parameters: { parameters: {
actions: { argTypesRegex: '^on[A-Z].*' }, controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
}, },
globalTypes: { globalTypes: {
theme: { theme: {

View File

@ -25,8 +25,8 @@
}, },
"scripts": { "scripts": {
"start": "pnpm run storybook", "start": "pnpm run storybook",
"storybook": "storybook dev --port 6006 --static-dir ./fonts", "storybook": "storybook dev -p 6006",
"build:storybook": "storybook build --static-dir ./fonts --quiet", "build:storybook": "storybook build --quiet",
"build": "pnpm run build:lib && pnpm run build:storybook", "build": "pnpm run build:lib && pnpm run build:storybook",
"build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css", "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
"build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs", "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
@ -65,11 +65,16 @@
"@babel/preset-env": "^7.24.3", "@babel/preset-env": "^7.24.3",
"@babel/preset-react": "^7.24.1", "@babel/preset-react": "^7.24.1",
"@babel/preset-typescript": "^7.24.1", "@babel/preset-typescript": "^7.24.1",
"@storybook/addon-essentials": "^7.6.17", "@chromatic-com/storybook": "1.2.25",
"@storybook/addon-interactions": "^7.6.17", "@storybook/addon-essentials": "^8.0.5",
"@storybook/addon-links": "^7.6.17", "@storybook/addon-interactions": "^8.0.5",
"@storybook/react": "^7.6.17", "@storybook/addon-links": "^8.0.5",
"@storybook/react-webpack5": "^7.6.17", "@storybook/addon-onboarding": "^8.0.5",
"@storybook/addon-webpack5-compiler-swc": "1.0.2",
"@storybook/blocks": "^8.0.5",
"@storybook/react": "^8.0.5",
"@storybook/react-webpack5": "^8.0.5",
"@storybook/test": "^8.0.5",
"@testing-library/dom": "^9.3.4", "@testing-library/dom": "^9.3.4",
"@testing-library/react": "^14.2.2", "@testing-library/react": "^14.2.2",
"@testing-library/user-event": "^14.5.2", "@testing-library/user-event": "^14.5.2",
@ -86,6 +91,7 @@
"eslint-plugin-jest": "^27.9.0", "eslint-plugin-jest": "^27.9.0",
"eslint-plugin-react": "^7.34.1", "eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-storybook": "^0.8.0",
"jest": "^29.7.0", "jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"ncp": "^2.0.0", "ncp": "^2.0.0",
@ -93,7 +99,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-is": "^18.2.0", "react-is": "^18.2.0",
"rimraf": "^5.0.5", "rimraf": "^5.0.5",
"storybook": "^7.6.17", "storybook": "^8.0.5",
"styled-components": "^5.3.11", "styled-components": "^5.3.11",
"stylelint": "^16.3.1", "stylelint": "^16.3.1",
"stylelint-config-standard": "^36.0.0", "stylelint-config-standard": "^36.0.0",

File diff suppressed because it is too large Load Diff