feat: added cusomt docs pages examples and docs

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

@@ -2,15 +2,7 @@ const path = require('path');
 
 module.exports = {
 
-  addons: [
-    {
-      name: '@component-controls/storybook',
-      options: {
-        legacy: true,
-        addonPanel: true,
-      },
-    },  
-  ],
+  addons: ['@component-controls/storybook'],
   stories: [
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',

examples/storybook-6-no-docs/package.json

@@ -12,8 +12,6 @@
     "@component-controls/react-docgen-info": "^0.6.0",
     "@component-controls/react-docgen-typescript-info": "^0.6.0",
     "@component-controls/storybook": "^0.6.0",
-    "@storybook/addon-docs": "next",
-    "@storybook/addon-storysource": "next",
     "@storybook/react": "next",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",

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

@@ -19,17 +19,7 @@ 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')
-        ],
-      },
-    },
+    '@component-controls/storybook',
   ],
   webpackFinal: async (config, { configType }) => {
     return {

examples/storybook-6/package.json

@@ -12,9 +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",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",

examples/storybook-custom-docs-pages/.storybook/main.js

@@ -0,0 +1,86 @@
+const path = require('path');
+
+module.exports = {
+  presets:[
+    {
+      name: require.resolve('webpack-react-docgen-typescript/preset'),
+      options: {
+        fileNameResolver: ({ resourcePath, cacheFolder }) => path.join(cacheFolder, resourcePath.replace(/[^a-z0-9]/gi, '_')),
+      },
+    },  
+
+  ],
+  stories: [
+    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
+    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
+    '../../stories/src/**/*.stories.(js|tsx|mdx)',
+    '../stories/**/*.stories.(js|tsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-docs',
+    {
+      name: '@component-controls/storybook',
+      options: {
+        addonPanel: false,
+        docsPage: false,
+      },
+    },
+    { 
+      name: '@component-controls/storybook-custom-docs',
+      options: {
+        pages: [
+          require.resolve('./page-simple'),
+          require.resolve('./page-docs-blocks'),
+          require.resolve('./page-component-blocks'),
+          require.resolve('./page-mixed-blocks')
+        ]
+      },
+    }
+  ],
+  webpackFinal: async (config, { configType }) => {
+    return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules, 
+        {
+          test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
+          loader: "@component-controls/loader/loader",
+          exclude: [/node_modules/],
+          enforce: 'pre',
+          options: {
+            propsLoaders: [
+              { name: '@component-controls/react-docgen-info', test: /\.(js|jsx)$/},
+              { name: '@component-controls/react-docgen-typescript-info', test: /\.(ts|tsx)$/}
+            ],
+            prettier: {
+              tabWidth: 2,
+            },
+            components: {
+              storeSourceFile: true, //false
+              resolveFile: (componentName, filePath) => {
+                if (filePath.includes('/theme-ui/dist')) {
+                  return `${
+                    filePath.split('/theme-ui/dist')[0]
+                  }/@theme-ui/components/src/${componentName}.js`;
+                } else if (filePath.includes('@component-controls/storybook/dist')) {
+                  return path.resolve(path.dirname(filePath), `../src/blocks/${componentName}.tsx`)
+                }
+                return filePath;
+              },
+            },
+            stories: {
+              storeSourceFile: true, //false
+            },
+          },
+        },
+      ],
+    },
+    resolve: {
+      ...config.resolve,
+      extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
+    },
+  }},
+};

examples/storybook-custom-docs-pages/.storybook/page-component-blocks.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DocsContainer } from '@component-controls/storybook';
+import { Story, Title, ControlsTable, Playground  } from '@component-controls/blocks';
+
+const Page = ({ active, storyId }) => {
+  return (
+    <DocsContainer active={active} storyId={storyId}>
+      <Title>Component controls blocks</Title>
+      <Playground openTab="source" title=".">
+        <Story id="." />
+      </Playground>
+      <ControlsTable id='.' />
+    </DocsContainer>
+  )
+}
+export default {
+  key: 'component-page',
+  title: 'Controls blocks',
+  render: ({ active, storyId }) => {
+    return <Page storyId={storyId} active={active} />;  
+  } 
+}

examples/storybook-custom-docs-pages/.storybook/page-docs-blocks.js

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

