@contember/bindx-dataview 0.1.0

package/dist/useDataViewState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataViewState.d.ts","sourceRoot":"","sources":["../src/useDataViewState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "@contember/bindx-dataview",
+	"version": "0.1.0",
+	"description": "Headless DataGrid and DataView components for bindx",
+	"type": "module",
+	"main": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"scripts": {
+		"build": "tsc --build",
+		"typecheck": "tsc --build"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0"
+	},
+	"dependencies": {
+		"@contember/bindx": "0.1.0",
+		"@contember/bindx-react": "0.1.0",
+		"@radix-ui/primitive": "^1.1.3",
+		"@radix-ui/react-slot": "^1.2.4"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/contember/bindx.git",
+		"directory": "packages/bindx-dataview"
+	}
+}

package/src/DataGrid.tsx

@@ -0,0 +1,173 @@
+/**
+ * DataGrid component — headless data grid for top-level entity lists.
+ * Uses useEntityList for data loading.
+ *
+ * For has-many relation grids, use HasManyDataGrid instead.
+ */
+
+import { memo, type ReactElement, type ReactNode, useEffect, useMemo, useCallback, useRef, useState } from 'react'
+import type {
+	EntityDef,
+	EntityAccessor,
+	OrderDirection,
+	DataViewLayout,
+	SelectionValues,
+	CommonEntity,
+} from '@contember/bindx'
+import type { StateStorageOrName } from './stateStorage.js'
+import {
+	useBindxContext,
+	useEntityList,
+} from '@contember/bindx-react'
+import { useDataViewKey } from './DataViewKeyProvider.js'
+import { DataViewProvider, type DataViewContextValue, type DataViewLoaderState } from './DataViewContext.js'
+import { useDataGridSetup, QUERY_FILTER_NAME } from './useDataGridSetup.js'
+
+export { QUERY_FILTER_NAME }
+
+// ============================================================================
+// DataGrid Props
+// ============================================================================
+
+export interface DataGridProps<TRoleMap extends Record<string, object> = Record<string, object>> {
+	/** Entity definition */
+	entity: EntityDef<TRoleMap>
+	/** Children render function: receives entity proxy `it`, returns column markers + layout */
+	children: (it: EntityAccessor<CommonEntity<TRoleMap>>) => ReactNode
+	/** Initial sorting (supports multi-column: { title: 'asc', date: 'desc' }) */
+	initialSorting?: Partial<Record<string, OrderDirection>>
+	/** Items per page. null = show all. Default: 50 */
+	itemsPerPage?: number | null
+	/** Static filter (combined with dynamic filters) */
+	filter?: Record<string, unknown>
+	/** Available layouts */
+	layouts?: readonly DataViewLayout[]
+	/** Initial selection (layout + visibility) */
+	initialSelection?: SelectionValues
+	/** State storage for filter/sorting/selection state */
+	stateStorage?: StateStorageOrName
+	/** State storage for current page */
+	currentPageStateStorage?: StateStorageOrName
+	/** State storage for page size preference */
+	pagingSettingsStorage?: StateStorageOrName
+	/** Storage key prefix for isolation */
+	storageKey?: string
+}
+
+// ============================================================================
+// Implementation
+// ============================================================================
+
+function DataGridImpl<TRoleMap extends Record<string, object>>({
+	entity,
+	children,
+	initialSorting,
+	itemsPerPage = 50,
+	filter: staticFilter,
+	layouts,
+	initialSelection,
+	stateStorage,
+	currentPageStateStorage,
+	pagingSettingsStorage,
+	storageKey,
+}: DataGridProps<TRoleMap>): ReactElement | null {
+	const { schema: schemaRegistry } = useBindxContext()
+	const entityType = entity.$name
+	const contextKey = useDataViewKey()
+	const effectiveStorageKey = storageKey ?? contextKey
+
+	const setup = useDataGridSetup<CommonEntity<TRoleMap>>({
+		entityType,
+		schemaRegistry,
+		children,
+		initialSorting,
+		itemsPerPage,
+		staticFilter,
+		layouts,
+		initialSelection,
+		stateStorage,
+		currentPageStateStorage,
+		pagingSettingsStorage,
+		storageKey: effectiveStorageKey,
+	})
+
+	// ---- Loader state tracking ----
+	const hasLoadedOnce = useRef(false)
+	const [loaderState, setLoaderState] = useState<DataViewLoaderState>('initial')
+
+	// ---- Load data via useEntityList ----
+	const result = useEntityList(entity, {
+		filter: setup.combinedFilter,
+		orderBy: setup.sorting.resolvedOrderBy,
+		limit: setup.paging.queryLimit,
+		offset: setup.paging.queryOffset,
+		selection: setup.selection,
+		queryKey: setup.queryKey,
+	})
+
+	const items = result.status === 'ready' ? result.items : []
+	const itemCount = items.length
+
+	// Update loader state
+	useEffect(() => {
+		if (result.status === 'ready') {
+			hasLoadedOnce.current = true
+			setLoaderState('loaded')
+		} else if (result.status === 'error') {
+			setLoaderState('failed')
+		} else if (result.status === 'loading') {
+			setLoaderState(hasLoadedOnce.current ? 'refreshing' : 'initial')
+		}
+	}, [result.status])
+
+	// Update total count when data is ready
+	useEffect(() => {
+		if (result.status === 'ready' && setup.paging.queryLimit !== undefined && setup.paging.queryOffset !== undefined && itemCount < setup.paging.queryLimit) {
+			setup.paging.setTotalCount(setup.paging.queryOffset + itemCount)
+		}
+	}, [result.status, itemCount, setup.paging.queryLimit, setup.paging.queryOffset, setup.paging.setTotalCount])
+
+	// ---- Reload ----
+	const [, setReloadCounter] = useState(0)
+	const reload = useCallback((): void => {
+		setReloadCounter(c => c + 1)
+	}, [])
+
+	// ---- Row highlighting ----
+	const [highlightIndex, setHighlightIndex] = useState<number | null>(null)
+
+	useEffect(() => {
+		setHighlightIndex(null)
+	}, [items])
+
+	const contextValue = useMemo((): DataViewContextValue => ({
+		filtering: setup.filtering,
+		sorting: setup.sorting,
+		paging: setup.paging,
+		selection: setup.selectionState,
+		columns: setup.columns,
+		entityType,
+		items,
+		itemCount,
+		loaderState,
+		reload,
+		highlightIndex,
+		setHighlightIndex,
+		selectionMeta: setup.selection,
+		toolbarContent: setup.toolbarContent,
+		layoutRenders: setup.layoutRenders,
+		layoutElements: setup.layoutElements,
+	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, entityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
+
+	return (
+		<DataViewProvider value={contextValue}>
+			{setup.childrenJsx}
+		</DataViewProvider>
+	)
+}
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export const DataGrid = memo(DataGridImpl) as unknown as typeof DataGridImpl

package/src/DataViewContext.tsx

@@ -0,0 +1,56 @@
+/**
+ * DataView context — provides filtering, sorting, paging, selection state,
+ * and utility methods to descendant components.
+ */
+
+import React, { createContext, useContext } from 'react'
+import type { FilteringState, SortingStateResult, PagingStateResult, SelectionStateResult } from './useDataViewState.js'
+import type { ColumnLeafProps } from './columnLeaf.js'
+import type { EntityAccessor, SelectionMeta } from '@contember/bindx'
+
+export type DataViewLoaderState = 'initial' | 'loaded' | 'refreshing' | 'failed'
+
+export type DataViewItem = EntityAccessor<object>
+
+export interface DataViewElementData {
+	readonly name: string
+	readonly label?: React.ReactNode
+	readonly fallback?: boolean
+}
+
+export interface DataViewContextValue {
+	readonly filtering: FilteringState
+	readonly sorting: SortingStateResult
+	readonly paging: PagingStateResult
+	readonly selection: SelectionStateResult
+	readonly columns: readonly ColumnLeafProps[]
+	readonly entityType: string
+	readonly items: readonly DataViewItem[]
+	readonly itemCount: number
+	readonly loaderState: DataViewLoaderState
+	readonly reload: () => void
+	readonly highlightIndex: number | null
+	readonly setHighlightIndex: (index: number | null) => void
+	readonly selectionMeta: SelectionMeta
+	readonly toolbarContent?: React.ReactNode
+	/** Named layout render callbacks — analyzed during collection, called per item at runtime */
+	readonly layoutRenders: ReadonlyMap<string, (item: DataViewItem) => React.ReactNode>
+	/** Elements per layout — extracted from layout render callbacks during collection */
+	readonly layoutElements: ReadonlyMap<string, readonly DataViewElementData[]>
+}
+
+const DataViewContext = createContext<DataViewContextValue | null>(null)
+
+export function useDataViewContext(): DataViewContextValue {
+	const ctx = useContext(DataViewContext)
+	if (!ctx) {
+		throw new Error('useDataViewContext must be used within a DataViewProvider')
+	}
+	return ctx
+}
+
+export function useOptionalDataViewContext(): DataViewContextValue | null {
+	return useContext(DataViewContext)
+}
+
+export const DataViewProvider = DataViewContext.Provider

package/src/DataViewKeyProvider.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+const DataViewKeyContext = createContext<string | undefined>(undefined)
+
+export interface DataViewKeyProviderProps {
+	readonly value: string
+	readonly children: ReactNode
+}
+
+export function DataViewKeyProvider({ value, children }: DataViewKeyProviderProps): ReactNode {
+	return <DataViewKeyContext value={value}>{children}</DataViewKeyContext>
+}
+
+export function useDataViewKey(fallback = 'dataview'): string {
+	return useContext(DataViewKeyContext) ?? fallback
+}

package/src/HasManyDataGrid.tsx

@@ -0,0 +1,319 @@
+/**
+ * HasManyDataGrid — headless data grid for has-many relation fields.
+ * Fetches relation data from the parent entity with dynamic filter/sort/page params.
+ *
+ * @example
+ * ```tsx
+ * <Entity entity={schema.Author} by={{ id }}>
+ *   {(author) => (
+ *     <HasManyDataGrid field={author.articles}>
+ *       {(it) => (
+ *         <>
+ *           <TextColumn field={it.title} />
+ *           <BooleanColumn field={it.active} />
+ *         </>
+ *       )}
+ *     </HasManyDataGrid>
+ *   )}
+ * </Entity>
+ * ```
+ */
+
+import { memo, type ReactElement, type ReactNode, useEffect, useMemo, useCallback, useRef, useState } from 'react'
+import type {
+	EntityAccessor,
+	HasManyRef,
+	OrderDirection,
+	DataViewLayout,
+	SelectionValues,
+} from '@contember/bindx'
+import { FIELD_REF_META } from '@contember/bindx'
+import {
+	buildQueryFromSelection,
+	generateHasManyAlias,
+	EntityHandle,
+	setEntityData,
+} from '@contember/bindx'
+import type { SchemaRegistry } from '@contember/bindx'
+import type { StateStorageOrName } from './stateStorage.js'
+import {
+	useBindxContext,
+} from '@contember/bindx-react'
+import { useDataViewKey } from './DataViewKeyProvider.js'
+import { DataViewProvider, type DataViewContextValue, type DataViewLoaderState } from './DataViewContext.js'
+import { useDataGridSetup } from './useDataGridSetup.js'
+
+// ============================================================================
+// Props
+// ============================================================================
+
+export interface HasManyDataGridProps<TEntity extends object = object> {
+	/** Has-many relation field from parent entity */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	field: HasManyRef<TEntity, any>
+	/** Children render function: receives entity proxy `it`, returns column markers + layout */
+	children: (it: EntityAccessor<TEntity>) => ReactNode
+	/** Initial sorting */
+	initialSorting?: Partial<Record<string, OrderDirection>>
+	/** Items per page. null = show all. Default: 50 */
+	itemsPerPage?: number | null
+	/** Static filter (combined with dynamic filters) */
+	filter?: Record<string, unknown>
+	/** Available layouts */
+	layouts?: readonly DataViewLayout[]
+	/** Initial selection (layout + visibility) */
+	initialSelection?: SelectionValues
+	/** State storage for filter/sorting/selection state */
+	stateStorage?: StateStorageOrName
+	/** State storage for current page */
+	currentPageStateStorage?: StateStorageOrName
+	/** State storage for page size preference */
+	pagingSettingsStorage?: StateStorageOrName
+	/** Storage key prefix for isolation */
+	storageKey?: string
+}
+
+// ============================================================================
+// List state
+// ============================================================================
+
+interface ListState {
+	status: 'loading' | 'error' | 'ready'
+	items: Array<{ id: string; data: object }>
+	totalCount?: number
+}
+
+const INITIAL_LIST_STATE: ListState = { status: 'loading', items: [] }
+
+// ============================================================================
+// Implementation
+// ============================================================================
+
+function HasManyDataGridImpl<TEntity extends object>({
+	field,
+	children,
+	initialSorting,
+	itemsPerPage = 50,
+	filter: staticFilter,
+	layouts,
+	initialSelection,
+	stateStorage,
+	currentPageStateStorage,
+	pagingSettingsStorage,
+	storageKey,
+}: HasManyDataGridProps<TEntity>): ReactElement | null {
+	const { schema: schemaRegistry, store, dispatcher, batcher } = useBindxContext()
+
+	// Extract relation metadata from field prop
+	const fieldMeta = field[FIELD_REF_META]
+	const parentEntityType = fieldMeta.entityType
+	const parentEntityId = fieldMeta.entityId
+	const fieldName = fieldMeta.fieldName
+	const targetEntityType = field.__entityName
+
+	const contextKey = useDataViewKey()
+	const effectiveStorageKey = storageKey ?? `${parentEntityType}:${fieldName}`
+
+	const setup = useDataGridSetup<TEntity>({
+		entityType: targetEntityType,
+		schemaRegistry,
+		children,
+		initialSorting,
+		itemsPerPage,
+		staticFilter,
+		layouts,
+		initialSelection,
+		stateStorage,
+		currentPageStateStorage,
+		pagingSettingsStorage,
+		storageKey: effectiveStorageKey,
+	})
+
+	// ---- State ----
+	const hasLoadedOnce = useRef(false)
+	const [loaderState, setLoaderState] = useState<DataViewLoaderState>('initial')
+	const [listState, setListState] = useState<ListState>(INITIAL_LIST_STATE)
+
+	// ---- Build relation query spec ----
+	const alias = useMemo(
+		() => generateHasManyAlias(fieldName, {
+			filter: setup.combinedFilter,
+			orderBy: setup.sorting.resolvedOrderBy as unknown[],
+			limit: setup.paging.queryLimit,
+			offset: setup.paging.queryOffset,
+		}),
+		[fieldName, setup.combinedFilter, setup.sorting.resolvedOrderBy, setup.paging.queryLimit, setup.paging.queryOffset],
+	)
+
+	const optionsKey = useMemo(
+		() => JSON.stringify({
+			filter: setup.combinedFilter ?? {},
+			orderBy: setup.sorting.resolvedOrderBy ?? [],
+			limit: setup.paging.queryLimit,
+			offset: setup.paging.queryOffset,
+		}),
+		[setup.combinedFilter, setup.sorting.resolvedOrderBy, setup.paging.queryLimit, setup.paging.queryOffset],
+	)
+
+	// ---- Data loading via GetQuery on parent ----
+	useEffect(() => {
+		const abortController = new AbortController()
+		setListState(INITIAL_LIST_STATE)
+
+		const fetchData = async (): Promise<void> => {
+			try {
+				const targetSpec = buildQueryFromSelection(setup.selection)
+				const currentOptions = JSON.parse(optionsKey) as {
+					filter: Record<string, unknown>
+					orderBy: readonly Record<string, unknown>[]
+					limit?: number
+					offset?: number
+				}
+
+				const parentSpec = {
+					fields: [
+						{ name: 'id', sourcePath: ['id'] },
+						{
+							name: alias,
+							sourcePath: [fieldName],
+							isArray: true as const,
+							totalCount: true,
+							filter: Object.keys(currentOptions.filter).length > 0 ? currentOptions.filter : undefined,
+							orderBy: currentOptions.orderBy.length > 0 ? currentOptions.orderBy : undefined,
+							limit: currentOptions.limit,
+							offset: currentOptions.offset,
+							nested: targetSpec,
+						},
+					],
+				}
+
+				const result = await batcher.enqueue(
+					{
+						type: 'get',
+						entityType: parentEntityType,
+						by: { id: parentEntityId },
+						spec: parentSpec,
+					},
+					{ signal: abortController.signal },
+				)
+
+				if (abortController.signal.aborted) return
+
+				if (result.type !== 'get' || !result.data) {
+					setListState({ status: 'error', items: [] })
+					return
+				}
+
+				const relationData = (result.data[alias] ?? result.data[fieldName]) as Array<Record<string, unknown>> | undefined
+				const totalCount = Array.isArray(relationData) && 'totalCount' in relationData
+					? (relationData as unknown as { totalCount: number }).totalCount
+					: undefined
+
+				if (!Array.isArray(relationData)) {
+					setListState({ status: 'ready', items: [], totalCount })
+					return
+				}
+
+				const items = relationData.map((data: Record<string, unknown>) => {
+					const id = data['id'] as string
+					dispatcher.dispatch(
+						setEntityData(targetEntityType, id, data, true),
+					)
+					return { id, data: data as object }
+				})
+
+				setListState({ status: 'ready', items, totalCount })
+			} catch (error) {
+				if (abortController.signal.aborted) return
+				setListState({ status: 'error', items: [] })
+			}
+		}
+
+		fetchData()
+
+		return () => {
+			abortController.abort()
+		}
+	}, [parentEntityType, parentEntityId, fieldName, targetEntityType, alias, optionsKey, setup.selection, batcher, dispatcher, store])
+
+	// ---- Build items from state ----
+	const items = useMemo((): EntityAccessor<TEntity>[] => {
+		if (listState.status !== 'ready') return []
+		return listState.items.map((item) =>
+			EntityHandle.create<TEntity>(
+				item.id,
+				targetEntityType,
+				store,
+				dispatcher,
+				schemaRegistry as SchemaRegistry<Record<string, object>>,
+			) as unknown as EntityAccessor<TEntity>,
+		)
+	}, [listState, targetEntityType, store, dispatcher, schemaRegistry])
+
+	const itemCount = items.length
+
+	// Update loader state
+	useEffect(() => {
+		if (listState.status === 'ready') {
+			hasLoadedOnce.current = true
+			setLoaderState('loaded')
+		} else if (listState.status === 'error') {
+			setLoaderState('failed')
+		} else if (listState.status === 'loading') {
+			setLoaderState(hasLoadedOnce.current ? 'refreshing' : 'initial')
+		}
+	}, [listState.status])
+
+	// Update total count from paginateRelation
+	useEffect(() => {
+		if (listState.totalCount !== undefined) {
+			setup.paging.setTotalCount(listState.totalCount)
+		} else if (listState.status === 'ready' && setup.paging.queryLimit !== undefined && setup.paging.queryOffset !== undefined && itemCount < setup.paging.queryLimit) {
+			setup.paging.setTotalCount(setup.paging.queryOffset + itemCount)
+		}
+	}, [listState.status, listState.totalCount, itemCount, setup.paging.queryLimit, setup.paging.queryOffset, setup.paging.setTotalCount])
+
+	// ---- Reload ----
+	const [, setReloadCounter] = useState(0)
+	const reload = useCallback((): void => {
+		setReloadCounter(c => c + 1)
+	}, [])
+
+	// ---- Row highlighting ----
+	const [highlightIndex, setHighlightIndex] = useState<number | null>(null)
+
+	useEffect(() => {
+		setHighlightIndex(null)
+	}, [items])
+
+	const contextValue = useMemo((): DataViewContextValue => ({
+		filtering: setup.filtering,
+		sorting: setup.sorting,
+		paging: setup.paging,
+		selection: setup.selectionState,
+		columns: setup.columns,
+		entityType: targetEntityType,
+		items,
+		itemCount,
+		loaderState,
+		reload,
+		highlightIndex,
+		setHighlightIndex,
+		selectionMeta: setup.selection,
+		toolbarContent: setup.toolbarContent,
+		layoutRenders: setup.layoutRenders,
+		layoutElements: setup.layoutElements,
+	}), [setup.filtering, setup.sorting, setup.paging, setup.selectionState, setup.columns, targetEntityType, items, itemCount, loaderState, reload, highlightIndex, setup.selection, setup.toolbarContent, setup.layoutRenders, setup.layoutElements])
+
+	return (
+		<DataViewProvider value={contextValue}>
+			{setup.childrenJsx}
+		</DataViewProvider>
+	)
+}
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export const HasManyDataGrid = memo(HasManyDataGridImpl) as unknown as typeof HasManyDataGridImpl