react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.10

package/components/IconButton/IconButton.tsx

@@ -5,15 +5,13 @@ import {
     type StyleProp,
     type TextStyle,
     type ViewProps,
-    type ViewStyle,
 } from 'react-native';
 
 import { useActionState } from '../../hooks/useActionState';
 import { resolveStateVariant } from '../../utils';
-import { Icon, type IconType } from '../Icon';
+import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
-import { Surface } from '../Surface';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import type { IconButtonVariant } from './types';
 import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
@@ -63,14 +61,11 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      */
     style?: StyleProp<TextStyle>;
     iconStyle?: StyleProp<TextStyle>;
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'style' | 'color' | 'size'>;
     /**
      * color of the icon
      */
     color?: string;
-    /**
-     * Style of the innerContainer
-     */
-    innerContainerStyle?: ViewStyle;
     /**
      * Props for the state layer
      * */
@@ -92,10 +87,10 @@ const IconButton = (
         animated = false,
         variant = 'default',
         style,
-        innerContainerStyle: innerContainerStyleProp = emptyObject,
         testID,
         stateLayerProps = emptyObject,
-        iconStyle,
+        iconStyle: iconStyleProp,
+        iconProps,
         ...rest
     }: Props,
     ref: any,
@@ -113,7 +108,9 @@ const IconButton = (
     });
 
     defaultStyles.useVariants({
-        variant,
+        // @ts-ignore // TODO - fix this
+        variant: variant as any,
+        // @ts-ignore // TODO - fix this
         state,
         size: typeof size === 'string' && size ? size : undefined,
     });
@@ -124,9 +121,9 @@ const IconButton = (
         rippleColor,
         containerStyle,
         accessibilityState,
-        innerContainerStyle,
         // accessibilityTraits,
         stateLayerStyle,
+        iconStyle,
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
@@ -144,7 +141,6 @@ const IconButton = (
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
             rippleColor: _rippleColor,
-            innerContainerStyle: [defaultStyles.innerContainer, innerContainerStyleProp],
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -155,60 +151,51 @@ const IconButton = (
                 defaultStyles.root,
                 style,
             ],
+            iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
             stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        _iconColor,
-        disabled,
-        innerContainerStyleProp,
-        size,
-        stateLayerProps?.style,
-        style,
-        state,
-        variant,
-    ]);
+    }, [_iconColor, disabled, size, stateLayerProps?.style, style, state, variant]);
 
     return (
-        <Surface style={containerStyle} elevation={0}>
-            <TouchableRipple
-                borderless
-                centered
-                onPress={onPress}
-                rippleColor={rippleColor}
-                accessibilityLabel={accessibilityLabel}
-                style={innerContainerStyle}
-                // accessibilityTraits={accessibilityTraits}
-                // accessibilityComponentType="button"
-                accessibilityRole="button"
-                accessibilityState={accessibilityState}
-                disabled={disabled}
-                hitSlop={
-                    // @ts-ignore
-                    TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
-                }
+        <TouchableRipple
+            borderless
+            centered
+            onPress={onPress}
+            rippleColor={rippleColor}
+            accessibilityLabel={accessibilityLabel}
+            style={containerStyle}
+            // accessibilityTraits={accessibilityTraits}
+            // accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityState={accessibilityState}
+            disabled={disabled}
+            hitSlop={
                 // @ts-ignore
-                ref={actionsRef}
-                testID={testID}
-                {...rest}>
-                <>
-                    <IconComponent
-                        color={iconColor}
-                        name={name}
-                        size={iconSize}
-                        type={type}
-                        style={iconStyle}
-                    />
-                    <StateLayer
-                        testID={testID ? `${testID}-stateLayer` : ''}
-                        {...stateLayerProps}
-                        style={stateLayerStyle}
-                    />
-                </>
-            </TouchableRipple>
-        </Surface>
+                TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
+            }
+            // @ts-ignore
+            ref={actionsRef}
+            testID={testID}
+            {...rest}>
+            <>
+                <IconComponent
+                    color={iconColor}
+                    name={name}
+                    size={iconSize}
+                    type={type}
+                    style={iconStyle}
+                    {...iconProps}
+                />
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
     );
 };
 

package/components/IconButton/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import IconButtonDefault from './IconButton';
 
-registerMoleculesComponents({
-    IconButton: IconButtonDefault,
-});
-
 export const IconButton = getRegisteredComponentWithFallback('IconButton', IconButtonDefault);
 
 export type { Props as IconButtonProps } from './IconButton';

