@undp/create-app 0.0.1

package/bin/generateTemplates/templates/router/routes/About.txt

@@ -0,0 +1,28 @@
+import { createRoute } from '@tanstack/react-router';
+import type { RootRoute } from '@tanstack/react-router';
+
+function About() {
+  return (
+    <div className='m-5'>
+      <div>
+        <img
+          src={undpLogo}
+          className='logo react mb-8'
+          alt='React logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <H3 className='text-center'>
+        This is an about page
+      </H3>
+    </div>
+  );
+}
+
+export default (parentRoute: RootRoute) =>
+  createRoute({
+    path: '/about',
+    component: About,
+    getParentRoute: () => parentRoute,
+  });

package/bin/generateTemplates/templates/router+query/App.txt

@@ -0,0 +1,30 @@
+import { H3 } from '@undp/design-system-react';
+
+import '@/styles/fonts.css';
+import '@/styles/style.css';
+import undpLogo from './assets/undp-logo-blue.svg';
+
+function App() {
+  return (
+    <div className='m-5'>
+      <div>
+        <img
+          src={undpLogo}
+          className='logo react mb-8'
+          alt='React logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <H3 className='text-center'>
+        This is template for building visualization and frontend project
+        maintained by UNDP&apos;s DAI Hub.
+        <br />
+        <br />
+        Contact us at data@undp.org if you have any feedback or questions.
+      </H3>
+    </div>
+  );
+}
+
+export default App;

package/bin/generateTemplates/templates/router+query/components/Footer.txt

@@ -0,0 +1,20 @@
+import {
+  Footer,
+  FooterLogoUnit,
+  FooterCopyrightUnit,
+} from '@undp/design-system-react/Footer';
+
+
+
+export default function Header() {
+  return (
+    <Footer>
+      <FooterLogoUnit>
+        subscribe to email
+      </FooterLogoUnit>
+      <FooterCopyrightUnit>
+        Footnote can be added here
+      </FooterCopyrightUnit>
+    </Footer>
+  )
+}

package/bin/generateTemplates/templates/router+query/components/Header.txt

@@ -0,0 +1,29 @@
+import {
+  Header,
+  HeaderLogoUnit,
+  HeaderMainNavUnit,
+  HeaderMenuUnit,
+} from '@undp/design-system-react/Header';
+import { Link } from '@tanstack/react-router';
+
+export default function Header() {
+  return (
+    <Header>
+      <HeaderLogoUnit
+      hyperlink="./"
+      siteName="Site name"
+      siteSubName="Sub-site name"
+      />
+      <HeaderMainNavUnit>
+        <HeaderMenuUnit>
+          <Link to='/'>
+            Home
+          </Link>
+          <Link to='/query-demo'>
+            Query Demo
+          </Link>
+        </HeaderMenuUnit>
+      </HeaderMainNavUnit>
+    </Header>
+  )
+}

package/bin/generateTemplates/templates/router+query/integration/tanstack-query.txt

@@ -0,0 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export function getContext() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 1000 * 60 * 60 * 24, // how long fetched data is considered “fresh” before it becomes “stale” 🡢 24 hrs
+        gcTime: 1000 * 60 * 60 * 24, // how long inactive (unused) query data stays in memory before being deleted 🡢 24 hrs
+      },
+    },
+  });
+  return {
+    queryClient,
+  }
+}
+
+export function Provider({
+  children,
+  queryClient,
+}: {
+  children: React.ReactNode
+  queryClient: QueryClient
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}

package/bin/generateTemplates/templates/router+query/main.txt

@@ -0,0 +1,69 @@
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+
+import Header from './components/Header';
+import Footer from './components/Footer';
+import * as TanStackQueryProvider from './integration/tanstack-query';
+
+import './styles/fonts.css';
+import './styles/style.css';
+
+import App from './App';
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Header />
+      <Outlet />
+      <Footer />
+    </>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: App,
+});
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  TanStackQueryDemo(rootRoute),
+]);
+
+const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
+const router = createRouter({
+  routeTree,
+  context: {
+    ...TanStackQueryProviderContext,
+  },
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('app');
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
+        <RouterProvider router={router} />
+      </TanStackQueryProvider.Provider>
+    </StrictMode>,
+  );
+}

package/bin/generateTemplates/templates/router+query/routes/queryDemo.txt

@@ -0,0 +1,56 @@
+import { createRoute } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import type { RootRoute } from '@tanstack/react-router';
+import { Spinner } from '@undp/design-system-react/Spinner';
+
+function useTodoData() {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+    initialData: [],
+  });
+}
+
+function TanStackQueryDemo() {
+  const { data, isLoading, isError } = useTodoData();
+
+  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+
+  if (isError)
+    return (
+      <div className='px-4 mx-auto'>
+        <div>Error</div>
+      </div>
+    );
+  return (
+    <div className='m-5'>
+      <div>
+        <img
+          src={undpLogo}
+          className='logo react mb-8'
+          alt='React logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <H3 className='text-center'>
+        Data loaded successfully
+        <br />
+        <br />
+        {data.length} elements in the query
+      </H3>
+    </div>
+  );
+}
+
+export default (parentRoute: RootRoute) =>
+  createRoute({
+    path: '/query-demo',
+    component: TanStackQueryDemo,
+    getParentRoute: () => parentRoute,
+  });

