@liguelead/design-system 0.0.28 → 0.0.30

package/components/DatePicker/DatePicker.tsx

@@ -1,139 +1,374 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
-    Calendar,
-    CaretLeft,
-    CaretRight,
-    CaretDown
-} from '@phosphor-icons/react'
-import { getYear, getMonth } from 'date-fns'
-import { ptBR } from 'date-fns/locale'
-
-// Substituindo lodash.range por implementação simples
-const range = (start: number, end: number, step: number = 1) => {
-    return Array.from({ length: Math.ceil((end - start) / step) }, (_, i) => start + i * step)
-}
-import { forwardRef, useState } from 'react'
-import TextField from '../TextField'
-import { DatePickerProps, Months } from './DatePicker.types'
+    ChangeEvent,
+    forwardRef,
+    useEffect,
+    useId,
+    useMemo,
+    useRef,
+    useState
+} from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import { CalendarBlankIcon } from '@phosphor-icons/react'
+import { format, parse, startOfDay, isValid } from 'date-fns'
+import { DateRange, DayPicker } from 'react-day-picker'
+import { ptBR } from 'react-day-picker/locale'
+import 'react-day-picker/dist/style.css'
 import {
-    ButtonDatePicker,
-    HeaderSelectWrapper,
-    DropdownContent,
-    DropdownItem,
-    ArrownDatePicker
+    CalendarWrapper,
+    DatePickerContent,
+    DatePickerError,
+    DatePickerHiddenInput,
+    DatePickerInput,
+    DatePickerLabel,
+    DatePickerTrigger,
+    DatePickerTriggerWrapper,
+    IconSlot,
+    Wrapper
 } from './DatePicker.styles'
-import DatePicker from 'react-datepicker'
+import { DatePickerProps } from './DatePicker.types'
+import RequiredAsterisk from '../RequiredAsterisk'
+
+const serializeDate = (date?: Date) => {
+    if (!date || Number.isNaN(date.getTime())) return ''
+    return format(date, 'yyyy-MM-dd')
+}
 
