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

package/rendererAssets/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "rules": {
+    "no-undef": "off",
+    "@typescript-eslint/ban-types": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  },
+  "overrides": [
+    {
+      "files": ["nextjs/**/*.@(jsx|tsx)"],
+      "rules": {
+        "react/no-unknown-property": "off"
+      }
+    }
+  ]
+}

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/preact → rendererAssets/nextjs/js}/Button.jsx

@@ -1,5 +1,4 @@
-/** @jsx h */
-import { h } from 'preact';
+import React from 'react';
 import PropTypes from 'prop-types';
 import './button.css';
 
@@ -12,10 +11,14 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
     <button
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
       {...props}
     >
       {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
     </button>
   );
 };

package/{dist/esm/frameworks/common → rendererAssets/nextjs/js}/Introduction.stories.mdx

@@ -1,4 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
+import Image from 'next/image';
+
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';
@@ -75,7 +77,7 @@ import StackAlt from './assets/stackalt.svg';
       margin-bottom: 2px;
     }
 
-    .link-item img {
+    .link-item-img-wrapper {
       height: 40px;
       width: 40px;
       margin-right: 15px;
@@ -131,7 +133,9 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     href="https://storybook.js.org/docs/react/addons/addon-types"
     target="_blank"
   >
-    <img src={Plugin} alt="plugin" />
+    <div className="link-item-img-wrapper">
+      <Image src={Plugin} alt="plugin" />
+    </div>
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
@@ -142,7 +146,9 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     href="https://storybook.js.org/docs/react/configure/webpack"
     target="_blank"
   >
-    <img src={StackAlt} alt="Build" />
+    <div className="link-item-img-wrapper">
+      <Image src={StackAlt} alt="Build" />
+    </div>
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
@@ -153,7 +159,9 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     href="https://storybook.js.org/docs/react/configure/styling-and-css"
     target="_blank"
   >
-    <img src={Colors} alt="colors" />
+    <div className="link-item-img-wrapper">
+      <Image src={Colors} alt="colors" />
+    </div>
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
@@ -164,7 +172,9 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
     href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
     target="_blank"
   >
-    <img src={Flow} alt="flow" />
+    <div className="link-item-img-wrapper">
+      <Image src={Flow} alt="flow" />
+    </div>
     <span>
       <strong>Data</strong>
       Providers and mocking for data libraries
@@ -176,28 +186,36 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 
 <div className="link-list">
   <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
+    <div className="link-item-img-wrapper">
+      <Image src={Repo} alt="repo" />
+    </div>
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
   <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
+    <div className="link-item-img-wrapper">
+      <Image src={Direction} alt="direction" />
+    </div>
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
   <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
+    <div className="link-item-img-wrapper">
+      <Image src={Code} alt="code" />
+    </div>
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
   <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
+    <div className="link-item-img-wrapper">
+      <Image src={Comments} alt="comments" />
+    </div>
     <span>
       <strong>Discord chat</strong>
       Chat with maintainers and the community
@@ -206,6 +224,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>stories/Introduction.stories.mdx</code>
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
 </div>

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

@@ -39,10 +39,14 @@ export const Button = ({
     <button
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
       {...props}
     >
       {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
     </button>
   );
 };

package/{dist/cjs/frameworks/react → rendererAssets/nextjs}/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 = {