@undp/create-app 0.3.0 → 0.5.0

package/README.md

@@ -52,4 +52,6 @@ After running the CLI, navigate into your project and start the dev server:
 cd my-undp-app && npm run dev
 ```
 
-*Please note: If you have not installed the dependencies then you might want to run `npm install` before `npm run dev`.*
+*Please note: If you have not installed the dependencies then you might want to run `npm install` before `npm run dev`.*
+
+*Please note: The scaffolding tool installs Proxima Nova and Sonhe Breit fonts; you can only use these fonts if you have a license or are using the app as UNDP sub-domain.*

package/bin/generateFiles/generatePackageJson.js

@@ -1,148 +1,157 @@
-import { execSync } from 'child_process';
-import chalk from 'chalk';
+import chalk from "chalk";
+import { execSync } from "child_process";
 
 function getLatestVersion(pkg) {
-  try {
-    return execSync(`npm show ${pkg} version`).toString().trim();
-  } catch {
-    return 'latest';
-  }
+	try {
+		return execSync(`npm show ${pkg} version`).toString().trim();
+	} catch {
+		return "latest";
+	}
 }
 
 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 dependenciesTemp = config.libraries.includes('peer') && config.libraries.includes('@undp/data-viz') ? {
-    '@undp/design-system-react': designSystemVer,
-    '@dnd-kit/core': '^6.3.1',
-    '@dnd-kit/modifiers': '^9.0.0',
-    'ajv': '^8.17.1',
-    'dom-to-svg': '^0.12.2',
-    'file-saver': '^2.0.5',
-    'handlebars': '^4.7.8',
-    'maplibre-gl': '^5.12.0',
-    '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
-  } : {
-    '@undp/design-system-react': designSystemVer,
-    'react': '^19.2.3',
-    'react-dom': '^19.2.3',
-    'zustand': zustandVer
-  };
+	console.log(chalk.gray(`  Fetching latest version for packages...`));
+	const designSystemVer = `^${getLatestVersion("@undp/design-system-react")}`;
+	const typeScriptVer = `^${getLatestVersion("typescript")}`;
+	const zustandVer = `^${getLatestVersion("zustand")}`;
+	const tailwindcssVer = `^${getLatestVersion("tailwindcss")}`;
+	const twAnimateCssVer = `^${getLatestVersion("tw-animate-css")}`;
+	const dependenciesTemp =
+		config.libraries.includes("peer") &&
+		config.libraries.includes("@undp/data-viz")
+			? {
+					"@undp/design-system-react": designSystemVer,
+					"@dnd-kit/core": "^6.3.1",
+					"@dnd-kit/modifiers": "^9.0.0",
+					ajv: "^8.17.1",
+					"dom-to-svg": "^0.12.2",
+					"file-saver": "^2.0.5",
+					handlebars: "^4.7.8",
+					"maplibre-gl": "^5.16.0",
+					marked: "^17.0.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.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,
+				};
 
-  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}
+	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';
-      break;
-    case 'next-basic':  
-      dependencies['next'] = '16.0.10';
-      break;
-    case 'next-auth':  
-      dependencies['better-auth'] = '^1.3.34';
-      dependencies['next'] = '16.0.10';
-      break;
-    default:
-      break;
-  }
-  if (config.query) { 
-    dependencies['@tanstack/react-query'] = '^5.90.12';
-  }
-  if (config.libraries.includes('@undp/data-viz')) {
-    const dataVizVer = `^${getLatestVersion('@undp/data-viz')}`
-    dependencies['@undp/data-viz'] = dataVizVer;
-  }
-  if (config.libraries.includes('lucide-react')) {
-    const lucideReactVer = `^${getLatestVersion('lucide-react')}`
-    dependencies['lucide-react'] = lucideReactVer;    
-  }
-  const sortedDependencies = Object.fromEntries(
-    Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b))
-  );
-  const devDependencies = config.framework.includes('vite') ?  {
-    '@biomejs/biome': '^2.4.12',
-    '@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',
-    'autoprefixer': '^10.4.21',
-    'postcss': '^8.5.6',
-    'postcss-nested': '^7.0.2',
-    'rimraf': '^6.1.0',
-    'rollup-plugin-visualizer': '^6.0.5',
-    'tailwind-animate': '^0.2.10',
-    'tailwind-merge': '^3.4.0',
-    'tailwindcss': '^4.1.17',
-    'tailwindcss-animate': '^1.0.7',
-    'typescript': '^5.9.3',
-    'vite': '^8.0.13',
-    'vite-plugin-static-copy': '^4.1.0'
-  } : {
-    '@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',
-    'postcss': '^8.5.6',
-    'postcss-nested': '^7.0.2',
-    'rimraf': '^6.1.0',
-    'rollup-plugin-visualizer': '^6.0.5',
-    'tailwind-animate': '^0.2.10',
-    'tailwind-merge': '^3.3.1',
-    'tailwindcss': '^4.1.17',
-    'tailwindcss-animate': '^1.0.7',
-    'typescript': '^5.9.3',
-  };
-  const sortedDevDependencies = Object.fromEntries(
-    Object.entries(devDependencies).sort(([a], [b]) => a.localeCompare(b))
-  );
+	switch (config.framework) {
+		case "vite-router":
+			dependencies["@tanstack/react-router"] = "^1.141.1";
+			break;
+		case "next-basic":
+			dependencies["next"] = "16.0.10";
+			break;
+		case "next-auth":
+			dependencies["better-auth"] = "^1.3.34";
+			dependencies["next"] = "16.0.10";
+			break;
+		default:
+			break;
+	}
+	if (config.query) {
+		dependencies["@tanstack/react-query"] = "^5.90.12";
+	}
+	if (config.libraries.includes("@undp/data-viz")) {
+		const dataVizVer = `^${getLatestVersion("@undp/data-viz")}`;
+		dependencies["@undp/data-viz"] = dataVizVer;
+	}
+	if (config.libraries.includes("lucide-react")) {
+		const lucideReactVer = `^${getLatestVersion("lucide-react")}`;
+		dependencies["lucide-react"] = lucideReactVer;
+	}
+	const sortedDependencies = Object.fromEntries(
+		Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b)),
+	);
+	const devDependencies = config.framework.includes("vite")
+		? {
+				"@biomejs/biome": "^2.4.12",
+				"@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",
+				autoprefixer: "^10.4.21",
+				postcss: "^8.5.6",
+				"postcss-nested": "^7.0.2",
+				rimraf: "^6.1.0",
+				"rollup-plugin-visualizer": "^6.0.5",
+				tailwindcss: tailwindcssVer,
+				typescript: typeScriptVer,
+				vite: "^8.0.13",
+				"vite-plugin-static-copy": "^4.1.0",
+			}
+		: {
+				"@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",
+				postcss: "^8.5.6",
+				"postcss-nested": "^7.0.2",
+				rimraf: "^6.1.0",
+				"rollup-plugin-visualizer": "^6.0.5",
+				tailwindcss: tailwindcssVer,
+				typescript: typeScriptVer,
+			};
+	const sortedDevDependencies = Object.fromEntries(
+		Object.entries(devDependencies).sort(([a], [b]) => a.localeCompare(b)),
+	);
 
-  const packageJson = {
-    name: config.projectName,
-    private: true,
-    version: '0.0.0',
-    type: 'module',
-    keywords: [],
-    author: '',
-    sideEffects: [
-      '*.css'
-    ],
-    scripts: config.framework.includes('next')
-      ? {
-        dev: 'next dev',
-        build: 'next build',
-        start: 'next start',
-        clean: 'rimraf node_modules && rimraf .next && rimraf package-lock.json',
-        check: 'biome check .',
-        'check:fix': 'biome check --write .',
-        'check:unsafe': 'biome check --write --unsafe .',
-      } : {
-        dev: 'vite',
-        build: 'tsc && vite build',
-        preview: 'vite preview',
-        clean: 'rimraf node_modules && rimraf dist && rimraf package-lock.json',
-        'install:build': 'npm install && tsc && vite build',
-        check: 'biome check .',
-        'check:fix': 'biome check --write .',
-        'check:unsafe': 'biome check --write --unsafe .',
-      },
-    dependencies: sortedDependencies,
-    devDependencies: sortedDevDependencies
-  }
-  return packageJson
-}
+	const packageJson = {
+		name: config.projectName,
+		private: true,
+		version: "0.0.0",
+		type: "module",
+		keywords: [],
+		author: "",
+		sideEffects: ["*.css"],
+		scripts: config.framework.includes("next")
+			? {
+					dev: "next dev",
+					build: "next build",
+					start: "next start",
+					clean:
+						"rimraf node_modules && rimraf .next && rimraf package-lock.json",
+					check: "biome check .",
+					"check:fix": "biome check --write .",
+					"check:unsafe": "biome check --write --unsafe .",
+				}
+			: {
+					dev: "vite",
+					build: "tsc && vite build",
+					preview: "vite preview",
+					clean:
+						"rimraf node_modules && rimraf dist && rimraf package-lock.json",
+					"install:build": "npm install && tsc && vite build",
+					check: "biome check .",
+					"check:fix": "biome check --write .",
+					"check:unsafe": "biome check --write --unsafe .",
+				},
+		dependencies: sortedDependencies,
+		devDependencies: sortedDevDependencies,
+	};
+	return packageJson;
+}

package/bin/templates/next/auth/app/about/page.tsx

@@ -1,51 +1,51 @@
-'use client';
-
-import { P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function About() {
-  return (
-    <>
-      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
-        <Image
-          className='dark:invert'
-          src='/imgs/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Tailwind_CSS_Logo.svg'
-          alt='Tailwind logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Zustand-logo.svg'
-          alt='Zustand logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <P marginBottom='xl' className='text-center'>
-        To edit this page, edit the page.tsx file in the about folder.
-      </P>
-    </>
-  );
-}
+'use client';
+
+import { P } from '@undp/design-system-react/Typography';
+import Image from 'next/image';
+
+export default function About() {
+  return (
+    <>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        To edit this page, edit the page.tsx file in the about folder.
+      </P>
+    </>
+  );
+}

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

@@ -1,31 +1,31 @@
-import type { Metadata } from 'next';
-import { ReactNode } from 'react';
-
-import HeaderEl from '@/components/Header';
-import FooterEl from '@/components/Footer';
-
-import './globals.css';
-import '@undp/design-system-react/style.css';
-
-export const metadata: Metadata = {
-  title: 'My Next + UNDP app',
-  description: 'Generated by create undp app',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  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>
-  );
-}
+import type { Metadata } from 'next';
+import { ReactNode } from 'react';
+
+import HeaderEl from '@/components/Header';
+import FooterEl from '@/components/Footer';
+
+import './globals.css';
+import '@undp/design-system-react/style.css';
+
+export const metadata: Metadata = {
+  title: 'My Next + UNDP app',
+  description: 'Generated by create undp app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  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>
+  );
+}

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

@@ -1,75 +1,75 @@
-'use client';
-
-import { P } from '@undp/design-system-react/Typography';
-import { Button } from '@undp/design-system-react/Button';
-import Image from 'next/image';
-
-import { useCounterActions, useCounter } from '@/stores/counter';
-
-export default function Home() {
-  const count = useCounter();
-  const { increment, decrement } = useCounterActions();
-  return (
-    <>
-      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
-        <Image
-          className='dark:invert'
-          src='/imgs/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Tailwind_CSS_Logo.svg'
-          alt='Tailwind logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Zustand-logo.svg'
-          alt='Zustand logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <P marginBottom='xl' className='text-center'>
-        To get started, edit the App.tsx file.{' '}
-        <span className='font-bold'>Count: {count}</span>
-      </P>
-      <div className='flex justify-center gap-4'>
-        <Button
-          variant='tertiary'
-          onClick={() => {
-            increment();
-          }}
-        >
-          Increase counter
-        </Button>
-        <Button
-          variant='tertiary'
-          onClick={() => {
-            decrement();
-          }}
-        >
-          Decrease counter
-        </Button>
-      </div>
-    </>
-  );
-}
+'use client';
+
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import Image from 'next/image';
+
+import { useCounterActions, useCounter } from '@/stores/counter';
+
+export default function Home() {
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();
+  return (
+    <>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        To get started, edit the App.tsx file.{' '}
+        <span className='font-bold'>Count: {count}</span>
+      </P>
+      <div className='flex justify-center gap-4'>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            increment();
+          }}
+        >
+          Increase counter
+        </Button>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            decrement();
+          }}
+        >
+          Decrease counter
+        </Button>
+      </div>
+    </>
+  );
+}