feat: expose application config as separate context (#13)

* feat: expose application config as separate context

* chore: remove unnecessary @babel/preset-react option

* chore: explicitly nest providers

* chore: rename sub-package exports

* chore: upgrade cli-style, use typscript-eslint, fix eslint errors

* chore: use generic Provider name in code, set displayName

.dependabot/config.yml

@@ -0,0 +1,7 @@
+version: 1
+
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "live"
+    version_requirement_updates: "increase_versions"

.eslintrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.eslint],
+}

.github/semantic.yml

@@ -0,0 +1,4 @@
+titleOnly: true
+commitsOnly: false
+titleAndCommits: false
+allowMergeCommits: false

.github/stale.yml

@@ -0,0 +1 @@
+_extends: .github

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .pnp.js
 build
 yarn-error.log
-coverage
+coverage
+.vscode

.huskyrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    hooks: {
+        'commit-msg': 'd2-style commit check',
+        'pre-commit': 'd2-style validate',
+    },
+}

.prettierrc.js

@@ -1,18 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
 module.exports = {
-    printWidth: 80,
-    tabWidth: 4,
-    useTabs: false,
-    semi: false,
-    singleQuote: true,
-    trailingComma: 'es5',
-    bracketSpacing: true,
-    jsxBracketSameLine: false,
-    jsxSingleQuote: false,
-    arrowParens: 'avoid',
-    rangeStart: 0,
-    rangeEnd: Infinity,
-    proseWrap: 'preserve',
-    requirePragma: false,
-    insertPragma: false,
-    endOfLine: 'lf',
+    ...require(config.prettier),
 }

examples/cra/package.json

@@ -6,7 +6,7 @@
         "@dhis2/app-runtime": "file:../../runtime",
         "react": "^16.8.4",
         "react-dom": "^16.8.4",
-        "react-scripts": "3.0.1"
+        "react-scripts": "^3.0.1"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -15,9 +15,6 @@
         "eject": "react-scripts eject",
         "preinstall": "echo \"Run yarn install with --check-files to update local dependency!\""
     },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
     "browserslist": [
         ">0.2%",
         "not dead",

examples/cra/src/App.js

@@ -1,40 +1,35 @@
-import React, { Component } from 'react'
+import React from 'react'
 import './App.css'
-import { DataQuery } from '@dhis2/app-runtime'
+import { useConfig, useDataQuery } from '@dhis2/app-runtime'
 
-class App extends Component {
-    render() {
-        return (
-            <div className="App">
-                <header className="App-header">
-                    <h3>Indicators (first 10)</h3>
-                    <DataQuery
-                        query={{
-                            indicators: {
-                                resource: 'indicators.json',
-                                order: 'shortName:desc',
-                                pageSize: 10,
-                            },
-                        }}
-                    >
-                        {({ loading, error, data }) => {
-                            console.log(loading, error, data)
-                            if (loading) return <span>...</span>
-                            if (error)
-                                return <span>{`ERROR: ${error.message}`}</span>
-                            return (
-                                <pre>
-                                    {data.indicators.indicators
-                                        .map(ind => ind.displayName)
-                                        .join('\n')}
-                                </pre>
-                            )
-                        }}
-                    </DataQuery>
-                </header>
-            </div>
-        )
-    }
+const App = () => {
+    const config = useConfig()
+    const { loading, error, data } = useDataQuery({
+        indicators: {
+            resource: 'indicators.json',
+            order: 'shortName:desc',
+            pageSize: 10,
+        },
+    })
+    return (
+        <div className="App">
+            <header className="App-header">
+                <span>
+                    <strong>Base url:</strong> {config.baseUrl}
+                </span>
+                <h3>Indicators (first 10)</h3>
+                {loading && <span>...</span>}
+                {error && <span>{`ERROR: ${error.message}`}</span>}
+                {data && (
+                    <pre>
+                        {data.indicators.indicators
+                            .map(ind => ind.displayName)
+                            .join('\n')}
+                    </pre>
+                )}
+            </header>
+        </div>
+    )
 }
 
 export default App

examples/cra/src/index.js

@@ -3,12 +3,17 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
-import { DataProvider } from '@dhis2/app-runtime'
+import { Provider } from '@dhis2/app-runtime'
 
 ReactDOM.render(
-    <DataProvider baseUrl="https://play.dhis2.org/dev" apiVersion={32}>
+    <Provider
+        config={{
+            baseUrl: 'https://play.dhis2.org/dev',
+            apiVersion: 32,
+        }}
+    >
         <App />
-    </DataProvider>,
+    </Provider>,
     document.getElementById('root')
 )