@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { FileUpload } from '.';
+
+const meta = {
+  title: 'Components/FileUpload',
+  component: FileUpload,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileUpload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Upload Documents',
+    dropzoneText: 'Drag and drop files here, or click to browse',
+    hint: 'Maximum file size: 10MB',
+    onFileAdd: fn(),
+    onFileRemove: fn(),
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    label: 'Upload Multiple Files',
+    multiple: true,
+    dropzoneText: 'Drop multiple files here',
+    hint: 'You can upload multiple files at once',
+    onFileAdd: fn(),
+    onFileRemove: fn(),
+  },
+};
+
+export const WithFiles: Story = {
+  args: {
+    label: 'Uploaded Files',
+    files: [
+      {
+        id: '1',
+        file: new File(['content'], 'document.pdf', { type: 'application/pdf' }),
+        name: 'document.pdf',
+        size: 1024000,
+        progress: 100,
+        status: 'success',
+      },
+      {
+        id: '2',
+        file: new File(['content'], 'image.png', { type: 'image/png' }),
+        name: 'image.png',
+        size: 2048000,
+        progress: 50,
+        status: 'uploading',
+      },
+    ],
+    onFileRemove: fn(),
+  },
+};
+
+export const AcceptSpecificTypes: Story = {
+  args: {
+    label: 'Upload Images',
+    accept: 'image/*',
+    dropzoneText: 'Drop images here (PNG, JPG, GIF)',
+    hint: 'Only image files are accepted',
+    onFileAdd: fn(),
+  },
+};
+
+export const MaxFileSize: Story = {
+  args: {
+    label: 'Upload Small Files',
+    maxFileSize: 1024 * 1024, // 1MB
+    dropzoneText: 'Drop files here (max 1MB)',
+    hint: 'Files larger than 1MB will be rejected',
+    onFileAdd: fn(),
+  },
+};
+
+export const MaxFiles: Story = {
+  args: {
+    label: 'Upload Limited Files',
+    multiple: true,
+    maxFiles: 3,
+    dropzoneText: 'Drop up to 3 files',
+    files: [
+      {
+        id: '1',
+        file: new File(['content'], 'file1.pdf', { type: 'application/pdf' }),
+        name: 'file1.pdf',
+        size: 102400,
+        progress: 100,
+        status: 'success',
+      },
+    ],
+    onFileAdd: fn(),
+    onFileRemove: fn(),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Upload',
+    disabled: true,
+    files: [
+      {
+        id: '1',
+        file: new File(['content'], 'readonly.pdf', { type: 'application/pdf' }),
+        name: 'readonly.pdf',
+        size: 512000,
+        progress: 100,
+        status: 'success',
+      },
+    ],
+  },
+};
+
+export const WithoutProgress: Story = {
+  args: {
+    label: 'Simple Upload',
+    showProgress: false,
+    files: [
+      {
+        id: '1',
+        file: new File(['content'], 'simple.pdf', { type: 'application/pdf' }),
+        name: 'simple.pdf',
+        size: 1024000,
+        progress: 75,
+        status: 'uploading',
+      },
+    ],
+    onFileRemove: fn(),
+  },
+};

