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

let newButtonText = "Create Persona"
let persona =
{
    "name": "Personal",
    "personaFields": [
        {"firstName": "Phil"},
        {"lastName": "Beadle"},
        {"address": "123 Holochain Road"},
        {"suburb": "Burwood"},
        {"city": "Melbourne"}
    ]
}
let hash = "rtyeyyutyr"
let buttonText = "Update Persona"
let createPersona = {}
const personaCreate = decorateAction([
  args => {
    createPersona = args[0]
    console.log(createPersona)
    return args
  }
])

let updatePersona = {}
const personaUpdate = decorateAction([
  args => {
    updatePersona = args[0]
    // console.log(clickPersona)
    return args
  }
])

// Showing two different approaches to modifying the arguments to an action
// function before they are logged in the storybook:

// For a single argument, this just wraps the action function with something
// that takes an argument in and digs a value out of it. It would work with
// multiple arguments too.
// Just pass the function object as a prop
// @ts-ignore any
const onTextChange = event => action('onTextChange')(event.target.value)
// e.g. onFoo = (arg1, arg2, ...) => action('onFoo')(arg1.foo.bar, arg2.x, ...)

// decorateAction gets an array of arguments passed in and expects an array of
// arguments returned. It is a pipeline for rewriting the arguments.
// Call the function in the prop, same as you would action('onDoStuff')
const eventTarget = decorateAction([
  args => [args[0].target.value]
])

/*
 * See .storybook/README.md for info on the component storybook.
 */
storiesOf('GlossarySearchInput', module)
    .add('empty', () => (
      
    ))
    .add('with text', () => {
      return (

// @flow
import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';
import { decorateAction } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';

import Showcase from '../../../.storybook/components/Showcase';
import StrokeButton from './StrokeButton';

const targetAction = decorateAction([args => [args[0].target]]);

const SIZES = ['xsmall', 'small', 'medium', 'large'];

class ToggleableButton extends Component {
  state = {
    isToggled: true,
  };

  render() {
    return (
       this.setState({ isToggled: !this.state.isToggled })}
      />
    );

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action, decorateAction } from '@storybook/addon-actions';
import { withReadme } from 'storybook-readme';

import { Input } from './Input';
import Readme from './README.md';
import { Box } from '../Core';
import { Badge } from '../Badge';
import { Button } from '../Button';
import { Icon } from '../Icon';

const stories = storiesOf('Components|Input', module).addDecorator(withReadme(Readme));

const firstArgAction = decorateAction([(args: any) => [args[0].target.value]]);

type State = {
  status: {
    type?: 'error' | 'valid' | 'warning';
    message?: string;
  };
  input: any;
};
class InputWrapper extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      status: {},
      input: '',
    };
  }

})(() => {
    const logAction = decorateAction([args => args]);
    return (
      
    );
  })
);

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>
      Moving away from this story will persist the action logger</button>

import { generateTokenBalances, generateTokenPair, makeCenterDecorator } from './helpers'

const codePair = generateTokenPair()

const tokenBalances = generateTokenBalances()

const CenterDecor = makeCenterDecorator({
  style: {
    width: 650,
    height: null,
    backgroundColor: null,
  },
})

const getModFromArgs = decorateAction([
  args => [args[0].mod],
])

const tokenPair = () => {
  const { sell, buy } = object('tokenPair', codePair)
  const { [sell.address]: sellTokenBalance, [buy.address]: buyTokenBalance } = object('tokenBalances', tokenBalances)

  return (
     {}}
      resetTokenPair={() => {}}

import TopAuctions from 'components/TopAuctions'

import { generateRatioPairs, makeCenterDecorator } from './helpers'
import { getTop5Pairs } from 'selectors/ratioPairs'

const ratioPairs = generateRatioPairs()

const CenterDecor = makeCenterDecorator({
  style: {
    width: 500,
    height: 70,
  },
})

const stringifyAction = decorateAction([
  args => [JSON.stringify(args[0])],
])

storiesOf('TopAuctions', module)
  .addDecorator(CenterDecor)
  .addWithJSX('5 random pairs', () => {
    const top5Pairs = getTop5Pairs(ratioPairs.map((pair, i) => object(`Pair ${i}`, pair)))
    return 
  })

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',
};

})(() => {
      const logAction = decorateAction([args => args]);
      const story = (
        
      );
      return inlineTemplate({
        title: 'Client Paginated Table',
        documentationLink: `${
          DOCUMENTATION_URL.PATTERNFLY_ORG_CONTENT_VIEWS
        }table-view/`,
        story,
        description: reactabularDescription
      });
    })
  );