How to use the @storybook/addons.addons.register function in @storybook/addons

import React from 'react';
import { addons, types } from '@storybook/addons';

import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { CssResourcePanel } from './css-resource-panel';

addons.register(ADDON_ID, api => {
  // Need to cast as any as it's not matching Addon type, to investigate
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'CSS resources',
    render: ({ active }) => ,
    paramKey: PARAM_KEY,
  });
});

import React from 'react';
import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';

import Editor from './Editor';
import { API } from '@storybook/api';

// @ts-ignore
addons.register('editor', (api: API) => {
  addons.add('editor', {
    type: types.PANEL,
    title: 'editor',
    paramKey: 'storysource',
    render: ({ active, key}) => {
      return (
        
          
        
      );
    },
  });
});

import { addons } from '@storybook/addons'
import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events'

import ReactGA from 'react-ga'

addons.register('storybook/google-analytics', api => {
  ReactGA.initialize('UA-140068800-1')

  api.on(STORY_CHANGED, () => {
    const { path } = api.getUrlState()
    ReactGA.pageview(path)
  })
  api.on(STORY_ERRORED, ({ description }) => {
    ReactGA.exception({
      description,
      fatal: true,
    })
  })
})

/>
          
          
        
      
    
  
);

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    title: '',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => ,
  });

  addons.add(PANEL_ID, {
    title: 'Accessibility',
    type: types.PANEL,
    render: ({ active, key }) => ,
  });

  addons.add(PANEL_ID, {
    title: '',
    type: types.PREVIEW,

import { addons, types } from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from './shared';

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.TAB,
    title: 'Docs',
    route: ({ storyId }) => `/docs/${storyId}`,
    match: ({ viewMode }) => viewMode === 'docs',
    render: () => null,
  });
});

export function register() {
  addons.register(ADDON_ID, () => {
    addons.add(ADDON_ID, {
      title: 'GraphiQL',
      type: types.TAB,
      route: ({ storyId }) => `/graphql/${storyId}`,
      match: ({ viewMode }) => viewMode === 'graphql',
      render: GQL,
    });
  });
}

import * as React from 'react';

import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { Panel } from './panel';

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    title: 'design assets',
    type: types.PANEL,
    render: ({ active, key }) => (
      
        
      
    ),
    paramKey: PARAM_KEY,
  });
});

const results = useParameter(PARAM_KEY, []);

  return useMemo(
    () =>
      results.length ? (
        <ol>
          {results.map((i: string) =&gt; (
            <li>{i}</li>
          ))}
        </ol>
      ) : null,
    [results]
  );
};

addons.register(ADDON_ID, () =&gt; {
  addons.add(PANEL_ID, {
    title: 'parameter',
    type: types.PANEL,
    render: ({ active, key }) =&gt; (
      
        <content>
      </content>
    ),
  });
});

import { ADDON_ID, ADDON_PANEL, EVENTS } from './constants';

export interface Listener {
  next(
    scope: 'current' | 'jsx'
  ): typeof scope extends 'current'
    ? (id: string) => void
    : (id: string, jsx: string) => void;
}

const Observable = (channel: Channel, api: any) => (listener: Listener) => {
  channel.on(EVENTS.ADD_JSX, listener.next('jsx'));
  api.on(STORY_RENDERED, listener.next('current'));
};

addons.register(ADDON_ID, api => {
  const ob = Observable(addons.getChannel(), api);

  addons.addPanel(ADDON_PANEL, {
    title: 'JSX',
    render: ({ active }) => 
  });
});

/>
          
          
        
      
    
  
);

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    title: '',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => ,
  });

  addons.add(PANEL_ID, {
    title: 'Accessibility',
    type: types.PANEL,
    render: ({ active, key }) => ,
    paramKey: PARAM_KEY,
  });

  addons.add(PANEL_ID, {
    title: '',