rn-iconify 1.0.0 → 2.0.0

package/src/animated/useIconAnimation.ts

@@ -0,0 +1,383 @@
+/**
+ * useIconAnimation - Hook for managing icon animations
+ * Handles Animated values, timing, and animation lifecycle
+ */
+
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { Animated } from 'react-native';
+import type {
+  AnimationType,
+  AnimationState,
+  AnimationControls,
+  ResolvedAnimationConfig,
+  AnimationEasing,
+} from './types';
+import { resolveAnimation, getEasingFunction } from './presets';
+
+interface UseIconAnimationOptions {
+  /**
+   * Animation configuration
+   */
+  animation?: AnimationType;
+
+  /**
+   * Duration override (ms)
+   */
+  duration?: number;
+
+  /**
+   * Loop override
+   */
+  loop?: boolean;
+
+  /**
+   * Easing override
+   */
+  easing?: AnimationEasing;
+
+  /**
+   * Delay before animation starts (ms)
+   */
+  delay?: number;
+
+  /**
+   * Whether to start automatically
+   * @default true
+   */
+  autoPlay?: boolean;
+
+  /**
+   * Callback when animation completes
+   */
+  onComplete?: () => void;
+}
+
+interface UseIconAnimationReturn extends AnimationControls {
+  /**
+   * Animated style to apply to the icon
+   */
+  animatedStyle: {
+    transform?: Array<
+      | { rotate: Animated.AnimatedInterpolation<string> }
+      | { scale: Animated.Value }
+      | { translateX: Animated.Value }
+      | { translateY: Animated.Value }
+    >;
+    opacity?: Animated.Value;
+  };
+
+  /**
+   * Whether animation is enabled
+   */
+  hasAnimation: boolean;
+}
+
+/**
+ * Hook for managing icon animations
+ */
+export function useIconAnimation(options: UseIconAnimationOptions = {}): UseIconAnimationReturn {
+  const { animation, duration, loop, easing, delay = 0, autoPlay = true, onComplete } = options;
+
+  // Animation state
+  const [state, setState] = useState<AnimationState>('idle');
+  const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+  const mountedRef = useRef(true);
+
+  // Animated values
+  const rotateValue = useRef(new Animated.Value(0)).current;
+  const scaleValue = useRef(new Animated.Value(1)).current;
+  const opacityValue = useRef(new Animated.Value(1)).current;
+  const translateXValue = useRef(new Animated.Value(0)).current;
+  const translateYValue = useRef(new Animated.Value(0)).current;
+
+  // Resolve animation config
+  const config = useMemo<ResolvedAnimationConfig | null>(() => {
+    if (!animation) return null;
+    return resolveAnimation(animation, { duration, loop, easing, delay });
+  }, [animation, duration, loop, easing, delay]);
+
+  // Create animation based on config
+  const createAnimation = useCallback((): Animated.CompositeAnimation | null => {
+    if (!config) return null;
+
+    const easingFn = getEasingFunction(config.easing);
+    const isAlternate =
+      config.direction === 'alternate' || config.direction === 'alternate-reverse';
+    const isReverse = config.direction === 'reverse' || config.direction === 'alternate-reverse';
+
+    let fromValue: number;
+    let toValue: number;
+    let animatedValue: Animated.Value;
+
+    switch (config.type) {
+      case 'rotate':
+        animatedValue = rotateValue;
+        fromValue = isReverse ? (config.to as number) : (config.from as number);
+        toValue = isReverse ? (config.from as number) : (config.to as number);
+        break;
+
+      case 'scale':
+        animatedValue = scaleValue;
+        fromValue = isReverse ? (config.to as number) : (config.from as number);
+        toValue = isReverse ? (config.from as number) : (config.to as number);
+        break;
+
+      case 'opacity':
+        animatedValue = opacityValue;
+        fromValue = isReverse ? (config.to as number) : (config.from as number);
+        toValue = isReverse ? (config.from as number) : (config.to as number);
+        break;
+
+      case 'translate': {
+        const toT = config.to as { x: number; y: number };
+
+        // Create sequence for shake effect
+        const shakeSequence = Animated.sequence([
+          Animated.timing(translateXValue, {
+            toValue: toT.x,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateXValue, {
+            toValue: -toT.x,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateXValue, {
+            toValue: toT.x * 0.6,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateXValue, {
+            toValue: -toT.x * 0.6,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateXValue, {
+            toValue: toT.x * 0.3,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateXValue, {
+            toValue: 0,
+            duration: config.duration / 6,
+            easing: easingFn,
+            useNativeDriver: true,
+          }),
+        ]);
+
+        if (config.loop && config.iterations === -1) {
+          return Animated.loop(shakeSequence);
+        }
+        return shakeSequence;
+      }
+
+      case 'sequence':
+        // For custom sequences, return null and handle separately
+        return null;
+
+      default:
+        return null;
+    }
+
+    // Reset to starting value
+    animatedValue.setValue(fromValue);
+
+    // Create the animation
+    let anim: Animated.CompositeAnimation;
+
+    if (isAlternate) {
+      // Alternate: go to target then back
+      anim = Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: toValue,
+          duration: config.duration / 2,
+          easing: easingFn,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: fromValue,
+          duration: config.duration / 2,
+          easing: easingFn,
+          useNativeDriver: true,
+        }),
+      ]);
+    } else {
+      anim = Animated.timing(animatedValue, {
+        toValue: toValue,
+        duration: config.duration,
+        easing: easingFn,
+        useNativeDriver: true,
+      });
+    }
+
+    // Apply looping
+    if (config.loop && config.iterations === -1) {
+      return Animated.loop(anim);
+    } else if (config.iterations > 1) {
+      return Animated.loop(anim, { iterations: config.iterations });
+    }
+
+    return anim;
+  }, [config, rotateValue, scaleValue, opacityValue, translateXValue]);
+
+  // Start animation
+  const start = useCallback(() => {
+    if (!config) return;
+
+    // Stop any existing animation
+    if (animationRef.current) {
+      animationRef.current.stop();
+    }
+
+    // Apply delay if specified
+    const startAnimation = () => {
+      const anim = createAnimation();
+      if (!anim) return;
+
+      animationRef.current = anim;
+      // Use queueMicrotask to defer state update (React 19 compatibility)
+      queueMicrotask(() => {
+        if (mountedRef.current) {
+          setState('running');
+        }
+      });
+
+      anim.start(({ finished }) => {
+        if (mountedRef.current) {
+          // Use queueMicrotask to defer state update (React 19 compatibility)
+          queueMicrotask(() => {
+            if (mountedRef.current) {
+              if (finished) {
+                setState('completed');
+                onComplete?.();
+              } else {
+                setState('idle');
+              }
+            }
+          });
+        }
+      });
+    };
+
+    if (config.delay > 0) {
+      setTimeout(startAnimation, config.delay);
+    } else {
+      startAnimation();
+    }
+  }, [config, createAnimation, onComplete]);
+
+  // Stop animation
+  const stop = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
+    }
+    // Use queueMicrotask to defer state update (React 19 compatibility)
+    queueMicrotask(() => {
+      if (mountedRef.current) {
+        setState('idle');
+      }
+    });
+  }, []);
+
+  // Pause animation (not directly supported, we stop it)
+  const pause = useCallback(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+    }
+    // Use queueMicrotask to defer state update (React 19 compatibility)
+    queueMicrotask(() => {
+      if (mountedRef.current) {
+        setState('paused');
+      }
+    });
+  }, []);
+
+  // Resume animation
+  const resume = useCallback(() => {
+    if (state === 'paused') {
+      start();
+    }
+  }, [state, start]);
+
+  // Reset animation
+  const reset = useCallback(() => {
+    stop();
+    rotateValue.setValue(0);
+    scaleValue.setValue(1);
+    opacityValue.setValue(1);
+    translateXValue.setValue(0);
+    translateYValue.setValue(0);
+  }, [stop, rotateValue, scaleValue, opacityValue, translateXValue, translateYValue]);
+
+  // Auto-play on mount
+  useEffect(() => {
+    mountedRef.current = true;
+
+    if (animation && autoPlay) {
+      start();
+    }
+
+    return () => {
+      mountedRef.current = false;
+      stop();
+    };
+  }, [animation, autoPlay, start, stop]);
+
+  // Build animated style
+  const animatedStyle = useMemo(() => {
+    if (!config) return {};
+
+    switch (config.type) {
+      case 'rotate':
+        return {
+          transform: [
+            {
+              rotate: rotateValue.interpolate({
+                inputRange: [0, 360],
+                outputRange: ['0deg', '360deg'],
+              }),
+            },
+          ],
+        };
+
+      case 'scale':
+        return {
+          transform: [{ scale: scaleValue }],
+        };
+
+      case 'opacity':
+        return {
+          opacity: opacityValue,
+        };
+
+      case 'translate':
+        return {
+          transform: [{ translateX: translateXValue }, { translateY: translateYValue }],
+        };
+
+      default:
+        return {};
+    }
+  }, [config, rotateValue, scaleValue, opacityValue, translateXValue, translateYValue]);
+
+  return {
+    animatedStyle,
+    hasAnimation: !!animation,
+    state,
+    isAnimating: state === 'running',
+    start,
+    stop,
+    pause,
+    resume,
+    reset,
+  };
+}
+
+export default useIconAnimation;

