@shohojdhara/atomix 0.1.30 → 0.2.2

package/src/components/Upload/Upload.stories.tsx

@@ -0,0 +1,220 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+import { Upload } from './Upload';
+
+export default {
+  title: 'Components/Upload',
+  component: Upload,
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    maxSizeInMB: {
+      control: { type: 'number' },
+      defaultValue: 5,
+    },
+    multiple: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Drag and Drop files here',
+    },
+    buttonText: {
+      control: { type: 'text' },
+      defaultValue: 'Choose File',
+    },
+  },
+} as Meta<typeof Upload>;
+
+const Template: StoryFn<typeof Upload> = args => (
+  <div style={{ padding: '30px', maxWidth: '600px' }}>
+    <Upload {...args} />
+  </div>
+);
+
+// Default upload component
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Drag and Drop files here',
+  supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+  buttonText: 'Choose File',
+  helperText: 'Maximum size: 5MB',
+};
+
+// Disabled state
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+// Manual state controls
+const WithStateControls: React.FC = () => {
+  const [currentState, setCurrentState] = useState<'default' | 'uploading' | 'success' | 'error'>(
+    'default'
+  );
+  const [progress, setProgress] = useState(75);
+
+  const resetState = () => {
+    setCurrentState('default');
+  };
+
+  const simulateUpload = () => {
+    setCurrentState('uploading');
+    setProgress(0);
+
+    let currentProgress = 0;
+    const interval = setInterval(() => {
+      currentProgress += 5;
+      setProgress(currentProgress);
+
+      if (currentProgress >= 100) {
+        clearInterval(interval);
+        setCurrentState('success');
+      }
+    }, 500);
+  };
+
+  const showError = () => {
+    setCurrentState('error');
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <button style={{ marginRight: '10px', padding: '8px 16px' }} onClick={resetState}>
+          Reset
+        </button>
+        <button style={{ marginRight: '10px', padding: '8px 16px' }} onClick={simulateUpload}>
+          Simulate Upload
+        </button>
+        <button style={{ padding: '8px 16px' }} onClick={showError}>
+          Show Error
+        </button>
+      </div>
+
+      <div style={{ padding: '30px', maxWidth: '600px' }}>
+        {currentState === 'default' && (
+          <Upload
+            onFileSelect={files => {
+              console.log('Files selected:', files);
+              simulateUpload();
+            }}
+          />
+        )}
+
+        {currentState === 'uploading' && (
+          <div className="c-upload">
+            <div className="c-upload__inner">
+              <div className="c-upload__icon">
+                <i className="icon-lux-cloud-arrow-up-fill"></i>
+              </div>
+              <h3 className="c-upload__title">Drag and Drop files here</h3>
+              <p className="c-upload__text">Files supported: PDF, XSLS, JPEG, PNG, Scanner</p>
+              <button className="c-upload__btn c-btn c-btn--primary">Choose File</button>
+              <p className="c-upload__helper-text">Maximum size: 5MB</p>
+            </div>
+            <div
+              className="c-upload__loader"
+              style={{ '--upload-loader-percentage': progress } as React.CSSProperties}
+            >
+              <div className="c-upload__loader-status">
+                <h5 className="c-upload__loader-title">File name.pdf</h5>
+                <div className="c-upload__loader-progress">
+                  <div className="c-upload__loader-par">{progress}%</div>
+                  <div className="c-upload__loader-time">
+                    {Math.ceil((100 - progress) / 5)} seconds left
+                  </div>
+                </div>
+              </div>
+
+              <div className="c-upload__loader-control">
+                <div className="c-upload__loader-bar">
+                  <svg>
+                    <circle cx="10" cy="10" r="10"></circle>
+                    <circle cx="10" cy="10" r="10"></circle>
+                  </svg>
+                </div>
+                <button className="c-upload__loader-close c-btn c-btn--icon" onClick={resetState}>
+                  <i className="icon-lux-x"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {currentState === 'success' && (
+          <div className="c-upload c-upload--success">
+            <div className="c-upload__inner">
+              <div className="c-upload__icon">
+                <i className="icon-lux-cloud-arrow-up-fill"></i>
+              </div>
+              <h3 className="c-upload__title">Drag and Drop files here</h3>
+              <p className="c-upload__text">Files supported: PDF, XSLS, JPEG, PNG, Scanner</p>
+              <button className="c-upload__btn c-btn c-btn--primary">Choose File</button>
+              <p className="c-upload__helper-text">Maximum size: 5MB</p>
+            </div>
+            <div className="c-upload__loader">
+              <div className="c-upload__loader-status">
+                <h5 className="c-upload__loader-title">File name.pdf</h5>
+                <div className="c-upload__loader-progress">Upload successful</div>
+              </div>
+
+              <div className="c-upload__loader-control">
+                <button className="c-upload__loader-close c-btn c-btn--icon" onClick={resetState}>
+                  <i className="icon-lux-check-circle-fill"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {currentState === 'error' && (
+          <div className="c-upload c-upload--error">
+            <div className="c-upload__inner">
+              <div className="c-upload__icon">
+                <i className="icon-lux-cloud-arrow-up-fill"></i>
+              </div>
+              <h3 className="c-upload__title">Drag and Drop files here</h3>
+              <p className="c-upload__text">Files supported: PDF, XSLS, JPEG, PNG, Scanner</p>
+              <button className="c-upload__btn c-btn c-btn--primary">Choose File</button>
+              <p className="c-upload__helper-text">Maximum size: 5MB</p>
+            </div>
+            <div className="c-upload__loader">
+              <div className="c-upload__loader-status">
+                <h5 className="c-upload__loader-title">File name.pdf</h5>
+                <div className="c-upload__loader-progress">Error message</div>
+              </div>
+
+              <div className="c-upload__loader-control">
+                <button className="c-upload__loader-close c-btn c-btn--icon" onClick={resetState}>
+                  <i className="icon-lux-x"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
+
+// Custom Icon
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+  ...Default.args,
+  icon: <i className="icon-lux-upload-cloud"></i>,
+};
+
+// Multiple file upload
+export const MultipleFiles = Template.bind({});
+MultipleFiles.args = {
+  ...Default.args,
+  multiple: true,
+  buttonText: 'Choose Files',
+};

package/src/components/Upload/Upload.tsx

@@ -0,0 +1,354 @@
+import React, { useState, useRef } from 'react';
+import { UPLOAD } from '../../lib/constants/components';
+
+export interface UploadProps {
+  /**
+   * Whether the upload component is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Maximum file size in MB
+   */
+  maxSizeInMB?: number;
+
+  /**
+   * Accepted file types
+   */
+  acceptedFileTypes?: string[];
+
+  /**
+   * Whether multiple files can be selected
+   */
+  multiple?: boolean;
+
+  /**
+   * Text for the drag and drop section
+   */
+  title?: string;
+
+  /**
+   * Text describing supported file types
+   */
+  supportedFilesText?: string;
+
+  /**
+   * Text for the upload button
+   */
+  buttonText?: string;
+
+  /**
+   * Helper text displayed below the button
+   */
+  helperText?: string;
+
+  /**
+   * Icon component or class name
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Called when files are selected
+   */
+  onFileSelect?: (files: File[]) => void;
+
+  /**
+   * Called during file upload with progress
+   */
+  onFileUpload?: (file: File, progress: number) => void;
+
+  /**
+   * Called when file upload is complete
+   */
+  onFileUploadComplete?: (file: File) => void;
+
+  /**
+   * Called on file upload errors
+   */
+  onFileUploadError?: (file: File, error: string) => void;
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * Upload status type
+ */
+type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
+
+/**
+ * Upload component for file uploads with drag and drop
+ */
+export const Upload: React.FC<UploadProps> = ({
+  disabled = false,
+  maxSizeInMB = 5,
+  acceptedFileTypes = [
+    'application/pdf',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'image/jpeg',
+    'image/png',
+  ],
+  multiple = false,
+  title = 'Drag and Drop files here',
+  supportedFilesText = 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+  buttonText = 'Choose File',
+  helperText = `Maximum size: ${maxSizeInMB}MB`,
+  icon = <i className="icon-lux-cloud-arrow-up-fill"></i>,
+  onFileSelect,
+  onFileUpload,
+  onFileUploadComplete,
+  onFileUploadError,
+  className = '',
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [status, setStatus] = useState<UploadStatus>('idle');
+  const [isDragging, setIsDragging] = useState(false);
+  const [currentFile, setCurrentFile] = useState<File | null>(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [timeLeft, setTimeLeft] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const dragCounter = useRef(0);
+
+  // Handle file input change
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files?.length) return;
+
+    const files = Array.from(e.target.files);
+    handleFiles(files);
+  };
+
+  // Handle button click
+  const handleButtonClick = () => {
+    if (inputRef.current && !disabled) {
+      inputRef.current.click();
+    }
+  };
+
+  // Handle drag enter
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+
+    dragCounter.current++;
+    if (dragCounter.current === 1) {
+      setIsDragging(true);
+    }
+  };
+
+  // Handle drag leave
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  };
+
+  // Handle drag over
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+  };
+
+  // Handle drop
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+
+    dragCounter.current = 0;
+    setIsDragging(false);
+
+    if (!e.dataTransfer.files?.length) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    handleFiles(files);
+  };
+
+  // Process files
+  const handleFiles = (files: File[]) => {
+    if (!files.length) return;
+
+    // If multiple is not allowed, take only the first file
+    const filesToProcess = multiple ? files : [files[0]];
+
+    // Validate files
+    const validFiles = filesToProcess.filter(
+      (file): file is File => file !== undefined && validateFile(file)
+    );
+
+    // Notify about file selection
+    if (validFiles.length && onFileSelect) {
+      onFileSelect(validFiles as File[]);
+    }
+
+    // Process the first valid file
+    if (validFiles.length) {
+      setCurrentFile(validFiles[0] || null);
+      if (validFiles[0]) {
+        simulateUpload(validFiles[0]);
+      }
+    }
+  };
+
+  // Validate file
+  const validateFile = (file: File): boolean => {
+    const maxSizeInBytes = maxSizeInMB * 1024 * 1024;
+
+    // Check file size
+    if (file.size > maxSizeInBytes) {
+      setStatus('error');
+      setErrorMessage(`File too large. Maximum size is ${maxSizeInMB}MB.`);
+      return false;
+    }
+
+    // Check file type if acceptedFileTypes is provided
+    if (acceptedFileTypes?.length) {
+      const isAcceptedType = acceptedFileTypes.some(type => {
+        // Handle wildcards like image/*
+        if (type.endsWith('/*')) {
+          const mainType = type.split('/')[0];
+          return file.type.startsWith(`${mainType}/`);
+        }
+        return file.type === type;
+      });
+
+      if (!isAcceptedType) {
+        setStatus('error');
+        setErrorMessage('File type not supported.');
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  // Simulate upload (in a real component, this would be an actual upload)
+  const simulateUpload = (file: File) => {
+    setStatus('loading');
+    setUploadProgress(0);
+
+    // Simulate progress updates
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += 5;
+
+      if (progress < 100) {
+        setUploadProgress(progress);
+        setTimeLeft(`${Math.ceil((100 - progress) / 5)} seconds left`);
+
+        if (onFileUpload) {
+          onFileUpload(file, progress);
+        }
+      } else {
+        clearInterval(interval);
+        setStatus('success');
+        setSuccessMessage('Upload successful');
+
+        if (onFileUploadComplete) {
+          onFileUploadComplete(file);
+        }
+      }
+    }, 500);
+  };
+
+  // Reset upload
+  const resetUpload = () => {
+    setStatus('idle');
+    setCurrentFile(null);
+    setUploadProgress(0);
+    setTimeLeft(null);
+    setErrorMessage(null);
+    setSuccessMessage(null);
+  };
+
+  return (
+    <div
+      className={`c-upload ${isDragging ? UPLOAD.CLASSES.DRAGGING : ''} ${disabled ? UPLOAD.CLASSES.DISABLED : ''} ${className}`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <div className="c-upload__inner">
+        {/* Hidden file input */}
+        <input
+          type="file"
+          ref={inputRef}
+          className="c-upload__input"
+          onChange={handleFileChange}
+          disabled={disabled}
+          accept={acceptedFileTypes.join(',')}
+          multiple={multiple}
+        />
+
+        {/* Drag and drop area */}
+        <div className="c-upload__inner">
+          <div className="c-upload__icon">{icon}</div>
+          <h3 className="c-upload__title">{title}</h3>
+          <p className="c-upload__text">{supportedFilesText}</p>
+
+          <button
+            type="button"
+            className="c-upload__btn c-btn"
+            onClick={handleButtonClick}
+            disabled={disabled}
+          >
+            {buttonText}
+          </button>
+
+          <p className="c-upload__helper-text">{helperText}</p>
+        </div>
+
+        {/* Progress and status area */}
+        {status !== 'idle' && (
+          <div
+            className="c-upload__loader"
+            style={{ '--upload-loader-percentage': uploadProgress } as React.CSSProperties}
+          >
+            {currentFile && (
+              <div className="c-upload__loader-status">
+                <h5 className="c-upload__loader-title">{currentFile.name}</h5>
+                <div className="c-upload__loader-progress">
+                  <div className="c-upload__loader-par">{uploadProgress}%</div>
+                  <div className="c-upload__loader-time">{timeLeft}</div>
+                </div>
+              </div>
+            )}
+
+            {(status === 'loading' || status === 'error' || status === 'success') && (
+              <div className="c-upload__loader-control">
+                <div className="c-upload__loader-bar">
+                  <svg>
+                    <circle cx="10" cy="10" r="10"></circle>
+                    <circle cx="10" cy="10" r="10"></circle>
+                  </svg>
+                </div>
+                <button
+                  type="button"
+                  className="c-upload__loader-close c-btn"
+                  onClick={resetUpload}
+                >
+                  <i className="icon-lux-x"></i>
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Upload.displayName = 'Upload';
+export default Upload;

package/src/components/Upload/index.ts

@@ -0,0 +1,3 @@
+export { Upload } from './Upload';
+export type { UploadProps } from './Upload';
+export { default } from './Upload';