@undp/create-app 0.2.23 → 0.4.0

package/bin/templates/next/auth/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/next/auth/tsconfig.json

@@ -1,34 +1,34 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

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

@@ -32,7 +32,8 @@ The page will reload if you make edits. You will also see any lint errors in the
 - `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 `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/next/basic/app/about/page.tsx

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

package/bin/templates/next/basic/app/layout.tsx

@@ -1,32 +1,32 @@
-import type { Metadata } from 'next';
-import { ReactNode } from 'react';
-
-import HeaderEl from '@/components/Header';
-import FooterEl from '@/components/Footer';
-
-import './globals.css';
-import '@undp/design-system-react/style.css';
-import '@undp/data-viz/style.css';
-
-export const metadata: Metadata = {
-  title: 'My Next + UNDP app',
-  description: 'Generated by create undp app',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: 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>
-  );
-}
+import type { Metadata } from 'next';
+import { ReactNode } from 'react';
+
+import HeaderEl from '@/components/Header';
+import FooterEl from '@/components/Footer';
+
+import './globals.css';
+import '@undp/design-system-react/style.css';
+import '@undp/data-viz/style.css';
+
+export const metadata: Metadata = {
+  title: 'My Next + UNDP app',
+  description: 'Generated by create undp app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: 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>
+  );
+}

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

@@ -1,75 +1,75 @@
-'use client';
-
-import { P } from '@undp/design-system-react/Typography';
-import { Button } from '@undp/design-system-react/Button';
-import Image from 'next/image';
-
-import { useCounterActions, useCounter } from '@/stores/counter';
-
-export default function Home() {
-  const count = useCounter();
-  const { increment, decrement } = useCounterActions();
-  return (
-    <>
-      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
-        <Image
-          className='dark:invert'
-          src='/imgs/next.svg'
-          alt='Next.js logo'
-          width={100}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Tailwind_CSS_Logo.svg'
-          alt='Tailwind logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/Zustand-logo.svg'
-          alt='Zustand logo'
-          width={40}
-          height={20}
-          priority
-        />
-        <P marginBottom='none'>&</P>
-        <Image
-          className='dark:invert'
-          src='/imgs/undp-logo-blue.svg'
-          alt='UNDP logo'
-          width={40}
-          height={20}
-          priority
-        />
-      </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'>
-        <Button
-          variant='tertiary'
-          onClick={() => {
-            increment();
-          }}
-        >
-          Increase counter
-        </Button>
-        <Button
-          variant='tertiary'
-          onClick={() => {
-            decrement();
-          }}
-        >
-          Decrease counter
-        </Button>
-      </div>
-    </>
-  );
-}
+'use client';
+
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import Image from 'next/image';
+
+import { useCounterActions, useCounter } from '@/stores/counter';
+
+export default function Home() {
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();
+  return (
+    <>
+      <div className='mx-auto my-8 flex items-center justify-center gap-4'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </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 justify-center gap-4'>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            increment();
+          }}
+        >
+          Increase counter
+        </Button>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            decrement();
+          }}
+        >
+          Decrease counter
+        </Button>
+      </div>
+    </>
+  );
+}

package/bin/templates/next/basic/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"
+			}
+		}
+	}
+}

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

@@ -1,7 +1,7 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/bin/templates/next/basic/postcss.config.mjs

@@ -1,7 +1,7 @@
-const config = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};
-
-export default config;
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;