bmdl-sdk 1.5.8 → 2.0.0

package/src/components/atoms/Table/FilterContent/FilterContent.tsx

@@ -0,0 +1,300 @@
+'use client'
+
+import { CheckedState } from '@radix-ui/react-checkbox'
+import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import {
+	ChangeEvent,
+	Dispatch,
+	SetStateAction,
+	useEffect,
+	useState
+} from 'react'
+import { DateRange } from 'react-day-picker'
+
+import { Checkbox, Input, Label, Spin } from '@/components/atoms'
+
+import { IFilterQuery } from '@/types'
+
+import { DatePicker } from '../../DatePicker'
+import { RangeNumber } from '../../RangeNumber'
+import { Typography } from '../../Typography'
+
+import { useDebounce } from '@/hooks'
+import { _, addParam, getParam, removeParam } from '@/utils'
+
+const { Link } = Typography
+
+type FilterContentProps = {
+	column: any
+	getData: any
+	filterQuery: IFilterQuery
+	setFilterState: Dispatch<SetStateAction<Record<string, boolean>>>
+}
+
+function FilterContent({
+	column,
+	getData,
+	filterQuery,
+	setFilterState
+}: FilterContentProps) {
+	const t = useTranslations()
+	//
+	const router = useRouter()
+	//
+	const { querykey, queryFn } = filterQuery
+	//
+	const [q, setQ] = useState<string>()
+	const [checkedState, setCheckedState] = useState<Record<string, boolean>>(
+		{}
+	)
+	const [rangeState, setRangeState] = useState<DateRange>()
+	const debouncedQ = useDebounce(q, 300)
+	//
+	const { data, loading, refetch } = queryFn({
+		variables: {
+			data: {
+				column: column.key
+			}
+		}
+	})
+	//
+	useEffect(() => {
+		const filter = getParam('filter')
+		const filterValues = filter ? JSON.parse(filter)[column.key] : []
+		const isAll = filterValues?.includes('ALL')
+
+		if (data?.[querykey].data.length) {
+			if (
+				filterValues?.length === 2 &&
+				_.isNumber(filterValues?.[0]) &&
+				_.isNumber(filterValues?.[1])
+			) {
+				setRangeState({
+					from: new Date(filterValues[0]),
+					to: new Date(filterValues[1])
+				})
+			} else {
+				setCheckedState(
+					Object.fromEntries(
+						data?.[querykey].data.map((item: any) => [
+							item.id,
+							isAll || filterValues?.includes(item.id)
+						])
+					)
+				)
+			}
+		}
+	}, [data])
+	//
+	const allChecked =
+		Object.values(checkedState).length &&
+		Object.values(checkedState).every(Boolean)
+	const someChecked = Object.values(checkedState).some(Boolean)
+	//
+	const onAllCheckedChange = (checked: boolean) => {
+		setCheckedState(prev => {
+			const newState = Object.keys(prev).reduce(
+				(acc, key) => {
+					acc[key] = checked
+					return acc
+				},
+				{} as Record<string, boolean>
+			)
+
+			return newState
+		})
+
+		const oldFilter = getParam('filter')
+
+		const newFilter: Record<string, string[]> = {
+			...(oldFilter ? JSON.parse(oldFilter) : {})
+		}
+
+		if (checked) {
+			newFilter[column.key] = ['ALL']
+		} else {
+			delete newFilter[column.key]
+		}
+
+		if (Object.values(newFilter).some(f => f.length)) {
+			addParam(router, 'filter', JSON.stringify(newFilter))
+		} else {
+			removeParam(router, 'filter')
+		}
+
+		setFilterState(prev => {
+			prev[column.key] = checked
+
+			return prev
+		})
+
+		getData({
+			filter: newFilter
+		})
+	}
+	//
+	const onCheckedChange = (id: string, checked: CheckedState) => {
+		let filterValue: string[] = []
+		//
+		setCheckedState(prev => {
+			const newState = {
+				...prev,
+				[id]: checked as boolean
+			}
+
+			const checkedIds = Object.entries(newState)
+				.filter(d => d[1])
+				.map(d => d[0])
+
+			filterValue =
+				data?.[querykey].data
+					.map((item: any) => item.id)
+					.filter((id: string) => checkedIds.includes(id)) || []
+
+			return newState
+		})
+
+		const oldFilter = getParam('filter')
+
+		const newFilter: Record<string, string[]> = {
+			...(oldFilter ? JSON.parse(oldFilter) : {})
+		}
+
+		if (filterValue.length) {
+			newFilter[column.key] = filterValue
+		} else {
+			delete newFilter[column.key]
+		}
+
+		if (Object.values(newFilter).some(f => f.length)) {
+			addParam(router, 'filter', JSON.stringify(newFilter))
+		} else {
+			removeParam(router, 'filter')
+		}
+
+		setFilterState(prev => {
+			prev[column.key] = Boolean(filterValue.length)
+
+			return prev
+		})
+
+		getData({
+			filter: newFilter
+		})
+	}
+	//
+	const { sort: type } = column
+	//
+	const onChangeValue = (value: DateRange) => {
+		const oldFilter = getParam('filter')
+
+		const newFilter: Record<string, any> = {
+			...(oldFilter ? JSON.parse(oldFilter) : {})
+		}
+
+		if (value) {
+			newFilter[column.key] = [value.from!.getTime(), value.to!.getTime()]
+		} else {
+			delete newFilter[column.key]
+		}
+
+		if (Object.values(newFilter).some(f => f.length || f.from)) {
+			addParam(router, 'filter', JSON.stringify(newFilter))
+		} else {
+			removeParam(router, 'filter')
+		}
+
+		setFilterState(prev => {
+			prev[column.key] = Boolean(value)
+
+			return prev
+		})
+
+		getData({
+			filter: newFilter
+		})
+	}
+	//
+	useEffect(() => {
+		if (!_.isUndefined(debouncedQ)) {
+			refetch({
+				data: { column: column.key, q: debouncedQ }
+			})
+		}
+	}, [debouncedQ])
+	//
+	return (
+		<>
+			{type === 'number' ? <RangeNumber size={'sm'} /> : null}
+			{type === 'date' ? (
+				<DatePicker
+					size={'sm'}
+					mode={'range'}
+					onSelect={value => onChangeValue(value!)}
+					defaultOpen={{ isOpen: true, delay: 100 }}
+					defaultSelected={rangeState}
+				/>
+			) : null}
+			{type === 'string' ? (
+				<Input.Search
+					value={q || ''}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						setQ(e.target.value)
+					}
+					placeholder={t('search')}
+					sizes={'sm'}
+				/>
+			) : null}
+			{type === 'string' ? (
+				<>
+					<div className='my-3 flex justify-between'>
+						<Link
+							asChild
+							href='#'
+							size={'sm'}
+							onClick={() => onAllCheckedChange(true)}
+							disabled={!!allChecked}
+						>
+							<button>{t('select-all')}</button>
+						</Link>
+						<Link
+							asChild
+							href='#'
+							size={'sm'}
+							onClick={() => onAllCheckedChange(false)}
+							disabled={!someChecked}
+						>
+							<button>{t('reset')}</button>
+						</Link>
+					</div>
+					<div className='flex flex-col gap-2'>
+						{loading ? (
+							<Spin />
+						) : (
+							data?.[querykey].data.map((item: any) => {
+								return (
+									<Label htmlFor={item.id} key={item.id}>
+										<Checkbox
+											id={item.id}
+											checked={checkedState[item.id]}
+											onCheckedChange={checked =>
+												onCheckedChange(
+													item.id,
+													checked
+												)
+											}
+										/>
+										{item.value}
+									</Label>
+								)
+							})
+						)}
+					</div>
+				</>
+			) : null}
+		</>
+	)
+}
+
+export { FilterContent }

