Episode06 golive (#7)

* Episode 06: Adds storybook installation

* Episode 06: Adds more storybook stories

* Episode 06: Adds more complex examples for storybook

* Episode 06: Removes MUI and adds storybook-static to gitignore

* Episode 06: Adds config.js injection

* Episode 06: Adds source-map-explorer and removes some unused dependencies

* Episode 06: Makes port in jsonServer configurable

* Episode 06: Fixes config script to create config folder if it does not exist

* Episode 06: Adds Sentry monitoring

* Episode 06: Fixes script to not create an additional folder

* Episode 06: Renamed config to AppConfigs to enable ejecting

* Episode 06: Moved scripts to appConfigs to enable ejcting

Author: davelosert

.eslintrc.json

@@ -15,5 +15,6 @@
   },
   "rules": {
     "styled-components-a11y/no-onchange": 0
-  }
+  },
+  "ignorePatterns": ["!**/*", ".storybook/*", "./src/stories/**"]
 }

.gitignore

@@ -18,6 +18,10 @@
 .env.test.local
 .env.production.local
 
+public/config/config.js
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+storybook-static

.storybook/main.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-styled-component-theme/dist/preset"
+  ],
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      module: {
+        rules: config.module.rules.filter(rule => {
+          if (!rule.use) return true;
+          return !rule.use.find(
+            useItem => typeof useItem.loader === 'string' && useItem.loader.includes('eslint-loader'),
+          );
+        }),
+      }
+    }
+  }
+}

.storybook/preview.js

@@ -0,0 +1,31 @@
+import { addDecorator } from "@storybook/react";
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { createAppStore } from '../src/app/redux/store';
+import { withThemesProvider } from "storybook-addon-styled-component-theme";
+import { ThemeProvider } from "styled-components";
+import { Theme } from '../src/layout/Theme';
+import '../src/app/i18n/i18nService';
+
+const themes = [Theme];
+addDecorator(withThemesProvider(themes), ThemeProvider);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+  (Story) => (
+    <Provider store={createAppStore()}>
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    </Provider>
+  ),
+]

appConfigs/config.dev.js

@@ -0,0 +1,5 @@
+'use strict';
+
+window.hppConfig = {
+  apiHost: 'http://localhost:3001'
+};

appConfigs/config.prod.js

@@ -0,0 +1,5 @@
+'use strict';
+
+window.hppConfig = {
+  apiHost: 'http://localhost:3004'
+};

appConfigs/prepareConfig.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+// eslint-disable-next-line no-process-env
+const env = process.env.CONFIG_ENV ?? 'dev';
+
+const targetConfigJSBasePath = path.join(__dirname, '..', 'public', 'config');
+const targetConfigJSPath = path.join(targetConfigJSBasePath, 'config.js');
+
+const prepareConfig = async () => {
+  const sourcePath = path.join(__dirname, `config.${env}.js`);
+
+  // Ensure the config directory exists
+  await fs.promises.mkdir(targetConfigJSBasePath, {
+    recursive: true
+  });
+  await fs.promises.copyFile(sourcePath, targetConfigJSPath);
+};
+
+prepareConfig().
+  then(() => {
+    console.log(`[prepareConfig.js] Succesfully injected config for ${env}.`);
+  }).catch(ex => {
+    console.error(`[prepareConfig.js] Error while preparing config.js for env ${env}:`, ex);
+  });
+
+/* eslint-enable no-console */

mockBackend/jsonServer.ts

@@ -1,6 +1,9 @@
 import jsonServer from 'json-server';
 import { mockParties } from './mockParties';
 
+// eslint-disable-next-line no-process-env
+const port = process.env.PORT ?? 3_001;
+
 const server = jsonServer.create();
 const router = jsonServer.router({ parties: mockParties });
 const middlewares = jsonServer.defaults();
@@ -25,7 +28,7 @@ server.use((req, res, next): void => {
 
 // Use default router
 server.use(router);
-server.listen(3_001, (): void => {
+server.listen(port, (): void => {
   // eslint-disable-next-line no-console
-  console.log('JSON Server is running on Port 3001');
+  console.log(`JSON Server is running on Port ${port}`);
 });