Merge pull request #304 from softnetics/supakorn/fix/components

SupakornNetsuwan · web-flow · commit 1bb3219dc98e · 2025-11-28T10:51:49.000+07:00
feat: extract hooks and component dependencies of `@genseki/ui`.
diff --git a/.changeset/dirty-parrots-marry.md b/.changeset/dirty-parrots-marry.md
@@ -0,0 +1,5 @@
+---
+'@genseki/ui': patch
+---
+
+feat: UI component improvement focus on tanstack-table and pagination.
diff --git a/legacies/react/src/react/hooks/use-pagination.ts b/legacies/react/src/react/hooks/use-pagination.ts
@@ -3,17 +3,25 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import { parseAsInteger, useQueryStates } from 'nuqs'
 
+/**
+ * @deprecated Use `usePagination` from `@genseki/ui` instead
+ */
 export interface PaginationValue {
   page: number
   pageSize: number
 }
 
+/**
+ * @deprecated Use `usePagination` from `@genseki/ui` instead
+ */
+
 export interface UsePaginationReturn {
   pagination: PaginationValue
   setPagination: Dispatch<SetStateAction<PaginationValue>>
 }
 
 /**
+ * @deprecated Use `usePagination` from `@genseki/ui` instead
  * @description Handle standard pagination data
  */
 export function usePagination(): UsePaginationReturn {
diff --git a/legacies/react/src/react/hooks/use-sort.ts b/legacies/react/src/react/hooks/use-sort.ts
@@ -8,13 +8,22 @@ const sortSchema = z.object({
   desc: z.boolean(),
 })
 
+/**
+ * @deprecated Use `SortValue` from `@genseki/ui` instead
+ */
 export type SortValue = z.infer<typeof sortSchema>[]
 
+/**
+ * @deprecated Use `UseSort` from `@genseki/ui` instead
+ */
 export interface UseSort {
   Sort: SortValue
   SetSort: Dispatch<SetStateAction<SortValue>>
 }
 
+/**
+ * @deprecated Use `useSort` from `@genseki/ui` instead
+ */
 export function useSort() {
   const [sort, setSort] = useQueryState(
     'sort',
diff --git a/legacies/react/src/react/providers/navigation.tsx b/legacies/react/src/react/providers/navigation.tsx
@@ -2,6 +2,9 @@
 
 import { createContext, useContext } from 'react'
 
+/**
+ * @deprecated
+ */
 export interface NavigationContextValue {
   navigate: (path: string, type?: 'push' | 'replace') => void
   getPathname: () => string
@@ -10,6 +13,9 @@ export interface NavigationContextValue {
 
 export const NavigationContext = createContext<NavigationContextValue>(null!)
 
+/**
+ * @deprecated
+ */
 export const useNavigation = () => {
   const context = useContext(NavigationContext)
   if (!context) {
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -67,7 +67,8 @@
     "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
     "sonner": "^2.0.3",
-    "tailwind-merge": "^3.0.2"
+    "tailwind-merge": "^3.0.2",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@types/node": "22.13.10",
diff --git a/packages/ui/src/components/primitives/color-picker.tsx b/packages/ui/src/components/primitives/color-picker.tsx
@@ -20,7 +20,7 @@ import { Input } from './input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
 import { Typography } from './typography'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 
 interface ColorPickerContextValue {
diff --git a/packages/ui/src/components/primitives/combobox.tsx b/packages/ui/src/components/primitives/combobox.tsx
@@ -16,7 +16,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
 
 import { Badge } from '../../../src'
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 
 /**
diff --git a/packages/ui/src/components/primitives/date-picker.tsx b/packages/ui/src/components/primitives/date-picker.tsx
@@ -9,7 +9,7 @@ import { Button } from './button'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
 import { Typography } from './typography'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 
 const [_DatePickerProvider, useDatePickerProvider] = createRequiredContext<{
diff --git a/packages/ui/src/components/primitives/drop-zone.tsx b/packages/ui/src/components/primitives/drop-zone.tsx
@@ -10,7 +10,7 @@ import { PaperclipIcon } from '@phosphor-icons/react'
 import { Button } from './button'
 import { Typography } from './typography'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 declare namespace Intl {
   type ListType = 'conjunction' | 'disjunction'
diff --git a/packages/ui/src/components/primitives/input-group.tsx b/packages/ui/src/components/primitives/input-group.tsx
@@ -8,7 +8,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Button } from './button'
 import type { Input } from './input'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 
 const [InputGroupProvider, useInputGroup] = createRequiredContext<{
diff --git a/packages/ui/src/components/primitives/sidebar.tsx b/packages/ui/src/components/primitives/sidebar.tsx
@@ -14,7 +14,7 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '
 import { Skeleton } from './skeleton'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
-import { useMediaQuery } from '../../hooks/use-media-query'
+import { useMediaQuery } from '../../hooks/internals/use-media-query'
 import { cn } from '../../utils/cn'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar-state'
diff --git a/packages/ui/src/components/primitives/tabs.tsx b/packages/ui/src/components/primitives/tabs.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { createRequiredContext } from '../../hooks/internals/create-required-context'
 import { cn } from '../../utils/cn'
 
 type Variants = 'default' | 'underline'
diff --git a/packages/ui/src/hooks/internals/create-required-context.tsx b/packages/ui/src/hooks/internals/create-required-context.tsx
diff --git a/packages/ui/src/hooks/internals/use-media-query.ts b/packages/ui/src/hooks/internals/use-media-query.ts
diff --git a/packages/ui/src/hooks/internals/use-pagination.ts b/packages/ui/src/hooks/internals/use-pagination.ts
@@ -0,0 +1,26 @@
+'use client'
+import type { Dispatch, SetStateAction } from 'react'
+
+import { parseAsInteger, useQueryStates } from 'nuqs'
+
+export interface PaginationValue {
+  page: number
+  pageSize: number
+}
+
+export interface UsePaginationReturn {
+  pagination: PaginationValue
+  setPagination: Dispatch<SetStateAction<PaginationValue>>
+}
+
+/**
+ * @description Handle standard pagination data
+ */
+export function usePagination(): UsePaginationReturn {
+  const [pagination, setPagination] = useQueryStates({
+    page: parseAsInteger.withDefault(1),
+    pageSize: parseAsInteger.withDefault(10),
+  })
+
+  return { pagination, setPagination }
+}
diff --git a/packages/ui/src/hooks/internals/use-sort.ts b/packages/ui/src/hooks/internals/use-sort.ts
@@ -0,0 +1,27 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+import { parseAsArrayOf, parseAsJson, useQueryState } from 'nuqs'
+import z from 'zod'
+
+const sortSchema = z.object({
+  id: z.string(),
+  desc: z.boolean(),
+})
+
+export type SortValue = z.infer<typeof sortSchema>[]
+
+export interface UseSort {
+  Sort: SortValue
+  SetSort: Dispatch<SetStateAction<SortValue>>
+}
+
+export function useSort() {
+  const [sort, setSort] = useQueryState(
+    'sort',
+    parseAsArrayOf(parseAsJson(sortSchema.parse))
+      .withDefault([])
+      .withOptions({ clearOnDefault: true })
+  )
+
+  return { sort, setSort }
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -1,2 +1,3 @@
 export * from './components/primitives'
 export * from './hooks'
+export * from './providers'
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
@@ -0,0 +1 @@
+export * from './table'
diff --git a/packages/ui/src/providers/table.tsx b/packages/ui/src/providers/table.tsx
@@ -0,0 +1,67 @@
+'use client'
+import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react'
+
+import type { RowSelectionState } from '@tanstack/react-table'
+
+import { createRequiredContext } from '../hooks/internals/create-required-context'
+import { usePagination, type UsePaginationReturn } from '../hooks/internals/use-pagination'
+import { type UseSort, useSort } from '../hooks/internals/use-sort'
+import { useSearch, type UseSearchReturn } from '../hooks/use-search'
+
+interface UseRowSelection {
+  RowSelection: RowSelectionState
+  SetRowSelection: Dispatch<SetStateAction<RowSelectionState>>
+}
+
+export interface TanstackTableContextValue {
+  pagination: UsePaginationReturn['pagination']
+  setPagination: UsePaginationReturn['setPagination']
+  sort: UseSort['Sort']
+  setSort: UseSort['SetSort']
+  search: UseSearchReturn['search']
+  setSearch: UseSearchReturn['setSearch']
+  rowSelection: UseRowSelection['RowSelection']
+  rowSelectionIds: string[]
+  isRowsSelected: boolean
+  setRowSelection: UseRowSelection['SetRowSelection']
+}
+interface TableStatesProviderProps {
+  children?: React.ReactNode
+}
+
+export const [TableStatesContextProvider, useTableStatesContext] =
+  createRequiredContext<TanstackTableContextValue>('TableStatesContext')
+
+export const TableStatesProvider = (props: TableStatesProviderProps) => {
+  const { pagination, setPagination } = usePagination()
+  const { sort, setSort } = useSort()
+  const { search, setSearch } = useSearch()
+  // row selection does not maintain a state wih URL search parameter like pagination and search
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const rowSelectionIds = useMemo(
+    () => Object.keys(rowSelection).filter((key) => rowSelection[key]),
+    [rowSelection]
+  )
+
+  const isRowsSelected = rowSelectionIds.length > 0
+
+  return (
+    <TableStatesContextProvider
+      {...{
+        pagination,
+        setPagination,
+        sort,
+        setSort,
+        search,
+        setSearch,
+        rowSelection,
+        rowSelectionIds,
+        setRowSelection,
+        isRowsSelected,
+      }}
+    >
+      {props.children}
+    </TableStatesContextProvider>
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@genseki/ui': patch
 +---
++
 +feat: UI component improvement focus on tanstack-table and pagination.