How to use @storybook/addon-actions - 10 common examples

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 React from 'react';
import { actions } from '@storybook/addon-actions';
import { Input, Icon, Flexbox, Button } from '../../..';
import { Display } from '../../../common/Display';

// A bit laggy for now, let's optimize later
const handlers = actions(
  'onBlur',
  'onClick',
  'onFocus',
  'onKeyDown',
  'onKeyUp',
  'onKeyPress',
  'onChange',
);

export default {
  title: 'Molecules | Input / Text',
  parameters: {
    component: Input.Text,
  },
};

// @ts-ignore
import { actions } from '@storybook/addon-actions';
import { select, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';

import Button from '../components/Button';

const events = actions(
  'onClick',
  'onPointerDown',
  'onPointerUp',
  'onPointerOver',
  'onPointerLeave',
);

storiesOf(Button.name, module).add('contained', () => (

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);

.add('show loading state', () => (
        
    ))
    .add('show empty state', () => (

.add('show settings button', () => (
        
    ));