Merge pull request #26352 from storybookjs/kasper/cli-story-update

CLI: Add explicit actions to header story
storybookjs · Mar 7, 2024 · 5af40cd · 5af40cd
2 parents 69b78cc + dbef8b5
commit 5af40cd
Show file tree

Hide file tree

Showing 21 changed files with 106 additions and 23 deletions.
diff --git a/code/frameworks/angular/template/cli/header.stories.ts b/code/frameworks/angular/template/cli/header.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { HeaderComponent } from './header.component';
+import { fn } from '@storybook/test';
 
 const meta: Meta<HeaderComponent> = {
   title: 'Example/Header',
@@ -11,6 +12,11 @@ const meta: Meta<HeaderComponent> = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export default meta;

diff --git a/code/frameworks/ember/template/cli/Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js
@@ -1,6 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
+import { fn } from '@storybook/test';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 export default {
@@ -14,20 +15,19 @@ export default {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/ember/writing-docs/autodocs
   tags: ['autodocs'],
+  args: { onClick: fn() },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Text = {
   args: {
     label: 'Button',
-    onClick: action('onClick'),
   },
 };
 
 export const Emoji = {
   args: {
     label: '😀 😎 👍 💯',
-    onClick: action('onClick'),
   },
 };
 

diff --git a/code/frameworks/nextjs/template/cli/js/Header.stories.js b/code/frameworks/nextjs/template/cli/js/Header.stories.js
@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import { Header } from './Header';
 
 export default {
@@ -9,6 +10,11 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 export const LoggedIn = {
   args: {

diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Header.stories.ts
@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
 import { Header } from './Header';
 
 const meta: Meta<typeof Header> = {
@@ -10,6 +12,11 @@ const meta: Meta<typeof Header> = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export default meta;

diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Header } from './Header';
 
 const meta = {
@@ -10,6 +11,11 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 } satisfies Meta<typeof Header>;
 
 export default meta;

diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import { createHeader } from './Header';
 
 export default {
@@ -9,11 +10,10 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
   },
 };
 

diff --git a/code/renderers/html/template/cli/ts-3-8/Header.stories.ts b/code/renderers/html/template/cli/ts-3-8/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
+import { fn } from '@storybook/test';
 import type { HeaderProps } from './Header';
 import { createHeader } from './Header';
 
@@ -12,10 +13,10 @@ const meta: Meta<HeaderProps> = {
     layout: 'fullscreen',
   },
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
   },
 };
 

diff --git a/code/renderers/html/template/cli/ts-4-9/Header.stories.ts b/code/renderers/html/template/cli/ts-4-9/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/html';
+import { fn } from '@storybook/test';
 import type { HeaderProps } from './Header';
 import { createHeader } from './Header';
 
@@ -12,10 +13,10 @@ const meta = {
     layout: 'fullscreen',
   },
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
   },
 } satisfies Meta<HeaderProps>;
 

diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -9,10 +9,10 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
   },
 };
 

diff --git a/code/renderers/react/template/cli/js/Header.stories.js b/code/renderers/react/template/cli/js/Header.stories.js
@@ -1,4 +1,5 @@
 import { Header } from './Header';
+import { fn } from '@storybook/test';
 
 export default {
   title: 'Example/Header',
@@ -9,6 +10,11 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export const LoggedIn = {

diff --git a/code/renderers/react/template/cli/ts-3-8/Header.stories.ts b/code/renderers/react/template/cli/ts-3-8/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { Header } from './Header';
 
@@ -11,6 +12,11 @@ const meta: Meta<typeof Header> = {
     // More on Story layout: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export default meta;

diff --git a/code/renderers/react/template/cli/ts-4-9/Header.stories.ts b/code/renderers/react/template/cli/ts-4-9/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { Header } from './Header';
 
@@ -11,6 +12,11 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 } satisfies Meta<typeof Header>;
 
 export default meta;

diff --git a/code/renderers/vue3/template/cli/js/Header.stories.js b/code/renderers/vue3/template/cli/js/Header.stories.js
@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import MyHeader from './Header.vue';
 
 export default {
@@ -24,6 +25,11 @@ export default {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export const LoggedIn = {

diff --git a/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts
@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyHeader from './Header.vue';
@@ -21,6 +22,11 @@ const meta: Meta<typeof MyHeader> = {
     layout: 'fullscreen',
   },
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
   tags: ['autodocs'],
 };
 

diff --git a/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { fn } from '@storybook/test';
 
 import MyHeader from './Header.vue';
 
@@ -20,6 +21,11 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
 } satisfies Meta<typeof MyHeader>;

diff --git a/code/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import { Button } from './Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -7,12 +8,12 @@ export default {
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],
     },
   },
+  args: { onClick: fn() },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

diff --git a/code/renderers/web-components/template/cli/js/Header.stories.js b/code/renderers/web-components/template/cli/js/Header.stories.js
@@ -1,12 +1,17 @@
+import { fn } from '@storybook/test';
 import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => Header(args),
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
-
 export const LoggedIn = {
   args: {
     user: {

diff --git a/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
+import { fn } from '@storybook/test';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
@@ -9,12 +10,12 @@ const meta: Meta<ButtonProps> = {
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],
     },
   },
+  args: { onClick: fn() },
 };
 
 export default meta;

diff --git a/code/renderers/web-components/template/cli/ts-3-8/Header.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Header.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
+import { fn } from '@storybook/test';
 import type { HeaderProps } from './Header';
 import { Header } from './Header';
 
@@ -7,6 +8,11 @@ const meta: Meta<HeaderProps> = {
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args: HeaderProps) => Header(args),
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
 };
 
 export default meta;

diff --git a/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts b/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
+import { fn } from '@storybook/test';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
@@ -9,12 +10,12 @@ const meta = {
   render: (args) => Button(args),
   argTypes: {
     backgroundColor: { control: 'color' },
-    onClick: { action: 'onClick' },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],
     },
   },
+  args: { onClick: fn() },
 } satisfies Meta<ButtonProps>;
 
 export default meta;