@dhis2/create-app 5.3.0-alpha.1 → 5.3.0-alpha.3

package/templates/template-ts-dataelements-react-router/pnpm-workspace.yaml

@@ -0,0 +1,17 @@
+# These hoists are needed for @dhis2/app-shell since it uses directly some libraries that were hoisted by yarn 1
+# This is a better alternative than pnpm's shamefullyHoist https://pnpm.io/settings#shamefullyhoist until we update the way that @dhis2/app-shell works
+publicHoistPattern:
+    - '@dhis2/ui'
+    - 'typeface-roboto'
+    - '@dhis2/app-adapter'
+    - 'prop-types'
+    - '@dhis2/d2-i18n'
+    - 'post-robot'
+    - 'styled-jsx'
+    - '@dhis2/app-adapter'
+    - '@dhis2/pwa'
+
+onlyBuiltDependencies:
+    - '@dhis2/cli-helpers-engine'
+    - core-js-pure
+    - esbuild

package/templates/template-ts-dataelements-react-router/src/App.module.css

@@ -0,0 +1,61 @@
+.appWrapper {
+    display: grid;
+    grid-template-areas: 'sidebar' 'main' 'footer';
+    font-size: 14px;
+    grid-template-columns: auto;
+    grid-template-rows: auto 1fr auto;
+    overflow: auto;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.footer {
+    grid-area: footer;
+    width: 100%;
+}
+
+.main {
+    grid-area: main;
+    width: 100%;
+    padding-inline-start: 10px;
+    /*height: 100%;
+    display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    max-width: 1020px;
+    margin: 0px auto;
+    padding-top: 8px; */
+}
+
+.noticeContainer {
+    /* width: 768px; */
+    max-width: 340px;
+
+    margin: 16px 0;
+    align-self: center;
+}
+
+@media (min-width: 768px) {
+    .appWrapper {
+        display: grid;
+        grid-template-areas: 'sidebar main' 'footer footer';
+        font-size: 14px;
+        height: 100%;
+        grid-template-columns: 250px 1fr;
+        grid-template-rows: 1fr auto;
+        overflow: auto;
+        min-height: 1000px;
+    }
+
+    .noticeContainer {
+        max-width: 768px;
+    }
+}
+
+:global(h2),
+:global(h3) {
+    margin: 8px;
+    margin-inline-start: 0;
+}

package/templates/template-ts-dataelements-react-router/src/App.test.tsx

@@ -0,0 +1,21 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+it('renders without crashing', () => {
+    const container = document.createElement('div')
+
+    const data = {
+        resource: 'test',
+    }
+
+    const root = createRoot(container)
+    root.render(
+        <CustomDataProvider data={data}>
+            <App />
+        </CustomDataProvider>
+    )
+
+    root.unmount()
+})

package/templates/template-ts-dataelements-react-router/src/App.tsx

@@ -0,0 +1,94 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { NoticeBox } from '@dhis2/ui'
+import React, { FC } from 'react'
+import classes from '@/App.module.css'
+import DataElementsList from '@/components/DataElementsList'
+
+interface QueryResults {
+    me: {
+        name: string
+    }
+}
+
+const query = {
+    me: {
+        resource: 'me',
+    },
+}
+
+const MyApp: FC = () => {
+    const { error, loading, data } = useDataQuery<QueryResults>(query)
+
+    if (error) {
+        return <span>{i18n.t('ERROR')}</span>
+    }
+
+    if (loading) {
+        return <span>{i18n.t('Loading...')}</span>
+    }
+
+    return (
+        <div>
+            <h2>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h2>
+            <div className={classes.noticeContainer}>
+                <NoticeBox title="DHIS2 Web application">
+                    This application was scaffolded using DHIS2 app platform
+                    (with <code>npm create @dhis2/app</code>).
+                    <br />
+                    For more information, you can check the DHIS2 documentation:
+                    <ul>
+                        <li>
+                            <a
+                                target="_blank"
+                                href="https://developers.dhis2.org/docs/guides"
+                                rel="noreferrer"
+                            >
+                                Web development guides
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                target="_blank"
+                                href="https://docs.dhis2.org/en/develop/using-the-api/dhis-core-version-master/metadata.html"
+                                rel="noreferrer"
+                            >
+                                Documentation for the API{' '}
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                target="_blank"
+                                href="https://developers.dhis2.org/docs/tutorials/app-runtime-query/"
+                                rel="noreferrer"
+                            >
+                                AppRuntime and useDataQuery hook
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                target="_blank"
+                                href="https://developers.dhis2.org/docs/ui/webcomponents"
+                                rel="noreferrer"
+                            >
+                                UI Library
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                target="_blank"
+                                href="https://developers.dhis2.org/demo/"
+                                rel="noreferrer"
+                            >
+                                UI library demo
+                            </a>
+                        </li>
+                    </ul>
+                </NoticeBox>
+            </div>
+            <DataElementsList />
+        </div>
+    )
+}
+
+export default MyApp

package/templates/template-ts-dataelements-react-router/src/AppWrapper.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { HashRouter, Route, Routes } from 'react-router'
+import App from '@/App'
+import classes from '@/App.module.css'
+import AboutPage from '@/components/About'
+import AppMenu from '@/components/AppMenu'
+
+const AppWrapper = () => {
+    return (
+        <div className={classes.appWrapper}>
+            {/* 
+        For the client-side routing to work on a DHIS2 server, it needs to use HashRouter 
+        otherwise it will interfer with the server-side routing
+        */}
+            <HashRouter>
+                <div className={classes.sidebar}>
+                    <AppMenu />
+                </div>
+                <div className={classes.main}>
+                    <Routes>
+                        <Route path="/" element={<App />} />
+                        <Route path="/about" element={<AboutPage />} />
+                    </Routes>
+                </div>
+                <div className={classes.footer}>Our App</div>
+            </HashRouter>
+        </div>
+    )
+}
+
+export default AppWrapper

package/templates/template-ts-dataelements-react-router/src/components/About.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const AboutPage = () => {
+    return (
+        <div>
+            <h2>About the app</h2>
+            <div>
+                A placeholder for an About page showing under a separate
+                client-side route
+            </div>
+        </div>
+    )
+}
+
+export default AboutPage

package/templates/template-ts-dataelements-react-router/src/components/AppMenu.tsx

@@ -0,0 +1,31 @@
+import { Menu, MenuItem } from '@dhis2/ui'
+import * as React from 'react'
+import { useNavigate, useLocation } from 'react-router'
+
+const AppMenu = () => {
+    const navigate = useNavigate()
+    const location = useLocation()
+
+    return (
+        <div>
+            <Menu>
+                <MenuItem
+                    active={location.pathname === '/'}
+                    onClick={() => {
+                        navigate(`/`)
+                    }}
+                    label="Home"
+                />
+                <MenuItem
+                    active={location.pathname == '/about'}
+                    onClick={() => {
+                        navigate(`/about`)
+                    }}
+                    label="About"
+                />
+            </Menu>
+        </div>
+    )
+}
+
+export default AppMenu

package/templates/template-ts-dataelements-react-router/src/components/DataElementsList.module.css

@@ -0,0 +1,9 @@
+.tableContainer {
+    max-width: 168px;
+}
+
+@media (min-width: 768px) {
+    .tableContainer {
+        max-width: 90%;
+    }
+}

package/templates/template-ts-dataelements-react-router/src/components/DataElementsList.tsx

@@ -0,0 +1,132 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import {
+    Center,
+    CircularLoader,
+    DataTable,
+    DataTableCell,
+    DataTableColumnHeader,
+    DataTableRow,
+    NoticeBox,
+    TableBody,
+    TableHead,
+} from '@dhis2/ui'
+import * as React from 'react'
+import classes from './DataElementsList.module.css'
+interface QueryResults {
+    dataElements: Array<{
+        id: string
+        name: string
+        displayName: string
+        domainType: string
+        valueType: string
+        createdBy: {
+            id: string
+            name: string
+        }
+    }>
+}
+
+/**
+ * Documentation for the API: https://docs.dhis2.org/en/develop/using-the-api/dhis-core-version-master/metadata.html
+ * Documentation for useDataQuery hook: https://developers.dhis2.org/docs/tutorials/app-runtime-query/
+ * UI Library: https://developers.dhis2.org/docs/ui/webcomponents
+ */
+const PAGE_SIZE = 25
+const query = {
+    dataElements: {
+        resource: 'dataElements',
+        params: {
+            pageSize: PAGE_SIZE,
+            fields: [
+                'id,name,displayName,domainType,valueType,categoryCombo[id,name],createdBy',
+            ],
+            order: 'created:desc',
+        },
+    },
+}
+const DataElementsList = () => {
+    const { error, loading, data } = useDataQuery<{
+        dataElements: QueryResults
+    }>(query)
+
+    if (error) {
+        return (
+            <NoticeBox error title={i18n.t('Error')}>
+                {i18n.t('Error loading the data elements')}
+            </NoticeBox>
+        )
+    }
+
+    return (
+        <div>
+            <h2>{i18n.t('Last {{n}} Data Elements:', { n: PAGE_SIZE })}</h2>
+            <div className={classes.tableContainer}>
+                <DataTable>
+                    <TableHead>
+                        <DataTableRow>
+                            <DataTableColumnHeader large>
+                                {i18n.t('ID')}
+                            </DataTableColumnHeader>
+                            <DataTableColumnHeader large>
+                                {i18n.t('Name')}
+                            </DataTableColumnHeader>
+                            <DataTableColumnHeader large>
+                                {i18n.t('Domain')}
+                            </DataTableColumnHeader>
+                            <DataTableColumnHeader
+                                width="180px"
+                                align="center"
+                                large
+                            >
+                                {i18n.t('Value Type')}
+                            </DataTableColumnHeader>
+                            <DataTableColumnHeader large>
+                                {i18n.t('Created by')}{' '}
+                            </DataTableColumnHeader>
+                        </DataTableRow>
+                    </TableHead>
+                    <TableBody>
+                        {loading && (
+                            <DataTableRow>
+                                <DataTableCell colSpan="100%">
+                                    <Center>
+                                        <CircularLoader large />
+                                    </Center>
+                                </DataTableCell>
+                            </DataTableRow>
+                        )}
+                        {data?.dataElements?.dataElements?.map(
+                            (dataElement) => {
+                                return (
+                                    <DataTableRow key={dataElement.id}>
+                                        <DataTableCell large>
+                                            {dataElement.id}
+                                        </DataTableCell>
+                                        <DataTableCell large>
+                                            {dataElement.displayName}
+                                        </DataTableCell>
+                                        <DataTableCell large>
+                                            {dataElement.domainType}
+                                        </DataTableCell>
+                                        <DataTableCell large>
+                                            {dataElement.valueType?.replaceAll(
+                                                '_',
+                                                ' '
+                                            )}
+                                        </DataTableCell>
+                                        <DataTableCell large>
+                                            {dataElement.createdBy.name}
+                                        </DataTableCell>
+                                    </DataTableRow>
+                                )
+                            }
+                        )}
+                    </TableBody>
+                </DataTable>
+            </div>
+        </div>
+    )
+}
+
+export default DataElementsList

package/templates/template-ts-dataelements-react-router/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "noEmit": true,
+        "skipLibCheck": true,
+        "allowJs": true,
+        "jsx": "react",
+        "esModuleInterop": true,
+        "target": "ESNext",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "include": ["src", "types"]
+}

package/templates/template-ts-dataelements-react-router/types/global.d.ts

@@ -0,0 +1,8 @@
+import 'react'
+
+declare module 'react' {
+    interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        jsx?: boolean
+        global?: boolean
+    }
+}

package/templates/template-ts-dataelements-react-router/types/modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string }
+    export default classes
+}

package/templates/template-ts-dataelements-react-router/viteConfigExtensions.mts

@@ -0,0 +1,15 @@
+import path from 'path'
+import { defineConfig, ConfigEnv } from 'vite'
+
+const viteConfig = defineConfig(async (configEnv: ConfigEnv) => {
+    const { mode } = configEnv
+    return {
+        // In dev environments, don't clear the terminal after files update
+        clearScreen: mode !== 'development',
+        // Use an import alias: import from '@/' anywhere instead of 'src/'
+        resolve: { alias: { '@': path.resolve(__dirname, 'src') } },
+        // ...other config options here
+    }
+})
+
+export default viteConfig