@storybook/cli 6.5.0-alpha.6 → 6.5.0-alpha.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +1 -0
- package/dist/cjs/add.js +3 -3
- package/dist/cjs/automigrate/fixes/builder-vite.js +122 -0
- package/dist/cjs/automigrate/fixes/index.js +3 -1
- package/dist/cjs/automigrate/types.js +5 -1
- package/dist/cjs/babel-config.js +1 -1
- package/dist/cjs/detect.js +53 -2
- package/dist/cjs/extract.js +7 -2
- package/dist/cjs/frameworks/angular/Header.stories.ts +8 -3
- package/dist/cjs/frameworks/angular/Page.stories.ts +12 -10
- package/dist/cjs/frameworks/angular/header.component.ts +30 -19
- package/dist/cjs/frameworks/angular/page.component.ts +13 -27
- package/dist/cjs/frameworks/common/header.css +6 -0
- package/dist/cjs/frameworks/react/js/Header.jsx +6 -1
- package/dist/cjs/frameworks/react/js/Header.stories.jsx +7 -1
- package/dist/cjs/frameworks/react/js/Page.jsx +61 -63
- package/dist/cjs/frameworks/react/js/Page.stories.jsx +12 -9
- package/dist/cjs/frameworks/react/ts/Header.stories.tsx +7 -1
- package/dist/cjs/frameworks/react/ts/Header.tsx +11 -2
- package/dist/cjs/frameworks/react/ts/Page.stories.tsx +12 -9
- package/dist/cjs/frameworks/react/ts/Page.tsx +66 -60
- package/dist/cjs/frameworks/svelte/Button.stories.js +51 -0
- package/dist/cjs/frameworks/svelte/Header.stories.js +29 -0
- package/dist/cjs/frameworks/svelte/Page.stories.js +29 -0
- package/dist/cjs/frameworks/web-components/js/Page.js +2 -2
- package/dist/cjs/frameworks/web-components/ts/Page.ts +2 -2
- package/dist/cjs/generators/ANGULAR/angular-helpers.js +5 -5
- package/dist/cjs/generators/ANGULAR/index.js +1 -1
- package/dist/cjs/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
- package/dist/cjs/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
- package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
- package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
- package/dist/cjs/generators/REACT_SCRIPTS/index.js +9 -1
- package/dist/cjs/generators/SVELTE/index.js +0 -1
- package/dist/cjs/generators/baseGenerator.js +38 -4
- package/dist/cjs/generators/configure.js +3 -1
- package/dist/cjs/helpers.js +9 -8
- package/dist/cjs/initiate.js +27 -24
- package/dist/cjs/js-package-manager/JsPackageManager.js +2 -2
- package/dist/cjs/project_types.js +2 -1
- package/dist/cjs/repro-generators/configs.js +51 -8
- package/dist/cjs/repro-generators/scripts.js +46 -14
- package/dist/cjs/repro.js +3 -2
- package/dist/cjs/typings.d.ts +3 -0
- package/dist/cjs/upgrade.js +4 -2
- package/dist/cjs/versions.js +66 -0
- package/dist/cjs/window.d.js +5 -1
- package/dist/esm/add.js +3 -3
- package/dist/esm/automigrate/fixes/builder-vite.js +122 -0
- package/dist/esm/automigrate/fixes/index.js +3 -1
- package/dist/esm/automigrate/types.js +5 -1
- package/dist/esm/babel-config.js +1 -1
- package/dist/esm/detect.js +53 -2
- package/dist/esm/extract.js +7 -2
- package/dist/esm/frameworks/angular/Header.stories.ts +8 -3
- package/dist/esm/frameworks/angular/Page.stories.ts +12 -10
- package/dist/esm/frameworks/angular/header.component.ts +30 -19
- package/dist/esm/frameworks/angular/page.component.ts +13 -27
- package/dist/esm/frameworks/common/header.css +6 -0
- package/dist/esm/frameworks/react/js/Header.jsx +6 -1
- package/dist/esm/frameworks/react/js/Header.stories.jsx +7 -1
- package/dist/esm/frameworks/react/js/Page.jsx +61 -63
- package/dist/esm/frameworks/react/js/Page.stories.jsx +12 -9
- package/dist/esm/frameworks/react/ts/Header.stories.tsx +7 -1
- package/dist/esm/frameworks/react/ts/Header.tsx +11 -2
- package/dist/esm/frameworks/react/ts/Page.stories.tsx +12 -9
- package/dist/esm/frameworks/react/ts/Page.tsx +66 -60
- package/dist/esm/frameworks/svelte/Button.stories.js +51 -0
- package/dist/esm/frameworks/svelte/Header.stories.js +29 -0
- package/dist/esm/frameworks/svelte/Page.stories.js +29 -0
- package/dist/esm/frameworks/web-components/js/Page.js +2 -2
- package/dist/esm/frameworks/web-components/ts/Page.ts +2 -2
- package/dist/esm/generators/ANGULAR/angular-helpers.js +5 -5
- package/dist/esm/generators/ANGULAR/index.js +1 -1
- package/dist/esm/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
- package/dist/esm/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
- package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
- package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
- package/dist/esm/generators/REACT_SCRIPTS/index.js +9 -1
- package/dist/esm/generators/SVELTE/index.js +0 -1
- package/dist/esm/generators/baseGenerator.js +38 -4
- package/dist/esm/generators/configure.js +3 -1
- package/dist/esm/helpers.js +9 -8
- package/dist/esm/initiate.js +27 -24
- package/dist/esm/js-package-manager/JsPackageManager.js +2 -2
- package/dist/esm/project_types.js +2 -1
- package/dist/esm/repro-generators/configs.js +51 -8
- package/dist/esm/repro-generators/scripts.js +46 -14
- package/dist/esm/repro.js +3 -2
- package/dist/esm/typings.d.ts +3 -0
- package/dist/esm/upgrade.js +4 -2
- package/dist/esm/versions.js +66 -0
- package/dist/esm/window.d.js +5 -1
- package/dist/modern/add.js +3 -3
- package/dist/modern/automigrate/fixes/builder-vite.js +122 -0
- package/dist/modern/automigrate/fixes/index.js +3 -1
- package/dist/modern/automigrate/types.js +5 -1
- package/dist/modern/babel-config.js +1 -1
- package/dist/modern/detect.js +53 -2
- package/dist/modern/extract.js +7 -2
- package/dist/modern/frameworks/common/header.css +6 -0
- package/dist/modern/frameworks/react/js/Header.jsx +6 -1
- package/dist/modern/frameworks/react/js/Header.stories.jsx +7 -1
- package/dist/modern/frameworks/react/js/Page.jsx +61 -63
- package/dist/modern/frameworks/react/js/Page.stories.jsx +12 -9
- package/dist/modern/frameworks/svelte/Button.stories.js +51 -0
- package/dist/modern/frameworks/svelte/Header.stories.js +29 -0
- package/dist/modern/frameworks/svelte/Page.stories.js +29 -0
- package/dist/modern/frameworks/web-components/js/Page.js +2 -2
- package/dist/modern/generators/ANGULAR/angular-helpers.js +5 -5
- package/dist/modern/generators/ANGULAR/index.js +1 -1
- package/dist/modern/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
- package/dist/modern/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
- package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
- package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
- package/dist/modern/generators/REACT_SCRIPTS/index.js +9 -1
- package/dist/modern/generators/SVELTE/index.js +0 -1
- package/dist/modern/generators/baseGenerator.js +38 -4
- package/dist/modern/generators/configure.js +3 -1
- package/dist/modern/helpers.js +9 -8
- package/dist/modern/initiate.js +27 -24
- package/dist/modern/js-package-manager/JsPackageManager.js +2 -2
- package/dist/modern/project_types.js +2 -1
- package/dist/modern/repro-generators/configs.js +51 -8
- package/dist/modern/repro-generators/scripts.js +46 -14
- package/dist/modern/repro.js +3 -2
- package/dist/modern/typings.d.ts +3 -0
- package/dist/modern/upgrade.js +4 -2
- package/dist/modern/versions.js +66 -0
- package/dist/modern/window.d.js +5 -1
- package/dist/ts3.4/automigrate/fixes/builder-vite.d.ts +19 -0
- package/dist/ts3.4/detect.d.ts +9 -2
- package/dist/ts3.4/project_types.d.ts +2 -1
- package/dist/ts3.4/repro-generators/configs.d.ts +8 -0
- package/dist/ts3.4/versions.d.ts +59 -0
- package/dist/ts3.9/automigrate/fixes/builder-vite.d.ts +19 -0
- package/dist/ts3.9/detect.d.ts +9 -2
- package/dist/ts3.9/project_types.d.ts +2 -1
- package/dist/ts3.9/repro-generators/configs.d.ts +9 -1
- package/dist/ts3.9/versions.d.ts +59 -0
- package/package.json +11 -12
- package/dist/cjs/frameworks/svelte/Button.stories.svelte +0 -57
- package/dist/cjs/frameworks/svelte/Header.stories.svelte +0 -32
- package/dist/cjs/frameworks/svelte/Page.stories.svelte +0 -32
- package/dist/cjs/typings.d.js +0 -1
- package/dist/cjs/versions.json +0 -59
- package/dist/esm/frameworks/svelte/Button.stories.svelte +0 -57
- package/dist/esm/frameworks/svelte/Header.stories.svelte +0 -32
- package/dist/esm/frameworks/svelte/Page.stories.svelte +0 -32
- package/dist/esm/typings.d.js +0 -1
- package/dist/esm/versions.json +0 -59
- package/dist/modern/frameworks/svelte/Button.stories.svelte +0 -57
- package/dist/modern/frameworks/svelte/Header.stories.svelte +0 -32
- package/dist/modern/frameworks/svelte/Page.stories.svelte +0 -32
- package/dist/modern/typings.d.js +0 -1
- package/dist/modern/versions.json +0 -59
|
@@ -6,13 +6,19 @@ import { Header } from './Header';
|
|
|
6
6
|
export default {
|
|
7
7
|
title: 'Example/Header',
|
|
8
8
|
component: Header,
|
|
9
|
+
parameters: {
|
|
10
|
+
// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
|
|
11
|
+
layout: 'fullscreen',
|
|
12
|
+
},
|
|
9
13
|
} as ComponentMeta<typeof Header>;
|
|
10
14
|
|
|
11
15
|
const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
|
|
12
16
|
|
|
13
17
|
export const LoggedIn = Template.bind({});
|
|
14
18
|
LoggedIn.args = {
|
|
15
|
-
user: {
|
|
19
|
+
user: {
|
|
20
|
+
name: 'Jane Doe',
|
|
21
|
+
},
|
|
16
22
|
};
|
|
17
23
|
|
|
18
24
|
export const LoggedOut = Template.bind({});
|
|
@@ -3,8 +3,12 @@ import React from 'react';
|
|
|
3
3
|
import { Button } from './Button';
|
|
4
4
|
import './header.css';
|
|
5
5
|
|
|
6
|
+
type User = {
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
9
|
+
|
|
6
10
|
interface HeaderProps {
|
|
7
|
-
user?:
|
|
11
|
+
user?: User;
|
|
8
12
|
onLogin: () => void;
|
|
9
13
|
onLogout: () => void;
|
|
10
14
|
onCreateAccount: () => void;
|
|
@@ -34,7 +38,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
|
|
|
34
38
|
</div>
|
|
35
39
|
<div>
|
|
36
40
|
{user ? (
|
|
37
|
-
|
|
41
|
+
<>
|
|
42
|
+
<span className="welcome">
|
|
43
|
+
Welcome, <b>{user.name}</b>!
|
|
44
|
+
</span>
|
|
45
|
+
<Button size="small" onClick={onLogout} label="Log out" />
|
|
46
|
+
</>
|
|
38
47
|
) : (
|
|
39
48
|
<>
|
|
40
49
|
<Button size="small" onClick={onLogin} label="Log in" />
|
|
@@ -1,23 +1,26 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
-
|
|
3
|
+
import { within, userEvent } from '@storybook/testing-library';
|
|
4
4
|
import { Page } from './Page';
|
|
5
|
-
import * as HeaderStories from './Header.stories';
|
|
6
5
|
|
|
7
6
|
export default {
|
|
8
7
|
title: 'Example/Page',
|
|
9
8
|
component: Page,
|
|
9
|
+
parameters: {
|
|
10
|
+
// More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
|
|
11
|
+
layout: 'fullscreen',
|
|
12
|
+
},
|
|
10
13
|
} as ComponentMeta<typeof Page>;
|
|
11
14
|
|
|
12
15
|
const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
|
|
13
16
|
|
|
17
|
+
export const LoggedOut = Template.bind({});
|
|
18
|
+
|
|
14
19
|
export const LoggedIn = Template.bind({});
|
|
15
|
-
LoggedIn.args = {
|
|
16
|
-
// More on composing args: https://storybook.js.org/docs/react/writing-stories/args#args-composition
|
|
17
|
-
...HeaderStories.LoggedIn.args,
|
|
18
|
-
};
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
|
|
22
|
+
LoggedIn.play = async ({ canvasElement }) => {
|
|
23
|
+
const canvas = within(canvasElement);
|
|
24
|
+
const loginButton = await canvas.getByRole('button', { name: /Log in/i });
|
|
25
|
+
await userEvent.click(loginButton);
|
|
23
26
|
};
|
|
@@ -3,65 +3,71 @@ import React from 'react';
|
|
|
3
3
|
import { Header } from './Header';
|
|
4
4
|
import './page.css';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
onLogout: () => void;
|
|
10
|
-
onCreateAccount: () => void;
|
|
11
|
-
}
|
|
6
|
+
type User = {
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
12
9
|
|
|
13
|
-
export const Page = (
|
|
14
|
-
<
|
|
15
|
-
<Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
|
|
10
|
+
export const Page: React.VFC = () => {
|
|
11
|
+
const [user, setUser] = React.useState<User>();
|
|
16
12
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
13
|
+
return (
|
|
14
|
+
<article>
|
|
15
|
+
<Header
|
|
16
|
+
user={user}
|
|
17
|
+
onLogin={() => setUser({ name: 'Jane Doe' })}
|
|
18
|
+
onLogout={() => setUser(undefined)}
|
|
19
|
+
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<section>
|
|
23
|
+
<h2>Pages in Storybook</h2>
|
|
24
|
+
<p>
|
|
25
|
+
We recommend building UIs with a{' '}
|
|
26
|
+
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
|
27
|
+
<strong>component-driven</strong>
|
|
28
|
+
</a>{' '}
|
|
29
|
+
process starting with atomic components and ending with pages.
|
|
30
|
+
</p>
|
|
31
|
+
<p>
|
|
32
|
+
Render pages with mock data. This makes it easy to build and review page states without
|
|
33
|
+
needing to navigate to them in your app. Here are some handy patterns for managing page
|
|
34
|
+
data in Storybook:
|
|
35
|
+
</p>
|
|
36
|
+
<ul>
|
|
37
|
+
<li>
|
|
38
|
+
Use a higher-level connected component. Storybook helps you compose such data from the
|
|
39
|
+
"args" of child component stories
|
|
40
|
+
</li>
|
|
41
|
+
<li>
|
|
42
|
+
Assemble data in the page component from your services. You can mock these services out
|
|
43
|
+
using Storybook.
|
|
44
|
+
</li>
|
|
45
|
+
</ul>
|
|
46
|
+
<p>
|
|
47
|
+
Get a guided tutorial on component-driven development at{' '}
|
|
48
|
+
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
|
|
49
|
+
Storybook tutorials
|
|
50
|
+
</a>
|
|
51
|
+
. Read more in the{' '}
|
|
52
|
+
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
|
|
53
|
+
docs
|
|
54
|
+
</a>
|
|
55
|
+
.
|
|
56
|
+
</p>
|
|
57
|
+
<div className="tip-wrapper">
|
|
58
|
+
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
|
|
59
|
+
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
|
60
|
+
<g fill="none" fillRule="evenodd">
|
|
61
|
+
<path
|
|
62
|
+
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
|
|
63
|
+
id="a"
|
|
64
|
+
fill="#999"
|
|
65
|
+
/>
|
|
66
|
+
</g>
|
|
67
|
+
</svg>
|
|
68
|
+
Viewports addon in the toolbar
|
|
69
|
+
</div>
|
|
70
|
+
</section>
|
|
71
|
+
</article>
|
|
72
|
+
);
|
|
73
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import Button from './Button.svelte';
|
|
2
|
+
|
|
3
|
+
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
4
|
+
// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Example/Button',
|
|
7
|
+
component: Button,
|
|
8
|
+
argTypes: {
|
|
9
|
+
backgroundColor: { control: 'color' },
|
|
10
|
+
label: { control: 'text' },
|
|
11
|
+
onClick: { action: 'onClick' },
|
|
12
|
+
primary: { control: 'boolean' },
|
|
13
|
+
size: {
|
|
14
|
+
control: { type: 'select' },
|
|
15
|
+
options: ['small', 'medium', 'large'],
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
|
|
21
|
+
const Template = (args) => ({
|
|
22
|
+
Component: Button,
|
|
23
|
+
props: args,
|
|
24
|
+
on: {
|
|
25
|
+
click: args.onClick,
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
|
|
30
|
+
export const Primary = Template.bind({});
|
|
31
|
+
Primary.args = {
|
|
32
|
+
primary: true,
|
|
33
|
+
label: 'Button',
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export const Secondary = Template.bind({});
|
|
37
|
+
Secondary.args = {
|
|
38
|
+
label: 'Button',
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const Large = Template.bind({});
|
|
42
|
+
Large.args = {
|
|
43
|
+
size: 'large',
|
|
44
|
+
label: 'Button',
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const Small = Template.bind({});
|
|
48
|
+
Small.args = {
|
|
49
|
+
size: 'small',
|
|
50
|
+
label: 'Button',
|
|
51
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import Header from './Header.svelte';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Example/Header',
|
|
5
|
+
component: Header,
|
|
6
|
+
argTypes: {
|
|
7
|
+
onLogin: { action: 'onLogin' },
|
|
8
|
+
onLogout: { action: 'onLogout' },
|
|
9
|
+
onCreateAccount: { action: 'onCreateAccount' },
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const Template = (args) => ({
|
|
14
|
+
Component: Header,
|
|
15
|
+
props: args,
|
|
16
|
+
on: {
|
|
17
|
+
login: args.onLogin,
|
|
18
|
+
logout: args.onLogout,
|
|
19
|
+
createAccount: args.onCreateAccount,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export const LoggedIn = Template.bind({});
|
|
24
|
+
LoggedIn.args = {
|
|
25
|
+
user: {},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const LoggedOut = Template.bind({});
|
|
29
|
+
LoggedOut.args = {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import Page from './Page.svelte';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Example/Page',
|
|
5
|
+
component: Page,
|
|
6
|
+
argTypes: {
|
|
7
|
+
onLogin: { action: 'onLogin' },
|
|
8
|
+
onLogout: { action: 'onLogout' },
|
|
9
|
+
onCreateAccount: { action: 'onCreateAccount' },
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const Template = (args) => ({
|
|
14
|
+
Component: Page,
|
|
15
|
+
props: args,
|
|
16
|
+
on: {
|
|
17
|
+
login: args.onLogin,
|
|
18
|
+
logout: args.onLogout,
|
|
19
|
+
createAccount: args.onCreateAccount,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export const LoggedIn = Template.bind({});
|
|
24
|
+
LoggedIn.args = {
|
|
25
|
+
user: {},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const LoggedOut = Template.bind({});
|
|
29
|
+
LoggedOut.args = {};
|
|
@@ -43,8 +43,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
|
|
|
43
43
|
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
|
|
44
44
|
.
|
|
45
45
|
</p>
|
|
46
|
-
<div
|
|
47
|
-
<span
|
|
46
|
+
<div class="tip-wrapper">
|
|
47
|
+
<span class="tip">Tip</span> Adjust the width of the canvas with the
|
|
48
48
|
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
|
49
49
|
<g fill="none" fillRule="evenodd">
|
|
50
50
|
<path
|
|
@@ -50,8 +50,8 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
|
|
|
50
50
|
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
|
|
51
51
|
.
|
|
52
52
|
</p>
|
|
53
|
-
<div
|
|
54
|
-
<span
|
|
53
|
+
<div class="tip-wrapper">
|
|
54
|
+
<span class="tip">Tip</span> Adjust the width of the canvas with the
|
|
55
55
|
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
|
|
56
56
|
<g fill="none" fillRule="evenodd">
|
|
57
57
|
<path
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getAngularAppTsConfigPath = getAngularAppTsConfigPath;
|
|
7
|
-
exports.getAngularAppTsConfigJson = getAngularAppTsConfigJson;
|
|
8
6
|
exports.editStorybookTsConfig = editStorybookTsConfig;
|
|
9
|
-
exports.
|
|
7
|
+
exports.getAngularAppTsConfigJson = getAngularAppTsConfigJson;
|
|
8
|
+
exports.getAngularAppTsConfigPath = getAngularAppTsConfigPath;
|
|
10
9
|
exports.getBaseTsConfigName = getBaseTsConfigName;
|
|
10
|
+
exports.isDefaultProjectSet = isDefaultProjectSet;
|
|
11
11
|
|
|
12
12
|
require("core-js/modules/es.promise.js");
|
|
13
13
|
|
|
@@ -19,9 +19,9 @@ var _fsExtra = require("fs-extra");
|
|
|
19
19
|
|
|
20
20
|
var _helpers = require("../../helpers");
|
|
21
21
|
|
|
22
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
23
|
|
|
24
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
25
|
|
|
26
26
|
function getAngularAppTsConfigPath() {
|
|
27
27
|
const angularJson = (0, _helpers.readFileAsJson)('angular.json', true);
|
|
@@ -56,7 +56,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
56
56
|
builder: _project_types.CoreBuilder.Webpack5
|
|
57
57
|
}) : options;
|
|
58
58
|
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
|
|
59
|
-
extraPackages: ['@compodoc/compodoc'
|
|
59
|
+
extraPackages: ['@compodoc/compodoc'],
|
|
60
60
|
addScripts: false
|
|
61
61
|
});
|
|
62
62
|
(0, _helpers.copyTemplate)(__dirname);
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "%SET_DURING_SB_INIT%",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
-
"types": [
|
|
4
|
+
"types": [
|
|
5
|
+
"node"
|
|
6
|
+
],
|
|
7
|
+
"allowSyntheticDefaultImports": true
|
|
5
8
|
},
|
|
6
|
-
"exclude": [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
"exclude": [
|
|
10
|
+
"../src/test.ts",
|
|
11
|
+
"../src/**/*.spec.ts",
|
|
12
|
+
"../projects/**/*.spec.ts"
|
|
13
|
+
],
|
|
14
|
+
"include": [
|
|
15
|
+
"../src/**/*",
|
|
16
|
+
"../projects/**/*"
|
|
17
|
+
],
|
|
18
|
+
"files": [
|
|
19
|
+
"./typings.d.ts"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "%SET_DURING_SB_INIT%",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
-
"types": [
|
|
4
|
+
"types": [
|
|
5
|
+
"node"
|
|
6
|
+
]
|
|
5
7
|
},
|
|
6
|
-
"exclude": [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
"exclude": [
|
|
9
|
+
"../src/test.ts",
|
|
10
|
+
"../src/**/*.spec.ts",
|
|
11
|
+
"../projects/**/*.spec.ts"
|
|
12
|
+
],
|
|
13
|
+
"include": [
|
|
14
|
+
"../src/**/*",
|
|
15
|
+
"../projects/**/*"
|
|
16
|
+
],
|
|
17
|
+
"files": [
|
|
18
|
+
"./typings.d.ts"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '@storybook/addon-actions/
|
|
2
|
-
import '@storybook/addon-links/
|
|
3
|
-
import '@storybook/addon-knobs/
|
|
1
|
+
import '@storybook/addon-actions/manager';
|
|
2
|
+
import '@storybook/addon-links/manager';
|
|
3
|
+
import '@storybook/addon-knobs/manager';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import '@storybook/addon-ondevice-actions/
|
|
2
|
-
import '@storybook/addon-ondevice-knobs/
|
|
1
|
+
import '@storybook/addon-ondevice-actions/manager';
|
|
2
|
+
import '@storybook/addon-ondevice-knobs/manager';
|
|
@@ -44,7 +44,15 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
44
44
|
}) : options; // `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
|
|
45
45
|
|
|
46
46
|
const extraPackages = ['@storybook/node-logger'];
|
|
47
|
-
|
|
47
|
+
|
|
48
|
+
if (isCra5) {
|
|
49
|
+
extraPackages.push('webpack'); // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
|
|
50
|
+
|
|
51
|
+
extraPackages.push('babel-plugin-named-exports-order'); // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
|
|
52
|
+
|
|
53
|
+
extraPackages.push('prop-types');
|
|
54
|
+
} // preset v3 is compat with older versions of CRA, otherwise let version float
|
|
55
|
+
|
|
48
56
|
|
|
49
57
|
const extraAddons = [`@storybook/preset-create-react-app${isCra5 ? '' : '@3'}`];
|
|
50
58
|
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'react', {
|
|
@@ -53,7 +53,6 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
53
53
|
|
|
54
54
|
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'svelte', {
|
|
55
55
|
extraPackages: ['svelte', 'svelte-loader'],
|
|
56
|
-
extraAddons: ['@storybook/addon-svelte-csf'],
|
|
57
56
|
extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
|
|
58
57
|
extraMain,
|
|
59
58
|
commonJs
|
|
@@ -9,6 +9,8 @@ require("core-js/modules/es.promise.js");
|
|
|
9
9
|
|
|
10
10
|
var _fsExtra = _interopRequireDefault(require("fs-extra"));
|
|
11
11
|
|
|
12
|
+
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
13
|
+
|
|
12
14
|
var _coreCommon = require("@storybook/core-common");
|
|
13
15
|
|
|
14
16
|
var _project_types = require("../project_types");
|
|
@@ -39,11 +41,14 @@ const defaultOptions = {
|
|
|
39
41
|
const builderDependencies = builder => {
|
|
40
42
|
switch (builder) {
|
|
41
43
|
case _project_types.CoreBuilder.Webpack4:
|
|
42
|
-
return [];
|
|
44
|
+
return ['@storybook/builder-webpack4', '@storybook/manager-webpack4'];
|
|
43
45
|
|
|
44
46
|
case _project_types.CoreBuilder.Webpack5:
|
|
45
47
|
return ['@storybook/builder-webpack5', '@storybook/manager-webpack5'];
|
|
46
48
|
|
|
49
|
+
case _project_types.CoreBuilder.Vite:
|
|
50
|
+
return ['@storybook/builder-vite'];
|
|
51
|
+
|
|
47
52
|
default:
|
|
48
53
|
return [builder];
|
|
49
54
|
}
|
|
@@ -51,6 +56,8 @@ const builderDependencies = builder => {
|
|
|
51
56
|
|
|
52
57
|
const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
|
|
53
58
|
|
|
59
|
+
const hasInteractiveStories = framework => ['react', 'angular'].includes(framework);
|
|
60
|
+
|
|
54
61
|
async function baseGenerator(packageManager, npmOptions, {
|
|
55
62
|
language,
|
|
56
63
|
builder
|
|
@@ -71,7 +78,13 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
71
78
|
const addons = ['@storybook/addon-links', '@storybook/addon-essentials']; // added to package.json
|
|
72
79
|
|
|
73
80
|
const addonPackages = [...addons, '@storybook/addon-actions'];
|
|
74
|
-
|
|
81
|
+
|
|
82
|
+
if (hasInteractiveStories(framework)) {
|
|
83
|
+
addons.push('@storybook/addon-interactions');
|
|
84
|
+
addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react@1.x.x'] : [];
|
|
75
88
|
const files = await _fsExtra.default.readdir(process.cwd());
|
|
76
89
|
const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
|
|
77
90
|
const packageJson = packageManager.retrievePackageJson();
|
|
@@ -79,11 +92,20 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
79
92
|
const frameworkPackage = `@storybook/${framework}`;
|
|
80
93
|
const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
|
|
81
94
|
const versionedPackages = await packageManager.getVersionedPackages(...packages);
|
|
95
|
+
const coreBuilders = [_project_types.CoreBuilder.Webpack4, _project_types.CoreBuilder.Webpack5, _project_types.CoreBuilder.Vite];
|
|
96
|
+
const expandedBuilder = coreBuilders.includes(builder) ? `@storybook/builder-${builder}` : builder;
|
|
82
97
|
const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
|
|
83
98
|
core: {
|
|
84
|
-
builder
|
|
99
|
+
builder: expandedBuilder
|
|
85
100
|
}
|
|
86
|
-
}, extraMain) : extraMain;
|
|
101
|
+
}, extraMain) : extraMain; // Default vite builder to storyStoreV7
|
|
102
|
+
|
|
103
|
+
if (expandedBuilder === '@storybook/builder-vite') {
|
|
104
|
+
mainOptions.features = Object.assign({}, mainOptions.features, {
|
|
105
|
+
storyStoreV7: true
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
|
|
87
109
|
(0, _configure.configure)(framework, Object.assign({
|
|
88
110
|
framework: frameworkPackage,
|
|
89
111
|
addons: [...addons, ...stripVersions(extraAddons)],
|
|
@@ -93,6 +115,18 @@ async function baseGenerator(packageManager, npmOptions, {
|
|
|
93
115
|
|
|
94
116
|
if (addComponents) {
|
|
95
117
|
(0, _helpers.copyComponents)(framework, language);
|
|
118
|
+
} // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
if (expandedBuilder === '@storybook/builder-vite') {
|
|
122
|
+
const previewHead = (0, _tsDedent.default)`
|
|
123
|
+
<script>
|
|
124
|
+
window.global = window;
|
|
125
|
+
</script>
|
|
126
|
+
`;
|
|
127
|
+
await _fsExtra.default.writeFile(`.storybook/preview-head.html`, previewHead, {
|
|
128
|
+
encoding: 'utf8'
|
|
129
|
+
});
|
|
96
130
|
}
|
|
97
131
|
|
|
98
132
|
const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
|
|
@@ -9,6 +9,8 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
|
|
|
9
9
|
|
|
10
10
|
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
11
11
|
|
|
12
|
+
const _excluded = ["addons", "extensions", "commonJs"];
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -19,7 +21,7 @@ function configureMain(_ref) {
|
|
|
19
21
|
extensions = ['js', 'jsx', 'ts', 'tsx'],
|
|
20
22
|
commonJs = false
|
|
21
23
|
} = _ref,
|
|
22
|
-
custom = _objectWithoutPropertiesLoose(_ref,
|
|
24
|
+
custom = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
23
25
|
|
|
24
26
|
const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
|
|
25
27
|
const config = Object.assign({
|
package/dist/esm/helpers.js
CHANGED
|
@@ -3,16 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getBowerJson = getBowerJson;
|
|
7
|
-
exports.readFileAsJson = readFileAsJson;
|
|
8
|
-
exports.paddedLog = paddedLog;
|
|
9
|
-
exports.getChars = getChars;
|
|
10
|
-
exports.codeLog = codeLog;
|
|
11
|
-
exports.getBabelDependencies = getBabelDependencies;
|
|
12
6
|
exports.addToDevDependenciesIfNotPresent = addToDevDependenciesIfNotPresent;
|
|
13
|
-
exports.
|
|
7
|
+
exports.codeLog = codeLog;
|
|
8
|
+
exports.commandLog = void 0;
|
|
14
9
|
exports.copyComponents = copyComponents;
|
|
15
|
-
exports.
|
|
10
|
+
exports.copyTemplate = copyTemplate;
|
|
11
|
+
exports.getBabelDependencies = getBabelDependencies;
|
|
12
|
+
exports.getBowerJson = getBowerJson;
|
|
13
|
+
exports.getChars = getChars;
|
|
14
|
+
exports.paddedLog = paddedLog;
|
|
15
|
+
exports.readFileAsJson = readFileAsJson;
|
|
16
|
+
exports.writeFileAsJson = void 0;
|
|
16
17
|
|
|
17
18
|
require("core-js/modules/es.promise.js");
|
|
18
19
|
|