doo-boilerplate 0.2.5 → 0.2.7

package/dist/index.js

@@ -112,7 +112,8 @@ var FILE_RENAMES = [
   ["_gitignore", ".gitignore"],
   ["_env.example", ".env.example"],
   ["_prettierrc", ".prettierrc"],
-  ["_prettierignore", ".prettierignore"]
+  ["_prettierignore", ".prettierignore"],
+  ["_package.json", "package.json"]
 ];
 async function scaffold(options, destDir) {
   const templateSymlink = path2.join(__dirname2, "..", "templates", "template-vite");

package/package.json

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

package/templates/template-vite/{package.json → _package.json}

@@ -58,7 +58,11 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "cmdk": "^1.1.1",
-    "recharts": "^2.15.0"
+    "recharts": "^2.15.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@dnd-kit/modifiers": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^19",

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

@@ -20,7 +20,7 @@ export function ErrorPage({ code, title, description, showBack = true }: ErrorPa
       <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 variant='outline' onClick={() => window.history.back()}>Go Back</Button>
         )}
         <Button asChild>
           <Link to='/dashboard'>Go to Dashboard</Link>

package/templates/template-vite/src/components/data-table/data-table-drag-handle.tsx

@@ -0,0 +1,21 @@
+import { GripVertical } from 'lucide-react'
+import { useSortable } from '@dnd-kit/sortable'
+
+interface DragHandleProps {
+  id: string
+}
+
+/** Drag handle icon for sortable column headers */
+export function ColumnDragHandle({ id }: DragHandleProps) {
+  const { attributes, listeners } = useSortable({ id })
+  return (
+    <button
+      {...attributes}
+      {...listeners}
+      className='cursor-grab opacity-40 hover:opacity-100 active:cursor-grabbing'
+      aria-label='Drag to reorder column'
+    >
+      <GripVertical className='h-4 w-4' />
+    </button>
+  )
+}

package/templates/template-vite/src/components/data-table/data-table-faceted-filter.tsx

@@ -35,7 +35,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   options,
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues()
-  const selectedValues = new Set(column?.getFilterValue() as string[])
+  const selectedValues = new Set((column?.getFilterValue() as string[] | undefined) ?? [])
 
   return (
     <Popover>

package/templates/template-vite/src/components/data-table/data-table-sortable-header.tsx

@@ -0,0 +1,35 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { type Header, flexRender } from '@tanstack/react-table'
+
+import { TableHead } from '@/components/ui/table'
+
+import { ColumnDragHandle } from './data-table-drag-handle'
+
+interface SortableHeaderProps<TData, TValue> {
+  header: Header<TData, TValue>
+}
+
+/** Table header cell with DnD sortable context for column reordering */
+export function SortableHeader<TData, TValue>({ header }: SortableHeaderProps<TData, TValue>) {
+  const { transform, transition, isDragging } = useSortable({ id: header.column.id })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative',
+  }
+
+  return (
+    <TableHead key={header.id} colSpan={header.colSpan} style={style}>
+      {header.isPlaceholder ? null : (
+        <div className='flex items-center gap-1'>
+          {header.column.getCanPin() !== false && <ColumnDragHandle id={header.column.id} />}
+          {flexRender(header.column.columnDef.header, header.getContext())}
+        </div>
+      )}
+    </TableHead>
+  )
+}

package/templates/template-vite/src/components/data-table/data-table.tsx

