UI: refactor Canvas component so we can improve types for PREVIEW addons and TAB addons

[ndelangen]

What I did

• Improve types / jsdoc comments
• split off the Addon_TypesEnum.PREVIEW type from Addon_BaseTypes, because a PREVIEW-type addon actually has a different interface.
• I refactored the code for tabs and preview-wrappers, hopefully it makes more sense now.

How to test

• rename .storybook/manager.ts to .storybook/manager.tsx inside the ui directory
• replace the file's cpontents with:

  import React from 'react';
  import { addons } from '@storybook/manager-api';
  import { Addon_TypesEnum } from '@storybook/types';
  import startCase from 'lodash/startCase.js';
  
  addons.setConfig({
    sidebar: {
      renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
    },
  });
  
  addons.add('my-org/custom-preview', {
    type: Addon_TypesEnum.PREVIEW,
    render: ({ children }) => (
      <div style={{ transform: 'rotate(180deg)', width: '100%', height: '100%' }}>{children}</div>
    ),
  });
  
  const CustomTab = () => (
    <div
      style={{
        position: 'absolute',
        zIndex: '1',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'gold',
        color: 'black',
      }}
    >
      Custom Tab
    </div>
  );
  
  addons.add('my-org/custom-tab', {
    type: Addon_TypesEnum.TAB,
    title: 'Custom Tab Title',
    route: ({ storyId, viewMode }) => `/${viewMode || 'story'}/${storyId}/custom`,
    match: ({ path }) => path.includes('/custom'),
    render: ({ active }) => (active ? <CustomTab /> : null),
  });

• start the ui storybook
• There are a bunch of funky things going on:
  • There is now a canvas tab (normally not shown) because an extra TAB addon was inserted.
  • The extra tab, adds /custom to the path, which makes the custom Tab content render (on top of the normal canvas)
  • The canvas component is wrapped by the custom PREVIEW type addon, which just rotates the canvas 180 degrees (because that's a fun way of showing what PREVIEW type addons can do.
• Switching between tabs should work as expected. Note that it's completely up to the addon creator to decide what the TAB does. Note that the canvas WILL be hidden unless the route starts with docs or story..
  If a TAB navigates to something else, they'll have to handle showing something in another way. (that's what full viewport addons experimental_PAGE type addons will be able to handle.
• If you remove the TAB addon, no tabs should be shown, the "Canvas" tab should be auto-removed, if it's the only TAB.

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"]

[tmeasday]

Lgtm apart from one query