bmdl-sdk 1.5.9 → 2.0.0

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

@@ -0,0 +1,227 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const mainStyles = cva(
+	twJoin({
+		tw: 'group/calendar',
+		visual: 'bg-white shadow-md',
+		//
+		dark: 'dark:bg-dark-gray-900'
+	}),
+	{
+		variants: {
+			size: {
+				sm: 'px-2 pb-2 rounded-sm',
+				md: 'px-3.5 pb-3 rounded-md',
+				lg: ''
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	}
+)
+
+export type MainStylesProps = VariantProps<typeof mainStyles>
+
+// /////////////////////////
+
+export const allStyles = ({ size }: { size?: 'sm' | 'md' | 'lg' | null }) => {
+	const generalStyles = {
+		root: twJoin({
+			position: 'relative',
+			display: 'w-fit'
+		}),
+		month_caption: twJoin({
+			display: 'flex items-center',
+			text: 'font-semibold text-gray-900 capitalize',
+			visual: 'border-b border-divider',
+			//
+			dark: {
+				text: 'dark:text-dark-gray-200',
+				visual: 'dark:border-dark-divider'
+			}
+		}),
+		nav: twJoin({
+			position: 'absolute',
+			display: 'flex -mt-px'
+		}),
+		button_previous: twJoin({
+			display: 'flex items-center justify-center',
+			text: 'text-gray-800',
+			visual: 'bg-secondary/16 rounded-full',
+			hover: 'hover:bg-secondary/32',
+			//
+			dark: {
+				text: 'dark:text-dark-gray-300',
+				visual: 'dark:bg-dark-gray-700/16',
+				hover: 'dark:hover:bg-dark-gray-700/32'
+			}
+		}),
+		button_next: twJoin({
+			display: 'flex items-center justify-center',
+			text: 'text-gray-800',
+			visual: 'bg-secondary/16 rounded-full',
+			hover: 'hover:bg-secondary/32',
+			//
+			dark: {
+				text: 'dark:text-dark-gray-300',
+				visual: 'dark:bg-dark-gray-700/16',
+				hover: 'dark:hover:bg-dark-gray-700/32'
+			}
+		}),
+		weekday: twJoin({
+			display: 'flex items-center justify-center',
+			text: 'font-semibold text-gray-900 capitalize'
+		}),
+		day_button: twJoin({
+			display: 'flex items-center justify-center',
+			text: 'text-gray-800',
+			visual: 'rounded-full',
+			hover: {
+				visual: 'hover:bg-secondary/16',
+				attrs: {
+					visual: 'hover:group-data-[selected=true]/day:bg-primary'
+				}
+			},
+			attrs: {
+				text: [
+					'group-data-[selected=true]/day:text-white!',
+					'group-data-[outside=true]/day:text-gray',
+					'group-data-[today=true]/day:text-primary'
+				],
+				visual: [
+					'group-data-[selected=true]/day:bg-primary',
+					'group-data-[today=true]/day:border group-data-[today=true]/day:border-primary',
+					'data-[selected-single=true]:rounded-full!'
+				]
+			},
+			//
+			dark: {
+				text: 'dark:text-dark-gray-300',
+				hover: {
+					visual: 'hover:bg-secondary/32'
+				}
+			}
+		}),
+		range_start: twJoin({
+			attrs: {
+				visual: ['[&_button]:rounded-e-none']
+			}
+		}),
+		range_middle: twJoin({
+			attrs: {
+				text: 'data-[selected=true]:[&_button]:text-primary!',
+				visual: [
+					'[&_button]:bg-primary/16! [&_button]:rounded-none',
+					'data-[today=true]:[&_button]:bg-primary/32! data-[today=true]:[&_button]:border-none!'
+				],
+				hover: {
+					text: 'hover:[&_button]:text-gray!',
+					visual: [
+						'hover:[&_button]:bg-secondary/8!',
+						'hover:data-[today=true]:[&_button]:text-primary!'
+					]
+				}
+			}
+		}),
+		range_end: twJoin({
+			attrs: {
+				visual: '[&_button]:rounded-s-none'
+			}
+		})
+	}
+
+	const sizeStyles = {
+		sm: {
+			...generalStyles,
+			month_caption:
+				generalStyles.month_caption +
+				' ' +
+				twJoin({
+					display: 'h-10 -mx-2 px-2',
+					text: 'text-sm'
+				}),
+			nav:
+				generalStyles.nav +
+				' ' +
+				twJoin({
+					position: 'top-2 right-2',
+					display: 'gap-2'
+				}),
+			button_previous:
+				generalStyles.button_previous +
+				' ' +
+				twJoin({
+					display: 'size-6'
+				}),
+			button_next:
+				generalStyles.button_next +
+				' ' +
+				twJoin({
+					display: 'size-6'
+				}),
+			weekday:
+				generalStyles.weekday +
+				' ' +
+				twJoin({
+					display: 'h-10 w-7',
+					text: 'text-xs'
+				}),
+			day_button:
+				generalStyles.day_button +
+				' ' +
+				twJoin({
+					display: 'size-7',
+					text: 'text-sm'
+				})
+		},
+		md: {
+			...generalStyles,
+			month_caption:
+				generalStyles.month_caption +
+				' ' +
+				twJoin({
+					display: 'h-14.5 -mx-3.5 px-3.5',
+					text: 'text-base'
+				}),
+			nav:
+				generalStyles.nav +
+				' ' +
+				twJoin({
+					position: 'top-4 right-4',
+					display: 'gap-4'
+				}),
+			button_previous:
+				generalStyles.button_previous +
+				' ' +
+				twJoin({
+					display: 'size-7'
+				}),
+			button_next:
+				generalStyles.button_next +
+				' ' +
+				twJoin({
+					display: 'size-7'
+				}),
+			weekday:
+				generalStyles.weekday +
+				' ' +
+				twJoin({
+					display: 'h-14.5 w-8.5',
+					text: 'text-sm'
+				}),
+			day_button:
+				generalStyles.day_button +
+				' ' +
+				twJoin({
+					display: 'size-8.5',
+					text: 'text-base'
+				})
+		},
+		lg: {}
+	}
+
+	return size ? sizeStyles[size] : generalStyles
+}

package/src/components/atoms/Calendar/Calendar.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import clsx from 'clsx'
+import { useLocale } from 'next-intl'
+import { type ComponentProps, useState } from 'react'
+import { DateRange, DayPicker, type Locale } from 'react-day-picker'
+import { ru } from 'react-day-picker/locale'
+
+import { TbChevronDown, TbChevronLeft, TbChevronRight } from 'react-icons/tb'
+
+import { allStyles, mainStyles, type MainStylesProps } from './Calendar.styles'
+
+type CalendarProps = {
+	onSelect?: (value: any) => void
+	defaultSelected?: DateRange
+} & ComponentProps<typeof DayPicker> &
+	MainStylesProps
+
+function Calendar({
+	mode = 'single',
+	size,
+	onSelect,
+	className,
+	defaultSelected
+}: CalendarProps) {
+	const [selectedDate, setSelectedDate] = useState(defaultSelected)
+	//
+	const locale = useLocale()
+	//
+	const localeObj: Record<string, Locale> = { ru }
+	//
+	const onChangeHandler = (value: any) => {
+		setSelectedDate(value)
+		if (onSelect) onSelect(value)
+	}
+	//
+	return (
+		<DayPicker
+			{...(locale !== 'en' && { locale: localeObj[locale] })}
+			selected={selectedDate}
+			onSelect={onChangeHandler}
+			mode={mode as any}
+			showOutsideDays
+			navLayout='after'
+			className={mainStyles({ size, className })}
+			classNames={allStyles({ size })}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div ref={rootRef} className={className} {...props} />
+					)
+				},
+				Weekday: ({ children, className, ...props }) => {
+					return (
+						<th {...props}>
+							<button className={className}>{children}</button>
+						</th>
+					)
+				},
+				Day: ({ day, modifiers, className, ...props }) => {
+					return (
+						<td
+							className={clsx('group/day', className)}
+							{...props}
+						/>
+					)
+				},
+				DayButton: ({ day, modifiers, className, ...props }) => {
+					return (
+						<button
+							data-selected-single={
+								modifiers.selected &&
+								modifiers.range_start &&
+								modifiers.range_end
+							}
+							className={className}
+							{...props}
+						/>
+					)
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					switch (orientation) {
+						case 'left':
+							return <TbChevronLeft {...props} />
+						case 'right':
+							return <TbChevronRight {...props} />
+						default:
+							return <TbChevronDown {...props} />
+					}
+				}
+			}}
+		/>
+	)
+}
+
+export { Calendar }

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

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

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