@@ -1,8 +1,24 @@
-import { flexRender, type ColumnDef, type Table as TanstackTable } from '@tanstack/react-table'
+import { useState } from 'react'
+
+import {
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers'
+import { SortableContext, arrayMove, horizontalListSortingStrategy } from '@dnd-kit/sortable'
+import { type ColumnDef, type Table as TanstackTable, flexRender } from '@tanstack/react-table'
 
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table'
+
 import { DataTablePagination } from './data-table-pagination'
+import { SortableHeader } from './data-table-sortable-header'
 
 interface DataTableProps<TData> {
   table: TanstackTable<TData>
@@ -11,53 +27,87 @@ interface DataTableProps<TData> {
 }
 
 export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<TData>) {
+  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
+    table.getAllLeafColumns().map((col) => col.id)
+  )
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      const newOrder = arrayMove(
+        columnOrder,
+        columnOrder.indexOf(String(active.id)),
+        columnOrder.indexOf(String(over.id))
+      )
+      setColumnOrder(newOrder)
+      table.setColumnOrder(newOrder)
+    }
+  }
+
   return (
-    <div className='space-y-4'>
-      <div className='rounded-md border'>
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id} colSpan={header.colSpan}>
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              Array.from({ length: 5 }).map((_, i) => (
-                <TableRow key={i}>
-                  {columns.map((_, j) => (
-                    <TableCell key={j}>
-                      <Skeleton className='h-4 w-full' />
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : table.getRowModel().rows.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  ))}
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+      modifiers={[restrictToHorizontalAxis]}
+    >
+      <div className='space-y-4'>
+        <div className='rounded-md border'>
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <SortableContext
+                  key={headerGroup.id}
+                  items={columnOrder}
+                  strategy={horizontalListSortingStrategy}
+                >
+                  <tr>
+                    {headerGroup.headers.map((header) => (
+                      <SortableHeader key={header.id} header={header} />
+                    ))}
+                  </tr>
+                </SortableContext>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {isLoading ? (
+                Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i}>
+                    {columns.map((_, j) => (
+                      <TableCell key={j}>
+                        <Skeleton className='h-4 w-full' />
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : table.getRowModel().rows.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length} className='h-24 text-center text-muted-foreground'>
+                    No results.
+                  </TableCell>
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className='h-24 text-center text-muted-foreground'>
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <DataTablePagination table={table} />
       </div>
-      <DataTablePagination table={table} />
-    </div>
+    </DndContext>
   )
 }

package/templates/template-vite/src/features/auth/components/sign-in-form.tsx

@@ -23,10 +23,24 @@ export function SignInForm() {
   return (
     <div className='space-y-6'>
       <div className='text-center'>
-        <h1 className='text-2xl font-bold tracking-tight'>Sign in</h1>
-        <p className='mt-1 text-sm text-muted-foreground'>
-          Enter your credentials to access your account · or try <strong>demo@gmail.com / demo</strong>
-        </p>
+        <h1 className='text-2xl font-bold tracking-tight'>Welcome back</h1>
+        <p className='mt-1 text-sm text-muted-foreground'>Sign in to your account to continue</p>
+      </div>
+
+      {/* Demo shortcut */}
+      <div className='rounded-md border border-dashed p-3 text-center'>
+        <p className='text-xs text-muted-foreground mb-2'>No account? Try the demo</p>
+        <Button
+          type='button'
+          variant='outline'
+          size='sm'
+          onClick={() => {
+            form.setValue('email', 'demo@gmail.com')
+            form.setValue('password', 'demo')
+          }}
+        >
+          Use demo account
+        </Button>
       </div>
 
       <Form {...form}>

package/templates/template-vite/src/features/dashboard/components/overview-chart.tsx

@@ -3,18 +3,18 @@ import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YA
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
 const data = [
-  { month: 'Jan', revenue: 18000, users: 980 },
-  { month: 'Feb', revenue: 22000, users: 1200 },
-  { month: 'Mar', revenue: 19500, users: 1050 },
-  { month: 'Apr', revenue: 28000, users: 1540 },
-  { month: 'May', revenue: 24000, users: 1320 },
-  { month: 'Jun', revenue: 32000, users: 1780 },
-  { month: 'Jul', revenue: 35000, users: 1960 },
-  { month: 'Aug', revenue: 29000, users: 1590 },
-  { month: 'Sep', revenue: 38000, users: 2100 },
-  { month: 'Oct', revenue: 42000, users: 2300 },
-  { month: 'Nov', revenue: 39000, users: 2150 },
-  { month: 'Dec', revenue: 45000, users: 2480 },
+  { month: 'Jan', revenue: 18000 },
+  { month: 'Feb', revenue: 22000 },
+  { month: 'Mar', revenue: 19500 },
+  { month: 'Apr', revenue: 28000 },
+  { month: 'May', revenue: 24000 },
+  { month: 'Jun', revenue: 32000 },
+  { month: 'Jul', revenue: 35000 },
+  { month: 'Aug', revenue: 29000 },
+  { month: 'Sep', revenue: 38000 },
+  { month: 'Oct', revenue: 42000 },
+  { month: 'Nov', revenue: 39000 },
+  { month: 'Dec', revenue: 45000 },
 ]
 
 export function OverviewChart() {

package/templates/template-vite/src/features/tasks/components/tasks-table-columns.tsx

@@ -38,7 +38,7 @@ export function getTaskColumns({ onEdit, onDelete }: ActionsCallbacks): ColumnDe
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={table.getIsAllPageRowsSelected()}
+          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
           onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
           aria-label='Select all'
         />

package/templates/template-vite/src/lib/api-client.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { AUTH_STORAGE_KEY } from '@/stores/auth-store'
 
 // Axios instance configured with base URL from Vite env
 const apiClient = axios.create({
@@ -10,7 +11,7 @@ const apiClient = axios.create({
 // Attach Bearer token from auth storage on each request
 apiClient.interceptors.request.use((config) => {
   try {
-    const stored = localStorage.getItem('auth-storage')
+    const stored = localStorage.getItem(AUTH_STORAGE_KEY)
     if (stored) {
       const { state } = JSON.parse(stored)
       if (state?.accessToken) {
@@ -28,7 +29,7 @@ apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401) {
-      localStorage.removeItem('auth-storage')
+      localStorage.removeItem(AUTH_STORAGE_KEY)
       window.location.href = '/sign-in'
     }
     return Promise.reject(error)

package/templates/template-vite/src/routes/(auth)/sign-in.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
 
 import { SignInForm } from '@/features/auth/components/sign-in-form'
 import { useAuthStore } from '@/stores/auth-store'
+import { siteConfig } from '@/config/site'
 
 export const Route = createFileRoute('/(auth)/sign-in')({
   beforeLoad: () => {
@@ -15,9 +16,24 @@ export const Route = createFileRoute('/(auth)/sign-in')({
 
 function SignInPage() {
   return (
-    <div className='flex min-h-screen items-center justify-center bg-background p-4'>
-      <div className='w-full max-w-sm'>
-        <SignInForm />
+    <div className='grid min-h-screen lg:grid-cols-2'>
+      {/* Left: branding panel (hidden on mobile) */}
+      <div className='hidden lg:flex flex-col items-start justify-between bg-muted p-10'>
+        <div className='flex items-center gap-2 text-lg font-semibold'>
+          <div className='h-8 w-8 rounded-md bg-primary' />
+          {siteConfig.name}
+        </div>
+        <blockquote className='space-y-2'>
+          <p className='text-lg'>"This boilerplate saved us weeks of setup time. Everything just works."</p>
+          <footer className='text-sm text-muted-foreground'>— A Happy Developer</footer>
+        </blockquote>
+      </div>
+
+      {/* Right: form panel */}
+      <div className='flex items-center justify-center p-8'>
+        <div className='w-full max-w-sm'>
+          <SignInForm />
+        </div>
       </div>
     </div>
   )

package/templates/template-vite/src/stores/auth-store.ts

@@ -1,3 +1,6 @@
+/** Shared storage key used by auth store and api-client interceptor */
+export const AUTH_STORAGE_KEY = 'auth-storage'
+
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { jwtDecode } from 'jwt-decode'
@@ -51,6 +54,6 @@ export const useAuthStore = create<AuthState>()(
       hasRole: (role) => get().user?.roles.includes(role) ?? false,
       hasPermission: (permission) => get().user?.permissions.includes(permission) ?? false,
     }),
-    { name: 'auth-storage' }
+    { name: AUTH_STORAGE_KEY }
   )
 )