@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Callout/scripts/CalloutInteractions.ts

@@ -22,7 +22,7 @@ export class CalloutInteractions {
     TOP_CENTER: 'top-center',
     BOTTOM_RIGHT: 'bottom-right',
     BOTTOM_LEFT: 'bottom-left',
-    BOTTOM_CENTER: 'bottom-center'
+    BOTTOM_CENTER: 'bottom-center',
   } as const;
 
   /**
@@ -30,26 +30,29 @@ export class CalloutInteractions {
    * @param element - The callout element
    * @param options - Configuration options
    */
-  constructor(element: HTMLElement, options: {
-    autoHide?: boolean;
-    autoHideDelay?: number;
-    onClose?: () => void;
-    position?: ToastPosition;
-  } = {}) {
+  constructor(
+    element: HTMLElement,
+    options: {
+      autoHide?: boolean;
+      autoHideDelay?: number;
+      onClose?: () => void;
+      position?: ToastPosition;
+    } = {}
+  ) {
     this.element = element;
     this.id = element.id || `callout-${Math.random().toString(36).substring(2, 9)}`;
-    
+
     if (!element.id) {
       element.id = this.id;
     }
-    
+
     this.config = {
       autoHide: options.autoHide ?? false,
       autoHideDelay: options.autoHideDelay ?? 5000, // Default 5 seconds
       onClose: options.onClose,
-      position: options.position ?? CalloutInteractions.ToastPositions.TOP_RIGHT
+      position: options.position ?? CalloutInteractions.ToastPositions.TOP_RIGHT,
     };
-    
+
     this._initialize();
     CalloutInteractions.instances.set(this.id, this);
   }
@@ -62,16 +65,16 @@ export class CalloutInteractions {
     if (this.element.classList.contains('c-callout--toast')) {
       this.element.addEventListener('mouseenter', this._pauseAutoHide.bind(this));
       this.element.addEventListener('mouseleave', this._resumeAutoHide.bind(this));
-      
+
       // Add keyboard support for toast callouts
       this.element.addEventListener('keydown', this._handleKeyDown.bind(this));
-      
+
       // Make sure toast is focusable
       if (this.element.tabIndex < 0) {
         this.element.tabIndex = 0;
       }
     }
-    
+
     // Set up auto-hide if configured
     if (this.config.autoHide) {
       this._startAutoHideTimer();
@@ -96,7 +99,7 @@ export class CalloutInteractions {
     if (this.autoHideTimeout) {
       clearTimeout(this.autoHideTimeout);
     }
-    
+
     this.autoHideTimeout = window.setTimeout(() => {
       this.close();
     }, this.config.autoHideDelay);
@@ -126,21 +129,23 @@ export class CalloutInteractions {
    */
   public close(): void {
     this.element.classList.add('is-hide');
-    
+
     // Remove from DOM after animation completes
     setTimeout(() => {
       if (this.element.parentNode) {
         this.element.parentNode.removeChild(this.element);
         CalloutInteractions.instances.delete(this.id);
-        
+
         if (this.config.onClose) {
           this.config.onClose();
         }
-        
+
         // Dispatch custom event
-        document.dispatchEvent(new CustomEvent('atomix:callout:closed', {
-          detail: { id: this.id }
-        }));
+        document.dispatchEvent(
+          new CustomEvent('atomix:callout:closed', {
+            detail: { id: this.id },
+          })
+        );
       }
     }, 300); // Match the transition duration in CSS
   }
@@ -152,21 +157,23 @@ export class CalloutInteractions {
     if (this.autoHideTimeout) {
       clearTimeout(this.autoHideTimeout);
     }
-    
+
     this.element.removeEventListener('mouseenter', this._pauseAutoHide.bind(this));
     this.element.removeEventListener('mouseleave', this._resumeAutoHide.bind(this));
     this.element.removeEventListener('keydown', this._handleKeyDown.bind(this));
-    
+
     CalloutInteractions.instances.delete(this.id);
   }
 
   /**
    * Get the toast container for a specific position
    */
-  private static _getToastContainer(position: ToastPosition = CalloutInteractions.ToastPositions.TOP_RIGHT): HTMLElement {
+  private static _getToastContainer(
+    position: ToastPosition = CalloutInteractions.ToastPositions.TOP_RIGHT
+  ): HTMLElement {
     const containerId = `atomix-toast-container-${position}`;
     let container = document.getElementById(containerId);
-    
+
     if (!container) {
       container = document.createElement('div');
       container.id = containerId;
@@ -174,14 +181,14 @@ export class CalloutInteractions {
       container.setAttribute('aria-live', 'polite');
       container.setAttribute('role', 'status');
       document.body.appendChild(container);
-      
+
       // Apply positioning styles
       container.style.position = 'fixed';
       container.style.zIndex = '9999';
       container.style.display = 'flex';
       container.style.flexDirection = 'column';
       container.style.gap = '8px';
-      
+
       // Position the container based on position value
       switch (position) {
         case CalloutInteractions.ToastPositions.TOP_RIGHT:
@@ -218,7 +225,7 @@ export class CalloutInteractions {
           break;
       }
     }
-    
+
     return container;
   }
 
@@ -239,7 +246,7 @@ export class CalloutInteractions {
     // Get the appropriate toast container
     const position = options.position || CalloutInteractions.ToastPositions.TOP_RIGHT;
     const toastContainer = this._getToastContainer(position);
-    
+
     // Create toast element
     const toast = document.createElement('div');
     toast.className = `c-callout c-callout--toast ${options.variant ? `c-callout--${options.variant}` : 'c-callout--primary'}`;
@@ -247,13 +254,13 @@ export class CalloutInteractions {
     toast.setAttribute('role', 'alert');
     toast.setAttribute('aria-live', 'assertive');
     toast.tabIndex = 0; // Make focusable
-    
+
     // Create toast content
     let iconHtml = '';
     if (options.icon) {
       iconHtml = `<div class="c-callout__icon">${options.icon}</div>`;
     }
-    
+
     toast.innerHTML = `
       <div class="c-callout__content">
         ${iconHtml}
@@ -268,63 +275,65 @@ export class CalloutInteractions {
         </svg>
       </button>
     `;
-    
+
     // Add to container
     toastContainer.appendChild(toast);
-    
+
     // Initialize interactions
     const interaction = new CalloutInteractions(toast, {
       autoHide: options.autoHide ?? true,
       autoHideDelay: options.autoHideDelay ?? 5000,
       onClose: options.onClose,
-      position
+      position,
     });
-    
+
     // Add close button event listener
     const closeButton = toast.querySelector('.c-callout__close-btn');
     if (closeButton) {
       closeButton.addEventListener('click', () => interaction.close());
     }
-    
+
     // Focus the toast for accessibility
     setTimeout(() => toast.focus(), 100);
-    
+
     return interaction;
   }
 
   /**
    * Initialize all callout elements on the page
    */
-  public static initializeAll(options: {
-    autoHide?: boolean;
-    autoHideDelay?: number;
-    onClose?: () => void;
-  } = {}): CalloutInteractions[] {
+  public static initializeAll(
+    options: {
+      autoHide?: boolean;
+      autoHideDelay?: number;
+      onClose?: () => void;
+    } = {}
+  ): CalloutInteractions[] {
     const interactions: CalloutInteractions[] = [];
     const elements = document.querySelectorAll('.c-callout');
-    
+
     elements.forEach(element => {
       if (!CalloutInteractions.instances.has((element as HTMLElement).id)) {
         interactions.push(new CalloutInteractions(element as HTMLElement, options));
       }
     });
-    
+
     return interactions;
   }
-  
+
   /**
    * Clear all toast notifications
    */
   public static clearAllToasts(): void {
     // Get all toast containers
     const containers = document.querySelectorAll('[id^="atomix-toast-container-"]');
-    
+
     containers.forEach(container => {
       const toasts = container.querySelectorAll('.c-callout--toast');
       toasts.forEach(toast => {
         const id = (toast as HTMLElement).id;
         const instance = CalloutInteractions.instances.get(id);
-        
+
         if (instance) {
           instance.close();
         } else {
@@ -337,4 +346,5 @@ export class CalloutInteractions {
 }
 
 // Type for toast positions
-type ToastPosition = typeof CalloutInteractions.ToastPositions[keyof typeof CalloutInteractions.ToastPositions];
+type ToastPosition =
+  (typeof CalloutInteractions.ToastPositions)[keyof typeof CalloutInteractions.ToastPositions];

package/src/components/Callout/scripts/bundle.ts

@@ -7,7 +7,7 @@ import { Callout, CalloutInteractions } from './index';
 if (typeof window !== 'undefined') {
   // Create Atomix namespace if it doesn't exist
   window.Atomix = window.Atomix || {};
-  
+
   // Add Callout to Atomix namespace
   // @ts-ignore - Ignore type mismatch between React component and vanilla JS class
   window.Atomix.Callout = Callout;
@@ -15,4 +15,4 @@ if (typeof window !== 'undefined') {
 }
 
 // Export for module usage
-export { Callout, CalloutInteractions };
+export { Callout, CalloutInteractions };

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

@@ -39,15 +39,17 @@ export class Callout {
    */
   private _handleClose(): void {
     this.close();
-    
+
     if (this.config.onClose) {
       this.config.onClose();
     }
 
     // Dispatch custom event
-    this.element.dispatchEvent(new CustomEvent('atomix:callout:close', {
-      bubbles: true,
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('atomix:callout:close', {
+        bubbles: true,
+      })
+    );
   }
 
   /**
@@ -55,7 +57,7 @@ export class Callout {
    */
   public close(): void {
     this.element.classList.add('is-hide');
-    
+
     // Remove from DOM after animation completes
     setTimeout(() => {
       if (this.element.parentNode) {
@@ -78,22 +80,24 @@ export class Callout {
   public update(options: { title?: string; content?: string; variant?: string }): void {
     const titleElement = this.element.querySelector('.c-callout__title');
     const contentElement = this.element.querySelector('.c-callout__text');
-    
+
     if (options.title && titleElement) {
       titleElement.textContent = options.title;
     }
-    
+
     if (options.content && contentElement) {
       contentElement.textContent = options.content;
     }
-    
+
     if (options.variant) {
       // Remove existing variant classes
-      const variantClasses = Array.from(this.element.classList)
-        .filter(cls => cls.startsWith('c-callout--') && !['c-callout--oneline', 'c-callout--toast'].includes(cls));
-      
+      const variantClasses = Array.from(this.element.classList).filter(
+        cls =>
+          cls.startsWith('c-callout--') && !['c-callout--oneline', 'c-callout--toast'].includes(cls)
+      );
+
       variantClasses.forEach(cls => this.element.classList.remove(cls));
-      
+
       // Add new variant class
       this.element.classList.add(`c-callout--${options.variant}`);
     }
@@ -114,13 +118,13 @@ export class Callout {
   public static initializeAll(options: { onClose?: () => void } = {}): Callout[] {
     const callouts: Callout[] = [];
     const elements = document.querySelectorAll('.c-callout');
-    
+
     elements.forEach(element => {
       callouts.push(new Callout(element as HTMLElement, options));
     });
-    
+
     return callouts;
   }
 }
 
-export { CalloutInteractions };
+export { CalloutInteractions };

package/src/components/Card/Card.stories.tsx

@@ -56,7 +56,7 @@ export const WithActions: Story = {
         <button className="c-btn c-btn--primary c-btn--sm">Learn More</button>
         <button className="c-btn c-btn--secondary c-btn--sm">Cancel</button>
       </React.Fragment>
-    )
+    ),
   },
 };
 
@@ -93,7 +93,7 @@ export const Clickable: Story = {
 
 // Elevation Card
 export const WithElevation: Story = {
-  render: (args) => (
+  render: args => (
     <div style={{ padding: '20px', width: '300px' }}>
       <ElevationCard {...args} />
     </div>

package/src/components/Card/Card.tsx

@@ -2,91 +2,68 @@ import React, { forwardRef, Ref } from 'react';
 import { CARD } from '../../lib/constants/components';
 import { CardProps } from '../../lib/types/components';
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(({
-  header,
-  image,
-  imageAlt = '',
-  title,
-  text,
-  actions,
-  icon,
-  footer,
-  row = false,
-  flat = false,
-  active = false,
-  className = '',
-  children,
-  onClick,
-  ...rest
-}, ref) => {
-  const cardClasses = [
-    CARD.CLASSES.BASE,
-    row ? CARD.CLASSES.ROW : '',
-    flat ? CARD.CLASSES.FLAT : '',
-    active ? CARD.CLASSES.ACTIVE : '',
-    className
-  ].filter(Boolean).join(' ');
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      header,
+      image,
+      imageAlt = '',
+      title,
+      text,
+      actions,
+      icon,
+      footer,
+      row = false,
+      flat = false,
+      active = false,
+      className = '',
+      children,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    const cardClasses = [
+      CARD.CLASSES.BASE,
+      row ? CARD.CLASSES.ROW : '',
+      flat ? CARD.CLASSES.FLAT : '',
+      active ? CARD.CLASSES.ACTIVE : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
 
-  return (
-    <div
-      ref={ref}
-      className={cardClasses}
-      onClick={onClick}
-      {...rest}
-    >
-      {(image || icon || header) && (
-        <div className={CARD.SELECTORS.HEADER.substring(1)}>
+    return (
+      <div ref={ref} className={cardClasses} onClick={onClick} {...rest}>
+        {(image || icon || header) && (
+          <div className={CARD.SELECTORS.HEADER.substring(1)}>
             {header}
             {image && (
-              <img
-                src={image}
-                alt={imageAlt}
-                className={CARD.SELECTORS.IMAGE.substring(1)}
-              />
+              <img src={image} alt={imageAlt} className={CARD.SELECTORS.IMAGE.substring(1)} />
             )}
 
-            {icon && (
-              <div className={CARD.SELECTORS.ICON.substring(1)}>
-                {icon}
-              </div>
-            )}
-        </div>
-      )}
-
-      <div className={CARD.SELECTORS.BODY.substring(1)}>
-        {title && (
-          <h3 className={CARD.SELECTORS.TITLE.substring(1)}>
-            {title}
-          </h3>
+            {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
+          </div>
         )}
 
-        {text && (
-          <p className={CARD.SELECTORS.TEXT.substring(1)}>
-            {text}
-          </p>
-        )}
+        <div className={CARD.SELECTORS.BODY.substring(1)}>
+          {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
 
-        {children}
-      </div>
+          {text && <p className={CARD.SELECTORS.TEXT.substring(1)}>{text}</p>}
 
-      {actions && (
-        <div className={CARD.SELECTORS.ACTIONS.substring(1)}>
-          {actions}
+          {children}
         </div>
-      )}
 
-      {footer && (
-        <div className={CARD.SELECTORS.FOOTER.substring(1)}>
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-});
+        {actions && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{actions}</div>}
 
+        {footer && <div className={CARD.SELECTORS.FOOTER.substring(1)}>{footer}</div>}
+      </div>
+    );
+  }
+);
 
-export type { CardProps  };
+export type { CardProps };
 
 Card.displayName = 'Card';
 
-export default Card;
+export default Card;

package/src/components/Card/ElevationCard.tsx

@@ -15,7 +15,7 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
     elevationClass,
     clickable: Boolean(onClick),
     onClick: onClick as (event: React.MouseEvent) => void,
-    focusEffect: true
+    focusEffect: true,
   });
 
   const cardProps = getCardProps();
@@ -33,11 +33,7 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
       onClick={cardProps.onClick as unknown as React.MouseEventHandler<HTMLDivElement>}
       onKeyDown={cardProps.onKeyDown as unknown as React.KeyboardEventHandler<HTMLDivElement>}
     >
-      <Card 
-        {...props}
-        className=""
-        onClick={undefined}
-      >
+      <Card {...props} className="" onClick={undefined}>
         {children}
       </Card>
     </div>
@@ -46,6 +42,6 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
 
 export type { ElevationCardProps };
 
-ElevationCard.displayName = 'ElevationCard';  
+ElevationCard.displayName = 'ElevationCard';
 
-export default ElevationCard;
+export default ElevationCard;

package/src/components/Card/index.ts

@@ -1,6 +1,6 @@
 /**
  * Card component module
- * 
+ *
  * This module exports the Card component and its variants.
  * Types and hooks are defined in the lib directory.
  */

package/src/components/Card/scripts/bundle.ts

@@ -1,18 +1,18 @@
 /**
  * Card Component Bundle
- * 
+ *
  * This module bundles the Card component and its interactions for use in vanilla JS projects.
  * It exposes the Card class and utility functions to the global Atomix namespace.
  */
 
 import Card from './index';
-import { 
-  applyHoverEffect, 
-  applyFocusEffect, 
-  makeCardClickable, 
+import {
+  applyHoverEffect,
+  applyFocusEffect,
+  makeCardClickable,
   initializeAllCards,
   applyElevationEffect,
-  applyFlipEffect
+  applyFlipEffect,
 } from './cardInteractions';
 
 // Initialize global namespace if not exists
@@ -27,4 +27,4 @@ window.Atomix.initializeAllCards = initializeAllCards;
 window.Atomix.applyCardElevationEffect = applyElevationEffect;
 window.Atomix.applyCardFlipEffect = applyFlipEffect;
 
-export default Card;
+export default Card;