bmdl-sdk 2.0.5 → 2.0.7

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

@@ -1,300 +0,0 @@
-'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

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

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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,178 +0,0 @@
-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'
-	}
-})