@storybook/cli 6.5.0-alpha.9 → 6.5.0-beta.2

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 (293) 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/eslint-plugin.js +3 -3
  5. package/dist/cjs/automigrate/fixes/index.js +3 -1
  6. package/dist/cjs/automigrate/fixes/mainjsFramework.js +2 -2
  7. package/dist/cjs/automigrate/fixes/webpack5.js +2 -2
  8. package/dist/cjs/automigrate/types.js +5 -1
  9. package/dist/cjs/babel-config.js +1 -1
  10. package/dist/cjs/detect.js +67 -4
  11. package/dist/cjs/extract.js +7 -2
  12. package/dist/cjs/frameworks/angular/Header.stories.ts +8 -3
  13. package/dist/cjs/frameworks/angular/Page.stories.ts +12 -10
  14. package/dist/cjs/frameworks/angular/header.component.ts +30 -19
  15. package/dist/cjs/frameworks/angular/page.component.ts +13 -27
  16. package/dist/cjs/frameworks/common/header.css +6 -0
  17. package/dist/cjs/frameworks/html/js/Header.js +2 -0
  18. package/dist/cjs/frameworks/html/js/Header.stories.js +8 -1
  19. package/dist/cjs/frameworks/html/js/Page.js +29 -2
  20. package/dist/cjs/frameworks/html/js/Page.stories.js +12 -13
  21. package/dist/cjs/frameworks/html/ts/Header.stories.ts +5 -0
  22. package/dist/cjs/frameworks/html/ts/Header.ts +3 -1
  23. package/dist/cjs/frameworks/html/ts/Page.stories.ts +12 -14
  24. package/dist/cjs/frameworks/html/ts/Page.ts +32 -8
  25. package/dist/cjs/frameworks/preact/Header.jsx +6 -1
  26. package/dist/cjs/frameworks/preact/Header.stories.jsx +7 -1
  27. package/dist/cjs/frameworks/preact/Page.jsx +62 -63
  28. package/dist/cjs/frameworks/preact/Page.stories.jsx +12 -9
  29. package/dist/cjs/frameworks/react/js/Header.jsx +6 -1
  30. package/dist/cjs/frameworks/react/js/Header.stories.jsx +7 -1
  31. package/dist/cjs/frameworks/react/js/Page.jsx +61 -63
  32. package/dist/cjs/frameworks/react/js/Page.stories.jsx +12 -9
  33. package/dist/cjs/frameworks/react/ts/Header.stories.tsx +7 -1
  34. package/dist/cjs/frameworks/react/ts/Header.tsx +11 -2
  35. package/dist/cjs/frameworks/react/ts/Page.stories.tsx +12 -9
  36. package/dist/cjs/frameworks/react/ts/Page.tsx +66 -60
  37. package/dist/cjs/frameworks/svelte/Button.stories.js +51 -0
  38. package/dist/cjs/frameworks/svelte/Header.stories.js +35 -0
  39. package/dist/cjs/frameworks/svelte/Header.svelte +3 -0
  40. package/dist/cjs/frameworks/svelte/Page.stories.js +27 -0
  41. package/dist/cjs/frameworks/svelte/Page.svelte +2 -16
  42. package/dist/cjs/frameworks/vue/Header.stories.js +7 -1
  43. package/dist/cjs/frameworks/vue/Header.vue +1 -0
  44. package/dist/cjs/frameworks/vue/Page.stories.js +15 -13
  45. package/dist/cjs/frameworks/vue/Page.vue +7 -7
  46. package/dist/cjs/frameworks/vue3/Header.stories.js +7 -1
  47. package/dist/cjs/frameworks/vue3/Header.vue +1 -0
  48. package/dist/cjs/frameworks/vue3/Page.stories.js +16 -17
  49. package/dist/cjs/frameworks/vue3/Page.vue +18 -8
  50. package/dist/cjs/frameworks/web-components/js/Page.js +2 -2
  51. package/dist/cjs/frameworks/web-components/ts/Page.ts +2 -2
  52. package/dist/cjs/generate.js +5 -0
  53. package/dist/cjs/generators/ANGULAR/angular-helpers.js +5 -5
  54. package/dist/cjs/generators/ANGULAR/index.js +2 -2
  55. package/dist/cjs/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  56. package/dist/cjs/generators/AURELIA/index.js +1 -1
  57. package/dist/cjs/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  58. package/dist/cjs/generators/EMBER/index.js +1 -1
  59. package/dist/cjs/generators/HTML/index.js +1 -1
  60. package/dist/cjs/generators/METEOR/index.js +1 -1
  61. package/dist/cjs/generators/MITHRIL/index.js +1 -1
  62. package/dist/cjs/generators/PREACT/index.js +1 -1
  63. package/dist/cjs/generators/RAX/index.js +1 -1
  64. package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  65. package/dist/cjs/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  66. package/dist/cjs/generators/REACT_SCRIPTS/index.js +9 -1
  67. package/dist/cjs/generators/RIOT/index.js +1 -1
  68. package/dist/cjs/generators/SERVER/index.js +1 -1
  69. package/dist/cjs/generators/SFC_VUE/index.js +1 -1
  70. package/dist/cjs/generators/SVELTE/index.js +0 -1
  71. package/dist/cjs/generators/VUE/index.js +1 -1
  72. package/dist/cjs/generators/VUE3/index.js +1 -1
  73. package/dist/cjs/generators/WEBPACK_REACT/index.js +1 -1
  74. package/dist/cjs/generators/baseGenerator.js +38 -4
  75. package/dist/cjs/generators/configure.js +3 -1
  76. package/dist/cjs/helpers.js +9 -8
  77. package/dist/cjs/initiate.js +44 -34
  78. package/dist/cjs/js-package-manager/JsPackageManager.js +8 -8
  79. package/dist/cjs/js-package-manager/PackageJson.js +5 -1
  80. package/dist/cjs/js-package-manager/PackageJsonHelper.js +1 -1
  81. package/dist/cjs/project_types.js +2 -1
  82. package/dist/cjs/repro-generators/configs.js +51 -8
  83. package/dist/cjs/repro-generators/scripts.js +46 -14
  84. package/dist/cjs/repro.js +3 -2
  85. package/dist/cjs/typings.d.ts +3 -0
  86. package/dist/cjs/upgrade.js +27 -9
  87. package/dist/cjs/versions.js +67 -0
  88. package/dist/cjs/window.d.js +5 -1
  89. package/dist/esm/add.js +3 -3
  90. package/dist/esm/automigrate/fixes/builder-vite.js +122 -0
  91. package/dist/esm/automigrate/fixes/eslint-plugin.js +3 -3
  92. package/dist/esm/automigrate/fixes/index.js +3 -1
  93. package/dist/esm/automigrate/fixes/mainjsFramework.js +2 -2
  94. package/dist/esm/automigrate/fixes/webpack5.js +2 -2
  95. package/dist/esm/automigrate/types.js +5 -1
  96. package/dist/esm/babel-config.js +1 -1
  97. package/dist/esm/detect.js +67 -4
  98. package/dist/esm/extract.js +7 -2
  99. package/dist/esm/frameworks/angular/Header.stories.ts +8 -3
  100. package/dist/esm/frameworks/angular/Page.stories.ts +12 -10
  101. package/dist/esm/frameworks/angular/header.component.ts +30 -19
  102. package/dist/esm/frameworks/angular/page.component.ts +13 -27
  103. package/dist/esm/frameworks/common/header.css +6 -0
  104. package/dist/esm/frameworks/html/js/Header.js +2 -0
  105. package/dist/esm/frameworks/html/js/Header.stories.js +8 -1
  106. package/dist/esm/frameworks/html/js/Page.js +29 -2
  107. package/dist/esm/frameworks/html/js/Page.stories.js +12 -13
  108. package/dist/esm/frameworks/html/ts/Header.stories.ts +5 -0
  109. package/dist/esm/frameworks/html/ts/Header.ts +3 -1
  110. package/dist/esm/frameworks/html/ts/Page.stories.ts +12 -14
  111. package/dist/esm/frameworks/html/ts/Page.ts +32 -8
  112. package/dist/esm/frameworks/preact/Header.jsx +6 -1
  113. package/dist/esm/frameworks/preact/Header.stories.jsx +7 -1
  114. package/dist/esm/frameworks/preact/Page.jsx +62 -63
  115. package/dist/esm/frameworks/preact/Page.stories.jsx +12 -9
  116. package/dist/esm/frameworks/react/js/Header.jsx +6 -1
  117. package/dist/esm/frameworks/react/js/Header.stories.jsx +7 -1
  118. package/dist/esm/frameworks/react/js/Page.jsx +61 -63
  119. package/dist/esm/frameworks/react/js/Page.stories.jsx +12 -9
  120. package/dist/esm/frameworks/react/ts/Header.stories.tsx +7 -1
  121. package/dist/esm/frameworks/react/ts/Header.tsx +11 -2
  122. package/dist/esm/frameworks/react/ts/Page.stories.tsx +12 -9
  123. package/dist/esm/frameworks/react/ts/Page.tsx +66 -60
  124. package/dist/esm/frameworks/svelte/Button.stories.js +51 -0
  125. package/dist/esm/frameworks/svelte/Header.stories.js +35 -0
  126. package/dist/esm/frameworks/svelte/Header.svelte +3 -0
  127. package/dist/esm/frameworks/svelte/Page.stories.js +27 -0
  128. package/dist/esm/frameworks/svelte/Page.svelte +2 -16
  129. package/dist/esm/frameworks/vue/Header.stories.js +7 -1
  130. package/dist/esm/frameworks/vue/Header.vue +1 -0
  131. package/dist/esm/frameworks/vue/Page.stories.js +15 -13
  132. package/dist/esm/frameworks/vue/Page.vue +7 -7
  133. package/dist/esm/frameworks/vue3/Header.stories.js +7 -1
  134. package/dist/esm/frameworks/vue3/Header.vue +1 -0
  135. package/dist/esm/frameworks/vue3/Page.stories.js +16 -17
  136. package/dist/esm/frameworks/vue3/Page.vue +18 -8
  137. package/dist/esm/frameworks/web-components/js/Page.js +2 -2
  138. package/dist/esm/frameworks/web-components/ts/Page.ts +2 -2
  139. package/dist/esm/generate.js +5 -0
  140. package/dist/esm/generators/ANGULAR/angular-helpers.js +5 -5
  141. package/dist/esm/generators/ANGULAR/index.js +2 -2
  142. package/dist/esm/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  143. package/dist/esm/generators/AURELIA/index.js +1 -1
  144. package/dist/esm/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  145. package/dist/esm/generators/EMBER/index.js +1 -1
  146. package/dist/esm/generators/HTML/index.js +1 -1
  147. package/dist/esm/generators/METEOR/index.js +1 -1
  148. package/dist/esm/generators/MITHRIL/index.js +1 -1
  149. package/dist/esm/generators/PREACT/index.js +1 -1
  150. package/dist/esm/generators/RAX/index.js +1 -1
  151. package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  152. package/dist/esm/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  153. package/dist/esm/generators/REACT_SCRIPTS/index.js +9 -1
  154. package/dist/esm/generators/RIOT/index.js +1 -1
  155. package/dist/esm/generators/SERVER/index.js +1 -1
  156. package/dist/esm/generators/SFC_VUE/index.js +1 -1
  157. package/dist/esm/generators/SVELTE/index.js +0 -1
  158. package/dist/esm/generators/VUE/index.js +1 -1
  159. package/dist/esm/generators/VUE3/index.js +1 -1
  160. package/dist/esm/generators/WEBPACK_REACT/index.js +1 -1
  161. package/dist/esm/generators/baseGenerator.js +38 -4
  162. package/dist/esm/generators/configure.js +3 -1
  163. package/dist/esm/helpers.js +9 -8
  164. package/dist/esm/initiate.js +44 -34
  165. package/dist/esm/js-package-manager/JsPackageManager.js +8 -8
  166. package/dist/esm/js-package-manager/PackageJson.js +5 -1
  167. package/dist/esm/js-package-manager/PackageJsonHelper.js +1 -1
  168. package/dist/esm/project_types.js +2 -1
  169. package/dist/esm/repro-generators/configs.js +51 -8
  170. package/dist/esm/repro-generators/scripts.js +46 -14
  171. package/dist/esm/repro.js +3 -2
  172. package/dist/esm/typings.d.ts +3 -0
  173. package/dist/esm/upgrade.js +27 -9
  174. package/dist/esm/versions.js +67 -0
  175. package/dist/esm/window.d.js +5 -1
  176. package/dist/modern/add.js +3 -3
  177. package/dist/modern/automigrate/fixes/builder-vite.js +122 -0
  178. package/dist/modern/automigrate/fixes/eslint-plugin.js +3 -3
  179. package/dist/modern/automigrate/fixes/index.js +3 -1
  180. package/dist/modern/automigrate/fixes/mainjsFramework.js +2 -2
  181. package/dist/modern/automigrate/fixes/webpack5.js +2 -2
  182. package/dist/modern/automigrate/types.js +5 -1
  183. package/dist/modern/babel-config.js +1 -1
  184. package/dist/modern/detect.js +67 -4
  185. package/dist/modern/extract.js +7 -2
  186. package/dist/modern/frameworks/common/header.css +6 -0
  187. package/dist/modern/frameworks/html/js/Header.js +2 -0
  188. package/dist/modern/frameworks/html/js/Header.stories.js +8 -1
  189. package/dist/modern/frameworks/html/js/Page.js +29 -2
  190. package/dist/modern/frameworks/html/js/Page.stories.js +12 -13
  191. package/dist/modern/frameworks/preact/Header.jsx +6 -1
  192. package/dist/modern/frameworks/preact/Header.stories.jsx +7 -1
  193. package/dist/modern/frameworks/preact/Page.jsx +62 -63
  194. package/dist/modern/frameworks/preact/Page.stories.jsx +12 -9
  195. package/dist/modern/frameworks/react/js/Header.jsx +6 -1
  196. package/dist/modern/frameworks/react/js/Header.stories.jsx +7 -1
  197. package/dist/modern/frameworks/react/js/Page.jsx +61 -63
  198. package/dist/modern/frameworks/react/js/Page.stories.jsx +12 -9
  199. package/dist/modern/frameworks/svelte/Button.stories.js +51 -0
  200. package/dist/modern/frameworks/svelte/Header.stories.js +35 -0
  201. package/dist/modern/frameworks/svelte/Header.svelte +3 -0
  202. package/dist/modern/frameworks/svelte/Page.stories.js +27 -0
  203. package/dist/modern/frameworks/svelte/Page.svelte +2 -16
  204. package/dist/modern/frameworks/vue/Header.stories.js +7 -1
  205. package/dist/modern/frameworks/vue/Header.vue +1 -0
  206. package/dist/modern/frameworks/vue/Page.stories.js +15 -13
  207. package/dist/modern/frameworks/vue/Page.vue +7 -7
  208. package/dist/modern/frameworks/vue3/Header.stories.js +7 -1
  209. package/dist/modern/frameworks/vue3/Header.vue +1 -0
  210. package/dist/modern/frameworks/vue3/Page.stories.js +16 -17
  211. package/dist/modern/frameworks/vue3/Page.vue +18 -8
  212. package/dist/modern/frameworks/web-components/js/Page.js +2 -2
  213. package/dist/modern/generate.js +5 -0
  214. package/dist/modern/generators/ANGULAR/angular-helpers.js +5 -5
  215. package/dist/modern/generators/ANGULAR/index.js +2 -2
  216. package/dist/modern/generators/ANGULAR/template-csf/.storybook/tsconfig.json +17 -5
  217. package/dist/modern/generators/AURELIA/index.js +1 -1
  218. package/dist/modern/generators/AURELIA/template-csf/.storybook/tsconfig.json +16 -5
  219. package/dist/modern/generators/EMBER/index.js +1 -1
  220. package/dist/modern/generators/HTML/index.js +1 -1
  221. package/dist/modern/generators/METEOR/index.js +1 -1
  222. package/dist/modern/generators/MITHRIL/index.js +1 -1
  223. package/dist/modern/generators/PREACT/index.js +1 -1
  224. package/dist/modern/generators/RAX/index.js +1 -1
  225. package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/addons.js +3 -3
  226. package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +2 -2
  227. package/dist/modern/generators/REACT_SCRIPTS/index.js +9 -1
  228. package/dist/modern/generators/RIOT/index.js +1 -1
  229. package/dist/modern/generators/SERVER/index.js +1 -1
  230. package/dist/modern/generators/SFC_VUE/index.js +1 -1
  231. package/dist/modern/generators/SVELTE/index.js +0 -1
  232. package/dist/modern/generators/VUE/index.js +1 -1
  233. package/dist/modern/generators/VUE3/index.js +1 -1
  234. package/dist/modern/generators/WEBPACK_REACT/index.js +1 -1
  235. package/dist/modern/generators/baseGenerator.js +38 -4
  236. package/dist/modern/generators/configure.js +3 -1
  237. package/dist/modern/helpers.js +9 -8
  238. package/dist/modern/initiate.js +44 -34
  239. package/dist/modern/js-package-manager/JsPackageManager.js +8 -8
  240. package/dist/modern/js-package-manager/PackageJson.js +5 -1
  241. package/dist/modern/js-package-manager/PackageJsonHelper.js +1 -1
  242. package/dist/modern/project_types.js +2 -1
  243. package/dist/modern/repro-generators/configs.js +51 -8
  244. package/dist/modern/repro-generators/scripts.js +46 -14
  245. package/dist/modern/repro.js +3 -2
  246. package/dist/modern/typings.d.ts +3 -0
  247. package/dist/modern/upgrade.js +27 -9
  248. package/dist/modern/versions.js +67 -0
  249. package/dist/modern/window.d.js +5 -1
  250. package/dist/ts3.4/automigrate/fixes/builder-vite.d.ts +19 -0
  251. package/dist/ts3.4/detect.d.ts +10 -3
  252. package/dist/ts3.4/initiate.d.ts +1 -0
  253. package/dist/ts3.4/js-package-manager/PackageJson.d.ts +2 -8
  254. package/dist/ts3.4/js-package-manager/PackageJsonHelper.d.ts +2 -2
  255. package/dist/ts3.4/project_types.d.ts +2 -1
  256. package/dist/ts3.4/repro-generators/configs.d.ts +8 -0
  257. package/dist/ts3.4/upgrade.d.ts +2 -1
  258. package/dist/ts3.4/versions.d.ts +60 -0
  259. package/dist/ts3.9/automigrate/fixes/builder-vite.d.ts +19 -0
  260. package/dist/ts3.9/detect.d.ts +10 -3
  261. package/dist/ts3.9/initiate.d.ts +1 -0
  262. package/dist/ts3.9/js-package-manager/PackageJson.d.ts +2 -8
  263. package/dist/ts3.9/js-package-manager/PackageJsonHelper.d.ts +2 -2
  264. package/dist/ts3.9/project_types.d.ts +2 -1
  265. package/dist/ts3.9/repro-generators/configs.d.ts +9 -1
  266. package/dist/ts3.9/upgrade.d.ts +2 -1
  267. package/dist/ts3.9/versions.d.ts +60 -0
  268. package/package.json +12 -12
  269. package/dist/cjs/automigrate/helpers/getStorybookConfiguration.js +0 -27
  270. package/dist/cjs/automigrate/helpers/getStorybookInfo.js +0 -94
  271. package/dist/cjs/frameworks/svelte/Button.stories.svelte +0 -57
  272. package/dist/cjs/frameworks/svelte/Header.stories.svelte +0 -32
  273. package/dist/cjs/frameworks/svelte/Page.stories.svelte +0 -32
  274. package/dist/cjs/typings.d.js +0 -1
  275. package/dist/cjs/versions.json +0 -59
  276. package/dist/esm/automigrate/helpers/getStorybookConfiguration.js +0 -27
  277. package/dist/esm/automigrate/helpers/getStorybookInfo.js +0 -94
  278. package/dist/esm/frameworks/svelte/Button.stories.svelte +0 -57
  279. package/dist/esm/frameworks/svelte/Header.stories.svelte +0 -32
  280. package/dist/esm/frameworks/svelte/Page.stories.svelte +0 -32
  281. package/dist/esm/typings.d.js +0 -1
  282. package/dist/esm/versions.json +0 -59
  283. package/dist/modern/automigrate/helpers/getStorybookConfiguration.js +0 -27
  284. package/dist/modern/automigrate/helpers/getStorybookInfo.js +0 -94
  285. package/dist/modern/frameworks/svelte/Button.stories.svelte +0 -57
  286. package/dist/modern/frameworks/svelte/Header.stories.svelte +0 -32
  287. package/dist/modern/frameworks/svelte/Page.stories.svelte +0 -32
  288. package/dist/modern/typings.d.js +0 -1
  289. package/dist/modern/versions.json +0 -59
  290. package/dist/ts3.4/automigrate/helpers/getStorybookConfiguration.d.ts +0 -1
  291. package/dist/ts3.4/automigrate/helpers/getStorybookInfo.d.ts +0 -11
  292. package/dist/ts3.9/automigrate/helpers/getStorybookConfiguration.d.ts +0 -1
  293. package/dist/ts3.9/automigrate/helpers/getStorybookInfo.d.ts +0 -11