package/bin/index.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import path from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import { promptUser } from './promptUser.js';
+import { generateFiles } from './generateFiles.js';
+import { printSuccess, createFolders } from './utils/index.js';
+
+async function main() {
+  // Get user configuration
+  const args = process.argv.slice(2);
+  const projectName = args[0];
+  const config = await promptUser(projectName);
+
+  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`));
+
+  createFolders(projectPath, true);
+
+  process.chdir(projectPath);
+  
+  
+  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);
+
+  if(config.installRouter) {
+    createFolders(path.join(projectPath, 'src', 'routes'), false);
+    createFolders(path.join(projectPath, 'src', 'components'), false);
+  }
+
+  if(config.installRouter && config.installQuery) {
+    createFolders(path.join(projectPath, 'src', 'integration'), false);
+  }
+  
+  generateFiles(config);
+
+  const { installNow } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'installNow',
+      message: 'Would you like to install dependencies now?',
+      default: true,
+    },
+  ]);
+
+  console.log(chalk.bold.yellow('\n📦 Installing dependencies (this might take some time)...'));
+  if (installNow) execSync('npm install', { stdio: 'inherit' })
+  console.log(chalk.green('  ✓ All dependencies installed'));
+
+  printSuccess(config, installNow);
+}
+
+main().catch(console.error);

package/bin/promptUser.js

@@ -0,0 +1,96 @@
+import readline from 'readline';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const question = (query) =>
+  new Promise(resolve => rl.question(query, resolve));
+
+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')
+  );
+  console.log(chalk.gray('─'.repeat(60)) + '\n');
+
+  const projectName = name ? name : (await question(chalk.yellow('📝 Enter project name: '))) || 'my-undp-react-app';
+  
+  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
+    },
+  ]);
+  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) {
+    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)?'
+        ),
+        choices: ['Yes', 'No'],
+        default: 'Yes',
+      },
+    ]);
+    addPostCSSScripts = postCSS === 'Yes';
+  }
+
+  const { staticWebApp } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'staticWebApp',
+      message: chalk.yellow('⚙️ Add Azure Static Web App Config file?'),
+      choices: ['Yes', 'No'],
+      default: 'No',
+    },
+  ]);
+
+  // Convert string responses to booleans for convenience
+  const addStaticWebAppConfig = staticWebApp === 'Yes';
+
+  rl.close();
+  return {
+    projectName,
+    installLucide,
+    installDataViz,
+    installDataVizPeerDeps,
+    addStaticWebAppConfig,
+    addPostCSSScripts,
+    installRouter,
+    installQuery
+  };
+}

package/bin/utils/createFolders.js

@@ -0,0 +1,11 @@
+import fs from 'fs';
+import chalk from 'chalk';
+
+export function createFolders(dir, showError){
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  } else if(showError) {
+    console.error(chalk.red(`❌ Error: Folder "${config.projectName}" already exists.`));
+    throw new Error(`Project folder already exists at ${projectPath}`);
+  }
+}

package/bin/utils/index.js

@@ -0,0 +1,2 @@
+export { printSuccess } from './printSuccess.js';
+export { createFolders } from './createFolders.js';

package/bin/utils/printSuccess.js

@@ -0,0 +1,23 @@
+
+import chalk from 'chalk';
+
+export function printSuccess(config, installNow){
+  console.log(chalk.bold.green('\n✅ Project created successfully!\n'));
+  
+  console.log(chalk.cyan('📦 Added packages:'));
+  console.log(chalk.gray('  • React + TypeScript + Vite'));
+  console.log(chalk.gray('  • Tailwind CSS'));
+  console.log(chalk.gray('  • ESLint + Prettier'));
+  console.log(chalk.gray('  • @undp/design-system-react'));
+  if (config.installLucide) console.log(chalk.gray('  • lucide-react'));
+  if (config.installDataViz) console.log(chalk.gray('  • @undp/data-viz'));
+  if (config.installQuery) console.log(chalk.gray('  • @tanstack/react-query'));
+  if (config.installRouter) console.log(chalk.gray('  • @tanstack/react-router'));
+  
+  console.log(chalk.cyan('\n🚀 Next steps:'));
+  console.log(chalk.white(`  cd ${chalk.bold(config.projectName)}`));
+  if(!installNow) console.log(chalk.white(`  ${chalk.bold('npm install')}`));
+  console.log(chalk.white(`  ${chalk.bold('npm run dev')}`));
+  
+  console.log(chalk.dim('\nHappy coding! 🎉\n'));
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@undp/create-app",
+  "version": "0.0.1",
+  "description": "UNDP's project scaffolding tool",
+  "bin": {
+    "create-undp-app": "./bin/index.js"
+  },
+  "scripts": {
+    "dev": "node ./bin/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": ["bin", "dist", "templates"],
+  "keywords": [
+    "UNDP",
+    "scaffold",
+    "generator",
+    "cli"
+  ],
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "fs-extra": "^11.1.0",
+    "inquirer": "^8.2.7"
+  },
+  "author": "UNDP",
+  "license": "ISC",
+  "type": "module",
+  "devDependencies": {
+    "@types/node": "^24.10.0"
+  }
+}