doo-boilerplate 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-vite/src/components/common/error-boundary.tsx

@@ -1,4 +1,5 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react'
+import { Link } from '@tanstack/react-router'
 
 import { Button } from '@/components/ui/button'
 
@@ -39,9 +40,14 @@ export class ErrorBoundary extends Component<Props, State> {
           <p className='max-w-md text-sm text-muted-foreground'>
             {this.state.error?.message ?? 'An unexpected error occurred.'}
           </p>
-          <Button variant='outline' onClick={this.handleReset}>
-            Try again
-          </Button>
+          <div className='flex gap-3'>
+            <Button variant='outline' onClick={this.handleReset}>
+              Try again
+            </Button>
+            <Button asChild>
+              <Link to='/500'>View error details</Link>
+            </Button>
+          </div>
         </div>
       )
     }

package/templates/template-vite/src/components/common/error-page.tsx

@@ -0,0 +1,31 @@
+import { Link } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+interface ErrorPageProps {
+  code: number
+  title: string
+  description: string
+  /** Show 'Go Back' button using history.back() */
+  showBack?: boolean
+}
+
+/**
+ * Reusable full-screen error page for HTTP-style error statuses.
+ */
+export function ErrorPage({ code, title, description, showBack = true }: ErrorPageProps) {
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center gap-2 text-center px-4'>
+      <p className='text-8xl font-bold text-muted-foreground/30'>{code}</p>
+      <h1 className='text-2xl font-semibold'>{title}</h1>
+      <p className='max-w-md text-muted-foreground'>{description}</p>
+      <div className='mt-4 flex gap-3'>
+        {showBack && (
+          <Button variant='outline' onClick={() => history.back()}>Go Back</Button>
+        )}
+        <Button asChild>
+          <Link to='/dashboard'>Go to Dashboard</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

package/templates/template-vite/src/routes/(errors)/401.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/401')({
+  component: () => (
+    <ErrorPage
+      code={401}
+      title='Unauthorized'
+      description='You need to be logged in to access this page.'
+    />
+  ),
+})

package/templates/template-vite/src/routes/(errors)/403.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/403')({
+  component: () => (
+    <ErrorPage
+      code={403}
+      title='Forbidden'
+      description="You don't have permission to access this resource."
+    />
+  ),
+})

package/templates/template-vite/src/routes/(errors)/404.tsx

@@ -1,19 +1,12 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-
-import { Button } from '@/components/ui/button'
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
 
 export const Route = createFileRoute('/(errors)/404')({
-  component: NotFoundPage,
+  component: () => (
+    <ErrorPage
+      code={404}
+      title='Page Not Found'
+      description="The page you're looking for doesn't exist or has been moved."
+    />
+  ),
 })
-
-function NotFoundPage() {
-  return (
-    <div className='flex min-h-screen flex-col items-center justify-center gap-4'>
-      <h1 className='text-6xl font-bold text-muted-foreground'>404</h1>
-      <p className='text-lg text-muted-foreground'>Page not found</p>
-      <Button asChild>
-        <Link to='/dashboard'>Go to Dashboard</Link>
-      </Button>
-    </div>
-  )
-}

package/templates/template-vite/src/routes/(errors)/500.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ErrorPage } from '@/components/common/error-page'
+
+export const Route = createFileRoute('/(errors)/500')({
+  component: () => (
+    <ErrorPage
+      code={500}
+      title='Internal Server Error'
+      description='Something went wrong on our end. Please try again later.'
+      showBack={false}
+    />
+  ),
+})

package/templates/template-vite/src/routes/__root.tsx

@@ -1,27 +1,21 @@
-import { Link, createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
-import { Button } from '@/components/ui/button'
+import { ErrorPage } from '@/components/common/error-page'
 import type { QueryClient } from '@tanstack/react-query'
 
 interface RouterContext {
   queryClient: QueryClient
 }
 
-function NotFound() {
-  return (
-    <div className='flex min-h-screen flex-col items-center justify-center gap-4'>
-      <h1 className='text-6xl font-bold text-muted-foreground'>404</h1>
-      <p className='text-lg text-muted-foreground'>Page not found</p>
-      <Button asChild>
-        <Link to='/dashboard'>Go to Dashboard</Link>
-      </Button>
-    </div>
-  )
-}
-
 export const Route = createRootRouteWithContext<RouterContext>()({
-  notFoundComponent: NotFound,
+  notFoundComponent: () => (
+    <ErrorPage
+      code={404}
+      title='Page Not Found'
+      description="The page you're looking for doesn't exist."
+    />
+  ),
   component: () => (
     <>
       <Outlet />