package/components/IconButton/utils.ts

@@ -1,11 +1,9 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
-    getRegisteredMoleculesComponentStyles,
-    registerComponentsStyles,
-    registerComponentUtils,
-} from '../../core';
-import { getRegisteredComponentUtils } from './../../core/componentsRegistry';
+    getRegisteredComponentStylesWithFallback,
+    getRegisteredComponentUtilsWithFallback,
+} from './../../core/componentsRegistry';
 
 export type States =
     | 'selectedAndDisabled'
@@ -29,6 +27,8 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
         overflow: 'hidden',
         borderWidth: 0,
         backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
 
         variants: {
             size: {
@@ -215,11 +215,7 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
             {
                 variant: 'outlined',
                 state: 'hovered',
-                styles: {
-                    backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
-                    borderWidth: 0,
-                },
+                styles: {},
             },
         ],
     },
@@ -304,22 +300,15 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
         ],
     },
 
-    innerContainer: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
+    icon: {},
 }));
 
-registerComponentsStyles({
-    IconButton: iconButtonStylesDefault,
-});
-
-registerComponentUtils('IconButton', {
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'IconButton',
+    iconButtonStylesDefault,
+);
+export const iconButtonSizeToIconSizeMap = getRegisteredComponentUtilsWithFallback(
+    'IconButton',
     iconButtonSizeToIconSizeMapDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('IconButton');
-export const iconButtonSizeToIconSizeMap =
-    getRegisteredComponentUtils('IconButton')?.iconButtonSizeToIconSizeMapDefault ||
-    iconButtonSizeToIconSizeMapDefault;
+    'iconButtonSizeToIconSizeMap',
+);

package/components/If/index.tsx

@@ -1,13 +1,9 @@
 import type { PropsWithChildren } from 'react';
 
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 
 const IfDefault = (props: PropsWithChildren<{ shouldRender?: boolean }>) => {
     return <>{!!props.shouldRender && props.children}</>;
 };
 
-registerMoleculesComponents({
-    If: IfDefault,
-});
-
 export const If = getRegisteredComponentWithFallback('If', IfDefault);

package/components/InputAddon/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import InputAddonDefault from './InputAddon';
 
-registerMoleculesComponents({
-    InputAddon: InputAddonDefault,
-});
-
 export const InputAddon = getRegisteredComponentWithFallback('InputAddon', InputAddonDefault);
 
 export type { Props as InputAddonProps } from './InputAddon';

package/components/InputAddon/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const inputAddonStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -26,8 +26,7 @@ const inputAddonStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    InputAddon: inputAddonStylesDefault,
-});
-
-export const inputAddonStyles = getRegisteredMoleculesComponentStyles('InputAddon');
+export const inputAddonStyles = getRegisteredComponentStylesWithFallback(
+    'InputAddon',
+    inputAddonStylesDefault,
+);

package/components/Link/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import LinkDefault from './Link';
 
-registerMoleculesComponents({
-    Link: LinkDefault,
-});
-
 export const Link = getRegisteredComponentWithFallback('Link', LinkDefault);
 
 export type { Props as LinkProps } from './Link';

package/components/Link/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 // type States = 'disabled' | 'hovered';
 
@@ -32,8 +32,4 @@ const linkStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Link: linkStylesDefault,
-});
-
-export const linkStyles = getRegisteredMoleculesComponentStyles('Link');
+export const linkStyles = getRegisteredComponentStylesWithFallback('Link', linkStylesDefault);

package/components/ListItem/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import ListItemComponent from './ListItem';
 import ListItemDescription from './ListItemDescription';
 import ListItemTitle from './ListItemTitle';
@@ -8,10 +8,6 @@ const ListItemDefault = Object.assign(ListItemComponent, {
     Description: ListItemDescription,
 });
 
-registerMoleculesComponents({
-    ListItem: ListItemDefault,
-});
-
 export const ListItem = getRegisteredComponentWithFallback('ListItem', ListItemDefault);
 
 export type { Props as ListItemProps } from './ListItem';

