@storybook/cli 6.5.0-alpha.7 → 6.5.0-beta.1

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 (257) hide show
  1. package/bin/index.js +1 -0
  2. package/dist/cjs/add.js +3 -3
  3. package/dist/cjs/automigrate/fixes/builder-vite.js +122 -0
  4. package/dist/cjs/automigrate/fixes/index.js +3 -1
  5. package/dist/cjs/automigrate/types.js +5 -1
  6. package/dist/cjs/babel-config.js +1 -1
  7. package/dist/cjs/detect.js +53 -2
  8. package/dist/cjs/extract.js +7 -2
  9. package/dist/cjs/frameworks/angular/Header.stories.ts +8 -3
  10. package/dist/cjs/frameworks/angular/Page.stories.ts +12 -10
  11. package/dist/cjs/frameworks/angular/header.component.ts +30 -19
  12. package/dist/cjs/frameworks/angular/page.component.ts +13 -27
  13. package/dist/cjs/frameworks/common/header.css +6 -0
  14. package/dist/cjs/frameworks/html/js/Header.js +2 -0
  15. package/dist/cjs/frameworks/html/js/Header.stories.js +8 -1
  16. package/dist/cjs/frameworks/html/js/Page.js +29 -2
  17. package/dist/cjs/frameworks/html/js/Page.stories.js +12 -13
  18. package/dist/cjs/frameworks/html/ts/Header.stories.ts +5 -0
  19. package/dist/cjs/frameworks/html/ts/Header.ts +3 -1
  20. package/dist/cjs/frameworks/html/ts/Page.stories.ts +12 -14
  21. package/dist/cjs/frameworks/html/ts/Page.ts +32 -8
  22. package/dist/cjs/frameworks/preact/Header.jsx +6 -1
  23. package/dist/cjs/frameworks/preact/Header.stories.jsx +7 -1
  24. package/dist/cjs/frameworks/preact/Page.jsx +62 -63
  25. package/dist/cjs/frameworks/preact/Page.stories.jsx +12 -9
  26. package/dist/cjs/frameworks/react/js/Header.jsx +6 -1
  27. package/dist/cjs/frameworks/react/js/Header.stories.jsx +7 -1
  28. package/dist/cjs/frameworks/react/js/Page.jsx +61 -63
  29. package/dist/cjs/frameworks/react/js/Page.stories.jsx +12 -9
  30. package/dist/cjs/frameworks/react/ts/Header.stories.tsx +7 -1
  31. package/dist/cjs/frameworks/react/ts/Header.tsx +11 -2
  32. package/dist/cjs/frameworks/react/ts/Page.stories.tsx +12 -9
  33. package/dist/cjs/frameworks/react/ts/Page.tsx +66 -60
  34. package/dist/cjs/frameworks/svelte/Button.stories.js +51 -0
  35. package/dist/cjs/frameworks/svelte/Header.stories.js +35 -0
  36. package/dist/cjs/frameworks/svelte/Header.svelte +3 -0
  37. package/dist/cjs/frameworks/svelte/Page.stories.js +27 -0
  38. package/dist/cjs/frameworks/svelte/Page.svelte +2 -16
  39. package/dist/cjs/frameworks/vue/Header.stories.js +7 -1
  40. package/dist/cjs/frameworks/vue/Header.vue +1 -0
  41. package/dist/cjs/frameworks/vue/Page.stories.js +15 -13
  42. package/dist/cjs/frameworks/vue/Page.vue +7 -7
  43. package/dist/cjs/frameworks/vue3/Header.stories.js +7 -1
  44. package/dist/cjs/frameworks/vue3/Header.vue +1 -0
  45. package/dist/cjs/frameworks/vue3/Page.stories.js +16 -17
  46. package/dist/cjs/frameworks/vue3/Page.vue +18 -8
  47. package/dist/cjs/frameworks/web-components/js/Page.js +2 -2
  48. package/dist/cjs/frameworks/web-components/ts/Page.ts +2 -2
  49. package/dist/cjs/generators/ANGULAR/angular-helpers.js +5 -5
  50. package/dist/cjs/generators/ANGULAR/index.js +2 -2
  51. package/dist/cjs/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  52. package/dist/cjs/generators/AURELIA/index.js +1 -1
  53. package/dist/cjs/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  54. package/dist/cjs/generators/EMBER/index.js +1 -1
  55. package/dist/cjs/generators/HTML/index.js +1 -1
  56. package/dist/cjs/generators/METEOR/index.js +1 -1
  57. package/dist/cjs/generators/MITHRIL/index.js +1 -1
  58. package/dist/cjs/generators/PREACT/index.js +1 -1
  59. package/dist/cjs/generators/RAX/index.js +1 -1
  60. package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  61. package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  62. package/dist/cjs/generators/REACT_SCRIPTS/index.js +9 -1
  63. package/dist/cjs/generators/RIOT/index.js +1 -1
  64. package/dist/cjs/generators/SERVER/index.js +1 -1
  65. package/dist/cjs/generators/SFC_VUE/index.js +1 -1
  66. package/dist/cjs/generators/SVELTE/index.js +0 -1
  67. package/dist/cjs/generators/VUE/index.js +1 -1
  68. package/dist/cjs/generators/VUE3/index.js +1 -1
  69. package/dist/cjs/generators/WEBPACK_REACT/index.js +1 -1
  70. package/dist/cjs/generators/baseGenerator.js +38 -4
  71. package/dist/cjs/generators/configure.js +3 -1
  72. package/dist/cjs/helpers.js +9 -8
  73. package/dist/cjs/initiate.js +27 -24
  74. package/dist/cjs/js-package-manager/JsPackageManager.js +2 -2
  75. package/dist/cjs/project_types.js +2 -1
  76. package/dist/cjs/repro-generators/configs.js +51 -8
  77. package/dist/cjs/repro-generators/scripts.js +46 -14
  78. package/dist/cjs/repro.js +3 -2
  79. package/dist/cjs/typings.d.ts +3 -0
  80. package/dist/cjs/upgrade.js +4 -2
  81. package/dist/cjs/versions.js +66 -0
  82. package/dist/cjs/window.d.js +5 -1
  83. package/dist/esm/add.js +3 -3
  84. package/dist/esm/automigrate/fixes/builder-vite.js +122 -0
  85. package/dist/esm/automigrate/fixes/index.js +3 -1
  86. package/dist/esm/automigrate/types.js +5 -1
  87. package/dist/esm/babel-config.js +1 -1
  88. package/dist/esm/detect.js +53 -2
  89. package/dist/esm/extract.js +7 -2
  90. package/dist/esm/frameworks/angular/Header.stories.ts +8 -3
  91. package/dist/esm/frameworks/angular/Page.stories.ts +12 -10
  92. package/dist/esm/frameworks/angular/header.component.ts +30 -19
  93. package/dist/esm/frameworks/angular/page.component.ts +13 -27
  94. package/dist/esm/frameworks/common/header.css +6 -0
  95. package/dist/esm/frameworks/html/js/Header.js +2 -0
  96. package/dist/esm/frameworks/html/js/Header.stories.js +8 -1
  97. package/dist/esm/frameworks/html/js/Page.js +29 -2
  98. package/dist/esm/frameworks/html/js/Page.stories.js +12 -13
  99. package/dist/esm/frameworks/html/ts/Header.stories.ts +5 -0
  100. package/dist/esm/frameworks/html/ts/Header.ts +3 -1
  101. package/dist/esm/frameworks/html/ts/Page.stories.ts +12 -14
  102. package/dist/esm/frameworks/html/ts/Page.ts +32 -8
  103. package/dist/esm/frameworks/preact/Header.jsx +6 -1
  104. package/dist/esm/frameworks/preact/Header.stories.jsx +7 -1
  105. package/dist/esm/frameworks/preact/Page.jsx +62 -63
  106. package/dist/esm/frameworks/preact/Page.stories.jsx +12 -9
  107. package/dist/esm/frameworks/react/js/Header.jsx +6 -1
  108. package/dist/esm/frameworks/react/js/Header.stories.jsx +7 -1
  109. package/dist/esm/frameworks/react/js/Page.jsx +61 -63
  110. package/dist/esm/frameworks/react/js/Page.stories.jsx +12 -9
  111. package/dist/esm/frameworks/react/ts/Header.stories.tsx +7 -1
  112. package/dist/esm/frameworks/react/ts/Header.tsx +11 -2
  113. package/dist/esm/frameworks/react/ts/Page.stories.tsx +12 -9
  114. package/dist/esm/frameworks/react/ts/Page.tsx +66 -60
  115. package/dist/esm/frameworks/svelte/Button.stories.js +51 -0
  116. package/dist/esm/frameworks/svelte/Header.stories.js +35 -0
  117. package/dist/esm/frameworks/svelte/Header.svelte +3 -0
  118. package/dist/esm/frameworks/svelte/Page.stories.js +27 -0
  119. package/dist/esm/frameworks/svelte/Page.svelte +2 -16
  120. package/dist/esm/frameworks/vue/Header.stories.js +7 -1
  121. package/dist/esm/frameworks/vue/Header.vue +1 -0
  122. package/dist/esm/frameworks/vue/Page.stories.js +15 -13
  123. package/dist/esm/frameworks/vue/Page.vue +7 -7
  124. package/dist/esm/frameworks/vue3/Header.stories.js +7 -1
  125. package/dist/esm/frameworks/vue3/Header.vue +1 -0
  126. package/dist/esm/frameworks/vue3/Page.stories.js +16 -17
  127. package/dist/esm/frameworks/vue3/Page.vue +18 -8
  128. package/dist/esm/frameworks/web-components/js/Page.js +2 -2
  129. package/dist/esm/frameworks/web-components/ts/Page.ts +2 -2
  130. package/dist/esm/generators/ANGULAR/angular-helpers.js +5 -5
  131. package/dist/esm/generators/ANGULAR/index.js +2 -2
  132. package/dist/esm/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  133. package/dist/esm/generators/AURELIA/index.js +1 -1
  134. package/dist/esm/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  135. package/dist/esm/generators/EMBER/index.js +1 -1
  136. package/dist/esm/generators/HTML/index.js +1 -1
  137. package/dist/esm/generators/METEOR/index.js +1 -1
  138. package/dist/esm/generators/MITHRIL/index.js +1 -1
  139. package/dist/esm/generators/PREACT/index.js +1 -1
  140. package/dist/esm/generators/RAX/index.js +1 -1
  141. package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  142. package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  143. package/dist/esm/generators/REACT_SCRIPTS/index.js +9 -1
  144. package/dist/esm/generators/RIOT/index.js +1 -1
  145. package/dist/esm/generators/SERVER/index.js +1 -1
  146. package/dist/esm/generators/SFC_VUE/index.js +1 -1
  147. package/dist/esm/generators/SVELTE/index.js +0 -1
  148. package/dist/esm/generators/VUE/index.js +1 -1
  149. package/dist/esm/generators/VUE3/index.js +1 -1
  150. package/dist/esm/generators/WEBPACK_REACT/index.js +1 -1
  151. package/dist/esm/generators/baseGenerator.js +38 -4
  152. package/dist/esm/generators/configure.js +3 -1
  153. package/dist/esm/helpers.js +9 -8
  154. package/dist/esm/initiate.js +27 -24
  155. package/dist/esm/js-package-manager/JsPackageManager.js +2 -2
  156. package/dist/esm/project_types.js +2 -1
  157. package/dist/esm/repro-generators/configs.js +51 -8
  158. package/dist/esm/repro-generators/scripts.js +46 -14
  159. package/dist/esm/repro.js +3 -2
  160. package/dist/esm/typings.d.ts +3 -0
  161. package/dist/esm/upgrade.js +4 -2
  162. package/dist/esm/versions.js +66 -0
  163. package/dist/esm/window.d.js +5 -1
  164. package/dist/modern/add.js +3 -3
  165. package/dist/modern/automigrate/fixes/builder-vite.js +122 -0
  166. package/dist/modern/automigrate/fixes/index.js +3 -1
  167. package/dist/modern/automigrate/types.js +5 -1
  168. package/dist/modern/babel-config.js +1 -1
  169. package/dist/modern/detect.js +53 -2
  170. package/dist/modern/extract.js +7 -2
  171. package/dist/modern/frameworks/common/header.css +6 -0
  172. package/dist/modern/frameworks/html/js/Header.js +2 -0
  173. package/dist/modern/frameworks/html/js/Header.stories.js +8 -1
  174. package/dist/modern/frameworks/html/js/Page.js +29 -2
  175. package/dist/modern/frameworks/html/js/Page.stories.js +12 -13
  176. package/dist/modern/frameworks/preact/Header.jsx +6 -1
  177. package/dist/modern/frameworks/preact/Header.stories.jsx +7 -1
  178. package/dist/modern/frameworks/preact/Page.jsx +62 -63
  179. package/dist/modern/frameworks/preact/Page.stories.jsx +12 -9
  180. package/dist/modern/frameworks/react/js/Header.jsx +6 -1
  181. package/dist/modern/frameworks/react/js/Header.stories.jsx +7 -1
  182. package/dist/modern/frameworks/react/js/Page.jsx +61 -63
  183. package/dist/modern/frameworks/react/js/Page.stories.jsx +12 -9
  184. package/dist/modern/frameworks/svelte/Button.stories.js +51 -0
  185. package/dist/modern/frameworks/svelte/Header.stories.js +35 -0
  186. package/dist/modern/frameworks/svelte/Header.svelte +3 -0
  187. package/dist/modern/frameworks/svelte/Page.stories.js +27 -0
  188. package/dist/modern/frameworks/svelte/Page.svelte +2 -16
  189. package/dist/modern/frameworks/vue/Header.stories.js +7 -1
  190. package/dist/modern/frameworks/vue/Header.vue +1 -0
  191. package/dist/modern/frameworks/vue/Page.stories.js +15 -13
  192. package/dist/modern/frameworks/vue/Page.vue +7 -7
  193. package/dist/modern/frameworks/vue3/Header.stories.js +7 -1
  194. package/dist/modern/frameworks/vue3/Header.vue +1 -0
  195. package/dist/modern/frameworks/vue3/Page.stories.js +16 -17
  196. package/dist/modern/frameworks/vue3/Page.vue +18 -8
  197. package/dist/modern/frameworks/web-components/js/Page.js +2 -2
  198. package/dist/modern/generators/ANGULAR/angular-helpers.js +5 -5
  199. package/dist/modern/generators/ANGULAR/index.js +2 -2
  200. package/dist/modern/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  201. package/dist/modern/generators/AURELIA/index.js +1 -1
  202. package/dist/modern/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  203. package/dist/modern/generators/EMBER/index.js +1 -1
  204. package/dist/modern/generators/HTML/index.js +1 -1
  205. package/dist/modern/generators/METEOR/index.js +1 -1
  206. package/dist/modern/generators/MITHRIL/index.js +1 -1
  207. package/dist/modern/generators/PREACT/index.js +1 -1
  208. package/dist/modern/generators/RAX/index.js +1 -1
  209. package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  210. package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  211. package/dist/modern/generators/REACT_SCRIPTS/index.js +9 -1
  212. package/dist/modern/generators/RIOT/index.js +1 -1
  213. package/dist/modern/generators/SERVER/index.js +1 -1
  214. package/dist/modern/generators/SFC_VUE/index.js +1 -1
  215. package/dist/modern/generators/SVELTE/index.js +0 -1
  216. package/dist/modern/generators/VUE/index.js +1 -1
  217. package/dist/modern/generators/VUE3/index.js +1 -1
  218. package/dist/modern/generators/WEBPACK_REACT/index.js +1 -1
  219. package/dist/modern/generators/baseGenerator.js +38 -4
  220. package/dist/modern/generators/configure.js +3 -1
  221. package/dist/modern/helpers.js +9 -8
  222. package/dist/modern/initiate.js +27 -24
  223. package/dist/modern/js-package-manager/JsPackageManager.js +2 -2
  224. package/dist/modern/project_types.js +2 -1
  225. package/dist/modern/repro-generators/configs.js +51 -8
  226. package/dist/modern/repro-generators/scripts.js +46 -14
  227. package/dist/modern/repro.js +3 -2
  228. package/dist/modern/typings.d.ts +3 -0
  229. package/dist/modern/upgrade.js +4 -2
  230. package/dist/modern/versions.js +66 -0
  231. package/dist/modern/window.d.js +5 -1
  232. package/dist/ts3.4/automigrate/fixes/builder-vite.d.ts +19 -0
  233. package/dist/ts3.4/detect.d.ts +9 -2
  234. package/dist/ts3.4/project_types.d.ts +2 -1
  235. package/dist/ts3.4/repro-generators/configs.d.ts +8 -0
  236. package/dist/ts3.4/versions.d.ts +59 -0
  237. package/dist/ts3.9/automigrate/fixes/builder-vite.d.ts +19 -0
  238. package/dist/ts3.9/detect.d.ts +9 -2
  239. package/dist/ts3.9/project_types.d.ts +2 -1
  240. package/dist/ts3.9/repro-generators/configs.d.ts +9 -1
  241. package/dist/ts3.9/versions.d.ts +59 -0
  242. package/package.json +11 -12
  243. package/dist/cjs/frameworks/svelte/Button.stories.svelte +0 -57
  244. package/dist/cjs/frameworks/svelte/Header.stories.svelte +0 -32
  245. package/dist/cjs/frameworks/svelte/Page.stories.svelte +0 -32
  246. package/dist/cjs/typings.d.js +0 -1
  247. package/dist/cjs/versions.json +0 -59
  248. package/dist/esm/frameworks/svelte/Button.stories.svelte +0 -57
  249. package/dist/esm/frameworks/svelte/Header.stories.svelte +0 -32
  250. package/dist/esm/frameworks/svelte/Page.stories.svelte +0 -32
  251. package/dist/esm/typings.d.js +0 -1
  252. package/dist/esm/versions.json +0 -59
  253. package/dist/modern/frameworks/svelte/Button.stories.svelte +0 -57
  254. package/dist/modern/frameworks/svelte/Header.stories.svelte +0 -32
  255. package/dist/modern/frameworks/svelte/Page.stories.svelte +0 -32
  256. package/dist/modern/typings.d.js +0 -1
  257. package/dist/modern/versions.json +0 -59
