@storybook/cli 6.5.0-beta.0 → 6.5.0-beta.3
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/dist/cjs/automigrate/fixes/builder-vite.js +2 -2
- package/dist/cjs/automigrate/fixes/eslint-plugin.js +3 -3
- package/dist/cjs/automigrate/fixes/mainjsFramework.js +2 -2
- package/dist/cjs/automigrate/fixes/webpack5.js +2 -2
- package/dist/cjs/detect.js +14 -2
- package/dist/cjs/frameworks/html/js/Header.js +2 -0
- package/dist/cjs/frameworks/html/js/Header.stories.js +8 -1
- package/dist/cjs/frameworks/html/js/Page.js +29 -2
- package/dist/cjs/frameworks/html/js/Page.stories.js +12 -13
- package/dist/cjs/frameworks/html/ts/Header.stories.ts +5 -0
- package/dist/cjs/frameworks/html/ts/Header.ts +3 -1
- package/dist/cjs/frameworks/html/ts/Page.stories.ts +12 -14
- package/dist/cjs/frameworks/html/ts/Page.ts +32 -8
- package/dist/cjs/frameworks/vue/Header.stories.js +7 -1
- package/dist/cjs/frameworks/vue/Header.vue +1 -0
- package/dist/cjs/frameworks/vue/Page.stories.js +15 -13
- package/dist/cjs/frameworks/vue/Page.vue +7 -7
- package/dist/cjs/generate.js +5 -0
- package/dist/cjs/generators/ANGULAR/index.js +1 -1
- package/dist/cjs/generators/AURELIA/index.js +1 -1
- package/dist/cjs/generators/EMBER/index.js +1 -1
- package/dist/cjs/generators/HTML/index.js +1 -1
- package/dist/cjs/generators/METEOR/index.js +1 -1
- package/dist/cjs/generators/MITHRIL/index.js +1 -1
- package/dist/cjs/generators/PREACT/index.js +1 -1
- package/dist/cjs/generators/RAX/index.js +1 -1
- package/dist/cjs/generators/RIOT/index.js +1 -1
- package/dist/cjs/generators/SERVER/index.js +1 -1
- package/dist/cjs/generators/SFC_VUE/index.js +1 -1
- package/dist/cjs/generators/VUE/index.js +1 -1
- package/dist/cjs/generators/VUE3/index.js +1 -1
- package/dist/cjs/generators/WEBPACK_REACT/index.js +1 -1
- package/dist/cjs/generators/baseGenerator.js +1 -1
- package/dist/cjs/initiate.js +17 -10
- package/dist/cjs/js-package-manager/JsPackageManager.js +6 -6
- package/dist/cjs/js-package-manager/PackageJson.js +5 -1
- package/dist/cjs/js-package-manager/PackageJsonHelper.js +1 -1
- package/dist/cjs/upgrade.js +24 -8
- package/dist/cjs/versions.js +57 -56
- package/dist/esm/automigrate/fixes/builder-vite.js +2 -2
- package/dist/esm/automigrate/fixes/eslint-plugin.js +3 -3
- package/dist/esm/automigrate/fixes/mainjsFramework.js +2 -2
- package/dist/esm/automigrate/fixes/webpack5.js +2 -2
- package/dist/esm/detect.js +14 -2
- package/dist/esm/frameworks/html/js/Header.js +2 -0
- package/dist/esm/frameworks/html/js/Header.stories.js +8 -1
- package/dist/esm/frameworks/html/js/Page.js +29 -2
- package/dist/esm/frameworks/html/js/Page.stories.js +12 -13
- package/dist/esm/frameworks/html/ts/Header.stories.ts +5 -0
- package/dist/esm/frameworks/html/ts/Header.ts +3 -1
- package/dist/esm/frameworks/html/ts/Page.stories.ts +12 -14
- package/dist/esm/frameworks/html/ts/Page.ts +32 -8
- package/dist/esm/frameworks/vue/Header.stories.js +7 -1
- package/dist/esm/frameworks/vue/Header.vue +1 -0
- package/dist/esm/frameworks/vue/Page.stories.js +15 -13
- package/dist/esm/frameworks/vue/Page.vue +7 -7
- package/dist/esm/generate.js +5 -0
- package/dist/esm/generators/ANGULAR/index.js +1 -1
- package/dist/esm/generators/AURELIA/index.js +1 -1
- package/dist/esm/generators/EMBER/index.js +1 -1
- package/dist/esm/generators/HTML/index.js +1 -1
- package/dist/esm/generators/METEOR/index.js +1 -1
- package/dist/esm/generators/MITHRIL/index.js +1 -1
- package/dist/esm/generators/PREACT/index.js +1 -1
- package/dist/esm/generators/RAX/index.js +1 -1
- package/dist/esm/generators/RIOT/index.js +1 -1
- package/dist/esm/generators/SERVER/index.js +1 -1
- package/dist/esm/generators/SFC_VUE/index.js +1 -1
- package/dist/esm/generators/VUE/index.js +1 -1
- package/dist/esm/generators/VUE3/index.js +1 -1
- package/dist/esm/generators/WEBPACK_REACT/index.js +1 -1
- package/dist/esm/generators/baseGenerator.js +1 -1
- package/dist/esm/initiate.js +17 -10
- package/dist/esm/js-package-manager/JsPackageManager.js +6 -6
- package/dist/esm/js-package-manager/PackageJson.js +5 -1
- package/dist/esm/js-package-manager/PackageJsonHelper.js +1 -1
- package/dist/esm/upgrade.js +24 -8
- package/dist/esm/versions.js +57 -56
- package/dist/modern/automigrate/fixes/builder-vite.js +2 -2
- package/dist/modern/automigrate/fixes/eslint-plugin.js +3 -3
- package/dist/modern/automigrate/fixes/mainjsFramework.js +2 -2
- package/dist/modern/automigrate/fixes/webpack5.js +2 -2
- package/dist/modern/detect.js +14 -2
- package/dist/modern/frameworks/html/js/Header.js +2 -0
- package/dist/modern/frameworks/html/js/Header.stories.js +8 -1
- package/dist/modern/frameworks/html/js/Page.js +29 -2
- package/dist/modern/frameworks/html/js/Page.stories.js +12 -13
- package/dist/modern/frameworks/vue/Header.stories.js +7 -1
- package/dist/modern/frameworks/vue/Header.vue +1 -0
- package/dist/modern/frameworks/vue/Page.stories.js +15 -13
- package/dist/modern/frameworks/vue/Page.vue +7 -7
- package/dist/modern/generate.js +5 -0
- package/dist/modern/generators/ANGULAR/index.js +1 -1
- package/dist/modern/generators/AURELIA/index.js +1 -1
- package/dist/modern/generators/EMBER/index.js +1 -1
- package/dist/modern/generators/HTML/index.js +1 -1
- package/dist/modern/generators/METEOR/index.js +1 -1
- package/dist/modern/generators/MITHRIL/index.js +1 -1
- package/dist/modern/generators/PREACT/index.js +1 -1
- package/dist/modern/generators/RAX/index.js +1 -1
- package/dist/modern/generators/RIOT/index.js +1 -1
- package/dist/modern/generators/SERVER/index.js +1 -1
- package/dist/modern/generators/SFC_VUE/index.js +1 -1
- package/dist/modern/generators/VUE/index.js +1 -1
- package/dist/modern/generators/VUE3/index.js +1 -1
- package/dist/modern/generators/WEBPACK_REACT/index.js +1 -1
- package/dist/modern/generators/baseGenerator.js +1 -1
- package/dist/modern/initiate.js +17 -10
- package/dist/modern/js-package-manager/JsPackageManager.js +6 -6
- package/dist/modern/js-package-manager/PackageJson.js +5 -1
- package/dist/modern/js-package-manager/PackageJsonHelper.js +1 -1
- package/dist/modern/upgrade.js +24 -8
- package/dist/modern/versions.js +57 -56
- package/dist/ts3.4/detect.d.ts +1 -1
- package/dist/ts3.4/initiate.d.ts +1 -0
- package/dist/ts3.4/js-package-manager/PackageJson.d.ts +2 -8
- package/dist/ts3.4/js-package-manager/PackageJsonHelper.d.ts +2 -2
- package/dist/ts3.4/upgrade.d.ts +2 -1
- package/dist/ts3.4/versions.d.ts +1 -0
- package/dist/ts3.9/detect.d.ts +1 -1
- package/dist/ts3.9/initiate.d.ts +1 -0
- package/dist/ts3.9/js-package-manager/PackageJson.d.ts +2 -8
- package/dist/ts3.9/js-package-manager/PackageJsonHelper.d.ts +2 -2
- package/dist/ts3.9/upgrade.d.ts +2 -1
- package/dist/ts3.9/versions.d.ts +1 -0
- package/package.json +8 -7
- package/dist/cjs/automigrate/helpers/getStorybookConfiguration.js +0 -27
- package/dist/cjs/automigrate/helpers/getStorybookInfo.js +0 -94
- package/dist/esm/automigrate/helpers/getStorybookConfiguration.js +0 -27
- package/dist/esm/automigrate/helpers/getStorybookInfo.js +0 -94
- package/dist/modern/automigrate/helpers/getStorybookConfiguration.js +0 -27
- package/dist/modern/automigrate/helpers/getStorybookInfo.js +0 -94
- package/dist/ts3.4/automigrate/helpers/getStorybookConfiguration.d.ts +0 -1
- package/dist/ts3.4/automigrate/helpers/getStorybookInfo.d.ts +0 -11
- package/dist/ts3.9/automigrate/helpers/getStorybookConfiguration.d.ts +0 -1
- package/dist/ts3.9/automigrate/helpers/getStorybookInfo.d.ts +0 -11
|
@@ -13,7 +13,7 @@ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
|
13
13
|
|
|
14
14
|
var _csfTools = require("@storybook/csf-tools");
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _coreCommon = require("@storybook/core-common");
|
|
17
17
|
|
|
18
18
|
var _jsPackageManager = require("../../js-package-manager");
|
|
19
19
|
|
|
@@ -39,7 +39,7 @@ const builderVite = {
|
|
|
39
39
|
const packageJson = packageManager.retrievePackageJson();
|
|
40
40
|
const {
|
|
41
41
|
mainConfig
|
|
42
|
-
} = (0,
|
|
42
|
+
} = (0, _coreCommon.getStorybookInfo)(packageJson);
|
|
43
43
|
|
|
44
44
|
if (!mainConfig) {
|
|
45
45
|
logger.warn('Unable to find storybook main.js config');
|
|
@@ -13,9 +13,9 @@ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
|
13
13
|
|
|
14
14
|
var _csfTools = require("@storybook/csf-tools");
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _coreCommon = require("@storybook/core-common");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _getEslintInfo = require("../helpers/getEslintInfo");
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
@@ -45,7 +45,7 @@ const eslintPlugin = {
|
|
|
45
45
|
return null;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
const config = (0,
|
|
48
|
+
const config = (0, _coreCommon.getStorybookInfo)(packageJson);
|
|
49
49
|
const {
|
|
50
50
|
mainConfig
|
|
51
51
|
} = config;
|
|
@@ -15,7 +15,7 @@ var _semver = _interopRequireDefault(require("@storybook/semver"));
|
|
|
15
15
|
|
|
16
16
|
var _csfTools = require("@storybook/csf-tools");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _coreCommon = require("@storybook/core-common");
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
@@ -33,7 +33,7 @@ const mainjsFramework = {
|
|
|
33
33
|
mainConfig,
|
|
34
34
|
framework,
|
|
35
35
|
version: storybookVersion
|
|
36
|
-
} = (0,
|
|
36
|
+
} = (0, _coreCommon.getStorybookInfo)(packageJson);
|
|
37
37
|
|
|
38
38
|
if (!mainConfig) {
|
|
39
39
|
logger.warn('Unable to find storybook main.js config, skipping');
|
|
@@ -15,7 +15,7 @@ var _semver = _interopRequireDefault(require("@storybook/semver"));
|
|
|
15
15
|
|
|
16
16
|
var _csfTools = require("@storybook/csf-tools");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _coreCommon = require("@storybook/core-common");
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
@@ -40,7 +40,7 @@ const webpack5 = {
|
|
|
40
40
|
const {
|
|
41
41
|
mainConfig,
|
|
42
42
|
version: storybookVersion
|
|
43
|
-
} = (0,
|
|
43
|
+
} = (0, _coreCommon.getStorybookInfo)(packageJson);
|
|
44
44
|
const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
|
|
45
45
|
|
|
46
46
|
if (!storybookCoerced) {
|
package/dist/cjs/detect.js
CHANGED
|
@@ -168,7 +168,13 @@ function isStorybookInstalled(dependencies, force) {
|
|
|
168
168
|
|
|
169
169
|
function detectLanguage() {
|
|
170
170
|
let language = _project_types.SupportedLanguage.JAVASCRIPT;
|
|
171
|
-
|
|
171
|
+
let packageJson;
|
|
172
|
+
|
|
173
|
+
try {
|
|
174
|
+
packageJson = (0, _jsPackageManager.readPackageJson)();
|
|
175
|
+
} catch (err) {//
|
|
176
|
+
}
|
|
177
|
+
|
|
172
178
|
const bowerJson = (0, _helpers.getBowerJson)();
|
|
173
179
|
|
|
174
180
|
if (!packageJson && !bowerJson) {
|
|
@@ -183,7 +189,13 @@ function detectLanguage() {
|
|
|
183
189
|
}
|
|
184
190
|
|
|
185
191
|
function detect(options = {}) {
|
|
186
|
-
|
|
192
|
+
let packageJson;
|
|
193
|
+
|
|
194
|
+
try {
|
|
195
|
+
packageJson = (0, _jsPackageManager.readPackageJson)();
|
|
196
|
+
} catch (err) {//
|
|
197
|
+
}
|
|
198
|
+
|
|
187
199
|
const bowerJson = (0, _helpers.getBowerJson)();
|
|
188
200
|
|
|
189
201
|
if (!packageJson && !bowerJson) {
|
|
@@ -26,6 +26,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
|
|
|
26
26
|
|
|
27
27
|
const account = document.createElement('div');
|
|
28
28
|
if (user) {
|
|
29
|
+
const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
|
|
30
|
+
account.innerHTML = welcomeMessage;
|
|
29
31
|
account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
|
|
30
32
|
} else {
|
|
31
33
|
account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));
|
|
@@ -2,6 +2,11 @@ import { createHeader } from './Header';
|
|
|
2
2
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Example/Header',
|
|
5
|
+
parameters: {
|
|
6
|
+
// More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
|
|
7
|
+
layout: 'fullscreen',
|
|
8
|
+
},
|
|
9
|
+
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
|
5
10
|
argTypes: {
|
|
6
11
|
onLogin: { action: 'onLogin' },
|
|
7
12
|
onLogout: { action: 'onLogout' },
|
|
@@ -13,7 +18,9 @@ const Template = (args) => createHeader(args);
|
|
|
13
18
|
|
|
14
19
|
export const LoggedIn = Template.bind({});
|
|
15
20
|
LoggedIn.args = {
|
|
16
|
-
user: {
|
|
21
|
+
user: {
|
|
22
|
+
name: 'Jane Doe',
|
|
23
|
+
},
|
|
17
24
|
};
|
|
18
25
|
|
|
19
26
|
export const LoggedOut = Template.bind({});
|
|
@@ -1,11 +1,38 @@
|
|
|
1
1
|
import './page.css';
|
|
2
2
|
import { createHeader } from './Header';
|
|
3
3
|
|
|
4
|
-
export const createPage = (
|
|
4
|
+
export const createPage = () => {
|
|
5
5
|
const article = document.createElement('article');
|
|
6
|
+
let user = null;
|
|
7
|
+
let header = null;
|
|
6
8
|
|
|
7
|
-
const
|
|
9
|
+
const rerenderHeader = () => {
|
|
10
|
+
const wrapper = document.getElementsByTagName('article')[0];
|
|
11
|
+
wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const onLogin = () => {
|
|
15
|
+
user = { name: 'Jane Doe' };
|
|
16
|
+
rerenderHeader();
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const onLogout = () => {
|
|
20
|
+
user = null;
|
|
21
|
+
rerenderHeader();
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const onCreateAccount = () => {
|
|
25
|
+
user = { name: 'Jane Doe' };
|
|
26
|
+
rerenderHeader();
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const createHeaderElement = () => {
|
|
30
|
+
return createHeader({ onLogin, onLogout, onCreateAccount, user });
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
header = createHeaderElement();
|
|
8
34
|
article.appendChild(header);
|
|
35
|
+
|
|
9
36
|
const section = `
|
|
10
37
|
<section>
|
|
11
38
|
<h2>Pages in Storybook</h2>
|
|
@@ -1,24 +1,23 @@
|
|
|
1
|
+
import { within, userEvent } from '@storybook/testing-library';
|
|
1
2
|
import { createPage } from './Page';
|
|
2
|
-
import * as HeaderStories from './Header.stories';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Example/Page',
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
onCreateAccount: { action: 'onCreateAccount' },
|
|
6
|
+
parameters: {
|
|
7
|
+
// More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
|
|
8
|
+
layout: 'fullscreen',
|
|
10
9
|
},
|
|
11
10
|
};
|
|
12
11
|
|
|
13
|
-
const Template = (
|
|
12
|
+
const Template = () => createPage();
|
|
13
|
+
|
|
14
|
+
export const LoggedOut = Template.bind({});
|
|
14
15
|
|
|
15
16
|
export const LoggedIn = Template.bind({});
|
|
16
|
-
LoggedIn.args = {
|
|
17
|
-
// More on composing args: https://storybook.js.org/docs/html/writing-stories/args#args-composition
|
|
18
|
-
...HeaderStories.LoggedIn.args,
|
|
19
|
-
};
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
|
|
19
|
+
LoggedIn.play = async ({ canvasElement }) => {
|
|
20
|
+
const canvas = within(canvasElement);
|
|
21
|
+
const loginButton = await canvas.getByRole('button', { name: /Log in/i });
|
|
22
|
+
await userEvent.click(loginButton);
|
|
24
23
|
};
|
|
@@ -3,6 +3,11 @@ import { createHeader, HeaderProps } from './Header';
|
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Example/Header',
|
|
6
|
+
parameters: {
|
|
7
|
+
// More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
|
|
8
|
+
layout: 'fullscreen',
|
|
9
|
+
},
|
|
10
|
+
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
|
6
11
|
argTypes: {
|
|
7
12
|
onLogin: { action: 'onLogin' },
|
|
8
13
|
onLogout: { action: 'onLogout' },
|
|
@@ -2,7 +2,7 @@ import './header.css';
|
|
|
2
2
|
import { createButton } from './Button';
|
|
3
3
|
|
|
4
4
|
export interface HeaderProps {
|
|
5
|
-
user?: {};
|
|
5
|
+
user?: { name: string };
|
|
6
6
|
onLogin: () => void;
|
|
7
7
|
onLogout: () => void;
|
|
8
8
|
onCreateAccount: () => void;
|
|
@@ -33,6 +33,8 @@ export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: Heade
|
|
|
33
33
|
|
|
34
34
|
const account = document.createElement('div');
|
|
35
35
|
if (user) {
|
|
36
|
+
const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
|
|
37
|
+
account.innerHTML = welcomeMessage;
|
|
36
38
|
account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
|
|
37
39
|
} else {
|
|
38
40
|
account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));
|
|
@@ -1,26 +1,24 @@
|
|
|
1
|
+
import { within, userEvent } from '@storybook/testing-library';
|
|
1
2
|
import { Story, Meta } from '@storybook/html';
|
|
2
3
|
import { createPage } from './Page';
|
|
3
|
-
import * as HeaderStories from './Header.stories';
|
|
4
|
-
import { HeaderProps } from './Header';
|
|
5
4
|
|
|
6
5
|
export default {
|
|
7
6
|
title: 'Example/Page',
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
onCreateAccount: { action: 'onCreateAccount' },
|
|
7
|
+
parameters: {
|
|
8
|
+
// More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
|
|
9
|
+
layout: 'fullscreen',
|
|
12
10
|
},
|
|
13
11
|
} as Meta;
|
|
14
12
|
|
|
15
|
-
const Template: Story
|
|
13
|
+
const Template: Story = () => createPage();
|
|
14
|
+
|
|
15
|
+
export const LoggedOut = Template.bind({});
|
|
16
16
|
|
|
17
17
|
export const LoggedIn = Template.bind({});
|
|
18
|
-
LoggedIn.args = {
|
|
19
|
-
// More on composing args: https://storybook.js.org/docs/html/writing-stories/args#args-composition
|
|
20
|
-
...HeaderStories.LoggedIn.args,
|
|
21
|
-
};
|
|
22
18
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
|
|
20
|
+
LoggedIn.play = async ({ canvasElement }) => {
|
|
21
|
+
const canvas = within(canvasElement);
|
|
22
|
+
const loginButton = await canvas.getByRole('button', { name: /Log in/i });
|
|
23
|
+
await userEvent.click(loginButton);
|
|
26
24
|
};
|
|
@@ -1,18 +1,42 @@
|
|
|
1
1
|
import './page.css';
|
|
2
2
|
import { createHeader } from './Header';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
onLogout: () => void;
|
|
8
|
-
onCreateAccount: () => void;
|
|
9
|
-
}
|
|
4
|
+
type User = {
|
|
5
|
+
name: string;
|
|
6
|
+
};
|
|
10
7
|
|
|
11
|
-
export const createPage = (
|
|
8
|
+
export const createPage = () => {
|
|
12
9
|
const article = document.createElement('article');
|
|
10
|
+
let user: User = null;
|
|
11
|
+
let header = null;
|
|
12
|
+
|
|
13
|
+
const rerenderHeader = () => {
|
|
14
|
+
const wrapper = document.getElementsByTagName('article')[0];
|
|
15
|
+
wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const onLogin = () => {
|
|
19
|
+
user = { name: 'Jane Doe' };
|
|
20
|
+
rerenderHeader();
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onLogout = () => {
|
|
24
|
+
user = null;
|
|
25
|
+
rerenderHeader();
|
|
26
|
+
};
|
|
13
27
|
|
|
14
|
-
const
|
|
28
|
+
const onCreateAccount = () => {
|
|
29
|
+
user = { name: 'Jane Doe' };
|
|
30
|
+
rerenderHeader();
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const createHeaderElement = () => {
|
|
34
|
+
return createHeader({ onLogin, onLogout, onCreateAccount, user });
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
header = createHeaderElement();
|
|
15
38
|
article.appendChild(header);
|
|
39
|
+
|
|
16
40
|
const section = `
|
|
17
41
|
<section>
|
|
18
42
|
<h2>Pages in Storybook</h2>
|
|
@@ -3,6 +3,10 @@ import MyHeader from './Header';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Example/Header',
|
|
5
5
|
component: MyHeader,
|
|
6
|
+
parameters: {
|
|
7
|
+
// More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
|
|
8
|
+
layout: 'fullscreen',
|
|
9
|
+
},
|
|
6
10
|
};
|
|
7
11
|
|
|
8
12
|
const Template = (args, { argTypes }) => ({
|
|
@@ -14,7 +18,9 @@ const Template = (args, { argTypes }) => ({
|
|
|
14
18
|
|
|
15
19
|
export const LoggedIn = Template.bind({});
|
|
16
20
|
LoggedIn.args = {
|
|
17
|
-
user: {
|
|
21
|
+
user: {
|
|
22
|
+
name: 'Jane Doe',
|
|
23
|
+
},
|
|
18
24
|
};
|
|
19
25
|
|
|
20
26
|
export const LoggedOut = Template.bind({});
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
<h1>Acme</h1>
|
|
22
22
|
</div>
|
|
23
23
|
<div>
|
|
24
|
+
<span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
|
|
24
25
|
<my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
|
|
25
26
|
<my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
|
|
26
27
|
<my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
|
|
@@ -1,25 +1,27 @@
|
|
|
1
|
+
import { within, userEvent } from '@storybook/testing-library';
|
|
2
|
+
|
|
1
3
|
import MyPage from './Page';
|
|
2
|
-
import * as HeaderStories from './Header.stories';
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Example/Page',
|
|
6
7
|
component: MyPage,
|
|
8
|
+
parameters: {
|
|
9
|
+
// More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
|
|
10
|
+
layout: 'fullscreen',
|
|
11
|
+
},
|
|
7
12
|
};
|
|
8
13
|
|
|
9
|
-
const Template = (
|
|
10
|
-
props: Object.keys(argTypes),
|
|
14
|
+
const Template = () => ({
|
|
11
15
|
components: { MyPage },
|
|
12
|
-
template:
|
|
13
|
-
'<my-page :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
|
|
16
|
+
template: '<my-page />',
|
|
14
17
|
});
|
|
15
18
|
|
|
16
|
-
export const LoggedIn = Template.bind({});
|
|
17
|
-
LoggedIn.args = {
|
|
18
|
-
// More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
|
|
19
|
-
...HeaderStories.LoggedIn.args,
|
|
20
|
-
};
|
|
21
|
-
|
|
22
19
|
export const LoggedOut = Template.bind({});
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
|
|
21
|
+
// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
|
|
22
|
+
export const LoggedIn = Template.bind({});
|
|
23
|
+
LoggedIn.play = async ({ canvasElement }) => {
|
|
24
|
+
const canvas = within(canvasElement);
|
|
25
|
+
const loginButton = await canvas.getByRole('button', { name: /Log in/i });
|
|
26
|
+
await userEvent.click(loginButton);
|
|
25
27
|
};
|
|
@@ -67,21 +67,21 @@ export default {
|
|
|
67
67
|
|
|
68
68
|
components: { MyHeader },
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
70
|
+
data() {
|
|
71
|
+
return {
|
|
72
|
+
user: null,
|
|
73
|
+
};
|
|
74
74
|
},
|
|
75
75
|
|
|
76
76
|
methods: {
|
|
77
77
|
onLogin() {
|
|
78
|
-
this
|
|
78
|
+
this.user = { name: 'Jane Doe' };
|
|
79
79
|
},
|
|
80
80
|
onLogout() {
|
|
81
|
-
this
|
|
81
|
+
this.user = null;
|
|
82
82
|
},
|
|
83
83
|
onCreateAccount() {
|
|
84
|
-
this
|
|
84
|
+
this.user = { name: 'Jane Doe' };
|
|
85
85
|
},
|
|
86
86
|
},
|
|
87
87
|
};
|
package/dist/cjs/generate.js
CHANGED
|
@@ -39,6 +39,11 @@ const pkg = (0, _readPkgUp.sync)({
|
|
|
39
39
|
}).packageJson;
|
|
40
40
|
const logger = console;
|
|
41
41
|
|
|
42
|
+
_commander.default.option('--disable-telemetry', 'disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
|
|
43
|
+
process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false');
|
|
44
|
+
|
|
45
|
+
_commander.default.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
|
|
46
|
+
|
|
42
47
|
_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
|
|
43
48
|
|
|
44
49
|
_commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
|
|
@@ -55,7 +55,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
55
55
|
const updatedOptions = isWebpack5 ? Object.assign({}, options, {
|
|
56
56
|
builder: _project_types.CoreBuilder.Webpack5
|
|
57
57
|
}) : options;
|
|
58
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
|
|
58
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
|
|
59
59
|
extraPackages: ['@compodoc/compodoc'],
|
|
60
60
|
addScripts: false
|
|
61
61
|
});
|
|
@@ -33,7 +33,7 @@ function addStorybookExcludeGlobToTsConfig() {
|
|
|
33
33
|
|
|
34
34
|
const generator = async (packageManager, npmOptions, options) => {
|
|
35
35
|
addStorybookExcludeGlobToTsConfig();
|
|
36
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
|
|
36
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
|
|
37
37
|
extraPackages: ['aurelia']
|
|
38
38
|
});
|
|
39
39
|
(0, _helpers.copyTemplate)(__dirname);
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'ember', {
|
|
14
14
|
extraPackages: [// babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
|
|
15
15
|
'babel-plugin-ember-modules-api-polyfill', // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
|
|
16
16
|
'babel-plugin-htmlbars-inline-precompile'],
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'html');
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
var _default = generator;
|
|
@@ -16,7 +16,7 @@ var _baseGenerator = require("../baseGenerator");
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
18
|
const generator = async (packageManager, npmOptions, options) => {
|
|
19
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
|
|
19
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react', {
|
|
20
20
|
extraPackages: ['react', 'react-dom', '@babel/preset-env', '@babel/preset-react'],
|
|
21
21
|
staticDir: 'dist'
|
|
22
22
|
}); // create or update .babelrc
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'mithril');
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
var _default = generator;
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'preact', {
|
|
14
14
|
extraPackages: ['core-js']
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -23,7 +23,7 @@ const generator = async (packageManager, npmOptions, options) => {
|
|
|
23
23
|
packageJson.dependencies['rax-text'] = packageJson.dependencies['rax-text'] || raxVersion;
|
|
24
24
|
packageJson.dependencies['rax-view'] = packageJson.dependencies['rax-view'] || raxVersion;
|
|
25
25
|
(0, _jsPackageManager.writePackageJson)(packageJson);
|
|
26
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
|
|
26
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'rax', {
|
|
27
27
|
extraPackages: ['rax']
|
|
28
28
|
});
|
|
29
29
|
};
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'riot', {
|
|
14
14
|
extraPackages: ['riot-tag-loader']
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -12,7 +12,7 @@ var _baseGenerator = require("../baseGenerator");
|
|
|
12
12
|
var _helpers = require("../../helpers");
|
|
13
13
|
|
|
14
14
|
const generator = async (packageManager, npmOptions, options) => {
|
|
15
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
|
|
15
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
|
|
16
16
|
extensions: ['json']
|
|
17
17
|
});
|
|
18
18
|
(0, _helpers.copyTemplate)(__dirname);
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue');
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
var _default = generator;
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue', {
|
|
14
14
|
extraPackages: ['vue-loader@^15.7.0']
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'vue3', {
|
|
14
14
|
extraPackages: ['vue-loader@^16.0.0']
|
|
15
15
|
});
|
|
16
16
|
};
|
|
@@ -10,7 +10,7 @@ require("core-js/modules/es.promise.js");
|
|
|
10
10
|
var _baseGenerator = require("../baseGenerator");
|
|
11
11
|
|
|
12
12
|
const generator = async (packageManager, npmOptions, options) => {
|
|
13
|
-
(0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
|
|
13
|
+
await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'react');
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
var _default = generator;
|
|
@@ -56,7 +56,7 @@ const builderDependencies = builder => {
|
|
|
56
56
|
|
|
57
57
|
const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
|
|
58
58
|
|
|
59
|
-
const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue3'].includes(framework);
|
|
59
|
+
const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(framework);
|
|
60
60
|
|
|
61
61
|
async function baseGenerator(packageManager, npmOptions, {
|
|
62
62
|
language,
|