react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.30

package/components/List/types.ts

@@ -0,0 +1,117 @@
+import type { ReactNode, RefObject } from 'react';
+import {
+    type AccessibilityRole,
+    type GestureResponderEvent,
+    type ScrollViewProps,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type ListItemId = string | number;
+
+export type DefaultListItemT = {
+    id?: ListItemId;
+    label?: string;
+    selectable?: boolean;
+    [key: string]: unknown;
+};
+
+export type ListValue<Multiple extends boolean = false> = Multiple extends true
+    ? ListItemId[]
+    : ListItemId | null;
+
+export type ListEmptyStateRender = (ctx: {
+    /** True when `items` (the raw input) has at least one entry. */
+    hasItems: boolean;
+}) => ReactNode;
+
+export type ListContextValue<Option extends object = DefaultListItemT> = {
+    value: ListItemId | ListItemId[] | null;
+    multiple: boolean;
+    onAdd: (item: Option) => void;
+    onRemove: (item: Option) => void;
+    isSelectedId: (id: ListItemId) => boolean;
+    disabled?: boolean;
+    error: boolean;
+    allowDeselect: boolean;
+};
+
+type ListPropsBase = {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    /**
+     * Whether re-clicking the currently-selected row should remove it. Defaults
+     * to `true` for multiple, `false` for single (re-clicking the picked row
+     * in a "pick one and close" flow shouldn't clear the value).
+     */
+    allowDeselect?: boolean;
+};
+
+type SingleListProps<Option extends object = DefaultListItemT> = {
+    multiple?: false | undefined;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+type MultipleListProps<Option extends object = DefaultListItemT> = {
+    multiple: true;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+export type ListProps<Option extends object = DefaultListItemT> = ListPropsBase &
+    (SingleListProps<Option> | MultipleListProps<Option>);
+
+export type ListContentProps = Omit<ScrollViewProps, 'children'> & {
+    children?: ReactNode;
+};
+
+/**
+ * Props for `<List.Item>`. When `value` is provided, the item participates in the
+ * surrounding `<List>` context — it derives its `selected` state from the context's
+ * value and toggles selection on press (unless `shouldToggleOnPress` is false).
+ *
+ * Without `value`, the item is a plain styled row (use it for menu-style entries
+ * that don't represent a selectable option).
+ *
+ * Note: when `value` is set, both `onPress` and the selection toggle fire on press,
+ * in that order. For most cases that's fine — pass `onPress` for side effects
+ * (e.g. closing a menu) and let the toggle drive `onChange`. Pass
+ * `onBeforeToggle` for side effects that should only run when the built-in
+ * toggle will happen. Set `shouldToggleOnPress={false}` to suppress the toggle entirely.
+ *
+ * Deselection: by default, single-select rows do **not** deselect on re-click
+ * (use `<List allowDeselect>` to opt in or out at the list level).
+ */
+export type ListItemProps<Option extends object = DefaultListItemT> = Omit<
+    TouchableRippleProps,
+    'children' | 'onPress'
+> & {
+    ref?: RefObject<unknown>;
+    children?: ReactNode;
+    value?: ListItemId;
+    style?: StyleProp<ViewStyle>;
+    variant?: 'default' | 'menuItem';
+    selected?: boolean;
+    disabled?: boolean;
+    hovered?: boolean;
+    hoverable?: boolean;
+    shouldToggleOnPress?: boolean;
+    /** Runs after `onPress`, before the built-in selection toggle. */
+    onBeforeToggle?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: Record<string, unknown>;
+    /** Reserved for generic item shape; not consumed directly. */
+    __optionType?: Option;
+};
+
+export type ListItemElementProps = {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};

package/components/List/utils.ts

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+const defaultStyles = StyleSheet.create(theme => ({
+    emptyState: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['6'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyStateText: {
+        color: theme.colors.onSurfaceVariant,
+        fontSize: 14,
+    },
+}));
+
+export const listStyles = getRegisteredComponentStylesWithFallback('List', defaultStyles);
+
+const listItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacings['4'],
+
+        _web: {
+            outlineStyle: 'none',
+        },
+
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                hovered: {},
+                focused: {},
+
+                selected: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+            variant: {
+                default: {
+                    paddingLeft: theme.spacings['4'],
+                    paddingRight: theme.spacings['6'],
+                    minHeight: 56,
+                },
+                menuItem: {
+                    paddingHorizontal: theme.spacings['3'],
+                    minHeight: 40,
+                },
+            },
+        },
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                focused: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.stateLayer.focussed.onSurface,
+                },
+            },
+        },
+    },
+}));
+
+export const listItemStyles = getRegisteredComponentStylesWithFallback(
+    'List_Item',
+    listItemStylesDefault,
+);

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);

