@undp/create-app 0.2.1 → 0.2.3

package/bin/templates/vite/router/src/App.tsx

@@ -0,0 +1,73 @@
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+
+import { useCounterActions, useCounter } from './stores/counter';
+
+export function App() {
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <img
+          src='./imgs/Vitejs-logo.svg'
+          alt='vite logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='./imgs/Tailwind_CSS_Logo.svg'
+          alt='tailwind logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='./imgs/Tanstack-logo.png'
+          alt='tanstack logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='./imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='./imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </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>
+    </>
+  );
+}
+
+export default App;

package/bin/templates/vite/{withDataViz/router → router}/src/main.tsx

@@ -11,7 +11,7 @@ import {
 import HeaderEl from './components/Header';
 import FooterEl from './components/Footer';
 import App from './App';
-import createTanStackQueryAboutRoute from './routes/about';
+import createAboutRoute from './routes/about';
 
 import './styles/fonts.css';
 import './styles/style.css';
@@ -38,7 +38,7 @@ const indexRoute = createRoute({
 
 const routeTree = rootRoute.addChildren([
   indexRoute,
-  createTanStackQueryAboutRoute(rootRoute),
+  createAboutRoute(rootRoute),
 ]);
 
 const router = createRouter({

package/bin/templates/vite/{withoutDataViz/router/src/App.tsx → router/src/routes/about.tsx}

@@ -1,6 +1,6 @@
 import { createRoute } from '@tanstack/react-router';
 import type { AnyRootRoute } from '@tanstack/react-router';
-import { H6, P } from '@undp/design-system-react/Typography';
+import { P } from '@undp/design-system-react/Typography';
 
 export function About() {
   return (
@@ -21,12 +21,19 @@ export function About() {
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/logo-color-600.png'
+          src='./imgs/Tanstack-logo.png'
           alt='tanstack logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
         <P marginBottom='none'>&</P>
+        <img
+          src='./imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
         <img
           src='./imgs/undp-logo-blue.svg'
           alt='UNDP logo'
@@ -34,13 +41,13 @@ export function About() {
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
       </div>
-      <H6 marginBottom='xl' className='text-center'>
-        This is the about page.
-      </H6>
+      <P marginBottom='xl' className='text-center'>
+        To edit this page, edit the about.tsx file in the routes folder.
+      </P>
     </>
   );
 }
-export default function createTanStackQueryAboutRoute(
+export default function createAboutRoute(
   parentRoute: AnyRootRoute,
 ) {
   return createRoute({
@@ -48,4 +55,4 @@ export default function createTanStackQueryAboutRoute(
     component: About,
     getParentRoute: () => parentRoute,
   });
-}
+}

package/bin/templates/vite/router/src/stores/counter.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+type Actions = {
+  increment: (d?: number) => void;
+  decrement: (d?: number) => void;
+};
+
+type Store = {
+  count: number;
+  actions: Actions;
+};
+
+export const useCounterStore = create<Store>(set => ({
+  count: 0,
+  actions: {
+    increment: (d = 1) => set(state => ({ count: state.count + d })),
+    decrement: (d = 1) => set(state => ({ count: state.count - d })),
+  },
+}));
+
+export const useCounter = () => useCounterStore(s => s.count);
+
+export const useCounterActions = () => useCounterStore(s => s.actions);

package/bin/templates/vite/{withoutDataViz/router → router}/src/styles/style.css

@@ -1,4 +1,3 @@
-
 @import '@undp/design-system-react/style.css';
 @import 'tailwindcss';
 @config '../../tailwind.config.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/create-app",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "UNDP's project scaffolding tool",
   "bin": {
     "create-undp-app": "./bin/index.js"

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

@@ -1,108 +0,0 @@
-This is a Next.js project powered by Tailwind CSS, the UNDP Design System, and the UNDP Data Visualization Library, bootstrapped with [@undp/create-app](https://www.npmjs.com/package/@undp/create-app). 
-
-It includes:
-* Next 16.x with React compiler
-* UNDP Design System
-* UNDP Data Visualization library
-* Authentication with [Better Auth](https://www.better-auth.com/)
-* TailwindCSS
-* Code linting and formatting via ESLint and Prettier
-
-## 🧩 Installation
-
-This project uses `npm`. 
-
-For installation you will need to install `node` and `npm`, if you don't already have it. `node` and `npm` can be installed from [here](https://nodejs.org/en/download/).
-
-To install the project, simply run `npm install` in the project folder in the terminal on Mac or Command Prompt on Windows.
-
-## 🚀 Local Development
-
-To start the project locally:
-
-```bash
-npm run dev
-```
-
-This is run the app in development mode. Open [http://localhost:3000/](http://localhost:3000/) to view it in the browser.
-
-The page will reload if you make edits. You will also see any lint errors in the console.
-
-## 📜 Available Scripts
-
-- `npm run dev`: Executes `next dev` and start the local server for local deployment.
-- `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 `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
-
-## 🧰 Tooling Setup
-
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
-
-If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-
-Your editor should now show linting errors and automatically fix issues where possible.
-
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
-
-## 🎨 Styling
-
-This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
-
-## 🛡️ Authentication
-
-Authentication in this project is powered by [Better Auth](https://www.better-auth.com/), which provides a simple and flexible API for adding new providers.
-
-**Add a new provider**
-Add a new provider in `lib/auth.ts`. For example to add Google authenticator:
-
-```ts
-import { betterAuth } from 'better-auth';
-import { nextCookies } from 'better-auth/next-js';
-
-export const auth = betterAuth({
-  plugins: [nextCookies()],
-  secret: process.env.BETTER_AUTH_SECRET,
-  baseURL: process.env.BETTER_AUTH_URL,
-  session: {
-    strategy: 'jwt',
-    expiresIn: 60 * 60 * 24 * 7,
-    cookieCache: {
-      enabled: true,
-      maxAge: 60 * 60 * 24 * 7,
-    },
-  },
-  emailAndPassword: {
-    enabled: false,
-  },
-  socialProviders: {
-    goggle: {
-      clientId: process.env.GITHUB_CLIENT_ID as string,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
-    },
-  },
-});
-```
-
-**Add env variable**
-Add client id and secret (and tenant id) in the `.env.local` file. These id and secret are used in `lib/auth.ts`.
-
-**Add a sign in button**
-Example of sign in button
-
-```ts
-import { signIn } from '@/lib/auth-client';
-
-<button onClick={() => signIn.social({ provider: 'google', callbackURL: '/user' })}>
-  Sign in with Google
-</button>
-```
-
-More info: [Better Auth docs](https://www.better-auth.com/docs/introduction)
-
-## 📬 Contact us
-
-For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { H6, P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        This is the about page.
-      </H6>
-    </>
-  );
-}

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { H6, P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        To get started, edit the page.tsx file.
-      </H6>
-    </>
-  );
-}

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

@@ -1,86 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { Spinner } from '@undp/design-system-react/Spinner';
-import { H6, 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',
-    });
-  };
-
-  if (!session)
-    return (
-      <>
-        <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-          <Image
-            className='dark:invert'
-            src='/next.svg'
-            alt='Next.js logo'
-            width={100}
-            height={20}
-            priority
-          />
-          <P marginBottom='none'>&</P>
-          <Image
-            className='dark:invert'
-            src='/undp-logo-blue.svg'
-            alt='UNDP logo'
-            width={40}
-            height={20}
-            priority
-          />
-        </div>
-        <H6 marginBottom='xl' className='text-center'>
-          Please sign in to view this page
-        </H6>
-        <div className='flex justify-center'>
-          <Button variant='tertiary' onClick={handleSignIn}>
-            Sign In
-          </Button>
-        </div>
-      </>
-    );
-
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        Welcome, {session.user.name || session.user.email}!
-      </H6>
-    </>
-  );
-}

package/bin/templates/next/withDataViz/basic/README.md

@@ -1,56 +0,0 @@
-This is a Next.js project powered by Tailwind CSS, the UNDP Design System, and the UNDP Data Visualization Library, bootstrapped with [@undp/create-app](https://www.npmjs.com/package/@undp/create-app). 
-
-It includes:
-* Next 16.x with React compiler
-* UNDP Design System
-* UNDP Data Visualization library
-* TailwindCSS
-* Code linting and formatting via ESLint and Prettier
-
-## 🧩 Installation
-
-This project uses `npm`. 
-
-For installation you will need to install `node` and `npm`, if you don't already have it. `node` and `npm` can be installed from [here](https://nodejs.org/en/download/).
-
-To install the project, simply run `npm install` in the project folder in the terminal on Mac or Command Prompt on Windows.
-
-## 🚀 Local Development
-
-To start the project locally:
-
-```bash
-npm run dev
-```
-
-This is run the app in development mode. Open [http://localhost:3000/](http://localhost:3000/) to view it in the browser.
-
-The page will reload if you make edits. You will also see any lint errors in the console.
-
-## 📜 Available Scripts
-
-- `npm run dev`: Executes `next dev` and start the local server for local deployment.
-- `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 `npx eslint --fix && npx prettier . --write` and resolve all the linting and prettier errors.
-
-## 🧰 Tooling Setup
-
-This project uses ESLint integrated with Prettier to automatically format and lint your code.
-
-If you’re using Visual Studio Code, install:
-* [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-* [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-
-Your editor should now show linting errors and automatically fix issues where possible.
-
-More info: [ESLint Integrations](http://eslint.org/docs/user-guide/integrations)
-
-## 🎨 Styling
-
-This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
-
-## 📬 Contact us
-
-For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/next/withDataViz/basic/app/about/page.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { H6, P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        This is the about page.
-      </H6>
-    </>
-  );
-}

package/bin/templates/next/withDataViz/basic/app/page.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { H6, P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        To get started, edit the page.tsx file.
-      </H6>
-    </>
-  );
-}

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { H6, P } from '@undp/design-system-react/Typography';
-import Image from 'next/image';
-
-export default function Home() {
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </div>
-      <H6 marginBottom='xl' className='text-center'>
-        This is the about page.
-      </H6>
-    </>
-  );
-}

package/bin/templates/next/withoutDataViz/auth/app/api/auth/[...all]/route.ts

@@ -1,5 +0,0 @@
-import { toNextJsHandler } from 'better-auth/next-js';
-
-import { auth } from '@/lib/auth';
-
-export const { GET, POST } = toNextJsHandler(auth.handler);

package/bin/templates/next/withoutDataViz/auth/app/globals.css

@@ -1,3 +0,0 @@
-@import "tailwindcss";
-
-@config "../tailwind.config.js";

package/bin/templates/next/withoutDataViz/auth/app/layout.tsx

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