@@ -0,0 +1,37 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	tw: 'peer group-has-[input]/label:mr-0.5',
+	display: 'size-4.5 shrink-0',
+	visual: 'border-divider rounded-sm border outline-none',
+	animation: 'transition-all',
+	hover: [
+		'hover:cursor-pointer',
+		'group-hover/label:border-gray',
+		'group-hover/label:data-[state=checked]:border-transparent'
+	],
+	attrs: [
+		'data-[state=checked]:text-white',
+		'data-[state=checked]:bg-primary',
+		'data-[state=checked]:border-primary',
+		'data-[state=checked]:shadow-primary-sm',
+		'data-[state=checked]:hover:shadow-primary',
+		'aria-[invalid=true]:border-danger'
+	],
+	//
+	dark: [
+		'dark:border-dark-gray-200',
+		'dark:data-[state=checked]:shadow-dark-sm',
+		'dark:data-[state=checked]:hover:shadow-dark-md',
+		'dark:group-hover/label:border-dark-gray-400'
+	]
+})
+
+// /////////////////////////
+
+export const indicatorStyles = twJoin({
+	display: 'flex items-center justify-center',
+	text: 'text-current',
+	animation: 'transition-none',
+	childs: '[&_svg]:size-3.5'
+})

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { type ComponentProps } from 'react'
+
+import { Checkbox as RadixCheckbox } from 'radix-ui'
+
+import { TbMinus } from 'react-icons/tb'
+
+import { indicatorStyles, rootStyles } from './Checkbox.styles'
+
+import { CheckIcon } from '../icons'
+
+type CheckboxProps = ComponentProps<typeof RadixCheckbox.Root> & {
+	indeterminate?: boolean
+}
+
+function Checkbox({ className, indeterminate, ...props }: CheckboxProps) {
+	return (
+		<RadixCheckbox.Root className={clsx(rootStyles, className)} {...props}>
+			<RadixCheckbox.Indicator className={indicatorStyles}>
+				{indeterminate ? <TbMinus /> : <CheckIcon />}
+			</RadixCheckbox.Indicator>
+		</RadixCheckbox.Root>
+	)
+}
+
+export { Checkbox }

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

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

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

