@undp/create-app 0.2.1 → 0.2.3

package/README.md

@@ -1,6 +1,6 @@
 # 🏗️ UNDP Create App CLI ![npm](https://img.shields.io/npm/v/@undp/create-app)
 
-**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for ESLint, Prettier, and UNDP’s Design System.
+**`@undp/create-app`** is UNDP’s official **project scaffolding tool** for quickly bootstrapping frontend applications using **React**, and **TypeScript** — complete with sensible defaults for ESLint, Prettier.
 
 [NPM Package](https://www.npmjs.com/package/@undp/create-app)
 
@@ -8,29 +8,28 @@
 
 ## 🚀 Features
 
-- ⚡ **React + TypeScript + TailwindCSS** setup out of the box  
-- 🚀 **Vite support** for fast SPA development, including optional **state management**, and **routing** using **tanstack libraries**
-- 🌐 **Next.js support** for full-stack apps, including optional **authentication (Auth)** using **Better Auth**
-- 🧱 Preconfigured for UNDP’s Design System  
-- 📊 Optional integration with **@undp/data-viz** for data visualization  
-- 🧼 ESLint + Prettier ready
+- ⚛️ **React + TypeScript** setup out of the box  
+- 🖌️ Includes **Tailwind CSS** for styling  
+- 🗂️ Includes **Zustand** for state management  
+- 🚀 **Vite support** for fast SPA development, including optional **routing** with **Tanstack router**
+- 🌐 **Next.js support** for full-stack apps, including optional **authentication** with **Better Auth**  
+- 🎨 Preconfigured for **UNDP’s Design System**  
+- ⚡️ Optional integration with **Tanstack query** for data fetching  
+- 📊 Optional integration with **@undp/data-viz** for interactive data visualization  
+- ✨ **ESLint** + **Prettier** preconfigured for consistent code style  
 
 ---
 
 ## 🧩 Pre-configured setups
 
-- Vite + Tailwind
-    - Lightweight and blazing fast React starter (ideal if you are planning to embed the SPA in another page)
-- Vite + Tailwind + Query
-    - Optimized starter with data fetching powered by TanStack Query (ideal if you are planning to embed the SPA in another page)
-- Vite + Tailwind + Router
-    - Fast starter with built-in routing support
-- Vite + Tailwind + Router + Query
-    - Complete Vite setup for routing and data management
-- Next.js + Tailwind
-    - Production-ready React framework with file-based routing and SSR
-- Next.js + Tailwind + Auth
-    - Secure, full-stack framework with authentication and SSR
+All setups include **Tailwind CSS** for styling and **Zustand** for state management.
+
+| Framework | Variants | Description |
+|------------|-----------|-------------|
+| **Vite** | Basic | Minimal React + TypeScript setup |
+| **Vite** | + Router | Adds TanStack Router for routing |
+| **Next.js** | Basic | SSR and file-based routing |
+| **Next.js** | + Auth | Includes authentication via Better Auth |
 
 ---
 
@@ -39,7 +38,7 @@
 You don’t need to install it globally — just use **npx**:
 
 ```bash
-npx @undp/create-app my-project
+npx @undp/create-app my-undp-app
 ```
 
 ---
@@ -49,7 +48,7 @@ npx @undp/create-app my-project
 After running the CLI, navigate into your project and start the dev server:
 
 ```bash
-cd my-project && npm run dev
+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`.*

package/bin/generateFiles/generateEnv.js

@@ -0,0 +1,21 @@
+export function generateEnv() {
+  return `# Secret key used by Better Auth for signing tokens and securing sessions
+BETTER_AUTH_SECRET=
+
+# The base URL where your Better Auth instance is running (e.g., localhost for dev)
+BETTER_AUTH_URL=http://localhost:3000
+
+# --- GitHub OAuth credentials ---
+# Client ID from your GitHub OAuth app (used for GitHub login)
+GITHUB_CLIENT_ID=
+# Client Secret from your GitHub OAuth app
+GITHUB_CLIENT_SECRET=
+
+# --- Azure AD OAuth credentials ---
+# Client ID from your Azure AD App Registration
+AZURE_CLIENT_ID=
+# Client Secret generated for your Azure AD App
+AZURE_CLIENT_SECRET=
+# Tenant ID of your Azure AD directory (found in Azure portal)
+AZURE_TENANT_ID=`
+}

package/bin/generateFiles/generateLayoutForNext.js

@@ -0,0 +1,40 @@
+export function generateLayoutForNext(dataViz, 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 './globals.css';
+import '@undp/design-system-react/style.css';${dataViz ? `
+import '@undp/data-viz/style.css';` : ''}
+
+export const metadata: Metadata = {
+  title: '${projectName}',
+  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'>${query ? `
+          <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/generateNextEnvTypes.js

@@ -0,0 +1,9 @@
+export function generateNextEnvTypes() {
+  return `/// <reference types='next' />
+/// <reference types='next/image-types/global' />
+import './.next/dev/types/routes.d.ts';
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+`
+}

package/bin/generateFiles/generatePackageJson.js

@@ -2,7 +2,6 @@ import { execSync } from 'child_process';
 import chalk from 'chalk';
 
 function getLatestVersion(pkg) {
-  console.log(chalk.gray(`  Fetching latest version for ${pkg}`));
   try {
     return execSync(`npm show ${pkg} version`).toString().trim();
   } catch {
@@ -11,7 +10,9 @@ function getLatestVersion(pkg) {
 }
 
 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') ? {
     "@undp/design-system-react": designSystemVer,
     "react": "^19.2.0",
@@ -27,24 +28,19 @@ export function generatePackageJson(config) {
     "math-expression-evaluator": "^2.0.7",
     "pmtiles": "^4.3.0",
     "react-globe.gl": "^2.37.0",
-    "three": "^0.180.0"
+    "three": "^0.180.0",
+    "zustand": zustandVer
   } : {
     "@undp/design-system-react": designSystemVer,
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "zustand": zustandVer
   };
 
   switch (config.framework) {
-    case 'vite-query':
-      dependencies['@tanstack/react-query'] = '^5.90.7';
-      break;
     case 'vite-router':  
       dependencies['@tanstack/react-router'] = '^1.135.0';
       break;
-    case 'vite-full':
-      dependencies['@tanstack/react-query'] = '^5.90.7';  
-      dependencies['@tanstack/react-router'] = '^1.135.0';
-      break;
     case 'next-basic':  
       dependencies['next'] = '16.0.1';
       break;
@@ -55,6 +51,9 @@ export function generatePackageJson(config) {
     default:
       break;
   }
+  if (config.query) { 
+    dependencies['@tanstack/react-query'] = '^5.90.7';
+  }
   if (config.libraries.includes('@undp/data-viz')) {
     const dataVizVer = `^${getLatestVersion('@undp/data-viz')}`
     dependencies['@undp/data-viz'] = dataVizVer;
@@ -63,7 +62,7 @@ export function generatePackageJson(config) {
     const lucideReactVer = `^${getLatestVersion('lucide-react')}`
     dependencies['lucide-react'] = lucideReactVer;    
   }
-  const devDependencies = config.framework !== 'next-basic' && config.framework !== 'next-auth' ?  {
+  const devDependencies = config.framework.includes('vite') ?  {
     "@eslint/config-array": "^0.21.1",
     "@eslint/js": "^9.39.1",
     "@nabla/vite-plugin-eslint": "^2.0.6",
@@ -138,7 +137,7 @@ export function generatePackageJson(config) {
     sideEffects: [
       '*.css'
     ],
-    scripts: config.framework === 'next' 
+    scripts: config.framework.includes('next')
       ? {
         dev: 'next dev',
         build: 'next build',

package/bin/generateFiles/generatePageForNext.js

@@ -0,0 +1,102 @@
+export function generatePageForNext(query) {
+  return `'use client';
+
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import Image from 'next/image';${query ? `
+import { useQuery } from '@tanstack/react-query';
+import { Spinner } from '@undp/design-system-react/Spinner';` :''}
+
+import { useCounterActions, useCounter } from '@/stores/counter';${query ? `
+
+function useTodoData() {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+  });
+}` :''}
+
+export default function Home() {
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();${query ? `
+
+  const { data, isLoading, isError } = useTodoData();
+
+  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+
+  if (isError) return <>Error</>;` : ''}
+  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 mb-8'>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            increment();
+          }}
+        >
+          Increase counter
+        </Button>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            decrement();
+          }}
+        >
+          Decrease counter
+        </Button>
+      </div>${query ? `
+      <P marginBottom='xl' className='text-center'>
+        Data loaded successfully. {data?.length} elements in the query.
+      </P>` : ''}
+    </>
+  );
+}
+`
+}
+

package/bin/generateFiles/generateStylesCss.js

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

package/bin/generateFiles/index.js

@@ -2,3 +2,8 @@ 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';

package/bin/index.js

@@ -13,6 +13,11 @@ import {
   generateViteConfig,  
   generateIndexHtml,
   generateStaticWebAppConfig,
+  generateStylesCss,
+  generateLayoutForNext,
+  generateNextEnvTypes,
+  generateEnv,
+  generatePageForNext,
 } from './generateFiles/index.js';
 
 function copyFolder(source, destination) {
@@ -37,19 +42,21 @@ async function main() {
   
   const baseFolder = config.framework.includes('vite') ? 'vite' : 'next';
   
-  const secondaryFolder = config.libraries.includes('@undp/data-viz') ? 'withDataViz' : 'withoutDataViz';
 
   let tertiaryFolder = 'basic';
 
   switch (config.framework) {
-    case 'vite-query':
-      tertiaryFolder = 'query';
+    case 'vite-basic':
+      if (config.query)
+        tertiaryFolder = 'query';
+      else
+        tertiaryFolder = 'basic';
       break;
     case 'vite-router':
-      tertiaryFolder = 'router';
-      break;
-    case 'vite-full':
-      tertiaryFolder = 'query+router';
+      if (config.query)
+        tertiaryFolder = 'query+router';
+      else
+        tertiaryFolder = 'router';
       break;
     case 'next-auth':
       tertiaryFolder = 'auth';
@@ -58,18 +65,27 @@ async function main() {
       break;
   }
   
-  copyFolder(path.join(__dirname, `./templates/${baseFolder}/${secondaryFolder}/${tertiaryFolder}`), projectPath)
+  
 
   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('package.json', JSON.stringify(generatePackageJson(config), null, 2));
   
-  console.log(chalk.green('  ✓ Project folder and files generated'));
+  console.log(chalk.green('  ✓ Project folder and files generated\n'));
 
   const { installNow } = await inquirer.prompt([
     {

package/bin/promptUser.js

@@ -22,37 +22,32 @@ export async function promptUser(name) {
     {
       type: 'list',
       name: 'framework',
-      message: chalk.yellow('📦 Select the framework you prefer to use:\n'),
+      loop: false,
+      message: chalk.yellow('📦 Choose your setup (all include Tailwind for styling & Zustand for state management):\n'),
       choices: [
-        { 
-          name: 'Vite + Tailwind — Lightweight and blazing fast React starter (ideal if you are planning to embed the SPA in another page)', 
-          value: 'vite-basic' 
-        },
-        { 
-          name: 'Vite + Tailwind + Query — Optimized starter with data fetching powered by TanStack Query (ideal if you are planning to embed the SPA in another page)', 
-          value: 'vite-query' 
-        },
-        { 
-          name: 'Vite + Tailwind + Router — Fast starter with built-in routing support', 
-          value: 'vite-router' 
-        },
-        { 
-          name: 'Vite + Tailwind + Router + Query — Complete Vite setup for routing and data management', 
-          value: 'vite-full' 
-        },
-        { 
-          name: 'Next.js + Tailwind — Production-ready React framework with file-based routing and SSR', 
-          value: 'next-basic' 
-        },
-        { 
-          name: 'Next.js + Tailwind + Auth — Secure, full-stack framework with authentication and SSR', 
-          value: 'next-auth' 
-        },
+        { name: 'Vite — Basic React setup (ideal for embedding)', value: 'vite-basic' },
+        { name: 'Vite + Router — With routing support', value: 'vite-router' },
+        { name: 'Next.js — SSR and file routing', value: 'next-basic' },
+        { name: 'Next.js + Auth — With authentication', value: 'next-auth' },
       ],
       default: 'vite-basic',
     },
+  ]);  
+
+  const { addQuery } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'addQuery',
+      message: chalk.yellow(
+        '⚙️ Add @tanstack/query for data fetching?'
+      ),
+      choices: ['Yes', 'No'],
+      default: 'No',
+    },
   ]);
 
+  const query = addQuery === 'Yes';
+
   const libraryChoices = [
     { 
       name: '@undp/data-viz — UNDP data visualization components', 
@@ -114,6 +109,7 @@ export async function promptUser(name) {
     libraries,
     addStaticWebAppConfig,
     addPostCSSScripts,
-    framework, 
+    framework,
+    query,
   };
 }

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

@@ -0,0 +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>
+    </>
+  );
+}

package/bin/templates/next/{withDataViz/auth → auth}/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { ReactNode } from 'react';
 
 import HeaderEl from '@/components/Header';
 import FooterEl from '@/components/Footer';
@@ -14,7 +15,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang='en'>

package/bin/templates/next/{withDataViz/auth → auth}/app/login/page.tsx

@@ -19,7 +19,7 @@ export default function LoginPage() {
       <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
         <Image
           className='dark:invert'
-          src='/next.svg'
+          src='/imgs/next.svg'
           alt='Next.js logo'
           width={100}
           height={20}
@@ -28,7 +28,25 @@ export default function LoginPage() {
         <P marginBottom='none'>&</P>
         <Image
           className='dark:invert'
-          src='/undp-logo-blue.svg'
+          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}

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

@@ -0,0 +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>
+    </>
+  );
+}