@shohojdhara/atomix 0.1.30 → 0.2.2

package/src/lib/composables/useProgress.ts

@@ -0,0 +1,74 @@
+import { ThemeColor } from '../types/components';
+
+interface UseProgressProps {
+  /**
+   * Progress value from 0 to 100
+   */
+  value: number;
+
+  /**
+   * Optional color variant
+   */
+  variant?: ThemeColor;
+
+  /**
+   * Optional size
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional className for custom styling
+   */
+  className?: string;
+}
+
+interface UseProgressReturn {
+  /**
+   * Computed progress value clamped between 0 and 100
+   */
+  progressValue: number;
+
+  /**
+   * CSS properties for the progress component
+   */
+  progressStyle: React.CSSProperties;
+
+  /**
+   * CSS classes for the progress component
+   */
+  progressClasses: string;
+}
+
+/**
+ * Hook for managing Progress component state and behavior
+ */
+export const useProgress = ({
+  value,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+}: UseProgressProps): UseProgressReturn => {
+  // Clamp value between 0 and 100
+  const progressValue = Math.min(Math.max(value, 0), 100);
+
+  // Create CSS custom properties
+  const progressStyle = {
+    '--atomix-progress-percentage': `${progressValue}%`,
+  } as React.CSSProperties;
+
+  // Generate class names
+  const baseClass = 'c-progress';
+  const variantClass = variant ? `${baseClass}--${variant}` : '';
+  const sizeClass = size ? `${baseClass}--${size}` : '';
+  const customClass = className || '';
+
+  const progressClasses = [baseClass, variantClass, sizeClass, customClass]
+    .filter(Boolean)
+    .join(' ');
+
+  return {
+    progressValue,
+    progressStyle,
+    progressClasses,
+  };
+};

package/src/lib/composables/useRadio.ts

