@storybook/cli 7.0.0-alpha.4 → 7.0.0-alpha.40

package/{dist/cjs/frameworks → rendererAssets}/angular/Button.stories.ts

@@ -1,5 +1,4 @@
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Meta, StoryFn } from '@storybook/angular';
 import Button from './button.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
@@ -13,7 +12,7 @@ export default {
 } as Meta;
 
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: Story<Button> = (args: Button) => {
+const Template: StoryFn<Button> = (args: Button) => {
   return {
     props: { backgroundColor: null, ...args },
   };

package/{dist/esm/frameworks → rendererAssets}/angular/Header.stories.ts

@@ -1,6 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -20,7 +20,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<Header> = (args: Header) => ({
+const Template: StoryFn<Header> = (args: Header) => ({
   props: args,
 });
 

package/{dist/esm/frameworks → rendererAssets}/angular/Page.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
@@ -10,7 +10,7 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on StoryFn layout: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
   decorators: [
@@ -21,7 +21,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story<Page> = (args: Page) => ({
+const Template: StoryFn<Page> = (args: Page) => ({
   props: args,
 });
 

package/{dist/cjs/frameworks → 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/{dist/esm/frameworks → 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/{dist/cjs/frameworks → 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/{dist/cjs/frameworks → rendererAssets}/html/ts/Button.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createButton, ButtonProps } from './Button';
 
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
@@ -15,10 +15,10 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+} as Meta<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   // You can either use a function to create DOM elements or use a plain html string!
   // return `<div>${label}</div>`;
   return createButton(args);

package/{dist/cjs/frameworks → rendererAssets}/html/ts/Button.ts

@@ -36,12 +36,16 @@ export const createButton = ({
   const btn = document.createElement('button');
   btn.type = 'button';
   btn.innerText = label;
-  btn.addEventListener('click', onClick);
+  if (onClick) {
+    btn.addEventListener('click', onClick);
+  }
 
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
 
-  btn.style.backgroundColor = backgroundColor;
+  if (backgroundColor) {
+    btn.style.backgroundColor = backgroundColor;
+  }
 
   return btn;
 };

package/{dist/cjs/frameworks → rendererAssets}/html/ts/Header.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createHeader, HeaderProps } from './Header';
 
 export default {
@@ -13,9 +13,9 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta;
+} as Meta<HeaderProps>;
 
-const Template: Story<HeaderProps> = (args) => createHeader(args);
+const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/{dist/cjs/frameworks → rendererAssets}/html/ts/Page.stories.ts

@@ -1,5 +1,5 @@
 import { within, userEvent } from '@storybook/testing-library';
-import { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createPage } from './Page';
 
 export default {
@@ -10,7 +10,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => createPage();
+const Template: StoryFn = () => createPage();
 
 export const LoggedOut = Template.bind({});
 

package/{dist/esm/frameworks → rendererAssets}/html/ts/Page.ts

@@ -7,12 +7,12 @@ type User = {
 
 export const createPage = () => {
   const article = document.createElement('article');
-  let user: User = null;
-  let header = null;
+  let user: User | undefined;
+  let header: HTMLElement | null = null;
 
   const rerenderHeader = () => {
     const wrapper = document.getElementsByTagName('article')[0];
-    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement);
   };
 
   const onLogin = () => {
@@ -21,7 +21,7 @@ export const createPage = () => {
   };
 
   const onLogout = () => {
-    user = null;
+    user = undefined;
     rerenderHeader();
   };
 

package/{dist/esm/frameworks → 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/{dist/cjs/frameworks → 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/{dist/cjs/frameworks → 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/{dist/esm/frameworks → 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/{dist/esm/frameworks → 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/{dist/esm/frameworks → 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/{dist/esm/frameworks/react/js → rendererAssets/preact}/Button.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import './button.css';
 

package/{dist/cjs/frameworks → 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/{dist/esm/frameworks/react/js → rendererAssets/preact}/Header.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Button } from './Button';

package/{dist/esm/frameworks → rendererAssets}/preact/Header.stories.jsx

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

package/{dist/esm/frameworks → rendererAssets}/preact/Page.jsx

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

package/{dist/esm/frameworks → 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/{dist/cjs/frameworks → rendererAssets}/react/ts/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -14,7 +14,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args

package/{dist/cjs/frameworks → rendererAssets}/react/ts/Header.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Header } from './Header';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

package/{dist/cjs/frameworks → rendererAssets}/react/ts/Page.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { Page } from './Page';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
 
 export const LoggedOut = Template.bind({});
 

package/{dist/esm/frameworks → rendererAssets}/server/button.stories.json

@@ -1,4 +1,4 @@
- {
+{
   "title": "Example/Button",
   "parameters": {
     "server": { "id": "button" }

package/{dist/esm/frameworks → rendererAssets}/svelte/Button.svelte

@@ -28,15 +28,16 @@
   /**
    * Optional click handler
    */
-  function onClick(event) {
+  export let onClick = (event) => {
     dispatch('click', event);
-  }
+  };
 </script>
 
 <button
   type="button"
   class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
   {style}
-  on:click={onClick}>
+  on:click={onClick}
+>
   {label}
 </button>

package/{dist/esm/frameworks → rendererAssets}/vue/Header.stories.js

@@ -1,4 +1,4 @@
-import MyHeader from './Header';
+import MyHeader from './Header.vue';
 
 export default {
   title: 'Example/Header',