doo-boilerplate 0.2.7 → 0.2.8

package/package.json

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

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

@@ -1,13 +1,18 @@
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+import type { DraggableAttributes } from '@dnd-kit/core'
 import { GripVertical } from 'lucide-react'
-import { useSortable } from '@dnd-kit/sortable'
 
 interface DragHandleProps {
-  id: string
+  attributes: DraggableAttributes
+  listeners: SyntheticListenerMap | undefined
 }
 
-/** Drag handle icon for sortable column headers */
-export function ColumnDragHandle({ id }: DragHandleProps) {
-  const { attributes, listeners } = useSortable({ id })
+/**
+ * Drag handle icon for sortable column headers.
+ * Receives dnd-kit listeners/attributes from the parent useSortable call
+ * to avoid calling useSortable twice with the same id.
+ */
+export function ColumnDragHandle({ attributes, listeners }: DragHandleProps) {
   return (
     <button
       {...attributes}

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

@@ -10,23 +10,29 @@ interface SortableHeaderProps<TData, TValue> {
   header: Header<TData, TValue>
 }
 
-/** Table header cell with DnD sortable context for column reordering */
+/**
+ * Table header cell with DnD sortable support.
+ * useSortable is called once here; listeners are passed to ColumnDragHandle
+ * to avoid duplicate useSortable calls with the same id.
+ */
 export function SortableHeader<TData, TValue>({ header }: SortableHeaderProps<TData, TValue>) {
-  const { transform, transition, isDragging } = useSortable({ id: header.column.id })
+  const { attributes, listeners, 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',
+    zIndex: isDragging ? 1 : 0,
   }
 
   return (
-    <TableHead key={header.id} colSpan={header.colSpan} style={style}>
+    <TableHead colSpan={header.colSpan} style={style}>
       {header.isPlaceholder ? null : (
         <div className='flex items-center gap-1'>
-          {header.column.getCanPin() !== false && <ColumnDragHandle id={header.column.id} />}
+          <ColumnDragHandle attributes={attributes} listeners={listeners} />
           {flexRender(header.column.columnDef.header, header.getContext())}
         </div>
       )}

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

@@ -58,7 +58,7 @@ export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<T
       modifiers={[restrictToHorizontalAxis]}
     >
       <div className='space-y-4'>
-        <div className='rounded-md border'>
+        <div className='rounded-md border overflow-hidden'>
           <Table>
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (

package/templates/template-vite/src/components/layout/page-layout.tsx

@@ -25,7 +25,7 @@ export function PageLayout({ title, description, actions, children }: PageLayout
 
       <Separator className='my-4' />
 
-      <div className='flex-1 overflow-auto px-6 pb-6'>{children}</div>
+      <div className='flex-1 min-h-0 overflow-y-auto px-6 pb-6'>{children}</div>
     </div>
   )
 }

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

@@ -18,7 +18,7 @@ function SignInPage() {
   return (
     <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='hidden lg:flex flex-col items-start justify-between bg-sidebar 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}
@@ -30,7 +30,7 @@ function SignInPage() {
       </div>
 
       {/* Right: form panel */}
-      <div className='flex items-center justify-center p-8'>
+      <div className='flex items-center justify-center bg-background p-8'>
         <div className='w-full max-w-sm'>
           <SignInForm />
         </div>