@umituz/react-native-settings 4.21.24 → 4.21.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.24",
+  "version": "4.21.26",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/dev/index.ts

@@ -9,3 +9,11 @@ export type { DevSettingsProps } from "./presentation/components/DevSettingsSect
 
 export { StorageClearSetting } from "./presentation/components/StorageClearSetting";
 export type { StorageClearSettingProps } from "./presentation/components/StorageClearSetting";
+
+export { EnvViewerSetting } from "./presentation/components/EnvViewerSetting";
+export type { EnvViewerSettingProps } from "./presentation/components/EnvViewerSetting";
+
+export { EnvViewerScreen } from "./presentation/screens/EnvViewerScreen";
+export type { EnvViewerScreenProps } from "./presentation/screens/EnvViewerScreen";
+
+export type { EnvVariable, EnvConfig } from "./types";

package/src/domains/dev/presentation/components/EnvViewerSetting.tsx

@@ -0,0 +1,45 @@
+/**
+ * Environment Viewer Setting Item
+ * List item to navigate to environment variables screen
+ * DEV-only feature
+ */
+
+import React from "react";
+import { useAppDesignTokens, AppNavigation } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../../../presentation/components/SettingsItemCard";
+import type { EnvConfig } from "../../types";
+
+export interface EnvViewerSettingProps {
+  /** Environment configuration to pass to viewer screen */
+  config: EnvConfig;
+  /** Custom title (default: "Environment Variables") */
+  title?: string;
+  /** Custom description (default: "View app configuration") */
+  description?: string;
+  /** Screen name to navigate to */
+  screenName: string;
+}
+
+export const EnvViewerSetting: React.FC<EnvViewerSettingProps> = ({
+  config,
+  title = "Environment Variables",
+  description = "View app configuration",
+  screenName,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handlePress = () => {
+    AppNavigation.navigate(screenName as never, { config } as never);
+  };
+
+  return (
+    <SettingsItemCard
+      icon="code"
+      title={title}
+      description={description}
+      onPress={handlePress}
+      iconColor={tokens.colors.primary}
+      showChevron
+    />
+  );
+};

package/src/domains/dev/presentation/screens/EnvViewerScreen.tsx

@@ -0,0 +1,180 @@
+/**
+ * Environment Variables Viewer Screen
+ * Displays environment configuration for debugging
+ * DEV-only feature with hardcoded English text
+ */
+
+import React, { useState } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  useSafeAreaInsets,
+  AppNavigation,
+  AlertService,
+  NavigationHeader,
+} from "@umituz/react-native-design-system";
+import * as Clipboard from "expo-clipboard";
+import type { EnvConfig } from "../../types";
+
+export interface EnvViewerScreenProps {
+  /** Environment configuration */
+  config: EnvConfig;
+}
+
+export const EnvViewerScreen: React.FC<EnvViewerScreenProps> = ({ config }) => {
+  const tokens = useAppDesignTokens();
+  const { bottom } = useSafeAreaInsets();
+  const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set());
+
+  const toggleReveal = (key: string) => {
+    setRevealedKeys((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(key)) {
+        newSet.delete(key);
+      } else {
+        newSet.add(key);
+      }
+      return newSet;
+    });
+  };
+
+  const copyToClipboard = async (value: string, key: string) => {
+    try {
+      await Clipboard.setStringAsync(value);
+      AlertService.createSuccessAlert("Copied", `${key} copied to clipboard`);
+    } catch {
+      AlertService.createErrorAlert("Error", "Failed to copy to clipboard");
+    }
+  };
+
+  const renderVariable = (item: typeof config.variables[0]) => {
+    const isRevealed = revealedKeys.has(item.key);
+    const displayValue = item.sensitive && !isRevealed ? "••••••••" : item.value;
+
+    return (
+      <View
+        key={item.key}
+        style={[
+          styles.variableCard,
+          { backgroundColor: tokens.colors.surfaceContainer, borderRadius: tokens.borders.radiusMd },
+        ]}
+      >
+        <View style={styles.variableHeader}>
+          <AtomicText type="labelLarge" color="textPrimary">
+            {item.key}
+          </AtomicText>
+          <View style={styles.actions}>
+            {item.sensitive && (
+              <AtomicIcon
+                name={isRevealed ? "eye-off" : "eye"}
+                size="sm"
+                color="textSecondary"
+                onPress={() => toggleReveal(item.key)}
+              />
+            )}
+            <AtomicIcon
+              name="copy"
+              size="sm"
+              color="textSecondary"
+              onPress={() => copyToClipboard(item.value, item.key)}
+              style={{ marginLeft: tokens.spacing.sm }}
+            />
+          </View>
+        </View>
+        <AtomicText type="bodyMedium" color="textSecondary" style={{ marginTop: tokens.spacing.xs }}>
+          {displayValue}
+        </AtomicText>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <NavigationHeader title="Environment Variables" onBackPress={() => AppNavigation.goBack()} />
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + tokens.spacing.lg }}
+      >
+        {config.environmentName && (
+          <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceContainer }]}>
+            <AtomicText type="labelSmall" color="textSecondary">
+              Environment
+            </AtomicText>
+            <AtomicText type="titleMedium" color="textPrimary">
+              {config.environmentName}
+            </AtomicText>
+          </View>
+        )}
+
+        {config.version && (
+          <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceContainer }]}>
+            <AtomicText type="labelSmall" color="textSecondary">
+              Version
+            </AtomicText>
+            <AtomicText type="titleMedium" color="textPrimary">
+              {config.version}
+              {config.buildNumber && ` (${config.buildNumber})`}
+            </AtomicText>
+          </View>
+        )}
+
+        <View style={styles.section}>
+          <AtomicText type="titleMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.md }}>
+            Configuration
+          </AtomicText>
+          {config.variables.map(renderVariable)}
+        </View>
+
+        <View style={[styles.warningCard, { backgroundColor: tokens.colors.errorContainer }]}>
+          <AtomicIcon name="alert-circle" size="sm" color="error" />
+          <AtomicText
+            type="bodySmall"
+            color="error"
+            style={{ marginLeft: tokens.spacing.sm, flex: 1 }}
+          >
+            This screen is only visible in development mode. Never share sensitive values.
+          </AtomicText>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  infoCard: {
+    padding: 16,
+    marginHorizontal: 20,
+    marginTop: 12,
+    borderRadius: 12,
+  },
+  section: {
+    padding: 20,
+  },
+  variableCard: {
+    padding: 16,
+    marginBottom: 12,
+  },
+  variableHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  warningCard: {
+    flexDirection: "row",
+    padding: 16,
+    marginHorizontal: 20,
+    marginTop: 20,
+    borderRadius: 12,
+    alignItems: "flex-start",
+  },
+});

package/src/domains/dev/types.ts

@@ -0,0 +1,24 @@
+/**
+ * Dev Domain Types
+ * Environment variable types for dev tools
+ */
+
+export interface EnvVariable {
+  /** Environment variable key */
+  key: string;
+  /** Environment variable value (masked if sensitive) */
+  value: string;
+  /** Whether this is a sensitive value (API keys, secrets) */
+  sensitive?: boolean;
+}
+
+export interface EnvConfig {
+  /** List of environment variables to display */
+  variables: EnvVariable[];
+  /** App version info */
+  version?: string;
+  /** Build number */
+  buildNumber?: string;
+  /** Environment name (development, staging, production) */
+  environmentName?: string;
+}