@storybook/addon-actions#action JavaScript Examples

Gallery = () => ({
  components: { BlockCheckGroup, TypeOverline },
  data() {
    return {
      options: [
        'Option 1',
        {
          label: 'My Second Option',
          description: 'My description text',
          value: 'foo',
        },
        {
          label: 'Option 3',
          description: 'My description text',
          value: 'bar',
        },
      ],
      value: ['foo'],
    };
  },
  methods: {
    handleInput: action('input'),
  },
  template: `
  <div>
    <div class="w-full sm:w-96">
      <BlockCheckGroup class="w-full" v-model="value" @input="handleInput" :options="options" vertical />
    </div>
  </div>
  `,
})

Text = () => {
  const [clicked, setClicked] = React.useState(false)

  return (
    <React.Fragment>
      <Button
        onClick={() => {
          action('click')('foo', 'bar')
          setClicked(true)
        }}
      >
        Hello Button
      </Button>
      <div id="knob">{text('text', 'Default Knob')}</div>
      <div id="clicked">{clicked ? 'clicked!' : ''}</div>
    </React.Fragment>
  )
}

reduxDecorator = (Story, context) => {
  const { state } = context.parameters;

  const store = configureStore({
    reducer: rootReducer,
    preloadedState: state,
  });

  store.dispatch = action('dispatch');

  const Decorator = () => {
    return (
      <Provider store={store}>
        <Story />
      </Provider>
    );
  };

  return <Decorator />;
}

Basic = () => (
  <Header
    leftSideContent="Left Side Content"
    onClickItem={action("onClickItem")}
    items={[
      { name: "Prev" },
      { name: "Next" },
      { name: "Clone", disabled: true },
      { name: "Settings" },
    ]}
  />
)

// Buttons
storiesOf('Button', module)
  .add('primary', () => (
    <Button type="button" theme="primary" onClick={action('clicked')}>Button</Button>
  ))
  .add('secondary', () => (
    <Button type="button" theme="secondary" onClick={action('clicked')}>Button</Button>
  ))
  .add('default', () => (
    <Button type="button" onClick={action('clicked')}>Button</Button>
  ))
  .add('with icon', () => (
    <Button type="button" theme="primary" onClick={action('clicked')}>Button <Icon size={1.3}>face</Icon></Button>
  ))

EdlibModal = () => {
    return (
        <AuthWrapper edlibApiUrl={edlibApiUrl}>
            {({ getJwt, getLanguage }) => {
                return (
                    <EdlibComponentsProvider
                        edlibUrl={edlibApiUrl}
                        getJwt={getJwt}
                        configuration={{
                            canReturnResources: true,
                        }}
                        language={getLanguage()}
                    >
                        <EdlibModalComponent
                            enableDoku={true}
                            enableVersionInterface={true}
                            onClose={action('on close')}
                            onResourceSelected={async (info) =>
                                action('Resource insert')(info)
                            }
                        />
                    </EdlibComponentsProvider>
                );
            }}
        </AuthWrapper>
    );
}

Navbar_On_Mobile = () => (
  <DefaultNavbar
    onClick={ action('clicked') }
    links={ links }
    logo={ defaultLogo }
    logoLink='https://default.services'
    logoTitle='Default Services'
  />
)

Playground = () => ({
  template: hbs`
    <DenaliAlert
      @title={{title}}
      @context={{context}}
      @style={{style}}
      @icon={{icon}}
      @isBlock={{isBlock}}
      @onClose={{onClose}}
      class={{class}}
    />
  `,
  context: {
    title: text('title', 'Denali Alert', argument),
    context: text('context', 'Optional alert details', argument),
    style: select('style', STYLES, STYLES[0], argument),
    icon: text('icon', 'stop-urgent', argument),
    isBlock: boolean('isBlock', false, argument),
    onClose: action('onClose'),
    class: text('class', '', attribute),
  },
})

renderHelper = (
  Component,
  defaultErrorMessage,
  defaultIsFirst = false,
  defaultIsSelected = false,
  defaultMessagePartition = 0,
  defaultMessageOffset = 100,
  defaultMessageValue = 'Hello World!',
  defaultMessageTimestamp = new Date().getTime()
) => () => {
  const isFirst = boolean('First message', defaultIsFirst);
  const isSelected = boolean('Selected message', defaultIsSelected);
  const message = {
    topic: 'demo',
  };
  message.partition = number('Message partition', defaultMessagePartition);
  message.offset = number('Message offset', defaultMessageOffset);
  message.value = text('Message value', defaultMessageValue);
  message.timestamp = number('Message timestamp', defaultMessageTimestamp);

  const className = text('Custom CSS classname', undefined);
  const props = {
    isFirst,
    isSelected,
    message,
    className,
    onInteraction: action('handleClick'),
  };

  const errorMessage = text('Error message', defaultErrorMessage);
  if (errorMessage) {
    props.error = {
      message: errorMessage,
    };
  }

  return <Component {...props} />;
}

