How to use @storybook/client-api - 10 common examples

try {
        channel = addons.getChannel();
      } catch (e) {
        channel = createChannel({ page: 'preview' });
        addons.setChannel(channel);
      }
    }
    let storyStore;
    let clientApi;
    if (typeof window !== 'undefined' && window.__STORYBOOK_CLIENT_API__) {
      clientApi = window.__STORYBOOK_CLIENT_API__;
      // eslint-disable-next-line no-underscore-dangle
      storyStore = clientApi._storyStore;
    } else {
      storyStore = new StoryStore({ channel });
      clientApi = new ClientApi({ storyStore, decorateStory });
    }
    const { clearDecorators } = clientApi;
    const configApi = new ConfigApi({ clearDecorators, storyStore, channel, clientApi });

    return {
      configApi,
      storyStore,
      channel,
      clientApi,
      showMain,
      showError,
      showException,
    };
  };
})();

if (isBrowser) {
      try {
        channel = addons.getChannel();
      } catch (e) {
        channel = createChannel({ page: 'preview' });
        addons.setChannel(channel);
      }
    }
    let storyStore;
    let clientApi;
    if (typeof window !== 'undefined' && window.__STORYBOOK_CLIENT_API__) {
      clientApi = window.__STORYBOOK_CLIENT_API__;
      // eslint-disable-next-line no-underscore-dangle
      storyStore = clientApi._storyStore;
    } else {
      storyStore = new StoryStore({ channel });
      clientApi = new ClientApi({ storyStore, decorateStory });
    }
    const { clearDecorators } = clientApi;
    const configApi = new ConfigApi({ clearDecorators, storyStore, channel, clientApi });

    return {
      configApi,
      storyStore,
      channel,
      clientApi,
      showMain,
      showError,
      showException,
    };
  };
})();

channel = createChannel({ page: 'preview' });
        addons.setChannel(channel);
      }
    }
    let storyStore;
    let clientApi;
    if (typeof window !== 'undefined' && window.__STORYBOOK_CLIENT_API__) {
      clientApi = window.__STORYBOOK_CLIENT_API__;
      // eslint-disable-next-line no-underscore-dangle
      storyStore = clientApi._storyStore;
    } else {
      storyStore = new StoryStore({ channel });
      clientApi = new ClientApi({ storyStore, decorateStory });
    }
    const { clearDecorators } = clientApi;
    const configApi = new ConfigApi({ clearDecorators, storyStore, channel, clientApi });

    return {
      configApi,
      storyStore,
      channel,
      clientApi,
      showMain,
      showError,
      showException,
    };
  };
})();

/* eslint no-underscore-dangle: 0 */
import { navigator } from 'global';
import escape from 'escape-html';

import { getQueryParams } from '@storybook/client-api';

import KnobStore from './KnobStore';
import { SET } from './shared';

import { deserializers } from './converters';

const knobValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
  if (k.includes('knob-')) {
    return { ...acc, [k.replace('knob-', '')]: v };
  }
  return acc;
}, {});

// This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
const PANEL_UPDATE_INTERVAL = 400;

const escapeStrings = obj => {
  if (typeof obj === 'string') {
    return escape(obj);
  }
  if (obj == null || typeof obj !== 'object') {
    return obj;
  }

import React from 'react';
import { ThemeProvider } from 'styled-components'
import { getQueryParam } from '@storybook/client-api';

const currentThemeValueFromUrl = getQueryParam('currentTheme');

export default class WrapStory extends React.Component {

  constructor(props) {
    super(props)
    const keys = Object.keys(props.themes)
    this.state = {theme: props.themes[currentThemeValueFromUrl || keys[0]]}
    this.updateState = this.updateState.bind(this)
  }

  componentDidMount() {
    this.props.channel.emit('storybook-styled-components:init', this.props.themes)
    this.props.channel.on('storybook-styled-components:update', this.updateState)
  }

  componentWillUnmount() {

export const withOverflowScrollOnHtml = () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <div>Scroll down</div>
      <button> setOpen(true)}&gt;Show dialog</button>
      <dialog> setOpen(false)}&gt;
        <header>Dialog title</header>
      </dialog>
    </div>
  );
};
withOverflowScrollOnHtml.story = {

export const Input = () => {
  const [text, setText] = useState('foo');
  return <input value="{text}"> setText(e.target.value)} /&gt;;
};

export const Checkbox = () => {
  const [on, setOn] = useState(false);
  return (
    <label>
      <input checked="{on}" type="checkbox"> setOn(e.target.checked)} /&gt;
      On
    </label>
  );
};

constructor() {
    this._addons = {};
    this._decorators = [];
    this._stories = new StoryStore({ channel: null });
    this._clientApi = new ClientApi({ storyStore: this._stories });
  }

constructor() {
    this._addons = {};
    this._decorators = [];
    this._stories = new StoryStore({ channel: null });
    this._clientApi = new ClientApi({ storyStore: this._stories });
  }