fix: storybook emotion 11 hack

ccontrols · Jan 25, 2021 · a6f55b0 · a6f55b0
1 parent a7c05ec
commit a6f55b0
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 120 deletions.
diff --git a/core/store/src/serialization/store-local-storage.ts b/core/store/src/serialization/store-local-storage.ts
@@ -24,22 +24,29 @@ const encodeFn = (name: string, val: any) => {
   return val;
 };
 export const saveStore = (store: Store): void => {
-  for (const key in localStorage) {
-    if (key.indexOf(COMPONENT_CONTROLS_STORAGE) === 0) {
-      localStorage.removeItem(key);
+  try {
+    for (const key in localStorage) {
+      if (key.indexOf(COMPONENT_CONTROLS_STORAGE) === 0) {
+        localStorage.removeItem(key);
+      }
     }
+    const save: Omit<
+      Store,
+      'addObserver' | 'removeObserver' | 'updateStory'
+    > = {
+      stories: store.stories,
+      config: store.config,
+      components: store.components,
+      docs: store.docs,
+      packages: store.packages,
+    };
+    localStorage.setItem(
+      COMPONENT_CONTROLS_STORAGE,
+      JSON.stringify(save, encodeFn),
+    );
+  } catch (e) {
+    console.error(e);
   }
-  const save: Omit<Store, 'addObserver' | 'removeObserver' | 'updateStory'> = {
-    stories: store.stories,
-    config: store.config,
-    components: store.components,
-    docs: store.docs,
-    packages: store.packages,
-  };
-  localStorage.setItem(
-    COMPONENT_CONTROLS_STORAGE,
-    JSON.stringify(save, encodeFn),
-  );
 };
 
 export const readStore = (stories: Stories): Store => {

diff --git a/examples/storybook-6-no-docs/.storybook/design-page.js b/examples/storybook-6-no-docs/.storybook/design-page.js
@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import designPage from '@component-controls/pages/DesignPage';
+import { DocsContainer } from '@component-controls/storybook/DocsContainer';
+
+export default {
+  key: 'docs-design',
+  title: designPage.title,
+  render: ({ active }) => {
+    return (
+      <DocsContainer active={active}>
+        <designPage.component />
+      </DocsContainer>
+    );
+  },
+};
diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js
@@ -1,34 +1,39 @@
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 
 module.exports = {
-
-  addons: [{
-    name: '@component-controls/storybook',
-    options: {
-      pages: [
-        require.resolve('@component-controls/storybook/full-page'),
-        require.resolve('./testing-page.js'),
-      ],
-      webpack: ['instrument',
-      {
-        name: 'react-docgen-typescript', 
-        config: {
-          module: {
-            rules: [
-              {
-                loader: '@component-controls/loader/loader',
-                options: {
-                  stories: {
-                    sourceFiles: false, //
+  addons: [
+    {
+      name: '@component-controls/storybook',
+      options: {
+        pages: [
+          require.resolve('@component-controls/storybook/full-page'),
+          require.resolve('./testing-page.js'),
+          require.resolve('./design-page.js'),
+        ],
+        webpack: [
+          'instrument',
+          {
+            name: 'react-docgen-typescript',
+            config: {
+              module: {
+                rules: [
+                  {
+                    loader: '@component-controls/loader/loader',
+                    options: {
+                      stories: {
+                        sourceFiles: false, //
+                      },
+                    },
                   },
-                },  
+                ],
               },
-            ],
-          }
-        },  
-      }],
-    }
-  }],    
+            },
+          },
+        ],
+      },
+    },
+  ],
   stories: [
     '../../../ui/editors/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
@@ -50,8 +55,7 @@ module.exports = {
       plugins: [
         ...config.plugins,
         // new BundleAnalyzerPlugin({ generateStatsFile: true, statsFilename: 'stats.json' })
-      ]
+      ],
     };
   },
-
 };
diff --git a/examples/storybook-6-no-docs/.storybook/testing-page.js b/examples/storybook-6-no-docs/.storybook/testing-page.js
@@ -1,45 +1,15 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import {
-  Playground,
-  PropsTable,
-  Story,
-  Description,
-} from '@component-controls/blocks';
-import { getControlsCount } from '@component-controls/core';
-import { useCurrentStory } from '@component-controls/store';
-import { AllyBlock } from '@component-controls/axe-plugin';
-import { ViewportBlock } from '@component-controls/viewport-plugin';
+import testingPage from '@component-controls/pages/TestingPage';
 import { DocsContainer } from '@component-controls/storybook/DocsContainer';
 
-const TestingPage = () => {
-  const story = useCurrentStory();
-  const controlsCount = getControlsCount(story?.controls);
-  return (
-    <>
-      <Description />
-      {controlsCount > 0 && (
-        <>
-          <Playground title=".">
-            <Story id="." />
-          </Playground>
-
-          <PropsTable of="." title="Controls" visibility="controls" />
-        </>  
-      )}
-      <AllyBlock title="A11y tests" />
-      <ViewportBlock title="Viewport"/>
-    </>  
-  );
-}
-
 export default {
   key: 'docs-test',
-  title: 'Testing',
+  title: testingPage.title,
   render: ({ active }) => {
     return (
       <DocsContainer active={active}>
-        <TestingPage />
+        <testingPage.component />
       </DocsContainer>
     );
   },

diff --git a/examples/storybook-6/.storybook/design-page.js b/examples/storybook-6/.storybook/design-page.js
@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import designPage from '@component-controls/pages/DesignPage';
+import { DocsContainer } from '@component-controls/storybook/DocsContainer';
+
+export default {
+  key: 'docs-design',
+  title: designPage.title,
+  render: ({ active }) => {
+    return (
+      <DocsContainer active={active}>
+        <designPage.component />
+      </DocsContainer>
+    );
+  },
+};
diff --git a/examples/storybook-6/.storybook/main.js b/examples/storybook-6/.storybook/main.js
@@ -1,5 +1,6 @@
 const path = require('path');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 
 module.exports = {
   stories: [
@@ -27,20 +28,21 @@ module.exports = {
         pages: [
           require.resolve('@component-controls/storybook/full-page'),
           require.resolve('./testing-page'),
+          require.resolve('./design-page'),
         ],
-        propsPanel: true,
-        storySourcePanel: true,
-        storyConfigPanel: true,
-      }
-    }  
+        // propsPanel: true,
+        // storySourcePanel: true,
+        // storyConfigPanel: true,
+      },
+    },
   ],
   webpackFinal: (config = {}, options = {}) => {
     return {
       ...config,
       plugins: [
         ...config.plugins,
         // new BundleAnalyzerPlugin({ generateStatsFile: true, statsFilename: 'stats.json' })
-      ]
+      ],
     };
   },
 };
diff --git a/examples/storybook-6/.storybook/testing-page.js b/examples/storybook-6/.storybook/testing-page.js
@@ -1,45 +1,15 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import {
-  Playground,
-  PropsTable,
-  Story,
-  Description,
-} from '@component-controls/blocks';
-import { getControlsCount } from '@component-controls/core';
-import { useCurrentStory } from '@component-controls/store';
-import { AllyBlock } from '@component-controls/axe-plugin';
-import { ViewportBlock } from '@component-controls/viewport-plugin';
+import testingPage from '@component-controls/pages/TestingPage';
 import { DocsContainer } from '@component-controls/storybook/DocsContainer';
 
-const TestingPage = () => {
-  const story = useCurrentStory();
-  const controlsCount = getControlsCount(story?.controls);
-  return (
-    <>
-      <Description />
-      {controlsCount > 0 && (
-        <>
-          <Playground title=".">
-            <Story id="." />
-          </Playground>
-
-          <PropsTable of="." title="Controls" visibility="controls" />
-        </>  
-      )}
-      <AllyBlock title="A11y tests" />
-      <ViewportBlock title="Viewport"/>
-    </>  
-  );
-}
-
 export default {
   key: 'docs-test',
-  title: 'Testing',
+  title: testingPage.title,
   render: ({ active }) => {
     return (
       <DocsContainer active={active}>
-        <TestingPage />
+        <testingPage.component />
       </DocsContainer>
     );
   },

diff --git a/integrations/storybook/src/preset.ts b/integrations/storybook/src/preset.ts
@@ -1,8 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+
 import { RuleSetRule } from 'webpack';
 import { mergeWebpackConfig } from '@component-controls/webpack-configs';
 const LoaderPlugin = require('@component-controls/loader/plugin');
 import { PresetOptions, defaultRules } from './types';
 
+// https://github.com/storybookjs/storybook/issues/13277#issuecomment-765525245
+const getPackageDir = (filepath: string) => {
+  let currDir = path.dirname(require.resolve(filepath));
+  while (true) {
+    if (fs.existsSync(path.join(currDir, 'package.json'))) {
+      return currDir;
+    }
+    const { dir, root } = path.parse(currDir);
+    if (dir === root) {
+      throw new Error(
+        `Could not find package.json in the parent directories starting from ${filepath}.`,
+      );
+    }
+    currDir = dir;
+  }
+};
+
 module.exports = {
   config: (entry: any[] = []) => {
     const result = [...entry];
@@ -60,8 +80,9 @@ module.exports = {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          '@emotion/core': require.resolve('@emotion/react'),
-          'emotion-theming': require.resolve('@emotion/react'),
+          '@emotion/core': getPackageDir('@emotion/react'),
+          '@emotion/styled': getPackageDir('@emotion/styled'),
+          'emotion-theming': getPackageDir('@emotion/react'),
         },
       },
     };
@@ -118,8 +139,9 @@ module.exports = {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          '@emotion/core': require.resolve('@emotion/react'),
-          'emotion-theming': require.resolve('@emotion/react'),
+          '@emotion/core': getPackageDir('@emotion/react'),
+          '@emotion/styled': getPackageDir('@emotion/styled'),
+          'emotion-theming': getPackageDir('@emotion/react'),
         },
       };
     }