package/src/babel/ast-utils.ts

@@ -0,0 +1,219 @@
+/**
+ * AST Utilities
+ * Helper functions for working with Babel AST nodes
+ */
+
+import type * as BabelTypes from '@babel/types';
+import type { NodePath } from '@babel/core';
+
+/**
+ * Get the component name from a JSX opening element
+ * Handles: <Mdi />, <Heroicons />, etc.
+ */
+export function getComponentName(
+  node: BabelTypes.JSXOpeningElement,
+  t: typeof BabelTypes
+): string | null {
+  const { name } = node;
+
+  // Simple identifier: <Mdi />
+  if (t.isJSXIdentifier(name)) {
+    return name.name;
+  }
+
+  // Member expression: <Icons.Mdi /> - not supported for now
+  if (t.isJSXMemberExpression(name)) {
+    return null;
+  }
+
+  return null;
+}
+
+/**
+ * Get the value of the 'name' attribute from a JSX element
+ * Handles: name="home", name='home'
+ * Returns null for dynamic values: name={iconName}
+ */
+export function getNameAttribute(
+  node: BabelTypes.JSXOpeningElement,
+  t: typeof BabelTypes
+): string | null {
+  for (const attr of node.attributes) {
+    // Skip spread attributes: {...props}
+    if (t.isJSXSpreadAttribute(attr)) {
+      continue;
+    }
+
+    // Check if it's the 'name' attribute
+    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: 'name' })) {
+      const { value } = attr;
+
+      // String literal: name="home"
+      if (t.isStringLiteral(value)) {
+        return value.value;
+      }
+
+      // JSX expression container: name={"home"} or name={'home'}
+      if (t.isJSXExpressionContainer(value)) {
+        const { expression } = value;
+
+        // String literal inside expression: name={"home"}
+        if (t.isStringLiteral(expression)) {
+          return expression.value;
+        }
+
+        // Template literal without expressions: name={`home`}
+        if (t.isTemplateLiteral(expression) && expression.expressions.length === 0) {
+          return expression.quasis[0]?.value.raw || null;
+        }
+
+        // Dynamic value - return null
+        return null;
+      }
+
+      return null;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Check if a call expression is calling a specific function by name
+ * Handles: prefetchIcons([...])
+ */
+export function isCallTo(
+  path: NodePath<BabelTypes.CallExpression>,
+  functionName: string,
+  t: typeof BabelTypes
+): boolean {
+  const { callee } = path.node;
+
+  // Direct function call: prefetchIcons()
+  if (t.isIdentifier(callee) && callee.name === functionName) {
+    return true;
+  }
+
+  // Member expression not supported: something.prefetchIcons()
+  return false;
+}
+
+/**
+ * Extract string values from an array expression
+ * Handles: ['mdi:home', 'mdi:settings']
+ * Skips dynamic values
+ */
+export function extractArrayStrings(
+  node: BabelTypes.Node | null | undefined,
+  t: typeof BabelTypes
+): string[] {
+  if (!node || !t.isArrayExpression(node)) {
+    return [];
+  }
+
+  const strings: string[] = [];
+
+  for (const element of node.elements) {
+    if (!element) continue;
+
+    // String literal
+    if (t.isStringLiteral(element)) {
+      strings.push(element.value);
+    }
+
+    // Template literal without expressions
+    if (t.isTemplateLiteral(element) && element.expressions.length === 0) {
+      const value = element.quasis[0]?.value.raw;
+      if (value) {
+        strings.push(value);
+      }
+    }
+  }
+
+  return strings;
+}
+
+/**
+ * Get location info from a node
+ */
+export function getNodeLocation(node: BabelTypes.Node): { line: number; column: number } {
+  return {
+    line: node.loc?.start.line ?? 0,
+    column: node.loc?.start.column ?? 0,
+  };
+}
+
+/**
+ * Check if an icon name matches a pattern (supports wildcards)
+ * @example matchesPattern('mdi:home', 'mdi:*') => true
+ * @example matchesPattern('mdi:home', 'mdi:home') => true
+ * @example matchesPattern('mdi:home', 'heroicons:*') => false
+ */
+export function matchesPattern(iconName: string, pattern: string): boolean {
+  // Exact match
+  if (pattern === iconName) {
+    return true;
+  }
+
+  // Wildcard pattern
+  if (pattern.endsWith(':*')) {
+    const prefix = pattern.slice(0, -2);
+    return iconName.startsWith(prefix + ':');
+  }
+
+  // Glob-style pattern with * in the middle
+  if (pattern.includes('*')) {
+    const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$');
+    return regex.test(iconName);
+  }
+
+  return false;
+}
+
+/**
+ * Check if an icon should be included based on include/exclude patterns
+ */
+export function shouldIncludeIcon(
+  iconName: string,
+  include?: string[],
+  exclude?: string[]
+): boolean {
+  // Check exclude first
+  if (exclude?.some((pattern) => matchesPattern(iconName, pattern))) {
+    return false;
+  }
+
+  // If no include patterns, include everything not excluded
+  if (!include || include.length === 0) {
+    return true;
+  }
+
+  // Check if matches any include pattern
+  return include.some((pattern) => matchesPattern(iconName, pattern));
+}
+
+/**
+ * Validate icon name format
+ * Valid format: prefix:name (e.g., mdi:home)
+ */
+export function isValidIconName(name: string): boolean {
+  if (!name || typeof name !== 'string') {
+    return false;
+  }
+
+  const parts = name.split(':');
+  if (parts.length !== 2) {
+    return false;
+  }
+
+  const [prefix, iconName] = parts;
+
+  // Both parts must be non-empty
+  if (!prefix || !iconName) {
+    return false;
+  }
+
+  // Basic validation: alphanumeric and hyphens
+  const validPattern = /^[a-z0-9-]+$/i;
+  return validPattern.test(prefix) && validPattern.test(iconName);
+}