feat: update examples (#1409)

docs/package.json

@@ -25,7 +25,7 @@
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.7",
     "eslint-plugin-tailwindcss": "3.17.4",
-    "postcss": "8.4.43",
+    "postcss": "8.4.44",
     "postcss-nesting": "13.0.0",
     "prettier": "3.3.3",
     "rimraf": "6.0.1",

examples/nextjs-app/package.json

@@ -25,28 +25,32 @@
     "@httpx/memo-intl": "workspace:^",
     "@httpx/plain-object": "workspace:^",
     "@httpx/treeu": "workspace:^",
-    "axios": "1.7.5",
+    "axios": "1.7.7",
+    "clsx": "2.1.1",
     "ky": "1.7.1",
-    "next": "14.2.6",
+    "next": "14.2.7",
     "pino": "9.3.2",
+    "primeicons": "7.0.0",
+    "primereact": "10.8.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "superjson": "2.2.1",
+    "tailwind-merge": "2.5.2",
     "zod": "3.23.8"
   },
   "devDependencies": {
     "@belgattitude/eslint-config-bases": "5.17.0",
-    "@types/node": "22.5.0",
-    "@types/react": "18.3.4",
+    "@types/node": "22.5.2",
+    "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
     "@vitest/coverage-v8": "2.0.5",
     "@vitest/ui": "2.0.5",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
-    "eslint-config-next": "14.2.6",
-    "happy-dom": "15.0.0",
-    "postcss": "8.4.41",
+    "eslint-config-next": "14.2.7",
+    "happy-dom": "15.7.3",
+    "postcss": "8.4.44",
     "rimraf": "6.0.1",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",

examples/nextjs-app/src/app/api/health/route.ts

@@ -0,0 +1,14 @@
+import { type NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(_req: NextRequest) {
+  return NextResponse.json(
+    {
+      time: new Date().toISOString(),
+    },
+    {
+      status: 200,
+    }
+  );
+}

examples/nextjs-app/src/app/api/status/[statusCode]/route.ts

@@ -0,0 +1,98 @@
+import {
+  createHttpException,
+  HttpBadRequest,
+  isHttpException,
+} from '@httpx/exception';
+import { toJson } from '@httpx/exception/serializer';
+import { type NextRequest, NextResponse } from 'next/server';
+import { z, type ZodSchema } from 'zod';
+
+export const dynamic = 'force-dynamic';
+
+const zodGetSchema = z.object({
+  params: z.object({
+    statusCode: z
+      .string()
+      .transform((s) => Number.parseInt(s, 10))
+      .pipe(z.number().min(100).max(599)),
+  }),
+});
+
+type NextRequestOrParams = {
+  params: Record<string, unknown>;
+  req: NextRequest;
+};
+
+const validateNextRequest = <
+  T extends ZodSchema,
+  TReq extends NextRequestOrParams,
+>(
+  schema: T,
+  reqWithParams: TReq
+): z.infer<T> => {
+  const parsed = schema.safeParse(reqWithParams);
+  console.log('parsed', parsed);
+  if (!parsed.success) {
+    const error = parsed.error as unknown as z.ZodError<T>;
+    const msg = error.errors
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      .map((err) => `${err.path} - ${err.code}`)
+      .join(', ');
+    throw new HttpBadRequest({
+      message: `Bad request, invalid parameter (${msg})`,
+      url: reqWithParams.req.nextUrl.toString(),
+    });
+  }
+  return parsed.data as unknown as T;
+};
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { statusCode: string } }
+) {
+  // Throw HttpBadRequest if didn't pass schema requirements
+  try {
+    const safeReq = validateNextRequest(zodGetSchema, { req, params });
+    const { statusCode } = safeReq.params;
+
+    const response = {
+      statusCode: statusCode,
+      url: req.url,
+      method: 'GET',
+    };
+
+    return NextResponse.json(
+      {
+        ...response,
+        _serialized: toJson(
+          createHttpException(statusCode, {
+            url: req.url,
+            method: 'GET',
+          })
+        ),
+      },
+      {
+        status: statusCode,
+      }
+    );
+  } catch (e) {
+    if (isHttpException(e)) {
+      const httpException = createHttpException(e.statusCode, {
+        url: req.url,
+        method: 'GET',
+      });
+      return NextResponse.json(httpException, {
+        status: e.statusCode,
+      });
+    }
+  }
+
+  return NextResponse.json(
+    {
+      time: new Date().toISOString(),
+    },
+    {
+      status: 200,
+    }
+  );
+}

