react-native-pro-accordion 1.0.1

package/src/core/AccordionRef.js

@@ -0,0 +1,69 @@
+export class AccordionRefImpl {
+  constructor(expandedValuesRef, setExpandedValues, mode, readOnly) {
+    this.expandedValuesRef = expandedValuesRef;
+    this.setExpandedValues = setExpandedValues;
+    this.mode = mode;
+    this.readOnly = readOnly;
+  }
+
+  open = (value) => {
+    if (this.readOnly) return;
+
+    const currentValues = this.expandedValuesRef.current;
+    if (currentValues.includes(value)) return;
+
+    let newValues;
+    if (this.mode === "single") {
+      newValues = [value];
+    } else {
+      newValues = [...currentValues, value];
+    }
+
+    this.setExpandedValues(newValues);
+  };
+
+  close = (value) => {
+    if (this.readOnly) return;
+
+    const currentValues = this.expandedValuesRef.current;
+    if (!currentValues.includes(value)) return;
+
+    const newValues = currentValues.filter((v) => v !== value);
+    this.setExpandedValues(newValues);
+  };
+
+  toggle = (value) => {
+    if (this.readOnly) return;
+
+    const currentValues = this.expandedValuesRef.current;
+    if (currentValues.includes(value)) {
+      this.close(value);
+    } else {
+      this.open(value);
+    }
+  };
+
+  expandAll = () => {
+    if (this.readOnly || this.mode !== "multiple") return;
+    console.warn("expandAll requires all item values to be known");
+  };
+
+  collapseAll = () => {
+    if (this.readOnly) return;
+    this.setExpandedValues([]);
+  };
+
+  toggleAll = () => {
+    if (this.readOnly || this.mode !== "multiple") return;
+    const currentValues = this.expandedValuesRef.current;
+    if (currentValues.length > 0) {
+      this.collapseAll();
+    } else {
+      this.expandAll();
+    }
+  };
+
+  getExpandedItems = () => {
+    return [...this.expandedValuesRef.current];
+  };
+}

package/src/core/types.js