@@ -3,65 +3,71 @@ import React from 'react';
3
3
  import { Header } from './Header';
4
4
  import './page.css';
5
5
 
6
- interface PageProps {
7
- user?: {};
8
- onLogin: () => void;
9
- onLogout: () => void;
10
- onCreateAccount: () => void;
11
- }
6
+ type User = {
7
+ name: string;
8
+ };
12
9
 
13
- export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
14
- <article>
15
- <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
10
+ export const Page: React.VFC = () => {
11
+ const [user, setUser] = React.useState<User>();
16
12
 
17
- <section>
18
- <h2>Pages in Storybook</h2>
19
- <p>
20
- We recommend building UIs with a{' '}
21
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
22
- <strong>component-driven</strong>
23
- </a>{' '}
24
- process starting with atomic components and ending with pages.
25
- </p>
26
- <p>
27
- Render pages with mock data. This makes it easy to build and review page states without
28
- needing to navigate to them in your app. Here are some handy patterns for managing page data
29
- in Storybook:
30
- </p>
31
- <ul>
32
- <li>
33
- Use a higher-level connected component. Storybook helps you compose such data from the
34
- "args" of child component stories
35
- </li>
36
- <li>
37
- Assemble data in the page component from your services. You can mock these services out
38
- using Storybook.
39
- </li>
40
- </ul>
41
- <p>
42
- Get a guided tutorial on component-driven development at{' '}
43
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
44
- Storybook tutorials
45
- </a>
46
- . Read more in the{' '}
47
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
48
- docs
49
- </a>
50
- .
51
- </p>
52
- <div className="tip-wrapper">
53
- <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
54
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
55
- <g fill="none" fillRule="evenodd">
56
- <path
57
- 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"
58
- id="a"
59
- fill="#999"
60
- />
61
- </g>
62
- </svg>
63
- Viewports addon in the toolbar
64
- </div>
65
- </section>
66
- </article>
67
- );
13
+ return (
14
+ <article>
15
+ <Header
16
+ user={user}
17
+ onLogin={() => setUser({ name: 'Jane Doe' })}
18
+ onLogout={() => setUser(undefined)}
19
+ onCreateAccount={() => setUser({ name: 'Jane Doe' })}
20
+ />
21
+
22
+ <section>
23
+ <h2>Pages in Storybook</h2>
24
+ <p>
25
+ We recommend building UIs with a{' '}
26
+ <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
27
+ <strong>component-driven</strong>
28
+ </a>{' '}
29
+ process starting with atomic components and ending with pages.
30
+ </p>
31
+ <p>
32
+ Render pages with mock data. This makes it easy to build and review page states without
33
+ needing to navigate to them in your app. Here are some handy patterns for managing page
34
+ data in Storybook:
35
+ </p>
36
+ <ul>
37
+ <li>
38
+ Use a higher-level connected component. Storybook helps you compose such data from the
39
+ "args" of child component stories
40
+ </li>
41
+ <li>
42
+ Assemble data in the page component from your services. You can mock these services out
43
+ using Storybook.
44
+ </li>
45
+ </ul>
46
+ <p>
47
+ Get a guided tutorial on component-driven development at{' '}
48
+ <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
49
+ Storybook tutorials
50
+ </a>
51
+ . Read more in the{' '}
52
+ <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
53
+ docs
54
+ </a>
55
+ .
56
+ </p>
57
+ <div className="tip-wrapper">
58
+ <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
59
+ <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
60
+ <g fill="none" fillRule="evenodd">
61
+ <path
62
+ d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
63
+ id="a"
64
+ fill="#999"
65
+ />
66
+ </g>
67
+ </svg>
68
+ Viewports addon in the toolbar
69
+ </div>
70
+ </section>
71
+ </article>
72
+ );
73
+ };
@@ -0,0 +1,51 @@
1
+ import Button from './Button.svelte';
2
+
3
+ // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
4
+ // More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
5
+ export default {
6
+ title: 'Example/Button',
7
+ component: Button,
8
+ argTypes: {
9
+ backgroundColor: { control: 'color' },
10
+ label: { control: 'text' },
11
+ onClick: { action: 'onClick' },
12
+ primary: { control: 'boolean' },
13
+ size: {
14
+ control: { type: 'select' },
15
+ options: ['small', 'medium', 'large'],
16
+ },
17
+ },
18
+ };
19
+
20
+ // More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
21
+ const Template = (args) => ({
22
+ Component: Button,
23
+ props: args,
24
+ on: {
25
+ click: args.onClick,
26
+ },
27
+ });
28
+
29
+ // More on args: https://storybook.js.org/docs/svelte/writing-stories/args
30
+ export const Primary = Template.bind({});
31
+ Primary.args = {
32
+ primary: true,
33
+ label: 'Button',
34
+ };
35
+
36
+ export const Secondary = Template.bind({});
37
+ Secondary.args = {
38
+ label: 'Button',
39
+ };
40
+
41
+ export const Large = Template.bind({});
42
+ Large.args = {
43
+ size: 'large',
44
+ label: 'Button',
45
+ };
46
+
47
+ export const Small = Template.bind({});
48
+ Small.args = {
49
+ size: 'small',
50
+ label: 'Button',
51
+ };
@@ -0,0 +1,35 @@
1
+ import Header from './Header.svelte';
2
+
3
+ export default {
4
+ title: 'Example/Header',
5
+ component: Header,
6
+ parameters: {
7
+ // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
8
+ layout: 'fullscreen',
9
+ },
10
+ argTypes: {
11
+ onLogin: { action: 'onLogin' },
12
+ onLogout: { action: 'onLogout' },
13
+ onCreateAccount: { action: 'onCreateAccount' },
14
+ },
15
+ };
16
+
17
+ const Template = (args) => ({
18
+ Component: Header,
19
+ props: args,
20
+ on: {
21
+ login: args.onLogin,
22
+ logout: args.onLogout,
23
+ createAccount: args.onCreateAccount,
24
+ },
25
+ });
26
+
27
+ export const LoggedIn = Template.bind({});
28
+ LoggedIn.args = {
29
+ user: {
30
+ name: 'Jane Doe',
31
+ },
32
+ };
33
+
34
+ export const LoggedOut = Template.bind({});
35
+ LoggedOut.args = {};
@@ -37,6 +37,9 @@
37
37
  </div>
