Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 49052f5

Browse files
ilteooodScriptedAlchemy
andauthored
chore: upgrade to storybook v8 (#4246)
* chore: upgrade to storybook v8 * async startup --------- Co-authored-by: ScriptedAlchemy <zackaryjackson@bytedance.com>
1 parent b4f78b4 commit 49052f5

File tree

36 files changed

+60343
-51639
lines changed

36 files changed

+60343
-51639
lines changed

‎nextjs-dynamic-ssr/pnpm-lock.yaml‎

Lines changed: 1425 additions & 1154 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nextjs-ssr/pnpm-lock.yaml‎

Lines changed: 1417 additions & 1148 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-lock.yaml‎

Lines changed: 39998 additions & 35690 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-manifest-example/pnpm-lock.yaml‎

Lines changed: 1592 additions & 1294 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-storybook/host/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
*storybook.log
Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
1-
const moduleFederationConfig = require('../modulefederation.config.js');
1+
import { dirname, join } from 'path';
2+
import moduleFederationConfig from '../modulefederation.config';
23

3-
const storybookConfig = {
4-
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
4+
/**
5+
* This function is used to resolve the absolute path of a package.
6+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
7+
*/
8+
function getAbsolutePath(value) {
9+
return dirname(require.resolve(join(value, 'package.json')));
10+
}
11+
12+
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
13+
const config = {
14+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
515
addons: [
6-
'@storybook/addon-links',
7-
'@storybook/addon-essentials',
8-
'@storybook/addon-interactions',
9-
'@storybook/preset-create-react-app',
16+
getAbsolutePath('@storybook/preset-create-react-app'),
17+
getAbsolutePath('@storybook/addon-onboarding'),
18+
getAbsolutePath('@storybook/addon-links'),
19+
getAbsolutePath('@storybook/addon-essentials'),
20+
getAbsolutePath('@chromatic-com/storybook'),
21+
getAbsolutePath('@storybook/addon-interactions'),
1022
{
1123
name: '@module-federation/storybook-addon',
1224
options: {
1325
moduleFederationConfig,
1426
},
15-
},
27+
}
1628
],
17-
framework: '@storybook/react',
18-
core: {
19-
builder: '@storybook/builder-webpack5',
29+
framework: {
30+
name: getAbsolutePath('@storybook/react-webpack5'),
31+
options: {},
2032
},
33+
staticDirs: ['../public'],
2134
};
22-
23-
module.exports = storybookConfig;
35+
export default config;

‎react-storybook/host/package.json‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@
1212
"build": "node ./scripts/build.js",
1313
"test": "react-scripts test",
1414
"eject": "react-scripts eject",
15-
"storybook": "start-storybook -p 6006 -s public",
16-
"build-storybook": "build-storybook -s public"
15+
"storybook": "storybook dev -p 6006",
16+
"build-storybook": "storybook build"
1717
},
1818
"eslintConfig": {
1919
"extends": [
20-
"react-app"
20+
"react-app",
21+
"plugin:storybook/recommended"
2122
],
2223
"overrides": [
2324
{
@@ -43,21 +44,23 @@
4344
]
4445
},
4546
"devDependencies": {
46-
"@module-federation/storybook-addon": "0.2.0",
47+
"@chromatic-com/storybook": "^1.6.1",
48+
"@module-federation/storybook-addon": "2.0.1",
4749
"@module-federation/utilities": "3.0.32",
48-
"webpack-virtual-modules": "0.6.2",
49-
"@storybook/addon-actions": "6.5.16",
50-
"@storybook/addon-essentials": "6.5.16",
51-
"@storybook/addon-interactions": "6.5.16",
52-
"@storybook/addon-links": "6.5.16",
53-
"@storybook/builder-webpack5": "6.5.16",
54-
"@storybook/manager-webpack5": "6.5.16",
55-
"@storybook/node-logger": "6.5.16",
56-
"@storybook/preset-create-react-app": "4.1.2",
57-
"@storybook/react": "6.5.16",
58-
"@storybook/testing-library": "0.2.2",
50+
"@storybook/addon-essentials": "^8.2.6",
51+
"@storybook/addon-interactions": "^8.2.6",
52+
"@storybook/addon-links": "^8.2.6",
53+
"@storybook/addon-onboarding": "^8.2.6",
54+
"@storybook/blocks": "^8.2.6",
55+
"@storybook/preset-create-react-app": "^8.2.6",
56+
"@storybook/react": "^8.2.6",
57+
"@storybook/react-webpack5": "^8.2.6",
58+
"@storybook/test": "^8.2.6",
5959
"babel-plugin-named-exports-order": "0.0.2",
60+
"eslint-plugin-storybook": "^0.8.0",
6061
"prop-types": "15.8.1",
61-
"webpack": "5.92.1"
62+
"storybook": "^8.2.6",
63+
"webpack": "5.92.1",
64+
"webpack-virtual-modules": "0.6.2"
6265
}
6366
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import './button.css';
4+
5+
/**
6+
* Primary UI component for user interaction
7+
*/
8+
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
9+
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
10+
return (
11+
<button
12+
type="button"
13+
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
14+
style={backgroundColor && { backgroundColor }}
15+
{...props}
16+
>
17+
{label}
18+
</button>
19+
);
20+
};
21+
22+
Button.propTypes = {
23+
/**
24+
* Is this the principal call to action on the page?
25+
*/
26+
primary: PropTypes.bool,
27+
/**
28+
* What background color to use
29+
*/
30+
backgroundColor: PropTypes.string,
31+
/**
32+
* How large should the button be?
33+
*/
34+
size: PropTypes.oneOf(['small', 'medium', 'large']),
35+
/**
36+
* Button contents
37+
*/
38+
label: PropTypes.string.isRequired,
39+
/**
40+
* Optional click handler
41+
*/
42+
onClick: PropTypes.func,
43+
};
44+
45+
Button.defaultProps = {
46+
backgroundColor: null,
47+
primary: false,
48+
size: 'medium',
49+
onClick: undefined,
50+
};
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { fn } from '@storybook/test';
2+
import { Button } from './Button';
3+
4+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5+
export default {
6+
title: 'Example/Button',
7+
component: Button,
8+
parameters: {
9+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
10+
layout: 'centered',
11+
},
12+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13+
tags: ['autodocs'],
14+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
15+
argTypes: {
16+
backgroundColor: { control: 'color' },
17+
},
18+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
19+
args: { onClick: fn() },
20+
};
21+
22+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
23+
export const Primary = {
24+
args: {
25+
primary: true,
26+
label: 'Button',
27+
},
28+
};
29+
30+
export const Secondary = {
31+
args: {
32+
label: 'Button',
33+
},
34+
};
35+
36+
export const Large = {
37+
args: {
38+
size: 'large',
39+
label: 'Button',
40+
},
41+
};
42+
43+
export const Small = {
44+
args: {
45+
size: 'small',
46+
label: 'Button',
47+
},
48+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /