How to use @storybook/addons - 10 common examples

test('register panel correctly', () => {
        //=== Before ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = {
            emit: () => {},
            on: () => {},
            removeListener: () => {}
        };


        //=== Test ===

        // Register addon
        register();
        // Register panel
        addons.loaders[ADDON_ID]();

        // The panel should be registered
        expect(typeof addons.panels[PANEL_ID]).toBe('object');

intlConfig: omit(config, ['locales', 'getMessages', 'getFormats']),
            locales: config.locales,
            getMessages: config.getMessages,
            getFormats: config.getFormats,
        };

        // Set the configuraton
        setIntlConfig(config);

        // Get instance of component
        const element = withIntl(story);

        // Check if props match
        expect(element.props).toEqual({
            ...expectedProps,
            channel: addons.channel,
            children: story()
        });


        //=== After ===
        addons.channel = null;
    });
});

// Check if the panel has correct values
        const panel = addons.panels[PANEL_ID];
        expect(panel.title).toBe('Locales');
        expect(typeof panel.render).toBe('function');

        // Check if render function returns correct element
        const element = panel.render({
            key: 'intl/panel',
            active: true
        });
        expect(element.type).toBe(LocalePanel);

        // Check if component receive correct props
        expect(element.props).toEqual({
            active: true,
            channel: addons.channel
        });
        expect(element.key).toEqual('intl/panel');


        //=== After ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = null;
    });
});

const element = panel.render({
            active: true
        });
        expect(element.type).toBe(LocalePanel);

        // Check if component receive correct props
        expect(element.props).toEqual({
            active: true,
            channel: addons.channel
        });


        //=== After ===
        addons.loaders = {};
        addons.panels = {};
        addons.channel = null;
    });

channel.emit(RTL_EVENT, this.state.rtlEnabled);
  };

  render() {
    return (
      <div>
        <button type="button">
          {this.state.rtlEnabled ? 'Disable' : 'Enable'} RTL
        </button>
      </div>
    );
  }
}

// Register the addon with a unique name.
addons.register('rtl-toggle', api =&gt; {
  // Also need to set a unique name to the panel.
  addons.addPanel('rtl-toggle/panel', {
    title: 'RTL',
    render: () =&gt; ,
  });
});

import addons, { makeDecorator } from '@storybook/addons';
import kebabCase from 'lodash/kebabCase';
import stripHOCs from '../../helpers/stripHOCs';

export const withProps = makeDecorator({
  name: 'withProps',
  parameterName: 'props',
  wrapper: (getStory, context) => {
    const components = {};

    context.parameters.inspectComponents.forEach(component => {
      components[stripHOCs(component.displayName || component.name)] = component;
    });

    // We need to cast globals to JSON, otherwise the data is lost
    addons.getChannel().emit('SET_PROPS_DATA', {
      components,
      componentChangelogs: JSON.stringify(COMPONENT_CHANGELOGS),
      componentMetadata: JSON.stringify(STORYBOOK_REACT_CLASSES),
      section: kebabCase(context.kind.split('/')[0]),
      storyPath: context.parameters.fileName,

const { secured } = params;
        const websocketType = secured ? 'wss' : 'ws';
        const httpType = secured ? 'https' : 'http';

        const url = `${websocketType}://${host}${port}/${query}`;
        webUrl = `${httpType}://${host}${port}`;
        channel = createChannel({
          url,
          async: onDeviceUI,
          onError: () => {
            this._setInitialStory(initialSelection, shouldPersistSelection);
          },
        });
      }

      addons.setChannel(channel);
      this._stories.setChannel(channel);

      channel.emit(Events.CHANNEL_CREATED);
    }

    channel.on(Events.GET_STORIES, () => this._sendSetStories());
    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));

    this._sendSetStories();

    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const preview = this;

    addons.loadAddons(this._clientApi);

    const appliedTheme = { ...theme, ...params.theme };

channel = this._events;
        } else {
          const host = params.host || parse(NativeModules.SourceCode.scriptURL).hostname;
          const port = params.port !== false ? `:${params.port || 7007}` : '';

          const query = params.query || '';
          const { secured } = params;
          const websocketType = secured ? 'wss' : 'ws';
          const httpType = secured ? 'https' : 'http';

          const url = `${websocketType}://${host}${port}/${query}`;
          webUrl = `${httpType}://${host}${port}`;
          channel = createChannel({ url });
        }

        addons.setChannel(channel);

        channel.emit('channelCreated');
      }

      channel.on('getStories', () => this._sendSetStories());
      channel.on('setCurrentStory', d => this._selectStory(d));
      this._events.on('setCurrentStory', d => this._selectStory(d));
      this._sendSetStories();
      this._sendGetCurrentStory();

      // finally return the preview component
      return params.onDeviceUI ? (
        
      ) : (
        
      );

() => {
    const toggleRef: RefObject = createRef()
    const toggleContainerRef: RefObject = createRef()

    const [checked, setChecked] = useState(false)

    const handleToggleChange = (): void => {
      setChecked(!checked)
    }

    const handleLogRefs = (): void => {
      /* eslint-disable */
      console.log('ToggleRef', toggleRef.current)
      console.log('ToggleContainerRef', toggleContainerRef.current)
      /* eslint-enable */
    }

    return (
      <div>
        </div>

() => {
    const [rangeSliderValue, setRangeSliderValue] = useState(50)
    const rangeSliderRef: RefObject = createRef()

    const handleInputChange = (e: ChangeEvent): void => {
      setRangeSliderValue(parseInt(e.target.value))
    }

    const handleLogRef = (): void => {
      /* eslint-disable */
      console.log(rangeSliderRef.current)
      /* eslint-enable */
    }

    const exampleRangeSliderStyle = {width: '100%'}

    return (
      <div></div>