package/src/components/atoms/Table/FilterContent/index.ts

@@ -0,0 +1 @@
+export { FilterContent } from './FilterContent'

package/src/components/atoms/Table/FilterIcon/FilterIcon.tsx

@@ -0,0 +1,16 @@
+import { TbFilter, TbFilterCheck } from 'react-icons/tb'
+
+type FilterIconProps = {
+	type?: string
+}
+
+function FilterIcon({ type }: FilterIconProps) {
+	switch (type) {
+		case 'string':
+			return <TbFilterCheck />
+		default:
+			return <TbFilter />
+	}
+}
+
+export { FilterIcon }

package/src/components/atoms/Table/FilterIcon/index.ts

@@ -0,0 +1 @@
+export { FilterIcon } from './FilterIcon'

package/src/components/atoms/Table/SortIcon/SortIcon.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx'
+
+import { TbChevronDown, TbChevronUp } from 'react-icons/tb'
+
+import { SortType } from '@/types'
+
+type SortIconProps = {
+	state: SortType
+}
+
+function SortIcon({ state }: SortIconProps) {
+	return (
+		<>
+			<span
+				className={clsx('-mb-0.5', {
+					'dark:text-dark-gray-300 text-gray-800': state === 'asc'
+				})}
+			>
+				<TbChevronUp size={18} />
+			</span>
+			<span
+				className={clsx('-mt-0.5', {
+					'dark:text-dark-gray-300 text-gray-800': state === 'desc'
+				})}
+			>
+				<TbChevronDown size={18} />
+			</span>
+		</>
+	)
+}
+
+export { SortIcon }

package/src/components/atoms/Table/SortIcon/index.ts

@@ -0,0 +1 @@
+export { SortIcon } from './SortIcon'

package/src/components/atoms/Table/Table.styles.ts