@@ -0,0 +1,133 @@
+/**
+ * @typedef {'timing' | 'spring'} AnimationType
+ */
+
+/**
+ * @typedef {Object} TimingAnimationConfig
+ * @property {'timing'} type
+ * @property {number} [duration]
+ * @property {Function} [easing]
+ */
+
+/**
+ * @typedef {Object} SpringAnimationConfig
+ * @property {'spring'} type
+ * @property {number} [damping]
+ * @property {number} [mass]
+ * @property {number} [stiffness]
+ * @property {boolean} [overshootClamping]
+ * @property {number} [restSpeedThreshold]
+ * @property {number} [restDisplacementThreshold]
+ */
+
+/**
+ * @typedef {TimingAnimationConfig | SpringAnimationConfig} AnimationConfig
+ */
+
+/**
+ * @typedef {Object} AccordionTheme
+ * @property {Object} colors
+ * @property {string} colors.background
+ * @property {string} colors.surface
+ * @property {string} colors.primary
+ * @property {string} colors.text
+ * @property {string} colors.textSecondary
+ * @property {string} colors.border
+ * @property {string} colors.disabled
+ * @property {string} colors.icon
+ * @property {Object} spacing
+ * @property {number} spacing.xs
+ * @property {number} spacing.sm
+ * @property {number} spacing.md
+ * @property {number} spacing.lg
+ * @property {number} spacing.xl
+ * @property {Object} typography
+ * @property {Object} typography.header
+ * @property {Object} typography.content
+ * @property {Object} borderRadius
+ * @property {number} borderRadius.sm
+ * @property {number} borderRadius.md
+ * @property {number} borderRadius.lg
+ */
+
+/**
+ * @typedef {Object} AccordionItemProps
+ * @property {string} value - Unique identifier for the item
+ * @property {React.ReactNode | Function} header - Header content or render function
+ * @property {React.ReactNode | Function} children - Content to display when expanded
+ * @property {boolean} [disabled] - Whether the item is disabled
+ * @property {object} [style] - Custom style overrides
+ * @property {object} [headerStyle] - Custom header style
+ * @property {object} [contentStyle] - Custom content style
+ * @property {any} [data] - Custom data attached to item
+ */
+
+/**
+ * @typedef {Object} AccordionEventHandlers
+ * @property {Function} [onOpen]
+ * @property {Function} [onClose]
+ * @property {Function} [onToggle]
+ * @property {Function} [onAnimationStart]
+ * @property {Function} [onAnimationEnd]
+ * @property {Function} [onStateChange]
+ */
+
+/**
+ * @typedef {Object} AccordionProps
+ * @property {React.ReactNode} children - Array of accordion items
+ * @property {string[]} [value] - Controlled expanded values
+ * @property {string[]} [defaultValue] - Initial expanded values (uncontrolled)
+ * @property {Function} [onChange] - Callback when expanded values change
+ * @property {'single' | 'multiple'} [mode] - Expand mode
+ * @property {boolean} [readOnly] - Whether accordion is in read-only mode
+ * @property {AnimationConfig} [animation] - Animation configuration
+ * @property {Function} [renderIcon] - Custom renderer for expand/collapse icon
+ * @property {'left' | 'right'} [iconPosition] - Icon position
+ * @property {boolean} [showSeparators] - Whether to show item separators
+ * @property {React.ReactNode} [separatorComponent] - Custom separator component
+ * @property {object} [separatorStyle] - Separator style
+ * @property {boolean} [stickyHeaders] - Enable sticky headers
+ * @property {boolean} [lazyRender] - Lazy render content
+ * @property {Partial<AccordionTheme>} [theme] - Custom theme
+ * @property {boolean} [darkMode] - Enable dark mode
+ * @property {string} [accessibilityLabel] - Accessibility label
+ * @property {string} [testID] - Test ID for testing
+ * @property {Function} [onOpen]
+ * @property {Function} [onClose]
+ * @property {Function} [onToggle]
+ * @property {Function} [onAnimationStart]
+ * @property {Function} [onAnimationEnd]
+ * @property {Function} [onStateChange]
+ */
+
+/**
+ * @typedef {Object} AccordionRef
+ * @property {Function} open - Open a specific item by value
+ * @property {Function} close - Close a specific item by value
+ * @property {Function} toggle - Toggle a specific item by value
+ * @property {Function} expandAll - Open all items (only works in multiple mode)
+ * @property {Function} collapseAll - Close all items
+ * @property {Function} toggleAll - Toggle all items
+ * @property {Function} getExpandedItems - Get currently expanded items
+ */
+
+/**
+ * @typedef {Object} AccordionContextType
+ * @property {string} mode
+ * @property {boolean} readOnly
+ * @property {AnimationConfig} animationConfig
+ * @property {Function} [renderIcon]
+ * @property {string} iconPosition
+ * @property {boolean} showSeparators
+ * @property {boolean} lazyRender
+ * @property {AccordionTheme} [theme]
+ * @property {boolean} darkMode
+ * @property {Function} registerItem
+ * @property {Function} unregisterItem
+ * @property {Function} toggleItem
+ * @property {Function} isExpanded
+ * @property {Function} getItemData
+ * @property {Function} [onEvent]
+ */
+
+export {};

package/src/hooks/useAccordion.js

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export function useAccordion(defaultIndex = null) {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+
+  const toggle = (index) => {
+    setActiveIndex((prev) => (prev === index ? null : index));
+  };
+
+  return {
+    activeIndex,
+    toggle,
+  };
+}

package/src/hooks/useAccordionAccessibility.js

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { Platform } from "react-native";
+
+export const useAccordionAccessibility = (props) => {
+  const { expanded, disabled, label } = props;
+
+  const accessibilityProps = useMemo(() => {
+    const baseProps = {
+      accessible: true,
+      accessibilityRole: "button",
+      accessibilityState: {
+        expanded,
+        disabled,
+      },
+      accessibilityLabel: label || "Toggle accordion",
+    };
+
+    if (Platform.OS === "web") {
+      return {
+        ...baseProps,
+        "aria-expanded": expanded,
+        "aria-disabled": disabled,
+      };
+    }
+
+    return baseProps;
+  }, [expanded, disabled, label]);
+
+  return { accessibilityProps };
+};

