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

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { EmptyState } from '.';
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>📭</span>,
+    title: 'No items found',
+    description: 'Get started by creating a new item',
+    action: <button onClick={fn()}>Create Item</button>,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    title: 'Nothing to display',
+  },
+};
+
+export const NoAction: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>🔍</span>,
+    title: 'No search results',
+    description: 'Try adjusting your search or filters',
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>📊</span>,
+    title: 'No data available',
+    action: <button onClick={fn()}>Import Data</button>,
+  },
+};

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import EmptyState from './EmptyState';
+import React from 'react';
+
+describe('EmptyState', () => {
+  it('renders with all props', async () => {
+    const { container } = await render(
+      <EmptyState
+        icon={<span>📭</span>}
+        title="No items found"
+        description="Try adjusting your filters or search criteria"
+        action={<button>Create new item</button>}
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders minimal state', async () => {
+    const { container } = await render(
+      <EmptyState title="Nothing to show" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  emptyState,
+  emptyStateIcon,
+  emptyStateTitle,
+  emptyStateDescription,
+  emptyStateAction,
+} from './styles.css';
+import Box from '../Box';
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) => {
+  return (
+    <Box className={clsx(emptyState, className)} role="status">
+      {icon && (
+        <Box className={emptyStateIcon} aria-hidden="true">
+          {icon}
+        </Box>
+      )}
+      {title && (
+        <Box as="h3" className={emptyStateTitle}>
+          {title}
+        </Box>
+      )}
+      {description && (
+        <Box as="p" className={emptyStateDescription}>
+          {description}
+        </Box>
+      )}
+      {action && (
+        <Box className={emptyStateAction}>
+          {action}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default EmptyState;

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

@@ -0,0 +1,36 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const emptyState = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '2rem',
+  textAlign: 'center',
+});
+
+export const emptyStateIcon = styleWithLayer({
+  fontSize: '48px',
+  marginBottom: '1rem',
+  color: vars.colors.textSecondary,
+});
+
+export const emptyStateTitle = styleWithLayer({
+  fontSize: '18px',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: '0 0 0.5rem 0',
+});
+
+export const emptyStateDescription = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  margin: '0 0 1rem 0',
+  maxWidth: '400px',
+});
+
+export const emptyStateAction = styleWithLayer({
+  marginTop: '0.5rem',
+});

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;