@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/index.ts

@@ -0,0 +1,44 @@
+// Button composables
+export * from './useButton';
+
+// Accordion composables
+export * from './useAccordion';
+
+// Badge composables
+export * from './useBadge';
+
+// Hero composables
+export * from './useHero';
+
+// River composables
+export * from './useRiver';
+
+// Spinner composables
+export * from './useSpinner';
+
+// Navbar composables
+export * from './useNavbar';
+
+// EdgePanel composables
+export * from './useEdgePanel';
+
+// Todo composables
+export * from './useTodo';
+
+// Form composables
+export * from './useForm';
+export * from './useFormGroup';
+export * from './useInput';
+export * from './useSelect';
+export * from './useCheckbox';
+export * from './useRadio';
+export * from './useTextarea';
+
+// Export other composables as needed
+
+// New composables
+export * from './useDataTable';
+export * from './usePagination';
+export * from './useModal';
+export * from './useBreadcrumb';
+export * from './useCard';

package/src/lib/composables/useAccordion.ts

@@ -0,0 +1,129 @@
+import { AccordionProps, AccordionState, IconPosition, ElementRefs } from '../types/components';
+import { useState, useEffect, useRef } from 'react';
+import { ACCORDION } from '../constants/components';
+
+/**
+ * Accordion functionality hook result
+ */
+interface UseAccordionResult {
+  /** Current accordion state */
+  state: AccordionState;
+  /** Toggle the accordion open/closed */
+  toggle: () => void;
+  /** Update the panel height based on content */
+  updatePanelHeight: () => void;
+  /** Reference to the panel element */
+  panelRef: React.RefObject<HTMLDivElement>;
+  /** Reference to the content element */
+  contentRef: React.RefObject<HTMLDivElement>;
+  /** Generate accordion class names based on state */
+  generateClassNames: (baseClassName?: string) => string;
+  /** Generate header class names */
+  generateHeaderClassNames: () => string;
+}
+
+/**
+ * Accordion functionality hook
+ * @param initialProps - Initial accordion properties
+ * @returns Accordion state and methods
+ */
+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;
+  } = {
+    defaultOpen: false,
+    disabled: false,
+    iconPosition: 'right' as IconPosition,
+    ...initialProps,
+  };
+
+  // Controlled/uncontrolled open state
+  const isControlled = typeof defaultProps.isOpen === 'boolean';
+  const [internalOpen, setInternalOpen] = useState(defaultProps.defaultOpen || false);
+  const isOpen = isControlled ? defaultProps.isOpen! : internalOpen;
+
+  const [panelHeight, setPanelHeight] = useState<string>(isOpen ? 'auto' : '0px');
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Toggle accordion open/closed state
+   */
+  const toggle = (): void => {
+    if (!defaultProps.disabled) {
+      if (isControlled) {
+        defaultProps.onOpenChange && defaultProps.onOpenChange(!isOpen);
+      } else {
+        setInternalOpen(prev => !prev);
+      }
+    }
+  };
+
+  /**
+   * Update panel height based on content
+   */
+  const updatePanelHeight = (): void => {
+    if (contentRef.current && panelRef.current) {
+      const height = isOpen ? `${contentRef.current.clientHeight}px` : '0px';
+      panelRef.current.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, height);
+      setPanelHeight(height);
+    }
+  };
+
+  /**
+   * Effect to update panel height when open state changes
+   */
+  useEffect(() => {
+    updatePanelHeight();
+  }, [isOpen]);
+
+  /**
+   * Effect to handle window resize and update panel height
+   */
+  useEffect(() => {
+    const handleResize = (): void => {
+      if (isOpen) {
+        updatePanelHeight();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isOpen]);
+
+  /**
+   * Generate accordion class names based on state
+   */
+  const generateClassNames = (baseClassName: string = ''): string => {
+    const openClass = isOpen ? ACCORDION.CLASSES.IS_OPEN : '';
+    const disabledClass = defaultProps.disabled ? ACCORDION.CLASSES.IS_DISABLED : '';
+    return `c-accordion ${openClass} ${disabledClass} ${baseClassName}`.trim();
+  };
+
+  /**
+   * Generate header class names
+   */
+  const generateHeaderClassNames = (): string => {
+    const iconPositionClass =
+      defaultProps.iconPosition === 'left' ? 'c-accordion__header--icon-left' : '';
+    return `c-accordion__header ${iconPositionClass}`.trim();
+  };
+
+  return {
+    state: { isOpen, panelHeight },
+    toggle,
+    updatePanelHeight,
+    panelRef,
+    contentRef,
+    generateClassNames,
+    generateHeaderClassNames,
+  };
+}

package/src/lib/composables/useBadge.ts

@@ -0,0 +1,42 @@
+import { BadgeProps } from '../types/components';
+import { BADGE } from '../constants/components';
+
+/**
+ * Badge state and functionality
+ * @param initialProps - Initial badge properties
+ * @returns Badge state and methods
+ */
+export function useBadge(initialProps?: Partial<BadgeProps>) {
+  // Default badge properties
+  const defaultProps: Partial<BadgeProps> = {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate badge class based on properties
+   * @param props - Badge properties
+   * @returns Class string
+   */
+  const generateBadgeClass = (props: Partial<BadgeProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      className = '',
+    } = props;
+
+    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();
+  };
+
+  return {
+    defaultProps,
+    generateBadgeClass,
+  };
+}

package/src/lib/composables/useBreadcrumb.ts

@@ -0,0 +1,74 @@
+import { BreadcrumbItem, BreadcrumbOptions } from '../../components/Breadcrumb/scripts/types';
+import { BREADCRUMB } from '../constants/components';
+
+/**
+ * Breadcrumb state and functionality
+ * @param initialOptions - Initial breadcrumb options
+ * @returns Breadcrumb state and methods
+ */
+export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
+  // Default breadcrumb options
+  const defaultOptions: BreadcrumbOptions = {
+    items: [],
+    divider: BREADCRUMB.DEFAULTS.DIVIDER,
+    className: '',
+    ariaLabel: 'Breadcrumb',
+    ...initialOptions,
+  };
+
+  /**
+   * Generate breadcrumb class based on options
+   * @param options - Breadcrumb options
+   * @returns Class string
+   */
+  const generateBreadcrumbClass = (options: Partial<BreadcrumbOptions>): string => {
+    const { className = '' } = options;
+
+    return [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ').trim();
+  };
+
+  /**
+   * Generate breadcrumb item class
+   * @param item - Breadcrumb item
+   * @param isLast - Whether this is the last item
+   * @returns Class string
+   */
+  const generateItemClass = (item: BreadcrumbItem, isLast: boolean): string => {
+    return [BREADCRUMB.CLASSES.ITEM, item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '']
+      .filter(Boolean)
+      .join(' ')
+      .trim();
+  };
+
+  /**
+   * Check if an item should be rendered as a link
+   * @param item - Breadcrumb item
+   * @param isLast - Whether this is the last item
+   * @returns Whether item should be a link
+   */
+  const isItemLink = (item: BreadcrumbItem, isLast: boolean): boolean => {
+    return Boolean(item.href && !item.active && !isLast);
+  };
+
+  /**
+   * Parse items from a JSON string
+   * @param jsonString - JSON string of items
+   * @returns Array of breadcrumb items
+   */
+  const parseItemsFromJson = (jsonString: string): BreadcrumbItem[] => {
+    try {
+      return JSON.parse(jsonString) as BreadcrumbItem[];
+    } catch (error) {
+      console.error('Error parsing breadcrumb items:', error);
+      return [];
+    }
+  };
+
+  return {
+    defaultOptions,
+    generateBreadcrumbClass,
+    generateItemClass,
+    isItemLink,
+    parseItemsFromJson,
+  };
+}

package/src/lib/composables/useButton.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from '../types/components';
+
+/**
+ * Button state and functionality
+ * @param initialProps - Initial button properties
+ * @returns Button state and methods
+ */
+export function useButton(initialProps?: Partial<ButtonProps>) {
+  // Default button properties
+  const defaultProps: Partial<ButtonProps> = {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    rounded: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate button class based on properties
+   * @param props - Button properties
+   * @returns Class string
+   */
+  const generateButtonClass = (props: Partial<ButtonProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      rounded = defaultProps.rounded,
+      iconOnly = false,
+      className = '',
+    } = props;
+
+    const sizeClass = size === 'md' ? '' : `c-btn--${size}`;
+    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();
+  };
+
+  /**
+   * Handle button click with disabled check
+   * @param handler - Click handler function
+   * @returns Function that respects disabled state
+   */
+  const handleClick = (handler?: () => void) => {
+    return () => {
+      if (!defaultProps.disabled && handler) {
+        handler();
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateButtonClass,
+    handleClick,
+  };
+}

package/src/lib/composables/useCallout.ts

@@ -0,0 +1,55 @@
+import { CalloutProps } from '../types/components';
+
+/**
+ * Callout state and functionality
+ * @param initialProps - Initial callout properties
+ * @returns Callout state and methods
+ */
+export function useCallout(initialProps?: Partial<CalloutProps>) {
+  // Default callout properties
+  const defaultProps: Partial<CalloutProps> = {
+    variant: 'primary',
+    oneLine: false,
+    toast: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate callout class based on properties
+   * @param props - Callout properties
+   * @returns Class string
+   */
+  const generateCalloutClass = (props: Partial<CalloutProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      oneLine = defaultProps.oneLine,
+      toast = defaultProps.toast,
+      className = '',
+    } = props;
+
+    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();
+  };
+
+  /**
+   * Handle callout close with callback
+   * @param handler - Close handler function
+   * @returns Function that calls the handler
+   */
+  const handleClose = (handler?: () => void) => {
+    return () => {
+      if (handler) {
+        handler();
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateCalloutClass,
+    handleClose,
+  };
+}

package/src/lib/composables/useCard.ts

@@ -0,0 +1,155 @@
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { UseCardOptions, UseCardReturn } from '../types/components';
+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
+ */
+export const useCard = (options: UseCardOptions = {}): UseCardReturn => {
+  const {
+    elevationEffect = false,
+    elevationClass = CARD.CLASSES.ACTIVE,
+    flipEffect = false,
+    flipTrigger = 'click',
+    focusEffect = false,
+    clickable = false,
+    onClick,
+  } = options;
+
+  const cardRef = useRef<HTMLDivElement>(null);
+  const frontRef = useRef<HTMLDivElement>(null);
+  const backRef = useRef<HTMLDivElement>(null);
+
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [isElevated, setIsElevated] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  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();
+
+        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);
+    }
+
+    if (flipEffect && flipTrigger === 'hover') {
+      setIsFlipped(true);
+    }
+  }, [elevationEffect, flipEffect, flipTrigger]);
+
+  // Handle mouse leave events
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+
+    if (elevationEffect) {
+      setIsElevated(false);
+    }
+
+    if (flipEffect && flipTrigger === 'hover') {
+      setIsFlipped(false);
+    }
+  }, [elevationEffect, flipEffect, flipTrigger]);
+
+  // Handle focus events
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  // Handle blur events
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  // Get all card props combined
+  const getCardProps = useCallback(() => {
+    const className = [
+      CARD.CLASSES.BASE,
+      isElevated ? elevationClass : '',
+      isFlipped ? CARD.CLASSES.FLIPPED : '',
+      isFocused && focusEffect ? CARD.CLASSES.FOCUSED : '',
+      clickable ? CARD.CLASSES.CLICKABLE : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return {
+      className,
+      ref: cardRef,
+      tabxwIndex: clickable || flipEffect ? 0 : -1,
+      role: clickable ? 'button' : undefined,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+    };
+  }, [
+    isElevated,
+    isFlipped,
+    isFocused,
+    elevationClass,
+    focusEffect,
+    clickable,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur,
+    handleClick,
+    handleKeyDown,
+    flipEffect,
+  ]);
+
+  return {
+    cardRef,
+    frontRef,
+    backRef,
+    isFlipped,
+    isElevated,
+    isFocused,
+    isHovered,
+    handleClick,
+    handleKeyDown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur,
+    getCardProps,
+  };
+};

