@storybook/cli 6.5.0-alpha.64 → 6.5.0-beta.0

package/dist/cjs/frameworks/svelte/Header.stories.js

@@ -3,6 +3,10 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -22,7 +26,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/cjs/frameworks/svelte/Header.svelte

@@ -37,6 +37,9 @@
     </div>
     <div>
       {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
         <Button size="small" on:click={onLogout} label="Log out" />
       {/if}
       {#if !user}

package/dist/cjs/frameworks/svelte/Page.stories.js

@@ -1,29 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
 import Page from './Page.svelte';
 
 export default {
   title: 'Example/Page',
   component: Page,
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
 const Template = (args) => ({
   Component: Page,
   props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};
+
+// More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
+};

package/dist/cjs/frameworks/svelte/Page.svelte

@@ -2,25 +2,11 @@
   import './page.css';
   import Header from './Header.svelte';
 
-  import { createEventDispatcher } from 'svelte';
-
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+  let user = null;
 </script>
 
 <article>
-  <Header {user} on:login={onLogin} on:logout={onLogout} on:createAccount={onCreateAccount} />
+  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
 
   <section>
     <h2>Pages in Storybook</h2>

package/dist/cjs/frameworks/vue3/Header.stories.js

@@ -3,6 +3,10 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => ({
@@ -19,7 +23,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/cjs/frameworks/vue3/Header.vue

@@ -21,6 +21,7 @@
         <h1>Acme</h1>
       </div>
       <div>
+        <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
         <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
         <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
         <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />

package/dist/cjs/frameworks/vue3/Page.stories.js

@@ -1,30 +1,29 @@
+import { within, userEvent } from '@storybook/testing-library';
 import MyPage from './Page.vue';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
-const Template = (args) => ({
+const Template = () => ({
   // Components used in your story `template` are defined in the `components` object
   components: { MyPage },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    // Story args can be mapped to keys in the returned object
-    return { user: args.user };
-  },
-  // Then, those values can be accessed directly in the template
-  template: '<my-page :user="user" />',
-});
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
+  // Here we define the `template`
+  template: '<my-page />',
+});
 
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/cjs/frameworks/vue3/Page.vue

@@ -2,9 +2,9 @@
   <article>
     <my-header
       :user="user"
-      @login="$emit('login')"
-      @logout="$emit('logout')"
-      @createAccount="$emit('createAccount')"
+      @login="onLogin"
+      @logout="onLogout"
+      @createAccount="onCreateAccount"
     />
 
     <section>
@@ -67,12 +67,22 @@ export default {
 
   components: { MyHeader },
 
-  props: {
-    user: {
-      type: Object,
-    },
+  data() {
+    return {
+      user: null
+    }
   },
 
-  emits: ['login', 'logout', 'createAccount'],
+  methods: {
+    onLogin() {
+      this.user = { name: 'Jane Doe' };
+    },
+    onLogout() {
+      this.user = null;
+    },
+    onCreateAccount() {
+      this.user = { name: 'Jane Doe' };
+    },
+  },
 };
 </script>

package/dist/cjs/generators/baseGenerator.js

@@ -56,7 +56,7 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react', 'angular', 'preact'].includes(framework);
+const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue3'].includes(framework);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,

package/dist/cjs/versions.js

@@ -6,61 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '6.5.0-alpha.64',
-  '@storybook/addon-actions': '6.5.0-alpha.64',
-  '@storybook/addon-backgrounds': '6.5.0-alpha.64',
-  '@storybook/addon-controls': '6.5.0-alpha.64',
-  '@storybook/addon-docs': '6.5.0-alpha.64',
-  '@storybook/addon-essentials': '6.5.0-alpha.64',
-  '@storybook/addon-interactions': '6.5.0-alpha.64',
-  '@storybook/addon-jest': '6.5.0-alpha.64',
-  '@storybook/addon-links': '6.5.0-alpha.64',
-  '@storybook/addon-measure': '6.5.0-alpha.64',
-  '@storybook/addon-outline': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.64',
-  '@storybook/addon-storysource': '6.5.0-alpha.64',
-  '@storybook/addon-toolbars': '6.5.0-alpha.64',
-  '@storybook/addon-viewport': '6.5.0-alpha.64',
-  '@storybook/addons': '6.5.0-alpha.64',
-  '@storybook/angular': '6.5.0-alpha.64',
-  '@storybook/api': '6.5.0-alpha.64',
-  '@storybook/builder-webpack4': '6.5.0-alpha.64',
-  '@storybook/builder-webpack5': '6.5.0-alpha.64',
-  '@storybook/channel-postmessage': '6.5.0-alpha.64',
-  '@storybook/channel-websocket': '6.5.0-alpha.64',
-  '@storybook/channels': '6.5.0-alpha.64',
-  '@storybook/cli': '6.5.0-alpha.64',
-  '@storybook/client-api': '6.5.0-alpha.64',
-  '@storybook/client-logger': '6.5.0-alpha.64',
-  '@storybook/codemod': '6.5.0-alpha.64',
-  '@storybook/components': '6.5.0-alpha.64',
-  '@storybook/core': '6.5.0-alpha.64',
-  '@storybook/core-client': '6.5.0-alpha.64',
-  '@storybook/core-common': '6.5.0-alpha.64',
-  '@storybook/core-events': '6.5.0-alpha.64',
-  '@storybook/core-server': '6.5.0-alpha.64',
-  '@storybook/csf-tools': '6.5.0-alpha.64',
-  '@storybook/docs-tools': '6.5.0-alpha.64',
-  '@storybook/ember': '6.5.0-alpha.64',
-  '@storybook/html': '6.5.0-alpha.64',
-  '@storybook/instrumenter': '6.5.0-alpha.64',
-  '@storybook/manager-webpack4': '6.5.0-alpha.64',
-  '@storybook/manager-webpack5': '6.5.0-alpha.64',
-  '@storybook/node-logger': '6.5.0-alpha.64',
-  '@storybook/postinstall': '6.5.0-alpha.64',
-  '@storybook/preact': '6.5.0-alpha.64',
-  '@storybook/preview-web': '6.5.0-alpha.64',
-  '@storybook/react': '6.5.0-alpha.64',
-  '@storybook/router': '6.5.0-alpha.64',
-  '@storybook/server': '6.5.0-alpha.64',
-  '@storybook/source-loader': '6.5.0-alpha.64',
-  '@storybook/store': '6.5.0-alpha.64',
-  '@storybook/svelte': '6.5.0-alpha.64',
-  '@storybook/theming': '6.5.0-alpha.64',
-  '@storybook/ui': '6.5.0-alpha.64',
-  '@storybook/vue': '6.5.0-alpha.64',
-  '@storybook/vue3': '6.5.0-alpha.64',
-  '@storybook/web-components': '6.5.0-alpha.64'
+  '@storybook/addon-a11y': '6.5.0-beta.0',
+  '@storybook/addon-actions': '6.5.0-beta.0',
+  '@storybook/addon-backgrounds': '6.5.0-beta.0',
+  '@storybook/addon-controls': '6.5.0-beta.0',
+  '@storybook/addon-docs': '6.5.0-beta.0',
+  '@storybook/addon-essentials': '6.5.0-beta.0',
+  '@storybook/addon-interactions': '6.5.0-beta.0',
+  '@storybook/addon-jest': '6.5.0-beta.0',
+  '@storybook/addon-links': '6.5.0-beta.0',
+  '@storybook/addon-measure': '6.5.0-beta.0',
+  '@storybook/addon-outline': '6.5.0-beta.0',
+  '@storybook/addon-storyshots': '6.5.0-beta.0',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.0',
+  '@storybook/addon-storysource': '6.5.0-beta.0',
+  '@storybook/addon-toolbars': '6.5.0-beta.0',
+  '@storybook/addon-viewport': '6.5.0-beta.0',
+  '@storybook/addons': '6.5.0-beta.0',
+  '@storybook/angular': '6.5.0-beta.0',
+  '@storybook/api': '6.5.0-beta.0',
+  '@storybook/builder-webpack4': '6.5.0-beta.0',
+  '@storybook/builder-webpack5': '6.5.0-beta.0',
+  '@storybook/channel-postmessage': '6.5.0-beta.0',
+  '@storybook/channel-websocket': '6.5.0-beta.0',
+  '@storybook/channels': '6.5.0-beta.0',
+  '@storybook/cli': '6.5.0-beta.0',
+  '@storybook/client-api': '6.5.0-beta.0',
+  '@storybook/client-logger': '6.5.0-beta.0',
+  '@storybook/codemod': '6.5.0-beta.0',
+  '@storybook/components': '6.5.0-beta.0',
+  '@storybook/core': '6.5.0-beta.0',
+  '@storybook/core-client': '6.5.0-beta.0',
+  '@storybook/core-common': '6.5.0-beta.0',
+  '@storybook/core-events': '6.5.0-beta.0',
+  '@storybook/core-server': '6.5.0-beta.0',
+  '@storybook/csf-tools': '6.5.0-beta.0',
+  '@storybook/docs-tools': '6.5.0-beta.0',
+  '@storybook/ember': '6.5.0-beta.0',
+  '@storybook/html': '6.5.0-beta.0',
+  '@storybook/instrumenter': '6.5.0-beta.0',
+  '@storybook/manager-webpack4': '6.5.0-beta.0',
+  '@storybook/manager-webpack5': '6.5.0-beta.0',
+  '@storybook/node-logger': '6.5.0-beta.0',
+  '@storybook/postinstall': '6.5.0-beta.0',
+  '@storybook/preact': '6.5.0-beta.0',
+  '@storybook/preview-web': '6.5.0-beta.0',
+  '@storybook/react': '6.5.0-beta.0',
+  '@storybook/router': '6.5.0-beta.0',
+  '@storybook/server': '6.5.0-beta.0',
+  '@storybook/source-loader': '6.5.0-beta.0',
+  '@storybook/store': '6.5.0-beta.0',
+  '@storybook/svelte': '6.5.0-beta.0',
+  '@storybook/theming': '6.5.0-beta.0',
+  '@storybook/ui': '6.5.0-beta.0',
+  '@storybook/vue': '6.5.0-beta.0',
+  '@storybook/vue3': '6.5.0-beta.0',
+  '@storybook/web-components': '6.5.0-beta.0'
 };
 exports.default = _default;

package/dist/esm/frameworks/svelte/Header.stories.js

@@ -3,6 +3,10 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -22,7 +26,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/svelte/Header.svelte

@@ -37,6 +37,9 @@
     </div>
     <div>
       {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
         <Button size="small" on:click={onLogout} label="Log out" />
       {/if}
       {#if !user}

package/dist/esm/frameworks/svelte/Page.stories.js

@@ -1,29 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
 import Page from './Page.svelte';
 
 export default {
   title: 'Example/Page',
   component: Page,
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
 const Template = (args) => ({
   Component: Page,
   props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};
+
+// More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
+};

package/dist/esm/frameworks/svelte/Page.svelte

@@ -2,25 +2,11 @@
   import './page.css';
   import Header from './Header.svelte';
 
-  import { createEventDispatcher } from 'svelte';
-
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+  let user = null;
 </script>
 
 <article>
-  <Header {user} on:login={onLogin} on:logout={onLogout} on:createAccount={onCreateAccount} />
+  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
 
   <section>
     <h2>Pages in Storybook</h2>

package/dist/esm/frameworks/vue3/Header.stories.js

@@ -3,6 +3,10 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => ({
@@ -19,7 +23,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/esm/frameworks/vue3/Header.vue

@@ -21,6 +21,7 @@
         <h1>Acme</h1>
       </div>
       <div>
+        <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
         <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
         <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
         <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />

package/dist/esm/frameworks/vue3/Page.stories.js

@@ -1,30 +1,29 @@
+import { within, userEvent } from '@storybook/testing-library';
 import MyPage from './Page.vue';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
-const Template = (args) => ({
+const Template = () => ({
   // Components used in your story `template` are defined in the `components` object
   components: { MyPage },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    // Story args can be mapped to keys in the returned object
-    return { user: args.user };
-  },
-  // Then, those values can be accessed directly in the template
-  template: '<my-page :user="user" />',
-});
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
+  // Here we define the `template`
+  template: '<my-page />',
+});
 
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/esm/frameworks/vue3/Page.vue

@@ -2,9 +2,9 @@
   <article>
     <my-header
       :user="user"
-      @login="$emit('login')"
-      @logout="$emit('logout')"
-      @createAccount="$emit('createAccount')"
+      @login="onLogin"
+      @logout="onLogout"
+      @createAccount="onCreateAccount"
     />
 
     <section>
@@ -67,12 +67,22 @@ export default {
 
   components: { MyHeader },
 
-  props: {
-    user: {
-      type: Object,
-    },
+  data() {
+    return {
+      user: null
+    }
   },
 
-  emits: ['login', 'logout', 'createAccount'],
+  methods: {
+    onLogin() {
+      this.user = { name: 'Jane Doe' };
+    },
+    onLogout() {
+      this.user = null;
+    },
+    onCreateAccount() {
+      this.user = { name: 'Jane Doe' };
+    },
+  },
 };
 </script>

package/dist/esm/generators/baseGenerator.js

@@ -56,7 +56,7 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react', 'angular', 'preact'].includes(framework);
+const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue3'].includes(framework);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,

package/dist/esm/versions.js

@@ -6,61 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '6.5.0-alpha.64',
-  '@storybook/addon-actions': '6.5.0-alpha.64',
-  '@storybook/addon-backgrounds': '6.5.0-alpha.64',
-  '@storybook/addon-controls': '6.5.0-alpha.64',
-  '@storybook/addon-docs': '6.5.0-alpha.64',
-  '@storybook/addon-essentials': '6.5.0-alpha.64',
-  '@storybook/addon-interactions': '6.5.0-alpha.64',
-  '@storybook/addon-jest': '6.5.0-alpha.64',
-  '@storybook/addon-links': '6.5.0-alpha.64',
-  '@storybook/addon-measure': '6.5.0-alpha.64',
-  '@storybook/addon-outline': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.64',
-  '@storybook/addon-storysource': '6.5.0-alpha.64',
-  '@storybook/addon-toolbars': '6.5.0-alpha.64',
-  '@storybook/addon-viewport': '6.5.0-alpha.64',
-  '@storybook/addons': '6.5.0-alpha.64',
-  '@storybook/angular': '6.5.0-alpha.64',
-  '@storybook/api': '6.5.0-alpha.64',
-  '@storybook/builder-webpack4': '6.5.0-alpha.64',
-  '@storybook/builder-webpack5': '6.5.0-alpha.64',
-  '@storybook/channel-postmessage': '6.5.0-alpha.64',
-  '@storybook/channel-websocket': '6.5.0-alpha.64',
-  '@storybook/channels': '6.5.0-alpha.64',
-  '@storybook/cli': '6.5.0-alpha.64',
-  '@storybook/client-api': '6.5.0-alpha.64',
-  '@storybook/client-logger': '6.5.0-alpha.64',
-  '@storybook/codemod': '6.5.0-alpha.64',
-  '@storybook/components': '6.5.0-alpha.64',
-  '@storybook/core': '6.5.0-alpha.64',
-  '@storybook/core-client': '6.5.0-alpha.64',
-  '@storybook/core-common': '6.5.0-alpha.64',
-  '@storybook/core-events': '6.5.0-alpha.64',
-  '@storybook/core-server': '6.5.0-alpha.64',
-  '@storybook/csf-tools': '6.5.0-alpha.64',
-  '@storybook/docs-tools': '6.5.0-alpha.64',
-  '@storybook/ember': '6.5.0-alpha.64',
-  '@storybook/html': '6.5.0-alpha.64',
-  '@storybook/instrumenter': '6.5.0-alpha.64',
-  '@storybook/manager-webpack4': '6.5.0-alpha.64',
-  '@storybook/manager-webpack5': '6.5.0-alpha.64',
-  '@storybook/node-logger': '6.5.0-alpha.64',
-  '@storybook/postinstall': '6.5.0-alpha.64',
-  '@storybook/preact': '6.5.0-alpha.64',
-  '@storybook/preview-web': '6.5.0-alpha.64',
-  '@storybook/react': '6.5.0-alpha.64',
-  '@storybook/router': '6.5.0-alpha.64',
-  '@storybook/server': '6.5.0-alpha.64',
-  '@storybook/source-loader': '6.5.0-alpha.64',
-  '@storybook/store': '6.5.0-alpha.64',
-  '@storybook/svelte': '6.5.0-alpha.64',
-  '@storybook/theming': '6.5.0-alpha.64',
-  '@storybook/ui': '6.5.0-alpha.64',
-  '@storybook/vue': '6.5.0-alpha.64',
-  '@storybook/vue3': '6.5.0-alpha.64',
-  '@storybook/web-components': '6.5.0-alpha.64'
+  '@storybook/addon-a11y': '6.5.0-beta.0',
+  '@storybook/addon-actions': '6.5.0-beta.0',
+  '@storybook/addon-backgrounds': '6.5.0-beta.0',
+  '@storybook/addon-controls': '6.5.0-beta.0',
+  '@storybook/addon-docs': '6.5.0-beta.0',
+  '@storybook/addon-essentials': '6.5.0-beta.0',
+  '@storybook/addon-interactions': '6.5.0-beta.0',
+  '@storybook/addon-jest': '6.5.0-beta.0',
+  '@storybook/addon-links': '6.5.0-beta.0',
+  '@storybook/addon-measure': '6.5.0-beta.0',
+  '@storybook/addon-outline': '6.5.0-beta.0',
+  '@storybook/addon-storyshots': '6.5.0-beta.0',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.0',
+  '@storybook/addon-storysource': '6.5.0-beta.0',
+  '@storybook/addon-toolbars': '6.5.0-beta.0',
+  '@storybook/addon-viewport': '6.5.0-beta.0',
+  '@storybook/addons': '6.5.0-beta.0',
+  '@storybook/angular': '6.5.0-beta.0',
+  '@storybook/api': '6.5.0-beta.0',
+  '@storybook/builder-webpack4': '6.5.0-beta.0',
+  '@storybook/builder-webpack5': '6.5.0-beta.0',
+  '@storybook/channel-postmessage': '6.5.0-beta.0',
+  '@storybook/channel-websocket': '6.5.0-beta.0',
+  '@storybook/channels': '6.5.0-beta.0',
+  '@storybook/cli': '6.5.0-beta.0',
+  '@storybook/client-api': '6.5.0-beta.0',
+  '@storybook/client-logger': '6.5.0-beta.0',
+  '@storybook/codemod': '6.5.0-beta.0',
+  '@storybook/components': '6.5.0-beta.0',
+  '@storybook/core': '6.5.0-beta.0',
+  '@storybook/core-client': '6.5.0-beta.0',
+  '@storybook/core-common': '6.5.0-beta.0',
+  '@storybook/core-events': '6.5.0-beta.0',
+  '@storybook/core-server': '6.5.0-beta.0',
+  '@storybook/csf-tools': '6.5.0-beta.0',
+  '@storybook/docs-tools': '6.5.0-beta.0',
+  '@storybook/ember': '6.5.0-beta.0',
+  '@storybook/html': '6.5.0-beta.0',
+  '@storybook/instrumenter': '6.5.0-beta.0',
+  '@storybook/manager-webpack4': '6.5.0-beta.0',
+  '@storybook/manager-webpack5': '6.5.0-beta.0',
+  '@storybook/node-logger': '6.5.0-beta.0',
+  '@storybook/postinstall': '6.5.0-beta.0',
+  '@storybook/preact': '6.5.0-beta.0',
+  '@storybook/preview-web': '6.5.0-beta.0',
+  '@storybook/react': '6.5.0-beta.0',
+  '@storybook/router': '6.5.0-beta.0',
+  '@storybook/server': '6.5.0-beta.0',
+  '@storybook/source-loader': '6.5.0-beta.0',
+  '@storybook/store': '6.5.0-beta.0',
+  '@storybook/svelte': '6.5.0-beta.0',
+  '@storybook/theming': '6.5.0-beta.0',
+  '@storybook/ui': '6.5.0-beta.0',
+  '@storybook/vue': '6.5.0-beta.0',
+  '@storybook/vue3': '6.5.0-beta.0',
+  '@storybook/web-components': '6.5.0-beta.0'
 };
 exports.default = _default;

package/dist/modern/frameworks/svelte/Header.stories.js

@@ -3,6 +3,10 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
@@ -22,7 +26,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/modern/frameworks/svelte/Header.svelte

@@ -37,6 +37,9 @@
     </div>
     <div>
       {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
         <Button size="small" on:click={onLogout} label="Log out" />
       {/if}
       {#if !user}

package/dist/modern/frameworks/svelte/Page.stories.js

@@ -1,29 +1,27 @@
+import { within, userEvent } from '@storybook/testing-library';
 import Page from './Page.svelte';
 
 export default {
   title: 'Example/Page',
   component: Page,
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    layout: 'fullscreen',
   },
 };
 
 const Template = (args) => ({
   Component: Page,
   props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
 export const LoggedOut = Template.bind({});
 LoggedOut.args = {};
+
+// More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
+};

package/dist/modern/frameworks/svelte/Page.svelte

@@ -2,25 +2,11 @@
   import './page.css';
   import Header from './Header.svelte';
 
-  import { createEventDispatcher } from 'svelte';
-
-  export let user = null;
-
-  const dispatch = createEventDispatcher();
-
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+  let user = null;
 </script>
 
 <article>
-  <Header {user} on:login={onLogin} on:logout={onLogout} on:createAccount={onCreateAccount} />
+  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
 
   <section>
     <h2>Pages in Storybook</h2>

package/dist/modern/frameworks/vue3/Header.stories.js

@@ -3,6 +3,10 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
 const Template = (args) => ({
@@ -19,7 +23,9 @@ const Template = (args) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

package/dist/modern/frameworks/vue3/Header.vue

@@ -21,6 +21,7 @@
         <h1>Acme</h1>
       </div>
       <div>
+        <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
         <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
         <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
         <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />

package/dist/modern/frameworks/vue3/Page.stories.js

@@ -1,30 +1,29 @@
+import { within, userEvent } from '@storybook/testing-library';
 import MyPage from './Page.vue';
-import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    layout: 'fullscreen',
+  },
 };
 
-const Template = (args) => ({
+const Template = () => ({
   // Components used in your story `template` are defined in the `components` object
   components: { MyPage },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    // Story args can be mapped to keys in the returned object
-    return { user: args.user };
-  },
-  // Then, those values can be accessed directly in the template
-  template: '<my-page :user="user" />',
-});
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
+  // Here we define the `template`
+  template: '<my-page />',
+});
 
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };

package/dist/modern/frameworks/vue3/Page.vue

@@ -2,9 +2,9 @@
   <article>
     <my-header
       :user="user"
-      @login="$emit('login')"
-      @logout="$emit('logout')"
-      @createAccount="$emit('createAccount')"
+      @login="onLogin"
+      @logout="onLogout"
+      @createAccount="onCreateAccount"
     />
 
     <section>
@@ -67,12 +67,22 @@ export default {
 
   components: { MyHeader },
 
-  props: {
-    user: {
-      type: Object,
-    },
+  data() {
+    return {
+      user: null
+    }
   },
 
-  emits: ['login', 'logout', 'createAccount'],
+  methods: {
+    onLogin() {
+      this.user = { name: 'Jane Doe' };
+    },
+    onLogout() {
+      this.user = null;
+    },
+    onCreateAccount() {
+      this.user = { name: 'Jane Doe' };
+    },
+  },
 };
 </script>

package/dist/modern/generators/baseGenerator.js

@@ -56,7 +56,7 @@ const builderDependencies = builder => {
 
 const stripVersions = addons => addons.map(addon => (0, _jsPackageManager.getPackageDetails)(addon)[0]);
 
-const hasInteractiveStories = framework => ['react', 'angular', 'preact'].includes(framework);
+const hasInteractiveStories = framework => ['react', 'angular', 'preact', 'svelte', 'vue3'].includes(framework);
 
 async function baseGenerator(packageManager, npmOptions, {
   language,

package/dist/modern/versions.js

@@ -6,61 +6,61 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '6.5.0-alpha.64',
-  '@storybook/addon-actions': '6.5.0-alpha.64',
-  '@storybook/addon-backgrounds': '6.5.0-alpha.64',
-  '@storybook/addon-controls': '6.5.0-alpha.64',
-  '@storybook/addon-docs': '6.5.0-alpha.64',
-  '@storybook/addon-essentials': '6.5.0-alpha.64',
-  '@storybook/addon-interactions': '6.5.0-alpha.64',
-  '@storybook/addon-jest': '6.5.0-alpha.64',
-  '@storybook/addon-links': '6.5.0-alpha.64',
-  '@storybook/addon-measure': '6.5.0-alpha.64',
-  '@storybook/addon-outline': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots': '6.5.0-alpha.64',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.64',
-  '@storybook/addon-storysource': '6.5.0-alpha.64',
-  '@storybook/addon-toolbars': '6.5.0-alpha.64',
-  '@storybook/addon-viewport': '6.5.0-alpha.64',
-  '@storybook/addons': '6.5.0-alpha.64',
-  '@storybook/angular': '6.5.0-alpha.64',
-  '@storybook/api': '6.5.0-alpha.64',
-  '@storybook/builder-webpack4': '6.5.0-alpha.64',
-  '@storybook/builder-webpack5': '6.5.0-alpha.64',
-  '@storybook/channel-postmessage': '6.5.0-alpha.64',
-  '@storybook/channel-websocket': '6.5.0-alpha.64',
-  '@storybook/channels': '6.5.0-alpha.64',
-  '@storybook/cli': '6.5.0-alpha.64',
-  '@storybook/client-api': '6.5.0-alpha.64',
-  '@storybook/client-logger': '6.5.0-alpha.64',
-  '@storybook/codemod': '6.5.0-alpha.64',
-  '@storybook/components': '6.5.0-alpha.64',
-  '@storybook/core': '6.5.0-alpha.64',
-  '@storybook/core-client': '6.5.0-alpha.64',
-  '@storybook/core-common': '6.5.0-alpha.64',
-  '@storybook/core-events': '6.5.0-alpha.64',
-  '@storybook/core-server': '6.5.0-alpha.64',
-  '@storybook/csf-tools': '6.5.0-alpha.64',
-  '@storybook/docs-tools': '6.5.0-alpha.64',
-  '@storybook/ember': '6.5.0-alpha.64',
-  '@storybook/html': '6.5.0-alpha.64',
-  '@storybook/instrumenter': '6.5.0-alpha.64',
-  '@storybook/manager-webpack4': '6.5.0-alpha.64',
-  '@storybook/manager-webpack5': '6.5.0-alpha.64',
-  '@storybook/node-logger': '6.5.0-alpha.64',
-  '@storybook/postinstall': '6.5.0-alpha.64',
-  '@storybook/preact': '6.5.0-alpha.64',
-  '@storybook/preview-web': '6.5.0-alpha.64',
-  '@storybook/react': '6.5.0-alpha.64',
-  '@storybook/router': '6.5.0-alpha.64',
-  '@storybook/server': '6.5.0-alpha.64',
-  '@storybook/source-loader': '6.5.0-alpha.64',
-  '@storybook/store': '6.5.0-alpha.64',
-  '@storybook/svelte': '6.5.0-alpha.64',
-  '@storybook/theming': '6.5.0-alpha.64',
-  '@storybook/ui': '6.5.0-alpha.64',
-  '@storybook/vue': '6.5.0-alpha.64',
-  '@storybook/vue3': '6.5.0-alpha.64',
-  '@storybook/web-components': '6.5.0-alpha.64'
+  '@storybook/addon-a11y': '6.5.0-beta.0',
+  '@storybook/addon-actions': '6.5.0-beta.0',
+  '@storybook/addon-backgrounds': '6.5.0-beta.0',
+  '@storybook/addon-controls': '6.5.0-beta.0',
+  '@storybook/addon-docs': '6.5.0-beta.0',
+  '@storybook/addon-essentials': '6.5.0-beta.0',
+  '@storybook/addon-interactions': '6.5.0-beta.0',
+  '@storybook/addon-jest': '6.5.0-beta.0',
+  '@storybook/addon-links': '6.5.0-beta.0',
+  '@storybook/addon-measure': '6.5.0-beta.0',
+  '@storybook/addon-outline': '6.5.0-beta.0',
+  '@storybook/addon-storyshots': '6.5.0-beta.0',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-beta.0',
+  '@storybook/addon-storysource': '6.5.0-beta.0',
+  '@storybook/addon-toolbars': '6.5.0-beta.0',
+  '@storybook/addon-viewport': '6.5.0-beta.0',
+  '@storybook/addons': '6.5.0-beta.0',
+  '@storybook/angular': '6.5.0-beta.0',
+  '@storybook/api': '6.5.0-beta.0',
+  '@storybook/builder-webpack4': '6.5.0-beta.0',
+  '@storybook/builder-webpack5': '6.5.0-beta.0',
+  '@storybook/channel-postmessage': '6.5.0-beta.0',
+  '@storybook/channel-websocket': '6.5.0-beta.0',
+  '@storybook/channels': '6.5.0-beta.0',
+  '@storybook/cli': '6.5.0-beta.0',
+  '@storybook/client-api': '6.5.0-beta.0',
+  '@storybook/client-logger': '6.5.0-beta.0',
+  '@storybook/codemod': '6.5.0-beta.0',
+  '@storybook/components': '6.5.0-beta.0',
+  '@storybook/core': '6.5.0-beta.0',
+  '@storybook/core-client': '6.5.0-beta.0',
+  '@storybook/core-common': '6.5.0-beta.0',
+  '@storybook/core-events': '6.5.0-beta.0',
+  '@storybook/core-server': '6.5.0-beta.0',
+  '@storybook/csf-tools': '6.5.0-beta.0',
+  '@storybook/docs-tools': '6.5.0-beta.0',
+  '@storybook/ember': '6.5.0-beta.0',
+  '@storybook/html': '6.5.0-beta.0',
+  '@storybook/instrumenter': '6.5.0-beta.0',
+  '@storybook/manager-webpack4': '6.5.0-beta.0',
+  '@storybook/manager-webpack5': '6.5.0-beta.0',
+  '@storybook/node-logger': '6.5.0-beta.0',
+  '@storybook/postinstall': '6.5.0-beta.0',
+  '@storybook/preact': '6.5.0-beta.0',
+  '@storybook/preview-web': '6.5.0-beta.0',
+  '@storybook/react': '6.5.0-beta.0',
+  '@storybook/router': '6.5.0-beta.0',
+  '@storybook/server': '6.5.0-beta.0',
+  '@storybook/source-loader': '6.5.0-beta.0',
+  '@storybook/store': '6.5.0-beta.0',
+  '@storybook/svelte': '6.5.0-beta.0',
+  '@storybook/theming': '6.5.0-beta.0',
+  '@storybook/ui': '6.5.0-beta.0',
+  '@storybook/vue': '6.5.0-beta.0',
+  '@storybook/vue3': '6.5.0-beta.0',
+  '@storybook/web-components': '6.5.0-beta.0'
 };
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "6.5.0-alpha.64",
+  "version": "6.5.0-beta.0",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -47,10 +47,10 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "6.5.0-alpha.64",
-    "@storybook/core-common": "6.5.0-alpha.64",
-    "@storybook/csf-tools": "6.5.0-alpha.64",
-    "@storybook/node-logger": "6.5.0-alpha.64",
+    "@storybook/codemod": "6.5.0-beta.0",
+    "@storybook/core-common": "6.5.0-beta.0",
+    "@storybook/csf-tools": "6.5.0-beta.0",
+    "@storybook/node-logger": "6.5.0-beta.0",
     "@storybook/semver": "^7.3.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
@@ -75,7 +75,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.5.0-alpha.64",
+    "@storybook/client-api": "6.5.0-beta.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5"
+  "gitHead": "b2e85f3599c043815b18bbfc5ca563bf1c6e4add"
 }