@storybook/cli 6.4.18 → 6.4.21

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.
Files changed (62) hide show
  1. package/dist/cjs/automigrate/fixes/builder-vite.js +123 -0
  2. package/dist/cjs/automigrate/fixes/index.js +3 -1
  3. package/dist/cjs/extract.js +7 -2
  4. package/dist/cjs/frameworks/angular/Header.stories.ts +8 -3
  5. package/dist/cjs/frameworks/angular/Page.stories.ts +12 -10
  6. package/dist/cjs/frameworks/angular/header.component.ts +30 -19
  7. package/dist/cjs/frameworks/angular/page.component.ts +13 -27
  8. package/dist/cjs/frameworks/common/header.css +6 -0
  9. package/dist/cjs/frameworks/react/js/Header.jsx +6 -1
  10. package/dist/cjs/frameworks/react/js/Header.stories.jsx +7 -1
  11. package/dist/cjs/frameworks/react/js/Page.jsx +61 -63
  12. package/dist/cjs/frameworks/react/js/Page.stories.jsx +12 -9
  13. package/dist/cjs/frameworks/react/ts/Header.stories.tsx +7 -1
  14. package/dist/cjs/frameworks/react/ts/Header.tsx +11 -2
  15. package/dist/cjs/frameworks/react/ts/Page.stories.tsx +12 -9
  16. package/dist/cjs/frameworks/react/ts/Page.tsx +66 -60
  17. package/dist/cjs/frameworks/web-components/js/Page.js +2 -2
  18. package/dist/cjs/frameworks/web-components/ts/Page.ts +2 -2
  19. package/dist/cjs/generators/baseGenerator.js +28 -1
  20. package/dist/cjs/project_types.js +1 -0
  21. package/dist/cjs/upgrade.js +1 -1
  22. package/dist/cjs/versions.json +55 -55
  23. package/dist/esm/automigrate/fixes/builder-vite.js +123 -0
  24. package/dist/esm/automigrate/fixes/index.js +3 -1
  25. package/dist/esm/extract.js +7 -2
  26. package/dist/esm/frameworks/angular/Header.stories.ts +8 -3
  27. package/dist/esm/frameworks/angular/Page.stories.ts +12 -10
  28. package/dist/esm/frameworks/angular/header.component.ts +30 -19
  29. package/dist/esm/frameworks/angular/page.component.ts +13 -27
  30. package/dist/esm/frameworks/common/header.css +6 -0
  31. package/dist/esm/frameworks/react/js/Header.jsx +6 -1
  32. package/dist/esm/frameworks/react/js/Header.stories.jsx +7 -1
  33. package/dist/esm/frameworks/react/js/Page.jsx +61 -63
  34. package/dist/esm/frameworks/react/js/Page.stories.jsx +12 -9
  35. package/dist/esm/frameworks/react/ts/Header.stories.tsx +7 -1
  36. package/dist/esm/frameworks/react/ts/Header.tsx +11 -2
  37. package/dist/esm/frameworks/react/ts/Page.stories.tsx +12 -9
  38. package/dist/esm/frameworks/react/ts/Page.tsx +66 -60
  39. package/dist/esm/frameworks/web-components/js/Page.js +2 -2
  40. package/dist/esm/frameworks/web-components/ts/Page.ts +2 -2
  41. package/dist/esm/generators/baseGenerator.js +28 -1
  42. package/dist/esm/project_types.js +1 -0
  43. package/dist/esm/upgrade.js +1 -1
  44. package/dist/esm/versions.json +55 -55
  45. package/dist/modern/automigrate/fixes/builder-vite.js +123 -0
  46. package/dist/modern/automigrate/fixes/index.js +3 -1
  47. package/dist/modern/extract.js +7 -2
  48. package/dist/modern/frameworks/common/header.css +6 -0
  49. package/dist/modern/frameworks/react/js/Header.jsx +6 -1
  50. package/dist/modern/frameworks/react/js/Header.stories.jsx +7 -1
  51. package/dist/modern/frameworks/react/js/Page.jsx +61 -63
  52. package/dist/modern/frameworks/react/js/Page.stories.jsx +12 -9
  53. package/dist/modern/frameworks/web-components/js/Page.js +2 -2
  54. package/dist/modern/generators/baseGenerator.js +28 -1
  55. package/dist/modern/project_types.js +1 -0
  56. package/dist/modern/upgrade.js +1 -1
  57. package/dist/modern/versions.json +55 -55
  58. package/dist/ts3.4/automigrate/fixes/builder-vite.d.ts +19 -0
  59. package/dist/ts3.4/project_types.d.ts +2 -1
  60. package/dist/ts3.9/automigrate/fixes/builder-vite.d.ts +19 -0
  61. package/dist/ts3.9/project_types.d.ts +2 -1
  62. package/package.json +7 -7
