ai-design-system 0.1.18 → 0.1.23

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -5,6 +5,7 @@ import {
   type FormReportsEntity,
   type FormReportsRowAction,
   type FormReportsTableHandlers,
+  type DashboardPaginationState,
 } from "@/components/composites/FormReports"
 
 export interface FormReportsSectionProps {
@@ -13,6 +14,7 @@ export interface FormReportsSectionProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
   tableHandlers?: FormReportsTableHandlers
   tableLeftActions?: React.ReactNode
 }
@@ -24,6 +26,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     items,
     columns,
     rowActions,
+    pagination,
     tableHandlers,
     tableLeftActions,
   }) => {
@@ -33,6 +36,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
           items={items}
           columns={columns}
           rowActions={rowActions}
+          pagination={pagination}
           handlers={tableHandlers}
           leftActions={tableLeftActions}
           onCreateClick={onCreateClick}

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -37,6 +37,7 @@ import { DragHandleCell } from "./DragHandleCell"
 import { DraggableRow } from "./DraggableRow"
 import { createTableSelectColumn } from "./TableSelectColumn"
 import type {
+  DashboardPaginationState,
   DashboardRow,
   DashboardRowAction,
   DashboardTableActionHandlers,
@@ -46,6 +47,7 @@ import { useEnhancedDataTable } from "./useEnhancedDataTable"
 export interface EnhancedDataTableProps {
   data: DashboardRow[]
   tableSchema: DynamicTableSchema
+  pagination?: DashboardPaginationState
   className?: string
   handlers?: DashboardTableActionHandlers
   leftActions?: React.ReactNode
@@ -86,6 +88,7 @@ function toNumberValue(value: unknown): number {
 export function EnhancedDataTable({
   data: initialData,
   tableSchema,
+  pagination,
   className,
   handlers,
   leftActions,
@@ -384,8 +387,30 @@ export function EnhancedDataTable({
     data: filteredData,
     columns,
     onReorder: (rows) => handlers?.onRowReorder?.(rows),
+    serverPagination: pagination,
   })
 
+  const totalPages = React.useMemo(() => {
+    if (!pagination) {
+      return table.getPageCount()
+    }
+    const safePageSize = Math.max(1, pagination.pageSize)
+    return Math.max(1, Math.ceil(Math.max(0, pagination.totalItems) / safePageSize))
+  }, [pagination, table])
+
+  const currentPageIndex = pagination ? pagination.pageIndex : table.getState().pagination.pageIndex
+  const currentPageSize = pagination ? pagination.pageSize : table.getState().pagination.pageSize
+  const canPreviousPage = currentPageIndex > 0
+  const canNextPage = currentPageIndex < totalPages - 1
+
+  React.useEffect(() => {
+    if (!pagination) {
+      return
+    }
+    table.setPageIndex(pagination.pageIndex)
+    table.setPageSize(pagination.pageSize)
+  }, [pagination, table])
+
   React.useEffect(() => {
     if (version > 0) {
       table.resetRowSelection(false)
@@ -528,16 +553,16 @@ export function EnhancedDataTable({
                 Rows per page
               </Label>
               <Select
-                value={`${table.getState().pagination.pageSize}`}
+                value={`${currentPageSize}`}
                 onValueChange={(value) => {
                   const pageSize = Number(value)
                   table.setPageSize(pageSize)
                   handlers?.onPageSizeChange?.(pageSize)
-                  emitPaginationChange(table.getState().pagination.pageIndex, pageSize)
+                  emitPaginationChange(0, pageSize)
                 }}
               >
                 <SelectTrigger className="w-20" id="rows-per-page">
-                  <SelectValue placeholder={table.getState().pagination.pageSize} />
+                  <SelectValue placeholder={currentPageSize} />
                 </SelectTrigger>
                 <SelectContent side="top">
                   {[10, 20, 30, 40, 50].map((pageSize) => (
@@ -549,7 +574,7 @@ export function EnhancedDataTable({
               </Select>
             </div>
             <div className="flex w-fit items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+              Page {currentPageIndex + 1} of {totalPages}
             </div>
             <div className="ml-auto flex items-center gap-2 lg:ml-0">
               <Button
@@ -558,9 +583,9 @@ export function EnhancedDataTable({
                 onClick={() => {
                   table.setPageIndex(0)
                   handlers?.onPageChange?.(0)
-                  emitPaginationChange(0, table.getState().pagination.pageSize)
+                  emitPaginationChange(0, currentPageSize)
                 }}
-                disabled={!table.getCanPreviousPage()}
+                disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to first page</span>
                 <ChevronsLeft className="size-4" />
@@ -569,12 +594,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="size-8 p-0"
                 onClick={() => {
-                  table.previousPage()
-                  const nextIndex = Math.max(0, table.getState().pagination.pageIndex - 1)
+                  const nextIndex = Math.max(0, currentPageIndex - 1)
+                  table.setPageIndex(nextIndex)
                   handlers?.onPageChange?.(nextIndex)
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize)
+                  emitPaginationChange(nextIndex, currentPageSize)
                 }}
-                disabled={!table.getCanPreviousPage()}
+                disabled={!canPreviousPage}
               >
                 <span className="sr-only">Go to previous page</span>
                 <ChevronLeft className="size-4" />
@@ -583,12 +608,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="size-8 p-0"
                 onClick={() => {
-                  table.nextPage()
-                  const nextIndex = Math.min(table.getPageCount() - 1, table.getState().pagination.pageIndex + 1)
+                  const nextIndex = Math.min(totalPages - 1, currentPageIndex + 1)
+                  table.setPageIndex(nextIndex)
                   handlers?.onPageChange?.(nextIndex)
-                  emitPaginationChange(nextIndex, table.getState().pagination.pageSize)
+                  emitPaginationChange(nextIndex, currentPageSize)
                 }}
-                disabled={!table.getCanNextPage()}
+                disabled={!canNextPage}
               >
                 <span className="sr-only">Go to next page</span>
                 <ChevronRight className="size-4" />
@@ -597,12 +622,12 @@ export function EnhancedDataTable({
                 variant="outline"
                 className="hidden size-8 p-0 lg:flex"
                 onClick={() => {
-                  const lastPage = Math.max(0, table.getPageCount() - 1)
+                  const lastPage = Math.max(0, totalPages - 1)
                   table.setPageIndex(lastPage)
                   handlers?.onPageChange?.(lastPage)
-                  emitPaginationChange(lastPage, table.getState().pagination.pageSize)
+                  emitPaginationChange(lastPage, currentPageSize)
                 }}
-                disabled={!table.getCanNextPage()}
+                disabled={!canNextPage}
               >
                 <span className="sr-only">Go to last page</span>
                 <ChevronsRight className="size-4" />

package/components/composites/DataTable/index.ts

@@ -20,6 +20,7 @@ export type { UseEnhancedDataTableOptions } from './useEnhancedDataTable'
 export { dashboardRowSchema } from './table-types'
 export type {
 	DashboardInlineEditableField,
+	DashboardPaginationState,
 	DashboardRow,
 	DashboardRowAction,
 	DashboardTableActionHandlers,

package/components/composites/DataTable/table-types.ts

@@ -10,6 +10,12 @@ export type DashboardInlineEditableField = "target" | "limit"
 
 export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete"
 
+export interface DashboardPaginationState {
+  pageIndex: number
+  pageSize: number
+  totalItems: number
+}
+
 export interface DashboardTableActionHandlers {
   onCreateClick?: () => void
   onAddSection?: () => void

package/components/composites/DataTable/useEnhancedDataTable.ts

@@ -16,27 +16,44 @@ import { arrayMove, type UniqueIdentifier } from "@dnd-kit/sortable"
 
 import type { DashboardRow } from "./table-types"
 
+export interface ServerPaginationOptions {
+  pageIndex: number
+  pageSize: number
+  totalItems: number
+}
+
 export interface UseEnhancedDataTableOptions {
   data: DashboardRow[]
   columns: ColumnDef<DashboardRow>[]
   onReorder?: (rows: DashboardRow[]) => void
+  serverPagination?: ServerPaginationOptions
 }
 
-export function useEnhancedDataTable({ data: initialData, columns, onReorder }: UseEnhancedDataTableOptions) {
+export function useEnhancedDataTable({ data: initialData, columns, onReorder, serverPagination }: UseEnhancedDataTableOptions) {
   const [data, setData] = React.useState<DashboardRow[]>(() => initialData)
   const [rowSelection, setRowSelection] = React.useState({})
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 10,
+    pageIndex: serverPagination?.pageIndex ?? 0,
+    pageSize: serverPagination?.pageSize ?? 10,
   })
 
   React.useEffect(() => {
     setData(initialData)
   }, [initialData])
 
+  React.useEffect(() => {
+    if (!serverPagination) {
+      return
+    }
+    setPagination({
+      pageIndex: serverPagination.pageIndex,
+      pageSize: serverPagination.pageSize,
+    })
+  }, [serverPagination])
+
   const dataIds = React.useMemo<UniqueIdentifier[]>(() => data.map((item) => item.id), [data])
 
   const table = useReactTable({
@@ -56,9 +73,13 @@ export function useEnhancedDataTable({ data: initialData, columns, onReorder }:
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: setPagination,
+    manualPagination: Boolean(serverPagination),
+    pageCount: serverPagination
+      ? Math.max(1, Math.ceil(serverPagination.totalItems / Math.max(1, serverPagination.pageSize)))
+      : undefined,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    getPaginationRowModel: serverPagination ? undefined : getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),

package/components/composites/FormReports/FormReportsTable.tsx

@@ -1,11 +1,12 @@
 import * as React from "react"
 import {
   EnhancedDataTable,
+  type DashboardPaginationState,
   type DashboardRow,
   type DashboardRowAction,
   type DashboardTableActionHandlers,
 } from "@/components/composites/DataTable"
-import { dynamicTableSchema, type DynamicTableSchema, type TableColumn } from "ui-schema-contracts"
+import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema, type DynamicTableSchema, type TableColumn } from "ui-schema-contracts"
 
 export interface FormReportsEntity {
   id: number | string
@@ -43,6 +44,7 @@ export interface FormReportsTableProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
   handlers?: FormReportsTableHandlers
   leftActions?: React.ReactNode
   rightActions?: React.ReactNode
@@ -57,8 +59,10 @@ const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
   delete: "delete",
 }
 
+export type { DashboardPaginationState }
+
 export const FormReportsTable = React.memo<FormReportsTableProps>(
-  ({ items, columns, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
+  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel }) => {
     const { rows, originalById, tableSchema } = React.useMemo(() => {
       const byId = new Map<string, FormReportsEntity>()
       const tableColumns: DynamicTableSchema["columns"] = columns
@@ -78,7 +82,7 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
         rows: nextRows,
         originalById: byId,
         tableSchema: dynamicTableSchema.parse({
-          schemaVersion: "1",
+          schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
           rowKey: "id",
           columns: tableColumns,
           enableFiltering: true,
@@ -168,6 +172,7 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
       <EnhancedDataTable
         data={rows}
         tableSchema={tableSchema}
+        pagination={pagination}
         handlers={adaptedHandlers}
         leftActions={leftActions}
         rightActions={rightActions}

package/components/composites/FormReports/index.ts

@@ -16,6 +16,7 @@ export {
 } from "./FormReportsTable"
 
 export type {
+  DashboardPaginationState,
   FormReportsColumn,
   FormReportsEntity,
   FormReportsRowAction,

package/components/features/DashboardFeature/DashboardFeature.mocks.ts

@@ -3,11 +3,16 @@ import {
   formSchema,
   type FormFieldDefinition,
   type FormSchema,
-} from "design-schema"
-import { dynamicTableSchema, type DynamicTableSchema } from "ui-schema-contracts"
+} from "design-schema/schemas/form"
+import {
+  DYNAMIC_TABLE_SCHEMA_VERSION,
+  FORM_SCHEMA_VERSION,
+  dynamicTableSchema,
+  type DynamicTableSchema,
+} from "ui-schema-contracts"
 
 const dashboardTableSchemaInput = {
-  schemaVersion: "1",
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
   rowKey: "id",
   columns: [
     {
@@ -102,7 +107,7 @@ const dashboardTableSchemaInput = {
 export const dashboardTableSchema: DynamicTableSchema = dynamicTableSchema.parse(dashboardTableSchemaInput)
 
 const dashboardCreateFormSchemaInput = {
-  schemaVersion: "1",
+  schemaVersion: FORM_SCHEMA_VERSION,
   fields: [
     {
       name: "slug",

package/components/features/FormReportsFeature/FormReportsFeature.mocks.ts

@@ -7,13 +7,18 @@ import type {
 import {
   formSchema,
   type FormSchema,
-} from "design-schema"
-import { dynamicTableSchema, type DynamicTableSchema } from "ui-schema-contracts"
+} from "design-schema/schemas/form"
+import {
+  DYNAMIC_TABLE_SCHEMA_VERSION,
+  FORM_SCHEMA_VERSION,
+  dynamicTableSchema,
+  type DynamicTableSchema,
+} from "ui-schema-contracts"
 
 export const formReportsEntityName = "Feature Flag"
 
 const formReportsFormSchemaInput = {
-  schemaVersion: "1",
+  schemaVersion: FORM_SCHEMA_VERSION,
   fields: [
     {
       name: "slug",
@@ -65,7 +70,7 @@ const formReportsFormSchemaInput = {
 export const formReportsFields: FormReportsFieldDefinition[] = formSchema.parse(formReportsFormSchemaInput).fields
 
 const formReportsTableSchemaInput = {
-  schemaVersion: "1",
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
   rowKey: "id",
   columns: [
     {

package/components/features/FormReportsFeature/FormReportsFeature.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 
 import {
   FormReportsDrawerForm,
+  type DashboardPaginationState,
   type FormReportsColumn,
   type FormReportsEntity,
   type FormReportsFieldDefinition,
@@ -18,6 +19,7 @@ export interface FormReportsFeatureProps {
   fields: FormReportsFieldDefinition[]
   columns: FormReportsColumn[]
   items: FormReportsEntity[]
+  pagination?: DashboardPaginationState
   rowActions?: FormReportsRowAction[]
   actionHandlers?: FormReportsFeatureActionHandlers
   createButtonLabel?: string
@@ -39,6 +41,7 @@ export const FormReportsFeature = React.memo<FormReportsFeatureProps>(
     fields,
     columns,
     items,
+    pagination,
     rowActions,
     actionHandlers,
     createButtonLabel = "Create",
@@ -105,6 +108,7 @@ export const FormReportsFeature = React.memo<FormReportsFeatureProps>(
           createButtonLabel={createButtonLabel}
           items={items}
           columns={columns}
+          pagination={pagination}
           rowActions={rowActions}
           tableHandlers={actionHandlers?.table}
         />

package/components/features/FormReportsFeature/useFormReportsFeature.d.ts

@@ -1,4 +1,5 @@
 import type {
+  DashboardPaginationState,
   FormReportsColumn,
   FormReportsEntity,
   FormReportsFieldDefinition,
@@ -24,6 +25,7 @@ export interface UseFormReportsFeatureReturn {
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
   items: FormReportsEntity[]
+  pagination?: DashboardPaginationState
   actionHandlers?: FormReportsFeatureActionHandlers
   createButtonLabel?: string
 }