@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Tooltip/scripts/tooltipInteractions.ts

@@ -14,21 +14,21 @@ export function calculateBestPosition(
   preferredPosition: string = 'top'
 ): string {
   if (!triggerElement || !tooltipElement) return preferredPosition;
-  
+
   // Get element dimensions and positions
   const triggerRect = triggerElement.getBoundingClientRect();
   const tooltipRect = tooltipElement.getBoundingClientRect();
-  
+
   // Get viewport dimensions
   const viewportHeight = window.innerHeight;
   const viewportWidth = window.innerWidth;
-  
+
   // Calculate available space in each direction
   const spaceAbove = triggerRect.top;
   const spaceBelow = viewportHeight - triggerRect.bottom;
   const spaceLeft = triggerRect.left;
   const spaceRight = viewportWidth - triggerRect.right;
-  
+
   // Check if preferred position has enough space
   switch (preferredPosition) {
     case 'top':
@@ -46,18 +46,18 @@ export function calculateBestPosition(
     default:
       break;
   }
-  
+
   // Find the best alternative position
   const spaces = [
     { position: 'top', space: spaceAbove },
     { position: 'bottom', space: spaceBelow },
     { position: 'left', space: spaceLeft },
-    { position: 'right', space: spaceRight }
+    { position: 'right', space: spaceRight },
   ];
-  
+
   // Sort by available space (descending)
   spaces.sort((a, b) => b.space - a.space);
-  
+
   // Return the position with the most space
   return spaces[0].position;
 }
@@ -76,30 +76,30 @@ export function positionTooltip(
   offset: number = 8
 ): void {
   if (!tooltipElement || !triggerElement) return;
-  
+
   // Get element dimensions
   const triggerRect = triggerElement.getBoundingClientRect();
   const tooltipRect = tooltipElement.getBoundingClientRect();
-  
+
   // Calculate position based on the trigger and tooltip dimensions
   let top = 0;
   let left = 0;
-  
+
   switch (position) {
     case 'top':
       top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
       break;
     case 'bottom':
       top = triggerRect.bottom + offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
       break;
     case 'left':
-      top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
       left = triggerRect.left - tooltipRect.width - offset;
       break;
     case 'right':
-      top = triggerRect.top + (triggerRect.height / 2) - (tooltipRect.height / 2);
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
       left = triggerRect.right + offset;
       break;
     case 'top-left':
@@ -121,9 +121,9 @@ export function positionTooltip(
     default:
       // Default to top
       top = triggerRect.top - tooltipRect.height - offset;
-      left = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2);
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
   }
-  
+
   // Apply position
   tooltipElement.style.top = `${top}px`;
   tooltipElement.style.left = `${left}px`;
@@ -139,12 +139,12 @@ export function initializeTooltipsWithCustomBehavior(
   options = {}
 ): Tooltip[] {
   const tooltips = Tooltip.initializeAll(selector, options);
-  
+
   // Apply smart positioning to each tooltip
   tooltips.forEach((tooltip: Tooltip) => {
     const triggerElement = tooltip.getTriggerElement();
     const tooltipElement = tooltip.getElement();
-    
+
     if (triggerElement && tooltipElement) {
       // Update position on window resize
       window.addEventListener('resize', () => {
@@ -154,12 +154,12 @@ export function initializeTooltipsWithCustomBehavior(
             tooltipElement,
             tooltip.getPosition()
           );
-          
+
           tooltip.setPosition(bestPosition);
         }
       });
     }
   });
-  
+
   return tooltips;
-} 
+}

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

@@ -30,7 +30,7 @@ export default {
   },
 } as Meta<typeof Upload>;
 
