From f47252ed112fb5fd8cd84880c650d46b2a06d270 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 18 Oct 2022 16:07:28 +0200 Subject: [PATCH] change(ui) - added storybook and updated to support webpack --- frontend/.babelrc | 1 + frontend/.storybook/main.ts | 36 +++++++++++++++++++ frontend/.storybook/openReplayDecorator.js | 13 +++++++ frontend/.storybook/preview.ts | 13 +++++++ frontend/.storybook/webpack.config.js | 18 ++-------- .../shared/DateRangeDropdown/index.js | 2 +- frontend/package.json | 16 +++++++-- .../Introduction.stories.mdx} | 0 8 files changed, 81 insertions(+), 18 deletions(-) create mode 100644 frontend/.storybook/main.ts create mode 100644 frontend/.storybook/openReplayDecorator.js create mode 100644 frontend/.storybook/preview.ts rename frontend/{.storybook/preview-head.html => stories/Introduction.stories.mdx} (100%) diff --git a/frontend/.babelrc b/frontend/.babelrc index 8c99ee5a4..631979df1 100644 --- a/frontend/.babelrc +++ b/frontend/.babelrc @@ -5,6 +5,7 @@ "@babel/preset-typescript" ], "plugins": [ + "babel-plugin-react-require", [ "@babel/plugin-proposal-private-property-in-object", { "loose": true } ], [ "@babel/plugin-transform-runtime", { "regenerator": true } ], [ "@babel/plugin-proposal-decorators", { "legacy":true } ], diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts new file mode 100644 index 000000000..adf1c0504 --- /dev/null +++ b/frontend/.storybook/main.ts @@ -0,0 +1,36 @@ +import custom from '../webpack.config'; + +export default { + stories: ['../app/components/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + framework: '@storybook/react', + core: { + builder: '@storybook/builder-webpack5', + }, + reactOptions: { + fastRefresh: true, + }, + webpackFinal: async (config: any) => { + // console.log('CONFIG', config); + // config.plugins.push(...); + config.module = custom.module; + config.resolve = custom.resolve; + config.plugins.unshift(custom.plugins[0]); + config.plugins.unshift(custom.plugins[1]); + config.plugins.unshift(custom.plugins[4]); + config.module.rules.unshift({ + test: /\.(svg)$/i, + exclude: /node_modules/, + use: [ + { + loader: 'file-loader', + }, + ], + }); + return config; + }, +}; diff --git a/frontend/.storybook/openReplayDecorator.js b/frontend/.storybook/openReplayDecorator.js new file mode 100644 index 000000000..730eaf636 --- /dev/null +++ b/frontend/.storybook/openReplayDecorator.js @@ -0,0 +1,13 @@ +import { Provider } from 'react-redux'; +import store from '../app/store'; +import { StoreProvider, RootStore } from '../app/mstore'; + +const withProvider = (Story) => ( + + + + + +); + +export default withProvider; diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts new file mode 100644 index 000000000..0334feb28 --- /dev/null +++ b/frontend/.storybook/preview.ts @@ -0,0 +1,13 @@ +import openReplayProvider from './openReplayDecorator'; +import '../app/styles/index.scss'; + +export default { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; +export const decorators = [openReplayProvider] \ No newline at end of file diff --git a/frontend/.storybook/webpack.config.js b/frontend/.storybook/webpack.config.js index 1a123fa52..ff2dbcee8 100644 --- a/frontend/.storybook/webpack.config.js +++ b/frontend/.storybook/webpack.config.js @@ -1,15 +1,3 @@ -const pathAlias = require('../path-alias'); -const mainConfig = require('../webpack.config.js'); - -module.exports = async ({ config }) => { - var conf = mainConfig(); - config.resolve.alias = Object.assign(conf.resolve.alias, config.resolve.alias); // Path Alias - config.resolve.extensions = conf.resolve.extensions - config.module.rules = conf.module.rules; - config.module.rules[0].use[0] = 'style-loader'; // instead of separated css - config.module.rules[1].use[0] = 'style-loader'; - config.plugins.push(conf.plugins[0]); // global React - config.plugins.push(conf.plugins[5]); - config.entry = config.entry.concat(conf.entry.slice(2)) // CSS entries - return config; -}; +export default { + +} \ No newline at end of file diff --git a/frontend/app/components/shared/DateRangeDropdown/index.js b/frontend/app/components/shared/DateRangeDropdown/index.js index d6e6f2f87..d5948cff3 100644 --- a/frontend/app/components/shared/DateRangeDropdown/index.js +++ b/frontend/app/components/shared/DateRangeDropdown/index.js @@ -1 +1 @@ -export { default } from './DateRangeDropdown'; +// export { default } from './DateRangeDropdown'; diff --git a/frontend/package.json b/frontend/package.json index 91d8a61f7..30c2f18e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,9 +12,10 @@ "gen:constants": "node ./scripts/constants.js", "gen:icons": "node ./scripts/icons.ts", "gen:colors": "node ./scripts/colors.js", - "storybook": "start-storybook", + "storybook": "start-storybook -p 6006", "flow": "flow", - "postinstall": "yarn gen:icons && yarn gen:colors" + "postinstall": "yarn gen:icons && yarn gen:colors", + "build-storybook": "build-storybook" }, "dependencies": { "@floating-ui/react-dom-interactions": "^0.10.3", @@ -84,7 +85,17 @@ "@babel/preset-react": "^7.17.12", "@babel/preset-typescript": "^7.17.12", "@babel/runtime": "^7.17.9", + "@mdx-js/react": "^1.6.22", "@openreplay/sourcemap-uploader": "^3.0.0", + "@storybook/addon-actions": "^6.5.12", + "@storybook/addon-docs": "^6.5.12", + "@storybook/addon-essentials": "^6.5.12", + "@storybook/addon-interactions": "^6.5.12", + "@storybook/addon-links": "^6.5.12", + "@storybook/builder-webpack5": "^6.5.12", + "@storybook/manager-webpack5": "^6.5.12", + "@storybook/react": "^6.5.12", + "@storybook/testing-library": "^0.0.13", "@types/luxon": "^3.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", @@ -95,6 +106,7 @@ "@typescript-eslint/parser": "^5.24.0", "autoprefixer": "^10.4.7", "babel-loader": "^8.2.4", + "babel-plugin-react-require": "^3.1.3", "babel-plugin-recharts": "^1.2.1", "babel-plugin-transform-decorators-legacy": "^1.3.5", "compression-webpack-plugin": "^10.0.0", diff --git a/frontend/.storybook/preview-head.html b/frontend/stories/Introduction.stories.mdx similarity index 100% rename from frontend/.storybook/preview-head.html rename to frontend/stories/Introduction.stories.mdx