@manusiakemos/laravel-tanstack-react 0.1.0 → 0.1.1

package/src/components/ui/table.tsx

@@ -0,0 +1,120 @@
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from 'react'
+
+import { cn } from '../../lib/cn'
+
+/**
+ * Shadcn-style Table primitives. These mirror the components produced by
+ * `shadcn add table` so users get identical visual output to a hand-rolled
+ * shadcn table in their app.
+ */
+
+export const Table = forwardRef<
+  HTMLTableElement,
+  HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = 'Table'
+
+export const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+export const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+))
+TableBody.displayName = 'TableBody'
+
+export const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+export const TableRow = forwardRef<
+  HTMLTableRowElement,
+  HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+export const TableHead = forwardRef<
+  HTMLTableCellElement,
+  ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+export const TableCell = forwardRef<
+  HTMLTableCellElement,
+  TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+export const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+TableCaption.displayName = 'TableCaption'

package/src/hooks/useDataTable.ts

@@ -61,7 +61,7 @@ export interface UseDataTableResult<TData> {
  * const { table, loading } = useDataTable<User>({
  *   endpoint: '/datatable/users',
  *   columns: [
- *     { accessorKey: 'name', header: 'Nama' },
+ *     { accessorKey: 'name', header: 'Name' },
  *     { accessorKey: 'email', header: 'Email' },
  *   ],
  * })

package/src/index.ts

@@ -5,6 +5,65 @@ export type {
   UseDataTableResult,
 } from './hooks/useDataTable'
 
+// Ready-made, shadcn-styled components — customizable via props
+export { DataTable } from './components/DataTable'
+export type {
+  DataTableProps,
+  DataTableClassNames,
+} from './components/DataTable'
+
+export { DataTableSearch } from './components/DataTableSearch'
+export type {
+  DataTableSearchProps,
+  DataTableSearchRenderProps,
+  DataTableSearchDebounce,
+} from './components/DataTableSearch'
+
+export { DataTablePagination } from './components/DataTablePagination'
+export type {
+  DataTablePaginationProps,
+  DataTablePaginationLabels,
+  DataTablePaginationClassNames,
+  DataTablePaginationRenderProps,
+} from './components/DataTablePagination'
+
+export { DataTableFilter } from './components/DataTableFilter'
+export type {
+  DataTableFilterProps,
+  DataTableFilterOption,
+  DataTableFilterRenderProps,
+  DataTableFilterValue,
+} from './components/DataTableFilter'
+
+// Predefined layouts that compose the components above
+export { DataTableSplitLayout } from './components/layouts/DataTableSplitLayout'
+export type {
+  DataTableSplitLayoutProps,
+  DataTableSplitLayoutClassNames,
+} from './components/layouts/DataTableSplitLayout'
+
+// Shadcn-style UI primitives — re-exported so consumers can use them
+// directly (or swap them for their own).
+export { Button, buttonVariants } from './components/ui/button'
+export type { ButtonProps } from './components/ui/button'
+export { Input } from './components/ui/input'
+export type { InputProps } from './components/ui/input'
+export { Select } from './components/ui/select'
+export type { SelectProps } from './components/ui/select'
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from './components/ui/table'
+
+// Utilities
+export { cn } from './lib/cn'
+
 // Types
 export {
   DataTableError,
@@ -16,8 +75,7 @@ export type {
   DataTableResponse,
 } from './types'
 
-// Lower-level utilities, exported for advanced users who want to build
-// their own hooks or use the adapter standalone.
+// Lower-level utilities, exported for advanced users.
 export { buildQueryString } from './adapters/buildQueryString'
 export type { BuildQueryStringInput } from './adapters/buildQueryString'
 export { defaultFetcher } from './utils/defaultFetcher'

package/src/lib/cn.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Tailwind-aware className combinator (shadcn convention).
+ * Resolves conflicting Tailwind utilities so later inputs win.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}