@spaceinvoices/react-ui 0.4.3 → 0.4.4

package/src/components/items/item-list-table/item-list-header.tsx

@@ -2,29 +2,16 @@ import { TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 
-import { SortableHeader } from "../../table/sortable-header";
+type ItemListHeaderProps = ComponentTranslationProps;
 
-type ItemListHeaderProps = {
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
-} & ComponentTranslationProps;
-
-export default function ItemListHeader({ orderBy, onSort, ...i18nProps }: ItemListHeaderProps) {
+export default function ItemListHeader({ ...i18nProps }: ItemListHeaderProps) {
   const t = createTranslation(i18nProps);
 
   return (
     <TableHeader>
       <TableRow>
-        <TableHead>
-          <SortableHeader field="name" currentOrder={orderBy} onSort={onSort}>
-            {t("Name")}
-          </SortableHeader>
-        </TableHead>
-        <TableHead>
-          <SortableHeader field="description" currentOrder={orderBy} onSort={onSort}>
-            {t("Description")}
-          </SortableHeader>
-        </TableHead>
+        <TableHead>{t("Name")}</TableHead>
+        <TableHead>{t("Description")}</TableHead>
         <TableHead className="text-right">{t("Price")}</TableHead>
         <TableHead className="w-[42px] text-right" />
       </TableRow>

package/src/components/items/item-list-table/item-list-table.tsx

@@ -63,8 +63,8 @@ export default function ItemListTable({
   return (
     <DataTable
       columns={[
-        { id: "name", header: t("Name"), sortable: true },
-        { id: "description", header: t("Description"), sortable: true },
+        { id: "name", header: t("Name") },
+        { id: "description", header: t("Description") },
         { id: "unit", header: t("Unit") },
         { id: "price", header: t("Price"), align: "right" },
         { id: "actions", header: "", align: "right" },
@@ -72,7 +72,7 @@ export default function ItemListTable({
       renderRow={(item) => (
         <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} onView={onView} t={t} />
       )}
-      renderHeader={(headerProps) => <ItemListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
+      renderHeader={() => <ItemListHeader t={t} />}
       queryParams={queryParams}
       resourceName="item"
       cacheKey={ITEMS_CACHE_KEY}

package/src/components/items/item-list-table/locales/de.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Keine Artikel gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  "Clear all": "Alles zurücksetzen",
 };

package/src/components/items/item-list-table/locales/es.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "No se encontraron artículos",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  "Clear all": "Borrar todo",
 };

package/src/components/items/item-list-table/locales/fr.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Aucun article trouvé",
   "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  "Clear all": "Tout effacer",
 };

package/src/components/items/item-list-table/locales/hr.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Nisu pronađeni artikli",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
   "Clear search": "Očisti pretragu",
+  "Clear all": "Očisti sve",
 };

package/src/components/items/item-list-table/locales/it.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Nessun articolo trovato",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  "Clear all": "Cancella tutto",
 };

package/src/components/items/item-list-table/locales/nl.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Geen artikelen gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  "Clear all": "Alles wissen",
 };

package/src/components/items/item-list-table/locales/pl.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Nie znaleziono pozycji",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  "Clear all": "Wyczyść wszystko",
 };

package/src/components/items/item-list-table/locales/pt.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Nenhum artigo encontrado",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  "Clear all": "Limpar tudo",
 };

package/src/components/items/item-list-table/locales/sl.ts

@@ -13,4 +13,5 @@ export default {
   "No results found": "Ni najdenih izdelkov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  "Clear all": "Počisti vse",
 };

package/src/components/payments/list/list-table.tsx

@@ -77,7 +77,6 @@ export default function PaymentListTable({
       limit: params.limit,
       next_cursor: params.next_cursor,
       prev_cursor: params.prev_cursor,
-      order_by: params.order_by,
       search: params.search,
       query: params.query,
     });
@@ -100,20 +99,17 @@ export default function PaymentListTable({
       {
         id: "date",
         header: t("Date"),
-        sortable: true,
         cell: (payment) => <FormattedDate date={payment.date} />,
       },
       {
         id: "amount",
         header: t("Amount"),
-        sortable: true,
         align: "right",
         cell: (payment) => <span className="font-medium">{payment.amount.toFixed(2)}</span>,
       },
       {
         id: "type",
         header: t("Type"),
-        sortable: true,
         cell: (payment) => typeLabels[payment.type] ?? payment.type,
       },
       {

package/src/components/payments/list/locales/de.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Keine Zahlungen gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  "Clear all": "Alles zurücksetzen",
 } as const;

package/src/components/payments/list/locales/es.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "No se encontraron pagos",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  "Clear all": "Borrar todo",
 } as const;

package/src/components/payments/list/locales/fr.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Aucun paiement trouvé",
   "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  "Clear all": "Tout effacer",
 } as const;

package/src/components/payments/list/locales/hr.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Nisu pronađena plaćanja",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
   "Clear search": "Očisti pretragu",
+  "Clear all": "Očisti sve",
 } as const;

package/src/components/payments/list/locales/it.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Nessun pagamento trovato",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  "Clear all": "Cancella tutto",
 } as const;

package/src/components/payments/list/locales/nl.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Geen betalingen gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  "Clear all": "Alles wissen",
 } as const;

