@storybook/addon-actions

  • Version 8.6.4
  • Published
  • 65.2 kB
  • 5 dependencies
  • MIT license

Install

npm i @storybook/addon-actions
yarn add @storybook/addon-actions
pnpm add @storybook/addon-actions

Overview

Get UI feedback when an action is performed on an interactive element

Index

Variables

variable actions

const actions: ActionsFunction;

    variable ADDON_ID

    const ADDON_ID: string;

      variable CLEAR_ID

      const CLEAR_ID: string;

        variable config

        const config: ActionOptions;

          variable CYCLIC_KEY

          const CYCLIC_KEY: string;

            variable EVENT_ID

            const EVENT_ID: string;

              variable PANEL_ID

              const PANEL_ID: string;

                variable PARAM_KEY

                const PARAM_KEY: string;

                  Functions

                  function _default

                  _default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;

                    function action

                    action: (name: string, options?: ActionOptions) => HandlerFunction;

                      function configureActions

                      configureActions: (options?: ActionOptions) => void;

                        Interfaces

                        interface ActionDisplay

                        interface ActionDisplay {}

                          property count

                          count: number;

                            property data

                            data: {
                            name: string;
                            args: any[];
                            };

                              property id

                              id: string;

                                property options

                                options: ActionOptions;

                                  interface ActionsFunction

                                  interface ActionsFunction {}

                                    call signature

                                    <T extends string>(
                                    handlerMap: Record<T, string>,
                                    options?: ActionOptions
                                    ): ActionsMap<T>;

                                      call signature

                                      <T extends string>(...handlers: T[]): ActionsMap<T>;

                                        call signature

                                        <T extends string>(
                                        handler1: T,
                                        handler2: T,
                                        handler3: T,
                                        handler4: T,
                                        handler5: T,
                                        handler6: T,
                                        handler7: T,
                                        handler8: T,
                                        handler9: T,
                                        options?: ActionOptions
                                        ): ActionsMap<T>;

                                          call signature

                                          <T extends string>(
                                          handler1: T,
                                          handler2: T,
                                          handler3: T,
                                          handler4: T,
                                          handler5: T,
                                          handler6: T,
                                          handler7: T,
                                          handler8: T,
                                          handler9: T,
                                          handler10: T,
                                          options?: ActionOptions
                                          ): ActionsMap<T>;

                                            call signature

                                            <T extends string>(handler1: T, options?: ActionOptions): ActionsMap<T>;

                                              call signature

                                              <T extends string>(
                                              handler1: T,
                                              handler2: T,
                                              options?: ActionOptions
                                              ): ActionsMap<T>;

                                                call signature

                                                <T extends string>(
                                                handler1: T,
                                                handler2: T,
                                                handler3: T,
                                                options?: ActionOptions
                                                ): ActionsMap<T>;

                                                  call signature

                                                  <T extends string>(
                                                  handler1: T,
                                                  handler2: T,
                                                  handler3: T,
                                                  handler4: T,
                                                  options?: ActionOptions
                                                  ): ActionsMap<T>;

                                                    call signature

                                                    <T extends string>(
                                                    handler1: T,
                                                    handler2: T,
                                                    handler3: T,
                                                    handler4: T,
                                                    handler5: T,
                                                    options?: ActionOptions
                                                    ): ActionsMap<T>;

                                                      call signature

                                                      <T extends string>(
                                                      handler1: T,
                                                      handler2: T,
                                                      handler3: T,
                                                      handler4: T,
                                                      handler5: T,
                                                      handler6: T,
                                                      options?: ActionOptions
                                                      ): ActionsMap<T>;

                                                        call signature

                                                        <T extends string>(
                                                        handler1: T,
                                                        handler2: T,
                                                        handler3: T,
                                                        handler4: T,
                                                        handler5: T,
                                                        handler6: T,
                                                        handler7: T,
                                                        options?: ActionOptions
                                                        ): ActionsMap<T>;

                                                          call signature

                                                          <T extends string>(
                                                          handler1: T,
                                                          handler2: T,
                                                          handler3: T,
                                                          handler4: T,
                                                          handler5: T,
                                                          handler6: T,
                                                          handler7: T,
                                                          handler8: T,
                                                          options?: ActionOptions
                                                          ): ActionsMap<T>;

                                                            interface ActionsParameters

                                                            interface ActionsParameters {}

                                                              property actions

                                                              actions: {
                                                              /**
                                                              * Create actions for each arg that matches the regex. (**NOT recommended, see below**)
                                                              *
                                                              * This is quite useful when your component has dozens (or hundreds) of methods and you do not
                                                              * want to manually apply the fn utility for each of those methods. However, this is not the
                                                              * recommended way of writing actions. That's because automatically inferred args are not
                                                              * available as spies in your play function. If you use argTypesRegex and your stories have play
                                                              * functions, you will need to also define args with the fn utility to test them in your play
                                                              * function.
                                                              *
                                                              * @example `argTypesRegex: '^on.*'`
                                                              */
                                                              argTypesRegex?: string;
                                                              /** Remove the addon panel and disable the addon's behavior */
                                                              disable?: boolean;
                                                              /**
                                                              * Binds a standard HTML event handler to the outermost HTML element rendered by your component
                                                              * and triggers an action when the event is called for a given selector. The format is
                                                              * `<eventname> <selector>`. The selector is optional; it defaults to all elements.
                                                              *
                                                              * **To enable this feature, you must use the `withActions` decorator.**
                                                              *
                                                              * @example `handles: ['mouseover', 'click .btn']`
                                                              *
                                                              * @see https://storybook.js.org/docs/essentials/actions#action-event-handlers
                                                              */
                                                              handles?: string[];
                                                              };
                                                              • Actions configuration

                                                                See Also

                                                                • https://storybook.js.org/docs/essentials/actions#parameters

                                                              Type Aliases

                                                              type ActionOptions

                                                              type ActionOptions = Partial<Options> & Partial<Options$1>;

                                                                type ActionsMap

                                                                type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;

                                                                  type DecoratorFunction

                                                                  type DecoratorFunction = (args: any[]) => any[];

                                                                    type HandlerFunction

                                                                    type HandlerFunction = (...args: any[]) => void;

                                                                      Package Files (1)

                                                                      Dependencies (5)

                                                                      Dev Dependencies (6)

                                                                      Peer Dependencies (1)

                                                                      Badge

                                                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/addon-actions.

                                                                      • Markdown
                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/addon-actions)
                                                                      • HTML
                                                                        <a href="https://www.jsdocs.io/package/@storybook/addon-actions"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>