@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/useCallout.ts

@@ -11,7 +11,7 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
     variant: 'primary',
     oneLine: false,
     toast: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -30,7 +30,7 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
     const oneLineClass = oneLine ? 'c-callout--oneline' : '';
     const toastClass = toast ? 'c-callout--toast' : '';
     const variantClass = variant ? `c-callout--${variant}` : '';
-    
+
     return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${className}`.trim();
   };
 
@@ -52,4 +52,4 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
     generateCalloutClass,
     handleClose,
   };
-}
+}

package/src/lib/composables/useCard.ts

@@ -4,7 +4,7 @@ import { CARD } from '../constants/components';
 
 /**
  * Hook for managing Card component state and behaviors
- * 
+ *
  * @param options - Configuration options for the card
  * @returns Card state and handlers
  */
@@ -16,7 +16,7 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
     flipTrigger = 'click',
     focusEffect = false,
     clickable = false,
-    onClick
+    onClick,
   } = options;
 
   const cardRef = useRef<HTMLDivElement>(null);
@@ -29,35 +29,41 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
   const [isHovered, setIsHovered] = useState(false);
 
   // Handle click events
-  const handleClick = useCallback((event: React.MouseEvent) => {
-    if (flipEffect && flipTrigger === 'click') {
-      setIsFlipped(prev => !prev);
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-  }, [flipEffect, flipTrigger, onClick]);
-
-  // Handle keyboard events for accessibility
-  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
       if (flipEffect && flipTrigger === 'click') {
         setIsFlipped(prev => !prev);
       }
 
       if (onClick) {
-        onClick(event as unknown as React.MouseEvent);
+        onClick(event);
       }
-    }
-  }, [flipEffect, flipTrigger, onClick]);
+    },
+    [flipEffect, flipTrigger, onClick]
+  );
+
+  // Handle keyboard events for accessibility
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+
+        if (flipEffect && flipTrigger === 'click') {
+          setIsFlipped(prev => !prev);
+        }
+
+        if (onClick) {
+          onClick(event as unknown as React.MouseEvent);
+        }
+      }
+    },
+    [flipEffect, flipTrigger, onClick]
+  );
 
   // Handle mouse enter events
   const handleMouseEnter = useCallback(() => {
     setIsHovered(true);
-    
+
     if (elevationEffect) {
       setIsElevated(true);
     }
@@ -70,7 +76,7 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
   // Handle mouse leave events
   const handleMouseLeave = useCallback(() => {
     setIsHovered(false);
-    
+
     if (elevationEffect) {
       setIsElevated(false);
     }
@@ -97,8 +103,10 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
       isElevated ? elevationClass : '',
       isFlipped ? CARD.CLASSES.FLIPPED : '',
       isFocused && focusEffect ? CARD.CLASSES.FOCUSED : '',
-      clickable ? CARD.CLASSES.CLICKABLE : ''
-    ].filter(Boolean).join(' ');
+      clickable ? CARD.CLASSES.CLICKABLE : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
 
     return {
       className,
@@ -110,9 +118,23 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
       onFocus: handleFocus,
       onBlur: handleBlur,
       onClick: handleClick,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
     };
-  }, [isElevated, isFlipped, isFocused, elevationClass, focusEffect, clickable, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, handleClick, handleKeyDown, flipEffect]);
+  }, [
+    isElevated,
+    isFlipped,
+    isFocused,
+    elevationClass,
+    focusEffect,
+    clickable,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur,
+    handleClick,
+    handleKeyDown,
+    flipEffect,
+  ]);
 
   return {
     cardRef,
@@ -128,6 +150,6 @@ export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
     handleMouseLeave,
     handleFocus,
     handleBlur,
-    getCardProps
+    getCardProps,
   };
-};
+};

package/src/lib/composables/useCheckbox.ts

@@ -7,7 +7,7 @@ const CHECKBOX_CLASSES = {
   INVALID: 'is-error',
   VALID: 'is-valid',
   DISABLED: 'is-disabled',
-  MIXED: 'c-checkbox--mixed'
+  MIXED: 'c-checkbox--mixed',
 };
 
 /**
@@ -22,12 +22,12 @@ export function useCheckbox(initialProps?: Partial<CheckboxProps>) {
     invalid: false,
     valid: false,
     indeterminate: false,
-    ...initialProps
+    ...initialProps,
   };
-  
+
   // Ref for the checkbox input element
   const checkboxRef = useRef<HTMLInputElement>(null);
-  
+
   // Handle indeterminate state
   useEffect(() => {
     if (checkboxRef.current) {
@@ -55,10 +55,10 @@ export function useCheckbox(initialProps?: Partial<CheckboxProps>) {
     } else if (valid) {
       validationClass = CHECKBOX_CLASSES.VALID;
     }
-    
+
     const disabledClass = disabled ? CHECKBOX_CLASSES.DISABLED : '';
     const indeterminateClass = indeterminate ? CHECKBOX_CLASSES.MIXED : '';
-    
+
     return `${CHECKBOX_CLASSES.BASE} ${validationClass} ${disabledClass} ${indeterminateClass} ${className}`.trim();
   };
 
@@ -67,4 +67,4 @@ export function useCheckbox(initialProps?: Partial<CheckboxProps>) {
     generateCheckboxClass,
     checkboxRef,
   };
-} 
+}

package/src/lib/composables/useDataTable.ts

@@ -6,32 +6,32 @@ export interface UseDataTableProps {
    * Data array to display
    */
   data: any[];
-  
+
   /**
    * Column definitions
    */
   columns: DataTableColumn[];
-  
+
   /**
    * Whether the table is sortable
    */
   sortable?: boolean;
-  
+
   /**
    * Whether the table is paginated
    */
   paginated?: boolean;
-  
+
   /**
    * Number of rows per page
    */
   pageSize?: number;
-  
+
   /**
    * Callback when sorting changes
    */
   onSort?: (sortConfig: SortConfig) => void;
-  
+
   /**
    * Initial sort configuration
    */
@@ -43,32 +43,32 @@ export interface UseDataTableReturn {
    * Data to display (filtered, sorted, paginated)
    */
   displayData: any[];
-  
+
   /**
    * Current sort configuration
    */
   sortConfig: SortConfig | null;
-  
+
   /**
    * Current page number
    */
   currentPage: number;
-  
+
   /**
    * Total number of pages
    */
   totalPages: number;
-  
+
   /**
    * Handle sort column click
    */
   handleSort: (key: string) => void;
-  
+
   /**
    * Handle page change
    */
   handlePageChange: (page: number) => void;
-  
+
   /**
    * Handle search input
    */
@@ -89,49 +89,55 @@ export function useDataTable({
 }: UseDataTableProps): UseDataTableReturn {
   // Sort state
   const [sortConfig, setSortConfig] = useState<SortConfig | null>(initialSortConfig || null);
-  
+
   // Pagination state
   const [currentPage, setCurrentPage] = useState<number>(1);
-  
+
   // Search state
   const [searchQuery, setSearchQuery] = useState<string>('');
-  
+
   // Handle sorting
-  const handleSort = useCallback((key: string) => {
-    if (!sortable) return;
-    
-    let direction: 'asc' | 'desc' = 'asc';
-    
-    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
-      direction = 'desc';
-    }
-    
-    const newSortConfig = { key, direction };
-    setSortConfig(newSortConfig);
-    
-    if (onSort) {
-      onSort(newSortConfig);
-    }
-  }, [sortable, sortConfig, onSort]);
-  
+  const handleSort = useCallback(
+    (key: string) => {
+      if (!sortable) return;
+
+      let direction: 'asc' | 'desc' = 'asc';
+
+      if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
+        direction = 'desc';
+      }
+
+      const newSortConfig = { key, direction };
+      setSortConfig(newSortConfig);
+
+      if (onSort) {
+        onSort(newSortConfig);
+      }
+    },
+    [sortable, sortConfig, onSort]
+  );
+
   // Handle page change
-  const handlePageChange = useCallback((page: number) => {
-    if (page < 1 || page > Math.ceil(data.length / pageSize)) return;
-    setCurrentPage(page);
-  }, [data.length, pageSize]);
-  
+  const handlePageChange = useCallback(
+    (page: number) => {
+      if (page < 1 || page > Math.ceil(data.length / pageSize)) return;
+      setCurrentPage(page);
+    },
+    [data.length, pageSize]
+  );
+
   // Handle search
   const handleSearch = useCallback((query: string) => {
     setSearchQuery(query);
     setCurrentPage(1); // Reset to first page when searching
   }, []);
-  
+
   // Filter data based on search query
   const filteredData = useMemo(() => {
     if (!searchQuery) return data;
-    
+
     const lowercaseQuery = searchQuery.toLowerCase();
-    
+
     return data.filter(row => {
       return columns.some(column => {
         const value = row[column.key];
@@ -140,56 +146,54 @@ export function useDataTable({
       });
     });
   }, [data, columns, searchQuery]);
-  
+
   // Sort data
   const sortedData = useMemo(() => {
     if (!sortConfig || !sortable) return filteredData;
-    
+
     return [...filteredData].sort((a, b) => {
       const aValue = a[sortConfig.key];
       const bValue = b[sortConfig.key];
-      
+
       if (aValue == null) return sortConfig.direction === 'asc' ? -1 : 1;
       if (bValue == null) return sortConfig.direction === 'asc' ? 1 : -1;
-      
+
       if (typeof aValue === 'string' && typeof bValue === 'string') {
-        return sortConfig.direction === 'asc' 
-          ? aValue.localeCompare(bValue) 
+        return sortConfig.direction === 'asc'
+          ? aValue.localeCompare(bValue)
           : bValue.localeCompare(aValue);
       }
-      
-      return sortConfig.direction === 'asc' 
-        ? (aValue > bValue ? 1 : -1) 
-        : (aValue > bValue ? -1 : 1);
+
+      return sortConfig.direction === 'asc' ? (aValue > bValue ? 1 : -1) : aValue > bValue ? -1 : 1;
     });
   }, [filteredData, sortConfig, sortable]);
-  
+
   // Paginate data
   const paginatedData = useMemo(() => {
     if (!paginated) return sortedData;
-    
+
     const startIndex = (currentPage - 1) * pageSize;
     return sortedData.slice(startIndex, startIndex + pageSize);
   }, [sortedData, paginated, currentPage, pageSize]);
-  
+
   // Calculate total pages
   const totalPages = useMemo(() => {
     if (!paginated) return 1;
     return Math.max(1, Math.ceil(sortedData.length / pageSize));
   }, [sortedData.length, paginated, pageSize]);
-  
+
   // Reset to first page when data changes
   useEffect(() => {
     setCurrentPage(1);
   }, [data]);
-  
+
   // Reset current page if it's out of bounds
   useEffect(() => {
     if (currentPage > totalPages) {
       setCurrentPage(Math.max(1, totalPages));
     }
   }, [currentPage, totalPages]);
-  
+
   return {
     displayData: paginatedData,
     sortConfig,
@@ -201,4 +205,4 @@ export function useDataTable({
   };
 }
 
-export default useDataTable; 
+export default useDataTable;