@undp/create-app 0.8.0 → 0.91.0

package/bin/generateFiles/generateLayoutForNext.js

@@ -1,14 +1,16 @@
-export function generateLayoutForNext(dataViz, projectName, query) {
-  return `import type { Metadata } from 'next';
+export function generateLayoutForNext(projectName, query) {
+	return `import type { Metadata } from 'next';
 import { ReactNode } from 'react';
 
 import HeaderEl from '@/components/Header';
-import FooterEl from '@/components/Footer';${query ? `
-import TanStackQueryProvider from '@/integration/tanstack-query';`:''}
+import FooterEl from '@/components/Footer';${
+		query
+			? `
+import TanStackQueryProvider from '@/integration/tanstack-query';`
+			: ""
+	}
 
 import './globals.css';
-import '@undp/design-system-react/style.css';${dataViz ? `
-import '@undp/data-viz/style.css';` : ''}
 
 export const metadata: Metadata = {
   title: '${projectName}',
@@ -24,17 +26,20 @@ export default function RootLayout({
     <html lang='en'>
       <body className='flex flex-col gap-0 min-h-screen'>
         <HeaderEl />
-        <main className='grow-1 flex flex-col justify-center'>${query ? `
+        <main className='grow flex flex-col justify-center'>${
+					query
+						? `
           <TanStackQueryProvider>
             <div className='flex flex-col justify-center'>{children}</div>
-          </TanStackQueryProvider>` : `
-          <div className='flex flex-col justify-center'>{children}</div>`}
+          </TanStackQueryProvider>`
+						: `
+          <div className='flex flex-col justify-center'>{children}</div>`
+				}
         </main>
         <FooterEl />
       </body>
     </html>
   );
 }
-`
+`;
 }
-

package/bin/generateFiles/generatePackageJson.js

@@ -15,7 +15,7 @@ export function generatePackageJson(config) {
 	const typeScriptVer = `^${getLatestVersion("typescript")}`;
 	const zustandVer = `^${getLatestVersion("zustand")}`;
 	const tailwindcssVer = `^${getLatestVersion("tailwindcss")}`;
-	const twAnimateCssVer = `^${getLatestVersion("tw-animate-css")}`;
+	const twAnimateVer = `^${getLatestVersion("tailwind-animate")}`;
 	const dependenciesTemp =
 		config.libraries.includes("peer") &&
 		config.libraries.includes("@undp/data-viz")
@@ -35,14 +35,12 @@ export function generatePackageJson(config) {
 					"react-dom": "^19.2.3",
 					"react-globe.gl": "^2.37.0",
 					three: "^0.182.0",
-					"tw-animate-css": twAnimateCssVer,
 					zustand: zustandVer,
 				}
 			: {
 					"@undp/design-system-react": designSystemVer,
 					react: "^19.2.3",
 					"react-dom": "^19.2.3",
-					"tw-animate-css": twAnimateCssVer,
 					zustand: zustandVer,
 				};
 
@@ -86,25 +84,27 @@ export function generatePackageJson(config) {
 	);
 	const devDependencies = config.framework.includes("vite")
 		? {
-				"@biomejs/biome": "^2.4.12",
+				"@biomejs/biome": "^2.5.15",
 				"@tailwindcss/postcss": "^4.1.17",
 				"@tailwindcss/vite": "^4.3.0",
 				"@types/node": "^24.10.0",
 				"@types/react": "^19.2.7",
 				"@types/react-dom": "^19.2.3",
-				"@vitejs/plugin-react": "^6.0.2",
+				"@vitejs/plugin-react": "^6.1.2",
 				autoprefixer: "^10.4.21",
 				postcss: "^8.5.6",
 				"postcss-nested": "^7.0.2",
 				rimraf: "^6.1.0",
-				"rollup-plugin-visualizer": "^6.0.5",
+				"rollup-plugin-visualizer": "^7.1.1",
+				"tailwind-animate": twAnimateVer,
+				"tailwind-merge": "^3.4.0",
 				tailwindcss: tailwindcssVer,
 				typescript: typeScriptVer,
-				vite: "^8.0.13",
+				vite: "^8.3.5",
 				"vite-plugin-static-copy": "^4.1.0",
 			}
 		: {
-				"@biomejs/biome": "^2.4.12",
+				"@biomejs/biome": "^2.5.15",
 				"@tailwindcss/postcss": "^4.1.17",
 				"@types/node": "^24.10.0",
 				"@types/react": "^19.2.7",
@@ -112,7 +112,9 @@ export function generatePackageJson(config) {
 				postcss: "^8.5.6",
 				"postcss-nested": "^7.0.2",
 				rimraf: "^6.1.0",
-				"rollup-plugin-visualizer": "^6.0.5",
+				"rollup-plugin-visualizer": "^7.1.1",
+				"tailwind-animate": twAnimateVer,
+				"tailwind-merge": "^3.4.0",
 				tailwindcss: tailwindcssVer,
 				typescript: typeScriptVer,
 			};

package/bin/generateFiles/generateStylesCss.js

@@ -1,11 +1,10 @@
 export function generateStylesCss(dataViz) {
 	return `
 @import 'tailwindcss';
-@import '@undp/design-system-react/style.css';
-@import '@undp/design-system-react/theme.css';${
+@import "@undp/design-system-react/tailwind.css";${
 		dataViz
 			? `
-@import '@undp/data-viz/style.css';`
+@import '@undp/data-viz/tailwind.css';`
 			: ""
 	}
 `;

package/bin/generateFiles/generateViteConfig.js

@@ -1,26 +1,40 @@
 export function generateViteConfig(config) {
-  return `import path from 'path';
+	return `import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { visualizer } from 'rollup-plugin-visualizer';
+// import { visualizer } from 'rollup-plugin-visualizer';
 import postcssNested from 'postcss-nested';
-import tailwindcss from '@tailwindcss/postcss';${config.addStaticWebAppConfig ? `
-import { viteStaticCopy } from 'vite-plugin-static-copy';` : ''}${config.addPostCSSScripts ? `
-import { AtRule } from 'postcss';` : ''}
+import tailwindcss from '@tailwindcss/postcss';${
+		config.addStaticWebAppConfig
+			? `
+import { viteStaticCopy } from 'vite-plugin-static-copy';`
+			: ""
+	}${
+		config.addPostCSSScripts
+			? `
+import { AtRule } from 'postcss';`
+			: ""
+	}
 
 export default defineConfig({
   plugins: [
     react({}),
-    visualizer({ filename: 'stats.html', open: true }),${config.addStaticWebAppConfig ? `
+    // visualizer({ filename: 'stats.html', open: true }),${
+			config.addStaticWebAppConfig
+				? `
     viteStaticCopy({
       targets: [{ src: 'staticwebapp.config.json', dest: '' }],
-    }),` : ''}
+    }),`
+				: ""
+		}
   ],
   css: {
     postcss: {
       plugins: [
         postcssNested(),
-        tailwindcss(),${config.addPostCSSScripts ? `
+        tailwindcss(),${
+					config.addPostCSSScripts
+						? `
         {
           postcssPlugin: 'remove-layers', // If you want to flatten layers except base layer
           AtRule: {
@@ -106,7 +120,8 @@ export default defineConfig({
                 root.append(rule);
               });
           },
-        },` : `
+        },`
+						: `
         {
           postcssPlugin: 'move-responsive-queries',
           OnceExit(root) {
@@ -160,19 +175,17 @@ export default defineConfig({
               });
           },
         },`
-        }
+				}
       ],
     },
   },
   build: {
     manifest: true,
-    cssCodeSplit: false,
-    rollupOptions: {
+    cssCodeSplit: true,
+    rolldownOptions: {
       output: {
-        manualChunks(id) {
-          if (id.includes('node_modules/react')) return 'react';
-          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';` : ''}
+        codeSplitting: {
+          groups: [{ name: 'react', test: /node_modules[\\/]react/ }],
         },
         chunkFileNames: '[name]-[hash].js',
         assetFileNames: '[name].[ext]',
@@ -189,8 +202,7 @@ export default defineConfig({
       optionsSuccessStatus: 204,
     },
   },
-  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+  resolve: { alias: { '@': path.resolve(import.meta.dirname, './src') } },
 });
-`
+`;
 }
-

package/bin/generateFiles/index.js

@@ -1,10 +1,10 @@
-export { generatePackageJson } from './generatePackageJson.js';
-export { generateViteConfig } from './generateViteConfig.js';
-export { generateIndexHtml } from './generateIndexHtml.js';
-export { generateStaticWebAppConfig } from './generateStaticWebAppConfig.js';
-export { generateLayoutForNext } from './generateLayoutForNext.js';
-export { generateStylesCss } from './generateStylesCss.js';
-export { generateNextEnvTypes } from './generateNextEnvTypes.js';
-export { generateEnv } from './generateEnv.js';
-export { generatePageForNext } from './generatePageForNext.js';
-export { generateGitIgnore } from './generateGitIgnore.js';
+export { generateEnv } from "./generateEnv.js";
+export { generateGitIgnore } from "./generateGitIgnore.js";
+export { generateIndexHtml } from "./generateIndexHtml.js";
+export { generateLayoutForNext } from "./generateLayoutForNext.js";
+export { generateNextEnvTypes } from "./generateNextEnvTypes.js";
+export { generatePackageJson } from "./generatePackageJson.js";
+export { generatePageForNext } from "./generatePageForNext.js";
+export { generateStaticWebAppConfig } from "./generateStaticWebAppConfig.js";
+export { generateStylesCss } from "./generateStylesCss.js";
+export { generateViteConfig } from "./generateViteConfig.js";

package/bin/index.js

@@ -1,119 +1,160 @@
 #!/usr/bin/env node
 
-import path from 'path';
-import inquirer from 'inquirer';
-import chalk from 'chalk';
-import { execSync } from 'child_process';
-import { promptUser } from './promptUser.js';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import { printSuccess, createFolders } from './utils/index.js';
-import { 
-  generatePackageJson,
-  generateViteConfig,  
-  generateIndexHtml,
-  generateStaticWebAppConfig,
-  generateStylesCss,
-  generateLayoutForNext,
-  generateNextEnvTypes,
-  generateEnv,
-  generatePageForNext,
-  generateGitIgnore,
-} from './generateFiles/index.js';
+import chalk from "chalk";
+import { execSync } from "child_process";
+import fs from "fs";
+import inquirer from "inquirer";
+import path from "path";
+import { fileURLToPath } from "url";
+import {
+	generateEnv,
+	generateGitIgnore,
+	generateIndexHtml,
+	generateLayoutForNext,
+	generateNextEnvTypes,
+	generatePackageJson,
+	generatePageForNext,
+	generateStaticWebAppConfig,
+	generateStylesCss,
+	generateViteConfig,
+} from "./generateFiles/index.js";
+import { promptUser } from "./promptUser.js";
+import { createFolders, printSuccess } from "./utils/index.js";
 
 function copyFolder(source, destination) {
-  fs.cpSync(source, destination, { recursive: true, force: true });
+	fs.cpSync(source, destination, { recursive: true, force: true });
 }
 
 async function main() {
-  const args = process.argv.slice(2);
-  const projectName = args[0];
-  const config = await promptUser(projectName);
+	const args = process.argv.slice(2);
+	const projectName = args[0];
+	const config = await promptUser(projectName);
 
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
+	const __filename = fileURLToPath(import.meta.url);
+	const __dirname = path.dirname(__filename);
 
-  const projectPath = path.resolve(process.cwd(), config.projectName);
-  console.log(chalk.gray('\n' + '─'.repeat(60)));
-  console.log(chalk.bold.green(`\n📁 Creating project at: ${chalk.cyan(projectPath)}\n`));
+	const projectPath = path.resolve(process.cwd(), config.projectName);
+	console.log(chalk.gray("\n" + "─".repeat(60)));
+	console.log(
+		chalk.bold.green(`\n📁 Creating project at: ${chalk.cyan(projectPath)}\n`),
+	);
 
-  createFolders(projectPath, true);
+	createFolders(projectPath, true);
 
-  process.chdir(projectPath);
-  
-  const baseFolder = config.framework.includes('vite') ? config.language ? 'viteWithLanguage' : 'vite' : 'next';
-  
+	process.chdir(projectPath);
 
-  let tertiaryFolder = 'basic';
+	const baseFolder = config.framework.includes("vite")
+		? config.language
+			? "viteWithLanguage"
+			: "vite"
+		: "next";
 
-  switch (config.framework) {
-    case 'vite-basic':
-      if (config.query)
-        tertiaryFolder = 'query';
-      else
-        tertiaryFolder = 'basic';
-      break;
-    case 'vite-router':
-      if (config.query)
-        tertiaryFolder = 'query+router';
-      else
-        tertiaryFolder = 'router';
-      break;
-    case 'next-auth':
-      tertiaryFolder = 'auth';
-      break;
-    default:
-      break;
-  }
-  
-  
+	let tertiaryFolder = "basic";
 
-  if (config.framework.includes('vite')) {
-    copyFolder(path.join(__dirname, `./templates/${baseFolder}/${tertiaryFolder}`), projectPath);
-    fs.writeFileSync('vite.config.ts', generateViteConfig(config));
-    fs.writeFileSync('index.html', generateIndexHtml(config));
-    fs.writeFileSync('src/styles/style.css', generateStylesCss(config.libraries.includes('@undp/data-viz')));
-    if (config.addStaticWebAppConfig) {      
-      fs.writeFileSync('staticwebapp.config.json', generateStaticWebAppConfig());
-    }
-  } else {
-    copyFolder(path.join(__dirname, `./templates/${baseFolder}/${tertiaryFolder}`), projectPath);
-    fs.writeFileSync('app/layout.tsx', generateLayoutForNext(config.libraries.includes('@undp/data-viz'), config.projectName, config.query));
-    fs.writeFileSync('next-env.d.ts', generateNextEnvTypes());
-    fs.writeFileSync('app/page.tsx', generatePageForNext(config.query));
-    if (config.framework === 'next-auth') fs.writeFileSync('.env.local', generateEnv());
-    if (config.query) copyFolder(path.join(__dirname, './templates/queryIntegrationForNext'), projectPath);
-  }
-  fs.writeFileSync('.gitignore', generateGitIgnore(config.framework.includes('vite')));
-  fs.writeFileSync('package.json', JSON.stringify(generatePackageJson(config), null, 2));
-  
-  console.log(chalk.green('  ✓ Project folder and files generated\n'));
+	switch (config.framework) {
+		case "vite-basic":
+			if (config.query) tertiaryFolder = "query";
+			else tertiaryFolder = "basic";
+			break;
+		case "vite-router":
+			if (config.query) tertiaryFolder = "query+router";
+			else tertiaryFolder = "router";
+			break;
+		case "next-auth":
+			tertiaryFolder = "auth";
+			break;
+		default:
+			break;
+	}
 
-  const { installNow } = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'installNow',
-      message: 'Would you like to install dependencies now?',
-      default: true,
-    },
-  ]);
+	if (config.framework.includes("vite")) {
+		copyFolder(
+			path.join(__dirname, `./templates/${baseFolder}/${tertiaryFolder}`),
+			projectPath,
+		);
+		fs.writeFileSync("vite.config.ts", generateViteConfig(config));
+		fs.writeFileSync("index.html", generateIndexHtml(config));
+		fs.writeFileSync(
+			"src/styles/style.css",
+			generateStylesCss(config.libraries.includes("@undp/data-viz")),
+		);
+		if (config.addStaticWebAppConfig) {
+			fs.writeFileSync(
+				"staticwebapp.config.json",
+				generateStaticWebAppConfig(),
+			);
+		}
+	} else {
+		copyFolder(
+			path.join(__dirname, `./templates/${baseFolder}/${tertiaryFolder}`),
+			projectPath,
+		);
+		fs.writeFileSync(
+			"app/layout.tsx",
+			generateLayoutForNext(config.projectName, config.query),
+		);
+		fs.writeFileSync(
+			"app/globals.css",
+			generateStylesCss(config.libraries.includes("@undp/data-viz")),
+		);
+		fs.writeFileSync("next-env.d.ts", generateNextEnvTypes());
+		fs.writeFileSync("app/page.tsx", generatePageForNext(config.query));
+		if (config.framework === "next-auth")
+			fs.writeFileSync(".env.local", generateEnv());
+		if (config.query)
+			copyFolder(
+				path.join(__dirname, "./templates/queryIntegrationForNext"),
+				projectPath,
+			);
+	}
+	fs.writeFileSync(
+		".gitignore",
+		generateGitIgnore(config.framework.includes("vite")),
+	);
+	fs.writeFileSync(
+		"package.json",
+		JSON.stringify(generatePackageJson(config), null, 2),
+	);
 
