@shohojdhara/atomix 0.1.26 → 0.1.28

package/src/lib/composables/useNavbar.ts

@@ -1,288 +0,0 @@
-import { useState } from 'react';
-import { NavbarProps, NavProps, NavItemProps, NavDropdownProps } from '../types/components';
-import { NAVBAR, NAV } from '../constants/components';
-import React from 'react';
-import { Icon } from '../../components/Icon/Icon';
-
-/**
- * Navbar state and functionality
- * @param initialProps - Initial navbar properties
- * @returns Navbar state and methods
- */
-export function useNavbar(initialProps?: Partial<NavbarProps>) {
-  // Default navbar properties
-  const defaultProps: Partial<NavbarProps> = {
-    position: 'static',
-    collapsible: true,
-    backdrop: false,
-    closeOnOutsideClick: true,
-    closeOnEscape: true,
-    ariaLabel: 'Main navigation',
-    ...initialProps,
-  };
-
-  // Local expanded state for when not controlled externally
-  const [isExpanded, setIsExpanded] = useState(defaultProps.expanded || false);
-
-  /**
-   * Generate navbar class based on properties
-   * @param props - Navbar properties
-   * @returns Class string
-   */
-  const generateNavbarClass = (props: Partial<NavbarProps>): string => {
-    const {
-      position = defaultProps.position,
-      variant,
-      collapsible = defaultProps.collapsible,
-      className = '',
-    } = props;
-
-    const positionClass = position !== 'static' ? `c-navbar--${position}` : '';
-    const variantClass = variant ? `c-navbar--${variant}` : '';
-    const collapsibleClass = collapsible ? 'c-navbar--collapsible' : '';
-
-    return `c-navbar ${positionClass} ${variantClass} ${collapsibleClass} ${className}`.trim();
-  };
-
-  /**
-   * Generate container style
-   * @param width - Container width
-   * @returns Style object
-   */
-  const generateContainerStyle = (width?: string) => {
-    return width ? { maxWidth: width } : {};
-  };
-
-  /**
-   * Generate collapse class based on expanded state
-   * @param expanded - Whether the collapse is expanded
-   * @returns Class string
-   */
-  const generateCollapseClass = (expanded: boolean): string => {
-    return `c-navbar__collapse ${expanded ? 'is-expanded' : ''}`.trim();
-  };
-
-  /**
-   * Toggle expanded state
-   */
-  const toggleExpanded = () => {
-    const newState = !isExpanded;
-    setIsExpanded(newState);
-
-    if (defaultProps.onToggle) {
-      defaultProps.onToggle(newState);
-    }
-  };
-
-  /**
-   * Get current expanded state
-   * @param controlled - External expanded value if controlled
-   * @returns Current expanded state
-   */
-  const getExpandedState = (controlled?: boolean): boolean => {
-    return typeof controlled !== 'undefined' ? controlled : isExpanded;
-  };
-
-  return {
-    defaultProps,
-    isExpanded,
-    setIsExpanded,
-    generateNavbarClass,
-    generateContainerStyle,
-    generateCollapseClass,
-    toggleExpanded,
-    getExpandedState,
-  };
-}
-
-/**
- * Nav state and functionality
- * @param initialProps - Initial nav properties
- * @returns Nav state and methods
- */
-export function useNav(initialProps?: Partial<NavProps>) {
-  // Default nav properties
-  const defaultProps: Partial<NavProps> = {
-    alignment: 'start',
-    variant: 'default',
-    ...initialProps,
-  };
-
-  /**
-   * Generate nav class based on properties
-   * @param props - Nav properties
-   * @returns Class string
-   */
-  const generateNavClass = (props: Partial<NavProps>): string => {
-    const {
-      alignment = defaultProps.alignment,
-      variant = defaultProps.variant,
-      className = '',
-    } = props;
-
-    const alignmentClass = alignment !== 'start' ? `c-nav--${alignment}` : '';
-    const variantClass = variant !== 'default' ? `c-nav--${variant}` : '';
-
-    return `c-nav ${alignmentClass} ${variantClass} ${className}`.trim();
-  };
-
-  return {
-    defaultProps,
-    generateNavClass,
-  };
-}
-
-/**
- * Nav item state and functionality
- * @param initialProps - Initial nav item properties
- * @returns Nav item state and methods
- */
-export function useNavItem(initialProps?: Partial<NavItemProps & { megaMenu?: boolean }>) {
-  // Default nav item properties
-  const defaultProps: Partial<NavItemProps & { megaMenu?: boolean }> = {
-    dropdown: false,
-    megaMenu: false,
-    active: false,
-    ...initialProps,
-  };
-
-  /**
-   * Generate nav item class based on properties
-   * @param props - Nav item properties
-   * @returns Class string
-   */
-  const generateNavItemClass = (props: Partial<NavItemProps & { megaMenu?: boolean }>): string => {
-    const {
-      dropdown = defaultProps.dropdown,
-      megaMenu = defaultProps.megaMenu,
-      active = defaultProps.active,
-      disabled = defaultProps.disabled,
-      className = '',
-    } = props;
-
-    // Apply dropdown class only for regular dropdowns, not mega menus
-    const dropdownClass = dropdown && !megaMenu ? NAV.SELECTORS.DROPDOWN.replace('.', '') : '';
-    // Add a custom class for mega menu items if needed
-    const megaMenuClass = megaMenu ? 'c-nav__item--mega-menu' : '';
-    const activeClass = active ? NAV.CLASSES.ACTIVE : '';
-    const disabledClass = disabled ? NAV.CLASSES.DISABLED : '';
-
-    return `c-nav__item ${dropdownClass} ${megaMenuClass} ${activeClass} ${disabledClass} ${className}`.trim();
-  };
-
-  /**
-   * Generate nav link class based on properties
-   * @param active - Whether link is active
-   * @param disabled - Whether link is disabled
-   * @param className - Additional class names
-   * @returns Class string
-   */
-  const generateNavLinkClass = (active = false, disabled = false, className = ''): string => {
-    const activeClass = active ? NAV.CLASSES.ACTIVE : '';
-    const disabledClass = disabled ? 'c-nav__link--disabled' : '';
-
-    return `c-nav__link ${activeClass} ${disabledClass} ${className}`.trim();
-  };
-
-  /**
-   * Handle nav item click with disabled check
-   * @param handler - Click handler function
-   * @returns Function that respects disabled state
-   */
-  const handleClick = (handler?: () => void) => {
-    return (e: React.MouseEvent) => {
-      if (defaultProps.disabled || !handler) {
-        e.preventDefault();
-        return;
-      }
-
-      handler();
-    };
-  };
-
-  return {
-    defaultProps,
-    generateNavItemClass,
-    generateNavLinkClass,
-    handleClick,
-  };
-}
-
-/**
- * Nav dropdown state and functionality
- * @param initialProps - Initial dropdown properties
- * @returns Dropdown state and methods
- */
-export function useNavDropdown(initialProps?: Partial<NavDropdownProps>) {
-  // Default dropdown properties
-  const defaultProps: Partial<NavDropdownProps> = {
-    alignment: 'start',
-    megaMenu: false,
-    ...initialProps,
-  };
-
-  /**
-   * Generate dropdown menu class based on properties
-   * @param props - Dropdown properties
-   * @returns Class string
-   */
-  const generateDropdownMenuClass = (props: Partial<NavDropdownProps>): string => {
-    const {
-      alignment = defaultProps.alignment,
-      megaMenu = defaultProps.megaMenu,
-      className = '',
-    } = props;
-
-    // Select the base class based on mega menu or regular dropdown
-    const baseClass = megaMenu
-      ? NAV.SELECTORS.MEGA_MENU.replace('.', '')
-      : NAV.SELECTORS.DROPDOWN_MENU.replace('.', '');
-
-    // Add alignment class if not default 'start'
-    let alignmentClass = '';
-    if (alignment === 'center') {
-      alignmentClass = `${baseClass}--center`;
-    } else if (alignment === 'end') {
-      alignmentClass = `${baseClass}--end`;
-    }
-
-    return `${baseClass} ${alignmentClass} ${className}`.trim();
-  };
-
-  /**
-   * Detect whether we're in a fixed-bottom navbar
-   * @returns Boolean indicating if in fixed-bottom navbar
-   */
-  const isInFixedBottomNavbar = (): boolean => {
-    // This would need to be called in the component itself
-    // because it requires DOM access
-    return document.querySelector('.c-navbar--fixed-bottom') !== null;
-  };
-
-  /**
-   * Get the appropriate icon name based on navbar position
-   * @param isMegaMenu - Whether it's a mega menu
-   * @returns Icon name for the new Icon component
-   */
-  const getIconName = (isMegaMenu: boolean = false): string => {
-    const isFixedBottom = isInFixedBottomNavbar();
-    return isFixedBottom ? 'CaretUp' : 'CaretDown';
-  };
-
-  // Keeping this for backward compatibility
-  const getIconClass = (isMegaMenu: boolean = false): string => {
-    console.warn(
-      'getIconClass is deprecated. Please use the Icon component directly with the getIconName function.'
-    );
-    const isFixedBottom = isInFixedBottomNavbar();
-    return `c-nav__icon ${isFixedBottom ? 'icon-lux-caret-up' : 'icon-lux-caret-down'}`;
-  };
-
-  return {
-    defaultProps,
-    generateDropdownMenuClass,
-    isInFixedBottomNavbar,
-    getIconClass,
-    getIconName,
-  };
-}