package/components/ListItem/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const listItemStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -101,13 +101,15 @@ const listItemDescriptionStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    ListItem: listItemStylesDefault,
-    ListItem_Title: listItemTitleStylesDefault,
-    ListItem_Description: listItemDescriptionStylesDefault,
-});
-
-export const listItemStyles = getRegisteredMoleculesComponentStyles('ListItem');
-export const listItemTitleStyles = getRegisteredMoleculesComponentStyles('ListItem_Title');
-export const listItemDescriptionStyles =
-    getRegisteredMoleculesComponentStyles('ListItem_Description');
+export const listItemStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem',
+    listItemStylesDefault,
+);
+export const listItemTitleStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem_Title',
+    listItemTitleStylesDefault,
+);
+export const listItemDescriptionStyles = getRegisteredComponentStylesWithFallback(
+    'ListItem_Description',
+    listItemDescriptionStylesDefault,
+);

package/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,253 @@
+import { interpolate as flubberInterpolate } from 'flubber';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import Animated, {
+    cancelAnimation,
+    Easing,
+    useAnimatedStyle,
+    useDerivedValue,
+    useFrameCallback,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+
+import {
+    cookie4Path,
+    cookie9Path,
+    loadingIndicatorStyles as componentStyles,
+    ovalPath,
+    pentagonPath,
+    pillPath,
+    type Props,
+    softBurstPath,
+    sunnyPath,
+    useProcessProps,
+} from './utils';
+
+// Animation constants matching the web version
+const ANIMATION_DURATION = 4550; // 4.55 seconds total cycle
+const PULSE_DURATION = 2275; // 2.275 seconds for pulse
+
+const SHAPE_PATHS = [
+    softBurstPath,
+    cookie9Path,
+    pentagonPath,
+    pillPath,
+    sunnyPath,
+    cookie4Path,
+    ovalPath,
+];
+
+// Number of pre-computed frames per transition for smooth animation
+const FRAMES_PER_TRANSITION = 30;
+const TOTAL_FRAMES = SHAPE_PATHS.length * FRAMES_PER_TRANSITION;
+
+// Material 3 Express Fast Spatial easing function
+// Original: cubic-bezier(0.42, 1.67, 0.21, 0.90)
+const expressFastSpatialEase = (t: number): number => {
+    'worklet';
+    // Approximate cubic-bezier(0.42, 1.67, 0.21, 0.90) using a simplified function
+    // This creates the characteristic overshoot and fast settle
+    const p1x = 0.42,
+        p1y = 1.67,
+        p2x = 0.21,
+        p2y = 0.9;
+
+    // Simple cubic bezier approximation
+    const cx = 3.0 * p1x;
+    const bx = 3.0 * (p2x - p1x) - cx;
+    const ax = 1.0 - cx - bx;
+
+    const cy = 3.0 * p1y;
+    const by = 3.0 * (p2y - p1y) - cy;
+    const ay = 1.0 - cy - by;
+
+    // Sample the bezier curve
+    const sampleX = (x: number) => ((ax * x + bx) * x + cx) * x;
+    const sampleY = (x: number) => ((ay * x + by) * x + cy) * x;
+
+    // Newton-Raphson to find t for given x
+    let guess = t;
+    for (let i = 0; i < 4; i++) {
+        const currentX = sampleX(guess) - t;
+        const currentSlope = (3.0 * ax * guess + 2.0 * bx) * guess + cx;
+        if (Math.abs(currentSlope) < 1e-6) break;
+        guess -= currentX / currentSlope;
+    }
+
+    return sampleY(guess);
+};
+
+/**
+ * Pre-compute all animation frames at initialization for smooth playback.
+ * This avoids runtime flubber calls which can cause jank.
+ */
+const precomputeFrames = (): string[] => {
+    const frames: string[] = [];
+
+    for (let i = 0; i < SHAPE_PATHS.length; i++) {
+        const fromPath = SHAPE_PATHS[i];
+        const toPath = SHAPE_PATHS[(i + 1) % SHAPE_PATHS.length];
+
+        // Create interpolator with higher precision
+        const interpolator = flubberInterpolate(fromPath, toPath, {
+            maxSegmentLength: 1, // Higher precision for smoother morphing
+        });
+
+        for (let j = 0; j < FRAMES_PER_TRANSITION; j++) {
+            const t = j / FRAMES_PER_TRANSITION;
+            // Apply easing to match CSS animation
+            const easedT = expressFastSpatialEase(t);
+            frames.push(interpolator(Math.max(0, Math.min(1, easedT))));
+        }
+    }
+
+    return frames;
+};
+
+const frames = precomputeFrames();
+
+const LoadingIndicator = ({
+    animating = true,
+    color: colorProp,
+    size: sizeProp = 'md',
+    style,
+    variant = 'default',
+    innerContainerProps,
+    ...rest
+}: Props) => {
+    const [currentPath, setCurrentPath] = useState(frames[0]);
+
+    const progress = useSharedValue(0);
+    const pulseScale = useSharedValue(1);
+    // Track last frame to avoid redundant updates
+    const lastFrameRef = useSharedValue(-1);
+
+    componentStyles.useVariants({
+        variant: variant as 'contained',
+    });
+
+    const { size, strokeColor } = useProcessProps({
+        variant,
+        size: sizeProp,
+        color: colorProp,
+    });
+
+    const updatePathFromFrame = useCallback((frameIndex: number) => {
+        const safeIndex = Math.max(0, Math.min(frameIndex, frames.length - 1));
+        setCurrentPath(prevPath => {
+            const newPath = frames[safeIndex];
+            return prevPath === newPath ? prevPath : newPath;
+        });
+    }, []);
+
+    useFrameCallback(() => {
+        'worklet';
+        const frameIndex = Math.floor(progress.value * TOTAL_FRAMES) % TOTAL_FRAMES;
+        if (frameIndex !== lastFrameRef.value) {
+            lastFrameRef.value = frameIndex;
+            updatePathFromFrame(frameIndex);
+        }
+    });
+
+    useEffect(() => {
+        if (animating) {
+            // Main morphing and rotation animation
+            progress.value = 0;
+            progress.value = withRepeat(
+                withTiming(1, {
+                    duration: ANIMATION_DURATION,
+                    easing: Easing.linear,
+                }),
+                -1, // Infinite repeat
+                false, // Don't reverse
+            );
+
+            // Pulse animation
+            pulseScale.value = 1;
+            pulseScale.value = withRepeat(
+                withTiming(1.1, {
+                    duration: PULSE_DURATION,
+                    easing: Easing.inOut(Easing.ease),
+                }),
+                -1, // Infinite repeat
+                true, // Reverse (ping-pong effect)
+            );
+        } else {
+            cancelAnimation(progress);
+            cancelAnimation(pulseScale);
+            progress.value = 0;
+            pulseScale.value = 1;
+            updatePathFromFrame(0);
+        }
+
+        return () => {
+            cancelAnimation(progress);
+            cancelAnimation(pulseScale);
+        };
+    }, [animating, progress, pulseScale, updatePathFromFrame]);
+
+    // Derived value for rotation with per-segment easing (matches CSS animation-timing-function per keyframe)
+    const rotation = useDerivedValue(() => {
+        'worklet';
+        const p = progress.value;
+        const segmentCount = SHAPE_PATHS.length;
+
+        // Determine which segment we're in
+        const scaledProgress = p * segmentCount;
+        const segmentIndex = Math.min(Math.floor(scaledProgress), segmentCount - 1);
+        const segmentProgress = scaledProgress - segmentIndex;
+
+        // Apply easing to this segment's progress
+        const easedSegmentProgress = expressFastSpatialEase(segmentProgress);
+
+        // Calculate rotation: base rotation for completed segments + eased progress within current segment
+        const rotationPerSegment = 1080 / segmentCount; // ~154.29 degrees per segment
+        const baseRotation = segmentIndex * rotationPerSegment;
+        const segmentRotation = easedSegmentProgress * rotationPerSegment;
+
+        return baseRotation + segmentRotation;
+    });
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ scale: pulseScale.value }, { rotate: `${rotation.value}deg` }],
+        };
+    });
+
+    if (!animating) return null;
+
+    return (
+        <View
+            style={[
+                componentStyles.container,
+                {
+                    width: Math.floor((10 / 48) * size * 2) + size,
+                    height: Math.floor((10 / 48) * size * 2) + size,
+                },
+                style,
+            ]}
+            accessible
+            accessibilityLabel="Loading"
+            accessibilityRole="progressbar"
+            accessibilityState={{ busy: animating }}
+            {...rest}>
+            <Animated.View
+                {...innerContainerProps}
+                style={[
+                    { width: size, height: size },
+                    componentStyles.innerContainer,
+                    innerContainerProps?.style,
+                    animatedStyle,
+                ]}>
+                <Svg width={size} height={size} viewBox="0 0 38 38">
+                    <Path d={currentPath} fill={strokeColor} />
+                </Svg>
+            </Animated.View>
+        </View>
+    );
+};
+
+export default memo(LoadingIndicator);