-  console.log(chalk.bold.yellow('\n📦 Installing dependencies (this might take some time)...'));
-  if (installNow) {
-    try {
-      execSync('npm install', { stdio: 'inherit' })
-      console.log(chalk.green('  ✓ All dependencies installed'));
-    } catch {
-      console.log(chalk.yellow('  ⚠️ Skipped installing dependencies (npm not installed or error occurred)'));
-    }
-  }
-  try {
-    execSync('git init', { stdio: 'ignore' });
-    console.log(chalk.green('  ✓ Git repository initialized'));
-  } catch {
-    console.log(chalk.yellow('  ⚠️ Skipped git init (Git not installed or error occurred)'));
-  }
-  printSuccess(config, installNow);
+	console.log(chalk.green("  ✓ Project folder and files generated\n"));
+
+	const { installNow } = await inquirer.prompt([
+		{
+			type: "confirm",
+			name: "installNow",
+			message: "Would you like to install dependencies now?",
+			default: true,
+		},
+	]);
+
+	console.log(
+		chalk.bold.yellow(
+			"\n📦 Installing dependencies (this might take some time)...",
+		),
+	);
+	if (installNow) {
+		try {
+			execSync("npm install", { stdio: "inherit" });
+			console.log(chalk.green("  ✓ All dependencies installed"));
+		} catch {
+			console.log(
+				chalk.yellow(
+					"  ⚠️ Skipped installing dependencies (npm not installed or error occurred)",
+				),
+			);
+		}
+	}
+	try {
+		execSync("git init", { stdio: "ignore" });
+		console.log(chalk.green("  ✓ Git repository initialized"));
+	} catch {
+		console.log(
+			chalk.yellow(
+				"  ⚠️ Skipped git init (Git not installed or error occurred)",
+			),
+		);
+	}
+	printSuccess(config, installNow);
 }
 
