@undp/create-app 0.2.1 → 0.2.2

package/README.md

@@ -8,29 +8,29 @@
 
 ## 🚀 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** and **data fetching** with **TanStack** libraries  
+- 🌐 **Next.js support** for full-stack apps, including optional **authentication** with **Better Auth**  
+- 🧱 Preconfigured for **UNDP’s Design System**  
+- 📊 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** | + Query | Adds TanStack Query for data fetching |
+| **Vite** | + Router | Adds TanStack Router for routing |
+| **Vite** | + Router + Query | Full-featured Vite setup |
+| **Next.js** | Basic | SSR and file-based routing |
+| **Next.js** | + Auth | Includes authentication via Better Auth |
 
 ---
 
@@ -39,7 +39,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 +49,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/{templates/next/withoutDataViz/auth/app/layout.tsx → generateFiles/generateLayoutForNext.js}

@@ -1,30 +1,35 @@
-import type { Metadata } from 'next';
-
-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: React.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>
-  );
-}
+export function generateLayoutForNext(dataViz, projectName) {
+  return `import type { Metadata } from 'next';
+
+import HeaderEl from '@/components/Header';
+import FooterEl from '@/components/Footer';
+
+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: React.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/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,11 +28,13 @@ 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) {
@@ -63,7 +66,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 +141,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/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,7 @@ 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';

package/bin/index.js

@@ -13,6 +13,10 @@ import {
   generateViteConfig,  
   generateIndexHtml,
   generateStaticWebAppConfig,
+  generateStylesCss,
+  generateLayoutForNext,
+  generateNextEnvTypes,
+  generateEnv,
 } from './generateFiles/index.js';
 
 function copyFolder(source, destination) {
@@ -37,7 +41,6 @@ async function main() {
   
   const baseFolder = config.framework.includes('vite') ? 'vite' : 'next';
   
-  const secondaryFolder = config.libraries.includes('@undp/data-viz') ? 'withDataViz' : 'withoutDataViz';
 
   let tertiaryFolder = 'basic';
 
@@ -58,18 +61,25 @@ 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));
+    fs.writeFileSync('next-env.d.ts', generateNextEnvTypes());
+    if (config.framework === 'next-auth') fs.writeFileSync('.env.local', generateEnv());
   }
   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,32 +22,15 @@ 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', value: 'vite-basic' },
+        { name: 'Vite + Query — With TanStack Query', value: 'vite-query' },
+        { name: 'Vite + Router — With routing support', value: 'vite-router' },
+        { name: 'Vite + Router + Query — Full Vite setup', value: 'vite-full' },
+        { name: 'Next.js — SSR and file routing', value: 'next-basic' },
+        { name: 'Next.js + Auth — With authentication', value: 'next-auth' },
       ],
       default: 'vite-basic',
     },

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

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

@@ -0,0 +1,84 @@
+'use client';
+
+import Image from 'next/image';
+import { Spinner } from '@undp/design-system-react/Spinner';
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+
+import { useSession, signIn } from '@/lib/auth-client';
+
+export default function UserPage() {
+  const { data: session, isPending } = useSession();
+
+  if (isPending) {
+    return (
+      <div className='my-8 mx-aut'>
+        <Spinner />
+      </div>
+    );
+  }
+  const handleSignIn = async () => {
+    await signIn.social({
+      provider: 'microsoft',
+      callbackURL: '/user',
+    });
+  };
+
+  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>
+      {!session ? (
+        <>
+          <P marginBottom='xl' className='text-center'>
+            Please sign in to view this page
+          </P>
+          <div className='flex justify-center'>
+            <Button variant='tertiary' onClick={handleSignIn}>
+              Sign In
+            </Button>
+          </div>
+        </>
+      ) : (
+        <P marginBottom='xl' className='text-center'>
+          Welcome, {session.user.name || session.user.email}!
+        </P>
+      )}
+    </>
+  );
+}