fix(table): resolve lint and syntax errors, enforce prop order and forwardRef usage

Author: davelinke

apps/web/vibes/soul/examples/primitives/table/index.tsx

@@ -41,6 +41,19 @@ const orders = [
   },
 ];
 
+function getBadgeVariant(status: string) {
+  switch (status) {
+    case 'Delivered':
+      return 'success';
+    case 'Shipped':
+      return 'info';
+    case 'Processing':
+      return 'warning';
+    default:
+      return 'primary';
+  }
+}
+
 export default function Preview() {
   return (
     <div className="bg-background mx-auto max-w-4xl px-6 py-8">
@@ -70,19 +83,7 @@ export default function Preview() {
                 <TableCell className="font-medium">{order.id}</TableCell>
                 <TableCell>{order.date}</TableCell>
                 <TableCell>
-                  <Badge
-                    variant={
-                      order.status === 'Delivered'
-                        ? 'success'
-                        : order.status === 'Shipped'
-                          ? 'info'
-                          : order.status === 'Processing'
-                            ? 'warning'
-                            : 'primary'
-                    }
-                  >
-                    {order.status}
-                  </Badge>
+                  <Badge variant={getBadgeVariant(order.status)}>{order.status}</Badge>
                 </TableCell>
                 <TableCell className="text-right">{order.items}</TableCell>
                 <TableCell className="text-right font-medium">{order.total}</TableCell>

apps/web/vibes/soul/primitives/table/index.tsx

@@ -27,12 +27,12 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(({ className, ...p
   return (
     <div className="relative overflow-auto">
       <table
-        ref={ref}
         className={clsx(
           'w-full caption-bottom border-collapse border-spacing-0 font-(family-name:--table-font-family,var(--font-family-body)) text-sm',
           className,
         )}
         {...props}
+        ref={ref}
       />
     </div>
   );
@@ -47,12 +47,12 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
   ({ className, ...props }, ref) => {
     return (
       <thead
-        ref={ref}
         className={clsx(
           'bg-(--table-header-background,var(--contrast-50)) [&_tr]:border-b [&_tr]:border-(--table-border,var(--contrast-200))',
           className,
         )}
         {...props}
+        ref={ref}
       />
     );
   },
@@ -65,7 +65,7 @@ export type TableBodyProps = ComponentPropsWithRef<'tbody'> & {
 
 export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
   ({ className, ...props }, ref) => {
-    return <tbody ref={ref} className={clsx('[&_tr:last-child]:border-0', className)} {...props} />;
+    return <tbody className={clsx('[&_tr:last-child]:border-0', className)} {...props} ref={ref} />;
   },
 );
 TableBody.displayName = 'TableBody';
@@ -78,12 +78,12 @@ export const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>
   ({ className, ...props }, ref) => {
     return (
       <tfoot
-        ref={ref}
         className={clsx(
           'border-t border-(--table-border,var(--contrast-200)) bg-(--table-header-background,var(--contrast-50)) font-medium [&>tr]:last:border-b-0',
           className,
         )}
         {...props}
+        ref={ref}
       />
     );
   },
@@ -98,12 +98,12 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
   ({ className, ...props }, ref) => {
     return (
       <tr
-        ref={ref}
         className={clsx(
           'border-b border-(--table-border,var(--contrast-200)) bg-(--table-row-background,var(--background)) text-(--table-row-text,var(--foreground)) transition-colors hover:bg-(--table-row-background-hover,var(--contrast-50)) data-[state=selected]:bg-(--table-row-background-hover,var(--contrast-50))',
           className,
         )}
         {...props}
+        ref={ref}
       />
     );
   },
@@ -118,12 +118,12 @@ export const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
   ({ className, ...props }, ref) => {
     return (
       <th
-        ref={ref}
         className={clsx(
           'h-12 px-(--table-cell-padding,0.75rem) text-left align-middle font-medium text-(--table-header-text,var(--foreground)) [&:has([role=checkbox])]:pr-0',
           className,
         )}
         {...props}
+        ref={ref}
       />
     );
   },
@@ -138,12 +138,12 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
   ({ className, ...props }, ref) => {
     return (
       <td
-        ref={ref}
         className={clsx(
           'p-(--table-cell-padding,0.75rem) align-middle text-(--table-row-text,var(--foreground)) [&:has([role=checkbox])]:pr-0',
           className,
         )}
         {...props}
+        ref={ref}
       />
     );
   },
@@ -158,9 +158,9 @@ export const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProp
   ({ className, ...props }, ref) => {
     return (
       <caption
-        ref={ref}
         className={clsx('mt-4 text-sm text-(--table-row-text,var(--foreground))', className)}
         {...props}
+        ref={ref}
       />
     );
   },