@@ -3,6 +3,10 @@ import MyHeader from './Header.vue';
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) => ({
@@ -19,7 +23,9 @@ const Template = (args) => ({
19
23
 
20
24
  export const LoggedIn = Template.bind({});
21
25
  LoggedIn.args = {
22
- user: {},
26
+ user: {
27
+ name: 'Jane Doe',
28
+ },
23
29
  };
24
30
 
25
31
  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" @click="$emit('logout')" label="Log out" v-if="user" />
25
26
  <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
26
27
  <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
@@ -1,30 +1,29 @@
1
+ import { within, userEvent } from '@storybook/testing-library';
1
2
  import MyPage from './Page.vue';
2
- import * as HeaderStories from './Header.stories';
3
3
 
4
4
  export default {
5
5
  title: 'Example/Page',
6
6
  component: MyPage,
7
+ parameters: {
8
+ // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
9
+ layout: 'fullscreen',
10
+ },
7
11
  };
8
12
 
9
- const Template = (args) => ({
13
+ const Template = () => ({
10
14
  // Components used in your story `template` are defined in the `components` object
11
15
  components: { MyPage },
12
- // The story's `args` need to be mapped into the template through the `setup()` method
13
- setup() {
14
- // Story args can be mapped to keys in the returned object
15
- return { user: args.user };
16
- },
17
- // Then, those values can be accessed directly in the template
18
- template: '<my-page :user="user" />',
19
- });
20
16
 
21
- export const LoggedIn = Template.bind({});
22
- LoggedIn.args = {
23
- // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
24
- ...HeaderStories.LoggedIn.args,
25
- };
17
+ // Here we define the `template`
18
+ template: '<my-page />',
19
+ });
26
20
 
27
21
  export const LoggedOut = Template.bind({});
28
- LoggedOut.args = {
29
- ...HeaderStories.LoggedOut.args,
22
+
23
+ // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
24
+ export const LoggedIn = Template.bind({});
25
+ LoggedIn.play = async ({ canvasElement }) => {
26
+ const canvas = within(canvasElement);
27
+ const loginButton = await canvas.getByRole('button', { name: /Log in/i });
28
+ await userEvent.click(loginButton);
30
29
  };
@@ -2,9 +2,9 @@
2
2
  <article>
3
3
  <my-header
4
4
  :user="user"
5
- @login="$emit('login')"
6
- @logout="$emit('logout')"
7
- @createAccount="$emit('createAccount')"
5
+ @login="onLogin"
6
+ @logout="onLogout"
7
+ @createAccount="onCreateAccount"
8
8
  />
9
9
 
10
10
  <section>
@@ -67,12 +67,22 @@ export default {
67
67
 
68
68
  components: { MyHeader },
69
69
 
70
- props: {
71
- user: {
72
- type: Object,
73
- },
70
+ data() {
71
+ return {
72
+ user: null
73
+ }
74
74
  },
75
75
 
76
- emits: ['login', 'logout', 'createAccount'],
76
+ methods: {
77
+ onLogin() {
78
+ this.user = { name: 'Jane Doe' };
79
+ },
80
+ onLogout() {
81
+ this.user = null;
82
+ },
83
+ onCreateAccount() {
84
+ this.user = { name: 'Jane Doe' };
85
+ },
86
+ },
77
87
  };
78
88
  </script>
@@ -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
@@ -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 className="tip-wrapper">
54
- <span className="tip">Tip</span> Adjust the width of the canvas with the
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.isDefaultProjectSet = isDefaultProjectSet;
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 cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
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);
@@ -55,8 +55,8 @@ 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', {
59
- extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
58
+ await (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, updatedOptions, 'angular', {
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": ["node"]
4
+ "types": [
5
+ "node"
6
+ ],
7
+ "allowSyntheticDefaultImports": true
5
8
  },
6
- "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
7
- "include": ["../src/**/*", "../projects/**/*"],
8
- "files": ["./typings.d.ts"]
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
+ }
@@ -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);
@@ -1,9 +1,20 @@
1
1
  {
2
2
  "extends": "%SET_DURING_SB_INIT%",
3
3
  "compilerOptions": {
4
- "types": ["node"]
4
+ "types": [
5
+ "node"
6
+ ]
5
7
  },
6
- "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
7
- "include": ["../src/**/*", "../projects/**/*"],
8
- "files": ["./typings.d.ts"]
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
+ }
@@ -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
  };
@@ -1,3 +1,3 @@
1
- import '@storybook/addon-actions/register';
2
- import '@storybook/addon-links/register';
3
- import '@storybook/addon-knobs/register';
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/register';
2
- import '@storybook/addon-ondevice-knobs/register';
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
- if (isCra5) extraPackages.push('webpack'); // preset v3 is compat with older versions of CRA, otherwise let version float
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', {
@@ -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;
@@ -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
@@ -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;
@@ -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', 'preact', 'svelte', 'vue', 'vue3', 'html'].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
- const yarn2Dependencies = packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
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, ["addons", "extensions", "commonJs"]);
24
+ custom = _objectWithoutPropertiesLoose(_ref, _excluded);
23
25
 
24
26
  const prefix = _fsExtra.default.existsSync('./src') ? '../src' : '../stories';
25
27
  const config = Object.assign({
@@ -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.copyTemplate = copyTemplate;
7
+ exports.codeLog = codeLog;
8
+ exports.commandLog = void 0;
14
9
  exports.copyComponents = copyComponents;
15
- exports.commandLog = exports.writeFileAsJson = void 0;
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