@@ -1,57 +1,57 @@
1
1
  {
2
- "@storybook/addon-a11y": "6.4.18",
3
- "@storybook/addon-actions": "6.4.18",
4
- "@storybook/addon-backgrounds": "6.4.18",
5
- "@storybook/addon-controls": "6.4.18",
6
- "@storybook/addon-docs": "6.4.18",
7
- "@storybook/addon-essentials": "6.4.18",
8
- "@storybook/addon-interactions": "6.4.18",
9
- "@storybook/addon-jest": "6.4.18",
10
- "@storybook/addon-links": "6.4.18",
11
- "@storybook/addon-measure": "6.4.18",
12
- "@storybook/addon-outline": "6.4.18",
13
- "@storybook/addon-storyshots": "6.4.18",
14
- "@storybook/addon-storyshots-puppeteer": "6.4.18",
15
- "@storybook/addon-storysource": "6.4.18",
16
- "@storybook/addon-toolbars": "6.4.18",
17
- "@storybook/addon-viewport": "6.4.18",
18
- "@storybook/addons": "6.4.18",
19
- "@storybook/angular": "6.4.18",
20
- "@storybook/api": "6.4.18",
21
- "@storybook/builder-webpack4": "6.4.18",
22
- "@storybook/builder-webpack5": "6.4.18",
23
- "@storybook/channel-postmessage": "6.4.18",
24
- "@storybook/channel-websocket": "6.4.18",
25
- "@storybook/channels": "6.4.18",
26
- "@storybook/cli": "6.4.18",
27
- "@storybook/client-api": "6.4.18",
28
- "@storybook/client-logger": "6.4.18",
29
- "@storybook/codemod": "6.4.18",
30
- "@storybook/components": "6.4.18",
31
- "@storybook/core": "6.4.18",
32
- "@storybook/core-client": "6.4.18",
33
- "@storybook/core-common": "6.4.18",
34
- "@storybook/core-events": "6.4.18",
35
- "@storybook/core-server": "6.4.18",
36
- "@storybook/csf-tools": "6.4.18",
37
- "@storybook/ember": "6.4.18",
38
- "@storybook/html": "6.4.18",
39
- "@storybook/instrumenter": "6.4.18",
40
- "@storybook/manager-webpack4": "6.4.18",
41
- "@storybook/manager-webpack5": "6.4.18",
42
- "@storybook/node-logger": "6.4.18",
43
- "@storybook/postinstall": "6.4.18",
44
- "@storybook/preact": "6.4.18",
45
- "@storybook/preview-web": "6.4.18",
46
- "@storybook/react": "6.4.18",
47
- "@storybook/router": "6.4.18",
48
- "@storybook/server": "6.4.18",
49
- "@storybook/source-loader": "6.4.18",
50
- "@storybook/store": "6.4.18",
51
- "@storybook/svelte": "6.4.18",
52
- "@storybook/theming": "6.4.18",
53
- "@storybook/ui": "6.4.18",
54
- "@storybook/vue": "6.4.18",
55
- "@storybook/vue3": "6.4.18",
56
- "@storybook/web-components": "6.4.18"
2
+ "@storybook/addon-a11y": "6.4.21",
3
+ "@storybook/addon-actions": "6.4.21",
4
+ "@storybook/addon-backgrounds": "6.4.21",
5
+ "@storybook/addon-controls": "6.4.21",
6
+ "@storybook/addon-docs": "6.4.21",
7
+ "@storybook/addon-essentials": "6.4.21",
8
+ "@storybook/addon-interactions": "6.4.21",
9
+ "@storybook/addon-jest": "6.4.21",
10
+ "@storybook/addon-links": "6.4.21",
11
+ "@storybook/addon-measure": "6.4.21",
12
+ "@storybook/addon-outline": "6.4.21",
13
+ "@storybook/addon-storyshots": "6.4.21",
14
+ "@storybook/addon-storyshots-puppeteer": "6.4.21",
15
+ "@storybook/addon-storysource": "6.4.21",
16
+ "@storybook/addon-toolbars": "6.4.21",
17
+ "@storybook/addon-viewport": "6.4.21",
18
+ "@storybook/addons": "6.4.21",
19
+ "@storybook/angular": "6.4.21",
20
+ "@storybook/api": "6.4.21",
21
+ "@storybook/builder-webpack4": "6.4.21",
22
+ "@storybook/builder-webpack5": "6.4.21",
23
+ "@storybook/channel-postmessage": "6.4.21",
24
+ "@storybook/channel-websocket": "6.4.21",
25
+ "@storybook/channels": "6.4.21",
26
+ "@storybook/cli": "6.4.21",
27
+ "@storybook/client-api": "6.4.21",
28
+ "@storybook/client-logger": "6.4.21",
29
+ "@storybook/codemod": "6.4.21",
30
+ "@storybook/components": "6.4.21",
31
+ "@storybook/core": "6.4.21",
32
+ "@storybook/core-client": "6.4.21",
33
+ "@storybook/core-common": "6.4.21",
34
+ "@storybook/core-events": "6.4.21",
35
+ "@storybook/core-server": "6.4.21",
36
+ "@storybook/csf-tools": "6.4.21",
37
+ "@storybook/ember": "6.4.21",
38
+ "@storybook/html": "6.4.21",
39
+ "@storybook/instrumenter": "6.4.21",
40
+ "@storybook/manager-webpack4": "6.4.21",
41
+ "@storybook/manager-webpack5": "6.4.21",
42
+ "@storybook/node-logger": "6.4.21",
43
+ "@storybook/postinstall": "6.4.21",
44
+ "@storybook/preact": "6.4.21",
45
+ "@storybook/preview-web": "6.4.21",
46
+ "@storybook/react": "6.4.21",
47
+ "@storybook/router": "6.4.21",
48
+ "@storybook/server": "6.4.21",
49
+ "@storybook/source-loader": "6.4.21",
50
+ "@storybook/store": "6.4.21",
51
+ "@storybook/svelte": "6.4.21",
52
+ "@storybook/theming": "6.4.21",
53
+ "@storybook/ui": "6.4.21",
54
+ "@storybook/vue": "6.4.21",
55
+ "@storybook/vue3": "6.4.21",
56
+ "@storybook/web-components": "6.4.21"
57
57
  }