package/src/lib/composables/usePagination.ts

@@ -1,101 +0,0 @@
-import { useState, useMemo } from 'react';
-import { PaginationProps } from '../types/components';
-
-export const DOTS = '...';
-
-const range = (start: number, end: number) => {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, idx) => idx + start);
-};
-
-export const usePagination = ({
-  currentPage,
-  totalPages,
-  siblingCount = 1,
-  onPageChange,
-}: Omit<PaginationProps, 'className'>) => {
-  const paginationRange = useMemo(() => {
-    const totalPageNumbers = siblingCount + 5; // siblingCount + firstPage + lastPage + currentPage + 2*DOTS
-
-    /*
-      Case 1: If the number of pages is less than the page numbers we want to show in our
-      paginationComponent, we return the range [1..totalPages]
-    */
-    if (totalPageNumbers >= totalPages) {
-      return range(1, totalPages);
-    }
-
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPages;
-
-    /*
-    	Case 2: No left dots to show, but rights dots to be shown
-    */
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = 3 + 2 * siblingCount;
-      let leftRange = range(1, leftItemCount);
-
-      return [...leftRange, DOTS, totalPages];
-    }
-
-    /*
-    	Case 3: No right dots to show, but left dots to be shown
-    */
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 3 + 2 * siblingCount;
-      let rightRange = range(totalPages - rightItemCount + 1, totalPages);
-      return [firstPageIndex, DOTS, ...rightRange];
-    }
-
-    /*
-    	Case 4: Both left and right dots to be shown
-    */
-    if (shouldShowLeftDots && shouldShowRightDots) {
-      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
-    }
-
-    // This case should ideally not be reached if logic is correct
-    return [];
-  }, [totalPages, siblingCount, currentPage]);
-
-  const goToPage = (page: number) => {
-    if (page >= 1 && page <= totalPages && page !== currentPage) {
-      onPageChange(page);
-    }
-  };
-
-  const nextPage = () => {
-    goToPage(currentPage + 1);
-  };
-
-  const prevPage = () => {
-    goToPage(currentPage - 1);
-  };
-
-  const firstPage = () => {
-    goToPage(1);
-  };
-
-  const lastPage = () => {
-    goToPage(totalPages);
-  };
-
-  return {
-    paginationRange,
-    currentPage,
-    totalPages,
-    goToPage,
-    nextPage,
-    prevPage,
-    firstPage,
-    lastPage,
-    DOTS,
-  };
-};