-const DatePickerCustom = forwardRef<HTMLInputElement, DatePickerProps>(
+const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
     (
         {
             label,
             error,
+            disabled = false,
+            className,
+            icon = true,
+            size = 'md',
+            placeholder = 'DD/MM/AAAA',
+            mode = 'single',
+            startDate,
+            endDate,
+            value,
+            rangeValue,
             startYear = 1990,
-            endYear = 0,
-            startDate = new Date(),
-            icon = false,
+            endYear,
             onChange,
-            size = 'md',
+            onRangeChange,
+            captionLayout,
+            numberOfMonths,
+            inline = false,
+            required = false,
             register,
-            ...rest
-        }: DatePickerProps,
+            dayPickerProps
+        },
         ref
     ) => {
-        const [pickerStartDate, setPickerStartDate] = useState<Date | null>(
-            startDate
+        const today = useMemo(() => startOfDay(new Date()), [])
+        const {
+            captionLayout: dayPickerCaptionLayout,
+            numberOfMonths: dayPickerNumberOfMonths,
+            fromYear: dayPickerFromYear,
+            toYear: dayPickerToYear,
+            locale: dayPickerLocale,
+            today: dayPickerToday,
+            ...restDayPickerProps
+        } = dayPickerProps ?? {}
+
+        const isRange = mode === 'range'
+        const resolvedStartYear = startYear ?? dayPickerFromYear ?? 1990
+        const resolvedEndYear = endYear ?? dayPickerToYear ?? today.getFullYear()
+        const monthsToRender =
+            numberOfMonths ?? dayPickerNumberOfMonths ?? (isRange ? 2 : 1)
+        const appliedCaptionLayout =
+            captionLayout ?? dayPickerCaptionLayout ?? 'label'
+        const resolvedLocale = dayPickerLocale ?? ptBR
+        const resolvedToday = dayPickerToday ?? today
+        const baseId = useId()
+        const errorId = `${baseId}-error`
+        const inputRef = useRef<HTMLInputElement | null>(null)
+        const [inputValue, setInputValue] = useState(() => 
+            !isRange && value ? format(value, 'dd/MM/yyyy') : ''
         )
-        const lastYear =
-            endYear > startYear ? endYear + 1 : getYear(new Date()) + 1
-        const years = range(startYear, lastYear, 1)
 
-        return (
-            <DatePicker
-                {...register}
-                {...rest}
-                locale={ptBR}
-                renderCustomHeader={({
-                    date,
-                    changeYear,
-                    changeMonth,
-                    decreaseMonth,
-                    increaseMonth,
-                    prevMonthButtonDisabled,
-                    nextMonthButtonDisabled
-                }) => (
-                    <HeaderSelectWrapper>
-                        <ArrownDatePicker
-                            onClick={decreaseMonth}
-                            disabled={prevMonthButtonDisabled}>
-                            <CaretLeft size={24} weight="bold" />
-                        </ArrownDatePicker>
-                        <DropdownMenu.Root modal={false}>
-                            <DropdownMenu.Trigger asChild>
-                                <ButtonDatePicker>
-                                    {getYear(date)} <CaretDown size={16} />
-                                </ButtonDatePicker>
-                            </DropdownMenu.Trigger>
-                            <DropdownContent>
-                                {years.map((option: number) => (
-                                    <DropdownItem
-                                        key={option}
-                                        onSelect={() => {
-                                            changeYear(option)
-                                        }}>
-                                        {option}
-                                    </DropdownItem>
-                                ))}
-                            </DropdownContent>
-                        </DropdownMenu.Root>
-                        <DropdownMenu.Root modal={false}>
-                            <DropdownMenu.Trigger asChild>
-                                <ButtonDatePicker>
-                                    {Months[getMonth(date)]}{' '}
-                                    <CaretDown size={16} />
-                                </ButtonDatePicker>
-                            </DropdownMenu.Trigger>
-                            <DropdownContent>
-                                {Months.map((month, index) => (
-                                    <DropdownItem
-                                        key={month}
-                                        onSelect={() => {
-                                            changeMonth(index)
-                                        }}>
-                                        {month}
-                                    </DropdownItem>
-                                ))}
-                            </DropdownContent>
-                        </DropdownMenu.Root>
-
-                        <ArrownDatePicker
-                            onClick={increaseMonth}
-                            disabled={nextMonthButtonDisabled}>
-                            <CaretRight size={24} weight="bold" />
-                        </ArrownDatePicker>
-                    </HeaderSelectWrapper>
-                )}
-                dateFormat="dd/MM/yyyy"
-                selected={pickerStartDate}
-                onChange={(date: Date | null) => {
-                    if (!date) {
-                        return
+        useEffect(() => {
+            if (!isRange && value) {
+                setInputValue(format(value, 'dd/MM/yyyy'))
+            } else if (!isRange && !value) {
+                setInputValue('')
+            }
+        }, [value, isRange])
+
+        const hiddenValue = useMemo(() => {
+            if (isRange) {
+                if (!rangeValue?.from && !rangeValue?.to) return ''
+                return JSON.stringify({
+                    from: rangeValue?.from ? serializeDate(rangeValue.from) : null,
+                    to: rangeValue?.to ? serializeDate(rangeValue.to) : null
+                })
+            }
+            return value ? serializeDate(value) : ''
+        }, [isRange, rangeValue, value])
+
+        const displayValue = useMemo(() => {
+            if (isRange) {
+                if (rangeValue?.from && rangeValue?.to) {
+                    return `${format(rangeValue.from, 'dd/MM/yyyy')} - ${format(
+                        rangeValue.to,
+                        'dd/MM/yyyy'
+                    )}`
+                }
+                if (rangeValue?.from) return format(rangeValue.from, 'dd/MM/yyyy')
+                return placeholder
+            }
+            return value ? format(value, 'dd/MM/yyyy') : placeholder
+        }, [isRange, placeholder, rangeValue, value])
+
+        const isUsingPlaceholder = isRange ? !rangeValue?.from : !value
+        const parsedError =
+            typeof error === 'string'
+                ? error
+                : typeof error === 'object' &&
+                    error !== null &&
+                    'message' in error
+                ? String((error as { message?: string }).message ?? '')
+                : undefined
+
+        const handleSingleSelect = (date?: Date) => {
+            if (disabled) return
+            const nextDate = date
+            onChange?.(nextDate)
+            setInputValue(nextDate ? format(nextDate, 'dd/MM/yyyy') : '')
+            register?.onChange({
+                target: {
+                    name: register?.name,
+                    value: nextDate ? serializeDate(nextDate) : ''
+                }
+            } as unknown as ChangeEvent<HTMLInputElement>)
+        }
+
+        const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+            if (disabled || isRange) return
+            const rawInput = e.target.value
+            const caret = e.target.selectionStart ?? rawInput.length
+            const digitsBeforeCaret = rawInput
+                .slice(0, caret)
+                .replace(/\D/g, '').length
+            const numbers = rawInput.replace(/\D/g, '').slice(0, 8)
+
+            let formatted = ''
+            if (numbers.length > 0) {
+                formatted = numbers.slice(0, 2)
+                if (numbers.length >= 3) formatted += '/' + numbers.slice(2, 4)
+                if (numbers.length >= 5) formatted += '/' + numbers.slice(4, 8)
+            }
+
+            const nextCaret = (() => {
+                if (digitsBeforeCaret <= 2) return digitsBeforeCaret
+                if (digitsBeforeCaret <= 4) return digitsBeforeCaret + 1
+                return digitsBeforeCaret + 2
+            })()
+
+            setInputValue(formatted)
+            requestAnimationFrame(() => {
+                const node = inputRef.current
+                if (!node) return
+                const safePos = Math.min(nextCaret, formatted.length)
+                node.setSelectionRange(safePos, safePos)
+            })
+
+            if (formatted.length === 10) {
+                const parsedDate = parse(formatted, 'dd/MM/yyyy', resolvedToday)
+                if (isValid(parsedDate)) {
+                    onChange?.(parsedDate)
+                    register?.onChange({
+                        target: {
+                            name: register?.name,
+                            value: serializeDate(parsedDate)
+                        }
+                    } as unknown as ChangeEvent<HTMLInputElement>)
+                }
+            } else if (formatted === '') {
+                onChange?.(undefined)
+                register?.onChange({
+                    target: {
+                        name: register?.name,
+                        value: ''
                     }
-                    setPickerStartDate(date)
-                    onChange?.(date)
-                }}
-                customInput={
-                    <TextField
-                        error={error}
-                        size={size}
-                        ref={ref}
-                        leftIcon={icon && <Calendar size={22} weight="bold" />}
-                        label={label}
-                        className="example-custom-input"
+                } as unknown as ChangeEvent<HTMLInputElement>)
+            }
+        }
+
+        const handleInputBlur = () => {
+            if (disabled || isRange) return
+            if (!inputValue) return
+            if (inputValue.length < 10) {
+                const fallback = value ? format(value, 'dd/MM/yyyy') : ''
+                setInputValue(fallback)
+                return
+            }
+            const parsedDate = parse(inputValue, 'dd/MM/yyyy', resolvedToday)
+            if (isValid(parsedDate)) {
+                setInputValue(format(parsedDate, 'dd/MM/yyyy'))
+                onChange?.(parsedDate)
+                register?.onChange({
+                    target: {
+                        name: register?.name,
+                        value: serializeDate(parsedDate)
+                    }
+                } as unknown as ChangeEvent<HTMLInputElement>)
+            } else {
+                const fallback = value ? format(value, 'dd/MM/yyyy') : ''
+                setInputValue(fallback)
+            }
+        }
+
+        const handleRangeSelect = (value?: DateRange) => {
+            if (disabled) return
+            const nextRange = value
+            onRangeChange?.(nextRange)
+            const serialized = nextRange
+                ? JSON.stringify({
+                        from: nextRange.from
+                            ? serializeDate(nextRange.from)
+                            : null,
+                        to: nextRange.to ? serializeDate(nextRange.to) : null
+                    })
+                : ''
+
+            register?.onChange({
+                target: { name: register?.name, value: serialized }
+            } as unknown as ChangeEvent<HTMLInputElement>)
+        }
+
+        const picker = (
+            <CalendarWrapper $singleMonth={!isRange}>
+                {isRange ? (
+                    <DayPicker
+                        {...restDayPickerProps}
+                        locale={resolvedLocale}
+                        mode="range"
+                        selected={rangeValue}
+                        onSelect={handleRangeSelect}
+                        
+                        captionLayout={appliedCaptionLayout}
+                        navLayout="around"
+                        fromYear={resolvedStartYear}
+                        toYear={resolvedEndYear}
+                        fromDate={startDate}
+                        toDate={endDate}
+                        today={resolvedToday}
+                        numberOfMonths={monthsToRender}
+                        required={false}
+                        defaultMonth={rangeValue?.from ?? resolvedToday}
                     />
-                }
-            />
+                ) : (
+                    <DayPicker
+                        {...restDayPickerProps}
+                        locale={resolvedLocale}
+                        mode="single"
+                        selected={value}
+                        onSelect={handleSingleSelect}
+                        captionLayout={appliedCaptionLayout}
+                        navLayout="around"
+                        fromYear={resolvedStartYear}
+                        toYear={resolvedEndYear}
+                        fromDate={startDate}
+                        toDate={endDate}
+                        today={resolvedToday}
+                        numberOfMonths={monthsToRender}
+                        required={false}
+                        defaultMonth={value ?? resolvedToday}
+                    />
+                )}
+            </CalendarWrapper>
+        )
+
+        return (
+            <Wrapper className={className}>
+                {label && (
+                    <DatePickerLabel>
+                        {label} {required && <RequiredAsterisk />}
+                    </DatePickerLabel>
+                )}
+
+                <DatePickerHiddenInput
+                    type="hidden"
+                    value={hiddenValue}
+                    name={register?.name}
+                    readOnly
+                    ref={instance => {
+                        if (typeof ref === 'function') {
+                            ref(instance)
+                        } else if (ref) {
+                            ref.current = instance
+                        }
+                        register?.ref(instance)
+                    }}
+                    onChange={register?.onChange}
+                    onBlur={register?.onBlur}
+                />
+
+                {inline ? (
+                    picker
+                ) : (
+                    <Popover.Root>
+                        <DatePickerTriggerWrapper>
+                            {icon && (
+                                <Popover.Trigger asChild disabled={disabled}>
+                                    <IconSlot $disabled={disabled} as="button" type="button">
+                                        <CalendarBlankIcon size={16} />
+                                    </IconSlot>
+                                </Popover.Trigger>
+                            )}
+
+                            {isRange ? (
+                                <Popover.Trigger asChild disabled={disabled}>
+                                    <DatePickerTrigger
+                                        type="button"
+                                        disabled={disabled}
+                                        $hasIcon={icon}
+                                        $size={size}
+                                        $error={!!parsedError}
+                                        $isPlaceholder={isUsingPlaceholder}
+                                        aria-invalid={!!parsedError}
+                                        aria-describedby={parsedError ? errorId : undefined}
+                                    >
+                                        {displayValue}
+                                    </DatePickerTrigger>
+                                </Popover.Trigger>
+                            ) : (
+                                <Popover.Trigger asChild disabled={disabled}>
+                                    <DatePickerInput
+                                        type="text"
+                                        disabled={disabled}
+                                        $hasIcon={icon}
+                                        $size={size}
+                                        $error={!!parsedError}
+                                        placeholder={placeholder}
+                                        value={inputValue}
+                                        onChange={handleInputChange}
+                                        onBlur={handleInputBlur}
+                                        aria-invalid={!!parsedError}
+                                        aria-describedby={parsedError ? errorId : undefined}
+                                        ref={inputRef}
+                                    />
+                                </Popover.Trigger>
+                            )}
+                        </DatePickerTriggerWrapper>
+
+                        <Popover.Portal>
+                            <DatePickerContent sideOffset={8} align="start">
+                                {picker}
+                            </DatePickerContent>
+                        </Popover.Portal>
+                    </Popover.Root>
+                )}
+
+                {parsedError && (
+                    <DatePickerError id={errorId}>{parsedError}</DatePickerError>
+                )}
+            </Wrapper>
         )
     }
 )
 
-export default DatePickerCustom
+DatePicker.displayName = 'DatePicker'
+export default DatePicker

package/components/DatePicker/DatePicker.types.ts

@@ -1,29 +1,45 @@
-import { FieldValues, UseFormRegister } from 'react-hook-form'
+import { FieldValues, UseFormRegisterReturn } from 'react-hook-form'
+import { DateRange, DayPickerProps } from 'react-day-picker'
 
-export const Months = [
-    'Janeiro',
-    'Fevereiro',
-    'Março',
-    'Abril',
-    'Maio',
-    'Junho',
-    'Julho',
-    'Agosto',
-    'Setembro',
-    'Outubro',
-    'Novembro',
-    'Dezembro'
-]
+export type DatePickerMode = 'single' | 'range'
+export type DatePickerSize = 'sm' | 'md' | 'lg'
 
-export type DatePickerProps = {
-    endYear?: number
-    label: string
-    startYear?: number
-    onChange?: (date: Date) => void
-    error?: FieldValues
-    startDate?: Date
+type DatePickerBaseProps = {
+    label?: string
+    error?: FieldValues | string | { message?: string } | null
+    disabled?: boolean
     className?: string
+    required?: boolean
     icon?: boolean
-    size?: 'sm' | 'md' | 'lg'
-    register?: UseFormRegister<Date>
+    size?: DatePickerSize
+    placeholder?: string
+    startDate?: Date
+    endDate?: Date
+    startYear?: number
+    endYear?: number
+    captionLayout?: 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years'
+    numberOfMonths?: number
+    inline?: boolean
+    register?: UseFormRegisterReturn<string>
+    dayPickerProps?: Partial<
+        Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'defaultMonth'>
+    >
 }
+
+export type DatePickerSingleProps = DatePickerBaseProps & {
+    mode?: 'single'
+    value?: Date | undefined
+    onChange?: (date: Date | undefined) => void
+    rangeValue?: never
+    onRangeChange?: never
+}
+
+export type DatePickerRangeProps = DatePickerBaseProps & {
+    mode: 'range'
+    rangeValue?: DateRange | undefined
+    onRangeChange?: (range: DateRange | undefined) => void
+    value?: never
+    onChange?: never
+}
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps

package/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Dialog from './Dialog'
+import Button from '../Button/Button'
+
+const meta: Meta<typeof Dialog> = {
+    title: 'Feedback/Dialog',
+    component: Dialog,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Dialog title'
+        },
+        description: {
+            control: 'text',
+            description: 'Dialog description'
+        },
+        variant: {
+            control: 'select',
+            options: ['default', 'danger'],
+            description: 'Dialog variant'
+        },
+        confirmButton: {
+            control: 'boolean',
+            description: 'Show confirm button'
+        },
+        cancelButton: {
+            control: 'boolean',
+            description: 'Show cancel button'
+        },
+        confirmLabel: {
+            control: 'text',
+            description: 'Confirm button label'
+        },
+        cancelLabel: {
+            control: 'text',
+            description: 'Cancel button label'
+        },
+        confirmButtonColor: {
+            control: 'select',
+            options: ['primary', 'secondary'],
+            description: 'Confirm button color'
+        },
+        centerContent: {
+            control: 'boolean',
+            description: 'Center dialog content'
+        }
+    }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Dialog Title',
+        description: 'This is a dialog description.',
+        trigger: <Button>Open Dialog</Button>
+    }
+}

package/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import IconButton from './IconButton'
+import { themes } from '@liguelead/foundation'
+import { iconMap } from '../../../stories/utils/icons'
+
+const themeColors = Object.keys(themes.spa.colors)
+
+const meta = {
+  title: 'Form/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'outline', 'ghost', 'neutralOutline', 'neutralGhost'],
+      description: 'Visual style variant of the icon button'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the icon button'
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the icon button'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the icon button is disabled'
+    },
+    children: {
+      control: false,
+      description: 'Icon content'
+    },
+  },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: iconMap.HeartIcon,
+  },
+}