@@ -0,0 +1,178 @@
+import { cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const tableWrapperStyles = twJoin({
+	position: 'relative',
+	display: 'max-h-[calc(100vh-328px)] overflow-y-auto'
+})
+
+// /////////////////////////
+
+export const tableStyles = twJoin({
+	display: 'table-auto w-full',
+	visual: 'border-separate border-spacing-0',
+	//
+	dark: {
+		visual: 'dark:border-dark-divider'
+	}
+})
+
+// /////////////////////////
+
+export const theadStyles = twJoin({
+	position: 'sticky top-0 z-10',
+	visual: 'bg-white',
+	//
+	dark: 'dark:bg-dark-gray-900'
+})
+
+// /////////////////////////
+
+export const headStylesWrapper = cva(
+	twJoin({
+		tw: 'group',
+		mouse: 'hover:cursor-pointer',
+		position: 'relative',
+		text: 'text-start uppercase',
+		visual: 'border-y border-divider',
+		hover: 'hover:[&_[data-type="default"]]:bg-[#F4F2FE]',
+		attrs: 'has-[[data-state="open"]]:[&_[data-type="default"]]:bg-[#F4F2FE]',
+		after: {
+			position:
+				'after:content-[""] after:absolute after:top-3 after:-right-px after:-z-1',
+			display:
+				'after:h-4 has-[[data-type*="sort"]]:after:w-px after:-mr-px after:inline-block',
+			visual: 'after:bg-divider dark:after:bg-dark-divider',
+			hover: 'has-[[data-type="sort"]]:hover:after:opacity-0',
+			attrs: 'has-[[data-state="open"]]:after:opacity-0'
+		},
+		//
+		dark: {
+			visual: 'dark:border-dark-divider',
+			hover: 'dark:hover:[&_[data-type="default"]]:bg-[#353757]',
+			attrs: 'dark:has-[[data-state="open"]]:[&_[data-type="default"]]:bg-[#353757]'
+		}
+	}),
+	{
+		variants: {
+			isLast: {
+				true: 'after:hidden!'
+			}
+		},
+		defaultVariants: {
+			isLast: false
+		}
+	}
+)
+
+// /////////////////////////
+
+export const headStyles = cva('flex py-3', {
+	variants: {
+		type: {
+			selection: 'pl-5 pr-1',
+			default: 'pl-5 pr-20',
+			'not-sort': 'px-5',
+			actions: 'pl-1 pr-5'
+		}
+	},
+	defaultVariants: {
+		type: 'default'
+	}
+})
+
+// /////////////////////////
+
+export const sortFilterStyles = twJoin({
+	position: 'absolute top-0 right-0 bottom-0',
+	display: 'flex'
+})
+
+// /////////////////////////
+
+export const filterStyles = cva(
+	twJoin({
+		position: 'relative top-0 bottom-0',
+		display: 'w-6 inline-flex items-center justify-center',
+		text: 'text-gray-800',
+		animation: 'transition-opacity',
+		dark: 'dark:text-dark-gray-300'
+	}),
+	{
+		variants: {
+			isActive: {
+				true: 'opacity-100',
+				false: 'opacity-0'
+			}
+		},
+		defaultVariants: {
+			isActive: false
+		}
+	}
+)
+
+// /////////////////////////
+
+export const sortStyles = twJoin({
+	position: 'relative top-0 bottom-0',
+	display: 'flex w-10 flex-col items-center justify-center',
+	text: 'text-gray',
+	animation: 'transition-color',
+	dark: 'dark:text-dark-gray-600'
+})
+
+// /////////////////////////
+
+export const rowStyles = twJoin({
+	hover: 'hover:bg-primary/5',
+	childs: [
+		'has-[[data-state="open"]]:bg-primary/5',
+		'has-[[data-state="checked"]]:bg-primary/10',
+		'hover:[&_[data-type="name"]_span]:text-primary'
+	]
+})
+
+// /////////////////////////
+
+export const cellStyles = cva(
+	twJoin({
+		display: 'py-2.5',
+		visual: 'border-b border-divider',
+		//
+		dark: {
+			visual: 'dark:border-dark-divider'
+		}
+	}),
+	{
+		variants: {
+			type: {
+				selection: 'pl-5 pr-1 align-middle',
+				default: 'px-5',
+				actions: 'pl-1 pr-5 align-right'
+			}
+		},
+		defaultVariants: {
+			type: 'default'
+		}
+	}
+)
+
+// /////////////////////////
+
+export const footerStyles = twJoin({
+	display: 'flex items-center justify-between px-6 py-4'
+})
+
+// /////////////////////////
+
+export const notFoundStyles = twJoin({
+	display: 'flex flex-col justify-center items-center size-full p-8',
+	childs: {
+		text: '[&_svg]:text-gray'
+	},
+	//
+	dark: {
+		childs: 'dark:[&_svg]:text-dark-gray-800'
+	}
+})