package/src/hooks/useAccordionAnimation.js

@@ -0,0 +1,165 @@
+import { useRef, useEffect, useCallback } from "react";
+import {
+  useSharedValue,
+  withTiming,
+  withSpring,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+
+/**
+ * Hook for managing accordion animations
+ * @param {Object} options
+ * @param {boolean} options.expanded - Whether item is expanded
+ * @param {number} options.contentHeight - Height of the content
+ * @param {Object} options.animationConfig - Animation configuration
+ * @param {Function} options.onAnimationStart - Callback when animation starts
+ * @param {Function} options.onAnimationEnd - Callback when animation ends
+ * @returns {Object} Animation values and utilities
+ */
+export const useAccordionAnimation = ({
+  expanded,
+  contentHeight,
+  animationConfig,
+  onAnimationStart,
+  onAnimationEnd,
+}) => {
+  const height = useSharedValue(expanded ? contentHeight : 0);
+  const opacity = useSharedValue(expanded ? 1 : 0);
+  const rotation = useSharedValue(expanded ? 1 : 0);
+  const isAnimating = useRef(false);
+
+  const getAnimatedHeight = useCallback(
+    (toValue) => {
+      if (animationConfig.type === "spring") {
+        return withSpring(toValue, {
+          damping: animationConfig.damping ?? 10,
+          mass: animationConfig.mass ?? 1,
+          stiffness: animationConfig.stiffness ?? 100,
+          overshootClamping: animationConfig.overshootClamping ?? false,
+          restSpeedThreshold: animationConfig.restSpeedThreshold ?? 0.01,
+          restDisplacementThreshold:
+            animationConfig.restDisplacementThreshold ?? 0.01,
+        });
+      } else {
+        return withTiming(toValue, {
+          duration: animationConfig.duration ?? 300,
+          easing: animationConfig.easing ?? Easing.inOut(Easing.ease),
+        });
+      }
+    },
+    [animationConfig],
+  );
+
+  const getAnimatedOpacity = useCallback(
+    (toValue) => {
+      if (animationConfig.type === "spring") {
+        return withSpring(toValue, {
+          damping: animationConfig.damping ?? 10,
+          mass: animationConfig.mass ?? 1,
+          stiffness: animationConfig.stiffness ?? 100,
+        });
+      } else {
+        return withTiming(toValue, {
+          duration: (animationConfig.duration ?? 300) * 0.6,
+          easing: animationConfig.easing ?? Easing.inOut(Easing.ease),
+        });
+      }
+    },
+    [animationConfig],
+  );
+
+  const getAnimatedRotation = useCallback(
+    (toValue) => {
+      const targetRotation = toValue ? 1 : 0;
+      if (animationConfig.type === "spring") {
+        return withSpring(targetRotation, {
+          damping: animationConfig.damping ?? 10,
+          mass: animationConfig.mass ?? 1,
+          stiffness: animationConfig.stiffness ?? 100,
+        });
+      } else {
+        return withTiming(targetRotation, {
+          duration: animationConfig.duration ?? 300,
+          easing: animationConfig.easing ?? Easing.inOut(Easing.ease),
+        });
+      }
+    },
+    [animationConfig],
+  );
+
+  const animate = useCallback(() => {
+    if (onAnimationStart) {
+      runOnJS(onAnimationStart)();
+    }
+
+    isAnimating.current = true;
+    const toHeight = expanded ? contentHeight : 0;
+    const toOpacity = expanded ? 1 : 0;
+    const toRotation = expanded ? 1 : 0;
+
+    height.value = getAnimatedHeight(toHeight);
+    opacity.value = getAnimatedOpacity(toOpacity);
+    rotation.value = getAnimatedRotation(toRotation);
+
+    // Set up animation end callback
+    const timeoutId = setTimeout(
+      () => {
+        if (isAnimating.current && onAnimationEnd) {
+          runOnJS(onAnimationEnd)();
+          isAnimating.current = false;
+        }
+      },
+      animationConfig.type === "spring"
+        ? 500
+        : (animationConfig.duration ?? 300),
+    );
+
+    return () => clearTimeout(timeoutId);
+  }, [
+    expanded,
+    contentHeight,
+    animationConfig,
+    height,
+    opacity,
+    rotation,
+    getAnimatedHeight,
+    getAnimatedOpacity,
+    getAnimatedRotation,
+    onAnimationStart,
+    onAnimationEnd,
+  ]);
+
+  useEffect(() => {
+    const cleanup = animate();
+    return () => {
+      if (cleanup) cleanup();
+      isAnimating.current = false;
+    };
+  }, [animate]);
+
+  const resetAnimation = useCallback(() => {
+    height.value = 0;
+    opacity.value = 0;
+    rotation.value = 0;
+    isAnimating.current = false;
+  }, [height, opacity, rotation]);
+
+  const getRotatedStyle = useCallback(() => {
+    "worklet";
+    return {
+      transform: [{ rotate: `${rotation.value * 90}deg` }],
+    };
+  }, [rotation]);
+
+  return {
+    height,
+    opacity,
+    rotation,
+    isAnimating: isAnimating.current,
+    animatedHeightStyle: { height },
+    animatedOpacityStyle: { opacity },
+    animatedRotationStyle: getRotatedStyle,
+    resetAnimation,
+  };
+};

package/src/hooks/useAccordionKeyboard.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+
+export const useAccordionKeyboard = (props) => {
+  const { onPress, disabled = false } = props;
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+
+    const handleKeyPress = (event) => {
+      if (disabled) return;
+
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onPress();
+      }
+    };
+
+    const element = elementRef.current;
+    if (element) {
+      element.addEventListener("keydown", handleKeyPress);
+    }
+
+    return () => {
+      if (element) {
+        element.removeEventListener("keydown", handleKeyPress);
+      }
+    };
+  }, [onPress, disabled]);
+
+  const keyboardProps =
+    Platform.OS === "web"
+      ? { tabIndex: disabled ? -1 : 0, ref: elementRef }
+      : {};
+
+  return { keyboardProps };
+};

