feat: custom esm pages

ccontrols · Dec 28, 2020 · ae76a6e · ae76a6e
1 parent e7c3d14
commit ae76a6e
Show file tree

Hide file tree

Showing 113 changed files with 2,785 additions and 4,195 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -11,14 +11,9 @@
       "runtimeExecutable": "npm",
       "cwd": "${workspaceFolder}/examples/storybook-6",
       "stopOnEntry": true,
-      "runtimeArgs": [
-        "run-script",
-        "start"
-      ],
+      "runtimeArgs": ["run-script", "start"],
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -27,14 +22,9 @@
       "runtimeExecutable": "npm",
       "cwd": "${workspaceFolder}/examples/storybook-6",
       "stopOnEntry": true,
-      "runtimeArgs": [
-        "run-script",
-        "build-sample"
-      ],
+      "runtimeArgs": ["run-script", "build-sample"],
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -43,14 +33,9 @@
       "runtimeExecutable": "npm",
       "cwd": "${workspaceFolder}/examples/storybook-6-no-docs",
       "stopOnEntry": true,
-      "runtimeArgs": [
-        "run-script",
-        "start"
-      ],
+      "runtimeArgs": ["run-script", "start"],
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -59,14 +44,9 @@
       "runtimeExecutable": "npm",
       "cwd": "${workspaceFolder}/examples/custom-pages-storybook-5",
       "stopOnEntry": true,
-      "runtimeArgs": [
-        "run-script",
-        "start"
-      ],
+      "runtimeArgs": ["run-script", "start"],
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -75,14 +55,9 @@
       "runtimeExecutable": "npm",
       "cwd": "${workspaceFolder}/examples/custom-pages-storybook-6",
       "stopOnEntry": true,
-      "runtimeArgs": [
-        "run-script",
-        "start"
-      ],
+      "runtimeArgs": ["run-script", "start"],
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "name": "gatsby start",
@@ -101,24 +76,20 @@
       "type": "node",
       "request": "attach",
       "port": 9229,
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
       "request": "launch",
       "name": "jest config",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/config",
-      "args": [
-        "stories",
-      ],
+      "args": ["stories"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -127,14 +98,12 @@
       "name": "jest core",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/core",
-      "args": [
-        "randomize",
-      ],
+      "args": ["deepmerge"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -143,14 +112,12 @@
       "name": "jest instrument",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/instrument",
-      "args": [
-        "extract-component",
-      ],
+      "args": ["extract-component"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -159,14 +126,12 @@
       "name": "jest react-docgen-typescript",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/props-info/react-docgen-typescript",
-      "args": [
-        "extends",
-      ],
+      "args": ["extends"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -175,14 +140,12 @@
       "name": "jest webpack-configs",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/webpack-configs",
-      "args": [
-        "webpack-merge",
-      ],
+      "args": ["webpack-merge"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -191,14 +154,12 @@
       "name": "jest webpack-compile",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/webpack-compile",
-      "args": [
-        "draft",
-      ],
+      "args": ["draft"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     },
     {
@@ -207,15 +168,13 @@
       "name": "jest jest-addon",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/jest-snapshots",
-      "args": [
-        "stories",
-      ],
+      "args": ["stories"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     }
   ]
-}
+}
diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -26,21 +26,53 @@ export type FrameworkRenderFn = (
  * story type pages can have multiple tabs with separate page configurations.
  */
 export interface TabConfiguration {
-  /**
-   * tab route string
-   */
-  route?: string;
   /**
    * title will be used as tab caption
    */
   title?: string;
   /**
-   * page template - can be a package deafult template
+   * page template - can be a package default export
+   */
+  component: ComponentType;
+
+  /**
+   * page container react component
+   */
+  container?: ComponentType | null;
+
+  /**
+   * variant key in the pagecontainer theme value
    */
-  template?: string | ComponentType;
+  variant?: string;
 }
 
-export type PageTabs = TabConfiguration[];
+export type PageTab = string | TabConfiguration | [string, TabConfiguration];
+
+export type PageTabs = Record<string, PageTab>;
+
+export const loadDefaultExport = (
+  imported?: { default: TabConfiguration } | TabConfiguration,
+): TabConfiguration => {
+  return (imported as { default: TabConfiguration })?.default || imported;
+};
+export const loadPageTab = (
+  tab: PageTab,
+  imported?: TabConfiguration,
+): TabConfiguration => {
+  if (imported) {
+    if (Array.isArray(tab)) {
+      if (tab.length === 2) {
+        const loaded =
+          typeof tab[0] === 'string' ? loadDefaultExport(imported) : tab[0];
+        return { ...loaded, ...tab[1] };
+      }
+    }
+    if (typeof tab === 'string') {
+      return loadDefaultExport(imported);
+    }
+  }
+  return tab as TabConfiguration;
+};
 
 export type DocType = 'story' | 'blog' | 'page' | 'tags' | 'author' | string;
 
@@ -107,15 +139,15 @@ export type PageConfiguration = {
   /**
    * tabs configuration for story-type pages
    */
-  tabs?: PageTabs;
+  tabs?: Record<string, TabConfiguration>;
 } & PageLayoutProps;
 
 export type PagesConfiguration = Record<DocType, PageConfiguration>;
 
 export type PagesOnlyRoutes = Record<
   DocType,
   Pick<PageConfiguration, 'basePath' | 'sideNav'> & {
-    tabs?: TabConfiguration[];
+    tabs?: PageTabs;
   }
 >;
 
@@ -363,13 +395,9 @@ export const defaultBuildConfig: BuildConfiguration = {
         storyPaths: true,
         collapseSingle: true,
       },
-      tabs: [
-        {
-          route: 'page',
-          title: 'Documentation',
-          template: require.resolve('@component-controls/pages/ClassicPage'),
-        },
-      ],
+      tabs: {
+        page: require.resolve('@component-controls/pages/ClassicPage'),
+      },
     },
     blog: {
       basePath: 'blogs/',

diff --git a/core/core/src/deepMerge.ts b/core/core/src/deepMerge.ts
@@ -12,14 +12,19 @@ const mergeArrays = (dest: any[], src: any[]) => {
           typeof s === 'object' &&
           typeof dest[idx] === 'object' &&
           idx < dest.length
-            ? deepMergeArrays<any[]>(dest[idx], s)
+            ? mergeConfig<any[]>(dest[idx], s)
             : s,
         )
       : src;
   return result;
 };
-export const deepMergeArrays = <T>(a: any, b: any): T =>
-  merge<T>(a, b, { arrayMerge: mergeArrays });
+export const mergeConfig = <T>(a: any, b: any): T =>
+  merge<T>(a, b, {
+    arrayMerge: mergeArrays,
+    customMerge: (key: string) => (src: any, dest: any) => {
+      return key === 'tabs' ? dest || src : mergeConfig<T>(src, dest);
+    },
+  });
 
 export const deepMergeReplaceArrays = <T>(a: any, b: any): T =>
   merge<T>(a, b, {