@contember/bindx-dataview 0.1.0

package/src/index.ts

@@ -0,0 +1,356 @@
+// Core DataGrid
+export { DataGrid, type DataGridProps, QUERY_FILTER_NAME } from './DataGrid.js'
+export { HasManyDataGrid, type HasManyDataGridProps } from './HasManyDataGrid.js'
+
+// Column type definitions (Layer 1: headless behavior)
+export {
+	defineColumnType,
+	type ColumnTypeDef,
+	textColumnDef,
+	numberColumnDef,
+	dateColumnDef,
+	dateTimeColumnDef,
+	booleanColumnDef,
+	enumColumnDef,
+	enumListColumnDef,
+	uuidColumnDef,
+	isDefinedColumnDef,
+	hasOneColumnDef,
+	hasManyColumnDef,
+	accessField,
+} from './columnTypes.js'
+
+// ColumnLeaf, extraction, and children analysis
+export {
+	ColumnLeaf,
+	type ColumnLeafProps,
+	extractColumnLeaves,
+	analyzeChildren,
+	type ChildrenAnalysisResult,
+} from './columnLeaf.js'
+
+// Marker components (toolbar content, layout)
+export {
+	DataGridToolbarContent,
+	type DataGridToolbarContentProps,
+	DataGridLayout,
+	type DataGridLayoutProps,
+} from './markers.js'
+
+// createColumn factory (Layer 2: UI wrapping)
+export {
+	createColumn,
+	type ColumnRenderProps,
+	type FilterRenderProps,
+	type CreateColumnConfig,
+	type ColumnComponentProps,
+	type ColumnComponent,
+} from './createColumn.js'
+
+// createRelationColumn factory (Layer 2: relation columns)
+export {
+	createRelationColumn,
+	hasOneCellConfig,
+	hasManyCellConfig,
+	type RelationColumnConfig,
+	type RelationFilterContext,
+	type RelationCellWrapperContext,
+	type RelationColumnProps,
+	type RelationColumnComponent,
+} from './createRelationColumn.jsx'
+
+// Column components
+export {
+	DataGridTextColumn,
+	DataGridNumberColumn,
+	DataGridDateColumn,
+	DataGridDateTimeColumn,
+	DataGridBooleanColumn,
+	DataGridEnumColumn,
+	DataGridEnumListColumn,
+	DataGridUuidColumn,
+	DataGridIsDefinedColumn,
+	DataGridHasOneColumn,
+	DataGridHasManyColumn,
+	DataGridActionColumn,
+	DataGridColumn,
+	type DataGridTextColumnProps,
+	type DataGridNumberColumnProps,
+	type DataGridDateColumnProps,
+	type DataGridDateTimeColumnProps,
+	type DataGridBooleanColumnProps,
+	type DataGridEnumColumnProps,
+	type DataGridEnumListColumnProps,
+	type DataGridUuidColumnProps,
+	type DataGridIsDefinedColumnProps,
+	type DataGridHasOneColumnProps,
+	type DataGridHasManyColumnProps,
+	type DataGridActionColumnProps,
+	type DataGridColumnProps,
+	type ColumnMeta,
+	extractFieldName,
+	extractRelatedEntityName,
+	hasFieldRefMeta,
+	getRelatedAccessor,
+} from './columns.js'
+
+// State hooks
+export {
+	useFilteringState,
+	useSortingState,
+	usePagingState,
+	useSelectionState,
+	type FilteringState,
+	type RegisteredFilter,
+	type UseFilteringOptions,
+	type UseSortingOptions,
+	type SortingStateResult,
+	type UsePagingOptions,
+	type PagingStateResult,
+	type UseSelectionOptions,
+	type SelectionStateResult,
+} from './useDataViewState.js'
+
+// Context
+export {
+	useDataViewContext,
+	useOptionalDataViewContext,
+	DataViewProvider,
+	type DataViewContextValue,
+	type DataViewItem,
+	type DataViewLoaderState as DataViewLoaderStateType,
+	type DataViewElementData,
+} from './DataViewContext.js'
+
+// Low-level hook
+export { useDataView, type UseDataViewOptions, type DataViewResult } from './useDataView.js'
+
+// Data attribute helper
+export { dataAttribute } from './dataAttribute.js'
+
+// Filter name context
+export {
+	useDataViewFilterName,
+	useOptionalDataViewFilterName,
+	DataViewFilterNameProvider,
+} from './filterContext.js'
+
+// Filter scope and registration components
+export {
+	DataViewFilterScope,
+	type DataViewFilterScopeProps,
+	DataViewFilter,
+	type DataViewFilterProps,
+	DataViewHasFilterType,
+	type DataViewHasFilterTypeProps,
+} from './filterScope.js'
+
+// Filter wrapper components (typed name scoping)
+export {
+	DataViewTextFilter,
+	type DataViewTextFilterProps,
+	DataViewBooleanFilter,
+	type DataViewBooleanFilterProps,
+	DataViewNumberFilter,
+	type DataViewNumberFilterProps,
+	DataViewDateFilter,
+	type DataViewDateFilterProps,
+	DataViewEnumFilter,
+	type DataViewEnumFilterProps,
+	DataViewEnumListFilter,
+	type DataViewEnumListFilterProps,
+	DataViewHasOneFilter,
+	type DataViewHasOneFilterProps,
+	DataViewHasManyFilter,
+	type DataViewHasManyFilterProps,
+	DataViewIsDefinedFilter,
+	type DataViewIsDefinedFilterProps,
+	DataViewUnionTextFilter,
+	type DataViewUnionTextFilterProps,
+} from './filterWrappers.js'
+
+// Filter hooks
+export {
+	useDataViewFilter,
+	type UseDataViewFilterResult,
+	useDataViewBooleanFilter,
+	useDataViewBooleanFilterFactory,
+	type DataViewSetBooleanFilterAction,
+	type DataViewBooleanFilterCurrent,
+	type UseDataViewBooleanFilterResult,
+	useDataViewEnumFilter,
+	useDataViewEnumFilterFactory,
+	type DataViewSetEnumFilterAction,
+	type DataViewEnumFilterCurrent,
+	type UseDataViewEnumFilterResult,
+	useDataViewRelationFilter,
+	useDataViewRelationFilterFactory,
+	type DataViewSetRelationFilterAction,
+	type DataViewRelationFilterCurrent,
+	type UseDataViewRelationFilterResult,
+	useDataViewTextFilterInput,
+	type UseDataViewTextFilterInputResult,
+	useDataViewTextFilterMatchMode,
+	type UseDataViewTextFilterMatchModeResult,
+	useDataViewNumberFilterInput,
+	type UseDataViewNumberFilterInputResult,
+	type UseDataViewNumberFilterInputProps,
+	useDataViewNullFilter,
+	type DataViewSetNullFilterAction,
+	type DataViewNullFilterState,
+	type UseDataViewNullFilterResult,
+} from './filterHooks.js'
+
+// Composable filter components
+export {
+	type DataViewFilterState,
+	DataViewTextFilterInput,
+	type DataViewTextFilterInputProps,
+	DataViewTextFilterMatchModeTrigger,
+	type DataViewTextFilterMatchModeTriggerProps,
+	DataViewTextFilterMatchModeLabel,
+	type DataViewTextFilterMatchModeLabelProps,
+	DataViewTextFilterResetTrigger,
+	type DataViewTextFilterResetTriggerProps,
+	DataViewNumberFilterInput,
+	type DataViewNumberFilterInputProps,
+	DataViewDateFilterInput,
+	type DataViewDateFilterInputProps,
+	DataViewBooleanFilterTrigger,
+	type DataViewBooleanFilterTriggerProps,
+	DataViewEnumFilterTrigger,
+	type DataViewEnumFilterTriggerProps,
+	DataViewEnumFilterState,
+	type DataViewEnumFilterStateProps,
+	DataViewRelationFilterTrigger,
+	type DataViewRelationFilterTriggerProps,
+	DataViewRelationFilterState,
+	type DataViewRelationFilterStateProps,
+	DataViewNullFilterTrigger,
+	type DataViewNullFilterTriggerProps,
+	DataViewFilterResetTrigger,
+	type DataViewFilterResetTriggerProps,
+	DataViewDateFilterResetTrigger,
+	type DataViewDateFilterResetTriggerProps,
+	DataViewNumberFilterResetTrigger,
+	type DataViewNumberFilterResetTriggerProps,
+} from './filterComponents.js'
+
+// Sorting components
+export {
+	DataViewSortingTrigger,
+	type DataViewSortingTriggerProps,
+	DataViewSortingSwitch,
+	type DataViewSortingSwitchProps,
+} from './sortingComponents.js'
+
+// Paging components
+export {
+	DataViewChangePageTrigger,
+	type DataViewChangePageTriggerProps,
+	DataViewSetItemsPerPageTrigger,
+	type DataViewSetItemsPerPageTriggerProps,
+	DataViewPagingStateView,
+	type DataViewPagingStateViewProps,
+	DataViewPagingInfo,
+	type DataViewPagingInfoProps,
+} from './pagingComponents.js'
+
+// Selection (visibility + layout) components
+export {
+	DataViewVisibilityTrigger,
+	type DataViewVisibilityTriggerProps,
+	DataViewElement,
+	DataViewIsVisible,
+	type DataViewElementProps,
+	DataViewLayout,
+	type DataViewLayoutProps,
+	DataViewLayoutTrigger,
+	type DataViewLayoutTriggerProps,
+} from './selectionComponents.js'
+
+// Export
+export {
+	DataViewExportTrigger,
+	type DataViewExportTriggerProps,
+	CsvExportFactory,
+	type ExportFactory,
+	type ExportResult,
+	type ExportFactoryArgs,
+	useDataViewFetchAllData,
+	type FetchAllDataResult,
+} from './export.js'
+
+// Infinite scroll
+export {
+	DataViewInfiniteLoadProvider,
+	type DataViewInfiniteLoadProviderProps,
+	DataViewInfiniteLoadTrigger,
+	type DataViewInfiniteLoadTriggerProps,
+	DataViewInfiniteLoadScrollObserver,
+	type DataViewInfiniteLoadScrollObserverProps,
+	useDataViewInfiniteLoadTrigger,
+} from './infiniteLoad.js'
+
+// Loader state, reload, and conditional rendering
+export {
+	DataViewReloadTrigger,
+	type DataViewReloadTriggerProps,
+	DataViewLoaderState,
+	type DataViewLoaderStateProps,
+	DataViewLoaderStateSwitch,
+	type DataViewLoaderStateSwitchProps,
+	useDataViewLoaderState,
+	useDataViewReload,
+	useDataViewHighlightIndex,
+	DataViewEmpty,
+	type DataViewEmptyProps,
+	DataViewNonEmpty,
+	type DataViewNonEmptyProps,
+	DataViewEachRow,
+	type DataViewEachRowProps,
+	DataViewHighlightRow,
+	type DataViewHighlightRowProps,
+	DataViewKeyboardEventHandler,
+	type DataViewKeyboardEventHandlerProps,
+} from './loaderComponents.js'
+
+// Fine-grained context hooks
+export {
+	useDataViewSortingState,
+	useDataViewSortingMethods,
+	useDataViewSortingDirection,
+	type DataViewSortingMethods,
+	useDataViewPagingState,
+	useDataViewPagingInfo,
+	useDataViewPagingMethods,
+	type DataViewPagingMethods,
+	useDataViewFilteringState,
+	useDataViewFilteringMethods,
+	useDataViewFilterHandlerRegistry,
+	type DataViewFilteringMethods,
+	useDataViewSelectionState,
+	useDataViewSelectionMethods,
+	type DataViewSelectionState,
+	type DataViewSelectionMethods,
+	useDataViewElements,
+} from './contextHooks.js'
+
+// State storage
+export {
+	type StateStorage,
+	type StateStorageOrName,
+	type SetStoredState,
+	useStoredState,
+	buildDataViewKey,
+} from './stateStorage.js'
+
+// DataView key context
+export {
+	DataViewKeyProvider,
+	type DataViewKeyProviderProps,
+	useDataViewKey,
+} from './DataViewKeyProvider.js'
+
+// Select
+export * from './select/index.js'

