feat: initialize repository, setup Next.js, shadcn-ui, hono, ...etc

src/app/api/[[...route]]/route.ts

@@ -0,0 +1,11 @@
+import { handle } from "hono/vercel";
+import { honoApp } from "../../../server/hono/app";
+import { routes } from "../../../server/hono/route";
+
+routes(honoApp);
+
+export const GET = handle(honoApp);
+export const POST = handle(honoApp);
+export const PUT = handle(honoApp);
+export const PATCH = handle(honoApp);
+export const DELETE = handle(honoApp);

src/app/components/RootErrorBoundary.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import type { FC, PropsWithChildren } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export const RootErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ErrorBoundary
+      FallbackComponent={({ error }) => (
+        <div>
+          <h1>Error</h1>
+          <p>{error.message}</p>
+        </div>
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};

src/app/components/RootErrorFallback.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+import type { FallbackProps } from "react-error-boundary";
+
+export const RootErrorFallback: FC<FallbackProps> = ({ error }) => {
+  return (
+    <div>
+      <h1>Error</h1>
+      <p>Something went wrong</p>
+      <p>{error.message}</p>
+    </div>
+  );
+};

src/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { QueryClientProviderWrapper } from "../lib/api/QueryClientProviderWrapper";
+import { RootErrorBoundary } from "./components/RootErrorBoundary";
+
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <RootErrorBoundary>
+          <QueryClientProviderWrapper>{children}</QueryClientProviderWrapper>
+        </RootErrorBoundary>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>Empty App</h1>
+    </div>
+  );
+}

src/lib/$path.ts

@@ -0,0 +1,38 @@
+const buildSuffix = (url?: {
+  query?: Record<string, string | number | boolean | Array<string | number | boolean>>,
+  hash?: string
+}) => {
+  const query = url?.query;
+  const hash = url?.hash;
+  if (!query && !hash) return '';
+  const search = (() => {
+    if (!query) return '';
+
+    const params = new URLSearchParams();
+
+    Object.entries(query).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item) =>
+          params.append(key, String(item))
+        );
+      } else {
+        params.set(key, String(value));
+      }
+    });
+
+    return `?${params.toString()}`;
+  })();
+  return `${search}${hash ? `#${hash}` : ''}`;
+};
+
+export const pagesPath = {
+  $url: (url?: { hash?: string }) => ({ pathname: '/' as const, hash: url?.hash, path: `/${buildSuffix(url)}` })
+};
+
+export type PagesPath = typeof pagesPath;
+
+export const staticPath = {
+  _gitkeep: '/.gitkeep'
+} as const;
+
+export type StaticPath = typeof staticPath;

src/lib/api/QueryClientProviderWrapper.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { FC, PropsWithChildren } from "react";
+import { queryClient } from "./queryClient";
+
+export const QueryClientProviderWrapper: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};

src/lib/api/client.ts

@@ -0,0 +1,4 @@
+import { hc } from "hono/client";
+import type { RouteType } from "../../server/hono/route";
+
+export const honoClient = hc<RouteType>("/");

src/lib/api/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: true,
+      refetchInterval: 1000 * 60 * 5,
+      retry: false,
+    },
+  },
+});

src/lib/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));
+}

src/server/hono/app.ts

@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+
+// biome-ignore lint/complexity/noBannedTypes: add after
+export type HonoContext = {};
+
+export const honoApp = new Hono<HonoContext>().basePath("/api");
+
+export type HonoAppType = typeof honoApp;

src/server/hono/route.ts

@@ -0,0 +1,20 @@
+import { zValidator } from "@hono/zod-validator";
+import { z } from "zod";
+import type { HonoAppType } from "./app";
+
+const helloBodySchema = z.object({
+  name: z.string(),
+});
+
+export const routes = (app: HonoAppType) => {
+  return (
+    app
+      // routes
+      .get("/hello", zValidator("json", helloBodySchema), (c) => {
+        const { name } = c.req.valid("json");
+        return c.json({ message: `Hello ${name}` });
+      })
+  );
+};
+
+export type RouteType = ReturnType<typeof routes>;

src/utils/collection.ts

@@ -0,0 +1,4 @@
+export const typedIncludes = <const T>(
+  array: readonly T[],
+  value: unknown,
+): value is T => (array as unknown[]).includes(value);