-const Template: StoryFn<typeof Upload> = (args) => (
+const Template: StoryFn<typeof Upload> = args => (
   <div style={{ padding: '30px', maxWidth: '600px' }}>
     <Upload {...args} />
   </div>
@@ -54,66 +54,59 @@ Disabled.args = {
 
 // Manual state controls
 const WithStateControls: React.FC = () => {
-  const [currentState, setCurrentState] = useState<'default' | 'uploading' | 'success' | 'error'>('default');
+  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}
-        >
+        <button style={{ marginRight: '10px', padding: '8px 16px' }} onClick={resetState}>
           Reset
         </button>
-        <button 
-          style={{ marginRight: '10px', padding: '8px 16px' }} 
-          onClick={simulateUpload}
-        >
+        <button style={{ marginRight: '10px', padding: '8px 16px' }} onClick={simulateUpload}>
           Simulate Upload
         </button>
-        <button 
-          style={{ padding: '8px 16px' }} 
-          onClick={showError}
-        >
+        <button style={{ padding: '8px 16px' }} onClick={showError}>
           Show Error
         </button>
       </div>
-      
+
       <div style={{ padding: '30px', maxWidth: '600px' }}>
         {currentState === 'default' && (
           <Upload
-            onFileSelect={(files) => {
+            onFileSelect={files => {
               console.log('Files selected:', files);
               simulateUpload();
             }}
           />
         )}
-        
+
         {currentState === 'uploading' && (
           <div className="c-upload">
             <div className="c-upload__inner">
@@ -125,12 +118,17 @@ const WithStateControls: React.FC = () => {
               <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"
+              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 className="c-upload__loader-time">
+                    {Math.ceil((100 - progress) / 5)} seconds left
+                  </div>
                 </div>
               </div>
 
@@ -148,7 +146,7 @@ const WithStateControls: React.FC = () => {
             </div>
           </div>
         )}
-        
+
         {currentState === 'success' && (
           <div className="c-upload c-upload--success">
             <div className="c-upload__inner">
@@ -163,9 +161,7 @@ const WithStateControls: React.FC = () => {
             <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 className="c-upload__loader-progress">Upload successful</div>
               </div>
 
               <div className="c-upload__loader-control">
@@ -176,7 +172,7 @@ const WithStateControls: React.FC = () => {
             </div>
           </div>
         )}
-        
+
         {currentState === 'error' && (
           <div className="c-upload c-upload--error">
             <div className="c-upload__inner">
@@ -191,9 +187,7 @@ const WithStateControls: React.FC = () => {
             <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 className="c-upload__loader-progress">Error message</div>
               </div>
 
               <div className="c-upload__loader-control">
@@ -224,4 +218,4 @@ MultipleFiles.args = {
   ...Default.args,
   multiple: true,
   buttonText: 'Choose Files',
-}; 
+};

package/src/components/Upload/Upload.tsx

@@ -6,67 +6,67 @@ 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
    */
@@ -84,7 +84,13 @@ type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
 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'],
+  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',
@@ -100,7 +106,7 @@ export const Upload: React.FC<UploadProps> = ({
   const uploadRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const uploadInstance = useRef<any>(null);
-  
+
   const [status, setStatus] = useState<UploadStatus>('idle');
   const [isDragging, setIsDragging] = useState(false);
   const [currentFile, setCurrentFile] = useState<File | null>(null);
@@ -109,7 +115,7 @@ export const Upload: React.FC<UploadProps> = ({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const dragCounter = useRef(0);
-  
+
   useEffect(() => {
     // Only run on client-side
     if (typeof window === 'undefined' || !uploadRef.current) return undefined;
@@ -137,115 +143,124 @@ export const Upload: React.FC<UploadProps> = ({
             setStatus('error');
             setErrorMessage(error);
             if (onFileUploadError) onFileUploadError(file, error);
-          }
+          },
         });
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (uploadInstance.current) {
         uploadInstance.current.destroy();
       }
     };
-  }, [disabled, maxSizeInMB, acceptedFileTypes, multiple, onFileSelect, onFileUpload, onFileUploadComplete, onFileUploadError]);
-  
+  }, [
+    disabled,
+    maxSizeInMB,
+    acceptedFileTypes,
+    multiple,
+    onFileSelect,
+    onFileUpload,
+    onFileUploadComplete,
+    onFileUploadError,
+  ]);
+
   // 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 => 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);
+      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 => {
@@ -256,31 +271,31 @@ export const Upload: React.FC<UploadProps> = ({
         }
         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);
         }
@@ -288,14 +303,14 @@ export const Upload: React.FC<UploadProps> = ({
         clearInterval(interval);
         setStatus('success');
         setSuccessMessage('Upload successful');
-        
+
         if (onFileUploadComplete) {
           onFileUploadComplete(file);
         }
       }
     }, 500);
   };
-  
+
   // Handle close button click
   const handleClose = () => {
     setStatus('idle');
@@ -304,13 +319,13 @@ export const Upload: React.FC<UploadProps> = ({
     setTimeLeft(null);
     setErrorMessage(null);
     setSuccessMessage(null);
-    
+
     // Reset input
     if (inputRef.current) {
       inputRef.current.value = '';
     }
   };
-  
+
   // Determine CSS classes
   const uploadClasses = [
     'c-upload',
@@ -319,17 +334,22 @@ export const Upload: React.FC<UploadProps> = ({
     status === 'success' ? UPLOAD.CLASSES.SUCCESS : '',
     status === 'error' ? UPLOAD.CLASSES.ERROR : '',
     isDragging ? UPLOAD.CLASSES.DRAGGING : '',
-    className
-  ].filter(Boolean).join(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   // Update CSS variable for progress
-  const style = uploadProgress > 0 ? {
-    [UPLOAD.ATTRIBUTES.PERCENTAGE]: uploadProgress
-  } as React.CSSProperties : {};
-  
+  const style =
+    uploadProgress > 0
+      ? ({
+          [UPLOAD.ATTRIBUTES.PERCENTAGE]: uploadProgress,
+        } as React.CSSProperties)
+      : {};
+
   return (
-    <div 
-      className={uploadClasses} 
+    <div
+      className={uploadClasses}
       ref={uploadRef}
       style={style}
       onDragEnter={handleDragEnter}
@@ -338,13 +358,11 @@ export const Upload: React.FC<UploadProps> = ({
       onDrop={handleDrop}
     >
       <div className="c-upload__inner">
-        <div className="c-upload__icon">
-          {icon}
-        </div>
+        <div className="c-upload__icon">{icon}</div>
         <h3 className="c-upload__title">{title}</h3>
         <p className="c-upload__text">{supportedFilesText}</p>
-        <button 
-          className="c-upload__btn c-btn c-btn--primary" 
+        <button
+          className="c-upload__btn c-btn c-btn--primary"
           disabled={disabled}
           onClick={handleButtonClick}
         >
@@ -360,7 +378,7 @@ export const Upload: React.FC<UploadProps> = ({
           onChange={handleFileChange}
         />
       </div>
-      
+
       {(status === 'loading' || status === 'success' || status === 'error') && currentFile && (
         <div className="c-upload__loader">
           <div className="c-upload__loader-status">
@@ -376,7 +394,7 @@ export const Upload: React.FC<UploadProps> = ({
               {status === 'error' && errorMessage}
             </div>
           </div>
-          
+
           <div className="c-upload__loader-control">
             {status === 'loading' && uploadProgress < 100 && (
               <div className="c-upload__loader-bar">
@@ -386,10 +404,7 @@ export const Upload: React.FC<UploadProps> = ({
                 </svg>
               </div>
             )}
-            <button 
-              className="c-upload__loader-close c-btn c-btn--icon"
-              onClick={handleClose}
-            >
+            <button className="c-upload__loader-close c-btn c-btn--icon" onClick={handleClose}>
               {status === 'success' ? (
                 <i className="icon-lux-check-circle-fill"></i>
               ) : (
@@ -404,4 +419,4 @@ export const Upload: React.FC<UploadProps> = ({
 };
 
 Upload.displayName = 'Upload';
-export default Upload;
+export default Upload;