fix: loading in custom pages

ccontrols · Apr 3, 2020 · 0237d4c · 0237d4c
1 parent db53271
commit 0237d4c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/integrations/storybook/src/context/RenderDocsPages.tsx b/integrations/storybook/src/context/RenderDocsPages.tsx
@@ -10,22 +10,23 @@ const channel = new BroadcastChannel(ATTACH_DOCS_PAGE);
 interface MessageProps {
   id: string;
   active: boolean;
+  storyId: string;
 }
-channel.onmessage = ({ id, active }: MessageProps) => {
+channel.onmessage = ({ id, active, storyId }: MessageProps) => {
   var node = document.getElementById(id);
   if (!node) {
     node = document.createElement('div');
     node.setAttribute('id', id);
     document.body.appendChild(node);
   }
   if (active) {
+    node.removeAttribute('hidden');
     ReactDOM.render(
-      <PageContainer active={active}>
+      <PageContainer active={active} storyId={storyId}>
         <DocsPage />
       </PageContainer>,
       document.getElementById(id),
     );
-    node.removeAttribute('hidden');
   } else {
     node.setAttribute('hidden', 'true');
     ReactDOM.unmountComponentAtNode(node);

diff --git a/integrations/storybook/src/page/PageContainer.tsx b/integrations/storybook/src/page/PageContainer.tsx
@@ -1,12 +1,33 @@
 import React, { FC } from 'react';
+import { STORY_CHANGED } from '@storybook/core-events';
+import { addons } from '@storybook/addons';
 import { ThemeProvider, BlockContextProvider } from '../context';
 
 interface PageContainerProps {
   active?: boolean;
+  storyId: string;
 }
 
-export const PageContainer: FC<PageContainerProps> = ({ children, active }) =>
-  active ? (
+export const PageContextContainer: FC<PageContainerProps> = ({
+  children,
+  storyId: defaultStoryId,
+}) => {
+  const [storyId, setStoryId] = React.useState<string | undefined>(
+    defaultStoryId,
+  );
+  const channel = React.useMemo(() => addons.getChannel(), []);
+  React.useEffect(() => {
+    const onStoryChange = (id: string) => {
+      console.log('set story', id);
+      setStoryId(id);
+    };
+
+    channel.on(STORY_CHANGED, onStoryChange);
+    return () => {
+      channel.off(STORY_CHANGED, onStoryChange);
+    };
+  }, []);
+  return (
     <div
       style={{
         display: 'flex',
@@ -17,10 +38,18 @@ export const PageContainer: FC<PageContainerProps> = ({ children, active }) =>
       <div style={{ maxWidth: '1000px', width: '100%' }}>
         {' '}
         <ThemeProvider>
-          <BlockContextProvider id="components-actionbar--overview">
-            {children}
-          </BlockContextProvider>
+          <BlockContextProvider id={storyId}>{children}</BlockContextProvider>
         </ThemeProvider>
       </div>
     </div>
+  );
+};
+
+export const PageContainer: FC<PageContainerProps> = ({
+  children,
+  active,
+  storyId,
+}) =>
+  active ? (
+    <PageContextContainer storyId={storyId}>{children}</PageContextContainer>
   ) : null;
diff --git a/integrations/storybook/src/register.tsx b/integrations/storybook/src/register.tsx
@@ -1,15 +1,17 @@
 /* eslint-disable react/display-name */
 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';
 
 interface AddonPanelProps {
   active?: boolean;
   id: string;
+  api: API;
 }
 
-const AddonPanel: React.FC<AddonPanelProps> = ({ active, id }) => {
+const AddonPanel: React.FC<AddonPanelProps> = ({ active, id, api }) => {
   const channel = React.useMemo(
     () => new BroadcastChannel('attach_docs_page'),
     [],
@@ -30,7 +32,8 @@ const AddonPanel: React.FC<AddonPanelProps> = ({ active, id }) => {
           }
         }
 
-        channel.postMessage({ id: id, active });
+        const story = api.getCurrentStoryData();
+        channel.postMessage({ id: id, active, storyId: story?.id });
         if (wrapper) {
           wrapper.removeAttribute('hidden');
         }
@@ -47,7 +50,7 @@ const AddonPanel: React.FC<AddonPanelProps> = ({ active, id }) => {
   }, [active]);
   return null;
 };
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, api => {
   const title = 'Page';
   const key = title.toLowerCase();
   addons.add(PANEL_ID, {
@@ -56,7 +59,7 @@ addons.register(ADDON_ID, () => {
     route: ({ storyId }) => `/${key}/${storyId}`,
     match: ({ viewMode }) => viewMode === key,
     render: ({ active }) => (
-      <AddonPanel active={active} id={`controls-docs-page-${key}`} />
+      <AddonPanel active={active} id={`controls-docs-page-${key}`} api={api} />
     ),
   });
 });