-main().catch(console.error);
+main().catch(console.error);

package/bin/templates/next/auth/app/globals.css

@@ -1 +1,2 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/next/auth/app/layout.tsx

@@ -1,31 +1,29 @@
-import type { Metadata } from 'next';
-import { ReactNode } from 'react';
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import FooterEl from "@/components/Footer";
+import HeaderEl from "@/components/Header";
 
-import HeaderEl from '@/components/Header';
-import FooterEl from '@/components/Footer';
-
-import './globals.css';
-import '@undp/design-system-react/style.css';
+import "./globals.css";
 
 export const metadata: Metadata = {
-  title: 'My Next + UNDP app',
-  description: 'Generated by create undp app',
+	title: "My Next + UNDP app",
+	description: "Generated by create undp app",
 };
 
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: ReactNode;
+	children: ReactNode;
 }>) {
-  return (
-    <html lang='en'>
-      <body className='flex flex-col gap-0 min-h-screen'>
-        <HeaderEl />
-        <main className='grow-1 flex flex-col justify-center'>
-          <div className='flex flex-col justify-center'>{children}</div>
-        </main>
-        <FooterEl />
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<body className="flex flex-col gap-0 min-h-screen">
+				<HeaderEl />
+				<main className="grow flex flex-col justify-center">
+					<div className="flex flex-col justify-center">{children}</div>
+				</main>
+				<FooterEl />
+			</body>
+		</html>
+	);
 }

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

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/next/basic/app/globals.css

