bmdl-sdk 1.5.9 → 2.0.1

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

@@ -0,0 +1,484 @@
+'use client'
+
+import { CheckedState } from '@radix-ui/react-checkbox'
+import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import { type ComponentProps, useEffect, useRef, useState } from 'react'
+
+import { Actions, Checkbox, Pagination, Popover } from '@/components/atoms'
+
+import {
+	IColumnItem,
+	IFilterQuery,
+	IPaginationOptions,
+	ISortItem,
+	SortType
+} from '@/types'
+
+import {
+	cellStyles,
+	filterStyles,
+	footerStyles,
+	headStyles,
+	headStylesWrapper,
+	rowStyles,
+	sortFilterStyles,
+	sortStyles,
+	tableStyles,
+	tableWrapperStyles,
+	theadStyles
+} from './Table.styles'
+
+import { Typography } from '../Typography'
+
+import { FilterContent } from './FilterContent'
+import { FilterIcon } from './FilterIcon'
+import { SortIcon } from './SortIcon'
+import { getNotFoundData } from './Table.utils'
+import { useStickyHeader } from '@/hooks'
+import { addParam, getParam, getRangePagination, removeParam } from '@/utils'
+
+const { Text } = Typography
+
+type TableProps = ComponentProps<'div'> & {
+	columns: IColumnItem[]
+	dataSource: any[]
+	defaultSelection?: number[] | string[]
+	onRowSelection?: (ids: string[]) => void
+	pagination?: IPaginationOptions & { name?: string }
+	getData?: (data: Record<string, any>) => void
+	filterQuery?: IFilterQuery
+	actions?: boolean
+	inModal?: boolean
+	isAllChecked?: boolean
+}
+
+function Table({
+	columns,
+	dataSource,
+	defaultSelection,
+	onRowSelection,
+	pagination,
+	getData,
+	filterQuery,
+	actions = false,
+	inModal = false,
+	isAllChecked = false,
+	className
+}: TableProps) {
+	const tg = useTranslations()
+	const t = useTranslations(pagination?.name)
+	//
+	const scrollRef = useRef<HTMLDivElement>(null)
+	const headerRef = useRef<HTMLTableSectionElement>(null)
+	//
+	useStickyHeader(scrollRef, headerRef)
+	//
+	const router = useRouter()
+	//
+	const rangePagination = pagination ? getRangePagination(pagination) : null
+	//
+	const [sortState, setSortState] = useState<Record<string, SortType>>({})
+	const [filterState, setFilterState] = useState<Record<string, boolean>>({})
+	const [checkedState, setCheckedState] = useState<Record<string, boolean>>(
+		defaultSelection
+			? defaultSelection.reduce(
+					(acc, id) => {
+						acc[id] = true
+
+						return acc
+					},
+					{} as Record<string, boolean>
+				)
+			: {}
+	)
+	//
+	useEffect(() => {
+		const sort = getParam('sort')
+
+		if (columns?.length) {
+			const sorts = sort
+				? Object.fromEntries(
+						JSON.parse(sort).map(({ column, order }: ISortItem) => {
+							return [column, order]
+						})
+					)
+				: {}
+			//
+			setSortState(
+				Object.fromEntries(
+					columns.map((d: any) => [d.key, sorts[d.key] || false])
+				)
+			)
+		}
+
+		const filter = getParam('filter')
+
+		if (filter) {
+			const filters = Object.entries(JSON.parse(filter)).map(
+				([key, value]) => {
+					return [key, Boolean(value)]
+				}
+			)
+			//
+			setFilterState(Object.fromEntries(filters))
+		}
+	}, [])
+	//
+	useEffect(() => {
+		if (dataSource?.[0]?.id) {
+			setCheckedState(prev => {
+				const newState: Record<string, boolean> = {}
+
+				dataSource.forEach((d: any) => {
+					newState[d.id] = prev.hasOwnProperty(d.id)
+						? prev[d.id]
+						: isAllChecked
+				})
+
+				const prevKeys = Object.keys(prev).sort()
+				const newKeys = Object.keys(newState).sort()
+
+				if (
+					prevKeys.length === newKeys.length &&
+					prevKeys.every((key, i) => key === newKeys[i]) &&
+					prevKeys.every(key => prev[key] === newState[key])
+				) {
+					return prev
+				}
+
+				return newState
+			})
+		}
+	}, [dataSource])
+	//
+	const allChecked =
+		Object.values(checkedState).length &&
+		Object.values(checkedState).every(Boolean)
+	const someChecked = Object.values(checkedState).some(Boolean)
+	const isIndeterminate = someChecked && !allChecked
+	//
+	const onAllCheckedChange = (checked: boolean) => {
+		setCheckedState(prev => {
+			const newState = Object.keys(prev).reduce(
+				(acc, key) => {
+					acc[key] = checked
+					return acc
+				},
+				{} as Record<string, boolean>
+			)
+
+			if (onRowSelection) {
+				const selectedKeys = Object.keys(newState).filter(
+					key => newState[key]
+				)
+				onRowSelection(selectedKeys)
+			}
+
+			return newState
+		})
+	}
+	//
+	const onCheckedChange = (id: string, checked: CheckedState) => {
+		setCheckedState(prev => {
+			const newState = {
+				...prev,
+				[id]: checked as boolean
+			}
+
+			if (onRowSelection) {
+				const selectedKeys = Object.keys(newState).filter(
+					key => newState[key]
+				)
+				onRowSelection(selectedKeys)
+			}
+
+			return newState
+		})
+	}
+	//
+	const onSortChange = (column: any) => {
+		const { key } = column
+		let order: SortType = false
+		//
+		const newState = Object.keys(sortState).reduce(
+			(acc, i) => {
+				if (i === key) {
+					if (sortState[i] === false) {
+						order = 'asc'
+					} else if (sortState[i] === 'asc') {
+						order = 'desc'
+					} else if (sortState[i] === 'desc') {
+						order = false
+					}
+					acc[i] = order
+				} else {
+					acc[i] = false
+				}
+
+				return acc
+			},
+			{} as Record<string, SortType>
+		)
+		//
+		setSortState(newState)
+		//
+		const sort = order ? [{ column: key, order }] : []
+		//
+		if (order) {
+			addParam(router, 'sort', JSON.stringify(sort))
+		} else {
+			removeParam(router, 'sort')
+		}
+		//
+		setTimeout(() => removeParam(router, 'page'), 350)
+		//
+		getData?.({
+			sort,
+			page: 0
+		})
+	}
+	//
+	return (
+		<div className={className} {...(inModal && { ref: scrollRef })}>
+			<div className={tableWrapperStyles}>
+				<table className={tableStyles}>
+					<colgroup>
+						{onRowSelection && <col style={{ width: 42 }} />}
+						{/* {columns.map((column: any) => {
+							return (
+								<col
+									key={column.key}
+									{...(column.width && {
+										style: {
+											width: column.width
+										}
+									})}
+								/>
+							)
+						})} */}
+						{actions && <col style={{ width: 80 }} />}
+					</colgroup>
+					<thead
+						className={theadStyles}
+						{...(inModal && { ref: headerRef })}
+					>
+						<tr>
+							{onRowSelection && (
+								<th className={headStylesWrapper()} scope='col'>
+									<div
+										className={headStyles({
+											type: 'selection'
+										})}
+										data-type='selection'
+									>
+										<Checkbox
+											checked={allChecked || someChecked}
+											onCheckedChange={onAllCheckedChange}
+											indeterminate={isIndeterminate}
+										/>
+									</div>
+								</th>
+							)}
+							{columns.map((column: any, idx: number) => {
+								const isLast = idx === columns.length - 1
+								//
+								return (
+									<th
+										key={column.key}
+										className={headStylesWrapper({
+											isLast: isLast && !actions
+										})}
+										scope='col'
+									>
+										{column.sort && filterQuery ? (
+											<Popover
+												trigger={
+													<div
+														className={headStyles()}
+														data-type='default'
+													>
+														<Text
+															strong
+															accent
+															size={'sm'}
+														>
+															{column.title}
+														</Text>
+														<div
+															className={
+																sortFilterStyles
+															}
+														>
+															<span
+																data-type='filter'
+																className={filterStyles(
+																	{
+																		isActive:
+																			filterState[
+																				column
+																					.key
+																			]
+																	}
+																)}
+															>
+																<FilterIcon
+																	type={
+																		column.sort
+																	}
+																/>
+															</span>
+															<button
+																onClick={e => {
+																	e.preventDefault()
+																	onSortChange(
+																		column
+																	)
+																}}
+																data-type='sort'
+																className={
+																	sortStyles
+																}
+															>
+																<SortIcon
+																	state={
+																		sortState[
+																			column
+																				.key
+																		]
+																	}
+																/>
+															</button>
+														</div>
+													</div>
+												}
+												arrow={false}
+												sideOffset={1}
+												align='start'
+												className='p-4'
+											>
+												<FilterContent
+													column={column}
+													getData={getData}
+													filterQuery={filterQuery}
+													setFilterState={
+														setFilterState
+													}
+												/>
+											</Popover>
+										) : (
+											<div
+												className={headStyles()}
+												data-type='not-sort'
+											>
+												<Text strong accent size={'sm'}>
+													{column.title}
+												</Text>
+											</div>
+										)}
+									</th>
+								)
+							})}
+							{actions && (
+								<th
+									className={headStylesWrapper()}
+									scope='col'
+								></th>
+							)}
+						</tr>
+					</thead>
+					<tbody>
+						{dataSource?.length
+							? dataSource.map((dataItem: any, idx: number) => {
+									return (
+										<tr
+											key={dataItem.id || idx}
+											className={rowStyles}
+										>
+											{onRowSelection && (
+												<td
+													className={cellStyles({
+														type: 'selection'
+													})}
+												>
+													<div className='flex items-center'>
+														<Checkbox
+															checked={
+																checkedState[
+																	dataItem.id
+																]
+															}
+															onCheckedChange={checked =>
+																onCheckedChange(
+																	dataItem.id,
+																	checked
+																)
+															}
+														/>
+													</div>
+												</td>
+											)}
+											{Object.entries(dataItem).map(
+												([key, value]) => {
+													if (key === 'id') return
+													//
+													return (
+														<td
+															key={key}
+															className={cellStyles()}
+														>
+															{value as any}
+														</td>
+													)
+												}
+											)}
+											{actions && (
+												<td
+													className={cellStyles({
+														type: 'actions'
+													})}
+												>
+													<Actions className='ml-auto' />
+												</td>
+											)}
+										</tr>
+									)
+								})
+							: getNotFoundData(
+									columns.length + 2,
+									tg('no-data')
+								)}
+					</tbody>
+				</table>
+			</div>
+
+			{!inModal && (
+				<div className={footerStyles}>
+					{pagination && pagination.total > pagination.limit && (
+						<>
+							<Text muted size={'xs'}>
+								{pagination.name
+									? t('items', {
+											from: rangePagination!.from,
+											to: rangePagination!.to,
+											total: pagination.total
+										})
+									: tg('pagination.items', {
+											from: rangePagination!.from,
+											to: rangePagination!.to,
+											total: pagination.total
+										})}
+							</Text>
+							<Pagination
+								pagination={pagination}
+								getData={getData}
+							/>
+						</>
+					)}
+				</div>
+			)}
+		</div>
+	)
+}
+
+export { Table }

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

