@undp/create-app 0.2.21 → 0.3.0

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,36 @@ 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 check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: 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 +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`__
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/viteWithLanguage/router/biome.json

@@ -45,6 +45,9 @@
 			"correctness": {
 				"noUnusedVariables": "error",
 				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

package/bin/templates/viteWithLanguage/router/src/App.tsx

@@ -9,7 +9,7 @@ export function App() {
   const { increment, decrement } = useCounterActions();
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='/imgs/Vitejs-logo.svg'
           alt='vite logo'
@@ -49,7 +49,7 @@ export function App() {
         {t('started', { fileName: 'app.tsx' })}{' '}
         <span className='font-bold'>{t('count', { count: count })}</span>
       </P>
-      <div className='flex gap-4 justify-center mb-8'>
+      <div className='mb-8 flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

package/bin/templates/viteWithLanguage/router/src/components/Header.tsx

@@ -39,7 +39,7 @@ export default function HeaderEl() {
         <HeaderActions>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <div className='cursor-pointer flex h-9 flex gap-2 rtl:[direction:rtl] items-center text-primary-blue-600 hover:text-primary-blue-400 dark:text-primary-white dark:hover:text-primary-white uppercase font-semibold text-sm justify-between whitespace-nowrap bg-transparent p-0 data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&[data-state=open]>.chevron-down]:rotate-180'>
+              <div className='flex h-9 cursor-pointer items-center justify-between gap-2 whitespace-nowrap bg-transparent p-0 font-semibold text-primary-blue-600 text-sm uppercase hover:text-primary-blue-400 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground dark:text-primary-white dark:hover:text-primary-white rtl:[direction:rtl] [&>span]:line-clamp-1 [&[data-state=open]>.chevron-down]:rotate-180'>
                 <LanguageSwitcherIcon />
                 {LANGUAGES.find(d => d.id === locale)?.label}
                 <ChevronDown />

package/bin/templates/viteWithLanguage/router/src/routes/about.tsx

@@ -7,7 +7,7 @@ export function About() {
   const { t } = useTranslation();
   return (
     <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='/imgs/Vitejs-logo.svg'
           alt='vite logo'

package/bin/templates/viteWithLanguage/router/tsconfig.json

@@ -24,6 +24,6 @@
     }
   },
   "files": [],
-  "include": ["eslint.config.mjs", "src", "tailwind.config.js"],
+  "include": ["src", "tailwind.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/bin/templates/viteWithLanguage/router/vite.config.ts

@@ -2,7 +2,6 @@ import path from 'path';
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import eslint from '@nabla/vite-plugin-eslint';
 import { visualizer } from 'rollup-plugin-visualizer';
 import postcssNested from 'postcss-nested';
 import tailwindcss from '@tailwindcss/postcss';
@@ -10,12 +9,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
-    }),
-    eslint(),
+    react(),
     visualizer({ filename: 'stats.html', open: true }),
     viteStaticCopy({
       targets: [{ src: 'staticwebapp.config.json', dest: '' }],

package/package.json

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