@@ -1 +1,3 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@import "@undp/design-system-react/tailwind.css";
+@import "@undp/data-viz/tailwind.css";

package/bin/templates/next/basic/app/layout.tsx

@@ -1,32 +1,29 @@
-import type { Metadata } from 'next';
-import { ReactNode } from 'react';
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import FooterEl from "@/components/Footer";
+import HeaderEl from "@/components/Header";
 
-import HeaderEl from '@/components/Header';
-import FooterEl from '@/components/Footer';
-
-import './globals.css';
-import '@undp/design-system-react/style.css';
-import '@undp/data-viz/style.css';
+import "./globals.css";
 
 export const metadata: Metadata = {
-  title: 'My Next + UNDP app',
-  description: 'Generated by create undp app',
+	title: "My Next + UNDP app",
+	description: "Generated by create undp app",
 };
 
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: ReactNode;
+	children: ReactNode;
 }>) {
-  return (
-    <html lang='en'>
-      <body className='flex flex-col gap-0 min-h-screen'>
-        <HeaderEl />
-        <main className='grow-1 flex flex-col justify-center'>
-          <div className='flex flex-col justify-center'>{children}</div>
-        </main>
-        <FooterEl />
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<body className="flex flex-col gap-0 min-h-screen">
+				<HeaderEl />
+				<main className="grow flex flex-col justify-center">
+					<div className="flex flex-col justify-center">{children}</div>
+				</main>
+				<FooterEl />
+			</body>
+		</html>
+	);
 }