@@ -0,0 +1,123 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.builderVite = void 0;
7
+
8
+ require("core-js/modules/es.promise.js");
9
+
10
+ var _chalk = _interopRequireDefault(require("chalk"));
11
+
12
+ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
13
+
14
+ var _csfTools = require("@storybook/csf-tools");
15
+
16
+ var _getStorybookInfo = require("../helpers/getStorybookInfo");
17
+
18
+ var _jsPackageManager = require("../../js-package-manager");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ const logger = console;
23
+
24
+ /**
25
+ * Is the user using 'storybook-builder-vite' in their project?
26
+ *
27
+ * If so, prompt them to upgrade to '@storybook/builder-vite'.
28
+ *
29
+ * - Add '@storybook/builder-vite' as dev dependency
30
+ * - Remove 'storybook-builder-vite' dependency
31
+ * - Add core.builder = '@storybook/builder-vite' to main.js
32
+ */
33
+ const builderVite = {
34
+ id: 'builder-vite',
35
+
36
+ async check({
37
+ packageManager
38
+ }) {
39
+ const packageJson = packageManager.retrievePackageJson();
40
+ const {
41
+ mainConfig
42
+ } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
43
+
44
+ if (!mainConfig) {
45
+ logger.warn('Unable to find storybook main.js config');
46
+ return null;
47
+ }
48
+
49
+ const main = await (0, _csfTools.readConfig)(mainConfig);
50
+ const builder = main.getFieldValue(['core', 'builder']);
51
+ const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
52
+
53
+ if (builderName !== 'storybook-builder-vite') {
54
+ logger.info(`Not using community vite builder, skipping`);
55
+ return null;
56
+ }
57
+
58
+ return {
59
+ builder,
60
+ main,
61
+ packageJson
62
+ };
63
+ },
64
+
65
+ prompt({
66
+ builder
67
+ }) {
68
+ const builderFormatted = _chalk.default.cyan(JSON.stringify(builder, null, 2));
69
+
70
+ return (0, _tsDedent.default)`
71
+ We've detected you're using the community vite builder: ${builderFormatted}
72
+
73
+ 'storybook-builder-vite' is deprecated and now located at ${_chalk.default.cyan('@storybook/builder-vite')}.
74
+
75
+ We can upgrade your project to use the new builder automatically.
76
+
77
+ More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed')}
78
+ `;
79
+ },
80
+
81
+ async run({
82
+ result: {
83
+ builder,
84
+ main,
85
+ packageJson
86
+ },
87
+ packageManager,
88
+ dryRun
89
+ }) {
90
+ const {
91
+ dependencies = {},
92
+ devDependencies = {}
93
+ } = packageJson;
94
+ logger.info(`Removing existing 'storybook-builder-vite' dependency`);
95
+
96
+ if (!dryRun) {
97
+ delete dependencies['storybook-builder-vite'];
98
+ delete devDependencies['storybook-builder-vite'];
99
+ (0, _jsPackageManager.writePackageJson)(packageJson);
100
+ }
101
+
102
+ logger.info(`Adding '@storybook/builder-vite' as dev dependency`);
103
+
104
+ if (!dryRun) {
105
+ packageManager.addDependencies({
106
+ installAsDevDependencies: true
107
+ }, ['@storybook/builder-vite']);
108
+ }
109
+
110
+ logger.info(`Updating main.js to use vite builder`);
111
+
112
+ if (!dryRun) {
113
+ const updatedBuilder = typeof builder === 'string' ? '@storybook/builder-vite' : {
114
+ name: '@storybook/builder-vite',
115
+ options: builder.options
116
+ };
117
+ main.setFieldValue(['core', 'builder'], updatedBuilder);
118
+ await (0, _csfTools.writeConfig)(main);
119
+ }
120
+ }
121
+
122
+ };
123
+ exports.builderVite = builderVite;
@@ -18,6 +18,8 @@ var _mainjsFramework = require("./mainjsFramework");
18
18
 
