change(ui) - added storybook and updated to support webpack

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 } ],

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;
+  },
+};

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) => (
+  <Provider store={store}>
+    <StoreProvider store={new RootStore()}>
+      <Story />
+    </StoreProvider>
+  </Provider>
+);
+
+export default withProvider;

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]

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 {
+    
+}

frontend/app/components/shared/DateRangeDropdown/index.js

@@ -1 +1 @@
-export { default } from './DateRangeDropdown';
+// export { default } from './DateRangeDropdown';

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",