From a6f55b0fcb4a60e3ff736385fceba09c7f0782f3 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 25 Jan 2021 13:49:37 -0500 Subject: [PATCH] fix: storybook emotion 11 hack --- .../src/serialization/store-local-storage.ts | 35 ++++++----- .../.storybook/design-page.js | 16 +++++ .../storybook-6-no-docs/.storybook/main.js | 62 ++++++++++--------- .../.storybook/testing-page.js | 36 +---------- .../storybook-6/.storybook/design-page.js | 16 +++++ examples/storybook-6/.storybook/main.js | 16 ++--- .../storybook-6/.storybook/testing-page.js | 36 +---------- integrations/storybook/src/preset.ts | 30 +++++++-- 8 files changed, 127 insertions(+), 120 deletions(-) create mode 100644 examples/storybook-6-no-docs/.storybook/design-page.js create mode 100644 examples/storybook-6/.storybook/design-page.js diff --git a/core/store/src/serialization/store-local-storage.ts b/core/store/src/serialization/store-local-storage.ts index 0d66eb9a3..504a96a06 100644 --- 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 = { - 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 new file mode 100644 index 000000000..7845b5155 --- /dev/null +++ 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 ( + + + + ); + }, +}; diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js index d51b0f670..6db20ef7b 100644 --- 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 index e44f3882e..e33caafba 100644 --- 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 ( - <> - - {controlsCount > 0 && ( - <> - - - - - - - )} - - - - ); -} - export default { key: 'docs-test', - title: 'Testing', + title: testingPage.title, render: ({ active }) => { return ( - + ); }, diff --git a/examples/storybook-6/.storybook/design-page.js b/examples/storybook-6/.storybook/design-page.js new file mode 100644 index 000000000..7845b5155 --- /dev/null +++ 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 ( + + + + ); + }, +}; diff --git a/examples/storybook-6/.storybook/main.js b/examples/storybook-6/.storybook/main.js index d106d6e12..af31c1b3a 100644 --- 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,12 +28,13 @@ 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 { @@ -40,7 +42,7 @@ module.exports = { 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 index e44f3882e..e33caafba 100644 --- 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 ( - <> - - {controlsCount > 0 && ( - <> - - - - - - - )} - - - - ); -} - export default { key: 'docs-test', - title: 'Testing', + title: testingPage.title, render: ({ active }) => { return ( - + ); }, diff --git a/integrations/storybook/src/preset.ts b/integrations/storybook/src/preset.ts index 7a84b5d17..65bc9dbf2 100644 --- 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'), }, }; }