npm - @undp/create-app - Versions diffs - 0.1.1 → 0.2.1 - Mend

@undp/create-app 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (276) hide show

package/README.md CHANGED Viewed

@@ -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**, **Vite**, 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, and UNDP’s Design System.
 [NPM Package](https://www.npmjs.com/package/@undp/create-app)
@@ -8,11 +8,29 @@
 ## 🚀 Features
-- ⚡ **Vite + React + TypeScript + TailwindCSS** setup out of the box
+- ⚡ **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 integrations (TanStack Query, TanStack Router, @undp/data-viz)
-- 🧩 Automatically installs dependencies
-- 🧼 ESLint + Prettier + Vite config ready
+- 📊 Optional integration with **@undp/data-viz** for data visualization
+- 🧼 ESLint + Prettier ready
+---
+## 🧩 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
 ---
@@ -24,9 +42,14 @@ You don’t need to install it globally — just use **npx**:
 npx @undp/create-app my-project
 ```
-or install it globally
+---
+## 📦 Getting started
+After running the CLI, navigate into your project and start the dev server:
 ```bash
-npm install -g @undp/create-app
-create-undp-app my-project
+cd my-project && 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/generateIndexHtml.js ADDED Viewed

@@ -0,0 +1,18 @@
+export function generateIndexHtml(config) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${config.projectName}</title>
+  </head>
+  <body>
+    ${!config.addPostCSSScripts ? `<div id="root"></div>` : `<div id="undp-container">
+      <div id="root"></div>
+    </div>` }
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`
+}

package/bin/generateFiles/generatePackageJson.js ADDED Viewed

@@ -0,0 +1,160 @@
+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 {
+    return 'latest';
+  }
+}
+export function generatePackageJson(config) {
+  const designSystemVer = `^${getLatestVersion('@undp/design-system-react')}`
+  const dependencies = config.libraries.includes('peer') && config.libraries.includes('@undp/data-viz') ? {
+    "@undp/design-system-react": designSystemVer,
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@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-globe.gl": "^2.37.0",
+    "three": "^0.180.0"
+  } : {
+    "@undp/design-system-react": designSystemVer,
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+  };
+  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;
+    case 'next-auth':
+      dependencies['better-auth'] = '^1.3.34';
+      dependencies['next'] = '16.0.1';
+      break;
+    default:
+      break;
+  }
+  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 devDependencies = config.framework !== 'next-basic' && config.framework !== 'next-auth' ?  {
+    "@eslint/config-array": "^0.21.1",
+    "@eslint/js": "^9.39.1",
+    "@nabla/vite-plugin-eslint": "^2.0.6",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-config-love": "^133.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "postcss": "^8.5.6",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^3.6.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": "^7.2.2",
+    "vite-plugin-static-copy": "^3.1.4",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@tailwindcss/vite": "^4.1.17"
+  } : {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "eslint": "^9.39.1",
+    "eslint-config-love": "^133.0.0",
+    "eslint-config-next": "16.0.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-n": "^17.23.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "postcss": "^8.5.6",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^3.6.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"
+  };
+  const packageJson = {
+    name: config.projectName,
+    private: true,
+    version: '0.0.0',
+    type: 'module',
+    keywords: [],
+    author: '',
+    sideEffects: [
+      '*.css'
+    ],
+    scripts: config.framework === 'next'
+      ? {
+        dev: 'next dev',
+        build: 'next build',
+        start: 'next start',
+        clean: 'rimraf node_modules && rimraf .next && rimraf package-lock.json',
+        lint: 'npx eslint --fix && npx prettier . --write'
+      } : {
+        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: 'npx eslint --fix && npx prettier . --write'
+      },
+    dependencies: dependencies,
+    devDependencies: devDependencies
+  }
+  return packageJson
+}

package/bin/{generateTemplates/templates/configFiles/staticwebapp.config.json → generateFiles/generateStaticWebAppConfig.js} RENAMED Viewed

@@ -1,4 +1,5 @@
-{
+export function generateStaticWebAppConfig() {
+  return `{
   "globalHeaders": {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "GET, OPTIONS"
@@ -41,4 +42,6 @@
     "rewrite": "/index.html",
     "exclude": ["/assets/*", "/*.js", "/*.css", "/*.png", "/*.jpg", "/*.svg"]
   }
+}`
 }

package/bin/{generateTemplates/templates/configFiles/vite.config.ts.txt → generateFiles/generateViteConfig.js} RENAMED Viewed

@@ -1,13 +1,12 @@
-import path from 'path';
+export function generateViteConfig(config) {
+  return `import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import eslint from '@nabla/vite-plugin-eslint';
-import { AtRule } from 'postcss';
 import { visualizer } from 'rollup-plugin-visualizer';
 import postcssNested from 'postcss-nested';
-import tailwindcss from '@tailwindcss/postcss';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
+import tailwindcss from '@tailwindcss/postcss';${config.addStaticWebAppConfig ? `
+import { viteStaticCopy } from 'vite-plugin-static-copy';` : ''}
 export default defineConfig({
   plugins: [
@@ -17,16 +16,16 @@ export default defineConfig({
       },
     }),
     eslint(),
-    visualizer({ filename: 'stats.html', open: true }),
+    visualizer({ filename: 'stats.html', open: true }),${config.addStaticWebAppConfig ? `
     viteStaticCopy({
       targets: [{ src: 'staticwebapp.config.json', dest: '' }],
-    }),
+    }),` : ''}
   ],
   css: {
     postcss: {
       plugins: [
         postcssNested(),
-        tailwindcss(),
+        tailwindcss(),${config.addPostCSSScripts ? `
         {
           postcssPlugin: 'remove-layers', // If you want to flatten layers except base layer
           AtRule: {
@@ -55,11 +54,11 @@ export default defineConfig({
                 if (selector.startsWith('.undp-container')) return selector;
                 if (skipSelectors.some(skip => selector.startsWith(skip)))
                   return selector;
-                return `.undp-container ${selector}`;
+                return \`.undp-container \${selector}\`;
               });
             });
           },
-        },
+        },` : ''}
         {
           postcssPlugin: 'move-media-queries-last', // If you want to reorder media queries to the end
           OnceExit(root) {
@@ -87,8 +86,8 @@ export default defineConfig({
       output: {
         manualChunks(id) {
           if (id.includes('node_modules/react')) return 'react';
-          if (id.includes('@undp/design-system-react')) return 'undp';
-          if (id.includes('@undp/data-viz')) return 'undp';
+          if (id.includes('@undp/design-system-react')) return 'undp';${config.libraries.includes('@undp/data-viz') ? `
+          if (id.includes('@undp/data-viz')) return 'undp';` : ''}
         },
         chunkFileNames: '[name]-[hash].js',
         assetFileNames: '[name].[ext]',
@@ -107,3 +106,6 @@ export default defineConfig({
   },
   resolve: { alias: { '@': path.resolve(__dirname, './src') } },
 });
+`
+}

package/bin/generateFiles/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { generatePackageJson } from './generatePackageJson.js';
+export { generateViteConfig } from './generateViteConfig.js';
+export { generateIndexHtml } from './generateIndexHtml.js';
+export { generateStaticWebAppConfig } from './generateStaticWebAppConfig.js';

package/bin/index.js CHANGED Viewed

@@ -5,15 +5,28 @@ import inquirer from 'inquirer';
 import chalk from 'chalk';
 import { execSync } from 'child_process';
 import { promptUser } from './promptUser.js';
-import { generateFiles } from './generateFiles.js';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
 import { printSuccess, createFolders } from './utils/index.js';
+import {
+  generatePackageJson,
+  generateViteConfig,
+  generateIndexHtml,
+  generateStaticWebAppConfig,
+} from './generateFiles/index.js';
+function copyFolder(source, destination) {
+  fs.cpSync(source, destination, { recursive: true, force: true });
+}
 async function main() {
-  // Get user configuration
   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 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`));
@@ -22,22 +35,41 @@ async function main() {
   process.chdir(projectPath);
+  const baseFolder = config.framework.includes('vite') ? 'vite' : 'next';
-  createFolders(path.join(projectPath, 'public'), false);
-  createFolders(path.join(projectPath, 'src'), false);
-  createFolders(path.join(projectPath, 'src', 'styles'), false);
-  createFolders(path.join(projectPath, 'src', 'assets'), false);
+  const secondaryFolder = config.libraries.includes('@undp/data-viz') ? 'withDataViz' : 'withoutDataViz';
-  if(config.installRouter) {
-    createFolders(path.join(projectPath, 'src', 'routes'), false);
-    createFolders(path.join(projectPath, 'src', 'components'), false);
+  let tertiaryFolder = 'basic';
+  switch (config.framework) {
+    case 'vite-query':
+      tertiaryFolder = 'query';
+      break;
+    case 'vite-router':
+      tertiaryFolder = 'router';
+      break;
+    case 'vite-full':
+      tertiaryFolder = 'query+router';
+      break;
+    case 'next-auth':
+      tertiaryFolder = 'auth';
+      break;
+    default:
+      break;
   }
+  copyFolder(path.join(__dirname, `./templates/${baseFolder}/${secondaryFolder}/${tertiaryFolder}`), projectPath)
-  if(config.installRouter && config.installQuery) {
-    createFolders(path.join(projectPath, 'src', 'integration'), false);
+  if (config.framework.includes('vite')) {
+    fs.writeFileSync('vite.config.ts', generateViteConfig(config));
+    fs.writeFileSync('index.html', generateIndexHtml(config));
+    if (config.addStaticWebAppConfig) {
+      fs.writeFileSync('staticwebapp.config.json', generateStaticWebAppConfig());
+    }
   }
+  fs.writeFileSync('package.json', JSON.stringify(generatePackageJson(config), null, 2));
-  generateFiles(config);
+  console.log(chalk.green('  ✓ Project folder and files generated'));
   const { installNow } = await inquirer.prompt([
     {
@@ -54,14 +86,14 @@ async function main() {
       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)'));
+      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)'));
+    console.log(chalk.yellow('  ⚠️ Skipped git init (Git not installed or error occurred)'));
   }
   printSuccess(config, installNow);
 }

package/bin/promptUser.js CHANGED Viewed

@@ -12,55 +12,81 @@ const question = (query) =>
 export async function promptUser(name) {
   console.log(
-    chalk.bold.cyan("\n🚀 UNDP Frontend Starter Kit | Let's configure your application") +
-    chalk.gray('\n🔧 Powered by React, Vite, TypeScript, ESLint, Prettier, Tailwind, and React Compiler\n')
+    chalk.bold.cyan("\n🚀 UNDP Frontend Starter Kit | Let's configure your application")
   );
   console.log(chalk.gray('─'.repeat(60)) + '\n');
   const projectName = name ? name : (await question(chalk.yellow('📝 Enter project name: '))) || 'my-undp-react-app';
+  const { framework } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'framework',
+      message: chalk.yellow('📦 Select the framework you prefer to use:\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'
+        },
+      ],
+      default: 'vite-basic',
+    },
+  ]);
+  const libraryChoices = [
+    {
+      name: '@undp/data-viz — UNDP data visualization components',
+      value: '@undp/data-viz'
+    },
+    {
+      name: 'lucide-react — Beautiful open-source icon set for React',
+      value: 'lucide-react'
+    },
+    {
+      name: 'Peer dependencies — Install required framework dependencies',
+      value: 'peer'
+    },
+  ];
   const { libraries } = await inquirer.prompt([
     {
       type: 'checkbox',
       name: 'libraries',
       message: chalk.yellow('📦 Select the libraries you want to install:'),
-      choices: [
-        { name: '@undp/data-viz (for visualizations)', value: '@undp/data-viz' },
-        { name: 'lucide-react (for icons)', value: 'lucide-react' },
-        { name: '@tanstack/react-router (for routing)', value: '@tanstack/react-router' },
-        { name: '@tanstack/react-query (for state management and fetching data from api)', value: '@tanstack/react-query' },
-      ],
-      default: ['@undp/data-viz', 'lucide-react'], // optional default selection
+      choices: libraryChoices,
+      default: ['@undp/data-viz', 'lucide-react'],
     },
   ]);
-  const installLucide = libraries.includes('lucide-react');
-  const installDataViz = libraries.includes('@undp/data-viz');
-  const installRouter = libraries.includes('@tanstack/react-router');
-  const installQuery = libraries.includes('@tanstack/react-query');
-  let installDataVizPeerDeps = false;
-  if (installDataViz) {
-    const { peerDeps } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'peerDeps',
-        message: chalk.yellow('📦 Add peer dependencies for @undp/data-viz?'),
-        choices: ['Yes', 'No'],
-        default: 'Yes',
-      },
-    ]);
-    installDataVizPeerDeps = peerDeps === 'Yes'
-  }
   let addPostCSSScripts = false;
-  if(!installRouter) {
+  if(framework !== 'next-basic' && framework !== 'next-auth') {
     const { postCSS } = await inquirer.prompt([
       {
         type: 'list',
         name: 'postCSS',
         message: chalk.yellow(
-          '⚙️ Add PostCSS script to flatten layers, wrap all classes in `.undp-container`, and reorder media queries (recommended if embedding in another app)?'
+          '⚙️ Add PostCSS script to flatten layers, wrap all classes in `.undp-container` (recommended if embedding in another app)?'
         ),
         choices: ['Yes', 'No'],
         default: 'Yes',
@@ -69,7 +95,7 @@ export async function promptUser(name) {
     addPostCSSScripts = postCSS === 'Yes';
   }
-  const { staticWebApp } = await inquirer.prompt([
+  const { staticWebApp } = framework !== 'next-basic' && framework !== 'next-auth' ? await inquirer.prompt([
     {
       type: 'list',
       name: 'staticWebApp',
@@ -77,20 +103,17 @@ export async function promptUser(name) {
       choices: ['Yes', 'No'],
       default: 'No',
     },
-  ]);
+  ]) : { staticWebApp: 'No' };
-  // Convert string responses to booleans for convenience
   const addStaticWebAppConfig = staticWebApp === 'Yes';
   rl.close();
   return {
     projectName,
-    installLucide,
-    installDataViz,
-    installDataVizPeerDeps,
+    libraries,
     addStaticWebAppConfig,
     addPostCSSScripts,
-    installRouter,
-    installQuery
+    framework,
   };
 }