Controller = ({ value }) => {
  const [color, setColor] = useState(value);
  const handleChange = newValue => {
    setColor(newValue);
    action('changed')(newValue);
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <div>
        <div style={{ marginLeft: '-28px', marginTop: '-8px', paddingBottom: '28px', color: '#777', fontSize: '10px' }}>
          <h1>material-ui-color</h1>
          <h2>ColorPicker example</h2>
        </div>
        <ColorPicker value={color} palette={paletteObj} onChange={handleChange} />
        <Button variant="outlined" style={{ marginTop: '100px' }} onClick={() => handleChange('rgb(255, 0, 0)')}>
          set rgb(255, 0, 0)
        </Button>
        <div style={{ paddingTop: '180px', marginLeft: '-28px', color: '#999', fontSize: '12px' }}>
          https://github.com/mikbry/material-ui-color
        </div>
      </div>
      <div
        style={{
          color: '#777',
          marginLeft: '24px',
          width: '400px',
          height: '480px',
          backgroundColor: color.hex ? `#${color.hex}` : color,
        }}
      />
    </div>
  );
}

/**
 * Creates a decorator which maps a callback prop to an input prop.
 * For example: mapping the onChange callback of a Select component to its currentValue prop.
 * Useful for adding interactivity to stories of controlled components.
 * Additionally, the callback will trigger a Storybook action, that can be seen on the Actions tab.
 * @param {string} actionName - the name of the action prop of the component in the story. For example, "setValue" or "onChange".
 * @param {string} linkedToPropValue - the name of the prop which should be updated when the prop of "actionName" is called. For example, "value".
 * @returns A decorate for storybook which updates the {@link linkedToPropValue} input of the component, whenever {@link actionName} is called.
 */
function createMappedActionToInputPropDecorator(actionName, linkedToPropValue) {
  return (Story, context) => {
    const [propValue, setPropValue] = useState(context.initialArgs[linkedToPropValue]);
    const createAction = useMemo(() => action(actionName), []);

    const injectedCallback = useCallback(
      newPropValue => {
        setPropValue(newPropValue);
        createAction(newPropValue);
      },
      [setPropValue, createAction]
    );

    context.args[actionName] = injectedCallback;
    context.args[linkedToPropValue] = propValue;

    return Story();
  };
}

storiesOf('Atoms/Button', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Native Button"
      url="components/atoms/button"
      storyFn={storyFn}
    >
      An example story in a <InlineCode code=".native.js" /> file. This story is
      only visible when exploring storybook on a native device
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('Native Only', () => (
    <DocItem
      sectionTitle="Native Only"
      name="title"
      description="The title to be used for the buttons content"
      typeInfo="string"
      required
      example={{
        render: (
          <Button
            onPress={action('Button Pressed')}
            title={text('text', 'Native Button')}
          />
        ),
        code: '<Button title="Native Button" onPress={handleButtonPress}>'
      }}
    />
  ))

storiesOf('Checkbox', module)
  .addParameters({
    component: Checkbox,
  })
  .add('defaultChecked', () => (
    <Flex flexDirection="column">
      <View>
        <Checkbox
          defaultChecked={boolean('Default Checked', false)}
          size={select('Size', sizeOptions, 'large')}
          title={text('Title', 'Enable Beast Mode')}
          helpText={text('Help Text', 'This is help text.')}
          disabled={boolean('Disabled', false)}
          onChange={action('Changed')}
        />
        <Checkbox
          defaultChecked={boolean('Default Checked', false)}
          size={select('Size', sizeOptions, 'large')}
          title={text('Title', 'Enable Beast Mode')}
          disabled={boolean('Disabled', false)}
          onChange={action('Changed')}
          errorText={text('Error Text', 'This is an error.')}
        />
      </View>
    </Flex>
  ))
  .add('checked', () => (
    <Checkbox
      checked={boolean('Checked', true)}
      size={select('Size', sizeOptions, 'large')}
      title={text('Title', 'Enable Beast Mode')}
      helpText={text('Help Text', 'Play with addons')}
      disabled={boolean('Disabled', false)}
      onChange={action('Changed')}
      errorText={text('Error Text', '')}
    />
  ));

Default = () => ({
  components: { BaseButton, AlertModal },
  props: {
    cancelLabel: {
      default: text('Cancel label', 'Cancel'),
    },
    confirmLabel: {
      default: text('Confirm label', 'Continue'),
    },
    message: {
      default: text(
        'Message',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      ),
    },
    title: {
      default: text('Title', 'What a success!'),
    },
    variant: {
      default: select(
        'Variant',
        Object.values(Modal.Alerts),
        Modal.Alerts.SUCCESS
      ),
    },
  },
  data() {
    return { isModalOpen: true };
  },
  methods: {
    handleCancel: action('cancel'),
    handleConfirm: action('confirm'),
  },
  template: `
  <div>
    <BaseButton @click="isModalOpen = !isModalOpen">Toggle Modal</BaseButton>
    <AlertModal
      v-if="isModalOpen"
      :cancel-label="cancelLabel"
      :confirm-label="confirmLabel"
      :variant="variant"
      :title="title"
      :message="message"
      @close="isModalOpen = false"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    />
  </div>
  `,
})

handleClick = action('button clicked')

Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      Emoji ? ? ? ?
    </span>
  </Button>
)

WithOnChangeHandler = () => (
  <ReactTrixRTEInput onChange={action('onChange')} />
)