package/components/LoadingIndicator/LoadingIndicator.web.tsx

@@ -0,0 +1,136 @@
+import { memo, useId } from 'react';
+import { View } from 'react-native';
+
+import {
+    cookie4Path,
+    cookie9Path,
+    expressFastSpatial,
+    loadingIndicatorStyles as componentStyles,
+    ovalPath,
+    pentagonPath,
+    pillPath,
+    type Props,
+    softBurstPath,
+    sunnyPath,
+    useProcessProps,
+} from './utils';
+
+/**
+ * Material 3 Expressive Loading Indicator for Web.
+ * Uses CSS 'd' attribute transitions for true shape morphing.
+ */
+const LoadingIndicator = ({
+    animating = true,
+    color: colorProp,
+    size: sizeProp = 'md',
+    style,
+    variant = 'default',
+    innerContainerProps,
+}: Props) => {
+    const id = useId();
+    componentStyles.useVariants({
+        variant: variant as 'contained',
+    });
+
+    const { size, strokeColor } = useProcessProps({
+        variant,
+        size: sizeProp,
+        color: colorProp,
+    });
+
+    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 }}>
+            <View
+                {...innerContainerProps}
+                style={[
+                    { width: size, height: size },
+                    componentStyles.innerContainer,
+                    innerContainerProps?.style,
+                ]}>
+                <svg
+                    className={`m3-expressive-svg-${id}`}
+                    width={size}
+                    height={size}
+                    viewBox="0 0 38 38">
+                    <path className={`m3-expressive-path-${id}`} fill={strokeColor} />
+                </svg>
+            </View>
+            <style>
+                {`
+                .m3-expressive-svg-${id} {
+                    transform-origin: center;
+                    display: block;
+                }
+
+                .m3-expressive-path-${id} {
+                    animation: m3-expressive-combined 4.55s linear infinite;
+                    transform-origin: center;
+                }
+
+                @keyframes m3-expressive-pulse-${id} {
+                    0%, 100% { transform: scale(1); }
+                    50% { transform: scale(1.1); }
+                }
+
+                @keyframes m3-expressive-combined {
+                    0% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(0deg);
+                        d: path('${softBurstPath}');
+                    }
+                    14.28% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(154.29deg);
+                        d: path('${cookie9Path}');
+                    }
+                    28.57% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(308.57deg);
+                        d: path('${pentagonPath}');
+                    }
+                    42.85% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(462.86deg);
+                        d: path('${pillPath}');
+                    }
+                    57.14% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(617.14deg);
+                        d: path('${sunnyPath}');
+                    }
+                    71.42% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(771.43deg);
+                        d: path('${cookie4Path}');
+                    }
+                    85.71% {
+                        animation-timing-function: ${expressFastSpatial};
+                        transform: rotate(925.71deg);
+                        d: path('${ovalPath}');
+                    }
+                    100% {
+                        transform: rotate(1080deg);
+                        d: path('${softBurstPath}');
+                    }
+                }
+                `}
+            </style>
+        </View>
+    );
+};
+
+export default memo(LoadingIndicator);

package/components/LoadingIndicator/index.tsx

@@ -0,0 +1,13 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import LoadingIndicatorDefault from './LoadingIndicator';
+
+export const LoadingIndicator = getRegisteredComponentWithFallback(
+    'LoadingIndicator',
+    LoadingIndicatorDefault,
+);
+
+export {
+    type Props as LoadingIndicatorProps,
+    loadingIndicatorStyles,
+    loadingIndicatorStylesDefault,
+} from './utils';