@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/lib/composables/index.ts

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

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

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

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

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

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

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

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