@brcarddev/frontend-commons 1.0.2

package/src/components/organisms/Chart/chart.tsx

@@ -0,0 +1,294 @@
+import * as React from 'react';
+
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '@/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          '[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden',
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([ , config ]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([ theme, prefix ]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+      .map(([ key, itemConfig ]) => {
+        const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+        return color ? `  --color-${key}: ${color};` : null;
+      })
+      .join('\n')}
+}
+`
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [ item ] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label;
+
+    if (labelFormatter) {
+      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return (
+      <div className={cn('font-medium', labelClassName)} data-testid="chart-tooltip">
+        {value}
+      </div>
+    );
+  }, [ label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center'
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                          'h-2.5 w-2.5': indicator === 'dot',
+                          'w-1': indicator === 'line',
+                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                          'my-0.5': nestLabel && indicator === 'dashed',
+                        })}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> &
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/src/components/organisms/Chart/index.ts

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

package/src/components/organisms/FileUpload/FilePreview/file-preview.tsx

@@ -0,0 +1,55 @@
+import { X, FileText } from 'lucide-react';
+
+import { FileType } from '../file';
+
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTrigger,
+  AlertDialogClose,
+  Box,
+} from '@/components';
+
+export type FilePreviewProps = {
+  file: FileType;
+};
+
+export const FilePreview = ({ file }: FilePreviewProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <button className='p-1 hover:bg-accent rounded-md cursor-pointer'>
+          <FileText className='w-4 h-4' />
+        </button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className='fixed w-full max-w-5xl'>
+        <AlertDialogClose className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-50'>
+          <X className='h-4 w-4' />
+        </AlertDialogClose>
+        <Box className='p-6'>
+          {file.file.type.startsWith('image/') && file.preview && (
+            <img
+              src={file.preview}
+              alt={file.file.name}
+              className='max-w-full max-h-full object-fit'
+            />
+          )}
+          {file.file.type.startsWith('video/') && (
+            <video
+              src={URL.createObjectURL(file.file)}
+              controls
+              controlsList='nodownload'
+              className='max-w-full max-h-[80vh]'
+            />
+          )}
+          {file.file.type === 'application/pdf' && (
+            <iframe
+              src={URL.createObjectURL(file.file)}
+              className='w-full h-[80vh]'
+            />
+          )}
+        </Box>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/components/organisms/FileUpload/FilePreview/index.ts

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

package/src/components/organisms/FileUpload/file-upload.stories.tsx

@@ -0,0 +1,20 @@
+import { FileUpload } from './file-upload';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof FileUpload> = {
+  title: 'Components/Data Entry/FileUpload',
+  component: FileUpload,
+  tags: [ 'autodocs' ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {
+  args: {
+    maxFiles: 3,
+    maxSize: 5 * 1024 * 1024,
+    onUpload: (files) => console.log('Uploaded files:', files),
+  },
+};

package/src/components/organisms/FileUpload/file-upload.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, vi, expect } from 'vitest';
+
+import { FileUpload } from './file-upload';
+
+const mockCreateObjectURL = vi.fn(() => 'mock-url');
+URL.createObjectURL = mockCreateObjectURL;
+
+function createFile(name: string, type: string, size = 1024) {
+  const blob = new Blob([ 'a'.repeat(size) ], { type });
+  return new File([ blob ], name, { type });
+}
+
+describe('<FileUpload />', () => {
+  it('should render the upload area', () => {
+    render(<FileUpload />);
+    expect(
+      screen.getByText(/drag and drop files here/i)
+    ).toBeInTheDocument();
+  });
+
+  it('should trigger onUpload and show file preview', async () => {
+    const mockUpload = vi.fn();
+    render(<FileUpload onUpload={mockUpload} />);
+
+    const input = screen.getByTestId('file-upload-input');
+    const file = createFile('image.png', 'image/png');
+
+    fireEvent.change(input, {
+      target: { files: [ file ] },
+    });
+
+    await waitFor(() => {
+      expect(mockUpload).toHaveBeenCalled();
+      expect(screen.getByText('image.png')).toBeInTheDocument();
+    });
+  });
+
+  it('should remove a file when remove button is clicked', async () => {
+    const file = createFile('remove.pdf', 'application/pdf');
+
+    render(<FileUpload />);
+
+    const input = screen.getByTestId('file-upload-input');
+    fireEvent.change(input, {
+      target: { files: [ file ] },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('remove.pdf')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('remove-file-button'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('remove.pdf')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/organisms/FileUpload/file-upload.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useState } from 'react';
+
+import {
+  Cross2Icon,
+  UploadIcon,
+  FileIcon,
+  ImageIcon,
+  VideoIcon,
+  CheckCircledIcon,
+} from '@radix-ui/react-icons';
+import { useDropzone } from 'react-dropzone';
+
+import { FileType, FileUploadProps } from './file';
+import { FilePreview } from './FilePreview';
+
+import { Box, Flex, Typography, Progress } from '@/components';
+import { cn, formatFileSize } from '@/utils';
+
+const getFileIcon = (file: File) => {
+  if (file.type.startsWith('image/'))
+    return <ImageIcon className='w-8 h-8 text-primary' />;
+
+  if (file.type.startsWith('video/'))
+    return <VideoIcon className='w-8 h-8 text-primary' />;
+
+  if (file.type === 'application/pdf')
+    return <FileIcon className='w-8 h-8 text-primary' />;
+
+  return <FileIcon className='w-8 h-8 text-primary' />;
+};
+
+export const FileUpload = ({
+  onUpload,
+  maxSize = 10 * 1024 * 1024,
+  accept = {
+    'image/*': [ '.png', '.jpg', '.jpeg', '.gif' ],
+    'video/*': [ '.mp4', '.webm', '.mov' ],
+    'application/pdf': [ '.pdf' ],
+    'application/msword': [ '.doc', '.txt' ],
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': [
+      '.docx',
+    ],
+  },
+  maxFiles = 5,
+  className,
+  dragAndDropLabel = 'Drag and drop files here, or click to select files',
+  dragActiveLabel = 'Drop the files here...',
+  maxSizeLabel = 'Max file size',
+  maxFilesLabel = 'Max files',
+  uploadCompleteLabel = 'Upload complete',
+}: FileUploadProps) => {
+  const [ files, setFiles ] = useState<FileType[]>([]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const newFiles = acceptedFiles.map((file) => ({
+        id: Math.random().toString(36).substring(7),
+        file,
+        progress: 0,
+        preview: file.type.startsWith('image/')
+          ? URL.createObjectURL(file)
+          : undefined,
+        isUploaded: false,
+      }));
+
+      setFiles((prev) => [ ...prev, ...newFiles ].slice(0, maxFiles));
+
+      newFiles.forEach((file) => {
+        let progress = 0;
+        const interval = setInterval(() => {
+          progress += 10;
+          setFiles((prev) =>
+            prev.map((f) =>
+              (f.id === file.id
+                ? { ...f, progress: Math.min(progress, 100) }
+                : f)
+            )
+          );
+
+          if (progress >= 100) {
+            clearInterval(interval);
+            setFiles((prev) =>
+              prev.map((f) =>
+                (f.id === file.id ? { ...f, isUploaded: true } : f)
+              )
+            );
+          }
+        }, 200);
+      });
+
+      onUpload?.(newFiles);
+    },
+    [ maxFiles, onUpload ]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    maxSize,
+    accept,
+    maxFiles,
+  });
+
+  const removeFile = (id: string) => {
+    setFiles((prev) => prev.filter((file) => file.id !== id));
+  };
+
+  return (
+    <Box className={cn('w-full', className)}>
+      <Box
+        {...getRootProps()}
+        className={cn(
+          'border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors',
+          isDragActive
+            ? 'border-primary bg-primary/10'
+            : 'border-muted-foreground/25',
+          'hover:border-primary hover:bg-primary/5'
+        )}>
+        <input {...getInputProps()} data-testid='file-upload-input' />
+        <UploadIcon className='w-8 h-8 mx-auto mb-2 text-muted-foreground' />
+        <Typography className='text-sm text-muted-foreground'>
+          {isDragActive ? dragActiveLabel : dragAndDropLabel}
+        </Typography>
+        <Typography className='text-xs text-muted-foreground mt-1'>
+          {maxSizeLabel}: {formatFileSize(maxSize)} • {maxFilesLabel}:{' '}
+          {maxFiles}
+        </Typography>
+      </Box>
+
+      {files.length > 0 && (
+        <Box className='mt-4 space-y-4'>
+          {files.map((file) => (
+            <Flex
+              key={file.id}
+              className='items-center gap-4 p-3 rounded-lg border bg-card'>
+              {getFileIcon(file.file)}
+
+              <Box className='flex-1 min-w-0'>
+                <Typography className='text-sm font-medium truncate'>
+                  {file.file.name}
+                </Typography>
+                <Typography className='text-xs text-muted-foreground'>
+                  {formatFileSize(file.file.size)}
+                </Typography>
+                {!file.isUploaded ? (
+                  <Progress value={file.progress} className='mt-2' />
+                ) : (
+                  <Flex className='items-center gap-1 mt-2 text-xs text-primary'>
+                    <CheckCircledIcon className='w-4 h-4' />
+                    <Typography className='text-xs'>
+                      {uploadCompleteLabel}
+                    </Typography>
+                  </Flex>
+                )}
+              </Box>
+
+              <Flex className='items-center gap-2'>
+                {(file.file.type.startsWith('image/') ||
+                  file.file.type.startsWith('video/') ||
+                  file.file.type === 'application/pdf') && (
+                  <FilePreview file={file} />
+                )}
+                <Box
+                  data-testid='remove-file-button'
+                  className='p-1 hover:bg-accent rounded-md cursor-pointer'
+                  onClick={() => removeFile(file.id)}>
+                  <Cross2Icon className='w-4 h-4' />
+                </Box>
+              </Flex>
+            </Flex>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/organisms/FileUpload/file.d.ts

@@ -0,0 +1,21 @@
+export type FileType = {
+  id: string;
+  file: File;
+  progress: number;
+  preview?: string;
+  isUploaded?: boolean;
+};
+
+export type FileUploadProps = {
+  onUpload?: (files: FileType[]) => void;
+  maxSize?: number;
+  accept?: Record<string, string[]>;
+  maxFiles?: number;
+  className?: string;
+
+  dragAndDropLabel?: string;
+  dragActiveLabel?: string;
+  maxSizeLabel?: string;
+  maxFilesLabel?: string;
+  uploadCompleteLabel?: string;
+};

package/src/components/organisms/FileUpload/index.ts

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