examples/storybook-custom-docs-pages/.storybook/page-mixed-blocks.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { DocsContainer as SBDocsContainer, Preview, Story as SBStory, Title as SBTitle, Props} from '@storybook/addon-docs/blocks';
+import { getContext, useStoryId } from '@component-controls/storybook-custom-docs';
+import { DocsContainer } from '@component-controls/storybook';
+import { Story, Title, Playground, PropsTable  } from '@component-controls/blocks';
+
+const Page = ({ storyId: id }) => {
+  const storyId = useStoryId(id);
+  return (
+    <>
+      <SBDocsContainer context={getContext()}>
+        <SBTitle />
+        <Preview >
+          <SBStory id={storyId} />
+        </Preview>  
+        <Props of='.' />
+      </SBDocsContainer>  
+      <DocsContainer active={true} storyId={storyId}>
+        <Title />
+        <Playground openTab="source" title=".">
+          <Story id="." />
+        </Playground>
+        <PropsTable of="." />
+      </DocsContainer>
+    </>
+  )
+}
+export default {
+  key: 'mixed-page',
+  title: 'Mixed blocks',
+  render: ({ active, storyId }) => {
+    return active ? <Page storyId={storyId} /> : null;  
+  } 
+}

examples/storybook-custom-docs-pages/.storybook/page-simple.js

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

examples/storybook-custom-docs-pages/.storybook/preview.js

@@ -0,0 +1,15 @@
+import { addParameters } from '@storybook/react';
+
+const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
+addParameters({
+  dependencies: { hideEmpty: true },
+  options: {
+    storySort: (a, b) => {
+      const aKind = a[1].kind.split('/')[0];
+      const aIndex = categories.findIndex(c => c === aKind);
+      const bKind = b[1].kind.split('/')[0];
+      const bIndex = categories.findIndex(c => c === bKind);
+      return aIndex - bIndex;
+    },
+  },
+});

examples/storybook-custom-docs-pages/package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "version": "0.6.0",
+  "name": "component-controls-storybook-custom-docs-pages",
+  "license": "MIT",
+  "scripts": {
+    "debug": "NODE_OPTIONS=--inspect-brk start-storybook -p 9017 -c .storybook",
+    "storybook": "start-storybook -p 9017 -c .storybook",
+    "build-storybook": "build-storybook -c .storybook -o ../../docs"
+  },
+  "dependencies": {
+    "@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",
+    "babel-loader": "^8.0.6",
+    "babel-preset-react-app": "^9.0.0",
+    "cross-env": "^5.2.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "typescript": "^3.8.3",
+    "webpack-react-docgen-typescript": "^0.9.5"
+  }
+}

examples/storybook-custom-docs-pages/stories/smart-controls.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, PropsTable, Playground as Preview, Story, BlockContextProvider, ControlsTable, ComponentSource, StorySource } from '@component-controls/storybook';
+import { Button } from '../../stories/src/components/Button';
+
+<Meta title="Storybook/MDX" parameters={{component: Button}} />
+
+
+<ComponentSource of={Button} title='Component source' />
+
+<PropsTable of={Button} />
+
+
+<Preview>
+  <Story name="smart story">
+    {(props) => (
+      <Button label="default" {...props}/>
+    )}  
+  </Story>
+</Preview>
+
+
+

examples/storybook-custom-docs-pages/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "sourceMap": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}

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

@@ -12,15 +12,14 @@ export const PageContextContainer: FC<PageContainerProps> = ({
 }) => {
   const storyId = useStoryId(defaultStoryId);
   const isDark = useIsDark();
-
   return (
     <BlockPageContainer dark={isDark} storyId={storyId}>
       {children}
     </BlockPageContainer>
   );
 };
 
-export const PageContainer: FC<PageContainerProps & { active: boolean }> = ({
+export const DocsContainer: FC<PageContainerProps & { active: boolean }> = ({
   children,
   active,
   storyId,

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

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

integrations/storybook/src/docs-page/index.ts

@@ -0,0 +1,2 @@
+export * from './DocsContainer';
+export * from './ControlsPage';

integrations/storybook/src/index.ts

@@ -1,2 +1,3 @@
-export * from './context';
 export * from './blocks';
+export * from './context';
+export * from './docs-page';