@@ -0,0 +1,47 @@
+import { RadioProps } from '../types/components';
+import { RADIO } from '../constants/components';
+
+/**
+ * Radio state and functionality
+ * @param initialProps - Initial radio properties
+ * @returns Radio state and methods
+ */
+export function useRadio(initialProps?: Partial<RadioProps>) {
+  // Default radio properties
+  const defaultProps: Partial<RadioProps> = {
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate radio class based on properties
+   * @param props - Radio properties
+   * @returns Class string
+   */
+  const generateRadioClass = (props: Partial<RadioProps>): string => {
+    const {
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    let validationClass = '';
+    if (invalid) {
+      validationClass = RADIO.CLASSES.INVALID;
+    } else if (valid) {
+      validationClass = RADIO.CLASSES.VALID;
+    }
+
+    const disabledClass = disabled ? RADIO.CLASSES.DISABLED : '';
+
+    return `${RADIO.CLASSES.BASE} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateRadioClass,
+  };
+}

package/src/lib/composables/useRating.ts

@@ -0,0 +1,174 @@
+import { useState, useCallback } from 'react';
+import type { RatingProps } from '../types/components';
+
+/**
+ * Props for the useRating hook
+ */
+export type UseRatingProps = Pick<
+  RatingProps,
+  'value' | 'maxValue' | 'allowHalf' | 'readOnly' | 'onChange'
+>;
+
+export interface UseRatingReturn {
+  /**
+   * Current rating value (controlled or uncontrolled)
+   */
+  currentValue: number;
+
+  /**
+   * Value being hovered over
+   */
+  hoverValue: number | null;
+
+  /**
+   * Currently focused star index
+   */
+  focusedIndex: number | null;
+
+  /**
+   * Handle mouse enter on a star
+   */
+  handleMouseEnter: (starValue: number) => void;
+
+  /**
+   * Handle mouse leave from rating component
+   */
+  handleMouseLeave: () => void;
+
+  /**
+   * Handle click on a star
+   */
+  handleClick: (newValue: number) => void;
+
+  /**
+   * Handle keyboard navigation
+   */
+  handleKeyDown: (e: React.KeyboardEvent, index: number) => void;
+
+  /**
+   * Set focus on a specific star
+   */
+  setFocused: (index: number | null) => void;
+
+  /**
+   * Set hover value directly
+   */
+  setHoverValue: (value: number | null) => void;
+
+  /**
+   * Whether the component is in controlled mode
+   */
+  isControlled: boolean;
+}
+
+/**
+ * Hook for managing rating component state and interactions
+ */
+export const useRating = ({
+  value = 0,
+  maxValue = 5,
+  allowHalf = false,
+  readOnly = false,
+  onChange,
+}: UseRatingProps): UseRatingReturn => {
+  // Determine if component is in controlled mode
+  const isControlled = typeof onChange !== 'undefined';
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<number>(value);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+
+  // Use controlled or uncontrolled value
+  const currentValue = isControlled ? value : internalValue;
+
+  // Handle mouse enter on star
+  const handleMouseEnter = useCallback(
+    (starValue: number) => {
+      if (readOnly) return;
+      setHoverValue(starValue);
+    },
+    [readOnly]
+  );
+
+  // Handle mouse leave from rating component
+  const handleMouseLeave = useCallback(() => {
+    if (readOnly) return;
+    setHoverValue(null);
+  }, [readOnly]);
+
+  // Handle click on star
+  const handleClick = useCallback(
+    (newValue: number) => {
+      if (readOnly) return;
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+
+      onChange?.(newValue);
+    },
+    [readOnly, onChange, isControlled]
+  );
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent, index: number) => {
+      if (readOnly) return;
+
+      const step = allowHalf ? 0.5 : 1;
+      let newValue = currentValue;
+
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = Math.min(maxValue, currentValue + step);
+          e.preventDefault();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = Math.max(0, currentValue - step);
+          e.preventDefault();
+          break;
+        case 'Home':
+          newValue = 0;
+          e.preventDefault();
+          break;
+        case 'End':
+          newValue = maxValue;
+          e.preventDefault();
+          break;
+        case ' ':
+        case 'Enter':
+          newValue = index;
+          e.preventDefault();
+          break;
+        default:
+          return;
+      }
+
+      if (newValue !== currentValue) {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+      }
+    },
+    [currentValue, maxValue, allowHalf, readOnly, onChange, isControlled]
+  );
+
+  return {
+    currentValue,
+    hoverValue,
+    focusedIndex,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    setFocused: setFocusedIndex,
+    setHoverValue,
+    isControlled,
+  };
+};
+
+export default useRating;

package/src/lib/composables/useRiver.ts

@@ -0,0 +1,205 @@
+import { ReactNode } from 'react';
+import { RIVER } from '../constants/components';
+
+/**
+ * River content column interface
+ */
+export interface RiverContentColumn {
+  /**
+   * Column type (title or text)
+   */
+  type: 'title' | 'text';
+
+  /**
+   * Content for the column
+   */
+  content: ReactNode;
+}
+
+/**
+ * River properties interface
+ */
+export interface RiverProps {
+  /**
+   * Title of the river section
+   */
+  title?: ReactNode;
+
+  /**
+   * Text content (can be a string or array of paragraphs)
+   */
+  text?: string | string[];
+
+  /**
+   * Action buttons/links
+   */
+  actions?: ReactNode;
+
+  /**
+   * Image source URL
+   */
+  imageSrc?: string;
+
+  /**
+   * Image alt text
+   */
+  imageAlt?: string;
+
+  /**
+   * Whether to use the center layout
+   */
+  center?: boolean;
+
+  /**
+   * Whether to use the breakout layout
+   */
+  breakout?: boolean;
+
+  /**
+   * Whether to use the reverse layout (image on right)
+   */
+  reverse?: boolean;
+
+  /**
+   * Use content columns instead of simple title/text structure
+   */
+  contentColumns?: RiverContentColumn[];
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+
+  /**
+   * Background image source
+   */
+  backgroundImageSrc?: string;
+
+  /**
+   * Whether to show the background overlay
+   */
+  showOverlay?: boolean;
+
+  /**
+   * Custom width for the river content
+   */
+  contentWidth?: string;
+}
+
+/**
+ * River hook result interface
+ */
+interface UseRiverResult {
+  /**
+   * Generate river class names based on props
+   */
+  generateRiverClassNames: (baseClassName?: string) => string;
+
+  /**
+   * Generate content class names
+   */
+  generateContentClass: () => string;
+
+  /**
+   * Generate visual/image class names
+   */
+  generateVisualClass: () => string;
+
+  /**
+   * Determine if the river has a background image
+   */
+  hasBackgroundImage: boolean;
+
+  /**
+   * Determine if the river has a foreground image
+   */
+  hasForegroundImage: boolean;
+
+  /**
+   * Convert text to array if it's a string
+   */
+  textContent: string[];
+}
+
+/**
+ * Hook for River component functionality
+ * @param initialProps - Initial river props
+ * @returns River methods and state
+ */
+export function useRiver(initialProps?: Partial<RiverProps>): UseRiverResult {
+  const defaultProps: Partial<RiverProps> = {
+    center: false,
+    breakout: false,
+    reverse: false,
+    imageAlt: 'Image',
+    showOverlay: true,
+    ...initialProps,
+  };
+
+  /**
+   * Check if the river has a background image
+   */
+  const hasBackgroundImage = !!defaultProps.backgroundImageSrc;
+
+  /**
+   * Check if the river has a foreground image
+   */
+  const hasForegroundImage = !!defaultProps.imageSrc;
+
+  /**
+   * Convert text to array if it's a string
+   */
+  const textContent =
+    typeof defaultProps.text === 'string' ? [defaultProps.text] : defaultProps.text || [];
+
+  /**
+   * Generate river class names based on props
+   * @param baseClassName - Additional class names
+   * @returns Combined class names string
+   */
+  const generateRiverClassNames = (baseClassName: string = ''): string => {
+    const classes = [RIVER.SELECTORS.RIVER.replace('.', '')];
+
+    // Add layout classes
+    if (defaultProps.center) {
+      classes.push(RIVER.CLASSES.CENTER);
+    }
+
+    if (defaultProps.breakout) {
+      classes.push(RIVER.CLASSES.BREAKOUT);
+    }
+
+    if (defaultProps.reverse) {
+      classes.push(RIVER.CLASSES.REVERSE);
+    }
+
+    if (baseClassName) {
+      classes.push(baseClassName);
+    }
+
+    return classes.join(' ');
+  };
+
+  /**
+   * Generate content class names
+   */
+  const generateContentClass = (): string => {
+    return RIVER.SELECTORS.CONTENT.replace('.', '');
+  };
+
+  /**
+   * Generate visual/image class names
+   */
+  const generateVisualClass = (): string => {
+    return RIVER.SELECTORS.VISUAL.replace('.', '');
+  };
+
+  return {
+    generateRiverClassNames,
+    generateContentClass,
+    generateVisualClass,
+    hasBackgroundImage,
+    hasForegroundImage,
+    textContent,
+  };
+}

package/src/lib/composables/useSelect.ts

@@ -0,0 +1,52 @@
+import { SelectProps } from '../types/components';
+import { SELECT } from '../constants/components';
+
+/**
+ * Select state and functionality
+ * @param initialProps - Initial select properties
+ * @returns Select state and methods
+ */
+export function useSelect(initialProps?: Partial<SelectProps>) {
+  // Default select properties
+  const defaultProps: Partial<SelectProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate select class based on properties
+   * @param props - Select properties
+   * @returns Class string
+   */
+  const generateSelectClass = (props: Partial<SelectProps>): string => {
+    const {
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? SELECT.CLASSES.SMALL : SELECT.CLASSES.LARGE;
+
+    let validationClass = '';
+    if (invalid) {
+      validationClass = SELECT.CLASSES.INVALID;
+    } else if (valid) {
+      validationClass = SELECT.CLASSES.VALID;
+    }
+
+    const disabledClass = disabled ? SELECT.CLASSES.DISABLED : '';
+
+    return `${SELECT.CLASSES.BASE} ${sizeClass} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateSelectClass,
+  };
+}