@undp/create-app 0.2.20 → 0.2.23

package/README.md

@@ -1,6 +1,6 @@
 # 🏗️ UNDP Create App CLI ![npm](https://img.shields.io/npm/v/@undp/create-app)
 
-**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for ESLint, Prettier.
+**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for Biome.
 
 [NPM Package](https://www.npmjs.com/package/@undp/create-app)
 
@@ -16,7 +16,7 @@
 - 🎨 Preconfigured for **UNDP’s Design System**  
 - ⚡️ Optional integration with **Tanstack query** for data fetching  
 - 📊 Optional integration with **@undp/data-viz** for interactive data visualization  
-- 🌐 Optional integration with **i18next** for internationalization  
+- 🔣 Optional integration with **i18next** for internationalization  
 - ✨ **Biome** preconfigured for consistent code style  
 
 ---
@@ -25,12 +25,12 @@
 
 All setups include **Tailwind CSS** for styling and **Zustand** for state management.
 
-| Framework | Variants | Description |
-|------------|-----------|-------------|
-| **Vite** | Basic | Minimal React + TypeScript setup |
-| **Vite** | + Router | Adds TanStack Router for routing |
-| **Next.js** | Basic | SSR and file-based routing |
-| **Next.js** | + Auth | Includes authentication via Better Auth |
+| Framework | Variants | Description | Internationalization Available |
+|------------|-----------|-------------|-------------|
+| **Vite** | Basic | Minimal React + TypeScript setup | ✅ |
+| **Vite** | + Router | Adds TanStack Router for routing | ✅ |
+| **Next.js** | Basic | SSR and file-based routing | ❌ |
+| **Next.js** | + Auth | Includes authentication via Better Auth | ❌ |
 
 ---
 

package/bin/templates/next/auth/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Authentication with [Better Auth](https://www.better-auth.com/)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,19 +33,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `next build` and builds the app for production and deployment.
 - `npm run preview`: Executes `next start` and serves the static build output locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf .next && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/next/basic/README.md

@@ -4,7 +4,7 @@ It includes:
 * Next 16.x with React compiler
 * UNDP Design System
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -32,19 +32,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `next build` and builds the app for production and deployment.
 - `npm run preview`: Executes `next start` and serves the static build output locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf .next && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/basic/README.md

@@ -4,7 +4,7 @@ It includes:
 * React 19.x with React compiler
 * UNDP Design System
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -32,19 +32,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/query/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Data fetching with [TanStack Query](https://tanstack.com/query)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,19 +33,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/query+router/README.md

@@ -6,7 +6,7 @@ It includes:
 * Routing with [TanStack Router](https://tanstack.com/router)
 * Data fetching with [TanStack Query](https://tanstack.com/query)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -34,19 +34,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/router/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Routing with [TanStack Router](https://tanstack.com/router)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,19 +33,18 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 ## 🎨 Styling
 

package/bin/templates/viteWithLanguage/basic/README.md

@@ -4,7 +4,7 @@ It includes:
 * React 19.x with React compiler
 * UNDP Design System
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -32,24 +32,35 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
+
+__Recommendation__
+
+On Visual Studio Code, you can also use the [i18n Ally](https://github.com/lokalise/i18n-ally/wiki) extension for a better translation workflow. It provides features such as translation key autocomplete, inline translation previews, missing key detection, and quick navigation between translation files.  
 
 ## 🎨 Styling
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
 
+## 🔣 Adding a new language
+
+1. Create a new translation file (e.g. `src/locales/<language code>/common.json`) containing all translated keys.
+2. Import and register the language in your i18next `src/i18n.ts`.
+3. Add the new language in `LANGUAGE` variable in `src/constants.ts`.
+4. Add the language code to your language selector or supported languages list.
+5. Switch languages using `i18n.changeLanguage('fr')` and i18next will load the corresponding translations.
+
 ## 🌐 Embedding the Visualization
 
 To embed the visualization on an external page, include:

package/bin/templates/viteWithLanguage/query/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Data fetching with [TanStack Query](https://tanstack.com/query)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,24 +33,35 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
+
+__Recommendation__
+
+On Visual Studio Code, you can also use the [i18n Ally](https://github.com/lokalise/i18n-ally/wiki) extension for a better translation workflow. It provides features such as translation key autocomplete, inline translation previews, missing key detection, and quick navigation between translation files. 
 
 ## 🎨 Styling
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
 
+## 🔣 Adding a new language
+
+1. Create a new translation file (e.g. `src/locales/<language code>/common.json`) containing all translated keys.
+2. Import and register the language in your i18next `src/i18n.ts`.
+3. Add the new language in `LANGUAGE` variable in `src/constants.ts`.
+4. Add the language code to your language selector or supported languages list.
+5. Switch languages using `i18n.changeLanguage('fr')` and i18next will load the corresponding translations.
+
 ## 🔍 Data Fetching
 
 Data fetching is powered by [TanStack Query](https://tanstack.com/query) for efficient, declarative data fetching and caching.

package/bin/templates/viteWithLanguage/query+router/README.md

@@ -6,7 +6,7 @@ It includes:
 * Routing with [TanStack Router](https://tanstack.com/router)
 * Data fetching with [TanStack Query](https://tanstack.com/query)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -34,24 +34,35 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
+
+__Recommendation__
+
+On Visual Studio Code, you can also use the [i18n Ally](https://github.com/lokalise/i18n-ally/wiki) extension for a better translation workflow. It provides features such as translation key autocomplete, inline translation previews, missing key detection, and quick navigation between translation files. 
 
 ## 🎨 Styling
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
 
+## 🔣 Adding a new language
+
+1. Create a new translation file (e.g. `src/locales/<language code>/common.json`) containing all translated keys.
+2. Import and register the language in your i18next `src/i18n.ts`.
+3. Add the new language in `LANGUAGE` variable in `src/constants.ts`.
+4. Add the language code to your language selector or supported languages list.
+5. Switch languages using `i18n.changeLanguage('fr')` and i18next will load the corresponding translations.
+
 ## 🧭 Routing
 
 Routing is powered by [TanStack Router](https://tanstack.com/router) and uses a code-based configuration (in the `./src/main.tsx`).
@@ -102,6 +113,8 @@ import { Link } from "@tanstack/react-router";
 
 More info: [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
 
+__Please note: Language routing is done at in `src/main.tsx`__
+
 ## 🔍 Data Fetching
 
 Data fetching is powered by [TanStack Query](https://tanstack.com/query) for efficient, declarative data fetching and caching.

package/bin/templates/viteWithLanguage/router/README.md

@@ -5,7 +5,7 @@ It includes:
 * UNDP Design System
 * Routing with [TanStack Router](https://tanstack.com/router)
 * TailwindCSS
-* Code linting and formatting via ESLint and Prettier
+* Code linting and formatting via Biome
 
 ## 🧩 Installation
 
@@ -33,24 +33,35 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
 - `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf dist && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
+- `npm run lint`: Executes `biome check . --write` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
+This project uses Biome integrated to automatically format and lint your code.
 
 If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+* [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 
 Your editor should now show linting errors and automatically fix issues where possible.
 
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
+More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
+
+__Recommendation__
+
+On Visual Studio Code, you can also use the [i18n Ally](https://github.com/lokalise/i18n-ally/wiki) extension for a better translation workflow. It provides features such as translation key autocomplete, inline translation previews, missing key detection, and quick navigation between translation files. 
 
 ## 🎨 Styling
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
 
+## 🔣 Adding a new language
+
+1. Create a new translation file (e.g. `src/locales/<language code>/common.json`) containing all translated keys.
+2. Import and register the language in your i18next `src/i18n.ts`.
+3. Add the new language in `LANGUAGE` variable in `src/constants.ts`.
+4. Add the language code to your language selector or supported languages list.
+5. Switch languages using `i18n.changeLanguage('fr')` and i18next will load the corresponding translations.
+
 ## 🧭 Routing
 
 Routing is powered by [TanStack Router](https://tanstack.com/router) and uses a code-based configuration (in the `./src/main.tsx`).
@@ -101,6 +112,8 @@ import { Link } from "@tanstack/react-router";
 
 More info: [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
 
+__Please note: Language routing is done at in `src/main.tsx`__
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/create-app",
-  "version": "0.2.20",
+  "version": "0.2.23",
   "description": "UNDP's project scaffolding tool",
   "bin": {
     "create-undp-app": "./bin/index.js"