@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/useNavbar.ts

@@ -0,0 +1,288 @@
+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

@@ -0,0 +1,101 @@
+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,
+  };
+};