@undp/create-app 0.2.23 → 0.4.0

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

@@ -10,8 +10,8 @@ function App() {
   const count = useCounter();
   const { increment, decrement } = useCounterActions();
   return (
-    <div className=' min-h-screen flex flex-col justify-center'>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+    <div className='flex min-h-screen flex-col justify-center'>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
         <img
           src='./imgs/Vitejs-logo.svg'
           alt='vite logo'
@@ -44,7 +44,7 @@ function App() {
         To get started, edit the App.tsx file.{' '}
         <span className='font-bold'>Count: {count}</span>
       </P>
-      <div className='flex gap-4 justify-center'>
+      <div className='flex justify-center gap-4'>
         <Button
           variant='tertiary'
           onClick={() => {

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

@@ -1,23 +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);
+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/basic/src/styles/fonts.css

@@ -1,213 +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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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');
+	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-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-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-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-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-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-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-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-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-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');
+	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/basic/src/styles/style.css

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

package/bin/templates/vite/basic/tsconfig.json

@@ -24,6 +24,6 @@
     }
   },
   "files": [],
-  "include": ["eslint.config.mjs", "src", "tailwind.config.js"],
+  "include": ["src", "tailwind.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/bin/templates/vite/basic/vite.config.ts

@@ -2,7 +2,6 @@ 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';
@@ -10,12 +9,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
-    }),
-    eslint(),
+    react(),
     visualizer({ filename: 'stats.html', open: true }),
     viteStaticCopy({
       targets: [{ src: 'staticwebapp.config.json', dest: '' }],

package/bin/templates/vite/query/README.md

@@ -33,7 +33,8 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `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 `biome check . --write` and resolve all the linting and prettier errors.
+- `npm run check`: Executes `biome check .` and lists all the linting and prettier errors.
+- `npm run check:fix`: Executes `biome check --write .` and resolve all the linting and prettier errors.
 
 ## 🧰 Tooling Setup
 

package/bin/templates/vite/query/biome.json

@@ -1,67 +1,70 @@
-{
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
-	"vcs": {
-		"enabled": true,
-		"clientKind": "git",
-		"useIgnoreFile": true
-	},
-	"files": {
-		"ignoreUnknown": true,
-		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "space",
-		"indentWidth": 2,
-		"lineWidth": 100,
-		"bracketSameLine": false
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"suspicious": {
-				"noExplicitAny": "warn",
-				"noUnassignedVariables": "warn",
-				"noUnusedExpressions": "warn",
-				"noConsole": {
-					"level": "warn",
-					"options": {
-						"allow": ["assert", "error", "info", "warn"]
-					}
-				},
-				"noArrayIndexKey": "error"
-			},
-			"a11y": {
-				"useAltText": "error",
-				"useValidAnchor": "error"
-			},
-			"style": {
-				"useConst": "error",
-				"useSelfClosingElements": "error",
-				"useConsistentCurlyBraces": "error",
-				"useImportType": "warn"
-			},
-			"correctness": {
-				"noUnusedVariables": "error",
-				"noUndeclaredVariables": "error"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "single",
-			"jsxQuoteStyle": "single",
-			"semicolons": "always",
-			"trailingCommas": "all"
-		}
-	},
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	}
-}
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": true,
+		"includes": ["**/*.{js,jsx,ts,tsx,css}"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineWidth": 100,
+		"bracketSameLine": false
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn",
+				"noUnassignedVariables": "warn",
+				"noUnusedExpressions": "warn",
+				"noConsole": {
+					"level": "warn",
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
+				},
+				"noArrayIndexKey": "error"
+			},
+			"a11y": {
+				"useAltText": "error",
+				"useValidAnchor": "error"
+			},
+			"style": {
+				"useConst": "error",
+				"useSelfClosingElements": "error",
+				"useConsistentCurlyBraces": "error",
+				"useImportType": "warn"
+			},
+			"correctness": {
+				"noUnusedVariables": "error",
+				"noUndeclaredVariables": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"semicolons": "always",
+			"trailingCommas": "all"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}