move remaining action stories & cleanup usage of addon-actions everyw…

…here where it serves no further purpose

code/addons/actions/template/stories/configs.stories.tsx

@@ -0,0 +1,36 @@
+import globalThis from 'global';
+
+import { actions, configureActions } from '@storybook/addon-actions';
+
+const configs = actions('actionA', 'actionB', 'actionC');
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const ActionA = {
+  args: { onClick: configs.actionA },
+};
+export const ActionB = {
+  args: { onClick: configs.actionB },
+};
+export const ActionC = {
+  args: { onClick: configs.actionC },
+};
+
+export const ConfigureActions = {
+  args: { onClick: configs.actionA },
+  decorators: [
+    (storyFn: any) => {
+      configureActions({ depth: 2 });
+
+      return storyFn();
+    },
+  ],
+};

code/addons/actions/template/stories/parameters.stories.tsx

@@ -0,0 +1,17 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {
+  parameters: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
+};

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jest/no-standalone-expect */
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
@@ -48,7 +47,7 @@ export default {
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
     isPlaying: false,
-    onScrollToEnd: action('onScrollToEnd'),
+    onScrollToEnd: () => {},
     endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true,

code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { action } from '@storybook/addon-actions';
 import { Button } from '../react-demo';
 
 export default {
@@ -11,10 +10,10 @@ export default {
   },
 };
 
-export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button>Hello Button</Button>;
 
 export const WithSomeEmoji = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>

code/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx

@@ -1,6 +1,5 @@
 import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs';
 import { Button } from '../.././angular-demo';
-import { action } from '@storybook/addon-actions';
 
 <Meta title="Addons/Docs/SimpleButton" component={Button} />
 
@@ -21,7 +20,7 @@ import { action } from '@storybook/addon-actions';
   {(args) => ({
     props: {
       text: args.text,
-      onClick: action('clicked'),
+      onClick: () => {},
     },
   })}
 </Story>

code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

@@ -1,5 +1,4 @@
 import { FormsModule } from '@angular/forms';
-import { action } from '@storybook/addon-actions';
 import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
@@ -21,7 +20,7 @@ export default {
 export const SimpleInput: StoryFn = () => ({
   props: {
     ngModel: 'Type anything',
-    ngModelChange: action('ngModelChange'),
+    ngModelChange: () => {},
   },
 });
 

code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { Button } from '../../angular-demo';
 
 export default {
@@ -15,7 +14,7 @@ export const TemplateStory: StoryFn = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: 'Button with custom styles',
-    onClick: action('log'),
+    onClick: () => {},
   },
   styles: [
     `

code/examples/cra-kitchen-sink/src/stories/button.stories.js

@@ -1,21 +1,20 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { Button } from '../components/react-demo';
 
 export default {
   title: 'Button',
   component: Button,
 };
 
-export const Story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+export const Story1 = () => <Button>Hello Button</Button>;
 Story1.storyName = 'with text';
 
 Story1.parameters = {
   options: { selectedPanel: 'storybook/actions/panel' },
 };
 
 export const Story2 = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="yolo">
       😀 😎 👍 💯
     </span>

code/examples/cra-kitchen-sink/src/stories/decorators.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import PropTypes from 'prop-types';
 import { Button } from '../components/react-demo';
 
@@ -24,13 +23,12 @@ export default {
 };
 
 export const WithArgs = (args) => <Button {...args} />;
-WithArgs.args = { onClick: action('clicked', { depth: 1 }), children: 'With args' };
+WithArgs.args = { children: 'With args' };
 
-export const Basic = () => <Button onClick={action('clicked', { depth: 1 })}>Basic</Button>;
+export const Basic = () => <Button>Basic</Button>;
 
-export const Nested = (args) => (
-  <Button {...args}>
+export const Nested = () => (
+  <Button>
     <Bold>Hello</Bold>
   </Button>
 );
-Nested.args = { onClick: action('clicked', { depth: 1 }) };

code/examples/cra-kitchen-sink/src/stories/long-description.stories.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { Button } from '../components/react-demo';
 
 export default {
   title: 'Some really long story kind description',
 };
 
-export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Story1 = () => <Button>Hello Button</Button>;
 Story1.storyName = 'with text';

code/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import Button, { Type } from './Button';
 
 export default {
@@ -9,7 +8,7 @@ export default {
 
 export const SimpleButton = () => {
   const x = 0;
-  return <Button onClick={action('button clicked')}>OK {x}</Button>;
+  return <Button>OK {x}</Button>;
 };
 
 const typeOptions = {

code/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { Button } from './Button';
 
 export default {
   title: '1-Button',
   component: Button,
 };
 
-export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button>Hello Button</Button>;
 
 export const Emoji = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>

code/examples/ember-cli/stories/welcome-banner.stories.js

@@ -1,5 +1,4 @@
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'welcome-banner',
@@ -23,7 +22,6 @@ export const Basic = (args) => ({
         subTitleColor=subTitleColor
         title=title
         subtitle=subtitle
-        click=(action onClick)
       }}
     `,
   context: args,
@@ -34,5 +32,4 @@ Basic.args = {
   subTitleColor: '#B8854F',
   title: 'Welcome to storybook',
   subtitle: 'This environment is completely editable',
-  onClick: action('clicked'),
 };

code/examples/html-kitchen-sink/stories/addon-docs.stories.mdx

@@ -1,5 +1,4 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs';
-import { action } from '@storybook/addon-actions';
 
 # Storybook Docs for HTML
 
@@ -20,7 +19,6 @@ How you like them apples?!
   {() => {
     const btn = document.createElement('button');
     btn.innerHTML = 'Hello Button';
-    btn.addEventListener('click', action('Click'));
     return btn;
   }}
 </Story>

code/examples/html-kitchen-sink/stories/button.stories.js

@@ -1,5 +1,4 @@
 import global from 'global';
-import { action } from '@storybook/addon-actions';
 import { useEffect } from '@storybook/client-api';
 
 const { document } = global;
@@ -15,7 +14,6 @@ export const Headings = () =>
 export const Button = () => {
   const btn = document.createElement('button');
   btn.innerHTML = 'Hello Button';
-  btn.addEventListener('click', action('Click'));
   return btn;
 };
 

code/examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx

@@ -8,7 +8,6 @@ import {
   ColorItem,
   Meta,
 } from '@storybook/addon-docs';
-import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { Button } from '../../components/react-demo';
 import TsButton from '../../components/TsButton';
@@ -78,22 +77,22 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 
 <Canvas>
   <Story name="hello story">
-    <Button onClick={action('clicked')}>hello world</Button>
+    <Button>hello world</Button>
   </Story>
   <Story name="goodbye">
-    <Button onClick={action('clicked')}>goodbye world</Button>
+    <Button>goodbye world</Button>
   </Story>
   <Story name="with icons">
-    <Button onClick={action('clicked')}>🤘🚀💯</Button>
+    <Button>🤘🚀💯</Button>
   </Story>
   <Story name="notes" parameters={{ notes: 'story notes' }}>
-    <Button onClick={action('clicked')}>goodbye world</Button>
+    <Button>goodbye world</Button>
   </Story>
   <Story name="plaintext">Plain text</Story>
 </Canvas>
 
 <Story name="solo story">
-  <Button onClick={action('clicked')}>solo</Button>
+  <Button>solo</Button>
 </Story>
 
 <Story name="iframe story" inline={false} height="100px">
@@ -120,7 +119,7 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 <Source name="hello story" />
 
 <Canvas>
-  <Button onClick={action('clicked')}>view source in Canvas</Button>
+  <Button>view source in Canvas</Button>
 </Canvas>
 
 ## Configurable height
@@ -192,7 +191,7 @@ Fixed layout requires custom `height` since it can't be determined.
 
 <Canvas withSource="none">
   <Story name="no source Canvas">
-    <Button onClick={action('clicked')}>solo</Button>
+    <Button>solo</Button>
   </Story>
 </Canvas>
 

code/examples/official-storybook/stories/addon-docs/ts-button.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
 import Button, { Type } from '../../components/TsButton';
 
 export default {
@@ -14,7 +13,7 @@ type Story = () => any;
 
 export const SimpleButton: Story = () => {
   const x = 0;
-  return <Button onClick={action('button clicked')}>OK {x}</Button>;
+  return <Button>OK {x}</Button>;
 };
 
 const typeOptions = {

code/examples/official-storybook/stories/addon-links/href.stories.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { hrefTo } from '@storybook/addon-links';
-import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Addons/Links/Href',
 };
 
 export const Log = () => {
-  hrefTo('Addons/Links/Href', 'log').then((href) => action('URL of this story')(href));
+  hrefTo('Addons/Links/Href', 'log');
 
   return <span>See action logger</span>;
 };

code/examples/official-storybook/stories/core/interleaved-exports.stories.js

@@ -1,6 +1,5 @@
 /* eslint-disable import/first,import/no-duplicates */
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Core/Interleaved exports',
@@ -9,8 +8,8 @@ export default {
 
 import { Welcome } from '../../components/react-demo';
 
-export const First = () => <Welcome showApp={action('show')} />;
+export const First = () => <Welcome showApp={() => {}} />;
 
 import { Button } from '../../components/react-demo';
 
-export const Second = () => <Button onClick={action('click')}>Second</Button>;
+export const Second = () => <Button onClick={() => {}}>Second</Button>;

code/examples/official-storybook/stories/demo/button.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
 import { Button } from '../../components/react-demo';
 
 export default {
@@ -16,11 +15,11 @@ export default {
   },
 };
 
-export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button>Hello Button</Button>;
 WithText.storyName = 'with text';
 
 export const WithSomeEmoji = () => (
-  <Button onClick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>

code/examples/official-storybook/stories/demo/button.stories.mdx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { action } from '@storybook/addon-actions';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Button } from '../../components/react-demo';
 
@@ -12,13 +11,13 @@ import { Button } from '../../components/react-demo';
 ## Hello
 
 <Story name="with text">
-  <Button onClick={action('clicked')}>Hello Button</Button>
+  <Button>Hello Button</Button>
 </Story>
 
 ## Emoji
 
 <Story name="with some emoji">
-  <Button onClick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>

code/examples/preact-kitchen-sink/src/stories/button.stories.js

@@ -1,17 +1,16 @@
-import { action } from '@storybook/addon-actions';
 import Button from '../Button';
 
 export default {
   title: 'Button',
   component: Button,
 };
 
-export const WithText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button>Hello Button</Button>;
 
 WithText.storyName = 'with text';
 
 export const WithSomeEmoji = () => (
-  <Button onclick={action('clicked')}>
+  <Button>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>

code/examples/svelte-kitchen-sink/src/stories/decorators.stories.js

@@ -1,5 +1,4 @@
 import { setContext } from 'svelte';
-import { action } from '@storybook/addon-actions';
 import Context from '../components/Context.svelte';
 import BorderDecorator from './BorderDecorator.svelte';
 
@@ -14,7 +13,7 @@ export default {
 
 export const Decorators = () => ({
   on: {
-    click: action('I am logging in the actions tab'),
+    click: () => {},
   },
 });
 Decorators.decorators = [

code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js

@@ -1,5 +1,3 @@
-import Vuex from 'vuex';
-import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import MyButton from './Button.vue';
@@ -57,48 +55,6 @@ export const JSX = () => ({
   },
 });
 
-export const VuexActions = () => ({
-  components: { MyButton },
-  template: '<my-button @click="log">with vuex: {{ $store.state.count }}</my-button>',
-  store: new Vuex.Store({
-    state: { count: 0 },
-    mutations: {
-      increment(state) {
-        state.count += 1; // eslint-disable-line
-        action('vuex state')(state);
-      },
-    },
-  }),
-  methods: {
-    log() {
-      this.$store.commit('increment');
-    },
-  },
-});
-
-VuexActions.storyName = 'vuex + actions';
-
-export const WhateverYouWant = () => ({
-  components: { MyButton },
-  template: '<my-button @click="log">with awesomeness: {{ $store.state.count }}</my-button>',
-  store: new Vuex.Store({
-    state: { count: 0 },
-    mutations: {
-      increment(state) {
-        state.count += 1; // eslint-disable-line
-        action('vuex state')(state);
-      },
-    },
-  }),
-  methods: {
-    log() {
-      this.$store.commit('increment');
-    },
-  },
-});
-
-WhateverYouWant.storyName = 'whatever you want';
-
 export const PreRegisteredComponent = () => ({
   /* By pre-registering component in preview.js,
    * the need to register all components with each story is removed.