@@ -0,0 +1,6 @@
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	display: 'inline-block w-5.5',
+	childs: '[&_svg]:size-5.5'
+})

package/src/components/atoms/Date/Date.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import { useLocale } from 'next-intl'
+import { type ComponentProps } from 'react'
+
+import { type RootStylesProps } from '..//Typography/Text/Text.styles'
+import { Typography } from '../Typography'
+
+import { getFormatDate } from '@/utils'
+
+const { Text } = Typography
+
+type DateProps = ComponentProps<'span'> &
+	RootStylesProps & {
+		date: string
+	}
+
+function Date({ date, className, ...props }: DateProps) {
+	const locale = useLocale()
+	//
+	return (
+		<Text className={clsx('text-nowrap', className)} {...props}>
+			{getFormatDate(date, locale)}
+		</Text>
+	)
+}
+
+export { Date }

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

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

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

@@ -0,0 +1,53 @@
+import { VariantProps, cva } from 'class-variance-authority'
+
+import { twJoin } from '@/utils'
+
+export const rootStyles = twJoin({
+	tw: 'group/input',
+	position: 'relative'
+})
+
+// /////////////////////////
+
+export const inputStyles = cva('', {
+	variants: {
+		size: {
+			sm: '!w-53',
+			md: '!w-66.5',
+			lg: ''
+		}
+	},
+	defaultVariants: {
+		size: 'md'
+	}
+})
+
+export type InputStylesProps = VariantProps<typeof inputStyles>
+
+// /////////////////////////
+
+export const iconStyles = cva(
+	twJoin({
+		mouse: 'cursor-pointer',
+		position: 'absolute',
+		text: 'text-gray',
+		hover: {
+			text: 'hover:text-primary-300'
+		},
+		attrs: {
+			text: 'data-[state=open]:text-primary'
+		}
+	}),
+	{
+		variants: {
+			size: {
+				sm: 'top-1.5 right-2.5 size-4',
+				md: 'top-2 right-3 size-5.5',
+				lg: 'top-2.5 right-3.5 size-7'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	}
+)

package/src/components/atoms/DatePicker/DatePicker.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useMask } from '@react-input/mask'
+import dayjs from 'dayjs'
+import { ChangeEvent, type ComponentProps, useEffect, useState } from 'react'
+import { DateRange, DayPicker } from 'react-day-picker'
+
+import { TbCalendarMonth } from 'react-icons/tb'
+
+import { Calendar, Input, Popover } from '@/components/atoms'
+
+import {
+	iconStyles,
+	inputStyles,
+	type InputStylesProps,
+	rootStyles
+} from './DatePicker.styles'
+
+import {
+	getAlignOffset,
+	getMask,
+	getPlaceholder,
+	getSideOffset
+} from './DatePicker.utils'
+import { _ } from '@/utils'
+
+type DatePickerProps = {
+	onSelect?: (value: DateRange) => void
+	defaultSelected?: DateRange
+	defaultOpen?: boolean | { isOpen: boolean; delay: number }
+} & ComponentProps<typeof DayPicker> &
+	InputStylesProps
+
+export function DatePicker({
+	defaultOpen,
+	mode = 'single',
+	size = 'md',
+	onSelect,
+	defaultSelected
+}: DatePickerProps) {
+	const [open, setOpen] = useState(
+		_.isObject(defaultOpen) ? false : defaultOpen
+	)
+	const [date, setDate] = useState('')
+	//
+	const inputRef = useMask({
+		mask: getMask(mode),
+		replacement: { _: /\d/ },
+		showMask: false,
+		modify: data => {
+			return { showMask: !!data.data }
+		}
+	})
+	//
+	useEffect(() => {
+		if (_.isObject(defaultOpen) && defaultOpen?.delay) {
+			const timer = setTimeout(() => {
+				setOpen(true)
+			}, defaultOpen.delay)
+
+			return () => clearTimeout(timer)
+		}
+	}, [])
+	//
+	useEffect(() => {
+		if (defaultSelected) {
+			const from = defaultSelected.from
+				? dayjs(defaultSelected.from).format('DD/MM/YYYY')
+				: ''
+			const to = defaultSelected.to
+				? dayjs(defaultSelected.to).format('DD/MM/YYYY')
+				: ''
+			setDate(from && to ? `${from} — ${to}` : '')
+		}
+	}, [defaultSelected])
+	//
+	const onSelectHandler = (value: DateRange) => {
+		const from = value.from ? dayjs(value.from).format('DD/MM/YYYY') : ''
+		const to = value.to ? dayjs(value.to).format('DD/MM/YYYY') : ''
+		setDate(from && to ? `${from} — ${to}` : '')
+		onSelect?.(value)
+	}
+	//
+	return (
+		<div className={rootStyles}>
+			<Input
+				value={date}
+				onChange={(e: ChangeEvent<HTMLInputElement>) =>
+					setDate(e.target.value)
+				}
+				sizes={size}
+				ref={inputRef}
+				className={inputStyles({ size })}
+				placeholder={getPlaceholder(mode)}
+			/>
+			<Popover
+				open={open}
+				onOpenChange={setOpen}
+				trigger={<TbCalendarMonth className={iconStyles({ size })} />}
+				align='end'
+				sideOffset={getSideOffset(size!)}
+				alignOffset={getAlignOffset(size!)}
+				arrow={false}
+			>
+				<Calendar
+					mode={mode as any}
+					size={size}
+					onSelect={onSelectHandler}
+					defaultSelected={defaultSelected}
+				/>
+			</Popover>
+		</div>
+	)
+}

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

@@ -0,0 +1,49 @@
+import { useTranslations } from 'next-intl'
+
+export type Mode = 'single' | 'multiple' | 'range'
+
+export const getMask = (mode: Mode) => {
+	switch (mode) {
+		case 'single':
+			return '__/__/____'
+		case 'multiple':
+			return '__/__/____ — __/__/____'
+		case 'range':
+			return '__/__/____ — __/__/____'
+	}
+}
+
+export const getPlaceholder = (mode: Mode) => {
+	const t = useTranslations('calendar.placeholder')
+
+	switch (mode) {
+		case 'single':
+			return t('single')
+		case 'multiple':
+			return t('multiple')
+		case 'range':
+			return t('range')
+	}
+}
+
+export const getSideOffset = (size: 'sm' | 'md' | 'lg') => {
+	switch (size) {
+		case 'sm':
+			return 9
+		case 'md':
+			return 13
+		case 'lg':
+			return 18
+	}
+}
+
+export const getAlignOffset = (size: 'sm' | 'md' | 'lg') => {
+	switch (size) {
+		case 'sm':
+			return -12
+		case 'md':
+			return -14
+		case 'lg':
+			return -16
+	}
+}

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

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