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

package/templates/template-ts-dataelements/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/src/App.module.css

@@ -0,0 +1,22 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    max-width: 1020px;
+    margin: 0px auto;
+    padding-top: 8px;
+}
+
+.noticeContainer {
+    max-width: 800px;
+    margin: 16px 0;
+    align-self: center;
+}
+
+:global(h2),
+:global(h3) {
+    margin: 8px;
+    margin-inline-start: 0;
+}

package/templates/template-ts-dataelements/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/src/App.tsx

@@ -0,0 +1,95 @@
+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 className={classes.container}>
+            <h2>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h2>
+            <h3>{i18n.t('Welcome to DHIS2 with TypeScript!')}</h3>
+            <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/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/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/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/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/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/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

package/templates/template-ts-dataelements-react-router/.prettierrc.mjs

@@ -0,0 +1,10 @@
+import prettierConfig from '@dhis2/config-prettier'
+
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+    ...prettierConfig,
+}
+
+export default config

package/templates/template-ts-dataelements-react-router/README.md

@@ -0,0 +1,45 @@
+This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner and runs all available tests found in `/src`.<br />
+
+See the section about [running tests](https://platform.dhis2.nu/#/scripts/test) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+A deployable `.zip` file can be found in `build/bundle`!
+
+See the section about [building](https://platform.dhis2.nu/#/scripts/build) for more information.
+
+### `yarn deploy`
+
+Deploys the built app in the `build` folder to a running DHIS2 instance.<br />
+This command will prompt you to enter a server URL as well as the username and password of a DHIS2 user with the App Management authority.<br/>
+You must run `yarn build` before running `yarn deploy`.<br />
+
+See the section about [deploying](https://platform.dhis2.nu/#/scripts/deploy) for more information.
+
+## Learn More
+
+You can learn more about the platform in the [DHIS2 Application Platform Documentation](https://platform.dhis2.nu/).
+
+You can learn more about the runtime in the [DHIS2 Application Runtime Documentation](https://runtime.dhis2.nu/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/templates/template-ts-dataelements-react-router/d2.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@dhis2/cli-app-scripts').D2Config} */
+const config = {
+    type: 'app',
+
+    entryPoints: {
+        app: './src/AppWrapper.tsx',
+    },
+
+    viteConfigExtensions: './viteConfigExtensions.mts',
+}
+
+module.exports = config

package/templates/template-ts-dataelements-react-router/eslint.config.mjs

@@ -0,0 +1,13 @@
+import config from '@dhis2/config-eslint'
+import { defineConfig } from 'eslint/config'
+import { includeIgnoreFile } from '@eslint/compat'
+import { fileURLToPath } from 'node:url'
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url))
+
+export default defineConfig([
+    includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
+    {
+        extends: [config],
+    },
+])

package/templates/template-ts-dataelements-react-router/i18n/en.pot

@@ -0,0 +1,39 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2026-01-03T10:13:09.567Z\n"
+"PO-Revision-Date: 2026-01-03T10:13:09.567Z\n"
+
+msgid "ERROR"
+msgstr "ERROR"
+
+msgid "Loading..."
+msgstr "Loading..."
+
+msgid "Hello {{name}}"
+msgstr "Hello {{name}}"
+
+msgid "Error"
+msgstr "Error"
+
+msgid "Error loading the data elements"
+msgstr "Error loading the data elements"
+
+msgid "ID"
+msgstr "ID"
+
+msgid "Name"
+msgstr "Name"
+
+msgid "Domain"
+msgstr "Domain"
+
+msgid "Value Type"
+msgstr "Value Type"
+
+msgid "Created by"
+msgstr "Created by"

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

@@ -0,0 +1,36 @@
+{
+    "name": "{{template-name}}",
+    "version": "1.0.0",
+    "description": "",
+    "license": "BSD-3-Clause",
+    "private": true,
+    "packageManager": "pnpm@10.13.1",
+    "scripts": {
+        "build": "d2-app-scripts build",
+        "start": "d2-app-scripts start",
+        "test": "d2-app-scripts test",
+        "deploy": "d2-app-scripts deploy",
+        "lint": "eslint && prettier -c .",
+        "format": "prettier . -w"
+    },
+    "dependencies": {
+        "@dhis2/app-runtime": "^3.15.1",
+        "@dhis2/ui": "^10.11.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router": "^7.11.0"
+    },
+    "devDependencies": {
+        "@dhis2/cli-app-scripts": "12.8.0-alpha.3",
+        "@dhis2/config-eslint": "^0.2.2",
+        "@dhis2/config-prettier": "^0.2.2",
+        "@eslint/compat": "^2.0.0",
+        "@types/jest": "^30.0.0",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "eslint": "^9.39.2",
+        "prettier": "^3.7.4",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.0"
+    }
+}