create-tigra 1.1.0 → 2.0.1

package/template/client/src/app/error.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type React from 'react';
+import { AlertCircle } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}): React.ReactElement {
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
+      <AlertCircle className="mb-4 h-12 w-12 text-destructive" />
+      <h2 className="mb-2 text-2xl font-bold">Something went wrong</h2>
+      <p className="mb-4 text-muted-foreground">
+        {process.env.NODE_ENV === 'development'
+          ? error.message
+          : 'An unexpected error occurred. Please try again.'}
+      </p>
+      <Button onClick={reset}>Try again</Button>
+    </div>
+  );
+}

package/template/client/src/app/globals.css

@@ -0,0 +1,145 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.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);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+: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.45 0.2 260);
+  --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.45 0.2 260);
+  --success: oklch(0.52 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.18 75);
+  --warning-foreground: oklch(0.2 0 0);
+  --info: oklch(0.55 0.15 240);
+  --info-foreground: oklch(1 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.6 0.2 260);
+  --primary-foreground: oklch(0.145 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.6 0.2 260);
+  --success: oklch(0.6 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.8 0.18 75);
+  --warning-foreground: oklch(0.2 0 0);
+  --info: oklch(0.65 0.15 240);
+  --info-foreground: oklch(1 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;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}

package/template/client/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import type React from 'react';
+import { Geist, Geist_Mono } from 'next/font/google';
+
+import { Providers } from './providers';
+import { APP_NAME } from '@/lib/constants/app.constants';
+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: APP_NAME,
+  description: 'A full-stack application built with Next.js and Fastify',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>): React.ReactElement {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/client/src/app/loading.tsx

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+import { LoadingSpinner } from '@/components/common/LoadingSpinner';
+
+export default function Loading(): React.ReactElement {
+  return (
+    <div className="flex min-h-dvh items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  );
+}

package/template/client/src/app/not-found.tsx

@@ -0,0 +1,23 @@
+import type React from 'react';
+
+import Link from 'next/link';
+
+import { FileQuestion } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { ROUTES } from '@/lib/constants/routes';
+
+export default function NotFound(): React.ReactElement {
+  return (
+    <div className="flex min-h-dvh flex-col items-center justify-center p-8 text-center">
+      <FileQuestion className="mb-4 h-16 w-16 text-muted-foreground" />
+      <h1 className="mb-2 text-3xl font-bold">Page not found</h1>
+      <p className="mb-6 text-muted-foreground">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Button asChild>
+        <Link href={ROUTES.HOME}>Go home</Link>
+      </Button>
+    </div>
+  );
+}

package/template/client/src/app/page.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import type React from 'react';
+import { LogOut } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAppSelector } from '@/store/hooks';
+import { useAuth } from '@/features/auth/hooks/useAuth';
+import { APP_NAME } from '@/lib/constants/app.constants';
+
+export default function WelcomePage(): React.ReactElement {
+  const { user } = useAppSelector((state) => state.auth);
+  const { logout, isLoggingOut } = useAuth();
+
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <header className="flex items-center justify-between px-6 py-4">
+        <span className="text-lg font-semibold tracking-tight text-foreground">
+          {APP_NAME}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={logout}
+          disabled={isLoggingOut}
+          className="text-muted-foreground transition-colors duration-150 hover:text-foreground"
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          Sign out
+        </Button>
+      </header>
+
+      <main className="flex flex-1 items-center justify-center">
+        {user ? (
+          <h1 className="text-3xl font-light tracking-tight text-foreground">
+            Welcome, {user.firstName}
+          </h1>
+        ) : (
+          <Skeleton className="h-9 w-64" />
+        )}
+      </main>
+    </div>
+  );
+}

package/template/client/src/app/providers.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type React from 'react';
+import { useState } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Provider as ReduxProvider } from 'react-redux';
+import { ThemeProvider } from 'next-themes';
+import { Toaster } from 'sonner';
+
+import { store } from '@/store';
+import { AuthInitializer } from '@/features/auth/components/AuthInitializer';
+
+export function Providers({ children }: { children: React.ReactNode }): React.ReactElement {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 60 * 1000,
+            gcTime: 10 * 60 * 1000,
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <ReduxProvider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <AuthInitializer>
+            {children}
+          </AuthInitializer>
+          <Toaster position="top-right" richColors />
+        </ThemeProvider>
+        {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
+      </QueryClientProvider>
+    </ReduxProvider>
+  );
+}

package/template/client/src/components/common/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import type React from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  isDestructive?: boolean;
+}
+
+export const ConfirmDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  isDestructive = false,
+}: ConfirmDialogProps): React.ReactElement => (
+  <AlertDialog open={open} onOpenChange={onOpenChange}>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{title}</AlertDialogTitle>
+        <AlertDialogDescription>{description}</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          onClick={onConfirm}
+          className={
+            isDestructive
+              ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              : ''
+          }
+        >
+          {confirmLabel}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);

package/template/client/src/components/common/EmptyState.tsx

@@ -0,0 +1,31 @@
+import type React from 'react';
+
+import Link from 'next/link';
+import { FileQuestion } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+interface EmptyStateProps {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  actionHref?: string;
+}
+
+export const EmptyState = ({
+  title,
+  description,
+  actionLabel,
+  actionHref,
+}: EmptyStateProps): React.ReactElement => (
+  <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
+    <FileQuestion className="mb-4 h-16 w-16 text-muted-foreground" />
+    <h3 className="mb-2 text-xl font-semibold">{title}</h3>
+    <p className="mb-4 text-muted-foreground">{description}</p>
+    {actionLabel && actionHref && (
+      <Button asChild>
+        <Link href={actionHref}>{actionLabel}</Link>
+      </Button>
+    )}
+  </div>
+);

package/template/client/src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+type SpinnerSize = 'sm' | 'md' | 'lg';
+
+const sizeClasses: Record<SpinnerSize, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-6 w-6',
+  lg: 'h-8 w-8',
+};
+
+interface LoadingSpinnerProps {
+  size?: SpinnerSize;
+  className?: string;
+}
+
+export const LoadingSpinner = ({
+  size = 'md',
+  className,
+}: LoadingSpinnerProps): React.ReactElement => {
+  return (
+    <Loader2
+      role="status"
+      className={cn('motion-safe:animate-spin text-muted-foreground', sizeClasses[size], className)}
+      aria-label="Loading"
+    />
+  );
+};

package/template/client/src/components/common/Pagination.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+}
+
+export const Pagination = ({ page, totalPages }: PaginationProps): React.ReactElement => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const createPageUrl = useCallback(
+    (pageNumber: number): string => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('page', pageNumber.toString());
+      return `${pathname}?${params.toString()}`;
+    },
+    [pathname, searchParams]
+  );
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => router.push(createPageUrl(page - 1))}
+        disabled={page <= 1}
+        aria-label="Previous page"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      <span className="text-sm tabular-nums text-muted-foreground">
+        Page {page} of {totalPages}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => router.push(createPageUrl(page + 1))}
+        disabled={page >= totalPages}
+        aria-label="Next page"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};

package/template/client/src/components/layout/Footer.tsx

@@ -0,0 +1,17 @@
+import type React from 'react';
+
+import { APP_NAME } from '@/lib/constants/app.constants';
+
+export const Footer = (): React.ReactElement => {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-border/50 bg-background">
+      <div className="container mx-auto flex items-center justify-center px-4 py-6 md:px-6 lg:px-8">
+        <p className="text-sm text-muted-foreground">
+          &copy; {year} {APP_NAME}. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};