Experimental: Add API for addons to inject full-view 'pages'

code/addons/a11y/src/manager.test.tsx

@@ -19,10 +19,10 @@ describe('A11yManager', () => {
 
     const panel = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel');
+      .find(({ type }) => type === api.types.PANEL);
     const tool = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'tool');
+      .find(({ type }) => type === api.types.TOOL);
     expect(panel).toBeDefined();
     expect(tool).toBeDefined();
   });
@@ -33,7 +33,7 @@ describe('A11yManager', () => {
     registrationImpl(api as unknown as api.API);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel')?.title as Function;
+      .find(({ type }) => type === api.types.PANEL)?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility');
@@ -45,7 +45,7 @@ describe('A11yManager', () => {
     registrationImpl(mockedApi);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel')?.title as Function;
+      .find(({ type }) => type === api.types.PANEL)?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility (3)');

code/addons/actions/src/manager.tsx

@@ -40,7 +40,7 @@ addons.register(ADDON_ID, (api) => {
     countRef.current = 0;
   });
 
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
     title: <Title count={countRef} />,
     id: 'actions',
     type: types.PANEL,

code/addons/backgrounds/package.json

@@ -82,6 +82,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.1.0-alpha.42",
     "@storybook/preview-api": "7.1.0-alpha.42",
+    "@storybook/router": "7.1.0-alpha.42",
     "@storybook/theming": "7.1.0-alpha.42",
     "@storybook/types": "7.1.0-alpha.42",
     "memoizerific": "^1.11.3",

code/addons/backgrounds/src/manager.tsx

@@ -1,6 +1,10 @@
-import React, { Fragment } from 'react';
+import type { ComponentProps, FC } from 'react';
+import React, { memo, Fragment } from 'react';
 import { addons, types } from '@storybook/manager-api';
 
+import { Icons, IconButton, Bar, TabButton } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { Route } from '@storybook/router';
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 import { GridSelector } from './containers/GridSelector';
@@ -19,3 +23,93 @@ addons.register(ADDON_ID, () => {
     ),
   });
 });
+
+// TODO: remove after API is completed
+
+const Toolbar = styled(
+  ({ shown = true, ...props }: ComponentProps<typeof Bar> & { shown: boolean }) => (
+    <Bar {...props} />
+  )
+)(
+  {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    transition: 'transform .2s linear',
+  },
+  ({ shown }) => ({
+    transform: shown ? 'translateY(0px)' : 'translateY(-40px)',
+  })
+);
+const FrameWrap = styled.div<{ offset: number }>(({ offset }) => ({
+  position: 'absolute',
+  overflow: 'auto',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: offset,
+  zIndex: 3,
+  transition: 'all 0.1s linear',
+  height: `calc(100% - ${offset}px)`,
+  background: 'transparent',
+}));
+const Centered = styled.div({
+  position: 'relative',
+
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+addons.register('@storybook/addon-debugger', (api) => {
+  addons.add(ADDON_ID, {
+    title: 'Backgrounds',
+    type: types.TOOLEXTRA,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => (
+      <Fragment>
+        <IconButton
+          key="debugger"
+          title="navigate to debugger-view"
+          onClick={() =>
+            api.navigateUrl(`/debugger/${api.getCurrentStoryData().id}`, { plain: false })
+          }
+        >
+          <Icons icon="lightning" />
+        </IconButton>
+      </Fragment>
+    ),
+  });
+
+  const DebuggerPage: FC = () => {
+    return (
+      <Route path="/debugger" startsWith>
+        <Toolbar shown border>
+          <TabButton active>A tab</TabButton>
+          <IconButton
+            key="first"
+            title="Go to first story, for some reason. It's just a demo."
+            onClick={() => api.selectFirstStory()}
+          >
+            <Icons icon="star" />
+          </IconButton>
+        </Toolbar>
+        <FrameWrap offset={40}>
+          <Centered>
+            This is the contents of my addon, in a full viewport experience, what a joy!
+          </Centered>
+        </FrameWrap>
+      </Route>
+    );
+  };
+
+  addons.add('@storybook/addon-debugger/panel', {
+    title: 'Debugger',
+    type: types.experimental_PAGE,
+    url: '/debugger',
+    render: memo(DebuggerPage),
+  });
+});

code/addons/controls/src/manager.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { addons, types, type API, useArgTypes } from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
+import { addons, types, useArgTypes } from '@storybook/manager-api';
+import { AddonPanel, Badge, Spaced } from '@storybook/components';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
@@ -9,14 +9,21 @@ function Title() {
   const controlsCount = Object.values(rows).filter(
     (argType) => argType?.control && !argType?.table?.disable
   ).length;
-  const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
+  const suffix = controlsCount === 0 ? '' : <Badge status="neutral">{controlsCount}</Badge>;
 
-  return <>Controls{suffix}</>;
+  return (
+    <div>
+      <Spaced col={1}>
+        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Controls</span>
+        {suffix}
+      </Spaced>
+    </div>
+  );
 }
 
-addons.register(ADDON_ID, (api: API) => {
-  addons.addPanel(ADDON_ID, {
-    title: <Title />,
+addons.register(ADDON_ID, (api) => {
+  addons.add(ADDON_ID, {
+    title: Title,
     id: 'controls',
     type: types.PANEL,
     paramKey: PARAM_KEY,