@undp/create-app 0.2.23 → 0.4.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/generateGitIgnore.js

@@ -13,7 +13,6 @@ build
 dist
 dist-ssr
 *.local
-.eslintcache
 stats.html
 
 # Editor directories and files

package/bin/generateFiles/generatePackageJson.js

@@ -14,34 +14,34 @@ export function generatePackageJson(config) {
   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,
+    '@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
+    '@undp/design-system-react': designSystemVer,
+    'react': '^19.2.3',
+    'react-dom': '^19.2.3',
+    '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",
+    'i18next': '^26.0.8',
+    'i18next-browser-languagedetector': '^8.2.1',
+    'react-i18next': '^17.0.6',
   } : {...dependenciesTemp}
 
   switch (config.framework) {
@@ -73,43 +73,40 @@ export function generatePackageJson(config) {
     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",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "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",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^8.0.13",
-    "vite-plugin-static-copy": "^4.1.0"
+    '@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",
-    "typescript-eslint": "^8.46.3"
+    '@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))
@@ -131,14 +128,18 @@ export function generatePackageJson(config) {
         build: 'next build',
         start: 'next start',
         clean: 'rimraf node_modules && rimraf .next && rimraf package-lock.json',
-        lint: "biome check . --write"
+        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',
-        lint: "biome check . --write"
+        check: 'biome check .',
+        'check:fix': 'biome check --write .',
+        'check:unsafe': 'biome check --write --unsafe .',
       },
     dependencies: sortedDependencies,
     devDependencies: sortedDevDependencies

package/bin/generateFiles/generatePageForNext.js

@@ -27,12 +27,12 @@ export default function Home() {
 
   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'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'
@@ -73,7 +73,7 @@ export default function Home() {
         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/generateFiles/generateViteConfig.js

@@ -95,12 +95,16 @@ export default defineConfig({
             // 1. Append media first
             mediaRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
 
             // 2. Append container after
             containerRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
           },
         },` : `
         {
@@ -144,12 +148,16 @@ export default defineConfig({
             // 1. Append media first
             mediaRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
 
             // 2. Append container after
             containerRules
               .sort((a, b) => a.pxValue - b.pxValue)
-              .forEach(({ rule }) => root.append(rule));
+              .forEach(({ rule }) => {
+                root.append(rule);
+              });
           },
         },`
         }

package/bin/templates/next/auth/README.md

@@ -33,7 +33,8 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `npm run build`: Executes `next build` and builds the app for production and deployment.
 - `npm run preview`: Executes `next start` and serves the static build output locally.
 - `npm run clean`: Executes `rimraf node_modules && rimraf .next && rimraf package-lock.json` and remove node_modules folder, dist folder and package-lock.json.
-- `npm run lint`: Executes `biome check . --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
 

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='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <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/login/page.tsx

@@ -16,7 +16,7 @@ export default function LoginPage() {
 
   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'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'

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='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <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 gap-4 justify-center'>
-        <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>
+    </>
+  );
+}

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

@@ -26,7 +26,7 @@ export default function UserPage() {
 
   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'>
         <Image
           className='dark:invert'
           src='/imgs/next.svg'