package/src/components/payments/list/locales/pl.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Nie znaleziono płatności",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  "Clear all": "Wyczyść wszystko",
 } as const;

package/src/components/payments/list/locales/pt.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Nenhum pagamento encontrado",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  "Clear all": "Limpar tudo",
 } as const;

package/src/components/payments/list/locales/sl.ts

@@ -22,4 +22,5 @@ export default {
   "No results found": "Ni najdenih plačil",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  "Clear all": "Počisti vse",
 } as const;

package/src/components/recurring-invoices/list/list-table.tsx

@@ -79,7 +79,6 @@ export default function RecurringInvoiceListTable({
       limit: params.limit,
       next_cursor: params.next_cursor,
       prev_cursor: params.prev_cursor,
-      order_by: params.order_by,
       search: params.search,
       query: params.query,
     });
@@ -101,13 +100,11 @@ export default function RecurringInvoiceListTable({
       {
         id: "name",
         header: t("Name"),
-        sortable: true,
         cell: (ri) => <span className="font-medium">{ri.name}</span>,
       },
       {
         id: "frequency",
         header: t("Frequency"),
-        sortable: true,
         cell: (ri) => {
           const label = frequencyLabels[ri.frequency] ?? ri.frequency;
           return ri.interval > 1 ? `${t("Every")} ${ri.interval} ${label.toLowerCase()}` : label;
@@ -116,13 +113,11 @@ export default function RecurringInvoiceListTable({
       {
         id: "status",
         header: t("Status"),
-        sortable: true,
         cell: (ri) => <Badge variant={statusVariant(ri.status)}>{t(`status.${ri.status}`)}</Badge>,
       },
       {
         id: "next_run_date",
         header: t("Next Run"),
-        sortable: true,
         cell: (ri) =>
           ri.next_run_date ? (
             <FormattedDate date={ri.next_run_date} />
@@ -133,14 +128,12 @@ export default function RecurringInvoiceListTable({
       {
         id: "invoices_generated",
         header: t("Generated"),
-        sortable: true,
         align: "right",
         cell: (ri) => ri.invoices_generated,
       },
       {
         id: "created_at",
         header: t("Created"),
-        sortable: true,
         cell: (ri) => <FormattedDate date={ri.created_at} />,
       },
       {

package/src/components/recurring-invoices/list/locales/de.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Ihre Liste der wiederkehrenden Rechnungen ist leer",
   "Get started by creating your first entry": "Erstellen Sie Ihren ersten wiederkehrenden Plan",
   "No results found": "Keine wiederkehrenden Rechnungen gefunden",
+  "Clear all": "Alles zurücksetzen",
 } as const;

package/src/components/recurring-invoices/list/locales/es.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Su lista de facturas recurrentes está vacía",
   "Get started by creating your first entry": "Comience creando su primer programa recurrente",
   "No results found": "No se encontraron facturas recurrentes",
+  "Clear all": "Borrar todo",
 } as const;

package/src/components/recurring-invoices/list/locales/fr.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Votre liste de factures récurrentes est vide",
   "Get started by creating your first entry": "Commencez par créer votre premier programme récurrent",
   "No results found": "Aucune facture récurrente trouvée",
+  "Clear all": "Tout effacer",
 } as const;

package/src/components/recurring-invoices/list/locales/hr.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Vaš popis ponavljajućih računa je prazan",
   "Get started by creating your first entry": "Počnite kreiranjem prvog ponavljajućeg rasporeda",
   "No results found": "Nisu pronađeni ponavljajući računi",
+  "Clear all": "Očisti sve",
 } as const;

package/src/components/recurring-invoices/list/locales/it.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "La lista delle fatture ricorrenti è vuota",
   "Get started by creating your first entry": "Inizia creando il tuo primo programma ricorrente",
   "No results found": "Nessuna fattura ricorrente trovata",
+  "Clear all": "Cancella tutto",
 } as const;

package/src/components/recurring-invoices/list/locales/nl.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Uw lijst met terugkerende facturen is leeg",
   "Get started by creating your first entry": "Begin met het maken van uw eerste terugkerend schema",
   "No results found": "Geen terugkerende facturen gevonden",
+  "Clear all": "Alles wissen",
 } as const;

package/src/components/recurring-invoices/list/locales/pl.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Twoja lista faktur cyklicznych jest pusta",
   "Get started by creating your first entry": "Zacznij od utworzenia pierwszego harmonogramu cyklicznego",
   "No results found": "Nie znaleziono faktur cyklicznych",
+  "Clear all": "Wyczyść wszystko",
 } as const;

package/src/components/recurring-invoices/list/locales/pt.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "A sua lista de faturas recorrentes está vazia",
   "Get started by creating your first entry": "Comece criando o seu primeiro agendamento recorrente",
   "No results found": "Nenhuma fatura recorrente encontrada",
+  "Clear all": "Limpar tudo",
 } as const;

package/src/components/recurring-invoices/list/locales/sl.ts

@@ -24,4 +24,5 @@ export default {
   "Your list is empty": "Vaš seznam ponavljajočih računov je prazen",
   "Get started by creating your first entry": "Začnite z ustvarjanjem prvega ponavljajočega urnika",
   "No results found": "Ni najdenih ponavljajočih računov",
+  "Clear all": "Počisti vse",
 } as const;

package/src/components/request-logs/request-log-list-table.tsx

@@ -209,8 +209,6 @@ export function RequestLogListTable({
       id: "created_at",
       header: "Time",
       align: "right",
-      sortable: true,
-      sortField: "created_at",
       cell: (log) => (
         <span className="text-muted-foreground text-xs">
           {formatDistanceToNow(new Date(log.created_at), { addSuffix: true })}
@@ -243,7 +241,6 @@ export function RequestLogListTable({
         entityId={entityId}
         filterConfig={filterConfig}
         onRowClick={(log) => onSelectLog?.(log)}
-        defaultOrderBy="-created_at"
       />
 
       <Sheet open={!!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>

package/src/components/table/README.md

@@ -1,6 +1,6 @@
 # Table Component Library
 
-A comprehensive, type-safe table system with built-in sorting, search, pagination, and loading states.
+A comprehensive, type-safe table system with built-in search, pagination, and loading states.
 
 ## Features
 
@@ -32,7 +32,6 @@ function InvoiceTable() {
         {
           id: "number",
           header: "Invoice #",
-          sortable: true,
           cell: (invoice) => (
             <a href={`/invoices/${invoice.id}`} className="underline">
               {invoice.number}
@@ -47,14 +46,12 @@ function InvoiceTable() {
         {
           id: "date",
           header: "Date",
-          sortable: true,
           cell: (invoice) => <FormattedDate date={invoice.date} />,
         },
         {
           id: "total",
           header: "Total",
           align: "right",
-          sortable: true,
           cell: (invoice) => `$${invoice.total}`,
         },
       ]}
@@ -81,17 +78,12 @@ function InvoiceTable() {
   return (
     <DataTable<Invoice>
       columns={[
-        { field: "number", header: "Number", sortable: true },
-        { field: "customer", header: "Customer" },
-        { field: "date", header: "Date", sortable: true },
-        { field: "total", header: "Total", sortable: true, align: "right" },
+        { id: "number", header: "Number" },
+        { id: "customer", header: "Customer" },
+        { id: "date", header: "Date" },
+        { id: "total", header: "Total", align: "right" },
       ]}
-      renderHeader={(props) => (
-        <InvoiceListHeader
-          orderBy={props.orderBy}
-          onSort={props.onSort}
-        />
-      )}
+      renderHeader={() => <InvoiceListHeader />}
       renderRow={(invoice) => (
         <InvoiceListRow
           key={invoice.id}
@@ -117,7 +109,6 @@ function InvoiceTable() {
 | `cacheKey` | `string` | Yes | Unique key for react-query cache |
 | `onFetch` | `(params) => Promise<Response>` | Yes | Data fetch function |
 | `resourceName` | `string` | Yes | Resource name for empty states |
-| `defaultOrderBy` | `string` | No | Default sort order (e.g., "-id") |
 | `queryParams` | `TableQueryParams` | No | External query parameters |
 | `onChangeParams` | `(params) => void` | No | Callback for param changes |
 | `entityId` | `string` | No | Entity ID for multi-tenant filtering |
@@ -125,7 +116,7 @@ function InvoiceTable() {
 | `createNewTrigger` | `ReactNode` | No | Custom create action |
 | `onRowClick` | `(item: T) => void` | No | Row click handler |
 | `renderRow` | `(item: T) => ReactNode` | No | Custom row renderer |
-| `renderHeader` | `(props) => ReactNode` | No | Custom header renderer |
+| `renderHeader` | `() => ReactNode` | No | Custom header renderer |
 
 ### Column Definition
 
@@ -133,8 +124,6 @@ function InvoiceTable() {
 type Column<T> = {
   id: string;                    // Unique column identifier
   header: ReactNode;             // Header label or component
-  sortField?: string;            // Field name for sorting (if different from id)
-  sortable?: boolean;            // Enable sorting
   align?: "left" | "center" | "right"; // Text alignment
   cell?: (item: T) => ReactNode; // Cell renderer function
   className?: string;            // Optional CSS classes
@@ -150,9 +139,8 @@ Manages table state internally with optional URL sync:
 ```tsx
 import { useTableState } from "@space-invoices/ui";
 
-const { params, handleSort, handleSearch, handlePageChange } = useTableState({
-  initialParams: { order_by: "-created_at" },
-  defaultOrderBy: "-id",
+const { params, handleSearch, handlePageChange } = useTableState({
+  initialParams: {},
   onChangeParams: (params) => {
     // Optional: sync with router or external state
     navigate({ search: params });
@@ -170,7 +158,7 @@ import { useTableQuery } from "@space-invoices/ui";
 const { data, isFetching } = useTableQuery({
   cacheKey: "customers",
   fetchFn: (params) => sdk.customers.getCustomers(params),
-  params: { order_by: "-id", search: "acme" },
+  params: { search: "acme" },
   entityId: "entity-123",
 });
 ```
@@ -203,21 +191,6 @@ Search input with optional debouncing:
 />
 ```
 
-### SortableHeader
-
-Sortable column header with visual indicators:
-
-```tsx
-<SortableHeader
-  field="name"
-  currentOrder="-name"
-  onSort={(order) => console.log(order)}
-  align="left"
->
-  Customer Name
-</SortableHeader>
-```
-
 ### Pagination
 
 Cursor-based pagination controls:
@@ -259,7 +232,6 @@ For straightforward tables, define columns with cell renderers:
     {
       id: "name",
       header: "Name",
-      sortable: true,
       cell: (item) => item.name,
     },
     {
@@ -281,14 +253,14 @@ For advanced tables with complex row/header components:
 ```tsx
 <DataTable
   columns={[
-    { id: "name", header: "Name", sortable: true },
+    { id: "name", header: "Name" },
     { id: "email", header: "Email" },
   ]}
   renderRow={(item) => (
     <CustomRow key={item.id} item={item} />
   )}
-  renderHeader={(props) => (
-    <CustomHeader {...props} />
+  renderHeader={() => (
+    <CustomHeader />
   )}
   cacheKey="users"
   resourceName="user"
@@ -296,84 +268,6 @@ For advanced tables with complex row/header components:
 />
 ```
 
-## Key Improvements
-
-### 1. Simplified State Management
-
-**Before:**
-- Manual `useState` for params
-- Manual URL sync with `updateQueryParams`
-- Complex callback chains
-
-**After:**
-- `useTableState` hook handles everything
-- Automatic URL sync
-- Single source of truth
-
-### 2. Cleaner Hooks
-
-**Before:**
-```tsx
-const { data, isFetching } = useTableQuery({
-  cacheKey,
-  fetchFn,
-  params,
-  entityId,
-});
-
-// Unnecessary isMounted ref logic
-const isMounted = useRef(true);
-```
-
-**After:**
-```tsx
-// Simplified, no ref needed
-const { data, isFetching } = useTableQuery({
-  cacheKey,
-  fetchFn,
-  params,
-  entityId,
-});
-```
-
-### 3. Better Column API
-
-**Before:**
-- Column definitions not used for rendering
-- Must implement custom row/header components
-
-**After:**
-- Column definitions drive rendering
-- Optional custom renderers for flexibility
-- Built-in cell renderers via `cell` prop
-
-### 4. Improved Type Safety
-
-**Before:**
-```typescript
-// Loose typing on columns
-columns: { field: string; header: React.ReactNode }[]
-```
-
-**After:**
-```typescript
-// Strongly typed with generics
-columns: Column<T>[]
-// T is your data type (e.g., Invoice, Customer)
-```
-
-### 5. Better UX
-
-**Before:**
-- Basic search input
-- Minimal empty states
-
-**After:**
-- Search with clear button
-- Rich empty states with icons
-- Better error handling in date formatter
-- Improved accessibility
-
 ## Best Practices
 
 1. **Use column definitions for simple tables**: Less code, easier to maintain
@@ -382,8 +276,7 @@ columns: Column<T>[]
 4. **Handle loading states**: The component handles this automatically
 5. **Provide meaningful resource names**: Used in empty states
 6. **Use FormattedDate**: Consistent date formatting with error handling
-7. **Enable sorting selectively**: Not all columns need sorting
-8. **Use proper TypeScript types**: Import from `@spaceinvoices/js-sdk`
+7. **Use proper TypeScript types**: Import from `@spaceinvoices/js-sdk`
 
 ## Testing