@undp/create-app 0.1.1 → 0.2.0

package/bin/templates/vite/withoutDataViz/query+router/src/routes/queryDemo.tsx

@@ -0,0 +1,73 @@
+import { createRoute } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import type { AnyRootRoute } from '@tanstack/react-router';
+import { Spinner } from '@undp/design-system-react/Spinner';
+import { H6, P } from '@undp/design-system-react/Typography';
+
+function useTodoData() {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+  });
+}
+
+export function TanStackQueryDemo() {
+  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'>
+        <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/logo-color-600.png'
+          alt='tanstack 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>
+      <H6 marginBottom='xl' className='text-center'>
+        Data loaded successfully
+        <br />
+        <br />
+        {data?.length} elements in the query
+      </H6>
+    </>
+  );
+}
+export default function createTanStackQueryDemoRoute(
+  parentRoute: AnyRootRoute,
+) {
+  return createRoute({
+    path: '/query-demo',
+    component: TanStackQueryDemo,
+    getParentRoute: () => parentRoute,
+  });
+}

package/bin/templates/vite/withoutDataViz/query+router/src/styles/fonts.css

@@ -0,0 +1,213 @@
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 100;
+  src: url('./fonts/proximanova-thin-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 100;
+  src: url('./fonts/proximanova-thinit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 200;
+  src: url('./fonts/proximanova-light-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 200 300;
+  src: url('./fonts/proximanova-lightit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/proximanova-regular-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./fonts/proximanova-regularit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/proximanova-medium-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 500;
+  src: url('./fonts/proximanova-mediumit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 600;
+  src: url('./fonts/proximanova-semibold-webfont-2.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 600;
+  src: url('./fonts/proximanova-semiboldit-webfont-2.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/proximanova-bold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 700;
+  src: url('./fonts/proximanova-boldit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 800;
+  src: url('./fonts/proximanova-extrabold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 800;
+  src: url('./fonts/proximanova-extraboldit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 900;
+  src: url('./fonts/proximanova-black-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 900;
+  src: url('./fonts/proximanova-blackit-webfont.woff2') format('woff2');
+}
+
+/* SohneBreit */
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('./fonts/soehne-breit-web-dreiviertelfett.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: italic;
+  font-weight: 100 700;
+  src: url('./fonts/soehne-breit-web-dreiviertelfett-kursiv.woff2')
+    format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: normal;
+  font-weight: 800 900;
+  src: url('./fonts/soehne-breit-web-fett.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: italic;
+  font-weight: 800 900;
+  src: url('./fonts/soehne-breit-web-fett-kursiv.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-20CF;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 100 300;
+  src: url('./fonts/UNBangla-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 100 300;
+  src: url('./fonts/UNBangla-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/UNBangla-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./fonts/UNBangla-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 500 900;
+  src: url('./fonts/UNBangla-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 500 900;
+  src: url('./fonts/UNBangla-BoldItalic.woff2') format('woff2');
+}

package/bin/templates/vite/withoutDataViz/query+router/src/styles/style.css

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

package/bin/templates/vite/withoutDataViz/query+router/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/bin/templates/vite/withoutDataViz/query+router/tailwind.config.js

@@ -0,0 +1,7 @@
+import * as Preset from '@undp/design-system-react/tailwind.config';
+
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  presets: [Preset],
+};

package/bin/templates/vite/withoutDataViz/query+router/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "allowImportingTsExtensions": true,
+    "declaration": true,
+    "declarationMap": true,
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "include": ["eslint.config.mjs", "src", "tailwind.config.js"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/bin/templates/vite/withoutDataViz/query+router/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/bin/templates/vite/withoutDataViz/query+router/vite.config.ts

@@ -0,0 +1,75 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import eslint from '@nabla/vite-plugin-eslint';
+import { visualizer } from 'rollup-plugin-visualizer';
+import postcssNested from 'postcss-nested';
+import tailwindcss from '@tailwindcss/postcss';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    eslint(),
+    visualizer({ filename: 'stats.html', open: true }),
+    viteStaticCopy({
+      targets: [{ src: 'staticwebapp.config.json', dest: '' }],
+    }),
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postcssNested(),
+        tailwindcss(),
+        {
+          postcssPlugin: 'move-media-queries-last', // If you want to reorder media queries to the end
+          OnceExit(root) {
+            const mediaQueries = [];
+
+            // Collect all media queries
+            root.walkAtRules('media', mediaRule => {
+              mediaQueries.push(mediaRule.clone());
+              mediaRule.remove();
+            });
+
+            // Append them at the end
+            mediaQueries.forEach(mediaQuery => {
+              root.append(mediaQuery);
+            });
+          },
+        },
+      ],
+    },
+  },
+  build: {
+    manifest: true,
+    cssCodeSplit: false,
+    rollupOptions: {
+      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';
+        },
+        chunkFileNames: '[name]-[hash].js',
+        assetFileNames: '[name].[ext]',
+        entryFileNames: '[name].js',
+      },
+      treeshake: true,
+    },
+  },
+  server: {
+    cors: {
+      origin: '*',
+      methods: ['GET'],
+      preflightContinue: false,
+      optionsSuccessStatus: 204,
+    },
+  },
+  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+});

package/bin/templates/vite/withoutDataViz/router/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "jsxSingleQuote": true,
+  "endOfLine": "auto",
+  "bracketSpacing": true
+}

package/bin/templates/vite/withoutDataViz/router/README.md

@@ -0,0 +1,106 @@
+This is a React + TypeScript + Vite project powered by Tailwind CSS, and the UNDP Design System, bootstrapped with [@undp/create-app](https://www.npmjs.com/package/@undp/create-app). 
+
+It includes:
+* React 19.x with React compiler
+* UNDP Design System
+* Routing with [TanStack Router](https://tanstack.com/router)
+* 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:5173/](http://localhost:5173/) 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 `vite` and start the local server for local deployment.
+- `npm run build`: Executes `tsc && vite build` and builds the app for production and deployment.
+- `npm run preview`: Executes `vite preview` and serves the static build output (from vite build) locally.
+- `npm run clean`: Executes `rimraf node_modules && rimraf dist && 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.
+
+## 🧭 Routing
+
+Routing is powered by [TanStack Router](https://tanstack.com/router) and uses a code-based configuration (in the `./src/main.tsx`).
+
+### Adding A Route
+
+Example: add an `/about` route:
+
+```tsx
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: () => <h1>About</h1>,
+});
+```
+
+Then, register it in your `routeTree`:
+
+```tsx
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
+```
+
+You can define your component in another file:
+
+```tsx
+import About from "./components/About.tsx";
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/about",
+  component: About,
+});
+```
+
+More info: [Code Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing).
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+Use the `Link` component for client-side navigation:
+
+```tsx
+import { Link } from "@tanstack/react-router";
+
+<Link to="/about">About</Link>
+```
+
+More info: [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
+
+## 📬 Contact us
+
+For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/vite/withoutDataViz/router/eslint.config.mjs

@@ -0,0 +1,97 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import { defineConfig } from 'eslint/config';
+import prettierConfig from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+
+export default defineConfig([
+  {
+    ignores: [
+      'node_modules/**',
+      'build/**',
+      'public/**',
+      'dist/**',
+      'storybook-static/**',
+      'dist-ssr/**',
+      'coverage/**',
+      '**/*.test.js',
+      '**/__snapshots__/**',
+    ],
+  },
+  js.configs.recommended,
+  reactHooks.configs.flat.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx,ts}'],
+    plugins: {
+      react: pluginReact,
+      'react-hooks': reactHooks,
+      import: importPlugin,
+      'jsx-a11y': jsxA11y,
+      prettier: prettierPlugin,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      // React rules
+      'react/self-closing-comp': ['error', { component: true, html: true }],
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+      'react/jsx-uses-vars': 'warn',
+      'react/jsx-no-undef': 'error',
+      'react/jsx-curly-brace-presence': 'error',
+      'react/prop-types': 'off',
+      'react/require-default-props': 0,
+      'react/jsx-filename-extension': 0,
+      'react/no-array-index-key': 0,
+      'react/jsx-props-no-spreading': 0,
+
+      // TypeScript rules
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+
+      // Import rules
+      'import/order': [
+        'warn',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            'parent',
+            'sibling',
+            'index',
+          ],
+          'newlines-between': 'always',
+        },
+      ],
+      'import/no-unresolved': 0,
+      'import/no-extraneous-dependencies': ['warn', { devDependencies: true }],
+      'import/extensions': 0,
+      'import/prefer-default-export': 0,
+
+      // A11y rules
+      'jsx-a11y/alt-text': 'warn',
+      'jsx-a11y/anchor-is-valid': 'warn',
+
+      // General rules
+      'prefer-const': 'error',
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-debugger': 'warn',
+      'no-nested-ternary': 0,
+      'prettier/prettier': 'error',
+    },
+  },
+  prettierConfig,
+]);

package/bin/templates/vite/withoutDataViz/router/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/undp-logo-blue.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Vite + Tailwind + UNDP App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/bin/templates/vite/withoutDataViz/router/public/imgs/Tailwind_CSS_Logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>

package/bin/templates/vite/withoutDataViz/router/public/imgs/Vitejs-logo.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>