examples/nextjs-app/src/app/layout.tsx

@@ -0,0 +1,24 @@
+import '../styles/globals.css';
+
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/nextjs-app/src/app/page.tsx

@@ -0,0 +1,113 @@
+import Image from 'next/image';
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">app/page.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className="mb-3 text-2xl font-semibold">
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className="m-0 max-w-[30ch] text-sm opacity-50">
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className="mb-3 text-2xl font-semibold">
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className="m-0 max-w-[30ch] text-sm opacity-50">
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className="mb-3 text-2xl font-semibold">
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className="m-0 max-w-[30ch] text-sm opacity-50">
+            Explore starter templates for Next.js.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className="mb-3 text-2xl font-semibold">
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  );
+}

examples/nextjs-app/src/app/treeu/layout.tsx

@@ -0,0 +1,13 @@
+import 'primereact/resources/themes/soho-light/theme.css';
+
+import type { ReactNode } from 'react';
+
+import { PrimeReactTailwindProvider } from '../../providers/PrimeReactTailwindProvider';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return <PrimeReactTailwindProvider>{children}</PrimeReactTailwindProvider>;
+}

examples/nextjs-app/src/app/treeu/page.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { CityMultiSelect } from '../../components/prime/CityMultiSelect';
+
+export default function TreeUDemoPage() {
+  return (
+    <div className={'p-10'}>
+      <div className={'flex gap-5 max-w-3'}>
+        <CityMultiSelect className={'w-[200px]'} />
+      </div>
+    </div>
+  );
+}

examples/nextjs-app/src/components/fonts/FontInter.tsx

@@ -0,0 +1,14 @@
+import { Inter } from 'next/font/google';
+import type { FC, PropsWithChildren } from 'react';
+
+export const fontInter = Inter({
+  subsets: ['latin'],
+  weight: 'variable',
+  variable: '--font-family-inter',
+});
+
+export const FontLoaderInter: FC<PropsWithChildren> = (props) => (
+  <div className={`${fontInter.className} ${fontInter.variable}`}>
+    {props.children}
+  </div>
+);

examples/nextjs-app/src/components/prime/CityMultiSelect.tsx

@@ -0,0 +1,39 @@
+import { MultiSelect } from 'primereact/multiselect';
+import { type FC, useState } from 'react';
+
+import { cn } from '../utils';
+
+type City = {
+  name: string;
+  code: string;
+};
+const cities: City[] = [
+  { name: 'New York', code: 'NY' },
+  { name: 'Rome', code: 'RM' },
+  { name: 'London', code: 'LDN' },
+  { name: 'Istanbul', code: 'IST' },
+  { name: 'Paris', code: 'PRS' },
+];
+
+type Props = {
+  className?: string | undefined;
+};
+export const CityMultiSelect: FC<Props> = (props) => {
+  const { className } = props;
+  const [selectedCities, setSelectedCities] = useState<City[]>();
+
+  return (
+    <div className={cn('', className)}>
+      <MultiSelect
+        value={selectedCities}
+        onChange={(e) => setSelectedCities(e.value as City[])}
+        options={cities}
+        optionLabel="name"
+        display="chip"
+        placeholder="Select Cities"
+        maxSelectedLabels={3}
+        className="w-full md:w-20rem"
+      />
+    </div>
+  );
+};

examples/nextjs-app/src/components/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}