@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/ButtonUpload/button-upload.tsx

@@ -0,0 +1,304 @@
+import { ChangeEvent, ComponentProps, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Box, Button, FileAttachment04, Flex, Label, RenderCondition, Typography } from '@/components';
+
+export interface ButtonUploadProps extends Omit<ComponentProps<'input'>, 'onChange' | 'onError' | 'value'> {
+  /** Text displayed on the upload button */
+  buttonText?: string;
+
+  /** Maximum file size in MB. Files larger than this will be rejected */
+  maxSize?: number;
+
+  /** Maximum file size error message */
+  maxSizeErrorMessage?: string;
+
+  /** Accepted file types error message */
+  acceptErrorMessage?: string;
+
+  /** Label text displayed above the input field */
+  label?: string;
+
+  /** Helper text displayed below the input field */
+  helperText?: string;
+
+  /** Whether to show a preview area (image preview or default icon) */
+  showPreview?: boolean;
+
+  /** Custom icon to display in the preview area when no image is selected */
+  defaultIcon?: React.ReactNode;
+
+  /** Callback triggered when a file is selected or deselected */
+  onFileSelect?: (file: File | null, previewUrl?: string) => void;
+
+  /** Callback triggered when file upload is completed successfully */
+  onUploadComplete?: (url: string) => void;
+
+  /** Callback triggered when an error occurs during file selection or upload */
+  onError?: (error: string) => void;
+
+  /** Whether the component is in a loading state (shows spinner) */
+  loading?: boolean;
+
+  /** Loading text */
+  loadingText?: boolean;
+
+  /** Error message to display below the input field */
+  error?: string;
+
+  /** Current value of the upload field (File, URL string, or null) */
+  value?: UploadValue;
+
+  /** Callback triggered when the value changes */
+  onChange?: (value: UploadValue) => void;
+
+  /** Function to handle file upload. Should return a Promise that resolves to the uploaded file URL */
+  uploadFunction?: (file: File) => Promise<string>;
+}
+
+/** Type representing the possible values for the upload field */
+export type UploadValue = File | string | null;
+
+export const ButtonUpload = forwardRef<HTMLInputElement, ButtonUploadProps>(({
+  buttonText = 'Importar',
+  maxSize = 50,
+  label = '',
+  helperText = '',
+  showPreview = false,
+  onFileSelect,
+  onUploadComplete,
+  onError,
+  loading = false,
+  disabled = false,
+  error = '',
+  accept = 'image/*,video/*,audio/*,.pdf,.docx,.txt,.xlsx,.csv',
+  value,
+  onChange,
+  uploadFunction,
+  maxSizeErrorMessage = '',
+  acceptErrorMessage = '',
+  loadingText = '',
+  ...props
+}, ref) => {
+  const [ previewUrl, setPreviewUrl ] = useState<string | null>(null);
+  const [ isUploading, setIsUploading ] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const uploadButtonRef = useRef<HTMLButtonElement>(null);
+
+  const isUrl = typeof value === 'string' && value.length > 0;
+  const isFile = value instanceof File;
+
+  useEffect(() => {
+    if (isUrl) {
+      setPreviewUrl(value);
+    } else if (isFile) {
+
+      if (showPreview && value.type.startsWith('image/')) {
+        const url = URL.createObjectURL(value);
+        setPreviewUrl(url);
+      }
+    } else {
+      setPreviewUrl(null);
+    }
+  }, [ value, isUrl, isFile, showPreview ]);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl && !isUrl) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [ previewUrl, isUrl ]);
+
+  const validateFile = useCallback((file: File): string | null => {
+    if (maxSize && file.size > maxSize * 1024 * 1024) {
+      return maxSizeErrorMessage || `Arquivo muito grande. Tamanho máximo: ${maxSize}MB`;
+    }
+
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(type => type.trim());
+      const fileType = file.type;
+      const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`;
+
+      const isValidType = acceptedTypes.some(type => {
+        if (type.startsWith('.')) {
+          return fileExtension === type.toLowerCase();
+        }
+
+        return fileType === type || fileType.startsWith(type.replace('*', ''));
+      });
+
+      if (!isValidType) {
+        return acceptErrorMessage || `Tipo de arquivo não suportado. Tipos aceitos: ${accept}`;
+      }
+    }
+
+    return null;
+  }, [ maxSize, accept, maxSizeErrorMessage, acceptErrorMessage ]);
+
+  const handleUpload = useCallback(async (file: File): Promise<string | null> => {
+    if (!uploadFunction) {
+      return null;
+    }
+
+    try {
+      setIsUploading(true);
+      const url = await uploadFunction(file);
+      onUploadComplete?.(url);
+      return url;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Erro no upload';
+      onError?.(errorMessage);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  }, [ uploadFunction, onUploadComplete, onError ]);
+
+  const handleFileSelect = useCallback(async (file: File | null) => {
+    if (previewUrl && !isUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+
+    if (file) {
+      const validationError = validateFile(file);
+
+      if (validationError) {
+        onError?.(validationError);
+        return;
+      }
+
+      if (showPreview && file.type.startsWith('image/')) {
+        const localUrl = URL.createObjectURL(file);
+        setPreviewUrl(localUrl);
+      }
+
+      onFileSelect?.(file, previewUrl || undefined);
+      onChange?.(file);
+
+      if (uploadFunction) {
+        const uploadedUrl = await handleUpload(file);
+
+        if (uploadedUrl) {
+          onChange?.(uploadedUrl);
+          setPreviewUrl(uploadedUrl);
+        }
+      }
+    } else {
+      setPreviewUrl(null);
+      onFileSelect?.(null);
+      onChange?.(null);
+
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    }
+  }, [ previewUrl, validateFile, showPreview, onFileSelect, onError, onChange, uploadFunction, handleUpload, isUrl ]);
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    handleFileSelect(file);
+  }, [ handleFileSelect ]);
+
+  const handleClick = useCallback(() => {
+    if (!disabled && !loading && !isUploading) {
+      inputRef.current?.click();
+    }
+  }, [ disabled, loading, isUploading ]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+
+    if (disabled || loading || isUploading) return;
+
+    const { files } = e.dataTransfer;
+
+    if (files.length > 0) {
+      handleFileSelect(files[0]);
+    }
+  }, [ disabled, loading, isUploading, handleFileSelect ]);
+
+  const isLoading = loading || isUploading;
+
+  return (
+    <Box className="w-full">
+      <Flex className="gap-4">
+        <Box className="flex-1 min-w-0">
+          {label && (
+            <Label htmlFor={props.id} className="mb-1.5">
+              {label}
+            </Label>
+          )}
+
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            onClick={handleClick}
+            ref={uploadButtonRef}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            isLoading={isLoading}
+          >
+            <RenderCondition condition={!isLoading}>
+              <FileAttachment04 className="size-5 text-gray-400" />
+            </RenderCondition>
+            {isUploading ? (loadingText || 'Enviando...') : buttonText}
+          </Button>
+
+          <input
+            ref={(node) => {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+
+              inputRef.current = node;
+            }}
+            type="file"
+            className="hidden"
+            accept={accept}
+            disabled={disabled || isLoading}
+            onChange={handleInputChange}
+            onFocus={() => uploadButtonRef.current?.focus()}
+            {...props}
+          />
+
+          {(helperText || error || (accept && maxSize)) && (
+            <Box className="mt-1.5">
+              {error && (
+                <Flex className="items-center gap-1 text-error-500 text-sm">
+                  <Typography className="text-sm">{error}</Typography>
+                </Flex>
+              )}
+
+              {helperText && !error && (
+                <Typography className="text-gray-500 text-sm">
+                  {helperText}
+                </Typography>
+              )}
+
+              {accept && maxSize && !error && !helperText && (
+                <Typography className="text-gray-500 text-sm">
+                  Formatos aceitos: {accept} (Máx. {maxSize}MB)
+                </Typography>
+              )}
+            </Box>
+          )}
+        </Box>
+      </Flex>
+    </Box>
+  );
+});
+
+ButtonUpload.displayName = 'ButtonUpload';

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

@@ -0,0 +1 @@
+export { ButtonUpload, type ButtonUploadProps } from './button-upload';

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

@@ -0,0 +1,51 @@
+import { DateTime } from 'luxon';
+
+import { Calendar } from './calendar';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'Components/Data Display/Calendar',
+  component: Calendar,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A date field component that allows users to enter and edit date.',
+      },
+    },
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    selected: DateTime.now().toJSDate(),
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    mode: 'multiple',
+    selected: [
+      DateTime.now().toJSDate(),
+      DateTime.now().plus({ days: 3 }).toJSDate(),
+    ],
+  },
+};
+
+export const Range: Story = {
+  args: {
+    mode: 'range',
+    selected: {
+      from: DateTime.now().toJSDate(),
+      to: DateTime.now().plus({ days: 5 }).toJSDate(),
+    },
+  },
+};

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { DateTime } from 'luxon';
+import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+
+import { Calendar } from './calendar';
+
+describe('<Calendar />', () => {
+  const MOCK_DATE = '2023-05-15T12:00:00.000Z';
+  const mockDateTime = DateTime.fromISO(MOCK_DATE);
+
+  beforeAll(() => {
+    vi.spyOn(DateTime, 'now').mockReturnValue(mockDateTime as DateTime<true>);
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    render(<Calendar />);
+    const calendar = screen.getByTestId('calendar');
+    expect(calendar).toBeInTheDocument();
+  });
+
+  it('renders with custom className', () => {
+    render(<Calendar className="bg-red-500" />);
+    const container = screen.getByTestId('calendar-container');
+    expect(container).toHaveClass('bg-red-500');
+  });
+
+  it('does not show outside days if showOutsideDays is false', () => {
+    render(<Calendar showOutsideDays={false} />);
+    const outsideDays = screen.queryAllByLabelText(/outside/i);
+    expect(outsideDays.length).toBe(0);
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Calendar showOutsideDays={false} />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+import { capitalizeFirst, cn } from '@/utils/index';
+
+import type { Formatters } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  formatLocale?: string;
+};
+
+function Calendar({
+  className,
+  showOutsideDays = true,
+  formatLocale,
+  ...props
+}: CalendarProps) {
+  const { formatters: userFormatters, classNames: userClassNames, ...restProps } = props;
+
+  const isControlledMonth = typeof restProps.month !== 'undefined';
+  const [ internalMonth, setInternalMonth ] = React.useState<Date | undefined>(
+    isControlledMonth ? undefined : undefined
+  );
+
+  React.useEffect(() => {
+    if (isControlledMonth) {
+      setInternalMonth(undefined);
+    }
+  }, [ isControlledMonth ]);
+
+  const formatters = React.useMemo<Partial<Formatters>>(() => ({
+    formatCaption: (month, options) => {
+      void options;
+      const label = month.toLocaleDateString(formatLocale, { month: 'long', year: 'numeric' });
+      return capitalizeFirst(label);
+    },
+    formatWeekdayName: (weekday, options) => {
+      void options;
+      const label = weekday.toLocaleDateString(formatLocale, { weekday: 'short' });
+      return capitalizeFirst(label);
+    },
+    ...(userFormatters || {}),
+  }), [ userFormatters, formatLocale ]);
+
+  return (
+    <div className={cn('rounded-xl w-fit h-fit', className)} data-testid="calendar-container">
+      <DayPicker
+        data-testid="calendar"
+        showOutsideDays={showOutsideDays}
+        fixedWeeks
+        className="text-sm"
+        modifiersClassNames={{
+          selected: 'bg-primary text-primary-foreground rounded-full',
+          today: 'bg-accent text-accent-foreground rounded-full',
+          outside: 'text-gray-500',
+          disabled: 'text-muted-foreground opacity-50',
+        }}
+        classNames={{
+          chevron: 'fill-gray-400 size-5',
+          range_end: 'bg-primary text-primary-foreground',
+          range_start: 'bg-primary text-primary-foreground',
+          range_middle: '!bg-primary/10 !text-gray-900 !rounded-none',
+          month_caption: 'text-sm text-gray-700 font-semibold text-center py-4',
+          nav: 'absolute top-0 flex items-center justify-between w-full bg-gray-50 border-y border-gray-200 px-3 py-1.5',
+          month_grid: 'border-[12px] border-transparent',
+          ...(userClassNames || {}),
+        }}
+        modifiersStyles={{
+          range_start: {
+            borderTopRightRadius: '0.375rem',
+            borderBottomRightRadius: '0.375rem',
+          },
+          range_end: {
+            borderTopLeftRadius: '0.375rem',
+            borderBottomLeftRadius: '0.375rem',
+          },
+        }}
+        formatters={formatters}
+        onDayClick={(day, modifiers, e) => {
+          restProps.onDayClick?.(day, modifiers, e);
+
+          if (modifiers?.outside) {
+
+            const newMonth = new Date(day.getFullYear(), day.getMonth(), 1);
+
+            if (isControlledMonth) {
+              restProps.onMonthChange?.(newMonth);
+            } else {
+              setInternalMonth(newMonth);
+            }
+          }
+        }}
+        onMonthChange={(m) => {
+          restProps.onMonthChange?.(m);
+
+          if (!isControlledMonth) setInternalMonth(m);
+        }}
+        {...(!isControlledMonth && internalMonth ? { month: internalMonth } : {})}
+        {...restProps}
+      />
+    </div>
+  );
+}
+
+export { Calendar };

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

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

package/src/components/atoms/CheckIcon/check-icon.stories.tsx

@@ -0,0 +1,38 @@
+import { CheckIcon } from './check-icon';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof CheckIcon> = {
+  title: 'Components/Data Display/CheckIcon',
+  component: CheckIcon,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A check icon component.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+  },
+};