How to use @storybook/api - 10 common examples

export const CoveragePanel: React.FC<{}> = () => {
  const [coverageSummary, setCoverageSummary] = useAddonState(ADDON_ID, null);
  const [coverageDetail, setCoverageDetail] = useAddonState(ADDON_ID, null);
  useChannel({
    [EVENTS.COVERAGE_DETAIL]: (detail: CoverageDetail) => setCoverageDetail(detail),
  });
  // console.log('panel', { coverage });
  // return coverageSummary ?  : <div>No coverage</div>;
  return coverageDetail ?  : <div>No coverage</div>;
};

const SignInPanel = () => {
  const value = useParameter(PARAM_KEY, null);

  const [state, setState] = useState(Providers.globalProvider.state);

  const emit = useChannel({
    STORY_RENDERED: id => {
      console.log('storyRendered', id);
    },
    [GETPROVIDER_EVENT]: params => {
      emitProvider(state);
    }
  });

  const emitProvider = loginState => {
    emit(SETPROVIDER_EVENT, { state: loginState });
  };

const SignInPanel = () => {
  const value = useParameter(PARAM_KEY, null);

  const [state, setState] = useState(Providers.globalProvider.state);

  const emit = useChannel({
    STORY_RENDERED: id => {
      console.log('storyRendered', id);
    },
    [GETPROVIDER_EVENT]: params => {
      emitProvider(state);
    }
  });

  const emitProvider = loginState => {
    emit(SETPROVIDER_EVENT, { state: loginState });
  };

  Providers.onProviderUpdated(() => {
    setState(Providers.globalProvider.state);
    emitProvider(Providers.globalProvider.state);
  });

export const Panel = () => {
  const [results, setState] = useAddonState(ADDON_ID, []);
  const emit = useChannel({
    [EVENTS.RESULT]: (newResults: Results) => setState(newResults),
  });

  return (
    
      <content>
       emit(EVENTS.REQUEST) },
          { title: 'setState', onClick: () =&gt; setState(['foo']) },
          {
            title: 'setState with options',
            onClick: () =&gt; setState(['bar'], { persistence: 'session' }),
          },</content>

const ViewportTool = () => {
  const [role, setRole] = useAddonState(ADDON_ID, 'myra_range_officer')

  const emit = useChannel({
    [STORY_RENDERED]: () => {
      setTimeout(() => {
        emit('role/change', role)
      }, 100)
    }
  })

  const handleChange = e => {
    setRole(e.target.value)
    emit('role/change', e.target.value)
  }

  return (

const ViewportTool = () => {
  const [role, setRole] = useAddonState(ADDON_ID, 'myra_range_officer')

  const emit = useChannel({
    [STORY_RENDERED]: () => {
      setTimeout(() => {
        emit('role/change', role)
      }, 100)
    }
  })

  const handleChange = e => {
    setRole(e.target.value)
    emit('role/change', e.target.value)
  }

  return (

const Editor = ({ api }: { api: API }) => {
  const emit = useChannel({});
  const story = useCurrentStory();
  const storyId = story && story.id ? story.id : '';
  const [initialCode, setInitialCode] = useEditor();
  const [metaData, setMetadata] = React.useState(null);

  let previousSource = '';

  const loadStoryCode = (sourceLoader: SourceLoaderInfo) => {
    const sourceCode = sourceLoader.edition.source;
    setMetadata(sourceLoader);
    if (previousSource === sourceCode || initialCode[storyId]) {
      return null;
    }
    previousSource = sourceCode;
    const sourceSplitted = sourceCode.split('\n');

export const Panel = () => {
  const [results, setState] = useAddonState(ADDON_ID, []);
  const emit = useChannel({
    [EVENTS.RESULT]: (newResults: Results) => setState(newResults),
  });

  return (
    
      <content>
       emit(EVENTS.REQUEST) },
          { title: 'setState', onClick: () =&gt; setState(['foo']) },
          {
            title: 'setState with options',
            onClick: () =&gt; setState(['bar'], { persistence: 'session' }),
          },
          { title: 'setState with function', onClick: () =&gt; setState(s =&gt; [...s, 'baz']) },</content>

export const CoverageTool: React.FunctionComponent<{}> = () => {
  const [active, setActive] = useState(true);
  const icon = active ? 'eye' : 'eyeclose';

  window.getStoryColor = (storyId: string) => getColor(storyId, active);
  const emit = useChannel({
    [EVENTS.COVERAGE_SUMMARY]: (summary: CoverageSummary) => {
      setCoverageSummary(summary);
    },
  });
  return (
     {
        setActive(!active);
        emit(SELECT_STORY, { kind: 'Coverage|Welcome', story: 'normal' });
      }}
    >

const Editor = ({ api }: { api: API }) => {
  const emit = useChannel({});
  const story = useCurrentStory();
  const storyId = story && story.id ? story.id : '';
  const [initialCode, setInitialCode] = useEditor();
  const [metaData, setMetadata] = React.useState(null);

  let previousSource = '';

  const loadStoryCode = (sourceLoader: SourceLoaderInfo) => {
    const sourceCode = sourceLoader.edition.source;
    setMetadata(sourceLoader);
    if (previousSource === sourceCode || initialCode[storyId]) {
      return null;
    }
    previousSource = sourceCode;
    const sourceSplitted = sourceCode.split('\n');

    if (sourceLoader.location) {