@@ -0,0 +1,19 @@
+import { notFoundStyles } from './Table.styles'
+
+import { EmptyIcon } from '../icons'
+import { Typography } from '../Typography'
+
+const { Title } = Typography
+
+export const getNotFoundData = (colCount = 1, title: string) => {
+	return (
+		<tr data-type='not-found'>
+			<td colSpan={colCount}>
+				<div className={notFoundStyles}>
+					<EmptyIcon size={100} />
+					<Title level={5}>{title}</Title>
+				</div>
+			</td>
+		</tr>
+	)
+}

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

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

package/src/components/atoms/Tabs/Tabs.tsx

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react'
+
+import { Tabs as RadixTabs } from 'radix-ui'
+
+type TabsProps = ComponentProps<typeof RadixTabs.Root>
+
+function Tabs({ children, ...props }: TabsProps) {
+	return <RadixTabs.Root {...props}>{children}</RadixTabs.Root>
+}
+
+Tabs.List = RadixTabs.List
+Tabs.Trigger = RadixTabs.Trigger
+Tabs.Content = RadixTabs.Content
+
+export { Tabs }

package/src/components/atoms/Tabs/index.ts

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

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

@@ -0,0 +1,64 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		tw: [
+			'group-has-[[data-state="open"]]/input:border-primary',
+			'group-has-[[data-state="open"]]/input:shadow-primary-sm',
+			'hover:group-has-[[data-state="open"]]/input:border-primary'
+		],
+		display: 'flex w-full min-w-0 ',
+		text: 'text-base text-gray-800',
+		visual: 'border-divider border bg-white outline-none',
+		animation: 'transition-all',
+		placeholder: 'placeholder:text-gray-400',
+		hover: 'hover:border-gray hover:focus-visible:border-primary',
+		focus: 'focus-visible:border-primary focus-visible:shadow-primary-sm',
+		attrs: 'aria-[invalid=true]:border-danger',
+		//
+		dark: {
+			text: 'dark:text-dark-gray-300',
+			visual: 'dark:border-dark-divider dark:bg-dark-gray-900',
+			placeholder: 'dark:placeholder:text-dark-gray-700',
+			hover: 'dark:hover:border-dark-gray',
+			focus: 'dark:focus-visible:shadow-dark-sm'
+		}
+	}),
+	{
+		variants: {
+			sizes: {
+				sm: twJoin({
+					display: 'h-7 py-2 px-2.5',
+					text: 'text-sm',
+					visual: 'rounded-sm',
+					focus: {
+						display: 'focus-visible:pl-3.5'
+					}
+				}),
+				md: twJoin({
+					display: 'min-h-12 py-2 px-3.5',
+					text: 'text-base',
+					visual: 'rounded-md',
+					focus: {
+						display: 'focus-visible:pl-4.5'
+					}
+				}),
+				lg: twJoin({
+					display: 'h-12 py-3 px-4',
+					text: 'text-lg',
+					visual: 'rounded-lg',
+					focus: {
+						display: 'focus-visible:pl-5.5'
+					}
+				})
+			}
+		},
+		defaultVariants: {
+			sizes: 'md'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>

package/src/components/atoms/Textarea/Textarea.tsx

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps, rootStyles } from './Textarea.styles'
+
+type TextareaProps = ComponentProps<'textarea'> & RootStylesProps
+
+function Textarea({ sizes, className, children, ...props }: TextareaProps) {
+	return (
+		<textarea className={rootStyles({ sizes, className })} {...props}>
+			{children}
+		</textarea>
+	)
+}
+
+export { Textarea }

package/src/components/atoms/Textarea/index.ts

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

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

@@ -0,0 +1,35 @@
+import { VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = cva(
+	twJoin({
+		display: 'flex gap-x-2.5 w-full py-3 px-4',
+		visual: 'rounded-md shadow-lg border'
+	}),
+	{
+		variants: {
+			type: {
+				default: '',
+				success: 'bg-success-100 border-success',
+				info: 'bg-info-100 border-info',
+				warning: 'bg-warning-100 border-warning',
+				error: 'bg-danger-100 border-danger',
+				loading: 'bg-secondary-100 border-secondary'
+			}
+		},
+		defaultVariants: {
+			type: 'default'
+		}
+	}
+)
+
+export type RootStylesProps = VariantProps<typeof rootStyles>
+
+// /////////////////////////
+
+export const iconStyles = twJoin({
+	display: 'size-6.5 p-1',
+	visual: 'bg-white rounded-md',
+	childs: '[&_svg]:size-4.5'
+})