38
38
  <div>
39
39
  {#if user}
40
+ <span class="welcome">
41
+ Welcome, <b>{user.name}</b>!
42
+ </span>
40
43
  <Button size="small" on:click={onLogout} label="Log out" />
41
44
  {/if}
42
45
  {#if !user}
@@ -0,0 +1,27 @@
1
+ import { within, userEvent } from '@storybook/testing-library';
2
+ import Page from './Page.svelte';
3
+
4
+ export default {
5
+ title: 'Example/Page',
6
+ component: Page,
7
+ parameters: {
8
+ // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
9
+ layout: 'fullscreen',
10
+ },
11
+ };
12
+
13
+ const Template = (args) => ({
14
+ Component: Page,
15
+ props: args,
16
+ });
17
+
18
+ export const LoggedOut = Template.bind({});
19
+ LoggedOut.args = {};
20
+
21
+ // More on interaction testing: https://storybook.js.org/docs/svelte/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);
27
+ };
@@ -2,25 +2,11 @@
2
2
  import './page.css';
3
3
  import Header from './Header.svelte';
4
4
 
5
- import { createEventDispatcher } from 'svelte';
6
-
7
- export let user = null;
8
-
9
- const dispatch = createEventDispatcher();
10
-
11
- function onLogin(event) {
12
- dispatch('login', event);
13
- }
14
- function onLogout(event) {
15
- dispatch('logout', event);
16
- }
17
- function onCreateAccount(event) {
18
- dispatch('createAccount', event);
19
- }
5
+ let user = null;
20
6
  </script>
21
7
 
22
8
  <article>
23
- <Header {user} on:login={onLogin} on:logout={onLogout} on:createAccount={onCreateAccount} />
9
+ <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
24
10
 
25
11
  <section>
26
12
  <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 = (args, { argTypes }) => ({
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
- LoggedOut.args = {
24
- ...HeaderStories.LoggedOut.args,
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
- props: {
71
- user: {
72
- type: Object,
73
- },
70
+ data() {
71
+ return {
72
+ user: null,
73
+ };
74
74
  },
75
75
 
76
76
  methods: {
77
77
  onLogin() {
78
- this.$emit('onLogin');
78
+ this.user = { name: 'Jane Doe' };
79
79
  },
80
80
  onLogout() {
81
- this.$emit('onLogout');
81
+ this.user = null;
82
82
  },
83
83
  onCreateAccount() {
84
- this.$emit('onCreateAccount');
84
+ this.user = { name: 'Jane Doe' };
85
85
  },
86
86
  },
87
87
  };
@@ -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
@@ -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));
@@ -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);