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 = {
extends: '../../eslintrc.js.base.json',
extends: ['../../eslintrc.js.base.json', 'plugin:storybook/recommended'],
overrides: [
{
files: ['*.ts', '*.tsx'],

View File

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

View File

@ -1,24 +1,36 @@
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 = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
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: {
backgrounds: false,
},
},
'@storybook/addon-interactions',
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-interactions'),
],
framework: {
name: '@storybook/react-webpack5',
name: getAbsolutePath('@storybook/react-webpack5'),
options: {},
},
docs: {
autodocs: 'tag',
},
staticDirs: ['../fonts'],
};
export default config;

View File

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

View File

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

File diff suppressed because it is too large Load Diff