Add Addon migration guide for Storybook 7.0 page

[kylegach]

What I did

• Add new docs page: Addon migration guide for Storybook 7.0 at /docs/addons/addon-migration-guide

How to test

Follow the documentation contribution instructions for this branch, addon-migration-docs.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[kylegach]

@ndelangen — I noticed this sentence in the full migration notes:

The addons export is now a named export only, there's no default export anymore, so make sure to update this usage.

I opted not to include that here. My thinking is that if they're making the code changes to accommodate that breaking change, we might as well point them only to the new packages and not to an already-deprecated technique.

[shilman]

Would be good for @ndelangen to review too

[jonniebigodes]

@kylegach going to approve this to avoid blocking you, as @shilman already covered the feedback that I had in his comments. Thanks for taking the time to put this together. Appreciate it.

[harellevy]

Here is what I did for addon-notes support in storybook 7, I added this custom panel to the manager.js file:
I'm not a react developer and didn't knew how to do this if else correctly in the template so sorry for that lines...

import { addons, types } from '@storybook/addons';
import React from 'react';
import { useStorybookState } from '@storybook/api';
import { Link as RouterLink } from '@storybook/router';
import { AddonPanel, SyntaxHighlighter as SyntaxHighlighterBase } from '@storybook/components';
import 'github-markdown-css/github-markdown.css';
import theme from './theme';
import Markdown from 'markdown-to-jsx';

addons.register('my/panel', (api) => {
  addons.add('my-panel-addon/panel', {
    title: 'Notes',
    type: types.TAB,
    id: '123',
    route: ({ storyId }) => `/my-addon/${storyId}`,
    match: ({ viewMode }) => viewMode === 'my-addon',
    render: ({ active, key }) => {
      const state = useStorybookState();
      const story = state.storiesHash[state.storyId];
      const notes = story && story.parameters && story.parameters.notes.markdown;
      if (notes) {
        const NotesLink = ({ href, children, ...props }) => {
          const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/.test(href);
          const isAnchorUrl = /^#.*/.test(href);

          if (isAbsoluteUrl || isAnchorUrl) {
            return (
              <a href={href} {...props}>
                {children}
              </a>
            );
          }
          return (
            <RouterLink to={href} {...props}>
              {children}
            </RouterLink>
          );
        };

        const SyntaxHighlighter = ({
                                     className,
                                     children,
                                     ...props
                                   }) => {
          // markdown-to-jsx does not add className to inline code
          if (typeof className !== "string") {
            return <code>{children}</code>;
          }
          // className: "lang-jsx"
          const language = className.split("-");

          return (
            <SyntaxHighlighterBase
              language={language[1] || "plaintext"}
              bordered
              format={false}
              copyable
              {...props}
            >
              {children}
            </SyntaxHighlighterBase>
          );
        };

        const defaultOptions = {
          overrides: {
            code: SyntaxHighlighter,
            a: NotesLink,
          },
        };
        const extraElements = Object.entries(
          api.getElements(types.NOTES_ELEMENT)
        ).reduce((acc, [k, v]) => ({ ...acc, [k]: v.render }), {});
        const options = {
          ...defaultOptions,
          overrides: { ...defaultOptions.overrides, ...extraElements },
        };
        return (
          <AddonPanel key={key} active={active}>
            <div className='addon-notes-container markdown-body' style={{ padding: '16px' }}>
              <Markdown options={options}>{notes}</Markdown>
            </div>
          </AddonPanel>
        );
      } else {
        return (
          <AddonPanel key={key} active={active}>
            <div className='addon-notes-container markdown-body' style={{ padding: '16px' }}>
            </div>
          </AddonPanel>
        );
      }

    },
  });
});