@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -30,14 +30,14 @@ const DEFAULT_AVATAR_OPTIONS: AvatarOptions = {
   alt: 'Avatar',
   size: 'md',
   circle: false,
-  disabled: false
+  disabled: false,
 };
 
 /**
  * Default options for the AvatarGroup component
  */
 const DEFAULT_AVATAR_GROUP_OPTIONS: AvatarGroupOptions = {
-  stacked: false
+  stacked: false,
 };
 
 /**
@@ -56,7 +56,7 @@ function createUserIcon(size: number = 24): string {
 export class Avatar {
   // DOM element
   private element: HTMLElement;
-  
+
   // Options
   private options: AvatarOptions;
 
@@ -67,17 +67,16 @@ export class Avatar {
    */
   constructor(element: string | HTMLElement, options: AvatarOptions = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
     if (!this.element) {
       throw new Error('Avatar: Element not found');
     }
-    
+
     // Merge default options with provided options
     this.options = { ...DEFAULT_AVATAR_OPTIONS, ...options };
-    
+
     // Initialize the component
     this._initialize();
   }
@@ -89,31 +88,31 @@ export class Avatar {
   private _initialize(): void {
     // Clear element
     this.element.innerHTML = '';
-    
+
     // Add base class
     this.element.classList.add(AVATAR.CLASSES.BASE);
-    
+
     // Add size class if not default
     if (this.options.size && this.options.size !== 'md') {
       this.element.classList.add(`c-avatar--${this.options.size}`);
     }
-    
+
     // Add circle class if needed
     if (this.options.circle) {
       this.element.classList.add(AVATAR.CLASSES.CIRCLE);
     }
-    
+
     // Add disabled class if needed
     if (this.options.disabled) {
       this.element.classList.add('is-disabled');
     }
-    
+
     // Set role and tabindex if clickable
     if (this.options.onClick && !this.options.disabled) {
       this.element.setAttribute('role', 'button');
       this.element.setAttribute('tabindex', '0');
       this.element.addEventListener('click', this.options.onClick);
-      
+
       // Add keyboard accessibility
       this.element.addEventListener('keydown', (e: KeyboardEvent) => {
         if ((e.key === 'Enter' || e.key === ' ') && this.options.onClick) {
@@ -122,7 +121,7 @@ export class Avatar {
         }
       });
     }
-    
+
     // Create content
     this._createContent();
   }
@@ -138,12 +137,12 @@ export class Avatar {
       img.src = this.options.src;
       img.alt = this.options.alt || 'Avatar';
       img.className = 'c-avatar__image';
-      
+
       // Handle image error
       img.addEventListener('error', () => {
         this._handleImageError();
       });
-      
+
       this.element.appendChild(img);
     } else if (this.options.initials) {
       // Create initials
@@ -161,7 +160,7 @@ export class Avatar {
       // Create default user icon
       const iconSpan = document.createElement('span');
       iconSpan.className = 'c-avatar__icon';
-      
+
       // Determine icon size based on avatar size
       let iconSize = 24;
       switch (this.options.size) {
@@ -178,7 +177,7 @@ export class Avatar {
           iconSize = 32;
           break;
       }
-      
+
       iconSpan.innerHTML = createUserIcon(iconSize);
       this.element.appendChild(iconSpan);
     }
@@ -191,7 +190,7 @@ export class Avatar {
   private _handleImageError(): void {
     // Clear element
     this.element.innerHTML = '';
-    
+
     // Fall back to initials or icon
     if (this.options.initials) {
       const initialsSpan = document.createElement('span');
@@ -206,7 +205,7 @@ export class Avatar {
     } else {
       const iconSpan = document.createElement('span');
       iconSpan.className = 'c-avatar__icon';
-      
+
       // Determine icon size based on avatar size
       let iconSize = 24;
       switch (this.options.size) {
@@ -223,7 +222,7 @@ export class Avatar {
           iconSize = 32;
           break;
       }
-      
+
       iconSpan.innerHTML = createUserIcon(iconSize);
       this.element.appendChild(iconSpan);
     }
@@ -236,7 +235,7 @@ export class Avatar {
   public update(options: Partial<AvatarOptions>): void {
     // Update options
     this.options = { ...this.options, ...options };
-    
+
     // Re-initialize
     this._initialize();
   }
@@ -250,7 +249,7 @@ export class Avatar {
     if (this.options.onClick) {
       this.element.removeEventListener('click', this.options.onClick);
     }
-    
+
     // Remove all classes
     this.element.classList.remove(
       AVATAR.CLASSES.BASE,
@@ -262,10 +261,10 @@ export class Avatar {
       AVATAR.CLASSES.CIRCLE,
       'is-disabled'
     );
-    
+
     // Clear content
     this.element.innerHTML = '';
-    
+
     // Remove attributes
     this.element.removeAttribute('role');
     this.element.removeAttribute('tabindex');
@@ -281,35 +280,35 @@ export class Avatar {
     return Array.from(elements).map(element => {
       // Try to get options from data attributes
       const options: AvatarOptions = {};
-      
+
       // Get src
       const src = element.getAttribute('data-src');
       if (src) options.src = src;
-      
+
       // Get alt
       const alt = element.getAttribute('data-alt');
       if (alt) options.alt = alt;
-      
+
       // Get initials
       const initials = element.getAttribute('data-initials');
       if (initials) options.initials = initials;
-      
+
       // Get icon
       const icon = element.getAttribute('data-icon');
       if (icon) options.icon = icon;
-      
+
       // Get size
       const size = element.getAttribute('data-size') as 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null;
       if (size && ['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) options.size = size;
-      
+
       // Get circle
       const circle = element.getAttribute('data-circle');
       options.circle = circle === 'true';
-      
+
       // Get disabled
       const disabled = element.getAttribute('data-disabled');
       options.disabled = disabled === 'true';
-      
+
       return new Avatar(element as HTMLElement, options);
     });
   }
@@ -321,10 +320,10 @@ export class Avatar {
 export class AvatarGroup {
   // DOM element
   private element: HTMLElement;
-  
+
   // Options
   private options: AvatarGroupOptions;
-  
+
   // Child avatars
   private avatars: HTMLElement[] = [];
 
@@ -335,20 +334,19 @@ export class AvatarGroup {
    */
   constructor(element: string | HTMLElement, options: AvatarGroupOptions = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
     if (!this.element) {
       throw new Error('AvatarGroup: Element not found');
     }
-    
+
     // Merge default options with provided options
     this.options = { ...DEFAULT_AVATAR_GROUP_OPTIONS, ...options };
-    
+
     // Find child avatars
     this.avatars = Array.from(this.element.querySelectorAll('.c-avatar'));
-    
+
     // Initialize the component
     this._initialize();
   }
@@ -360,12 +358,12 @@ export class AvatarGroup {
   private _initialize(): void {
     // Add base class
     this.element.classList.add(AVATAR_GROUP.CLASSES.BASE);
-    
+
     // Add stacked class if needed
     if (this.options.stacked) {
       this.element.classList.add(AVATAR_GROUP.CLASSES.STACKED);
     }
-    
+
     // Handle max avatars
     if (this.options.max !== undefined && this.avatars.length > this.options.max) {
       this._handleMaxAvatars();
@@ -378,21 +376,21 @@ export class AvatarGroup {
    */
   private _handleMaxAvatars(): void {
     if (!this.options.max) return;
-    
+
     // Hide avatars beyond the max
     const visibleAvatars = this.avatars.slice(0, this.options.max);
     const hiddenAvatars = this.avatars.slice(this.options.max);
-    
+
     // Hide extra avatars
     hiddenAvatars.forEach(avatar => {
       avatar.style.display = 'none';
     });
-    
+
     // Get size and shape from first avatar to ensure consistent styling
     const firstAvatar = this.avatars[0];
     let avatarSize = 'md';
     let isCircle = false;
-    
+
     if (firstAvatar) {
       // Extract size from class name
       ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
@@ -400,26 +398,26 @@ export class AvatarGroup {
           avatarSize = size;
         }
       });
-      
+
       // Check if circular
       isCircle = firstAvatar.classList.contains('c-avatar--circle');
     }
-    
+
     // Create "more" indicator
     const moreElement = document.createElement('div');
     moreElement.className = AVATAR_GROUP.CLASSES.MORE;
-    
+
     // Add size and shape classes to match avatars
     if (avatarSize !== 'md') {
       moreElement.classList.add(`c-avatar--${avatarSize}`);
     }
-    
+
     if (isCircle) {
       moreElement.classList.add('c-avatar--circle');
     }
-    
+
     moreElement.textContent = this.options.moreText || `+${hiddenAvatars.length}`;
-    
+
     // Append to element
     this.element.appendChild(moreElement);
   }
@@ -431,21 +429,21 @@ export class AvatarGroup {
   public update(options: Partial<AvatarGroupOptions>): void {
     // Update options
     this.options = { ...this.options, ...options };
-    
+
     // Clear "more" indicator
     const moreElement = this.element.querySelector(`.${AVATAR_GROUP.CLASSES.MORE}`);
     if (moreElement) {
       moreElement.remove();
     }
-    
+
     // Reset hidden avatars
     this.avatars.forEach(avatar => {
       avatar.style.display = '';
     });
-    
+
     // Remove stacked class
     this.element.classList.remove(AVATAR_GROUP.CLASSES.STACKED);
-    
+
     // Re-initialize
     this._initialize();
   }
@@ -456,16 +454,13 @@ export class AvatarGroup {
    */
   public destroy(): void {
     // Remove classes
-    this.element.classList.remove(
-      AVATAR_GROUP.CLASSES.BASE,
-      AVATAR_GROUP.CLASSES.STACKED
-    );
-    
+    this.element.classList.remove(AVATAR_GROUP.CLASSES.BASE, AVATAR_GROUP.CLASSES.STACKED);
+
     // Show all avatars
     this.avatars.forEach(avatar => {
       avatar.style.display = '';
     });
-    
+
     // Remove "more" indicator
     const moreElement = this.element.querySelector(`.${AVATAR_GROUP.CLASSES.MORE}`);
     if (moreElement) {
@@ -483,20 +478,20 @@ export class AvatarGroup {
     return Array.from(elements).map(element => {
       // Try to get options from data attributes
       const options: AvatarGroupOptions = {};
-      
+
       // Get max
       const max = element.getAttribute('data-max');
       if (max) options.max = parseInt(max, 10);
-      
+
       // Get stacked
       const stacked = element.getAttribute('data-stacked');
       options.stacked = stacked === 'true';
-      
+
       // Get more text
       const moreText = element.getAttribute('data-more-text');
       if (moreText) options.moreText = moreText;
-      
+
       return new AvatarGroup(element as HTMLElement, options);
     });
   }
-} 
+}

package/src/components/Badge/Badge.stories.tsx

@@ -18,20 +18,20 @@ const meta = {
     variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
-      description: 'The visual style of the badge'
+      description: 'The visual style of the badge',
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
-      description: 'The size of the badge'
+      description: 'The size of the badge',
     },
     disabled: {
       control: 'boolean',
-      description: 'Whether the badge is disabled'
+      description: 'Whether the badge is disabled',
     },
     icon: {
       control: 'text',
-      description: 'Optional icon element to display in the badge'
+      description: 'Optional icon element to display in the badge',
     },
   },
 } satisfies Meta<typeof Badge>;
@@ -41,7 +41,17 @@ type Story = StoryObj<typeof meta>;
 
 // Mock icon component for stories
 const Icon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
     <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
     <path d="M12 8v8"></path>
     <path d="M8 12h8"></path>
@@ -166,7 +176,7 @@ export const AllVariants: Story = {
   },
   render: () => (
     <div className="u-d-flex u-flex-wrap u-gap-2">
-      {THEME_COLORS.map((color) => (
+      {THEME_COLORS.map(color => (
         <Badge key={color} label={color} variant={color} />
       ))}
     </div>
@@ -253,7 +263,7 @@ export const UsageExamples: Story = {
           </div>
         </div>
       </div>
-      
+
       <div>
         <h3 className="u-mt-0 u-mb-2">In cards</h3>
         <div className="u-p-4 u-shadow u-d-flex u-flex-column u-gap-2">
@@ -268,15 +278,21 @@ export const UsageExamples: Story = {
           </div>
         </div>
       </div>
-      
+
       <div>
         <h3 className="u-mt-0 u-mb-2">In lists</h3>
         <ul className="u-p-0 u-m-0" style={{ listStyle: 'none' }}>
-          <li className="u-py-2 u-d-flex u-justify-content-between" style={{ borderBottom: '1px solid #e0e0e0' }}>
+          <li
+            className="u-py-2 u-d-flex u-justify-content-between"
+            style={{ borderBottom: '1px solid #e0e0e0' }}
+          >
             <span>Task 1</span>
             <Badge label="Completed" variant="success" size="sm" />
           </li>
-          <li className="u-py-2 u-d-flex u-justify-content-between" style={{ borderBottom: '1px solid #e0e0e0' }}>
+          <li
+            className="u-py-2 u-d-flex u-justify-content-between"
+            style={{ borderBottom: '1px solid #e0e0e0' }}
+          >
             <span>Task 2</span>
             <Badge label="In Progress" variant="warning" size="sm" />
           </li>
@@ -300,45 +316,59 @@ export const ThemeAwareBadges: Story = {
     <div className="u-d-flex u-flex-column u-gap-6">
       <div>
         <h3 className="u-mt-0 u-mb-2">Theme Aware Badges</h3>
-        <p className="u-mb-4">The badges below demonstrate how they adapt to different theme modes.</p>
+        <p className="u-mb-4">
+          The badges below demonstrate how they adapt to different theme modes.
+        </p>
         <div className="u-d-flex u-gap-5 u-mt-4">
           <div className="u-p-5 u-shadow u-flex-1">
             <h4 className="u-mt-0">Current Theme</h4>
             <div className="u-d-flex u-flex-wrap u-gap-2">
-              {THEME_COLORS.map((color) => (
+              {THEME_COLORS.map(color => (
                 <Badge key={color} label={color} variant={color} />
               ))}
             </div>
           </div>
         </div>
       </div>
-      
+
       <div>
         <h3 className="u-mt-2 u-mb-2">Accessibility Considerations</h3>
-        <p className="u-mb-2">Our badges are designed to maintain proper contrast in both light and dark modes.</p>
+        <p className="u-mb-2">
+          Our badges are designed to maintain proper contrast in both light and dark modes.
+        </p>
         <div className="u-d-flex u-flex-column u-gap-2 u-mt-2">
           <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Primary:</span>
+            <span className="u-d-inline-block" style={{ width: '120px' }}>
+              Primary:
+            </span>
             <Badge label="New Feature" variant="primary" />
           </div>
           <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Success:</span>
+            <span className="u-d-inline-block" style={{ width: '120px' }}>
+              Success:
+            </span>
             <Badge label="Completed" variant="success" />
           </div>
           <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Warning:</span>
+            <span className="u-d-inline-block" style={{ width: '120px' }}>
+              Warning:
+            </span>
             <Badge label="In Progress" variant="warning" />
           </div>
           <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>error:</span>
+            <span className="u-d-inline-block" style={{ width: '120px' }}>
+              error:
+            </span>
             <Badge label="Failed" variant="error" />
           </div>
         </div>
       </div>
-      
+
       <div className="u-mt-4">
-        <p>Use the Color Mode toggle in the Storybook toolbar to switch between light and dark mode!</p>
+        <p>
+          Use the Color Mode toggle in the Storybook toolbar to switch between light and dark mode!
+        </p>
       </div>
     </div>
   ),
-}; 
+};

package/src/components/Badge/Badge.tsx

@@ -11,27 +11,29 @@ export const Badge: React.FC<BadgeProps> = ({
   icon,
   className = '',
 }) => {
-  const { generateBadgeClass } = useBadge({ 
-    variant, size, disabled 
+  const { generateBadgeClass } = useBadge({
+    variant,
+    size,
+    disabled,
   });
-  
-  const badgeClass = generateBadgeClass({ 
-    variant, size, disabled, className 
+
+  const badgeClass = generateBadgeClass({
+    variant,
+    size,
+    disabled,
+    className,
   });
-  
+
   return (
-    <span
-      className={badgeClass}
-      aria-disabled={disabled}
-    >
+    <span className={badgeClass} aria-disabled={disabled}>
       {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
       <span>{label}</span>
     </span>
   );
-}; 
+};
 
 Badge.displayName = 'Badge';
 
 export type { BadgeProps };
 
-export default Badge;
+export default Badge;

package/src/components/Badge/index.ts

@@ -1,3 +1,3 @@
-export { Badge } from "./Badge";
-export { default } from "./Badge";
-export type { BadgeProps } from "./Badge";
+export { Badge } from './Badge';
+export { default } from './Badge';
+export type { BadgeProps } from './Badge';