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

import { window, File } from 'global';
import React, { Fragment } from 'react';
import { storiesOf } from '@storybook/html';
import {
  action,
  actions,
  configureActions,
  decorate,
  decorateAction,
} from '@storybook/addon-actions';
import { Form } from '@storybook/components';

const { Button } = Form;

const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);

storiesOf('React|Actions', module)
  .addParameters({
    framework: 'react',
    options: {
      selectedPanel: 'storybook/actions/panel',
    },
  })

  .add('Basic example', () =&gt; <button>Hello World</button>)
  .add('Multiple actions', () =&gt; (
    <button>Hello World</button>
  ))
  .add('Multiple actions + config', () =&gt; (
    <button></button>

import { withActions, decorate } from '@storybook/addon-actions';

const pickTarget = decorate([args => [args[0].target]]);

const button = () =&gt; `<button type="button">Hello World</button>`;

export default {
  title: 'Addons/Actions',
};

export const story1 = () =&gt; withActions('click')(button);
story1.story = { name: 'Hello World' };
export const story2 = () =&gt; withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };

export const story3 = () =&gt;
  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
story3.story = { name: 'Multiple actions + config' };

export const logInstance = instance => {
    return decorate([() => [{ model: instance.serializeModel() }]]);
};

render() {
        return (
            <section>
                 this.setState(() =&gt; ({ checked }))
                    ]).action('Checkbox Toggle')}
                /&gt;
            </section>
        )
    }
}

import { window, File } from 'global';
import React, { Fragment } from 'react';
import {
  action,
  actions,
  configureActions,
  decorate,
  decorateAction,
} from '@storybook/addon-actions';
import { Form } from '@storybook/components';

const { Button } = Form;

const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);

export default {
  title: 'Addons|Actions.deprecated',
};

export const decoratedAction = () => (
  <button>Native Event</button>
);

decoratedAction.story = {
  name: 'Decorated Action',
};

import { action, decorate } from '@storybook/addon-actions';

const customEvent = decorate([(args) => {
  return [JSON.stringify(args[0].detail)];
}]);

export function customEventAction (eventName) {
  return customEvent.action(eventName);
}

export function withCustomEventActions (...eventNames) {
  return customEvent.withActions(...eventNames);
}

export function eventAction (eventName) {
  return action(eventName);
}

import { window, File } from 'global';
import React, { Fragment } from 'react';
import {
  action,
  actions,
  configureActions,
  decorate,
  decorateAction,
} from '@storybook/addon-actions';
import { Form } from '@storybook/components';

const { Button } = Form;

const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);

export default {
  title: 'Addons/Actions',
  parameters: {
    options: {
      selectedPanel: 'storybook/actions/panel',
    },
  },
};

export const basicExample = () =&gt; <button>Hello World</button>;

basicExample.story = {
  name: 'Basic example',
};

import { withActions, decorate } from '@storybook/addon-actions';
import { html } from 'lit-html';

const pickTarget = decorate([args => [args[0].target]]);

const button = () => html`
  <button type="button">Hello World</button>
`;

export default {
  title: 'Addons/Actions',
};

export const story1 = () =&gt; withActions('click')(button);
story1.story = { name: 'Hello World' };
export const story2 = () =&gt; withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };

export const story3 = () =&gt;
  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);