@undp/create-app 0.2.14 → 0.2.15

package/bin/generateFiles/generatePackageJson.js

@@ -13,10 +13,8 @@ export function generatePackageJson(config) {
   console.log(chalk.gray(`  Fetching latest version for packages...`));
   const designSystemVer = `^${getLatestVersion('@undp/design-system-react')}`
   const zustandVer = `^${getLatestVersion('zustand')}`
-  const dependencies = config.libraries.includes('peer') && config.libraries.includes('@undp/data-viz') ? {
+  const dependenciesTemp = config.libraries.includes('peer') && config.libraries.includes('@undp/data-viz') ? {
     "@undp/design-system-react": designSystemVer,
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "ajv": "^8.17.1",
@@ -27,6 +25,8 @@ export function generatePackageJson(config) {
     "marked": "^16.4.1",
     "math-expression-evaluator": "^2.0.7",
     "pmtiles": "^4.3.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-globe.gl": "^2.37.0",
     "three": "^0.180.0",
     "zustand": zustandVer
@@ -37,6 +37,13 @@ export function generatePackageJson(config) {
     "zustand": zustandVer
   };
 
+  const dependencies = config.language && !config.framework.includes('next') ? {
+    ...dependenciesTemp, 
+    "i18next": "^26.0.8",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "react-i18next": "^17.0.6",
+  } : {...dependenciesTemp}
+
   switch (config.framework) {
     case 'vite-router':  
       dependencies['@tanstack/react-router'] = '^1.141.1';
@@ -63,28 +70,15 @@ export function generatePackageJson(config) {
     dependencies['lucide-react'] = lucideReactVer;    
   }
   const devDependencies = config.framework.includes('vite') ?  {
-    "@eslint/config-array": "^0.21.1",
-    "@eslint/js": "^9.39.1",
-    "@nabla/vite-plugin-eslint": "^2.0.6",
+    "@biomejs/biome": "^2.4.12",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^9.39.1",
-    "eslint-config-love": "^133.0.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.6.2",
     "rimraf": "^6.1.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "tailwind-animate": "^0.2.10",
@@ -98,25 +92,13 @@ export function generatePackageJson(config) {
     "@vitejs/plugin-react": "^5.1.2",
     "@tailwindcss/vite": "^4.1.17"
   } : {
-    "@eslint/js": "^9.39.1",
+    "@biomejs/biome": "^2.4.12",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.1",
-    "eslint-config-love": "^133.0.0",
-    "eslint-config-next": "16.0.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "prettier": "^3.6.2",
     "rimraf": "^6.1.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "tailwind-animate": "^0.2.10",

package/bin/generateFiles/generateViteConfig.js

@@ -169,8 +169,8 @@ export default defineConfig({
       output: {
         manualChunks(id) {
           if (id.includes('node_modules/react')) return 'react';
-          if (id.includes('@undp/design-system-react')) return 'undp';${config.libraries.includes('@undp/data-viz') ? `
-          if (id.includes('@undp/data-viz')) return 'undp';` : ''}
+          if (id.includes('@undp/design-system-react')) return 'undp-design-system';${config.libraries.includes('@undp/data-viz') ? `
+          if (id.includes('@undp/data-viz')) return 'undp-data-viz';` : ''}
         },
         chunkFileNames: '[name]-[hash].js',
         assetFileNames: '[name].[ext]',

package/bin/index.js

@@ -41,7 +41,7 @@ async function main() {
 
   process.chdir(projectPath);
   
-  const baseFolder = config.framework.includes('vite') ? 'vite' : 'next';
+  const baseFolder = config.framework.includes('vite') ? config.language ? 'viteWithLanguage' : 'vite' : 'next';
   
 
   let tertiaryFolder = 'basic';

package/bin/promptUser.js

@@ -48,6 +48,24 @@ export async function promptUser(name) {
 
   const query = addQuery === 'Yes';
 
+  let language = false;
+
+  if (framework === 'vite-basic' || framework === 'vite-router') {
+    const { addLanguage } = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'addLanguage',
+        message: chalk.yellow(
+          '⚙️ Add multi language support (en, es, fr)?'
+        ),
+        choices: ['Yes', 'No'],
+        default: 'No',
+      },
+    ]);
+
+    language = addLanguage === 'Yes';
+  }
+
   const libraryChoices = [
     { 
       name: '@undp/data-viz — UNDP data visualization components', 
@@ -75,13 +93,13 @@ export async function promptUser(name) {
 
   let addPostCSSScripts = false;
 
-  if(framework !== 'next-basic' && framework !== 'next-auth') {
+  if(framework === 'vite-basic') {
     const { postCSS } = await inquirer.prompt([
       {
         type: 'list',
         name: 'postCSS',
         message: chalk.yellow(
-          '⚙️ Add PostCSS script to wrap all classes in `.undp-container` (recommended if embedding in another app)?'
+          '⚙️ Add PostCSS script to wrap all classes in `.undp-container` (recommended only if embedding in another app)?'
         ),
         choices: ['Yes', 'No'],
         default: 'Yes',
@@ -111,5 +129,6 @@ export async function promptUser(name) {
     addPostCSSScripts,
     framework,
     query,
+    language,
   };
 }

package/bin/templates/next/auth/biome.json

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

package/bin/templates/vite/query+router/src/routes/queryDemo.tsx

@@ -26,35 +26,35 @@ export function TanStackQueryDemo() {
     <>
       <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
         <img
-          src='./imgs/Vitejs-logo.svg'
+          src='/imgs/Vitejs-logo.svg'
           alt='vite logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Tailwind_CSS_Logo.svg'
+          src='/imgs/Tailwind_CSS_Logo.svg'
           alt='tailwind logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Tanstack-logo.png'
+          src='/imgs/Tanstack-logo.png'
           alt='tanstack logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Zustand-logo.svg'
+          src='/imgs/Zustand-logo.svg'
           alt='Zustand logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/undp-logo-blue.svg'
+          src='/imgs/undp-logo-blue.svg'
           alt='UNDP logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}

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

@@ -0,0 +1,67 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

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

@@ -7,35 +7,35 @@ export function About() {
     <>
       <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
         <img
-          src='./imgs/Vitejs-logo.svg'
+          src='/imgs/Vitejs-logo.svg'
           alt='vite logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Tailwind_CSS_Logo.svg'
+          src='/imgs/Tailwind_CSS_Logo.svg'
           alt='tailwind logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Tanstack-logo.png'
+          src='/imgs/Tanstack-logo.png'
           alt='tanstack logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/Zustand-logo.svg'
+          src='/imgs/Zustand-logo.svg'
           alt='Zustand logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/undp-logo-blue.svg'
+          src='/imgs/undp-logo-blue.svg'
           alt='UNDP logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}