feat: custom docs pages

examples/storybook-6-no-docs/.storybook/main.js

@@ -1,9 +1,10 @@
 const path = require('path');
 
 module.exports = {
-  presets:[
+
+  addons: [
     {
-      name: path.resolve(path.dirname(require.resolve('@component-controls/storybook')), 'preset.js'),
+      name: '@component-controls/storybook',
       options: {
         legacy: true,
         addonPanel: true,

examples/storybook-6/.storybook/custom-page-docs.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DocsContainer, Story} from '@storybook/addon-docs/blocks';
+import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
+
+const Page = () => {
+  const storyId = useStoryId();
+  return (
+    <DocsContainer context={getContext()}><Story id={storyId}/></DocsContainer>
+  )
+}
+export default {
+  key: 'docs-page',
+  title: 'Docs Page',
+  render: ({ active, storyId }) => {
+    return active ? <Page storyId={storyId} /> : null;  
+  } 
+}

examples/storybook-6/.storybook/custom-page.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default {
+  key: 'custom',
+  title: 'Custom Page',
+  render: ({ active, storyId }) => active ? <div>{storyId}</div> : null,
+}

examples/storybook-6/.storybook/main.js

@@ -8,13 +8,7 @@ module.exports = {
         fileNameResolver: ({ resourcePath, cacheFolder }) => path.join(cacheFolder, resourcePath.replace(/[^a-z0-9]/gi, '_')),
       },
     },  
-    {
-      name: path.resolve(path.dirname(require.resolve('@component-controls/storybook')), 'preset.js'),
-      options: {
-        legacy: true,
-        addonPanel: true,
-      },
-    },  
+
   ],
   stories: [
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
@@ -25,6 +19,17 @@ module.exports = {
   ],
   addons: [
     '@storybook/addon-docs',
+    {
+      name: '@component-controls/storybook',
+      options: {
+        legacy: true,
+        addonPanel: true,
+        pages: [
+          require.resolve('./custom-page'),
+          require.resolve('./custom-page-docs')
+        ],
+      },
+    },
   ],
   webpackFinal: async (config, { configType }) => {
     return {
@@ -62,7 +67,6 @@ module.exports = {
             stories: {
               storeSourceFile: true, //false
             },
-
           },
         },
       ],

examples/storybook-6/package.json

@@ -12,6 +12,7 @@
     "@component-controls/react-docgen-info": "^0.6.0",
     "@component-controls/react-docgen-typescript-info": "^0.6.0",
     "@component-controls/storybook": "^0.6.0",
+    "@component-controls/storybook-custom-docs": "^0.6.0",
     "@storybook/addon-docs": "next",
     "@storybook/addon-storysource": "next",
     "@storybook/react": "next",

integrations/storybook/package.json

@@ -39,6 +39,7 @@
     "@component-controls/loader": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
     "@component-controls/store": "^0.6.0",
+    "@component-controls/storybook-custom-docs": "^0.6.0",
     "broadcast-channel": "^3.1.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -51,7 +52,6 @@
     "@storybook/addons": "next",
     "@storybook/api": "next",
     "@storybook/client-api": "next",
-    "@storybook/react": "next",
     "@types/node": "^13.7.0",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0"
@@ -61,7 +61,6 @@
     "@storybook/addons": "*",
     "@storybook/api": "*",
     "@storybook/client-api": "*",
-    "@storybook/react": "*",
     "polished": "*",
     "react": "*"
   },

integrations/storybook/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

integrations/storybook/rollup.config.js

@@ -5,7 +5,7 @@ export default config({
     './src/index.ts',
     './src/preset.ts',
     './src/config.tsx',
-    './src/register.tsx',
     './src/register-panel.tsx',
+    './src//docs-page/full-page.tsx',
   ],
 });

integrations/storybook/src/config.tsx

@@ -7,7 +7,6 @@ import { FORCE_RE_RENDER } from '@storybook/core-events';
 import { store } from '@component-controls/store';
 import { getControlValues } from '@component-controls/core';
 import { ThemeProvider } from './context/ThemeProvider';
-import './context/RenderDocsPages';
 
 store.addObserver(() => {
   addons.getChannel().emit(FORCE_RE_RENDER);

integrations/storybook/src/page/DocsPage.tsx → integrations/storybook/src/docs-page/ControlsPage.tsx

@@ -11,7 +11,7 @@ import {
   PropsTable,
 } from '@component-controls/blocks';
 
-export const DocsPage: FC = () => {
+export const ControlsPage: FC = () => {
   return (
     <>
       <Title />

integrations/storybook/src/page/PageContainer.tsx → integrations/storybook/src/docs-page/PageContainer.tsx

@@ -1,32 +1,18 @@
 import React, { FC } from 'react';
-import { addons } from '@storybook/addons';
-import { STORY_CHANGED } from '@storybook/core-events';
 import {
   PageContainer as BlockPageContainer,
   PageContainerProps,
 } from '@component-controls/blocks';
+import { useStoryId } from '@component-controls/storybook-custom-docs';
 import { useIsDark } from '../context/useIsDark';
 
 export const PageContextContainer: FC<PageContainerProps> = ({
   children,
   storyId: defaultStoryId,
 }) => {
-  const [storyId, setStoryId] = React.useState<string | undefined>(
-    defaultStoryId,
-  );
+  const storyId = useStoryId(defaultStoryId);
   const isDark = useIsDark();
-  const channel = React.useMemo(() => addons.getChannel(), []);
-
-  React.useEffect(() => {
-    const onStoryChange = (id: string) => {
-      setStoryId(id);
-    };
 
-    channel.on(STORY_CHANGED, onStoryChange);
-    return () => {
-      channel.off(STORY_CHANGED, onStoryChange);
-    };
-  }, []);
   return (
     <BlockPageContainer dark={isDark} storyId={storyId}>
       {children}

integrations/storybook/src/docs-page/full-page.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { PageContainer } from './PageContainer';
+import { ControlsPage } from './ControlsPage';
+
+export default {
+  key: 'page',
+  title: 'Page',
+  render: ({ active, storyId }: { active: boolean; storyId: string }) => {
+    return (
+      <PageContainer active={active} storyId={storyId}>
+        <ControlsPage />
+      </PageContainer>
+    );
+  },
+};

integrations/storybook/src/preset.ts

@@ -7,9 +7,24 @@ module.exports = {
     result.push(require.resolve('./config'));
     return result;
   },
+  addons: (entry: any = {}) => {
+    const { pages = [] } = entry;
+    debugger;
+    return [
+      {
+        name: '@component-controls/storybook-custom-docs',
+        options: {
+          pages: [require.resolve('./full-page'), ...pages],
+        },
+      },
+    ];
+  },
   managerEntries: (entry: any[] = [], options: any = {}) => {
     const result = [...entry];
-    result.push(require.resolve('./register'));
+    const { addonPanel = true } = options;
+    if (addonPanel) {
+      result.push(require.resolve('./register-panel'));
+    }
     return result;
   },
   webpack: (webpackConfig: any = {}, options: any = {}) => {

lerna.json

@@ -2,8 +2,9 @@
   "lerna": "3.1.3",
   "packages": [
     "core/**/*",
-    "props-info/**/*",
+    "misc/**/*",
     "integrations/**/*",
+    "props-info/**/*",
     "ui/**/*"
   ],
   "version": "0.6.0",

misc/storybook-custom-docs/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

misc/storybook-custom-docs/README.md

@@ -0,0 +1,105 @@
+# Table of contents
+
+
+# Overview
+
+The Storybook [docs addon](https://github.com/storybookjs/storybook/tree/next/addons/docs) is a great feature in Storybook, but unfortunately it is not extensibe with core parts being hard-coded.
+
+`@component-controls/storybook-custom-docs` gives the possibility to add custom `docs` pages to storybook by solving the following challenges:
+
+- Custom docs pages need to reside in the `preview` part of Storybok (in order to render stories since that's where the stories are), while the TABS addons resides in the `manager` part of storybook
+- Custom docs pages need to reside inside the preview `iframe` (also in order to render stories in the custom `docs` pages), while addons are rendered outside the  `iframe`.
+
+
+# Getting Started
+
+## Install
+
+```sh
+yarn add @component-controls/storybook-custom-docs --dev
+```
+
+## Configure
+within `.storybook/main.js`:
+
+```js
+module.exports = {
+    addons: [
+    {
+      name: '@component-controls/storybook-custom-docs',
+      options: {
+        pages: [
+          // files exporting the custom pages:
+          require.resolve('./custom-page'),
+          require.resolve('./custom-page-docs')
+        ],
+      },
+    },
+  ],
+}
+```
+
+## Pages format
+
+The page definition files need to have a default export with the following fields
+```js 
+import React from 'react';
+export default {
+  // key used for navigation
+  key: string,
+  // title of the tab
+  title: string,
+  // react render function. 
+  // active boolean - if the tab custom page is active
+  // storyId as a string
+  // Return an object that can be rendered from ReactDOM.render
+  render: ({ active, storyId }) => Element,
+}
+```
+
+## Examples
+
+### Very simple page: 
+
+```js
+import React from 'react';
+
+export default {
+  key: 'custom',
+  title: 'Custom Page',
+  render: ({ active, storyId }) => active ? <div>{storyId}</div> : null,
+}
+```
+
+### Custom page rendering current story
+
+```js
+import React from 'react';
+import { DocsContainer, Story} from '@storybook/addon-docs/blocks';
+import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
+
+const Page = () => {
+  const storyId = useStoryId();
+  return (
+    <DocsContainer context={getContext()}><Story id={storyId}/></DocsContainer>
+  )
+}
+export default {
+  key: 'docs-page',
+  title: 'Docs Page',
+  render: ({ active, storyId }) => {
+    return active ? <Page storyId={storyId} /> : null;  
+  } 
+}
+```
+
+# API
+
+## **getContext**
+
+Returns a context similar (but not identical) that can be used as an input attribute to `<DocsContainer />`
+
+## **useStoryId**
+
+A hook that tracks the changes to the current story and returns it's id
+