New App Shell Tooling (#7)

* Consolidated and aligned repo structure

* Prettified

* Updated TypeScript

* Updated root decorator

* Finished adoption

Author: FlorianRappl

.prettierignore

@@ -1,3 +1,5 @@
+dist/
+node_modules/
 **/*.css
 **/*.md
 **/*.json

jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css)$': 'identity-obj-proxy',
     '@openmrs/esm-api': '<rootDir>/__mocks__/openmrs-esm-api.mock.tsx',
-    '@openmrs/esm-module-config': '<rootDir>/__mocks__/openmrs-esm-module-config.mock.tsx',
+    '@openmrs/esm-config': '<rootDir>/__mocks__/openmrs-esm-module-config.mock.tsx',
     '@openmrs/esm-error-handling': '<rootDir>/__mocks__/openmrs-esm-error-handling.mock.tsx',
     '@openmrs/esm-styleguide': '<rootDir>/__mocks__/openmrs-esm-styleguide.mock.tsx',
     'react-i18next': '<rootDir>/__mocks__/react-i18next.js',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-drugorder-app",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Drug order microfrontend for the OpenMRS SPA",
   "main": "dist/openmrs-esm-drugorder.js",
   "types": "src/index.ts",
@@ -15,15 +15,15 @@
     "prepublishOnly": "npm run build",
     "test": "jest"
   },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
   "keywords": [
     "openmrs"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "browserslist": [
-    "extends browserslist-config-openmrs"
-  ],
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged && concurrently 'npm:test' 'npm:typescript' 'npm:lint'"
@@ -33,15 +33,42 @@
     "type": "git",
     "url": "git+https://github.com/openmrs/openmrs-esm-drugorder.git"
   },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-drugorder/issues"
+  },
+  "dependencies": {
+    "@carbon/icons-react": "^10.18.0",
+    "carbon-components-react": "^7.19.0",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-error-handling": "^3.0.0",
+    "@openmrs/esm-api": "^3.0.0",
+    "@openmrs/esm-extensions": "^3.0.0",
+    "@openmrs/esm-config": "^3.0.0",
+    "@openmrs/esm-patient-chart-widgets": "^1.0.3",
+    "@openmrs/esm-styleguide": "^3.0.0",
+    "carbon-components": "^10.19.0",
+    "carbon-icons": "^7.0.7",
+    "i18next": "^19.4.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-i18next": "^11.3.4",
+    "rxjs": "^6.6.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-error-handling": "^1.1.0",
-    "@openmrs/react-root-decorator": "^2.0.0",
+    "@openmrs/esm-api": "^3.0.0",
+    "@openmrs/esm-config": "^3.0.0",
+    "@openmrs/esm-error-handling": "^3.0.0",
+    "@openmrs/esm-extensions": "^3.0.0",
+    "@openmrs/esm-patient-chart-widgets": "^1.0.3",
+    "@openmrs/esm-styleguide": "^3.0.0",
+    "@openmrs/react-root-decorator": "^3.3.1",
     "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^9.5.0",
     "@types/carbon-components-react": "^7.10.9",
@@ -53,24 +80,11 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/single-spa-react": "^2.12.0",
     "@types/webpack-env": "^1.15.1",
-    "@openmrs/esm-api": "^3.0.0",
-    "@openmrs/esm-extension-manager": "^0.1.1",
-    "@openmrs/esm-module-config": "^2.2.0",
-    "@openmrs/esm-patient-chart-widgets": "^1.0.3",
-    "@openmrs/esm-styleguide": "^1.3.0",
-    "i18next": "^19.4.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-i18next": "^11.3.4",
-    "rxjs": "^6.6.2",
     "@types/yup": "^0.29.3",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "browserslist-config-openmrs": "^1.0.0",
-    "carbon-components": "^10.19.0",
-    "carbon-components-react": "^7.19.0",
-    "carbon-icons": "^7.0.7",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^5.0.0",
     "css-loader": "^3.2.0",
@@ -81,36 +95,27 @@
     "eslint-plugin-prettier": "^3.1.0",
     "fork-ts-checker-webpack-plugin": "^1.5.0",
     "husky": "^3.0.4",
+    "i18next": "^19.4.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
     "kremling": "^2.0.1",
     "lodash": "^4.17.19",
+    "openmrs": "^3.0.2",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-i18next": "^11.3.4",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.2.0",
+    "rxjs": "^6.6.2",
     "single-spa-react": "^2.10.2",
     "style-loader": "^1.0.0",
     "systemjs-webpack-interop": "^1.1.0",
-    "typescript": "^3.5.3",
+    "typescript": "^4.0.3",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.7",
     "webpack-dev-server": "^3.8.0"
-  },
-  "peerDependencies": {
-    "@openmrs/esm-api": "^3.0.0",
-    "@openmrs/esm-extension-manager": "^0.1.1",
-    "@openmrs/esm-module-config": "^2.2.0",
-    "@openmrs/esm-patient-chart-widgets": "^1.0.3",
-    "@openmrs/esm-styleguide": "^1.3.0",
-    "i18next": "^19.4.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-i18next": "^11.3.4",
-    "rxjs": "^6.6.2"
-  },
-  "dependencies": {
-    "lodash-es": "^4.17.15"
   }
 }

package.json

@@ -6,5 +6,4 @@ module.exports = {
   parser: 'typescript',
   semi: true,
   jsxBracketSameLine: true,
-  includeFiles: 'src/**/*.tsx',
 };

prettier.config.js

@@ -1,5 +1,5 @@
 import { backendDependencies } from './openmrs-backend-dependencies';
-import { attach } from '@openmrs/esm-extension-manager';
+import { attach } from '@openmrs/esm-extensions';
 
 const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 

src/index.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import { defineConfigSchema } from '@openmrs/esm-module-config';
+import { defineConfigSchema } from '@openmrs/esm-config';
 import openmrsRootDecorator from '@openmrs/react-root-decorator';
 import './root.css';
 import MedicationsOverview from './widgets/medications/medications-overview.component';