@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/layouts/MasonryGrid/MasonryGrid.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { MasonryGrid } from './MasonryGrid';
 import { MasonryGridItem } from './MasonryGridItem';
-import Card  from '../../components/Card/Card';
+import Card from '../../components/Card/Card';
 import ElevationCard from '../../components/Card/Card';
 
 const meta: Meta<typeof MasonryGrid> = {
@@ -12,7 +12,7 @@ const meta: Meta<typeof MasonryGrid> = {
     layout: 'fullscreen',
   },
   decorators: [
-    (Story) => (
+    Story => (
       <div style={{ padding: '1rem' }}>
         <Story />
       </div>
@@ -28,10 +28,10 @@ const getPlaceholderImage = (index: number, width = 600, height?: number) => {
   // Create different heights for variety if not specified
   const heights = [300, 400, 500, 350, 450, 550, 320, 420];
   const imgHeight = height || heights[index % heights.length];
-  
+
   // Use different image IDs for variety
   const imageId = (index % 30) + 10; // Use IDs between 10-40 for variety
-  
+
   // Use Picsum Photos which is more reliable
   return `https://picsum.photos/id/${imageId}/${width}/${imgHeight}`;
 };
@@ -47,13 +47,15 @@ const CardWithImage: React.FC<{
 }> = ({ index, title, text, useElevation = false, width, height }) => {
   const CardComponent = useElevation ? ElevationCard : Card;
   const imageUrl = getPlaceholderImage(index, width, height);
-  
+
   // Generate random content if not provided
   const cardTitle = title || `Card Title ${index + 1}`;
-  const cardText = text || (index % 2 === 0 ? 
-    'This is a short description for this card item.' : 
-    'This is a longer description that takes up more space to demonstrate how the masonry layout handles different content heights effectively.');
-  
+  const cardText =
+    text ||
+    (index % 2 === 0
+      ? 'This is a short description for this card item.'
+      : 'This is a longer description that takes up more space to demonstrate how the masonry layout handles different content heights effectively.');
+
   return (
     <CardComponent
       image={imageUrl}
@@ -78,8 +80,11 @@ export const BasicMasonryGrid: Story = {
   render: () => (
     <div>
       <h3 className="u-mb-4">Basic Masonry Grid</h3>
-      <p className="u-mb-4">Items are automatically positioned in the optimal location based on available vertical space.</p>
-      
+      <p className="u-mb-4">
+        Items are automatically positioned in the optimal location based on available vertical
+        space.
+      </p>
+
       <MasonryGrid xs={1} sm={2} md={3} lg={4}>
         {Array.from({ length: 8 }).map((_, index) => (
           <MasonryGridItem key={index}>
@@ -99,14 +104,11 @@ export const CustomGap: Story = {
     <div>
       <h3 className="u-mb-4">Custom Gap (24px)</h3>
       <p className="u-mb-4">The gap between items can be customized.</p>
-      
+
       <MasonryGrid xs={1} sm={2} md={3} lg={4} gap={24}>
         {Array.from({ length: 6 }).map((_, index) => (
           <MasonryGridItem key={index}>
-            <CardWithImage 
-              index={index + 10} 
-              title={`Card with Gap ${index + 1}`}
-            />
+            <CardWithImage index={index + 10} title={`Card with Gap ${index + 1}`} />
           </MasonryGridItem>
         ))}
       </MasonryGrid>
@@ -123,44 +125,44 @@ export const DynamicLoading: Story = {
     const DynamicLoadingExample = () => {
       const [items, setItems] = useState<number[]>([]);
       const [loading, setLoading] = useState(true);
-      
+
       useEffect(() => {
         // Simulate loading items in batches
         const loadItems = () => {
           setLoading(true);
-          
+
           // Initial set of items
           setTimeout(() => {
             setItems([0, 1, 2, 3, 4, 5]);
             setLoading(false);
           }, 1000);
-          
+
           // Add more items after a delay
           setTimeout(() => {
             setItems(prev => [...prev, 6, 7, 8, 9, 10, 11]);
           }, 3000);
         };
-        
+
         loadItems();
       }, []);
-      
+
       return (
         <div>
           <h3 className="u-mb-4">Dynamic Loading</h3>
           <p className="u-mb-4">The masonry grid recalculates positions as new items are added.</p>
-          
+
           {loading && (
             <div className="u-p-4 u-mb-4 u-bg-light u-border u-rounded u-text-center">
               <div className="u-spinner u-spinner-primary u-mb-3"></div>
               <p className="u-m-0">Loading initial items...</p>
             </div>
           )}
-          
+
           <MasonryGrid xs={1} sm={2} md={3} lg={4}>
-            {items.map((index) => (
+            {items.map(index => (
               <MasonryGridItem key={index}>
-                <CardWithImage 
-                  index={index + 20} 
+                <CardWithImage
+                  index={index + 20}
                   useElevation={true}
                   title={`Dynamic Card ${index + 1}`}
                 />
@@ -170,7 +172,7 @@ export const DynamicLoading: Story = {
         </div>
       );
     };
-    
+
     return <DynamicLoadingExample />;
   },
 };
@@ -183,14 +185,18 @@ export const CustomColumns: Story = {
     <div>
       <h3 className="u-mb-4">Custom Column Configuration</h3>
       <p className="u-mb-4">Different column counts can be specified for each breakpoint.</p>
-      
+
       <MasonryGrid xs={1} sm={2} md={2} lg={3} xl={4} xxl={5}>
         {Array.from({ length: 10 }).map((_, index) => (
           <MasonryGridItem key={index}>
-            <CardWithImage 
-              index={index + 30} 
+            <CardWithImage
+              index={index + 30}
               title={`Column Config ${index + 1}`}
-              text={index % 2 === 0 ? undefined : 'This card demonstrates the custom column configuration across different breakpoints.'}
+              text={
+                index % 2 === 0
+                  ? undefined
+                  : 'This card demonstrates the custom column configuration across different breakpoints.'
+              }
             />
           </MasonryGridItem>
         ))}
@@ -206,18 +212,22 @@ export const WithElevationCards: Story = {
   render: () => (
     <div>
       <h3 className="u-mb-4">Elevation Cards in Masonry Layout</h3>
-      <p className="u-mb-4">The masonry grid works well with elevation card components that have hover effects.</p>
-      
+      <p className="u-mb-4">
+        The masonry grid works well with elevation card components that have hover effects.
+      </p>
+
       <MasonryGrid xs={1} sm={2} md={3} lg={4}>
         {Array.from({ length: 8 }).map((_, index) => (
           <MasonryGridItem key={index}>
-            <CardWithImage 
-              index={index + 40} 
+            <CardWithImage
+              index={index + 40}
               useElevation={true}
               title={`Elevation Card ${index + 1}`}
-              text={index % 2 === 0 ? 
-                'Hover over this card to see the elevation effect.' : 
-                'This card demonstrates the elevation effect when hovered. The masonry layout handles different content heights automatically.'}
+              text={
+                index % 2 === 0
+                  ? 'Hover over this card to see the elevation effect.'
+                  : 'This card demonstrates the elevation effect when hovered. The masonry layout handles different content heights automatically.'
+              }
             />
           </MasonryGridItem>
         ))}
@@ -234,14 +244,11 @@ export const NoAnimation: Story = {
     <div>
       <h3 className="u-mb-4">No Animation</h3>
       <p className="u-mb-4">The animation can be disabled for immediate positioning.</p>
-      
+
       <MasonryGrid xs={1} sm={2} md={3} lg={4} animate={false}>
         {Array.from({ length: 6 }).map((_, index) => (
           <MasonryGridItem key={index}>
-            <CardWithImage 
-              index={index + 50} 
-              title={`No Animation ${index + 1}`}
-            />
+            <CardWithImage index={index + 50} title={`No Animation ${index + 1}`} />
           </MasonryGridItem>
         ))}
       </MasonryGrid>
@@ -257,23 +264,27 @@ export const ProgressiveImageLoading: Story = {
     const [loadedCount, setLoadedCount] = useState(0);
     const [totalCount, setTotalCount] = useState(0);
     const [layoutComplete, setLayoutComplete] = useState(false);
-    
+
     return (
       <div>
         <h3 className="u-mb-4">Progressive Image Loading</h3>
-        <p className="u-mb-4">The grid shows items immediately and updates positions as each image loads.</p>
-        
+        <p className="u-mb-4">
+          The grid shows items immediately and updates positions as each image loads.
+        </p>
+
         <div className="u-bg-light u-p-3 u-rounded u-mb-4">
           <h4 className="u-mb-2">Loading Progress</h4>
           {totalCount > 0 && (
             <div className="u-mb-2">
               <div className="u-d-flex u-justify-content-between u-mb-1">
-                <span>Loading images: {loadedCount} of {totalCount}</span>
+                <span>
+                  Loading images: {loadedCount} of {totalCount}
+                </span>
                 <span>{Math.round((loadedCount / totalCount) * 100)}%</span>
               </div>
               <div className="u-progress u-mb-2" style={{ height: '8px' }}>
-                <div 
-                  className="u-progress-bar u-bg-primary" 
+                <div
+                  className="u-progress-bar u-bg-primary"
                   style={{ width: `${(loadedCount / totalCount) * 100}%` }}
                 ></div>
               </div>
@@ -285,13 +296,13 @@ export const ProgressiveImageLoading: Story = {
             </div>
           )}
         </div>
-        
-        <MasonryGrid 
-          xs={1} 
-          sm={2} 
-          md={3} 
+
+        <MasonryGrid
+          xs={1}
+          sm={2}
+          md={3}
           lg={4}
-          gap={16} 
+          gap={16}
           imagesLoaded={true}
           onLayoutComplete={() => setLayoutComplete(true)}
           onImageLoad={(loaded, total) => {
@@ -301,8 +312,8 @@ export const ProgressiveImageLoading: Story = {
         >
           {Array.from({ length: 8 }).map((_, index) => (
             <MasonryGridItem key={index}>
-              <CardWithImage 
-                index={index + 70} 
+              <CardWithImage
+                index={index + 70}
                 title={`Progressive Loading ${index + 1}`}
                 text="This card's image loads independently and updates the layout as it loads."
                 // Use different sized images to demonstrate the progressive loading
@@ -324,24 +335,24 @@ export const MixedContent: Story = {
   render: () => (
     <div>
       <h3 className="u-mb-4">Mixed Content Types</h3>
-      <p className="u-mb-4">The masonry grid can handle various content types with different heights.</p>
-      
+      <p className="u-mb-4">
+        The masonry grid can handle various content types with different heights.
+      </p>
+
       <MasonryGrid xs={1} sm={2} md={3} lg={4}>
         <MasonryGridItem>
           <Card
             title="Text Only Card"
             text="This card contains only text content with no image."
             className="u-h-100"
-            actions={
-              <button className="u-btn u-btn-primary u-btn-sm u-mt-3">Action</button>
-            }
+            actions={<button className="u-btn u-btn-primary u-btn-sm u-mt-3">Action</button>}
           />
         </MasonryGridItem>
-        
+
         <MasonryGridItem>
           <CardWithImage index={60} useElevation={true} />
         </MasonryGridItem>
-        
+
         <MasonryGridItem>
           <div className="u-p-4 u-border u-rounded u-bg-light u-h-100">
             <h4 className="u-mb-3">Custom Content</h4>
@@ -352,21 +363,17 @@ export const MixedContent: Story = {
             </div>
           </div>
         </MasonryGridItem>
-        
+
         <MasonryGridItem>
           <CardWithImage index={61} />
         </MasonryGridItem>
-        
+
         <MasonryGridItem>
           <div className="u-p-0 u-border u-rounded u-overflow-hidden u-shadow-sm">
-            <img 
-              src="https://picsum.photos/id/15/600/400" 
-              alt="Nature"
-              className="u-w-100"
-            />
+            <img src="https://picsum.photos/id/15/600/400" alt="Nature" className="u-w-100" />
           </div>
         </MasonryGridItem>
-        
+
         <MasonryGridItem>
           <Card
             title="Card with Icon"

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -1,4 +1,17 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useEffect, useImperativeHandle, useRef, useState, useCallback, useMemo, Children, cloneElement, isValidElement } from 'react';
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+  Children,
+  cloneElement,
+  isValidElement,
+} from 'react';
 // Import styles for scoped CSS modules
 
 export interface MasonryGridProps extends HTMLAttributes<HTMLDivElement> {
@@ -122,7 +135,6 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       else setLoadingImages(false);
     }, [columns, imagesLoaded]);
 
-
     // Types
     type MasonryImageElement = HTMLImageElement & {
       _masonryLoadHandler?: EventListener;
@@ -190,12 +202,9 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           });
         });
         onImageLoad?.(imagesLoadedCount.current, totalImagesCount.current);
-    
+
         // If all images have loaded, update loading state and complete layout
-        if (
-          imagesLoadedCount.current >= totalImagesCount.current &&
-          totalImagesCount.current > 0
-        ) {
+        if (imagesLoadedCount.current >= totalImagesCount.current && totalImagesCount.current > 0) {
           setLayoutComplete(true);
           setLoadingImages(false); // This ensures the loading class is removed *immediately* after images load
           // Force a double requestAnimationFrame for final layout calculation after all images are loaded (guarantees DOM paint)
@@ -225,7 +234,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         return undefined;
       }
       setLoadingImages(true);
-      images.forEach((img) => {
+      images.forEach(img => {
         const masonryImg = img as MasonryImageElement;
         const itemElement = img.closest('.o-masonry-grid > div');
         if (itemElement) {
@@ -242,7 +251,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       });
       // Cleanup
       return () => {
-        images.forEach((img) => {
+        images.forEach(img => {
           const masonryImg = img as MasonryImageElement;
           if (masonryImg._masonryLoadHandler) {
             img.removeEventListener('load', masonryImg._masonryLoadHandler);
@@ -263,9 +272,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
       items.forEach((item, index) => {
         if (item.ref.current) {
           // Find the shortest column
-          const shortestCol = columnHeights.current.indexOf(
-            Math.min(...columnHeights.current)
-          );
+          const shortestCol = columnHeights.current.indexOf(Math.min(...columnHeights.current));
           const left = shortestCol * (colWidth + gap);
           const top = columnHeights.current[shortestCol];
           const height = item.ref.current.offsetHeight;
@@ -308,14 +315,13 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         return undefined;
       }
       // Only reset layoutComplete when items or columns change
-      // eslint-disable-next-line
     }, [items, columns, calculateLayout, imagesLoaded, trackImages]);
 
     // === NEW: Add ResizeObservers to all grid items for bulletproof image+content measurement ===
     React.useEffect(() => {
       // Clean up old observers if items ever change
       const observers: ResizeObserver[] = [];
-      items.forEach((item) => {
+      items.forEach(item => {
         if (item.ref.current) {
           const obs = new ResizeObserver(() => {
             // Double rAF: ensures layout only runs after DOM/paint/async renders
@@ -330,7 +336,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         }
       });
       return () => {
-        observers.forEach((obs) => obs.disconnect());
+        observers.forEach(obs => obs.disconnect());
       };
     }, [items, calculateLayout]);
 
@@ -338,9 +344,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
 
     // === DETERMINE CONTAINER HEIGHT ===
     const containerHeight =
-      columnHeights.current.length > 0
-        ? Math.max(...columnHeights.current)
-        : 0;
+      columnHeights.current.length > 0 ? Math.max(...columnHeights.current) : 0;
 
     // === DETERMINE CLASSES ===
     const classes = [
@@ -354,8 +358,6 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
 
     // === RENDER ===
 
-
-
     return (
       <div
         ref={containerRef}
@@ -372,11 +374,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div
-                key={item.id}
-                ref={item.ref}
-                style={{ opacity: 0, position: 'absolute' }}
-              >
+              <div key={item.id} ref={item.ref} style={{ opacity: 0, position: 'absolute' }}>
                 {item.element}
               </div>
             );

package/src/layouts/MasonryGrid/MasonryGridItem.tsx

@@ -24,23 +24,15 @@ export interface MasonryGridItemProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const MasonryGridItem = forwardRef<HTMLDivElement, MasonryGridItemProps>(
-  ({ 
-    children, 
-    className = '', 
-    ...props 
-  }, ref) => {
+  ({ children, className = '', ...props }, ref) => {
     const classes = ['o-masonry-grid__item-inner'];
-    
+
     if (className) {
       classes.push(className);
     }
-    
+
     return (
-      <div 
-        ref={ref} 
-        className={classes.join(' ')} 
-        {...props}
-      >
+      <div ref={ref} className={classes.join(' ')} {...props}>
         {children}
       </div>
     );

package/src/layouts/index.ts

@@ -1,10 +1,9 @@
-import * as Grid  from './Grid';
+import * as Grid from './Grid';
 import * as MasonryGrid from './MasonryGrid';
 
-
 const layouts = {
   ...Grid,
-  ...MasonryGrid
-}
+  ...MasonryGrid,
+};
 
 export default layouts;

package/src/lib/composables/index.ts

@@ -34,11 +34,11 @@ export * from './useCheckbox';
 export * from './useRadio';
 export * from './useTextarea';
 
-// Export other composables as needed 
+// Export other composables as needed
 
 // New composables
 export * from './useDataTable';
 export * from './usePagination';
 export * from './useModal';
-export * from './useBreadcrumb'; 
-export * from './useCard';
+export * from './useBreadcrumb';
+export * from './useCard';

package/src/lib/composables/useAccordion.ts

@@ -27,13 +27,21 @@ interface UseAccordionResult {
  * @param initialProps - Initial accordion properties
  * @returns Accordion state and methods
  */
-export function useAccordion(initialProps?: Partial<AccordionProps> & { isOpen?: boolean; onOpenChange?: (open: boolean) => void }): UseAccordionResult {
+export function useAccordion(
+  initialProps?: Partial<AccordionProps> & {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+): UseAccordionResult {
   // Default accordion properties
-  const defaultProps: Partial<AccordionProps> & { isOpen?: boolean; onOpenChange?: (open: boolean) => void } = {
+  const defaultProps: Partial<AccordionProps> & {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  } = {
     defaultOpen: false,
     disabled: false,
     iconPosition: 'right' as IconPosition,
-    ...initialProps
+    ...initialProps,
   };
 
   // Controlled/uncontrolled open state
@@ -104,7 +112,8 @@ export function useAccordion(initialProps?: Partial<AccordionProps> & { isOpen?:
    * Generate header class names
    */
   const generateHeaderClassNames = (): string => {
-    const iconPositionClass = defaultProps.iconPosition === 'left' ? 'c-accordion__header--icon-left' : '';
+    const iconPositionClass =
+      defaultProps.iconPosition === 'left' ? 'c-accordion__header--icon-left' : '';
     return `c-accordion__header ${iconPositionClass}`.trim();
   };
 
@@ -115,6 +124,6 @@ export function useAccordion(initialProps?: Partial<AccordionProps> & { isOpen?:
     panelRef,
     contentRef,
     generateClassNames,
-    generateHeaderClassNames
+    generateHeaderClassNames,
   };
-} 
+}

package/src/lib/composables/useBadge.ts

@@ -12,7 +12,7 @@ export function useBadge(initialProps?: Partial<BadgeProps>) {
     variant: 'primary',
     size: 'md',
     disabled: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -31,7 +31,7 @@ export function useBadge(initialProps?: Partial<BadgeProps>) {
     const sizeClass = size === 'md' ? '' : `${BADGE.SIZE_PREFIX}${size}`;
     const variantClass = variant ? `${BADGE.VARIANT_PREFIX}${variant}` : '';
     const disabledClass = disabled ? 'c-badge--disabled' : '';
-    
+
     return `${BADGE.BASE_CLASS} ${variantClass} ${sizeClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -39,4 +39,4 @@ export function useBadge(initialProps?: Partial<BadgeProps>) {
     defaultProps,
     generateBadgeClass,
   };
-} 
+}

package/src/lib/composables/useBreadcrumb.ts

@@ -13,7 +13,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
     divider: BREADCRUMB.DEFAULTS.DIVIDER,
     className: '',
     ariaLabel: 'Breadcrumb',
-    ...initialOptions
+    ...initialOptions,
   };
 
   /**
@@ -23,11 +23,8 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
    */
   const generateBreadcrumbClass = (options: Partial<BreadcrumbOptions>): string => {
     const { className = '' } = options;
-    
-    return [BREADCRUMB.CLASSES.BASE, className]
-      .filter(Boolean)
-      .join(' ')
-      .trim();
+
+    return [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ').trim();
   };
 
   /**
@@ -37,10 +34,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
    * @returns Class string
    */
   const generateItemClass = (item: BreadcrumbItem, isLast: boolean): string => {
-    return [
-      BREADCRUMB.CLASSES.ITEM,
-      (item.active || isLast) ? BREADCRUMB.CLASSES.ACTIVE : ''
-    ]
+    return [BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '']
       .filter(Boolean)
       .join(' ')
       .trim();
@@ -75,6 +69,6 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
     generateBreadcrumbClass,
     generateItemClass,
     isItemLink,
-    parseItemsFromJson
+    parseItemsFromJson,
   };
-} 
+}

package/src/lib/composables/useButton.ts

@@ -12,7 +12,7 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
     size: 'md',
     disabled: false,
     rounded: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -34,7 +34,7 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
     const iconOnlyClass = iconOnly ? 'c-btn--icon' : '';
     const roundedClass = rounded ? 'c-btn--rounded' : '';
     const disabledClass = disabled ? 'c-btn--disabled' : '';
-    
+
     return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -56,4 +56,4 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
     generateButtonClass,
     handleClick,
   };
-} 
+}