fix: timing issue onload for storybook-5

ccontrols · Apr 26, 2020 · 5fc1631 · 5fc1631
1 parent b1781ec
commit 5fc1631
Show file tree

Hide file tree

Showing 23 changed files with 1,505 additions and 154 deletions.
diff --git a/examples/custom-pages-storybook-5/.babelrc b/examples/custom-pages-storybook-5/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/examples/custom-pages-storybook-5/.storybook/main.js b/examples/custom-pages-storybook-5/.storybook/main.js
@@ -0,0 +1,15 @@
+module.exports = {
+  stories: [
+    '../src/stories/**/*.stories.(js|mdx)',
+  ],
+  addons: [
+    {
+      name: '@component-controls/storybook-custom-docs',
+      options: {
+        pages: [
+          require.resolve('./page-story.js'),
+        ]
+      },
+    }
+  ],
+};
diff --git a/examples/custom-pages-storybook-5/.storybook/page-story.js b/examples/custom-pages-storybook-5/.storybook/page-story.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { useStoryId } from '@component-controls/storybook-custom-docs';
+
+const CustomPage = () => {
+  const storyId = useStoryId();
+  return <div><h1>Simple docs page</h1><p>{storyId}</p></div>
+}
+const page = {
+  key: 'custom',
+  title: 'Simple Page',
+  render: ({ active }) => active ? <CustomPage  /> : null,
+}
+
+export default page;
diff --git a/examples/custom-pages-storybook-5/package.json b/examples/custom-pages-storybook-5/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "custom-storybook-pages",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development",
+    "build": "webpack --mode production",
+    "storybook": "start-storybook -p 9017 -c .storybook",
+    "build-storybook": "build-storybook -c .storybook -o ./docs"
+  },
+  "dependencies": {
+    "@component-controls/storybook-custom-docs": "^0.9.0",
+    "@storybook/react": "^5.3.18",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "babel-loader": "^8.1.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.2.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/examples/custom-pages-storybook-5/src/components/Person.js b/examples/custom-pages-storybook-5/src/components/Person.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Person = ({ name, age }) => (
+  <div>{`My name is ${name} and I am ${age} years old`}</div>
+);
+
+Person.propTypes = {
+  name: PropTypes.string,
+  age: PropTypes.number,
+};
+Person.defaultProps = {
+  name: 'Martin',
+  age: 22,
+};
diff --git a/examples/custom-pages-storybook-5/src/index.html b/examples/custom-pages-storybook-5/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Create custom docs pages in storybookjs</title>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>
diff --git a/examples/custom-pages-storybook-5/src/index.js b/examples/custom-pages-storybook-5/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Person } from './components/Person';
+
+ReactDOM.render(
+  <Person />, 
+  document.getElementById("root")
+);
diff --git a/examples/custom-pages-storybook-5/src/stories/person.stories.js b/examples/custom-pages-storybook-5/src/stories/person.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Person } from '../components/Person';
+
+export default {
+  title: 'Stories/Person',
+  component: Person
+}
+
+export const main = props => <Person {...props} />
diff --git a/examples/custom-pages-storybook-5/webpack.config.js b/examples/custom-pages-storybook-5/webpack.config.js
@@ -0,0 +1,29 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: 'html-loader',
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: './src/index.html',
+      filename: './index.html',
+    }),
+  ],
+};
diff --git a/...tom-docs-pages/.storybook/canvas-page.tsx → ...es-storybook-6/.storybook/canvas-page.tsx b/...tom-docs-pages/.storybook/canvas-page.tsx → ...es-storybook-6/.storybook/canvas-page.tsx
diff --git a/...book-custom-docs-pages/.storybook/main.js → ...stom-pages-storybook-6/.storybook/main.js b/...book-custom-docs-pages/.storybook/main.js → ...stom-pages-storybook-6/.storybook/main.js
diff --git a/...ages/.storybook/page-component-blocks.tsx → ...ok-6/.storybook/page-component-blocks.tsx b/...ages/.storybook/page-component-blocks.tsx → ...ok-6/.storybook/page-component-blocks.tsx
diff --git a/...ocs-pages/.storybook/page-docs-blocks.tsx → ...orybook-6/.storybook/page-docs-blocks.tsx b/...ocs-pages/.storybook/page-docs-blocks.tsx → ...orybook-6/.storybook/page-docs-blocks.tsx
diff --git a/...cs-pages/.storybook/page-mixed-blocks.tsx → ...rybook-6/.storybook/page-mixed-blocks.tsx b/...cs-pages/.storybook/page-mixed-blocks.tsx → ...rybook-6/.storybook/page-mixed-blocks.tsx
diff --git a/...tom-docs-pages/.storybook/page-simple.tsx → ...es-storybook-6/.storybook/page-simple.tsx b/...tom-docs-pages/.storybook/page-simple.tsx → ...es-storybook-6/.storybook/page-simple.tsx
diff --git a/...k-custom-docs-pages/.storybook/preview.js → ...m-pages-storybook-6/.storybook/preview.js b/...k-custom-docs-pages/.storybook/preview.js → ...m-pages-storybook-6/.storybook/preview.js
diff --git a/.../storybook-custom-docs-pages/CHANGELOG.md → ...les/custom-pages-storybook-6/CHANGELOG.md b/.../storybook-custom-docs-pages/CHANGELOG.md → ...les/custom-pages-storybook-6/CHANGELOG.md
diff --git a/.../storybook-custom-docs-pages/package.json → ...les/custom-pages-storybook-6/package.json b/.../storybook-custom-docs-pages/package.json → ...les/custom-pages-storybook-6/package.json
diff --git a/...-pages/stories/smart-controls.stories.mdx → ...book-6/stories/smart-controls.stories.mdx b/...-pages/stories/smart-controls.stories.mdx → ...book-6/stories/smart-controls.stories.mdx
diff --git a/...storybook-custom-docs-pages/tsconfig.json → ...es/custom-pages-storybook-6/tsconfig.json b/...storybook-custom-docs-pages/tsconfig.json → ...es/custom-pages-storybook-6/tsconfig.json
diff --git a/misc/storybook-custom-docs/src/index.tsx b/misc/storybook-custom-docs/src/index.tsx
@@ -12,8 +12,11 @@ export const getContext = () => {
   //@ts-ignore
   const clientApi = window.__STORYBOOK_CLIENT_API__;
   const storyStore = clientApi._storyStore;
+  //@ts-ignore
   const configApi = new ConfigApi({
     storyStore,
+    //@ts-ignore
+    channel: addons.getChannel(),
   });
   const context = {
     configApi,

diff --git a/misc/storybook-custom-docs/src/preview-loader.ts b/misc/storybook-custom-docs/src/preview-loader.ts
@@ -18,47 +18,50 @@ ${pages
   .map((file, index) => `const pageConfig_${index} = require("${file}");`)
   .join('\n')}
 
-const channel = addons.getChannel();
 
 const activePages = [];
 
-const attachPage = (pageConfig, viewMode) => {
-
-  const ATTACH_DOCS_PAGE = \`attach_docs_page_\${pageConfig.key}\`;
-  const updatePage = (active) => {
-    const id = \`controls-docs-page-\${pageConfig.key}\`;
-    var node = document.getElementById(id);
-    if (!node) {
-      node = document.createElement('div');
-      node.setAttribute('id', id);
-      document.body.appendChild(node);
-    }
-    const root = document.getElementById('root');
-    const pageIndex = activePages.indexOf(id);
-    if (active) {
-      if (pageIndex < 0) {
-        activePages.push(id);
+const attachPages = (pageConfigs, viewMode) => {
+  const channel = addons.getChannel();
+  pageConfigs.forEach(pageConfig => {
+  
+    const ATTACH_DOCS_PAGE = \`attach_docs_page_\${pageConfig.key}\`;
+    const updatePage = (active) => {
+      const id = \`controls-docs-page-\${pageConfig.key}\`;
+      var node = document.getElementById(id);
+      if (!node) {
+        node = document.createElement('div');
+        node.setAttribute('id', id);
+        document.body.appendChild(node);
       }
-      root.style.setProperty('display', 'none');
-      node.removeAttribute('hidden');
-      ReactDOM.render(pageConfig.render({ active }),
-        document.getElementById(id),
-      );
-    } else {
-      node.setAttribute('hidden', 'true');
-      ReactDOM.unmountComponentAtNode(node);
-      if (pageIndex >= 0) {
-        activePages.splice(pageIndex, 1);
-        if (activePages.length === 0) {
-          root.style.removeProperty('display');
+      const root = document.getElementById('root');
+      const pageIndex = activePages.indexOf(id);
+      if (active) {
+        if (pageIndex < 0) {
+          activePages.push(id);
+        }
+        root.style.setProperty('display', 'none');
+        node.removeAttribute('hidden');
+        ReactDOM.render(pageConfig.render({ active }),
+          document.getElementById(id),
+        );
+      } else {
+        node.setAttribute('hidden', 'true');
+        ReactDOM.unmountComponentAtNode(node);
+        if (pageIndex >= 0) {
+          activePages.splice(pageIndex, 1);
+          if (activePages.length === 0) {
+            root.style.removeProperty('display');
+          }
         }
       }
-    }
-  }  
-  channel.on(ATTACH_DOCS_PAGE, ({ active }) => {
-    updatePage(active);
-  });
-  updatePage(viewMode === pageConfig.key);
+    }  
+    
+    channel.on(ATTACH_DOCS_PAGE, ({ active }) => {
+      updatePage(active);
+    });
+    updatePage(viewMode === pageConfig.key);
+  });  
 };
 const pageConfigs = [];
 ${pages
@@ -68,17 +71,16 @@ ${pages
   )
   .join('\n')}
 
-const selection =
-  window &&
-  //@ts-ignore
-  window.__STORYBOOK_CLIENT_API__ &&
-  //@ts-ignore
-  window.__STORYBOOK_CLIENT_API__.store().getSelection();
-const viewMode = selection ? selection.viewMode : undefined;
-
-pageConfigs.forEach(p => {
-  attachPage(p, viewMode);
-});
+  window.onload = () => {
+    const selection =
+    window &&
+    //@ts-ignore
+    window.__STORYBOOK_CLIENT_API__ &&
+    //@ts-ignore
+    window.__STORYBOOK_CLIENT_API__.store().getSelection();
+    const viewMode = selection ? selection.viewMode : undefined;
+    attachPages(pageConfigs, viewMode);
+  }  
 `;
   return callback(null, code);
 };