package/src/hooks/useAccordionState.js

@@ -0,0 +1,119 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+
+/**
+ * Hook for managing accordion state with controlled/uncontrolled modes
+ * @param {Object} options
+ * @param {string[]} options.value - Controlled expanded values
+ * @param {string[]} options.defaultValue - Default expanded values for uncontrolled mode
+ * @param {Function} options.onChange - Callback when expanded values change
+ * @param {string} options.mode - 'single' or 'multiple' mode
+ * @returns {Object} State management utilities
+ */
+export const useAccordionState = ({
+  value,
+  defaultValue = [],
+  onChange,
+  mode = "multiple",
+}) => {
+  const isControlled = value !== undefined;
+  const [internalExpandedValues, setInternalExpandedValues] =
+    useState(defaultValue);
+
+  const expandedValues = isControlled ? value : internalExpandedValues;
+  const expandedValuesRef = useRef(expandedValues);
+  expandedValuesRef.current = expandedValues;
+
+  const setExpandedValues = useCallback(
+    (newValues) => {
+      if (!isControlled) {
+        setInternalExpandedValues(newValues);
+      }
+      onChange?.(newValues);
+    },
+    [isControlled, onChange],
+  );
+
+  const isExpanded = useCallback(
+    (itemValue) => {
+      return expandedValues.includes(itemValue);
+    },
+    [expandedValues],
+  );
+
+  const openItem = useCallback(
+    (itemValue) => {
+      if (expandedValues.includes(itemValue)) return;
+
+      let newValues;
+      if (mode === "single") {
+        newValues = [itemValue];
+      } else {
+        newValues = [...expandedValues, itemValue];
+      }
+
+      setExpandedValues(newValues);
+      return newValues;
+    },
+    [expandedValues, mode, setExpandedValues],
+  );
+
+  const closeItem = useCallback(
+    (itemValue) => {
+      if (!expandedValues.includes(itemValue)) return;
+
+      const newValues = expandedValues.filter((v) => v !== itemValue);
+      setExpandedValues(newValues);
+      return newValues;
+    },
+    [expandedValues, setExpandedValues],
+  );
+
+  const toggleItem = useCallback(
+    (itemValue) => {
+      if (expandedValues.includes(itemValue)) {
+        return closeItem(itemValue);
+      } else {
+        return openItem(itemValue);
+      }
+    },
+    [expandedValues, openItem, closeItem],
+  );
+
+  const expandAll = useCallback(() => {
+    if (mode !== "multiple") return;
+    // Note: This requires access to all registered items
+    console.warn("expandAll requires all item values to be accessible");
+  }, [mode]);
+
+  const collapseAll = useCallback(() => {
+    setExpandedValues([]);
+  }, [setExpandedValues]);
+
+  const toggleAll = useCallback(() => {
+    if (mode !== "multiple") return;
+    if (expandedValues.length > 0) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [mode, expandedValues.length, collapseAll, expandAll]);
+
+  const getExpandedItems = useCallback(() => {
+    return [...expandedValues];
+  }, [expandedValues]);
+
+  return {
+    expandedValues,
+    expandedValuesRef,
+    setExpandedValues,
+    isExpanded,
+    openItem,
+    closeItem,
+    toggleItem,
+    expandAll,
+    collapseAll,
+    toggleAll,
+    getExpandedItems,
+    isControlled,
+  };
+};

package/src/index.js

@@ -0,0 +1,56 @@
+// src/index.js
+// export { Accordion } from "./Accordion";
+// export { AccordionItem } from "./AccordionItem";
+
+// Main components
+export { Accordion } from "./components/Accordion";
+export { AccordionItem } from "./components/AccordionItem";
+export { AccordionContent } from "./components/AccordionContent";
+export {
+  AccordionSeparator,
+  NestedAccordionSeparator,
+  DashedSeparator,
+  GradientSeparator,
+} from "./components/AccordionSeparator";
+
+// Context
+export { useAccordion, AccordionContext } from "./core/AccordionContext";
+
+// Hooks
+export { useAccordionAccessibility } from "./hooks/useAccordionAccessibility";
+export { useAccordionKeyboard } from "./hooks/useAccordionKeyboard";
+export { useAccordionState } from "./hooks/useAccordionState";
+export { useAccordionAnimation } from "./hooks/useAccordionAnimation";
+
+// Theme
+export { defaultLightTheme, defaultDarkTheme } from "./theme/defaultTheme";
+export { ThemeProvider, useTheme } from "./theme/ThemeContext";
+
+// Utilities
+export { getAnimatedHeight, getAnimatedOpacity } from "./utils/animations";
+
+export {
+  validateAnimationConfig,
+  validateAccordionMode,
+} from "./utils/validators";
+
+export {
+  useContentHeight,
+  useMultipleContentHeights,
+  animateLayout,
+  scrollToAccordionItem,
+  getElementPosition,
+} from "./utils/layout";
+
+// Re-export types for JSDoc (for documentation purposes)
+/**
+ * @typedef {import('./core/types').AccordionProps} AccordionProps
+ * @typedef {import('./core/types').AccordionItemProps} AccordionItemProps
+ * @typedef {import('./core/types').AccordionRef} AccordionRef
+ * @typedef {import('./core/types').AccordionTheme} AccordionTheme
+ * @typedef {import('./core/types').AnimationConfig} AnimationConfig
+ * @typedef {import('./core/types').TimingAnimationConfig} TimingAnimationConfig
+ * @typedef {import('./core/types').SpringAnimationConfig} SpringAnimationConfig
+ * @typedef {import('./core/types').AnimationType} AnimationType
+ * @typedef {import('./core/types').AccordionEventHandlers} AccordionEventHandlers
+ */

package/src/theme/ThemeContext.js

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { defaultLightTheme, defaultDarkTheme } from "./defaultTheme";
+
+const ThemeContext = createContext(undefined);
+
+export const ThemeProvider = ({
+  children,
+  theme: customTheme,
+  darkMode = false,
+  onDarkModeChange,
+}) => {
+  const baseTheme = darkMode ? defaultDarkTheme : defaultLightTheme;
+
+  const theme = useMemo(
+    () => ({
+      ...baseTheme,
+      ...customTheme,
+      colors: { ...baseTheme.colors, ...customTheme?.colors },
+    }),
+    [baseTheme, customTheme],
+  );
+
+  const setDarkMode = (dark) => {
+    onDarkModeChange?.(dark);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, darkMode, setDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};