feat(playground): grid sample

contember · Feb 5, 2024 · a29d664 · a29d664
1 parent de7287f
commit a29d664
Show file tree

Hide file tree

Showing 29 changed files with 1,633 additions and 286 deletions.
diff --git a/packages/playground/admin/src/components/board.tsx b/packages/playground/admin/src/components/board.tsx
@@ -11,13 +11,13 @@ import {
 	BoardSortableNullColumn,
 } from '@contember/react-board-dnd-kit'
 import {
-	Board as BoardInternal,
+	Board,
 	BoardColumn,
 	BoardEachColumn,
 	BoardEachItem,
 	BoardItem,
 	BoardNullColumn,
-	BoardProps as BoardPropsInternal,
+	BoardProps,
 } from '@contember/react-board'
 import { GripHorizontal, GripIcon } from 'lucide-react'
 import { Component } from '@contember/interface'
@@ -26,7 +26,7 @@ import { uic } from '../utils/uic'
 import { DropIndicator } from './ui/sortable'
 
 export const BoardWrapperUI = uic('div', {
-	baseClass: 'flex gap-4',
+	baseClass: 'flex gap-4 max-w-full overflow-x-auto pb-4',
 })
 export const BoardItemsWrapperUI = uic('div', {
 	baseClass: 'flex flex-col gap-2 p-2',
@@ -35,10 +35,10 @@ export const BoardColumnHeaderUI = uic('div', {
 	baseClass: 'px-4 py-1 border-b border-gray-100',
 })
 export const BoardCardUI = uic('div', {
-	baseClass: 'rounded border bg-card text-card-foreground shadow-sm p-4 relative',
+	baseClass: 'rounded border bg-card text-card-foreground shadow-sm p-4 relative hover:shadow-md transition-all duration-200',
 })
 export const BoardColumnUI = uic('div', {
-	baseClass: 'rounded-lg border bg-card text-card-foreground shadow-sm relative min-w-48 data-[sortable-over="item"]:bg-yellow-100',
+	baseClass: 'rounded-lg border bg-card text-card-foreground shadow-md relative min-w-48 data-[sortable-over="item"]:bg-yellow-100 hover:shadow-lg transition-all duration-200',
 })
 export const BoardDragOverlayUI = uic('div', {
 	baseClass: 'rounded border border-gray-300 p-4 relative bg-opacity-60 bg-gray-100 backdrop-blur-sm',
@@ -179,15 +179,15 @@ export type DefaultBoardProps =
 		columnFooter?: ReactNode,
 		children: ReactNode
 	}
-	& BoardPropsInternal
+	& BoardProps
 
 export const DefaultBoard = Component<DefaultBoardProps>(({ columnHeader, nullColumnHeader, children, columnFooter, ...props }) => {
 	const itemsSortable = 'sortableBy' in props && props.sortableBy !== undefined
 	const columnsSortable = 'columnsSortableBy' in props && props.columnsSortableBy !== undefined
 	const anySortable = itemsSortable || columnsSortable
 	if (!anySortable) {
 		return (
-			<BoardInternal {...props}>
+			<Board {...props}>
 				<BoardWrapperUI>
 					<BoardNonSortableColumn
 						columnHeader={columnHeader}
@@ -199,13 +199,13 @@ export const DefaultBoard = Component<DefaultBoardProps>(({ columnHeader, nullCo
 						</BoardNonSortableItems>
 					</BoardNonSortableColumn>
 				</BoardWrapperUI>
-			</BoardInternal>
+			</Board>
 		)
 	}
 	const ItemsComponent = itemsSortable ? BoardSortableItems : BoardNonSortableItems
 
 	return (
-		<BoardInternal {...props}>
+		<Board {...props}>
 			<BoardSortable>
 				<BoardWrapperUI>
 					<BoardSortableColumn
@@ -232,17 +232,17 @@ export const DefaultBoard = Component<DefaultBoardProps>(({ columnHeader, nullCo
 					</BoardDragOverlayUI>
 				</BoardSortableItemDragOverlay> : null}
 			</BoardSortable>
-		</BoardInternal>
+		</Board>
 	)
 }, ({ children, columnHeader, nullColumnHeader, ...props }) => {
 	return <>
-		<BoardInternal {...props}>
+		<Board {...props}>
 			<BoardItem>
 				{children}
 			</BoardItem>
 			<BoardColumn>
 				{columnHeader}
 			</BoardColumn>
-		</BoardInternal>
+		</Board>
 	</>
 })
diff --git a/packages/playground/admin/src/components/datagrid/column-header.tsx b/packages/playground/admin/src/components/datagrid/column-header.tsx
@@ -1,17 +1,18 @@
 import { cn } from '../../utils/cn'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../ui/dropdown'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown'
 import { Button } from '../ui/button'
 import { ReactNode } from 'react'
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from 'lucide-react'
-import { DataViewSortingCondition, DataViewSortingTrigger } from '@contember/react-dataview'
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, EyeOffIcon } from 'lucide-react'
+import { DataViewSelectionTrigger, DataViewSortingSwitch, DataViewSortingTrigger } from '@contember/react-dataview'
 
 
-export function DataTableColumnHeader<TData, TValue>({ field, children, enableOrdering }: {
+export function DataViewColumnHeader<TData, TValue>({ field, children, enableOrdering, enableHiding }: {
 	field: string,
 	enableOrdering?: boolean,
+	enableHiding?: boolean,
 	children: ReactNode,
 }) {
-	if (!enableOrdering) {
+	if (!enableOrdering && !enableHiding) {
 		return <div>{children}</div>
 	}
 
@@ -22,38 +23,41 @@ export function DataTableColumnHeader<TData, TValue>({ field, children, enableOr
 					<Button
 						variant="ghost"
 						size="sm"
-						className="-ml-3 h-8 data-[state=open]:bg-accent"
+						className="flex-inline gap-1 -ml-3 h-8 data-[state=open]:bg-accent"
 					>
 						<span>{children}</span>
-						<DataViewSortingCondition field={field} direction="asc">
-							<ArrowDownIcon className="ml-2 h-4 w-4" />
-						</DataViewSortingCondition>
-						<DataViewSortingCondition field={field} direction="desc">
-							<ArrowUpIcon className="ml-2 h-4 w-4" />
-						</DataViewSortingCondition>
-						<DataViewSortingCondition field={field} direction="none">
-							<ArrowUpDownIcon className="ml-2 h-4 w-4" />
-						</DataViewSortingCondition>
+
+						{enableOrdering && <DataViewSortingSwitch
+							field={field}
+							asc={<ArrowDownIcon className={'h-4 w-4'} />}
+							desc={<ArrowUpIcon className={'h-4 w-4'} />}
+							none={<ArrowUpDownIcon className={'h-4 w-4'} />}
+						/>}
 					</Button>
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="start">
-					<DataViewSortingTrigger field={field} direction="asc">
-						<DropdownMenuItem>
-							<ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-							Asc
-						</DropdownMenuItem>
-					</DataViewSortingTrigger>
-					<DataViewSortingTrigger field={field} direction="desc">
-						<DropdownMenuItem>
-							<ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-							Desc
-						</DropdownMenuItem>
-					</DataViewSortingTrigger>
-					<DropdownMenuSeparator />
-					{/*<DropdownMenuItem onClick={() => setIsColumnHidden(columnKey, true)}>*/}
-					{/*	<EyeOffIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />*/}
-					{/*	Hide*/}
-					{/*</DropdownMenuItem>*/}
+					{enableOrdering && <>
+						<DataViewSortingTrigger field={field} direction="asc">
+							<DropdownMenuItem>
+								<ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+								Asc
+							</DropdownMenuItem>
+						</DataViewSortingTrigger>
+						<DataViewSortingTrigger field={field} direction="desc">
+							<DropdownMenuItem>
+								<ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+								Desc
+							</DropdownMenuItem>
+						</DataViewSortingTrigger>
+					</>}
+					{enableHiding &&
+						<DataViewSelectionTrigger name={field} value={false}>
+							<DropdownMenuItem>
+								<EyeOffIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+								Hide
+							</DropdownMenuItem>
+						</DataViewSelectionTrigger>
+					}
 				</DropdownMenuContent>
 			</DropdownMenu>
 		</div>

diff --git a/packages/playground/admin/src/components/datagrid/empty.tsx b/packages/playground/admin/src/components/datagrid/empty.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export const DataViewNoResultsRow = () => (
+	<div className={'p-4 text-lg rounded-md border'}>
+		No results.
+	</div>
+)
diff --git a/packages/playground/admin/src/components/datagrid/index.ts b/packages/playground/admin/src/components/datagrid/index.ts
@@ -1,2 +1,6 @@
 export * from './column-header'
+export * from './empty'
+export * from './loader'
 export * from './pagination'
+export * from './relation-filter'
+export * from './text-filter'
diff --git a/packages/playground/admin/src/components/datagrid/layout-switcher.tsx b/packages/playground/admin/src/components/datagrid/layout-switcher.tsx
@@ -0,0 +1,23 @@
+import { DataViewSelectionTrigger } from '@contember/react-dataview'
+import { Button } from '../ui/button'
+import { Grid2x2Icon, TableIcon } from 'lucide-react'
+import * as React from 'react'
+
+export const DataViewLayoutSwitcher = () => {
+	return <>
+		<DataViewSelectionTrigger name={'layout'} value={'grid'}>
+			<Button variant={'outline'} size={'sm'}
+					className={'data-[active]:text-blue-600 data-[active]:bg-gray-50 data-[active]:shadow-inner'}>
+				<Grid2x2Icon className={'w-3 h-3'} />
+				<span className={'sr-only'}>Show grid</span>
+			</Button>
+		</DataViewSelectionTrigger>
+		<DataViewSelectionTrigger name={'layout'} value={'table'}>
+			<Button variant={'outline'} size={'sm'}
+					className={'data-[active]:text-blue-600 data-[active]:bg-gray-50 data-[active]:shadow-inner'}>
+				<TableIcon className={'w-3 h-3'} />
+				<span className={'sr-only'}>Show table</span>
+			</Button>
+		</DataViewSelectionTrigger>
+	</>
+}
diff --git a/packages/playground/admin/src/components/datagrid/loader.tsx b/packages/playground/admin/src/components/datagrid/loader.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export const DataViewLoaderOverlay = () => {
+	const [show, setShow] = React.useState(false)
+	React.useEffect(() => {
+		requestAnimationFrame(() => {
+			setShow(true)
+		})
+	}, [])
+
+	return (
+		<div className={cn('absolute inset-0 flex items-center justify-center bg-white bg-opacity-50 backdrop-blur-sm transition-all duration-500 delay-200', show ? 'opacity-100' : 'opacity-0')}>
+			<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-900">
+			</div>
+		</div>
+	)
+}