How to use the @storybook/addon-actions.withActions function in @storybook/addon-actions

import { addDecorator, addParameters, configure } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withActions } from '@storybook/addon-actions';
import { theme } from './theme';
// @ts-ignore
import { DocsPage } from '../src/demo/docs-page';
// @ts-ignore
import { DocsContainer } from '../src/demo/docs-container';
// @ts-ignore
import { withCanvas } from '../src/demo/canvas';

addDecorator(withKnobs());
addDecorator(withActions());
addDecorator(withCanvas);
addParameters({
	docs: {
		container: DocsContainer,
		page: DocsPage,
	},
	options: {
		theme,
	},
});
configure(require.context('../src', true, /\.stories\.tsx?$/), module);

import '../../spark/manifests/spark/_spark.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-spark-theme';
import { withActions } from '@storybook/addon-actions';

addDecorator(withA11y);
addDecorator(withActions('click .sprk-c-Button'));
addDecorator(withActions('click .sprk-b-Link'));

// remove this as a global , individually set on each component (masthead, alert, modal, etc)
addDecorator(story =&gt; `<div data-sprk-main="" class="sprk-o-Box">${story()}</div>`);
// Option defaults

addParameters({
  options: {
    theme: sparkTheme,
  },
});

configure(require.context('../../spark', true, /\/vanilla\/.*\.stories\.(js|ts|tsx|mdx)$/), module);

import '../../spark/manifests/spark/_spark.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-spark-theme';
import { withActions } from '@storybook/addon-actions';

addDecorator(withA11y);
addDecorator(withActions('click .sprk-c-Button'));
addDecorator(withActions('click .sprk-b-Link'));

// remove this as a global , individually set on each component (masthead, alert, modal, etc)
addDecorator(story =&gt; `<div data-sprk-main="" class="sprk-o-Box">${story()}</div>`);
// Option defaults

addParameters({
  options: {
    theme: sparkTheme,
  },
});

configure(require.context('../../spark', true, /\/vanilla\/.*\.stories\.(js|ts|tsx|mdx)$/), module);

import { Box, Button, Grommet, Text } from 'grommet'
import { Add } from 'grommet-icons'
import React from 'react'

import readme from './README.md'
import Tooltip from './Tooltip'

const config = {
  notes: {
    markdown: readme
  }
}

storiesOf('Tooltip', module)
  .addDecorator(withKnobs)
  .addDecorator(withActions('click button'))
  .add('Light theme (default)', () => (
    
  ), config)
  .add('Dark theme', () => (

import { Grommet } from 'grommet'
import React from 'react'

import AdminCheckbox from './AdminCheckbox'
import readme from './README.md'

const config = {
  notes: {
    markdown: readme
  }
}

const darkZooTheme = { ...zooTheme, dark: true }

storiesOf('ZooFooter/AdminCheckbox', module)
  .addDecorator(withActions('change #admin-checkbox'))

  .add('Light theme (default)', () => (
    
  ), config)

  .add('Dark theme', () => (
    
  ), config)

class AdminCheckboxStoryExample extends React.Component {
  constructor () {
    super()
    this.onChange = this.onChange.bind(this)
    this.state = {
      checked: false
    }

export const story2 = () => withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };

import { storiesOf } from '@storybook/html';
import { withActions } from "@storybook/addon-actions";

import readme from "./readme.md";

storiesOf('Star Rating', module)
  .addDecorator(withActions("enjinStarRating"))
  .addParameters({ jest: ["star-rating"] })
  .add('Default', () => '', {
    notes: {
      markdown: readme
    }
  })
  .add('With Rating', () => {
    const starRatingEl = document.createElement('enjin-star-rating');
    starRatingEl.value = 3;

    return starRatingEl;
  }, {
    notes: {
      markdown: readme
    }
  })

export const story1 = () => withActions('click')(button);
story1.story = { name: 'Hello World' };

export const story2 = () => withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };

import zooTheme from '@zooniverse/grommet-theme'
import { Grommet } from 'grommet'
import { Add } from 'grommet-icons'
import React from 'react'

import PlainButton from './PlainButton'
import readme from './README.md'

const config = {
  notes: {
    markdown: readme
  }
}

storiesOf('PlainButton', module)
  .addDecorator(withActions('click button'))
  .addDecorator(withKnobs)

  .add('Light theme (default)', () => (
    
      
    
  ), config)

  .add('Dark theme', () => (
    
      
    
  ), config)

  .add('With icon', () => (