fix: use js cra and support app name config

.editorconfig

@@ -0,0 +1,16 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# https://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,39 @@
+const SEVERITY = 2
+
+module.exports = {
+    root: true,
+
+    parser: 'babel-eslint',
+
+    env: {
+        browser: true,
+        node: true,
+        jest: true,
+    },
+
+    parserOptions: {
+        // latest standard is ok, eq. to 9
+        ecmaVersion: 2018,
+        ecmaFeatures: {
+            jsx: true,
+            modules: true,
+        },
+    },
+
+    rules: {
+        'max-params': [
+            SEVERITY,
+            {
+                max: 3,
+            },
+        ],
+        'prefer-const': [
+            SEVERITY,
+            {
+                destructuring: 'any',
+                ignoreReadBeforeAssign: false,
+            },
+        ],
+        'no-mixed-spaces-and-tabs': [SEVERITY],
+    },
+}

examples/usage-analytics/src/reducers/filter.js

@@ -39,7 +39,7 @@ export function getInitialState(endDate) {
 }
 
 export function parseDate(date) {
-    let year = date.getFullYear()
+    const year = date.getFullYear()
     let month = '' + (date.getMonth() + 1)
     let day = '' + date.getDate()
 

examples/usage-analytics/src/store.js

@@ -6,7 +6,7 @@ import locale from './reducers/locale'
 import usageData from './reducers/usageData'
 import filter from './reducers/filter'
 
-let middlewares = [ReduxThunk]
+const middlewares = [ReduxThunk]
 
 const shouldLog = false
 

package.json

@@ -6,7 +6,7 @@
     "examples/*"
   ],
   "devDependencies": {
-    "@dhis2/cli-style": "^2.0.1",
+    "@dhis2/cli-style": "^3.2.2",
     "husky": "^1.3.1"
   },
   "scripts": {

packages/app-scripts/src/commands/build.js

@@ -12,7 +12,7 @@ const exitOnCatch = require('../lib/exitOnCatch')
 const handler = async ({ cwd, shell: shellSource, force }) => {
     const paths = makePaths(cwd)
 
-    const shell = makeShell(paths)
+    const shell = makeShell({ name: 'TestApp', paths })
     console.log(shellSource)
     await shell.bootstrap({ shell: shellSource, force })
 

packages/app-scripts/src/commands/start.js

@@ -9,7 +9,7 @@ const exitOnCatch = require('../lib/exitOnCatch')
 const handler = async ({ cwd, force, shell: shellSource }) => {
     const paths = makePaths(cwd)
 
-    const shell = makeShell(paths)
+    const shell = makeShell({ name: 'TestApp', paths })
     await shell.bootstrap({ force, shell: shellSource })
 
     reporter.info('Starting app shell...')

packages/app-scripts/src/commands/test.js

@@ -9,7 +9,7 @@ const exitOnCatch = require('../lib/exitOnCatch')
 const handler = async ({ cwd, force, shell: shellSource }) => {
     const paths = makePaths(cwd)
 
-    const shell = makeShell(paths)
+    const shell = makeShell({ name: 'TestApp', paths })
     await shell.bootstrap({ force, shell: shellSource })
 
     reporter.info('Running tests...')

packages/app-scripts/src/lib/shell/env.js

@@ -44,10 +44,20 @@ const envFromDHISConfig = config => ({
     DHIS2_AUTHORIZATION: config.authorization,
 })
 
-module.exports = () => {
+const makeShellEnv = vars =>
+    Object.entries(vars).reduce(
+        (out, [key, value]) => ({
+            ...out,
+            [`DHIS2_APP_${key.toUpperCase()}`]: value,
+        }),
+        {}
+    )
+
+module.exports = vars => {
     const env = prefixEnvForCRA({
         ...envFromDHISConfig(getDHISConfig()),
         ...filterEnv(),
+        ...makeShellEnv(vars),
     })
     reporter.debug('Env passed to app-shell:', env)
     return env

packages/app-scripts/src/lib/shell/index.js

@@ -3,7 +3,7 @@ const { exec } = require('@dhis2/cli-helpers-engine')
 const bootstrap = require('./bootstrap')
 const getEnv = require('./env')
 
-module.exports = paths => ({
+module.exports = ({ name, paths }) => ({
     bootstrap: async (args = {}) => {
         await bootstrap(paths, args)
     },
@@ -16,7 +16,7 @@ module.exports = paths => ({
             cmd: 'yarn',
             args: ['run', 'build'],
             cwd: paths.shell,
-            env: getEnv(),
+            env: getEnv({ name }),
             pipe: true,
         })
     },
@@ -25,7 +25,7 @@ module.exports = paths => ({
             cmd: 'yarn',
             args: ['run', 'start'],
             cwd: paths.shell,
-            env: getEnv(),
+            env: getEnv({ name }),
             pipe: true,
         })
     },
@@ -34,7 +34,7 @@ module.exports = paths => ({
             cmd: 'yarn',
             args: ['run', 'test', '--', '--watchAll', '--ci'],
             cwd: paths.shell,
-            env: getEnv(),
+            env: getEnv({ name }),
             pipe: true,
         })
     },

packages/app-shell/README.md

@@ -42,3 +42,27 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

packages/app-shell/package.json

@@ -1,22 +1,14 @@
 {
     "name": "@dhis2/app-shell",
     "version": "0.1.0",
-    "repository": "https://github.com/amcgee/dhis2-app-platform",
-    "author": "Austin McGee <[email protected]>",
-    "license": "BSD-3-Clause",
     "private": true,
     "dependencies": {
-        "@dhis2/ui": "^1.0.0-beta.12",
-        "@types/jest": "24.0.5",
-        "@types/node": "11.9.4",
-        "@types/react": "16.8.3",
-        "@types/react-dom": "16.8.1",
-        "prop-types": "^15.7.2",
-        "react": "^16.8.2",
-        "react-dom": "^16.8.2",
-        "react-scripts": "2.1.5",
-        "typeface-roboto": "^0.0.54",
-        "typescript": "3.3.3"
+        "@dhis2/app-runtime": "^1.1.0",
+        "@dhis2/ui-core": "^2.2.0",
+        "@dhis2/ui-widgets": "^1.0.2",
+        "react": "^16.8.6",
+        "react-dom": "^16.8.6",
+        "react-scripts": "3.0.1"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -27,19 +19,16 @@
     "eslintConfig": {
         "extends": "react-app"
     },
-    "installConfig": {
-        "pnp": false
-    },
-    "browserslist": [
-        ">0.5%",
-        "last 2 versions",
-        "Firefox ESR",
-        "ie 11",
-        "not dead"
-    ],
-    "devDependencies": {
-        "enzyme": "^3.7.0",
-        "enzyme-adapter-react-16": "^1.7.0",
-        "jest-enzyme": "^7.0.2"
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
     }
 }

packages/app-shell/public/index.html

@@ -3,11 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#43CBCB" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -22,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>DHIS2 - Simple App</title>
+    <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/app-shell/public/manifest.json

@@ -1,15 +1,15 @@
 {
-    "short_name": "DHIS2 - Simple App",
-    "name": "Simple DHIS2 App sample",
-    "icons": [
-        {
-            "src": "favicon.ico",
-            "sizes": "64x64 32x32 24x24 16x16",
-            "type": "image/x-icon"
-        }
-    ],
-    "start_url": ".",
-    "display": "standalone",
-    "theme_color": "#000000",
-    "background_color": "#ffffff"
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
 }

packages/app-shell/src/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/app-shell/src/App.tsx → packages/app-shell/src/App.js

@@ -1,22 +1,22 @@
 import React from 'react'
-import HeaderBar from '@dhis2/ui/widgets/HeaderBar'
+import { HeaderBar } from '@dhis2/ui-widgets'
+import { DataProvider } from '@dhis2/app-runtime'
 
-// @ts-ignore
 const D2App = React.lazy(() => import('./current-d2-app/App')) // Automatic bundle splitting!
 
-const url = process.env.REACT_APP_DHIS2_BASE_URL
+const url = process.env.REACT_APP_DHIS2_BASE_URL || 'http://localhost:8080'
 
 const App = () => (
-    <div>
-        <HeaderBar appName={process.env.REACT_APP_DHIS2_APP_NAME} />
+    <DataProvider baseUrl={url} apiVersion={32}>
+        <HeaderBar appName={process.env.REACT_APP_DHIS2_APP_NAME || ''} />
         <React.Suspense fallback={<div />}>
             <D2App
                 config={{
                     url,
                 }}
             />
         </React.Suspense>
-    </div>
+    </DataProvider>
 )
 
 export default App

packages/app-shell/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+    const div = document.createElement('div')
+    ReactDOM.render(<App />, div)
+    ReactDOM.unmountComponentAtNode(div)
+})