doo-boilerplate 0.2.6 → 0.2.7

package/package.json

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

package/templates/template-vite/_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/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-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/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>
   )