package/src/components/FileUpload/FileUpload.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import FileUpload from './FileUpload';
+import React from 'react';
+
+describe('FileUpload', () => {
+  it('renders correctly in default state', async () => {
+    const { container } = await render(
+      <FileUpload label="Upload Files" dropzoneText="Drop files here or click to upload" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with files list', async () => {
+    const files = [
+      { 
+        id: '1', 
+        file: new File(['content'], 'document.pdf', { type: 'application/pdf' }), 
+        name: 'document.pdf', 
+        size: 1024, 
+        progress: 100, 
+        status: 'success' as const 
+      },
+      { 
+        id: '2', 
+        file: new File(['content'], 'image.png', { type: 'image/png' }), 
+        name: 'image.png', 
+        size: 2048, 
+        progress: 50, 
+        status: 'uploading' as const 
+      },
+    ];
+    
+    const { container } = await render(
+      <FileUpload label="Upload" files={files} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with hint text', async () => {
+    const { container } = await render(
+      <FileUpload 
+        label="Upload Documents" 
+        hint="Maximum file size: 10MB. Supported formats: PDF, PNG, JPG" 
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled state', async () => {
+    const { container } = await render(
+      <FileUpload label="Upload" disabled={true} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,269 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useCallback } from 'react';
+import {
+  fileUploadContainer,
+  fileUploadDropzone,
+  fileUploadDropzoneVariants,
+  fileUploadLabel,
+  fileUploadText,
+  fileUploadHint,
+  fileUploadInput,
+  fileUploadList,
+  fileUploadItem,
+  fileUploadItemInfo,
+  fileUploadItemName,
+  fileUploadItemSize,
+  fileUploadRemoveButton,
+  fileUploadError,
+  fileUploadIcon,
+  fileUploadProgressBar,
+  fileUploadProgressFill,
+  fileUploadProgressFillVariants,
+} from './styles.css';
+import Box from '../Box';
+
+export interface FileUploadFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  progress: number;
+  status: 'uploading' | 'success' | 'error';
+  errorMessage?: string;
+}
+
+export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  files?: FileUploadFile[];
+  onFilesChange?: (files: FileUploadFile[]) => void;
+  onFileAdd?: (files: File[]) => void;
+  onFileRemove?: (fileId: string) => void;
+  accept?: string;
+  multiple?: boolean;
+  maxFileSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  dropzoneText?: string;
+  hint?: string;
+  showProgress?: boolean;
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+const FileUpload = ({
+  label,
+  files = [],
+  onFilesChange,
+  onFileAdd,
+  onFileRemove,
+  accept,
+  multiple = false,
+  maxFileSize,
+  maxFiles,
+  disabled = false,
+  dropzoneText = 'Drag and drop files here, or click to browse',
+  hint,
+  showProgress = true,
+  className,
+  ...props
+}: FileUploadProps) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const validateFile = (file: File): string | null => {
+    if (maxFileSize && file.size > maxFileSize) {
+      return `File size exceeds ${formatFileSize(maxFileSize)}`;
+    }
+    if (accept) {
+      const acceptedTypes = accept.split(',').map(type => type.trim());
+      const isAccepted = acceptedTypes.some(type => {
+        if (type.includes('*')) {
+          return file.type.startsWith(type.replace('/*', ''));
+        }
+        return file.type === type || file.name.endsWith(type);
+      });
+      if (!isAccepted) {
+        return `File type not accepted. Allowed: ${accept}`;
+      }
+    }
+    return null;
+  };
+
+  const handleFiles = useCallback((fileList: FileList | null) => {
+    if (!fileList || disabled) return;
+
+    const newFiles: File[] = [];
+    const errors: string[] = [];
+
+    Array.from(fileList).forEach(file => {
+      const validationError = validateFile(file);
+      if (validationError) {
+        errors.push(`${file.name}: ${validationError}`);
+      } else {
+        newFiles.push(file);
+      }
+    });
+
+    if (maxFiles && files.length + newFiles.length > maxFiles) {
+      errors.push(`Maximum ${maxFiles} files allowed`);
+      newFiles.splice(maxFiles - files.length);
+    }
+
+    if (errors.length > 0) {
+      setError(errors.join(', '));
+    } else {
+      setError(null);
+    }
+
+    if (newFiles.length > 0) {
+      onFileAdd?.(newFiles);
+    }
+  }, [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd]);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleFiles(e.dataTransfer.files);
+  };
+
+  const handleClick = () => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleFiles(e.target.files);
+    e.target.value = '';
+  };
+
+  const handleRemove = (fileId: string) => {
+    onFileRemove?.(fileId);
+  };
+
+  const getVariant = () => {
+    if (disabled) return 'disabled';
+    if (error) return 'error';
+    if (isDragOver) return 'dragOver';
+    return 'default';
+  };
+
+  return (
+    <Box className={clsx(fileUploadContainer, className)} {...props}>
+      {label && (
+        <Box as="label" className={fileUploadLabel}>
+          {label}
+        </Box>
+      )}
+
+      <Box
+        as="div"
+        className={clsx(
+          fileUploadDropzone,
+          fileUploadDropzoneVariants[getVariant()],
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleClick}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+      >
+        <Box className={fileUploadIcon} aria-hidden="true">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17,8 12,3 7,8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+        </Box>
+        <Box as="p" className={fileUploadText}>
+          {dropzoneText}
+        </Box>
+        {hint && (
+          <Box as="p" className={fileUploadHint}>
+            {hint}
+          </Box>
+        )}
+        <Box
+          as="input"
+          ref={inputRef}
+          type="file"
+          className={fileUploadInput}
+          onChange={handleInputChange}
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          aria-label="File upload input"
+        />
+      </Box>
+
+      {error && (
+        <Box as="p" className={fileUploadError} role="alert">
+          {error}
+        </Box>
+      )}
+
+      {files.length > 0 && (
+        <Box as="ul" className={fileUploadList} aria-label="Uploaded files">
+          {files.map((file) => (
+            <Box key={file.id} as="li" className={fileUploadItem}>
+              <Box className={fileUploadItemInfo}>
+                <Box as="p" className={fileUploadItemName} title={file.name}>
+                  {file.name}
+                </Box>
+                <Box as="p" className={fileUploadItemSize}>
+                  {formatFileSize(file.size)}
+                  {file.status === 'uploading' && showProgress && ' • Uploading...'}
+                  {file.status === 'success' && ' • Complete'}
+                  {file.status === 'error' && file.errorMessage && ` • ${file.errorMessage}`}
+                </Box>
+                {showProgress && file.status === 'uploading' && (
+                  <Box className={fileUploadProgressBar}>
+                    <Box
+                      className={clsx(
+                        fileUploadProgressFill,
+                        fileUploadProgressFillVariants[file.status],
+                      )}
+                      style={{ width: `${file.progress}%` }}
+                    />
+                  </Box>
+                )}
+              </Box>
+              <Box
+                as="button"
+                className={fileUploadRemoveButton}
+                onClick={() => handleRemove(file.id)}
+                type="button"
+                aria-label={`Remove ${file.name}`}
+              >
+                ×
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default FileUpload;

package/src/components/FileUpload/index.ts

@@ -0,0 +1,2 @@
+export { default as FileUpload } from './FileUpload';
+export type { FileUploadProps, FileUploadFile } from './FileUpload';

package/src/components/FileUpload/styles.css.ts

@@ -0,0 +1,164 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const fileUploadContainer = styleWithLayer({
+  width: '100%',
+});
+
+export const fileUploadDropzone = styleWithLayer({
+  border: `2px dashed ${vars.colors.borderDefault}`,
+  borderRadius: '12px',
+  padding: '2rem',
+  textAlign: 'center',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  backgroundColor: vars.colors.backgroundMuted,
+  ':hover': {
+    borderColor: vars.colors.inputBorderFocused,
+    backgroundColor: vars.colors.alertInfoBackground,
+  },
+});
+
+export const fileUploadDropzoneVariants = styleVariants({
+  default: {},
+  dragOver: {
+    borderColor: vars.colors.buttonBackgroundPrimary,
+    backgroundColor: vars.colors.alertInfoBackground,
+    borderStyle: 'solid',
+  },
+  error: {
+    borderColor: vars.colors.alertErrorBorder,
+    backgroundColor: vars.colors.alertErrorBackground,
+  },
+  disabled: {
+    cursor: 'not-allowed',
+    opacity: 0.6,
+    ':hover': {
+      borderColor: vars.colors.borderDefault,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+  },
+});
+
+export const fileUploadLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const fileUploadText = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadHint = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadInput = styleWithLayer({
+  display: 'none',
+});
+
+export const fileUploadList = styleWithLayer({
+  marginTop: '1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.75rem',
+});
+
+export const fileUploadItem = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75rem',
+  padding: '0.75rem',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderMuted}`,
+  borderRadius: '8px',
+});
+
+export const fileUploadItemInfo = styleWithLayer({
+  flex: 1,
+  minWidth: 0,
+});
+
+export const fileUploadItemName = styleWithLayer({
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const fileUploadItemSize = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '2px',
+});
+
+export const fileUploadItemProgress = styleWithLayer({
+  flex: 1,
+  maxWidth: '200px',
+});
+
+export const fileUploadRemoveButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.25rem',
+  color: vars.colors.textSecondary,
+  fontSize: '18px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '4px',
+  transition: 'all 0.15s ease',
+  ':hover': {
+    color: vars.colors.alertErrorText,
+    backgroundColor: vars.colors.alertErrorBackground,
+  },
+});
+
+export const fileUploadError = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.alertErrorText,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadIcon = styleWithLayer({
+  fontSize: '24px',
+  color: vars.colors.textSecondary,
+});
+
+export const fileUploadProgressBar = styleWithLayer({
+  width: '100%',
+  height: '4px',
+  backgroundColor: vars.colors.borderMuted,
+  borderRadius: '2px',
+  overflow: 'hidden',
+  marginTop: '0.5rem',
+});
+
+export const fileUploadProgressFill = styleWithLayer({
+  height: '100%',
+  backgroundColor: vars.colors.buttonBackgroundPrimary,
+  transition: 'width 0.3s ease',
+});
+
+export const fileUploadProgressFillVariants = styleVariants({
+  uploading: {
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+  },
+  success: {
+    backgroundColor: vars.colors.alertSuccessBorder,
+  },
+  error: {
+    backgroundColor: vars.colors.alertErrorBorder,
+  },
+});

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Form } from '.';
+import React from 'react';
+import { Input } from '../Input';
+import FormInput from './FormInput';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Login: Story = {
+  args: {
+    children: (
+      <>
+        <FormInput label="Username" placeholder="user" />
+        <FormInput label="Password" type="password" placeholder="••••••••" />
+      </>
+    ),
+  },
+};