offline-support

db/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
+  "parser": "@babel/eslint-parser"
+}

db/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+express-serving/node_modules    
+
+
+# testing
+/coverage
+/reports
+.scannerwork
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env.secrets
+.serverless
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor config
+.idea
+.vscode

db/.prettierignore

@@ -0,0 +1,8 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+coverage
+pnpm-lock.yaml

db/README.md

@@ -0,0 +1,56 @@
+# template-ui-db
+
+## Configuration
+
+Put common MFE styles and images into assets/styles and assets/images.
+Bootstrap styles, custom colors and fonts are loaded by the main app using the @template-ui/theme project and put into global namespace.
+@template-ui/shared project contains common UI components.
+Other apps might have their own shared components: for example, @template-ui/shared.
+
+Each MFE is using css modules, so when applying styles to your UI components in MFE use either global theme styles or local styles using cas modules className=(styles.name} notation.
+
+For testing do mock any imports from projects with @template-ui namespace and any other namespaces you imported.
+
+Remove any dependency that is not needed from package.json.
+Consider adding any libraries that should be loaded only once to externals section in Webpack and to import maps in the main app.
+
+Remove/Modify mfe.json to have proper 'env' and 'roles' as properties at the routes level and also in any mount points.
+By default, if 'env' or 'roles' are omitted, the micro app will be available in all environments and to all users.
+
+Utilize utility module single-spa pattern to share common services.
+
+## State sharing
+Each MFE receives publish and subscribe functions from custom props which allows micro apps to communicate vi pub/sub model.
+Avoid using redux if possible.  Utilize React Context APIs (useContext) and/or consider adding global state via Utility MicroApp.
+
+## Local development
+
+[Full documentation](https://single-spa.js.org/docs/recommended-setup#local-development)
+
+Tutorial video: [youtube](https://www.youtube.com/watch?v=vjjcuIxqIzY&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=4) / [bilibili](https://www.bilibili.com/video/av83617789/)
+
+It is preferred to do local development one module at a time.
+
+```sh
+cd mfe/db
+npm install
+npm start
+```
+
+Go to http://localhost:9015 and follow the instruction.
+
+Now, go to https://template-stg.example.com. In the browser console, run the following:
+
+```js
+localStorage.setItem("devtools", true);
+```
+
+Refresh the page. Click on the tan / beige rectangle:
+
+![image](https://user-images.githubusercontent.com/5524384/75211359-e46b9280-5740-11ea-80bb-974846df414b.png)
+
+Set an [import map override](https://github.com/joeldenning/import-map-overrides/) to `9015`.
+
+![image](https://user-images.githubusercontent.com/5524384/75211553-7e333f80-5741-11ea-97d6-d3d86ffd1826.png)
+
+Refresh the page. Your local code for this module will now be running on https://template-stg.example.com. You may make changes locally and refresh the page to see them.

db/babel.config.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["@babel/transform-runtime"]
+}

db/jest.config.js

@@ -0,0 +1,31 @@
+// for any MFE that is externalized by the webpack and import maps
+// add mock impl mapping into moduleNameMapper.
+// see example below for @template-ui/shared
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css|scss|png|jpg)$": "identity-obj-proxy",
+    "@template-ui/main": "<rootDir>/src/__test-mocks__/main.js",
+    "@template-ui/auth": "<rootDir>/src/__test-mocks__/auth.js",
+  },
+  setupFilesAfterEnv: ["./jest.setup.js"],
+  testMatch: ['<rootDir>/src/**/*.test.{tsx,ts}'],
+  collectCoverageFrom: [
+    "src/**/*.{ts,tsx}",
+    "!src/__test-mocks__/**/*",
+    "!src/types/**/*",
+  ],
+  coverageReporters: ["clover", "json", "lcov", "text", "text-summary"],
+  collectCoverage: true,
+  coverageThreshold: {
+    global: {
+      statements: 30,
+      branches: 8,
+      functions: 20,
+      lines: 30,
+    },
+  },
+};

db/jest.setup.js

@@ -0,0 +1,11 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom;
+import "jest-localstorage-mock";
+import "@testing-library/jest-dom/extend-expect";
+import { configure } from "enzyme";
+import enableHooks from "jest-react-hooks-shallow";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+configure({ adapter: new Adapter() });
+enableHooks(jest);

db/mfe.json

@@ -0,0 +1,39 @@
+{
+  "orgName": "template-ui",
+  "projectName": "db",
+  "imports": {
+    "@template-ui/db": "/template-ui-db/SHA/template-ui-db.js",
+    "@template-ui/db/": "/template-ui-db/SHA/"
+  },
+  "layout": {
+    "order": 1,
+    "routes": [
+      {
+        "type": "application",
+        "name": "@template-ui/db",
+        "props": {}
+      }
+    ]
+  },
+  "mount-points": {
+    "main": [
+      {
+        "import": "@template-ui/db",
+        "order": 30,
+        "allow": [],
+        "deny": [],
+        "env": []
+      }
+    ],
+    "db-prefetch": [
+      {
+        "queryKey": [
+          "lovs",
+          "organization"
+        ],
+        "queryUrl": "LOV_SERVICE_URL/lovs/organization",
+        "queryOptions": {}
+      }
+    ]
+  }
+}