feat: initial checkin controls panel

integrations/storybook/rollup.config.js

@@ -6,5 +6,6 @@ export default config({
     './src/preset.ts',
     './src/config.ts',
     './src/register.tsx',
+    './src/register-panel.tsx',
   ],
 });

integrations/storybook/src/page/PageContainer.tsx

@@ -18,7 +18,6 @@ export const PageContextContainer: FC<PageContainerProps> = ({
   const channel = React.useMemo(() => addons.getChannel(), []);
   React.useEffect(() => {
     const onStoryChange = (id: string) => {
-      console.log('set story', id);
       setStoryId(id);
     };
 

integrations/storybook/src/page/constants.ts

@@ -1,2 +1 @@
-export const ADDON_ID = 'storybook/page';
-export const PANEL_ID = `${ADDON_ID}/panel`;
+export const ADDON_ID = 'controls/page';

integrations/storybook/src/panel/constants.ts

@@ -0,0 +1,2 @@
+export const ADDON_ID = 'controls/panel';
+export const PANEL_ID = 'controls/panel/panel';

integrations/storybook/src/preset.ts

@@ -8,6 +8,7 @@ module.exports = {
   managerEntries: (entry: any[] = [], options: any = {}) => {
     const result = [...entry];
     result.push(require.resolve('./register'));
+    result.push(require.resolve('./register-panel'));
     return result;
   },
 };

integrations/storybook/src/register-panel.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable react/display-name */
+import * as React from 'react';
+import addons from '@storybook/addons';
+import { ControlsTable } from './blocks/ControlsTable';
+import { ADDON_ID, PANEL_ID } from './panel/constants';
+
+addons.register(ADDON_ID, api => {
+  addons.addPanel(PANEL_ID, {
+    title: 'Controls',
+    render: ({ active, key }) => (
+      <ControlsTable id="." api={api} key={key} active={active} />
+    ),
+  });
+});

integrations/storybook/src/register.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { BroadcastChannel } from 'broadcast-channel';
 import { API } from '@storybook/api';
 import { addons, types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './page/constants';
+import { ADDON_ID } from './page/constants';
 
 interface AddonPanelProps {
   active?: boolean;
@@ -44,7 +44,7 @@ const AddonPanel: React.FC<AddonPanelProps> = ({ active, id, api }) => {
 addons.register(ADDON_ID, api => {
   const title = 'Page';
   const key = title.toLowerCase();
-  addons.add(PANEL_ID, {
+  addons.add(`${ADDON_ID}/${key}`, {
     type: types.TAB,
     title,
     route: ({ storyId }) => `/${key}/${storyId}`,