@storybook/cli 7.0.0-alpha.35 → 7.0.0-alpha.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.35",
+  "version": "7.0.0-alpha.38",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -43,13 +43,13 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.35",
-    "@storybook/core-common": "7.0.0-alpha.35",
-    "@storybook/core-server": "7.0.0-alpha.35",
-    "@storybook/csf-tools": "7.0.0-alpha.35",
-    "@storybook/node-logger": "7.0.0-alpha.35",
-    "@storybook/semver": "^7.3.2",
-    "@storybook/telemetry": "7.0.0-alpha.35",
+    "@storybook/codemod": "7.0.0-alpha.38",
+    "@storybook/core-common": "7.0.0-alpha.38",
+    "@storybook/core-server": "7.0.0-alpha.38",
+    "@storybook/csf-tools": "7.0.0-alpha.38",
+    "@storybook/node-logger": "7.0.0-alpha.38",
+    "@storybook/telemetry": "7.0.0-alpha.38",
+    "@types/semver": "^7.3.4",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
@@ -67,13 +67,14 @@
     "prompts": "^2.4.0",
     "puppeteer-core": "^2.1.1",
     "read-pkg-up": "^7.0.1",
+    "semver": "^7.3.7",
     "shelljs": "^0.8.5",
     "strip-json-comments": "^3.0.1",
     "ts-dedent": "^2.0.0",
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.35",
+    "@storybook/client-api": "7.0.0-alpha.38",
     "@types/cross-spawn": "^6.0.2",
     "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.9",
@@ -94,5 +95,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "d8972df8c6c1c4716131a856751f5914acddaad1"
+  "gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431"
 }

package/rendererAssets/aurelia/1-Button.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Button',
   component: Button,
   argTypes: {
-    text: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
@@ -18,19 +18,19 @@ const Template = (args) => ({
 
 export const Text = Template.bind({});
 Text.args = {
-  text: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };
 
 export const Emoji = Template.bind({});
 Emoji.args = {
-  text: '😀 😎 👍 💯',
+  label: '😀 😎 👍 💯',
 };
 
 export const TextWithAction = () => ({
   component: Button,
   props: {
-    text: 'Trigger Action',
+    label: 'Trigger Action',
     onClick: () => action('This was clicked')(),
   },
 });
@@ -41,7 +41,7 @@ TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
 export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
-    text: 'Go to Welcome Story',
+    label: 'Go to Welcome Story',
     onClick: linkTo('example-introduction--page'),
   },
 });

package/rendererAssets/aurelia/button.ts

