fix: clean up for custom docs pages

ccontrols · Apr 3, 2020 · db53271 · db53271
1 parent 47cff36
commit db53271
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 55 deletions.
diff --git a/examples/storybook-6/.storybook/preview.js b/examples/storybook-6/.storybook/preview.js
@@ -31,7 +31,7 @@ export const DocsPage = () => {
 };
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
 addParameters({
-  docs: { page: DocsPage },
+  docs_xxx: { page: DocsPage },
   dependencies: { hideEmpty: true },
   options: {
     storySort: (a, b) => {

diff --git a/integrations/storybook/src/context/RenderDocsPages.tsx b/integrations/storybook/src/context/RenderDocsPages.tsx
@@ -1,21 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BroadcastChannel } from 'broadcast-channel';
+import { PageContainer } from '../page/PageContainer';
 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 }) => {
-  if (message.active) {
+interface MessageProps {
+  id: string;
+  active: boolean;
+}
+channel.onmessage = ({ id, active }: MessageProps) => {
+  var node = document.getElementById(id);
+  if (!node) {
+    node = document.createElement('div');
+    node.setAttribute('id', id);
+    document.body.appendChild(node);
+  }
+  if (active) {
     ReactDOM.render(
-      <DocsPage active={message.active} />,
-      document.getElementById(message.id),
+      <PageContainer active={active}>
+        <DocsPage />
+      </PageContainer>,
+      document.getElementById(id),
     );
+    node.removeAttribute('hidden');
   } else {
-    const node = document.getElementById(message.id);
-    if (node) {
-      ReactDOM.unmountComponentAtNode(node);
-    }
+    node.setAttribute('hidden', 'true');
+    ReactDOM.unmountComponentAtNode(node);
   }
 };
diff --git a/integrations/storybook/src/page/DocsPage.tsx b/integrations/storybook/src/page/DocsPage.tsx
@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-
 import {
   ControlsTable,
   Title,
@@ -11,39 +10,20 @@ import {
   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;
-  }
+export const DocsPage: FC = () => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        padding: '4rem 20px',
-      }}
-    >
-      <div style={{ maxWidth: '1000px', width: '100%' }}>
-        <ThemeProvider>
-          <BlockContextProvider id="components-actionbar--overview">
-            <Title />
-            <Subtitle />
-            <Description />
-            <ComponentSource id="." title="Component" />
-            <Playground openTab="source" title=".">
-              <Story id="." />
-            </Playground>
-            <ControlsTable id="." />
-            <PropsTable of="." />
-            <Stories dark={true} />
-          </BlockContextProvider>
-        </ThemeProvider>
-      </div>
-    </div>
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      <ComponentSource id="." title="Component" />
+      <Playground openTab="source" title=".">
+        <Story id="." />
+      </Playground>
+      <ControlsTable id="." />
+      <PropsTable of="." />
+      <Stories dark={true} />
+    </>
   );
 };
diff --git a/integrations/storybook/src/page/PageContainer.tsx b/integrations/storybook/src/page/PageContainer.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { ThemeProvider, BlockContextProvider } from '../context';
+
+interface PageContainerProps {
+  active?: boolean;
+}
+
+export const PageContainer: FC<PageContainerProps> = ({ children, active }) =>
+  active ? (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '4rem 20px',
+      }}
+    >
+      <div style={{ maxWidth: '1000px', width: '100%' }}>
+        {' '}
+        <ThemeProvider>
+          <BlockContextProvider id="components-actionbar--overview">
+            {children}
+          </BlockContextProvider>
+        </ThemeProvider>
+      </div>
+    </div>
+  ) : null;
diff --git a/integrations/storybook/src/register.tsx b/integrations/storybook/src/register.tsx
@@ -15,23 +15,34 @@ const AddonPanel: React.FC<AddonPanelProps> = ({ active, id }) => {
     [],
   );
   React.useEffect(() => {
-    var iframe = document.getElementById(
+    const iframe = document.getElementById(
       'storybook-preview-iframe',
     ) as HTMLIFrameElement;
-    if (iframe && iframe.contentWindow) {
-      var node = iframe.contentWindow.document.getElementById(id);
-      if (!node) {
-        node = iframe.contentWindow.document.createElement('div');
-        node.setAttribute('id', id);
-        iframe.contentWindow.document.body.appendChild(node);
-      }
-      if (active) {
-        node.removeAttribute('hidden');
+    const wrapper = document.getElementById('storybook-preview-wrapper');
+    if (wrapper && iframe && iframe.contentDocument) {
+      const updateDOM = () => {
+        const root = iframe.contentDocument?.getElementById('root');
+        if (root) {
+          if (active) {
+            root.style.setProperty('display', 'none');
+          } else {
+            root.style.removeProperty('display');
+          }
+        }
+
+        channel.postMessage({ id: id, active });
+        if (wrapper) {
+          wrapper.removeAttribute('hidden');
+        }
+      };
+
+      if (!iframe.contentDocument.getElementById('root')) {
+        iframe.onload = () => {
+          updateDOM();
+        };
       } else {
-        node.setAttribute('hidden', 'true');
+        updateDOM();
       }
-      node.setAttribute('id', id);
-      channel.postMessage({ id: id, active });
     }
   }, [active]);
   return null;