@croacroa/react-native-template 2.1.0 → 3.2.0

package/components/ui/Checkbox.tsx

@@ -1,261 +1,261 @@
-import { TouchableOpacity, View, Text } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  withSpring,
-  withTiming,
-  interpolateColor,
-} from "react-native-reanimated";
-import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "@/hooks/useTheme";
-import { cn } from "@/utils/cn";
-
-interface CheckboxProps {
-  /**
-   * Whether the checkbox is checked
-   */
-  checked: boolean;
-
-  /**
-   * Callback when the checkbox is toggled
-   */
-  onChange: (checked: boolean) => void;
-
-  /**
-   * Label text
-   */
-  label?: string;
-
-  /**
-   * Description text (below label)
-   */
-  description?: string;
-
-  /**
-   * Whether the checkbox is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Size variant
-   */
-  size?: "sm" | "md" | "lg";
-
-  /**
-   * Additional class name
-   */
-  className?: string;
-
-  /**
-   * Error message
-   */
-  error?: string;
-}
-
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-const sizes = {
-  sm: { box: 18, icon: 12, label: "text-sm" },
-  md: { box: 22, icon: 16, label: "text-base" },
-  lg: { box: 26, icon: 20, label: "text-lg" },
-};
-
-export function Checkbox({
-  checked,
-  onChange,
-  label,
-  description,
-  disabled = false,
-  size = "md",
-  className,
-  error,
-}: CheckboxProps) {
-  const { isDark } = useTheme();
-  const sizeConfig = sizes[size];
-
-  const animatedBoxStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      checked ? 1 : 0,
-      [0, 1],
-      ["transparent", "#10b981"]
-    );
-
-    const borderColor = interpolateColor(
-      checked ? 1 : 0,
-      [0, 1],
-      [error ? "#ef4444" : isDark ? "#475569" : "#cbd5e1", "#10b981"]
-    );
-
-    return {
-      backgroundColor: withTiming(backgroundColor, { duration: 150 }),
-      borderColor: withTiming(borderColor, { duration: 150 }),
-      transform: [
-        {
-          scale: withSpring(checked ? 1 : 0.95, {
-            damping: 15,
-            stiffness: 400,
-          }),
-        },
-      ],
-    };
-  }, [checked, isDark, error]);
-
-  const animatedCheckStyle = useAnimatedStyle(() => {
-    return {
-      opacity: withTiming(checked ? 1 : 0, { duration: 150 }),
-      transform: [
-        {
-          scale: withSpring(checked ? 1 : 0.5, {
-            damping: 15,
-            stiffness: 400,
-          }),
-        },
-      ],
-    };
-  }, [checked]);
-
-  return (
-    <TouchableOpacity
-      onPress={() => !disabled && onChange(!checked)}
-      disabled={disabled}
-      activeOpacity={0.7}
-      className={cn(
-        "flex-row items-start",
-        disabled && "opacity-50",
-        className
-      )}
-    >
-      <AnimatedView
-        style={[
-          animatedBoxStyle,
-          {
-            width: sizeConfig.box,
-            height: sizeConfig.box,
-            borderWidth: 2,
-            borderRadius: 6,
-            justifyContent: "center",
-            alignItems: "center",
-            marginTop: 2,
-          },
-        ]}
-      >
-        <Animated.View style={animatedCheckStyle}>
-          <Ionicons name="checkmark" size={sizeConfig.icon} color="white" />
-        </Animated.View>
-      </AnimatedView>
-
-      {(label || description) && (
-        <View className="flex-1 ml-3">
-          {label && (
-            <Text
-              className={cn(
-                sizeConfig.label,
-                isDark ? "text-text-dark" : "text-text-light",
-                disabled && "opacity-70"
-              )}
-            >
-              {label}
-            </Text>
-          )}
-          {description && (
-            <Text
-              className={cn(
-                "text-sm mt-0.5",
-                isDark ? "text-muted-dark" : "text-muted-light"
-              )}
-            >
-              {description}
-            </Text>
-          )}
-          {error && <Text className="text-red-500 text-sm mt-1">{error}</Text>}
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-/**
- * Checkbox Group component for multiple checkboxes
- */
-interface CheckboxGroupProps<T extends string> {
-  /**
-   * Available options
-   */
-  options: {
-    value: T;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-  }[];
-
-  /**
-   * Currently selected values
-   */
-  value: T[];
-
-  /**
-   * Callback when selection changes
-   */
-  onChange: (value: T[]) => void;
-
-  /**
-   * Group label
-   */
-  label?: string;
-
-  /**
-   * Size variant
-   */
-  size?: "sm" | "md" | "lg";
-
-  /**
-   * Additional class name
-   */
-  className?: string;
-}
-
-export function CheckboxGroup<T extends string>({
-  options,
-  value,
-  onChange,
-  label,
-  size = "md",
-  className,
-}: CheckboxGroupProps<T>) {
-  const { isDark } = useTheme();
-
-  const handleToggle = (optionValue: T) => {
-    if (value.includes(optionValue)) {
-      onChange(value.filter((v) => v !== optionValue));
-    } else {
-      onChange([...value, optionValue]);
-    }
-  };
-
-  return (
-    <View className={className}>
-      {label && (
-        <Text
-          className={cn(
-            "text-sm font-medium mb-3",
-            isDark ? "text-text-dark" : "text-text-light"
-          )}
-        >
-          {label}
-        </Text>
-      )}
-      <View className="gap-3">
-        {options.map((option) => (
-          <Checkbox
-            key={option.value}
-            checked={value.includes(option.value)}
-            onChange={() => handleToggle(option.value)}
-            label={option.label}
-            description={option.description}
-            disabled={option.disabled}
-            size={size}
-          />
-        ))}
-      </View>
-    </View>
-  );
-}
+import { TouchableOpacity, View, Text } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  interpolateColor,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+interface CheckboxProps {
+  /**
+   * Whether the checkbox is checked
+   */
+  checked: boolean;
+
+  /**
+   * Callback when the checkbox is toggled
+   */
+  onChange: (checked: boolean) => void;
+
+  /**
+   * Label text
+   */
+  label?: string;
+
+  /**
+   * Description text (below label)
+   */
+  description?: string;
+
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+
+  /**
+   * Error message
+   */
+  error?: string;
+}
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const sizes = {
+  sm: { box: 18, icon: 12, label: "text-sm" },
+  md: { box: 22, icon: 16, label: "text-base" },
+  lg: { box: 26, icon: 20, label: "text-lg" },
+};
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  size = "md",
+  className,
+  error,
+}: CheckboxProps) {
+  const { isDark } = useTheme();
+  const sizeConfig = sizes[size];
+
+  const animatedBoxStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      checked ? 1 : 0,
+      [0, 1],
+      ["transparent", "#10b981"]
+    );
+
+    const borderColor = interpolateColor(
+      checked ? 1 : 0,
+      [0, 1],
+      [error ? "#ef4444" : isDark ? "#475569" : "#cbd5e1", "#10b981"]
+    );
+
+    return {
+      backgroundColor: withTiming(backgroundColor, { duration: 150 }),
+      borderColor: withTiming(borderColor, { duration: 150 }),
+      transform: [
+        {
+          scale: withSpring(checked ? 1 : 0.95, {
+            damping: 15,
+            stiffness: 400,
+          }),
+        },
+      ],
+    };
+  }, [checked, isDark, error]);
+
+  const animatedCheckStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(checked ? 1 : 0, { duration: 150 }),
+      transform: [
+        {
+          scale: withSpring(checked ? 1 : 0.5, {
+            damping: 15,
+            stiffness: 400,
+          }),
+        },
+      ],
+    };
+  }, [checked]);
+
+  return (
+    <TouchableOpacity
+      onPress={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      activeOpacity={0.7}
+      className={cn(
+        "flex-row items-start",
+        disabled && "opacity-50",
+        className
+      )}
+    >
+      <AnimatedView
+        style={[
+          animatedBoxStyle,
+          {
+            width: sizeConfig.box,
+            height: sizeConfig.box,
+            borderWidth: 2,
+            borderRadius: 6,
+            justifyContent: "center",
+            alignItems: "center",
+            marginTop: 2,
+          },
+        ]}
+      >
+        <Animated.View style={animatedCheckStyle}>
+          <Ionicons name="checkmark" size={sizeConfig.icon} color="white" />
+        </Animated.View>
+      </AnimatedView>
+
+      {(label || description) && (
+        <View className="flex-1 ml-3">
+          {label && (
+            <Text
+              className={cn(
+                sizeConfig.label,
+                isDark ? "text-text-dark" : "text-text-light",
+                disabled && "opacity-70"
+              )}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text
+              className={cn(
+                "text-sm mt-0.5",
+                isDark ? "text-muted-dark" : "text-muted-light"
+              )}
+            >
+              {description}
+            </Text>
+          )}
+          {error && <Text className="text-red-500 text-sm mt-1">{error}</Text>}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+/**
+ * Checkbox Group component for multiple checkboxes
+ */
+interface CheckboxGroupProps<T extends string> {
+  /**
+   * Available options
+   */
+  options: {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }[];
+
+  /**
+   * Currently selected values
+   */
+  value: T[];
+
+  /**
+   * Callback when selection changes
+   */
+  onChange: (value: T[]) => void;
+
+  /**
+   * Group label
+   */
+  label?: string;
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+}
+
+export function CheckboxGroup<T extends string>({
+  options,
+  value,
+  onChange,
+  label,
+  size = "md",
+  className,
+}: CheckboxGroupProps<T>) {
+  const { isDark } = useTheme();
+
+  const handleToggle = (optionValue: T) => {
+    if (value.includes(optionValue)) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      onChange([...value, optionValue]);
+    }
+  };
+
+  return (
+    <View className={className}>
+      {label && (
+        <Text
+          className={cn(
+            "text-sm font-medium mb-3",
+            isDark ? "text-text-dark" : "text-text-light"
+          )}
+        >
+          {label}
+        </Text>
+      )}
+      <View className="gap-3">
+        {options.map((option) => (
+          <Checkbox
+            key={option.value}
+            checked={value.includes(option.value)}
+            onChange={() => handleToggle(option.value)}
+            label={option.label}
+            description={option.description}
+            disabled={option.disabled}
+            size={size}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}

package/components/ui/FeatureGate.tsx

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Feature-gated content component
+ * Renders children only when a feature flag is enabled,
+ * otherwise shows an optional fallback.
+ * @module components/ui/FeatureGate
+ */
+
+import { ReactNode } from "react";
+
+import { useFeatureFlag } from "@/hooks/useFeatureFlag";
+
+// ============================================================================
+// Props
+// ============================================================================
+
+interface FeatureGateProps {
+  /** The feature flag key to evaluate */
+  flag: string;
+  /** Content to render when the flag is enabled */
+  children: ReactNode;
+  /** Optional content to render when the flag is disabled */
+  fallback?: ReactNode;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Declarative component that shows or hides content based on a feature flag.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FeatureGate flag="new_dashboard">
+ *   <NewDashboard />
+ * </FeatureGate>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With fallback
+ * <FeatureGate flag="redesigned_profile" fallback={<OldProfile />}>
+ *   <NewProfile />
+ * </FeatureGate>
+ * ```
+ */
+export function FeatureGate({
+  flag,
+  children,
+  fallback = null,
+}: FeatureGateProps) {
+  const { isEnabled, isLoading } = useFeatureFlag(flag);
+
+  if (isLoading) return null;
+  return isEnabled ? <>{children}</> : <>{fallback}</>;
+}

package/components/ui/ForceUpdateScreen.tsx

@@ -0,0 +1,108 @@
+/**
+ * @fileoverview Full-screen non-dismissible force update screen
+ * Displayed when the running app version is below the server's minimum.
+ * @module components/ui/ForceUpdateScreen
+ */
+
+import { View, Text, Pressable } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as Linking from "expo-linking";
+import { useTranslation } from "react-i18next";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface ForceUpdateScreenProps {
+  /** Store URL to open when the user taps "Update Now" */
+  storeUrl: string;
+  /** The version currently running */
+  currentVersion: string;
+  /** The minimum version required by the server */
+  minimumVersion: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Full-screen, non-dismissible view that blocks the app until the user
+ * updates to the minimum required version.
+ *
+ * Renders as a top-level screen (not a Modal) so the user cannot navigate
+ * around it. The "Update Now" button opens the appropriate store URL.
+ *
+ * @example
+ * ```tsx
+ * if (isUpdateRequired) {
+ *   return (
+ *     <ForceUpdateScreen
+ *       storeUrl={storeUrl}
+ *       currentVersion={currentVersion}
+ *       minimumVersion={minimumVersion}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function ForceUpdateScreen({
+  storeUrl,
+  currentVersion,
+  minimumVersion,
+}: ForceUpdateScreenProps) {
+  const { t } = useTranslation();
+
+  const handleUpdate = () => {
+    Linking.openURL(storeUrl);
+  };
+
+  return (
+    <View className="flex-1 items-center justify-center bg-white px-8 dark:bg-gray-900">
+      {/* Icon */}
+      <View className="mb-8 h-24 w-24 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+        <Ionicons name="cloud-download-outline" size={48} color="#3b82f6" />
+      </View>
+
+      {/* Title */}
+      <Text className="mb-4 text-center text-2xl font-bold text-gray-900 dark:text-white">
+        {t("forceUpdate.title")}
+      </Text>
+
+      {/* Message */}
+      <Text className="mb-8 text-center text-base leading-6 text-gray-600 dark:text-gray-400">
+        {t("forceUpdate.message")}
+      </Text>
+
+      {/* Version info */}
+      <View className="mb-8 w-full rounded-xl bg-gray-100 p-4 dark:bg-gray-800">
+        <View className="mb-2 flex-row items-center justify-between">
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            {t("forceUpdate.currentVersion")}
+          </Text>
+          <Text className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            {currentVersion}
+          </Text>
+        </View>
+        <View className="flex-row items-center justify-between">
+          <Text className="text-sm text-gray-500 dark:text-gray-400">
+            {t("forceUpdate.minimumVersion")}
+          </Text>
+          <Text className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            {minimumVersion}
+          </Text>
+        </View>
+      </View>
+
+      {/* Update button */}
+      <Pressable
+        onPress={handleUpdate}
+        className="w-full items-center rounded-xl bg-primary-600 px-6 py-4 active:bg-primary-700"
+      >
+        <Text className="text-lg font-semibold text-white">
+          {t("forceUpdate.button")}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}