package/src/lib/composables/useCheckbox.ts

@@ -0,0 +1,70 @@
+import { useRef, useEffect } from 'react';
+import { CheckboxProps } from '../types/components';
+
+// Define checkbox class constants
+const CHECKBOX_CLASSES = {
+  BASE: 'c-checkbox',
+  INVALID: 'is-error',
+  VALID: 'is-valid',
+  DISABLED: 'is-disabled',
+  MIXED: 'c-checkbox--mixed',
+};
+
+/**
+ * Checkbox state and functionality
+ * @param initialProps - Initial checkbox properties
+ * @returns Checkbox state and methods
+ */
+export function useCheckbox(initialProps?: Partial<CheckboxProps>) {
+  // Default checkbox properties
+  const defaultProps: Partial<CheckboxProps> = {
+    disabled: false,
+    invalid: false,
+    valid: false,
+    indeterminate: false,
+    ...initialProps,
+  };
+
+  // Ref for the checkbox input element
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  // Handle indeterminate state
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = Boolean(defaultProps.indeterminate);
+    }
+  }, [defaultProps.indeterminate]);
+
+  /**
+   * Generate checkbox class based on properties
+   * @param props - Checkbox properties
+   * @returns Class string
+   */
+  const generateCheckboxClass = (props: Partial<CheckboxProps>): string => {
+    const {
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      indeterminate = defaultProps.indeterminate,
+      className = '',
+    } = props;
+
+    let validationClass = '';
+    if (invalid) {
+      validationClass = CHECKBOX_CLASSES.INVALID;
+    } 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();
+  };
+
+  return {
+    defaultProps,
+    generateCheckboxClass,
+    checkboxRef,
+  };
+}