feat: initial controls docs page

integrations/storybook/rollup.config.js

@@ -1,5 +1,10 @@
 import { config } from 'docz-rollup';
 
 export default config({
-  input: ['./src/index.ts', './src/preset.ts', './src/config.ts'],
+  input: [
+    './src/index.ts',
+    './src/preset.ts',
+    './src/config.ts',
+    './src/register.tsx',
+  ],
 });

integrations/storybook/src/config.ts

@@ -1,13 +1,13 @@
 import { addDecorator } from '@storybook/client-api';
 import { makeDecorator } from '@storybook/addons';
 import { controlsMessages } from './context/BroadcastMessage';
+// import './context/RenderDocsPages';
 
 addDecorator(
   makeDecorator({
     name: 'componnet-controls',
     parameterName: 'controls',
     wrapper: (storyFn, context) => {
-      console.log(controlsMessages);
       const values = controlsMessages && controlsMessages[context.id];
       //@ts-ignore
       return values ? storyFn(values, context) : storyFn(context);

integrations/storybook/src/context/RenderDocsPages.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BroadcastChannel } from 'broadcast-channel';
+import { DocsPage } from '../page/DocsPage';
+
+const ATTACH_DOCS_PAGE = 'attach_docs_page';
+const channel = new BroadcastChannel(ATTACH_DOCS_PAGE);
+
+channel.onmessage = (message: { id: string; active: boolean }) => {
+  console.log('will attach');
+  ReactDOM.render(
+    <DocsPage active={message.active} />,
+    document.getElementById(message.id),
+  );
+};

integrations/storybook/src/page/DocsPage.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import {
+  ControlsTable,
+  Title,
+  Subtitle,
+  Story,
+  Playground,
+  Stories,
+  Description,
+  ComponentSource,
+  PropsTable,
+} from '@component-controls/blocks';
+import { ThemeProvider, BlockContextProvider } from '../context';
+
+interface DocsPageProps {
+  active?: boolean;
+}
+export const DocsPage: FC<DocsPageProps> = ({ active }) => {
+  if (!active) {
+    return null;
+  }
+  return (
+    <ThemeProvider>
+      <BlockContextProvider>
+        <Title />
+        <Subtitle />
+        <Description />
+        <ComponentSource id="." title="Component" />
+        <Playground openTab="source" title=".">
+          <Story id="." />
+        </Playground>
+        <ControlsTable id="." />
+        <PropsTable of="." />
+        <Stories dark={true} />
+      </BlockContextProvider>
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/page/constants.ts

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

integrations/storybook/src/preset.ts

@@ -1,8 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 module.exports = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   config: (entry: any[] = [], options: any = {}) => {
     const result = [...entry];
     result.push(require.resolve('./config'));
     return result;
   },
+  managerEntries: (entry: any[] = [], options: any = {}) => {
+    const result = [...entry];
+    result.push(require.resolve('./register'));
+    return result;
+  },
 };

integrations/storybook/src/register.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { addons, types } from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from './page/constants';
+
+interface AddonPanelProps {
+  active?: boolean;
+  id?: string;
+}
+
+const AddonPanel: React.FC<AddonPanelProps> = ({ active, id }) => {
+  const channel = React.useMemo(
+    () => new BroadcastChannel('attach_docs_page'),
+    [],
+  );
+  React.useEffect(() => {
+    console.log('will post message');
+    channel.postMessage({ id: id, active });
+  }, [active]);
+  return <div id={id} />;
+};
+addons.register(ADDON_ID, () => {
+  const title = 'Page';
+  const key = title.toLowerCase();
+  addons.add(PANEL_ID, {
+    type: types.TAB,
+    title,
+    route: ({ storyId }) => `/${key}/${storyId}`,
+    match: ({ viewMode }) => viewMode === key,
+    render: ({ active }) => (
+      <AddonPanel active={active} id={`controls-docs-page-${key}`} />
+    ),
+  });
+});