@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/DatePicker/date-picker.tsx

@@ -0,0 +1,486 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { VariantProps } from 'class-variance-authority';
+import { DateTime } from 'luxon';
+import { Matcher, type DateRange } from 'react-day-picker';
+
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+  Calendar,
+  Button,
+  CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronLeftDouble,
+  ChevronRightDouble,
+  buttonVariants,
+  Input,
+  Typography,
+  Flex,
+  Grid,
+} from '@/components';
+import { capitalizeFirst, cn } from '@/utils';
+
+import 'react-day-picker/dist/style.css';
+
+interface BaseDatePickerProps {
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  footer?: React.ReactNode;
+  'data-testid'?: string;
+  size?: VariantProps<typeof buttonVariants>['size'];
+  rounded?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  minDate?: Date;
+  maxDate?: Date;
+  rangeText?: string;
+  multipleText?: string;
+  locale?: string;
+  withTime?: boolean;
+  timeLabel?: string;
+  timePlaceholder?: string;
+}
+
+interface SingleDatePickerProps extends BaseDatePickerProps {
+  mode?: 'single';
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+}
+
+interface MultipleDatePickerProps extends BaseDatePickerProps {
+  mode: 'multiple';
+  value?: Date[];
+  onChange?: (dates: Date[] | undefined) => void;
+}
+
+interface RangeDatePickerProps extends BaseDatePickerProps {
+  mode: 'range';
+  value?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+}
+
+interface MonthDatePickerProps extends BaseDatePickerProps {
+  mode: 'month';
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+}
+
+type DatePickerProps = SingleDatePickerProps | MultipleDatePickerProps | RangeDatePickerProps | MonthDatePickerProps;
+
+const toMonthStart = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1);
+
+const toLocaleMonthLabel = (date: Date, locale: string) => {
+  const label = DateTime.fromJSDate(date).setLocale(locale).toFormat('LLLL / yyyy');
+  return capitalizeFirst(label);
+};
+
+const compareMonth = (left: Date, right: Date) => {
+  if (left.getFullYear() !== right.getFullYear()) {
+    return left.getFullYear() - right.getFullYear();
+  }
+
+  return left.getMonth() - right.getMonth();
+};
+
+const clampMonth = (date: Date, minMonth?: Date, maxMonth?: Date) => {
+  if (minMonth && compareMonth(date, minMonth) < 0) return minMonth;
+
+  if (maxMonth && compareMonth(date, maxMonth) > 0) return maxMonth;
+
+  return date;
+};
+
+const applyTimeToDate = (date: Date, time?: string) => {
+  if (!time) return date;
+
+  const [ hours, minutes ] = time.split(':').map(Number);
+  const next = new Date(date);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+};
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder = 'Selecione uma data',
+  disabled,
+  className,
+  size = 'md',
+  mode = 'single',
+  footer,
+  rounded = '2xl',
+  'data-testid': dataTestId,
+  minDate,
+  maxDate,
+  rangeText = 'De',
+  multipleText = 'datas selecionadas',
+  locale = 'pt-BR',
+  withTime = false,
+  timeLabel = 'Time',
+  timePlaceholder = 'Select time',
+}: DatePickerProps) {
+  const baseMonth = useMemo(() => {
+    const fallback = new Date();
+    const current = value instanceof Date ? value : fallback;
+    const normalized = toMonthStart(current);
+    const minMonth = minDate ? toMonthStart(minDate) : undefined;
+    const maxMonth = maxDate ? toMonthStart(maxDate) : undefined;
+    return clampMonth(normalized, minMonth, maxMonth);
+  }, [ value, minDate, maxDate ]);
+
+  const monthLabels = useMemo(() => {
+    const year = baseMonth.getFullYear();
+    return Array.from({ length: 12 }, (_, index) => {
+      const label = DateTime.fromObject({ year, month: index + 1 })
+        .setLocale(locale)
+        .toFormat('LLL')
+        .replace('.', '');
+      return capitalizeFirst(label);
+    });
+  }, [ baseMonth, locale ]);
+
+  const [ visibleMonth, setVisibleMonth ] = useState<Date | undefined>(() => {
+    return mode === 'month' ? baseMonth : undefined;
+  });
+
+  const [ pickerYear, setPickerYear ] = useState(() => baseMonth.getFullYear());
+  const [ timeValue, setTimeValue ] = useState('');
+
+  useEffect(() => {
+    if (mode !== 'month') return;
+
+    setVisibleMonth(baseMonth);
+    setPickerYear(baseMonth.getFullYear());
+  }, [ mode, baseMonth ]);
+
+  useEffect(() => {
+    if (!withTime || mode !== 'single') return;
+
+    if (value instanceof Date) {
+      setTimeValue(DateTime.fromJSDate(value).toFormat('HH:mm'));
+      return;
+    }
+
+    setTimeValue('');
+  }, [ value, mode, withTime ]);
+
+  const formatDisplayValue = useMemo(() => {
+    if (!value) return placeholder;
+
+    switch (mode) {
+      case 'single': {
+        const date = value as Date;
+        return DateTime.fromJSDate(date)
+          .setLocale(locale)
+          .toLocaleString(withTime ? DateTime.DATETIME_MED : DateTime.DATE_MED);
+      }
+
+      case 'multiple': {
+        const dates = value as Date[];
+
+        if (dates.length === 0) return placeholder;
+
+        if (dates.length === 1) {
+          return DateTime.fromJSDate(dates[0]).setLocale(locale).toLocaleString(DateTime.DATE_MED);
+        }
+
+        return `${dates.length} ${multipleText}`;
+      }
+
+      case 'range': {
+        const range = value as DateRange;
+
+        if (!range.from) return placeholder;
+
+        if (!range.to) {
+          return `${rangeText} ${DateTime.fromJSDate(range.from).setLocale(locale).toLocaleString(DateTime.DATE_MED)}`;
+        }
+
+        return `${DateTime.fromJSDate(range.from).setLocale(locale).toLocaleString(DateTime.DATE_MED)} - ${DateTime.fromJSDate(range.to).setLocale(locale).toLocaleString(DateTime.DATE_MED)}`;
+      }
+
+      case 'month': {
+        const date = value as Date;
+        return toLocaleMonthLabel(date, locale);
+      }
+
+      default:
+        return placeholder;
+    }
+  }, [ value, placeholder, mode, multipleText, rangeText, locale, withTime ]);
+
+  const visibleMonthLabel = useMemo(() => {
+    const month = visibleMonth ?? baseMonth;
+    return toLocaleMonthLabel(month, locale);
+  }, [ visibleMonth, baseMonth, locale ]);
+
+  const disabledDates = useMemo(() => {
+    return minDate || maxDate ? {
+      ...(minDate && { before: minDate }),
+      ...(maxDate && { after: maxDate }),
+    } : undefined;
+  }, [ minDate, maxDate ]);
+
+  const renderCalendar = () => {
+    switch (mode) {
+      case 'single': {
+        const date = value as Date;
+        const handleChange = onChange as (date: Date | undefined) => void;
+
+        const handleSelect = (nextDate: Date | undefined) => {
+          if (!nextDate) {
+            handleChange(undefined);
+            return;
+          }
+
+          handleChange(withTime ? applyTimeToDate(nextDate, timeValue) : nextDate);
+        };
+
+        return (
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={handleSelect}
+            formatLocale={locale}
+            disabled={disabledDates as Matcher}
+          />
+        );
+      }
+
+      case 'multiple': {
+        const dates = value as Date[];
+        const handleChange = onChange as (dates: Date[] | undefined) => void;
+        return (
+          <Calendar
+            mode="multiple"
+            selected={dates}
+            onSelect={handleChange}
+            formatLocale={locale}
+            disabled={disabledDates as Matcher}
+          />
+        );
+      }
+
+      case 'range': {
+        const range = value as DateRange;
+        const handleChange = onChange as (range: DateRange | undefined) => void;
+        return (
+          <Calendar
+            mode="range"
+            selected={range}
+            onSelect={handleChange}
+            formatLocale={locale}
+            disabled={disabledDates as Matcher}
+          />
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  if (mode === 'month') {
+    const minMonth = minDate ? toMonthStart(minDate) : undefined;
+    const maxMonth = maxDate ? toMonthStart(maxDate) : undefined;
+
+    const isBeforeMinMonth = (month: Date) => !!minMonth && compareMonth(month, minMonth) < 0;
+    const isAfterMaxMonth = (month: Date) => !!maxMonth && compareMonth(month, maxMonth) > 0;
+
+    const emitMonthChange = (nextMonth: Date) => {
+      if (isBeforeMinMonth(nextMonth) || isAfterMaxMonth(nextMonth)) return;
+
+      setVisibleMonth(nextMonth);
+
+      if (onChange) {
+        const handleChange = onChange as (date: Date | undefined) => void;
+        handleChange(nextMonth);
+      }
+    };
+
+    const handleMonthShift = (offset: number) => {
+      if (disabled) return;
+
+      const base = visibleMonth ?? baseMonth;
+      const nextMonth = new Date(base.getFullYear(), base.getMonth() + offset, 1);
+      emitMonthChange(nextMonth);
+    };
+
+    const currentMonth = visibleMonth ?? baseMonth;
+    const prevMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+    const nextMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+    const isPrevDisabled = disabled || isBeforeMinMonth(prevMonth);
+    const isNextDisabled = disabled || isAfterMaxMonth(nextMonth);
+    const isPrevYearDisabled = !!minMonth && pickerYear <= minMonth.getFullYear();
+    const isNextYearDisabled = !!maxMonth && pickerYear >= maxMonth.getFullYear();
+
+    return (
+      <Popover>
+        <Flex className="items-center w-full">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-10! w-10! rounded-r-none! border-r-0!"
+            disabled={isPrevDisabled}
+            onClick={() => handleMonthShift(-1)}
+            aria-label="Mês anterior"
+          >
+            <ChevronLeftDouble className="size-5 text-gray-400" />
+          </Button>
+
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              size={size}
+              variant="outline"
+              disabled={disabled}
+              className="w-full justify-center text-center h-10! rounded-none!"
+              data-testid={dataTestId}
+            >
+              <Typography
+                variant="small"
+                className={cn('font-normal truncate', size === 'sm' ? 'text-sm' : 'text-base')}
+              >
+                {visibleMonthLabel}
+              </Typography>
+            </Button>
+          </PopoverTrigger>
+
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-10! w-10! rounded-l-none! border-l-0!"
+            disabled={isNextDisabled}
+            onClick={() => handleMonthShift(1)}
+            aria-label="Mês seguinte"
+          >
+            <ChevronRightDouble className="size-5 text-gray-400" />
+          </Button>
+        </Flex>
+
+        <PopoverContent className="w-64 p-0!" align="center">
+          <Flex className="items-center justify-between gap-3 py-1 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200">
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              className="h-10! w-10! p-0"
+              disabled={disabled || isPrevYearDisabled}
+              onClick={() => setPickerYear((current) => current - 1)}
+            >
+              <ChevronLeft className="size-5 text-gray-400" />
+            </Button>
+
+            <Typography className="text-gray-700 font-semibold text-sm">{pickerYear}</Typography>
+
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              className="h-10! w-10! p-0"
+              disabled={disabled || isNextYearDisabled}
+              onClick={() => setPickerYear((current) => current + 1)}
+            >
+              <ChevronRight className="size-5 text-gray-400" />
+            </Button>
+          </Flex>
+
+          <Grid className="grid-cols-3 gap-2 p-3">
+            {monthLabels.map((label, index) => {
+              const isSelected =
+                (visibleMonth ?? baseMonth).getFullYear() === pickerYear &&
+                (visibleMonth ?? baseMonth).getMonth() === index;
+              const monthCandidate = new Date(pickerYear, index, 1);
+              const isMonthDisabled = disabled || isBeforeMinMonth(monthCandidate) || isAfterMaxMonth(monthCandidate);
+
+              return (
+                <PopoverClose key={`${pickerYear}-${label}`} asChild>
+                  <Button
+                    type="button"
+                    variant={isSelected ? 'primary' : 'ghost'}
+                    size="sm"
+                    className={cn('justify-center', isSelected && 'text-white')}
+                    disabled={isMonthDisabled}
+                    onClick={() => emitMonthChange(monthCandidate)}
+                  >
+                    {label}
+                  </Button>
+                </PopoverClose>
+              );
+            })}
+          </Grid>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          disabled={disabled}
+          size={size}
+          variant="outline"
+          className={cn(
+            'w-full justify-start text-left h-10!',
+            'data-[state=open]:ring-primary data-[state=open]:ring-2 data-[state=open]:ring-offset-2',
+
+            className,
+            {
+              'rounded-md': rounded === 'md',
+              'rounded-lg': rounded === 'lg',
+              'rounded-xl': rounded === 'xl',
+              'rounded-2xl': rounded === '2xl',
+            }
+          )}
+          data-testid={dataTestId}
+        >
+          <CalendarIcon className="mr-2 text-gray-400 size-5" />
+          <Typography variant='small' className={cn('font-normal truncate', formatDisplayValue === placeholder && 'text-gray-500!', size === 'sm' ? 'text-sm' : 'text-base')}>
+            {formatDisplayValue}
+          </Typography>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        {renderCalendar()}
+
+        {mode === 'single' && withTime && (
+          <div className="p-4 border-t border-gray-200 bg-white">
+            <Flex className="items-center gap-3">
+              <Typography variant="small" className="text-gray-600">
+                {timeLabel}
+              </Typography>
+              <Input
+                type="time"
+                value={timeValue}
+                placeholder={timePlaceholder}
+                onChange={event => {
+                  const nextTime = event.target.value;
+                  setTimeValue(nextTime);
+
+                  if (value instanceof Date && onChange) {
+                    const handleChange = onChange as (date: Date | undefined) => void;
+                    handleChange(applyTimeToDate(value, nextTime));
+                  }
+                }}
+                className="h-9!"
+              />
+            </Flex>
+          </div>
+        )}
+
+        {footer && (
+          <div className="p-4 border-t border-gray-200 bg-white">
+            {footer}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './date-picker';

package/src/components/molecules/Dialog/dialog.stories.tsx

@@ -0,0 +1,48 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './dialog';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Data Display/Dialog',
+  component: Dialog,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Dialog component based on `@radix-ui/react-dialog`. Used to display modal content.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Modal Example</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>Dialog Description</DialogDescription>
+        </DialogHeader>
+        <div className="px-6">
+          <p>Dialog Content</p>
+        </div>
+        <DialogFooter>
+          <Button>Action</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

package/src/components/molecules/Dialog/dialog.test.tsx

@@ -0,0 +1,51 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './dialog.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<Dialog />', () => {
+  const renderDialog = () => render(<Default />);
+
+  it('should render the dialog trigger', () => {
+    renderDialog();
+
+    expect(screen.getByTestId('dialog-trigger')).toBeInTheDocument();
+  });
+
+  it('opens and displays content when triggered', async () => {
+    renderDialog();
+
+    expect(screen.queryByTestId('dialog-content')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('dialog-trigger'));
+
+    expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('dialog-title')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('dialog-description')
+    ).toBeInTheDocument();
+  });
+
+  it('should close the dialog when the close button is clicked', async () => {
+    renderDialog();
+
+    await userEvent.click(screen.getByTestId('dialog-trigger'));
+
+    expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+
+    await userEvent.click(screen.getAllByTestId('dialog-close')[0]);
+
+    expect(screen.queryByTestId('dialog-content')).not.toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderDialog();
+    expect(container).toMatchSnapshot();
+  });
+});