@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/button/Button.tsx

@@ -1,154 +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",
-    },
-});
+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

@@ -1,84 +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%",
-    },
-});
+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%",
+    },
+});