@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/lib/composables/useBlock.ts

@@ -0,0 +1,56 @@
+import { BLOCK } from '../constants/components';
+
+export interface UseBlockOptions {
+  spacing?: (typeof BLOCK.SPACING.SIZES)[number];
+  background?: string;
+  fullWidth?: boolean;
+  className?: string;
+}
+
+export interface UseBlockReturn {
+  generateBlockClass: (options: UseBlockOptions) => string;
+}
+
+/**
+ * useBlock composable for Block component
+ * Provides utility functions for generating consistent block styling
+ */
+export const useBlock = (): UseBlockReturn => {
+  const generateBlockClass = ({
+    spacing = BLOCK.SPACING.DEFAULT,
+    background = '',
+    fullWidth = false,
+    className = '',
+  }: UseBlockOptions): string => {
+    const classes: string[] = [BLOCK.BASE_CLASS];
+
+    // Add spacing class
+    if (spacing && spacing !== 'none') {
+      classes.push(`${BLOCK.SPACING_PREFIX}${spacing}`);
+    }
+
+    // Add background class
+    if (background) {
+      const bgClass = BLOCK.CLASSES[`BG_${background.toUpperCase()}` as keyof typeof BLOCK.CLASSES];
+      if (bgClass) {
+        classes.push(bgClass);
+      }
+    }
+
+    // Add full-width class
+    if (fullWidth) {
+      classes.push(BLOCK.CLASSES.FULL_WIDTH);
+    }
+
+    // Add custom className
+    if (className) {
+      classes.push(className);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  return {
+    generateBlockClass,
+  };
+};

package/src/lib/composables/useBreadcrumb.ts

@@ -0,0 +1,81 @@
+import { BreadcrumbItem } from '../../components/Breadcrumb/Breadcrumb';
+import { BREADCRUMB } from '../constants/components';
+
+interface BreadcrumbOptions {
+  items: BreadcrumbItem[];
+  divider?: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+/**
+ * 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,
+  };
+};