@@ -4,7 +4,7 @@ import { customElement, bindable } from 'aurelia';
   name: 'storybook-button-component',
   template: `
   <template>
-    <button click.delegate="onClick($event)">\${text}</button>
+    <button click.delegate="onClick($event)">\${label}</button>
     <style>
     button {
       border: 1px solid #eee;
@@ -21,7 +21,7 @@ import { customElement, bindable } from 'aurelia';
 })
 export default class Button {
   @bindable()
-  text = '';
+  label = '';
 
   @bindable()
   onClick: MouseEvent;

package/rendererAssets/ember/1-Button.stories.js

@@ -7,26 +7,26 @@ export default {
   title: 'Button',
   // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
-    children: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
 // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
 const Template = (args) => ({
-  template: hbs`<button {{action onClick}}>{{children}}</button>`,
+  template: hbs`<button {{action onClick}}>{{label}}</button>`,
   context: args,
 });
 
 export const Text = Template.bind({});
 // More on args: https://storybook.js.org/docs/ember/writing-stories/args
 Text.args = {
-  children: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };
 
 export const Emoji = Template.bind({});
 Emoji.args = {
-  children: '😀 😎 👍 💯',
+  label: '😀 😎 👍 💯',
 };
 
 export const TextWithAction = () => ({

package/rendererAssets/marko/1-Button.stories.js

@@ -6,7 +6,7 @@ export default {
   title: 'Button',
   // More on argTypes: https://storybook.js.org/docs/marko/api/argtypes
   argTypes: {
-    children: { control: 'text' },
+    label: { control: 'text' },
   },
 };
 
@@ -19,6 +19,6 @@ const Template = (args) => ({
 export const Text = Template.bind({});
 // More on args: https://storybook.js.org/docs/marko/writing-stories/args
 Text.args = {
-  children: 'Button',
+  label: 'Button',
   onClick: action('onClick'),
 };

package/rendererAssets/marko/Button.marko

@@ -9,5 +9,5 @@ class {
 }
 
 <div>
-  <button type="button" on-click("handleClick")>${input.children}</button>
+  <button type="button" on-click("handleClick")>${input.label}</button>
 </div>

package/rendererAssets/mithril/Button.js

@@ -4,7 +4,7 @@ import m from 'mithril';
 import './button.css';
 
 export const Button = {
-  view: ({ children, attrs }) => {
+  view: ({ label, attrs }) => {
     const mode = attrs.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
     const size = attrs.size || 'medium';
 
@@ -15,7 +15,7 @@ export const Button = {
         style={attrs.backgroundColor && { backgroundColor: attrs.backgroundColor }}
         onclick={attrs.onClick}
       >
-        {children}
+        {label}
       </button>
     );
   },

package/rendererAssets/mithril/Button.stories.js

@@ -14,30 +14,30 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/mithril/writing-stories/introduction#using-args
-const Template = ({ children, ...args }) => ({
-  view: () => m(Button, args, children),
+const Template = ({ label, ...args }) => ({
+  view: () => m(Button, args, label),
 });
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/mithril/writing-stories/args
 Primary.args = {
   primary: true,
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Large = Template.bind({});
 Large.args = {
   size: 'large',
-  children: 'Button',
+  label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
   size: 'small',
-  children: 'Button',
+  label: 'Button',
 };

package/rendererAssets/mithril/Header.stories.js

@@ -7,8 +7,8 @@ export default {
   component: Header,
 };
 
-const Template = ({ children, ...args }) => ({
-  view: () => m(Header, args, children),
+const Template = ({ label, ...args }) => ({
+  view: () => m(Header, args, label),
 });
 
 export const LoggedIn = Template.bind({});

package/rendererAssets/mithril/Page.stories.js

@@ -8,8 +8,8 @@ export default {
   component: Page,
 };
 
-const Template = ({ children, ...args }) => ({
-  view: () => m(Page, args, children),
+const Template = ({ label, ...args }) => ({
+  view: () => m(Page, args, label),
 });
 
 export const LoggedIn = Template.bind({});

package/rendererAssets/preact/Button.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import PropTypes from 'prop-types';
 import './button.css';
 

package/rendererAssets/preact/Button.stories.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import { Button } from './Button';
 
 // More on default export: https://storybook.js.org/docs/preact/writing-stories/introduction#default-export

package/rendererAssets/preact/Header.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h, Fragment } from 'preact';
 import PropTypes from 'prop-types';
 
 import { Button } from './Button';
@@ -29,17 +27,17 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
       </div>
       <div>
         {user ? (
-          <Fragment>
+          <>
             <span className="welcome">
               Welcome, <b>{user.name}</b>!
             </span>
             <Button size="small" onClick={onLogout} label="Log out" />
-          </Fragment>
+          </>
         ) : (
-          <Fragment>
+          <>
             <Button size="small" onClick={onLogin} label="Log in" />
             <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </Fragment>
+          </>
         )}
       </div>
     </div>

package/rendererAssets/preact/Header.stories.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import { Header } from './Header';
 
 export default {

package/rendererAssets/preact/Page.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import { useState } from 'preact/hooks';
 
 import { Header } from './Header';

package/rendererAssets/preact/Page.stories.jsx

@@ -1,5 +1,3 @@
-/** @jsx h */
-import { h } from 'preact';
 import { within, userEvent } from '@storybook/testing-library';
 
 import { Page } from './Page';

package/rendererAssets/vue/Header.vue

@@ -4,18 +4,9 @@
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
           </g>
         </svg>
         <h1>Acme</h1>

package/rendererAssets/vue3/Header.vue

@@ -4,18 +4,9 @@
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
+            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+            <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
           </g>
         </svg>
         <h1>Acme</h1>

package/templates/react-native/template-csf/storybook/stories/Button/index.js

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableHighlight } from 'react-native';
 
-export default function Button({ onPress, children }) {
-  return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+export default function Button({ onPress, label }) {
+  return <TouchableHighlight onPress={onPress}>{label}</TouchableHighlight>;
 }
 
 Button.defaultProps = {
-  children: null,
+  label: null,
   onPress: () => {},
 };
 
 Button.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
   onPress: PropTypes.func,
 };

package/templates/react-native/template-csf/storybook/stories/CenterView/index.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import style from './style';
 
-export default function CenterView({ children }) {
-  return <View style={style.main}>{children}</View>;
+export default function CenterView({ label }) {
+  return <View style={style.main}>{label}</View>;
 }
 
 CenterView.defaultProps = {
-  children: null,
+  label: null,
 };
 
 CenterView.propTypes = {
-  children: PropTypes.node,
+  label: PropTypes.node,
 };