package/src/infiniteLoad.tsx

@@ -0,0 +1,188 @@
+/**
+ * Infinite scroll / load-more components using Radix Slot.
+ *
+ * Usage:
+ * ```tsx
+ * <DataViewInfiniteLoadProvider>
+ *   <DataViewEachRow>
+ *     {(item) => <div>{item.title}</div>}
+ *   </DataViewEachRow>
+ *   <DataViewInfiniteLoadTrigger>
+ *     <button>Load More</button>
+ *   </DataViewInfiniteLoadTrigger>
+ *   <DataViewInfiniteLoadScrollObserver />
+ * </DataViewInfiniteLoadProvider>
+ * ```
+ */
+
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { composeEventHandlers } from '@radix-ui/primitive'
+import { useDataViewContext } from './DataViewContext.js'
+
+// ============================================================================
+// Context
+// ============================================================================
+
+interface InfiniteLoadContextValue {
+	readonly pages: readonly PageData[]
+	readonly loadMore: (() => void) | undefined
+	readonly isLoadingMore: boolean
+}
+
+interface PageData {
+	readonly items: readonly { id: string; data: Record<string, unknown> }[]
+}
+
+const InfiniteLoadContext = createContext<InfiniteLoadContextValue | null>(null)
+
+function useInfiniteLoadContext(): InfiniteLoadContextValue {
+	const ctx = useContext(InfiniteLoadContext)
+	if (!ctx) {
+		throw new Error('useInfiniteLoadContext must be used within DataViewInfiniteLoadProvider')
+	}
+	return ctx
+}
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export interface DataViewInfiniteLoadProviderProps {
+	children: React.ReactNode
+}
+
+export function DataViewInfiniteLoadProvider({
+	children,
+}: DataViewInfiniteLoadProviderProps): ReactElement {
+	const { paging, filtering, sorting } = useDataViewContext()
+	const [pages, setPages] = useState<PageData[]>([])
+	const [isLoadingMore, setIsLoadingMore] = useState(false)
+
+	const filterKey = JSON.stringify(filtering.resolvedWhere ?? null)
+	const sortKey = JSON.stringify(sorting.resolvedOrderBy ?? null)
+
+	const previousParams = useRef<{
+		filterKey: string
+		sortKey: string
+		limit: number | undefined
+		offset: number | undefined
+	} | null>(null)
+
+	const currentParams = useMemo(() => ({
+		filterKey,
+		sortKey,
+		limit: paging.queryLimit,
+		offset: paging.queryOffset,
+	}), [filterKey, sortKey, paging.queryLimit, paging.queryOffset])
+
+	useEffect(() => {
+		const prev = previousParams.current
+		if (!prev) {
+			setPages([])
+		} else if (
+			prev.filterKey === currentParams.filterKey
+			&& prev.sortKey === currentParams.sortKey
+			&& prev.limit === currentParams.limit
+			&& prev.limit !== undefined
+			&& prev.offset !== undefined
+			&& currentParams.offset === prev.offset + prev.limit
+		) {
+			setIsLoadingMore(true)
+		} else {
+			setPages([])
+		}
+		previousParams.current = currentParams
+	}, [currentParams])
+
+	const hasNext = paging.hasNext
+
+	const loadMore = useMemo((): (() => void) | undefined => {
+		if (!hasNext) return undefined
+		return () => paging.next()
+	}, [hasNext, paging])
+
+	const contextValue = useMemo((): InfiniteLoadContextValue => ({
+		pages,
+		loadMore,
+		isLoadingMore,
+	}), [pages, loadMore, isLoadingMore])
+
+	return (
+		<InfiniteLoadContext.Provider value={contextValue}>
+			{children}
+		</InfiniteLoadContext.Provider>
+	)
+}
+
+// ============================================================================
+// Load More Trigger — Slot-based
+// ============================================================================
+
+export interface DataViewInfiniteLoadTriggerProps {
+	children: ReactElement
+}
+
+export const DataViewInfiniteLoadTrigger = forwardRef<HTMLButtonElement, DataViewInfiniteLoadTriggerProps>(
+	(props, ref) => {
+		const { loadMore, isLoadingMore } = useInfiniteLoadContext()
+
+		if (!loadMore) return null
+
+		const { onClick, ...otherProps } = props as React.ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactElement }
+
+		return (
+			<Slot
+				ref={ref}
+				onClick={composeEventHandlers(onClick, loadMore)}
+				disabled={isLoadingMore}
+				data-state={isLoadingMore ? 'loading' : 'idle'}
+				{...otherProps}
+			/>
+		)
+	},
+)
+DataViewInfiniteLoadTrigger.displayName = 'DataViewInfiniteLoadTrigger'
+
+// ============================================================================
+// Scroll Observer (auto-trigger)
+// ============================================================================
+
+export interface DataViewInfiniteLoadScrollObserverProps {
+	/** Root margin for IntersectionObserver. Default: '200px' */
+	rootMargin?: string
+}
+
+export function DataViewInfiniteLoadScrollObserver({
+	rootMargin = '200px',
+}: DataViewInfiniteLoadScrollObserverProps = {}): ReactElement {
+	const { loadMore, isLoadingMore } = useInfiniteLoadContext()
+	const sentinelRef = useRef<HTMLSpanElement>(null)
+
+	useEffect(() => {
+		const el = sentinelRef.current
+		if (!el || !loadMore || isLoadingMore) return
+
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry?.isIntersecting && loadMore) {
+					loadMore()
+				}
+			},
+			{ rootMargin },
+		)
+
+		observer.observe(el)
+		return () => observer.disconnect()
+	}, [loadMore, isLoadingMore, rootMargin])
+
+	return <span ref={sentinelRef} data-testid="infinite-load-sentinel" />
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export function useDataViewInfiniteLoadTrigger(): (() => void) | undefined {
+	return useInfiniteLoadContext().loadMore
+}