19
19
  var _eslintPlugin = require("./eslint-plugin");
20
20
 
21
+ var _builderVite = require("./builder-vite");
22
+
21
23
  var _types = require("../types");
22
24
 
23
25
  Object.keys(_types).forEach(function (key) {
@@ -31,5 +33,5 @@ Object.keys(_types).forEach(function (key) {
31
33
  }
32
34
  });
33
35
  });
34
- const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin];
36
+ const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
35
37
  exports.fixes = fixes;
@@ -24,8 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
24
24
  const read = async url => {
25
25
  const browser = await usePuppeteerBrowser();
26
26
  const page = await browser.newPage();
27
- await page.goto(url);
28
- await page.waitForFunction('window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()');
27
+ await page.goto(url); // we don't know whether we are running against a new or old storybook
28
+ // FIXME: add tests for both
29
+
30
+ await page.waitForFunction(`
31
+ (window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract && window.__STORYBOOK_PREVIEW__.extract()) ||
32
+ (window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract())
33
+ `);
29
34
  const data = JSON.parse(await page.evaluate(async () => {
30
35
  // eslint-disable-next-line no-undef
31
36
  return JSON.stringify(window.__STORYBOOK_STORY_STORE__.getStoriesJsonData(), null, 2);
@@ -24,3 +24,9 @@ h1 {
24
24
  button + button {
25
25
  margin-left: 10px;
26
26
  }
27
+
28
+ .welcome {
29
+ color: #333;
30
+ font-size: 14px;
31
+ margin-right: 10px;
32
+ }
@@ -28,7 +28,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
28
28
  </div>
29
29
  <div>
30
30
  {user ? (
31
- <Button size="small" onClick={onLogout} label="Log out" />
31
+ <>
32
+ <span className="welcome">
33
+ Welcome, <b>{user.name}</b>!
34
+ </span>
35
+ <Button size="small" onClick={onLogout} label="Log out" />
36
+ </>
32
37
  ) : (
33
38
  <>
34
39
  <Button size="small" onClick={onLogin} label="Log in" />
@@ -5,13 +5,19 @@ import { Header } from './Header';
5
5
  export default {
6
6
  title: 'Example/Header',
7
7
  component: Header,
8
+ parameters: {
9
+ // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
10
+ layout: 'fullscreen',
11
+ },
8
12
  };
9
13
 
10
14
  const Template = (args) => <Header {...args} />;
11
15
 
12
16
  export const LoggedIn = Template.bind({});
13
17
  LoggedIn.args = {
14
- user: {},
18
+ user: {
19
+ name: 'Jane Doe',
20
+ },
15
21
  };
16
22
 
17
23
  export const LoggedOut = Template.bind({});
@@ -1,71 +1,69 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
2
 
4
3
  import { Header } from './Header';
5
4
  import './page.css';
6
5
 
7
- export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
8
- <article>
9
- <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
6
+ export const Page = () => {
7
+ const [user, setUser] = React.useState();
10
8
 
11
- <section>
12
- <h2>Pages in Storybook</h2>
13
- <p>
14
- We recommend building UIs with a{' '}
15
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
16
- <strong>component-driven</strong>
17
- </a>{' '}
18
- process starting with atomic components and ending with pages.
19
- </p>
20
- <p>
21
- Render pages with mock data. This makes it easy to build and review page states without
22
- needing to navigate to them in your app. Here are some handy patterns for managing page data
23
- in Storybook:
24
- </p>
25
- <ul>
26
- <li>
27
- Use a higher-level connected component. Storybook helps you compose such data from the
28
- "args" of child component stories
29
- </li>
30
- <li>
31
- Assemble data in the page component from your services. You can mock these services out
32
- using Storybook.
33
- </li>
34
- </ul>
35
- <p>
36
- Get a guided tutorial on component-driven development at{' '}
37
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
38
- Storybook tutorials
39
- </a>
40
- . Read more in the{' '}
41
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
42
- docs
43
- </a>
44
- .
45
- </p>
46
- <div className="tip-wrapper">
47
- <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
48
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
49
- <g fill="none" fillRule="evenodd">
50
- <path
51
- 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"
52
- id="a"
53
- fill="#999"
54
- />
55
- </g>
56
- </svg>
57
- Viewports addon in the toolbar
58
- </div>
59
- </section>
60
- </article>
61
- );
62
- Page.propTypes = {
63
- user: PropTypes.shape({}),
64
- onLogin: PropTypes.func.isRequired,
65
- onLogout: PropTypes.func.isRequired,
66
- onCreateAccount: PropTypes.func.isRequired,
67
- };
9
+ return (
10
+ <article>
11
+ <Header
12
+ user={user}
13
+ onLogin={() => setUser({ name: 'Jane Doe' })}
14
+ onLogout={() => setUser(undefined)}
15
+ onCreateAccount={() => setUser({ name: 'Jane Doe' })}
16
+ />
68
17
 
69
- Page.defaultProps = {
70
- user: null,
18
+ <section>
19
+ <h2>Pages in Storybook</h2>
20
+ <p>
21
+ We recommend building UIs with a{' '}
22
+ <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
23
+ <strong>component-driven</strong>
24
+ </a>{' '}
25
+ process starting with atomic components and ending with pages.
26
+ </p>
27
+ <p>
28
+ Render pages with mock data. This makes it easy to build and review page states without
29
+ needing to navigate to them in your app. Here are some handy patterns for managing page
30
+ data in Storybook:
31
+ </p>
32
+ <ul>
33
+ <li>
34
+ Use a higher-level connected component. Storybook helps you compose such data from the
35
+ "args" of child component stories
36
+ </li>
37
+ <li>
38
+ Assemble data in the page component from your services. You can mock these services out
39
+ using Storybook.
40
+ </li>
41
+ </ul>
42
+ <p>
43
+ Get a guided tutorial on component-driven development at{' '}
44
+ <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
45
+ Storybook tutorials
46
+ </a>
47
+ . Read more in the{' '}
48
+ <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
49
+ docs
50
+ </a>
51
+ .
52
+ </p>
53
+ <div className="tip-wrapper">
54
+ <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
55
+ <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
56
+ <g fill="none" fillRule="evenodd">
57
+ <path
58
+ 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"
59
+ id="a"
60
+ fill="#999"
61
+ />
62
+ </g>
63
+ </svg>
64
+ Viewports addon in the toolbar
65
+ </div>
66
+ </section>
67
+ </article>
68
+ );
71
69
  };
@@ -1,22 +1,25 @@
1
1
  import React from 'react';
2
+ import { within, userEvent } from '@storybook/testing-library';
2
3
 
3
4
  import { Page } from './Page';
4
- import * as HeaderStories from './Header.stories';
5
5
 
6
6
  export default {
7
7
  title: 'Example/Page',
8
8
  component: Page,
9
+ parameters: {
10
+ // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
11
+ layout: 'fullscreen',
12
+ },
9
13
  };
10
14
 
11
15
  const Template = (args) => <Page {...args} />;
12
16
 
13
- export const LoggedIn = Template.bind({});
14
- LoggedIn.args = {
15
- // More on composing args: https://storybook.js.org/docs/react/writing-stories/args#args-composition
16
- ...HeaderStories.LoggedIn.args,
17
- };
18
-
17
+ // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
19
18
  export const LoggedOut = Template.bind({});
20
- LoggedOut.args = {
21
- ...HeaderStories.LoggedOut.args,
19
+
20
+ export const LoggedIn = Template.bind({});
21
+ LoggedIn.play = async ({ canvasElement }) => {
22
+ const canvas = within(canvasElement);
23
+ const loginButton = await canvas.getByRole('button', { name: /Log in/i });
24
+ await userEvent.click(loginButton);
22
25
  };
@@ -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 className="tip-wrapper">
47
- <span className="tip">Tip</span> Adjust the width of the canvas with the
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
@@ -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");
@@ -44,6 +46,9 @@ const builderDependencies = builder => {
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,6 +78,12 @@ 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'];
81
+
82
+ if (hasInteractiveStories(framework)) {
83
+ addons.push('@storybook/addon-interactions');
84
+ addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library');
85
+ }
86
+
74
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');
@@ -79,9 +92,11 @@ 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
101
  }, extraMain) : extraMain;
87
102
  (0, _configure.configure)(framework, Object.assign({
@@ -93,6 +108,18 @@ async function baseGenerator(packageManager, npmOptions, {
93
108
 
94
109
  if (addComponents) {
95
110
  (0, _helpers.copyComponents)(framework, language);
111
+ } // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
112
+
113
+
114
+ if (expandedBuilder === '@storybook/builder-vite') {
115
+ const previewHead = (0, _tsDedent.default)`
116
+ <script>
117
+ window.global = window;
118
+ </script>
119
+ `;
120
+ await _fsExtra.default.writeFile(`.storybook/preview-head.html`, previewHead, {
121
+ encoding: 'utf8'
122
+ });
96
123
  }
97
124
 
98
125
  const babelDependencies = addBabel ? await (0, _helpers.getBabelDependencies)(packageManager, packageJson) : [];
@@ -59,6 +59,7 @@ exports.CoreBuilder = CoreBuilder;
59
59
  (function (CoreBuilder) {
60
60
  CoreBuilder["Webpack4"] = "webpack4";
61
61
  CoreBuilder["Webpack5"] = "webpack5";
62
+ CoreBuilder["Vite"] = "vite";
62
63
  })(CoreBuilder || (exports.CoreBuilder = CoreBuilder = {}));
63
64
 
64
65
  let SupportedLanguage;
@@ -34,7 +34,7 @@ const getStorybookVersion = line => {
34
34
  };
35
35
 
36
36
  exports.getStorybookVersion = getStorybookVersion;
37
- const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer'];
37
+ const excludeList = ['@storybook/linter-config', '@storybook/design-system', '@storybook/ember-cli-storybook', '@storybook/semver', '@storybook/eslint-config-storybook', '@storybook/bench', '@storybook/addon-bench', '@storybook/addon-console', '@storybook/csf', '@storybook/storybook-deployer', '@storybook/addon-postcss', '@storybook/react-docgen-typescript-plugin', '@storybook/babel-plugin-require-context-hook', '@storybook/builder-vite', '@storybook/mdx1-csf', '@storybook/mdx2-csf'];
38
38
 
39
39
  const isCorePackage = pkg => pkg.startsWith('@storybook/') && !pkg.startsWith('@storybook/preset-') && !excludeList.includes(pkg);
40
40