@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Upload/index.ts

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

package/src/components/Upload/scripts/index.ts

@@ -33,8 +33,14 @@ interface UploadInstance {
 const DEFAULT_OPTIONS: UploadOptions = {
   disabled: false,
   maxSizeInMB: 5,
-  acceptedFileTypes: ['application/pdf', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'image/jpeg', 'image/png'],
-  multiple: false
+  acceptedFileTypes: [
+    'application/pdf',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'image/jpeg',
+    'image/png',
+  ],
+  multiple: false,
 };
 
 /**
@@ -63,7 +69,7 @@ class Upload implements UploadInstance {
     this.$element =
       typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as UploadOptions;
     this.$input = null;
     this.$button = null;
@@ -89,8 +95,12 @@ class Upload implements UploadInstance {
     this.$button = this.$element.querySelector<HTMLButtonElement>(UPLOAD.SELECTORS.BUTTON);
     this.$loader = this.$element.querySelector<HTMLElement>(UPLOAD.SELECTORS.LOADER);
     this.$loaderTitle = this.$element?.querySelector<HTMLElement>(UPLOAD.SELECTORS.LOADER_TITLE);
-    this.$loaderProgress = this.$element?.querySelector<HTMLElement>(UPLOAD.SELECTORS.LOADER_PROGRESS);
-    this.$loaderClose = this.$element?.querySelector<HTMLButtonElement>(UPLOAD.SELECTORS.LOADER_CLOSE);
+    this.$loaderProgress = this.$element?.querySelector<HTMLElement>(
+      UPLOAD.SELECTORS.LOADER_PROGRESS
+    );
+    this.$loaderClose = this.$element?.querySelector<HTMLButtonElement>(
+      UPLOAD.SELECTORS.LOADER_CLOSE
+    );
 
     // Apply disabled state if specified
     if (this.options.disabled) {
@@ -113,7 +123,7 @@ class Upload implements UploadInstance {
     input.style.display = 'none';
     input.accept = this.options.acceptedFileTypes?.join(',') || '';
     input.multiple = !!this.options.multiple;
-    
+
     // Append to element
     this.$element.appendChild(input);
     this.$input = input;
@@ -158,7 +168,7 @@ class Upload implements UploadInstance {
    */
   private _handleFileSelect(event: Event): void {
     if (!this.$input?.files?.length) return;
-    
+
     const files = Array.from(this.$input.files);
     this._processFiles(files);
   }
@@ -169,7 +179,7 @@ class Upload implements UploadInstance {
   private _handleDragEnter(event: DragEvent): void {
     event.preventDefault();
     if (this.options.disabled) return;
-    
+
     this.dragCounter++;
     if (this.dragCounter === 1) {
       this.$element?.classList.add(UPLOAD.CLASSES.DRAGGING);
@@ -182,7 +192,7 @@ class Upload implements UploadInstance {
   private _handleDragLeave(event: DragEvent): void {
     event.preventDefault();
     if (this.options.disabled) return;
-    
+
     this.dragCounter--;
     if (this.dragCounter === 0) {
       this.$element?.classList.remove(UPLOAD.CLASSES.DRAGGING);
@@ -203,12 +213,12 @@ class Upload implements UploadInstance {
   private _handleDrop(event: DragEvent): void {
     event.preventDefault();
     if (this.options.disabled) return;
-    
+
     this.dragCounter = 0;
     this.$element?.classList.remove(UPLOAD.CLASSES.DRAGGING);
-    
+
     if (!event.dataTransfer?.files.length) return;
-    
+
     const files = Array.from(event.dataTransfer.files);
     this._processFiles(files);
   }
@@ -218,11 +228,11 @@ class Upload implements UploadInstance {
    */
   private _handleClose(event: MouseEvent): void {
     event.preventDefault();
-    
+
     // Reset state
     this.setStatus('idle');
     this.setFile(null);
-    
+
     // Reset input
     if (this.$input) {
       this.$input.value = '';
@@ -234,18 +244,18 @@ class Upload implements UploadInstance {
    */
   private _processFiles(files: File[]): void {
     if (!files.length) return;
-    
+
     // If multiple is not allowed, take only the first file
     const filesToProcess = this.options.multiple ? files : [files[0]];
-    
+
     // Validate files
     const validFiles = filesToProcess.filter(file => this._validateFile(file));
-    
+
     // Notify about file selection
     if (validFiles.length && this.options.onFileSelect) {
       this.options.onFileSelect(validFiles);
     }
-    
+
     // Process the first valid file
     if (validFiles.length) {
       this.setFile(validFiles[0]);
@@ -258,13 +268,13 @@ class Upload implements UploadInstance {
    */
   private _validateFile(file: File): boolean {
     const maxSizeInBytes = (this.options.maxSizeInMB || 5) * 1024 * 1024;
-    
+
     // Check file size
     if (file.size > maxSizeInBytes) {
       this.setStatus('error', `File too large. Maximum size is ${this.options.maxSizeInMB}MB.`);
       return false;
     }
-    
+
     // Check file type if acceptedFileTypes is provided
     if (this.options.acceptedFileTypes?.length) {
       const isAcceptedType = this.options.acceptedFileTypes.some(type => {
@@ -275,13 +285,13 @@ class Upload implements UploadInstance {
         }
         return file.type === type;
       });
-      
+
       if (!isAcceptedType) {
         this.setStatus('error', 'File type not supported.');
         return false;
       }
     }
-    
+
     return true;
   }
 
@@ -292,20 +302,20 @@ class Upload implements UploadInstance {
   private _simulateUpload(file: File): void {
     this.setStatus('loading');
     let progress = 0;
-    
+
     const interval = setInterval(() => {
       progress += 5;
-      
+
       if (progress < 100) {
         this.setProgress(progress, `${Math.ceil((100 - progress) / 5)} seconds left`);
-        
+
         if (this.options.onFileUpload) {
           this.options.onFileUpload(file, progress);
         }
       } else {
         clearInterval(interval);
         this.setStatus('success', 'Upload successful');
-        
+
         if (this.options.onFileUploadComplete) {
           this.options.onFileUploadComplete(file);
         }
@@ -318,7 +328,7 @@ class Upload implements UploadInstance {
    */
   public setFile(file: File | null): void {
     this.currentFile = file;
-    
+
     if (file && this.$loaderTitle) {
       this.$loaderTitle.textContent = file.name;
     }
@@ -329,18 +339,18 @@ class Upload implements UploadInstance {
    */
   public setProgress(percentage: number, timeLeft?: string): void {
     if (!this.$element || !this.$loaderProgress) return;
-    
+
     // Set percentage as CSS variable
     this.$element.style.setProperty(UPLOAD.ATTRIBUTES.PERCENTAGE, percentage.toString());
-    
+
     // Update the loader elements if they exist
     const $par = this.$element.querySelector<HTMLElement>(UPLOAD.SELECTORS.LOADER_PAR);
     const $time = this.$element.querySelector<HTMLElement>(UPLOAD.SELECTORS.LOADER_TIME);
-    
+
     if ($par) {
       $par.textContent = `${percentage}%`;
     }
-    
+
     if ($time && timeLeft) {
       $time.textContent = timeLeft;
     }
@@ -351,14 +361,14 @@ class Upload implements UploadInstance {
    */
   public setStatus(status: 'idle' | 'loading' | 'success' | 'error', message?: string): void {
     if (!this.$element) return;
-    
+
     // Remove all status classes
     this.$element.classList.remove(
       UPLOAD.CLASSES.LOADING,
       UPLOAD.CLASSES.SUCCESS,
       UPLOAD.CLASSES.ERROR
     );
-    
+
     // Add appropriate class based on status
     switch (status) {
       case 'loading':
@@ -371,7 +381,7 @@ class Upload implements UploadInstance {
         this.$element.classList.add(UPLOAD.CLASSES.ERROR);
         break;
     }
-    
+
     // Update message if provided and loader exists
     if (message && this.$loaderProgress) {
       this.$loaderProgress.textContent = message;
@@ -383,7 +393,7 @@ class Upload implements UploadInstance {
    */
   public disable(): void {
     if (!this.$element || !this.$button) return;
-    
+
     this.$element.classList.add(UPLOAD.CLASSES.DISABLED);
     this.$button.disabled = true;
     this.options.disabled = true;
@@ -394,7 +404,7 @@ class Upload implements UploadInstance {
    */
   public enable(): void {
     if (!this.$element || !this.$button) return;
-    
+
     this.$element.classList.remove(UPLOAD.CLASSES.DISABLED);
     this.$button.disabled = false;
     this.options.disabled = false;
@@ -405,7 +415,7 @@ class Upload implements UploadInstance {
    */
   public destroy(): void {
     if (!this.$element || !this.$input || !this.$button) return;
-    
+
     // Remove event listeners
     this.$button.removeEventListener('click', this._handleButtonClick.bind(this));
     this.$input.removeEventListener('change', this._handleFileSelect.bind(this));
@@ -413,11 +423,11 @@ class Upload implements UploadInstance {
     this.$element.removeEventListener('dragleave', this._handleDragLeave.bind(this));
     this.$element.removeEventListener('dragover', this._handleDragOver.bind(this));
     this.$element.removeEventListener('drop', this._handleDrop.bind(this));
-    
+
     if (this.$loaderClose) {
       this.$loaderClose.removeEventListener('click', this._handleClose.bind(this));
     }
-    
+
     // Remove input element
     if (this.$input.parentNode) {
       this.$input.parentNode.removeChild(this.$input);
@@ -431,13 +441,18 @@ class Upload implements UploadInstance {
  * @param {Object} options - Custom options to override defaults
  * @returns {UploadInstance[]} Array of Upload instances
  */
-export function initializeUploads(selector = UPLOAD.SELECTORS.UPLOAD, options = {}): UploadInstance[] {
+export function initializeUploads(
+  selector = UPLOAD.SELECTORS.UPLOAD,
+  options = {}
+): UploadInstance[] {
   const uploadInstances: UploadInstance[] = [];
-  const uploadElements = document.querySelectorAll<HTMLElement>(typeof selector === 'string' ? selector : UPLOAD.SELECTORS.UPLOAD);
+  const uploadElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : UPLOAD.SELECTORS.UPLOAD
+  );
 
   if (!uploadElements.length) return uploadInstances;
 
-  uploadElements.forEach((element) => {
+  uploadElements.forEach(element => {
     try {
       const instance = new Upload(element, options);
       uploadInstances.push(instance);
@@ -449,4 +464,4 @@ export function initializeUploads(selector = UPLOAD.SELECTORS.UPLOAD, options =
   return uploadInstances;
 }
 
-export default Upload; 
+export default Upload;

package/src/components/index.ts

@@ -3,7 +3,7 @@
 // Accordion
 export { Accordion, type AccordionProps } from './Accordion/Accordion';
 
-// Avatar  
+// Avatar
 export { Avatar, type AvatarProps } from './Avatar/Avatar';
 
 // AvatarGroup
@@ -37,7 +37,7 @@ export { DataTable, type DataTableProps } from './DataTable/DataTable';
 export { DatePicker, type DatePickerProps } from './DatePicker/DatePicker';
 
 // Dropdown
-export { Dropdown, type DropdownProps } from './Dropdown/Dropdown';          
+export { Dropdown, type DropdownProps } from './Dropdown/Dropdown';
 
 // EdgePanel
 export { EdgePanel, type EdgePanelProps } from './EdgePanel/EdgePanel';
@@ -66,7 +66,7 @@ export { Messages, type MessagesProps } from './Messages/Messages';
 export { Modal, type ModalProps } from './Modal/Modal';
 
 // Navbar
-export { Navbar, type NavbarProps } from './Navbar/Navbar';
+export { Navbar, type NavbarProps } from './Navigation/Navbar/Navbar';
 
 // Pagination
 export { Pagination, type PaginationProps } from './Pagination/Pagination';
@@ -78,7 +78,7 @@ export { PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
 export { Popover, type PopoverProps } from './Popover/Popover';
 
 // ProductReview
-export { ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';       
+export { ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';
 
 // Progress
 export { Progress, type ProgressProps } from './Progress/Progress';
@@ -111,8 +111,7 @@ export { Todo, type TodoProps } from './Todo/Todo';
 export { Toggle, type ToggleProps } from './Toggle/Toggle';
 
 // Tooltip
-export { Tooltip, type TooltipProps } from './Tooltip/Tooltip'; 
+export { Tooltip, type TooltipProps } from './Tooltip/Tooltip';
 
 // Upload
 export { Upload, type UploadProps } from './Upload/Upload';
-

package/src/design-tokens/BoxShadow/BoxShadow.stories.tsx

@@ -10,14 +10,19 @@ interface ShadowExampleProps {
 
 const ShadowExample = ({ name, size, shadow, isDark = false, darkShadow }: ShadowExampleProps) => {
   const currentShadow = isDark && darkShadow ? darkShadow : shadow;
-  
+
   return (
     <div className="o-grid__col o-grid__col--xs-12 o-grid__col--md-4 o-grid__col--lg-3">
       <div className="u-d-flex u-flex-column u-gap-2">
         <span className="u-fs-sm u-fw-semibold">{name}</span>
-        <code className="u-py-2 u-px-4 u-bg-light-subtle u-rounded-md u-fs-xs u-shadow-inset u-border u-border-primary-subtle" style={{ minHeight: '50px' }}>{currentShadow}</code>
+        <code
+          className="u-py-2 u-px-4 u-bg-light-subtle u-rounded-md u-fs-xs u-shadow-inset u-border u-border-primary-subtle"
+          style={{ minHeight: '50px' }}
+        >
+          {currentShadow}
+        </code>
       </div>
-      <div 
+      <div
         className={`u-shadow-${size} u-bg-light-subtle u-rounded-md u-py-2 u-px-4 u-mt-2`}
         style={{ minHeight: '100px' }}
       ></div>
@@ -26,7 +31,6 @@ const ShadowExample = ({ name, size, shadow, isDark = false, darkShadow }: Shado
 };
 
 const BoxShadowPreview = () => {
-
   const shadows = [
     {
       name: 'Shadow',
@@ -67,19 +71,18 @@ const BoxShadowPreview = () => {
   ];
 
   return (
-    
     <div className={`o-container u-py-12`}>
       <h1 className="u-mb-8">Box Shadows</h1>
-      
+
       <section className="u-py-10 u-px-4 u-border u-border-dashed u-border-primary-subtle u-rounded-md">
         <h2 className="u-mb-2">Shadow Variants</h2>
         <p className="u-mb-4">
-          These are the available box shadow variants in the design system. 
-          They automatically adjust between light and dark modes.
+          These are the available box shadow variants in the design system. They automatically
+          adjust between light and dark modes.
         </p>
-        
+
         <div className="o-grid u-row-gap-4">
-          {shadows.map((shadow) => (
+          {shadows.map(shadow => (
             <ShadowExample
               key={shadow.name}
               name={shadow.name}

package/src/design-tokens/Colors/colors.scss

@@ -3,9 +3,13 @@
   min-height: 100vh;
   background-color: var(--atomix-primary-bg);
   color: var(--atomix-primary-text-emphasis);
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 
-  h1, h2, h3 {
+  h1,
+  h2,
+  h3 {
     margin-top: 0;
     color: var(--atomix-primary-text-emphasis);
   }
@@ -45,12 +49,11 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  transition: all 0.1s ease-out ;
-
+  transition: all 0.1s ease-out;
 
   &:hover {
     transform: translateY(-20px);
-    border-radius: var(--atomix-border-radius) var(--atomix-border-radius)  0 0;
+    border-radius: var(--atomix-border-radius) var(--atomix-border-radius) 0 0;
   }
 
   &.is-right-hover {
@@ -58,7 +61,7 @@
   }
 
   &.is-left-hover {
-    border-radius: 0 4px 0 4px ;
+    border-radius: 0 4px 0 4px;
   }
 
   .color-box {
@@ -111,7 +114,7 @@
   .design-tokens {
     padding: 1rem;
   }
-  
+
   .color-palette .color-grid {
     grid-template-columns: 1fr;
   }

package/src/design-tokens/Colors/colors.stories.tsx

@@ -9,12 +9,10 @@ interface ColorSwatchProps {
 }
 
 const ColorSwatch = ({ name, value, isDark = false }: ColorSwatchProps) => (
-  <div
-    className={`color-swatch`}
-  >
-    <div 
-      className="color-box" 
-      style={{ 
+  <div className={`color-swatch`}>
+    <div
+      className="color-box"
+      style={{
         backgroundColor: value,
       }}
     />
@@ -71,17 +69,17 @@ const ColorPalette = ({ title, colors, isDark = false }: ColorPaletteProps) => {
       if (!colorGridElement) return;
 
       for (let i = 0; i < colorGridElement.children.length; i++) {
-          const swatchElement = colorGridElement.children[i] as HTMLDivElement;
-          if (swatchElement) {
-              const swatchRect = swatchElement.getBoundingClientRect();
-              const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - rect.left;
-              const distance = Math.abs(currentMouseX - swatchCenterX);
+        const swatchElement = colorGridElement.children[i] as HTMLDivElement;
+        if (swatchElement) {
+          const swatchRect = swatchElement.getBoundingClientRect();
+          const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - rect.left;
+          const distance = Math.abs(currentMouseX - swatchCenterX);
 
-              if (distance < minDistance) {
-                  minDistance = distance;
-                  closestIndex = i;
-              }
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = i;
           }
+        }
       }
       setClosestSwatchIdx(closestIndex);
     };
@@ -112,37 +110,37 @@ const ColorPalette = ({ title, colors, isDark = false }: ColorPaletteProps) => {
           if (mousePosX !== null && paletteRef.current) {
             const swatchElement = paletteRef.current.children[1].children[idx] as HTMLDivElement;
             if (swatchElement) {
-                const swatchRect = swatchElement.getBoundingClientRect();
-                const paletteRect = paletteRef.current.getBoundingClientRect();
-                const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - paletteRect.left;
-                const distance = Math.abs(mousePosX - swatchCenterX);
-
-                const currentSwatchWidth = swatchRect.width;
-                const maxEffectDistance = currentSwatchWidth * 3;
-
-                if (distance < maxEffectDistance) {
-                    const normalizedDistance = distance / maxEffectDistance;
-                    const animationProgress = 1 - Math.pow(normalizedDistance, 2);
-                    translateY = Math.round(maxLift * animationProgress);
-                    if (maxLift < 0) {
-                        translateY = Math.max(maxLift, translateY);
-                    } else {
-                        translateY = Math.min(maxLift, translateY);
-                    }
+              const swatchRect = swatchElement.getBoundingClientRect();
+              const paletteRect = paletteRef.current.getBoundingClientRect();
+              const swatchCenterX = (swatchRect.left + swatchRect.right) / 2 - paletteRect.left;
+              const distance = Math.abs(mousePosX - swatchCenterX);
+
+              const currentSwatchWidth = swatchRect.width;
+              const maxEffectDistance = currentSwatchWidth * 3;
+
+              if (distance < maxEffectDistance) {
+                const normalizedDistance = distance / maxEffectDistance;
+                const animationProgress = 1 - Math.pow(normalizedDistance, 2);
+                translateY = Math.round(maxLift * animationProgress);
+                if (maxLift < 0) {
+                  translateY = Math.max(maxLift, translateY);
+                } else {
+                  translateY = Math.min(maxLift, translateY);
                 }
+              }
             }
 
             if (closestSwatchIdx !== null) {
-                if (idx < closestSwatchIdx) {
-                    isRightHover = true; // All elements to the left of the closest
-                } else if (idx > closestSwatchIdx) {
-                    isLeftHover = true; // All elements to the right of the closest
-                }
+              if (idx < closestSwatchIdx) {
+                isRightHover = true; // All elements to the left of the closest
+              } else if (idx > closestSwatchIdx) {
+                isLeftHover = true; // All elements to the right of the closest
+              }
             }
           } else {
-              translateY = 0;
-              isLeftHover = false;
-              isRightHover = false;
+            translateY = 0;
+            isLeftHover = false;
+            isRightHover = false;
           }
 
           return (
@@ -153,10 +151,7 @@ const ColorPalette = ({ title, colors, isDark = false }: ColorPaletteProps) => {
                 transform: `translateY(${translateY}px)`,
               }}
             >
-              <div
-                className="color-box"
-                style={{ backgroundColor: value }}
-              />
+              <div className="color-box" style={{ backgroundColor: value }} />
               <div className="color-info">
                 <div className="color-name">{name}</div>
                 <div className="color-value">{value}</div>
@@ -274,35 +269,27 @@ const DesignTokens = () => {
   return (
     <div className={`design-tokens ${isDark ? 'dark' : 'light'}`}>
       <h1>Design Tokens</h1>
-      
+
       <section>
         <h2>Theme Colors</h2>
-        <ColorPalette 
-          title="Theme Colors" 
-          colors={themeColors} 
-          isDark={isDark} 
-        />
+        <ColorPalette title="Theme Colors" colors={themeColors} isDark={isDark} />
       </section>
 
       <section>
         <h2>Color Scales</h2>
         {Object.entries(colorScales).map(([name, colors]) => (
-          <ColorPalette 
+          <ColorPalette
             key={name}
-            title={name.charAt(0).toUpperCase() + name.slice(1)} 
-            colors={colors} 
-            isDark={isDark} 
+            title={name.charAt(0).toUpperCase() + name.slice(1)}
+            colors={colors}
+            isDark={isDark}
           />
         ))}
       </section>
 
       <section>
         <h2>Text Colors</h2>
-        <ColorPalette 
-          title="Text Colors" 
-          colors={textColors} 
-          isDark={isDark} 
-        />
+        <ColorPalette title="Text Colors" colors={textColors} isDark={isDark} />
       </section>
     </div>
   );

package/src/design-tokens/Spacing/Spacing.scss

@@ -3,14 +3,15 @@
   color: var(--atomix-primary-text);
   background-color: var(--atomix-brand-bg-subtle);
   min-height: 100vh;
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 
   .section-description {
     max-width: 800px;
   }
 }
 
-
 .spacing-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -18,7 +19,6 @@
 }
 
 .spacing-example {
-
   .spacing-visual {
     width: 100%;
     background-color: var(--atomix-secondary-bg-subtle);
@@ -44,7 +44,9 @@
         height: 100%;
         background-color: var(--atomix-brand-bg);
         border-radius: 3px;
-        transition: width 0.3s ease-out, background-color 0.3s ease-in-out;
+        transition:
+          width 0.3s ease-out,
+          background-color 0.3s ease-in-out;
       }
     }
   }
@@ -57,4 +59,4 @@
       }
     }
   }
-}
+}