@undp/create-app 0.2.21 → 0.3.0

package/bin/templates/vite/query/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/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,19 @@ 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/)
 
 ## 🎨 Styling
 

package/bin/templates/vite/query+router/biome.json

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

package/bin/templates/vite/query+router/src/App.tsx

@@ -8,7 +8,7 @@ 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'
@@ -48,7 +48,7 @@ function App() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>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/vite/query+router/src/routes/queryDemo.tsx

@@ -19,12 +19,12 @@ function useTodoData() {
 export function TanStackQueryDemo() {
   const { data, isLoading, isError } = useTodoData();
 
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+  if (isLoading) return <Spinner size='lg' className='mx-auto my-20' />;
 
   if (isError) return <>Error</>;
   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/vite/query+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/vite/query+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/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,19 @@ 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/)
 
 ## 🎨 Styling
 

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

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

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

@@ -8,7 +8,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'
@@ -48,7 +48,7 @@ export function App() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>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/vite/router/src/routes/about.tsx

@@ -5,7 +5,7 @@ import { P } from '@undp/design-system-react/Typography';
 export function About() {
   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/vite/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/vite/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/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,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.
+
 ## 🌐 Embedding the Visualization
 
 To embed the visualization on an external page, include:

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

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

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

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

package/bin/templates/viteWithLanguage/basic/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/basic/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/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,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.
+
 ## 🔍 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/biome.json

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

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

@@ -30,12 +30,12 @@ function App() {
   const count = useCounter();
   const { increment, decrement } = useCounterActions();
 
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+  if (isLoading) return <Spinner size='lg' className='mx-auto my-20' />;
 
   if (isError) return <>Error</>;
   return (
-    <div className=' min-h-screen flex flex-col justify-center'>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+    <div className='flex min-h-screen flex-col justify-center'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='./imgs/Vitejs-logo.svg'
           alt='vite logo'
@@ -97,7 +97,7 @@ 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/query/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/query/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/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,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`).
@@ -102,6 +114,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/query+router/biome.json

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

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

@@ -10,7 +10,7 @@ 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'
@@ -50,7 +50,7 @@ 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/query+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/query+router/src/routes/queryDemo.tsx

@@ -21,12 +21,12 @@ export function TanStackQueryDemo() {
   const { data, isLoading, isError } = useTodoData();
   const { t } = useTranslation();
 
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+  if (isLoading) return <Spinner size='lg' className='mx-auto my-20' />;
 
   if (isError) return <>Error</>;
   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/query+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/query+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: '' }],