@wasto/cms-components 1.5.10

package/src/components/bottom-tab/BottomTab.tsx

@@ -0,0 +1,392 @@
+import {
+    useCallback,
+    useLayoutEffect,
+    useRef,
+    useState,
+    type MutableRefObject,
+    type ReactNode,
+} from "react";
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import Animated, {
+    cancelAnimation,
+    Extrapolation,
+    interpolate,
+    runOnJS,
+    type SharedValue,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { hapticSelection } from "../../helpers/haptics";
+
+export type BottomTabProps = BottomTabBarProps;
+
+/** Maquette Frame 25: 64×44 squircle behind the active icon. */
+const PILL_W = 64;
+const PILL_H = 44;
+const ICON_SIZE = 24;
+const BAR_PAD_X = 24;
+const PILL_TOP = 12;
+const SPRING = { damping: 18, stiffness: 220, mass: 0.85 };
+/** Au-delà, un flick ne change qu’une tab (évite de sauter à la dernière). */
+const FLING_VX = 650;
+
+function xForIndex(index: number, tabW: number, padX: number) {
+    "worklet";
+    return padX + index * tabW + (tabW - PILL_W) / 2;
+}
+
+function nearestIndex(x: number, tabW: number, padX: number, count: number) {
+    "worklet";
+    if (tabW <= 0 || count <= 0) return 0;
+    const i = Math.round((x - padX - (tabW - PILL_W) / 2) / tabW);
+    return Math.max(0, Math.min(count - 1, i));
+}
+
+function tabProgress(pillX: number, index: number, tabW: number) {
+    "worklet";
+    if (tabW <= 0) return 0;
+    const tabCenter = index * tabW + tabW / 2;
+    const pillCenter = pillX + PILL_W / 2;
+    return interpolate(
+        Math.abs(pillCenter - tabCenter),
+        [0, tabW * 0.52],
+        [1, 0],
+        Extrapolation.CLAMP,
+    );
+}
+
+function rubberband(overshoot: number, dim: number) {
+    "worklet";
+    const c = 0.55;
+    return (1 - 1 / (overshoot * c / Math.max(dim, 1) + 1)) * dim;
+}
+
+function TabItem({
+    index,
+    label,
+    icon,
+    onPress,
+    selected,
+    pillX,
+    tabW,
+    primary,
+    muted,
+    onPrimary,
+    dragging,
+}: {
+    index: number;
+    label: string;
+    icon: (color: string) => ReactNode;
+    onPress: () => void;
+    selected: boolean;
+    pillX: SharedValue<number>;
+    tabW: number;
+    primary: string;
+    muted: string;
+    onPrimary: string;
+    dragging: MutableRefObject<boolean>;
+}) {
+    const idleIconStyle = useAnimatedStyle(() => ({
+        opacity: 1 - tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const activeIconStyle = useAnimatedStyle(() => ({
+        opacity: tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const idleLabelStyle = useAnimatedStyle(() => ({
+        opacity: 1 - tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const activeLabelStyle = useAnimatedStyle(() => ({
+        opacity: tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    return (
+        <Pressable
+            onPress={() => {
+                if (dragging.current) return;
+                onPress();
+            }}
+            style={styles.tabItem}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+            accessibilityLabel={label}
+        >
+            <View style={styles.iconSlot}>
+                <Animated.View style={[styles.iconLayer, idleIconStyle]}>
+                    {icon(muted)}
+                </Animated.View>
+                <Animated.View style={[styles.iconLayer, activeIconStyle]}>
+                    {icon(onPrimary)}
+                </Animated.View>
+            </View>
+            <View style={styles.labelSlot}>
+                <Animated.Text
+                    style={[styles.label, styles.labelIdle, { color: muted }, idleLabelStyle]}
+                    numberOfLines={1}
+                >
+                    {label}
+                </Animated.Text>
+                <Animated.Text
+                    style={[styles.label, styles.labelActive, { color: primary }, activeLabelStyle]}
+                    numberOfLines={1}
+                >
+                    {label}
+                </Animated.Text>
+            </View>
+        </Pressable>
+    );
+}
+
+export function BottomTab({
+    state,
+    descriptors,
+    navigation,
+}: BottomTabProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const insets = useSafeAreaInsets();
+    const themedStyles = createThemedStyles(theme);
+    const muted = t.colors.muted ?? theme.colors.onSurface;
+    const count = state.routes.length;
+
+    const [rowWidth, setRowWidth] = useState(0);
+    const tabW = count > 0 && rowWidth > 0 ? rowWidth / count : 0;
+    const pillX = useSharedValue(0);
+    const tabWSV = useSharedValue(0);
+    const countSV = useSharedValue(count);
+    const dragStartX = useSharedValue(0);
+    const dragStartIndex = useSharedValue(state.index);
+    const pressed = useSharedValue(0);
+    const lastTick = useSharedValue(state.index);
+    const dragging = useRef(false);
+    const routesRef = useRef(state.routes);
+    const indexRef = useRef(state.index);
+    routesRef.current = state.routes;
+    indexRef.current = state.index;
+    countSV.value = count;
+
+    useLayoutEffect(() => {
+        tabWSV.value = tabW;
+        if (tabW <= 0) return;
+        pillX.value = withSpring(xForIndex(state.index, tabW, 0), SPRING);
+    }, [pillX, state.index, tabW, tabWSV]);
+
+    const selectIndex = useCallback(
+        (index: number) => {
+            const route = routesRef.current[index];
+            if (!route) return;
+            const width = tabWSV.value;
+            if (width > 0) {
+                pillX.value = withSpring(xForIndex(index, width, 0), SPRING);
+            }
+            const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+            });
+            if (index === indexRef.current || event.defaultPrevented) return;
+            void hapticSelection();
+            navigation.navigate(route.name);
+        },
+        [navigation, pillX, tabWSV],
+    );
+
+    const setDragging = useCallback((value: boolean) => {
+        dragging.current = value;
+    }, []);
+
+    const pan = Gesture.Pan()
+        .enabled(count > 1 && tabW > 0)
+        .activeOffsetX([-12, 12])
+        .failOffsetY([-18, 18])
+        .onStart(() => {
+            cancelAnimation(pillX);
+            dragStartX.value = pillX.value;
+            dragStartIndex.value = nearestIndex(
+                pillX.value,
+                tabWSV.value,
+                0,
+                countSV.value,
+            );
+            pressed.value = withSpring(1, SPRING);
+            lastTick.value = dragStartIndex.value;
+            runOnJS(setDragging)(true);
+        })
+        .onUpdate((e) => {
+            const width = tabWSV.value;
+            const n = countSV.value;
+            const min = xForIndex(0, width, 0);
+            const max = xForIndex(n - 1, width, 0);
+            let next = dragStartX.value + e.translationX;
+            if (next < min) next = min - rubberband(min - next, PILL_W);
+            else if (next > max) next = max + rubberband(next - max, PILL_W);
+            pillX.value = next;
+            const idx = nearestIndex(next, width, 0, n);
+            if (idx !== lastTick.value) {
+                lastTick.value = idx;
+                runOnJS(hapticSelection)();
+            }
+        })
+        .onEnd((e) => {
+            const width = tabWSV.value;
+            const n = countSV.value;
+            const from = dragStartIndex.value;
+            const nearest = nearestIndex(pillX.value, width, 0, n);
+            // Flick rapide : ±1 tab depuis le départ (pas de projection libre).
+            // Relâchement lent : snap sur la tab sous le doigt (drag multi-tabs OK).
+            let idx =
+                Math.abs(e.velocityX) > FLING_VX
+                    ? from + (e.velocityX > 0 ? 1 : -1)
+                    : nearest;
+            idx = Math.max(0, Math.min(n - 1, idx));
+            pillX.value = withSpring(xForIndex(idx, width, 0), SPRING);
+            pressed.value = withSpring(0, SPRING);
+            runOnJS(selectIndex)(idx);
+        })
+        .onFinalize(() => {
+            pressed.value = withSpring(0, SPRING);
+            runOnJS(setDragging)(false);
+        });
+
+    const pillStyle = useAnimatedStyle(() => ({
+        left: pillX.value,
+        transform: [{ scale: interpolate(pressed.value, [0, 1], [1, 0.96]) }],
+    }), []);
+
+    return (
+        <GestureHandlerRootView style={styles.gestureRoot}>
+            <View
+                style={[
+                    styles.bottomTab,
+                    themedStyles.bottomTab,
+                    { paddingBottom: Math.max(insets.bottom, 12) },
+                ]}
+            >
+                <GestureDetector gesture={pan}>
+                    <View
+                        collapsable={false}
+                        style={styles.row}
+                        onLayout={(e) => setRowWidth(e.nativeEvent.layout.width)}
+                    >
+                        <Animated.View
+                            pointerEvents="none"
+                            style={[
+                                styles.pill,
+                                {
+                                    backgroundColor: theme.colors.primary,
+                                    borderRadius: t.radii.md,
+                                },
+                                pillStyle,
+                            ]}
+                        />
+                        {state.routes.map((route, index) => {
+                            const { options } = descriptors[route.key];
+                            const label =
+                                typeof options.title === "string"
+                                    ? options.title
+                                    : route.name;
+
+                            return (
+                                <TabItem
+                                    key={route.key}
+                                    index={index}
+                                    label={label}
+                                    selected={state.index === index}
+                                    pillX={pillX}
+                                    tabW={tabW}
+                                    primary={theme.colors.primary}
+                                    muted={muted}
+                                    onPrimary={theme.colors.onPrimary}
+                                    dragging={dragging}
+                                    onPress={() => selectIndex(index)}
+                                    icon={(color) =>
+                                        options.tabBarIcon?.({
+                                            focused: index === state.index,
+                                            color,
+                                            size: ICON_SIZE,
+                                        })
+                                    }
+                                />
+                            );
+                        })}
+                    </View>
+                </GestureDetector>
+            </View>
+        </GestureHandlerRootView>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        bottomTab: {
+            backgroundColor: theme.colors.surface,
+        },
+    });
+
+const styles = StyleSheet.create({
+    gestureRoot: {
+        width: "100%",
+    },
+    bottomTab: {
+        width: "100%",
+        paddingHorizontal: BAR_PAD_X,
+        paddingTop: PILL_TOP,
+    },
+    row: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        width: "100%",
+        overflow: "visible",
+    },
+    pill: {
+        position: "absolute",
+        top: 0,
+        width: PILL_W,
+        height: PILL_H,
+        zIndex: 0,
+    },
+    tabItem: {
+        flex: 1,
+        alignItems: "center",
+        zIndex: 1,
+        gap: 4,
+    },
+    iconSlot: {
+        width: PILL_W,
+        height: PILL_H,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconLayer: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    labelSlot: {
+        height: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "stretch",
+    },
+    label: {
+        fontSize: 13,
+        textAlign: "center",
+    },
+    labelIdle: {
+        fontWeight: "500",
+    },
+    labelActive: {
+        position: "absolute",
+        fontWeight: "700",
+    },
+});

package/src/components/button/Button.tsx

@@ -0,0 +1,154 @@
+import type { ReactNode } from "react";
+import { LucideIcon } from "lucide-react-native";
+import {
+    ActivityIndicator,
+    Pressable,
+    PressableProps,
+    StyleProp,
+    StyleSheet,
+    Text,
+    TextStyle,
+    View,
+    ViewStyle,
+} from "react-native";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type ButtonVariant = "primary" | "ghost" | "secondary" | "outline";
+
+export type ButtonProps = Omit<PressableProps, "children" | "style"> & {
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    loading?: boolean;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+    children: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+};
+
+export function Button({
+    variant = "primary",
+    disabled = false,
+    loading = false,
+    leftIcon: LeftIcon,
+    rightIcon: RightIcon,
+    children,
+    style,
+    textStyle,
+    ...props
+}: ButtonProps): ReactNode {
+    const { theme } = useTheme();
+    const resolved = resolveTheme(theme);
+    const variantStyles = createThemedVariantsStyles(theme)[variant];
+    const isDisabled = disabled || loading;
+
+    const iconColor =
+        (textStyle && typeof textStyle === "object" && !Array.isArray(textStyle) && "color" in textStyle
+            ? (textStyle.color as string)
+            : undefined) ??
+        (variantStyles.text.color as string);
+
+    const content = loading ? (
+        <ActivityIndicator size="small" color={iconColor} />
+    ) : (
+        <View style={styles.content}>
+            {LeftIcon ? <LeftIcon size={18} color={iconColor} /> : null}
+            <Text style={[styles.text, variantStyles.text, textStyle]}>
+                {children}
+            </Text>
+            {RightIcon ? <RightIcon size={18} color={iconColor} /> : null}
+        </View>
+    );
+
+    return (
+        <Pressable
+            {...props}
+            disabled={isDisabled}
+            style={({ pressed }) => [
+                styles.base,
+                { borderRadius: resolved.radii.md },
+                variantStyles.base,
+                style,
+                isDisabled && styles.disabled,
+                pressed && !isDisabled && styles.pressed,
+            ]}
+        >
+            {content}
+        </Pressable>
+    );
+}
+
+const createThemedVariantsStyles = (theme: Theme): Record<
+    ButtonVariant,
+    { base: ViewStyle; text: TextStyle }
+> => {
+    const t = resolveTheme(theme);
+    return {
+        primary: StyleSheet.create({
+            base: {
+                backgroundColor: t.colors.primary,
+                ...t.shadow.soft,
+            },
+            text: {
+                color: t.colors.onPrimary,
+            },
+        }),
+        secondary: StyleSheet.create({
+            base: {
+                backgroundColor: t.colors.surface,
+                borderColor: t.colors.border,
+                borderWidth: 1,
+            },
+            text: {
+                color: t.colors.primary,
+            },
+        }),
+        outline: StyleSheet.create({
+            base: {
+                backgroundColor: "transparent",
+                borderWidth: 1,
+                borderColor: t.colors.border,
+            },
+            text: {
+                color: t.colors.onSurface,
+            },
+        }),
+        ghost: StyleSheet.create({
+            base: {
+                backgroundColor: "transparent",
+            },
+            text: {
+                color: t.colors.onBackground,
+            },
+        }),
+    };
+};
+
+const styles = StyleSheet.create({
+    base: {
+        height: SPACE.buttonH,
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        paddingHorizontal: SPACE.pageX,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    pressed: {
+        opacity: 0.9,
+    },
+    text: {
+        fontSize: 17,
+        fontWeight: "600",
+    },
+});

package/src/components/challenge/Badges.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View } from "react-native";
+import { Image } from "expo-image";
+import { AcquiredBadge } from "../../hooks/useChallenges";
+import { Theme } from "../../types/Theme";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useMemo, useState, type ReactNode } from "react";
+import { NavButton } from "../nav-button/NavButton";
+import { PlusIcon } from "lucide-react-native";
+import { BadgesModal } from "./BadgesModal";
+
+export type BadgesProps = {
+    badges: AcquiredBadge[];
+};
+
+export function Badges({
+    badges,
+}: BadgesProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const [displayAllBadges, setDisplayAllBadges] = useState(false);
+
+    const badgesDisplay = useMemo<(AcquiredBadge | null)[]>(() => {
+        const activeBadges = badges.slice(0, 5);
+        return Array.from({ length: 5 }, (_, i) => activeBadges[i] ?? null);
+    }, [badges]);
+
+    return (
+        <>
+            <View style={styles.badges}>
+                {badgesDisplay.map((badge, index) =>
+                    badge ? (
+                        <View
+                            key={badge.badgeId}
+                            style={[styles.badge, themedStyles.badge]}
+                        >
+                            {badge.badge?.imageUrl ? (
+                                <Image
+                                    source={badge.badge.imageUrl}
+                                    style={styles.badgeImage}
+                                    contentFit="cover"
+                                />
+                            ) : null}
+                        </View>
+                    ) : (
+                        <View
+                            key={index.toString()}
+                            style={[styles.badge, themedStyles.badge]}
+                        />
+                    )
+                )}
+            </View>
+            <BadgesModal
+                visible={displayAllBadges}
+                acquiredBadges={badges}
+                onClose={() => setDisplayAllBadges(false)}
+            />
+        </>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        badge: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radius,
+        },
+    });
+
+const styles = StyleSheet.create({
+    badges: {
+        flexDirection: "row",
+        gap: 10,
+        alignItems: "center",
+    },
+    badge: {
+        flex: 1,
+        aspectRatio: 3 / 4,
+        overflow: "hidden",
+    },
+    badgeImage: {
+        width: "100%",
+        height: "100%",
+    },
+});