feat: add AccessControlCard and DiagnosticsCard components; remove unused components

- Introduced AccessControlCard for managing access modes with visual feedback.
- Added DiagnosticsCard to display security availability and key version information.
- Removed ActionButton, ActionsPanel, Card, Header, KeyRotationPanel, ModeSelector, SecretForm, SecretsList, and formatError utility as they were no longer needed.
- Updated constants to streamline access modes and added biometric prompt configuration.
- Enhanced StorageCard to manage secure storage with improved UI and functionality.
- Introduced Section and StatusLine components for better layout and error handling.
- Updated TypeScript configuration to include hooks and errors paths for improved module resolution.

Co-authored-by: Copilot <copilot@github.com>

Author: mCodex

example/ios/Podfile.lock

@@ -368,18 +368,23 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
-				OTHER_CFLAGS = "$(inherited)";
+				OTHER_CFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
 				OTHER_CPLUSPLUSFLAGS = (
 					"$(OTHER_CFLAGS)",
 					"-DFOLLY_NO_CONFIG",
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
+				SWIFT_ENABLE_EXPLICIT_MODULES = NO;
 				USE_HERMES = true;
 			};
 			name = Debug;
@@ -437,17 +442,22 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
-				OTHER_CFLAGS = "$(inherited)";
+				OTHER_CFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
 				OTHER_CPLUSPLUSFLAGS = (
 					"$(OTHER_CFLAGS)",
 					"-DFOLLY_NO_CONFIG",
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				SWIFT_ENABLE_EXPLICIT_MODULES = NO;
 				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};

example/ios/SensitiveInfoExample.xcodeproj/project.pbxproj

@@ -11,6 +11,11 @@ const root = path.resolve(__dirname, '..')
  */
 const config = {
 	watchFolders: [root],
+	resolver: {
+		// Honor the `exports` map in package.json so subpath imports like
+		// `react-native-sensitive-info/hooks` and `/errors` resolve correctly.
+		unstable_enablePackageExports: true,
+	},
 }
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config)

example/metro.config.js

@@ -1,245 +1,59 @@
-import type React from 'react'
-import { useCallback, useMemo, useState } from 'react'
-import { ScrollView, StyleSheet } from 'react-native'
+import { useMemo, useState } from 'react'
+import { ScrollView, StyleSheet, Text } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { getItem } from 'react-native-sensitive-info'
-import {
-	useSecureStorage,
-	useSecurityAvailability,
-} from 'react-native-sensitive-info/hooks'
-import ActionsPanel from './components/ActionsPanel'
-import Header from './components/Header'
-import KeyRotationPanel from './components/KeyRotationPanel'
-import ModeSelector from './components/ModeSelector'
-import SecretForm from './components/SecretForm'
-import SecretsList from './components/SecretsList'
+import AccessControlCard from './components/AccessControlCard'
+import DiagnosticsCard from './components/DiagnosticsCard'
+import KeyRotationCard from './components/KeyRotationCard'
+import StorageCard from './components/StorageCard'
 import {
 	ACCESS_MODES,
-	DEFAULT_KEY,
-	DEFAULT_SECRET,
+	BIOMETRIC_PROMPT,
 	DEFAULT_SERVICE,
-	INITIAL_STATUS,
 	type ModeKey,
 } from './constants'
-import { formatError } from './utils/formatError'
 
-const App: React.FC = () => {
-	const [service, setService] = useState(DEFAULT_SERVICE)
-	const [keyName, setKeyName] = useState(DEFAULT_KEY)
-	const [secret, setSecret] = useState(DEFAULT_SECRET)
+const App = () => {
 	const [mode, setMode] = useState<ModeKey>('open')
-	const [status, setStatus] = useState(INITIAL_STATUS)
-	const [pending, setPending] = useState(false)
-
-	const trimmedService = useMemo(() => {
-		const next = service.trim()
-		return next.length > 0 ? next : DEFAULT_SERVICE
-	}, [service])
-
-	const selectedMode = useMemo(() => {
-		const fallback = ACCESS_MODES[0]
-		return ACCESS_MODES.find((candidate) => candidate.key === mode) ?? fallback
-	}, [mode])
-
-	const authenticationPrompt = useMemo(() => {
-		if (selectedMode.key !== 'biometric') {
-			return undefined
-		}
 
+	const { options, prompt } = useMemo(() => {
+		const entry =
+			ACCESS_MODES.find((candidate) => candidate.key === mode) ??
+			ACCESS_MODES[0]
+		const isBiometric = entry.key === 'biometric'
 		return {
-			title: 'Unlock your secret',
-			subtitle: 'Biometric authentication is required to continue',
-			description: 'This demo stores data behind your biometric enrollment.',
-			cancel: 'Cancel',
-		} as const
-	}, [selectedMode.key])
-
-	const secureOptions = useMemo(
-		() => ({
-			service: trimmedService,
-			accessControl: selectedMode.accessControl,
-			authenticationPrompt,
-			includeValues: true,
-		}),
-		[authenticationPrompt, selectedMode.accessControl, trimmedService]
-	)
-
-	const {
-		items,
-		isLoading,
-		error,
-		saveSecret,
-		removeSecret,
-		clearAll,
-		refreshItems,
-	} = useSecureStorage(secureOptions)
-
-	const { data: availability } = useSecurityAvailability()
-
-	const handleSave = useCallback(async () => {
-		const normalizedKey = keyName.trim()
-		if (normalizedKey.length === 0) {
-			setStatus('Please provide a key before saving.')
-			return
-		}
-
-		setPending(true)
-		try {
-			const result = await saveSecret(normalizedKey, secret)
-			if (result.success) {
-				setStatus('Secret saved securely.')
-			} else {
-				setStatus(result.error?.message ?? 'Unable to save the secret.')
-			}
-		} catch (err) {
-			setStatus(formatError(err))
-		} finally {
-			setPending(false)
+			options: {
+				service: DEFAULT_SERVICE,
+				accessControl: entry.accessControl,
+				...(isBiometric ? { authenticationPrompt: BIOMETRIC_PROMPT } : {}),
+			},
+			prompt: isBiometric ? BIOMETRIC_PROMPT : undefined,
 		}
-	}, [keyName, saveSecret, secret])
-
-	const handleReveal = useCallback(async () => {
-		const normalizedKey = keyName.trim()
-		if (normalizedKey.length === 0) {
-			setStatus('Provide the key you would like to reveal.')
-			return
-		}
-
-		setPending(true)
-		try {
-			const item = await getItem(normalizedKey, {
-				service: trimmedService,
-				accessControl: selectedMode.accessControl,
-				authenticationPrompt,
-				includeValue: true,
-			})
-
-			if (item?.value) {
-				setStatus(`Secret for "${normalizedKey}" → ${item.value}`)
-			} else {
-				setStatus('That key has no stored value yet.')
-			}
-		} catch (err) {
-			setStatus(formatError(err))
-		} finally {
-			setPending(false)
-		}
-	}, [
-		authenticationPrompt,
-		keyName,
-		selectedMode.accessControl,
-		trimmedService,
-	])
-
-	const handleRemove = useCallback(async () => {
-		const normalizedKey = keyName.trim()
-		if (normalizedKey.length === 0) {
-			setStatus('Provide the key you would like to forget.')
-			return
-		}
-
-		setPending(true)
-		try {
-			const result = await removeSecret(normalizedKey)
-			setStatus(
-				result.success ? 'Secret deleted.' : 'Secret could not be deleted.'
-			)
-		} catch (err) {
-			setStatus(formatError(err))
-		} finally {
-			setPending(false)
-		}
-	}, [keyName, removeSecret])
-
-	const handleClear = useCallback(async () => {
-		setPending(true)
-		try {
-			const result = await clearAll()
-			setStatus(
-				result.success
-					? 'All secrets cleared for this service.'
-					: 'Nothing to clear.'
-			)
-		} catch (err) {
-			setStatus(formatError(err))
-		} finally {
-			setPending(false)
-		}
-	}, [clearAll])
-
-	const handleRefresh = useCallback(async () => {
-		setPending(true)
-		try {
-			await refreshItems()
-			setStatus('Inventory refreshed.')
-		} catch (err) {
-			setStatus(formatError(err))
-		} finally {
-			setPending(false)
-		}
-	}, [refreshItems])
+	}, [mode])
 
 	return (
 		<SafeAreaView style={styles.safeArea}>
 			<ScrollView
+				contentContainerStyle={styles.scroll}
 				keyboardShouldPersistTaps="handled"
-				contentContainerStyle={styles.scrollContent}
 			>
-				<Header
-					title="Sensitive Info Playground"
-					subtitle="Store a small secret, lock it with biometrics if you like, and review the inventory below."
-				/>
-
-				<SecretForm
-					service={service}
-					onServiceChange={setService}
-					keyName={keyName}
-					onKeyNameChange={setKeyName}
-					secret={secret}
-					onSecretChange={setSecret}
-					servicePlaceholder={DEFAULT_SERVICE}
-					keyPlaceholder={DEFAULT_KEY}
-					secretPlaceholder={DEFAULT_SECRET}
-				/>
-
-				<ModeSelector
-					modes={ACCESS_MODES}
-					selectedKey={selectedMode.key}
-					onSelect={setMode}
-					availability={availability ?? null}
-				/>
-
-				<ActionsPanel
-					onSave={handleSave}
-					onReveal={handleReveal}
-					onRemove={handleRemove}
-					onClear={handleClear}
-					onRefresh={handleRefresh}
-					pending={pending}
-					status={status}
-					errorMessage={error?.message}
-				/>
-
-				<SecretsList
-					items={items}
-					isLoading={isLoading}
-					service={trimmedService}
-				/>
-
-				<KeyRotationPanel service={trimmedService} />
+				<Text style={styles.heading}>Sensitive Info Playground</Text>
+				<AccessControlCard mode={mode} onChange={setMode} />
+				<StorageCard options={options} authenticationPrompt={prompt} />
+				<KeyRotationCard options={options} />
+				<DiagnosticsCard options={options} />
 			</ScrollView>
 		</SafeAreaView>
 	)
 }
 
 const styles = StyleSheet.create({
-	safeArea: {
-		flex: 1,
-		backgroundColor: '#f6f8fb',
-	},
-	scrollContent: {
-		padding: 20,
-		paddingBottom: 32,
+	safeArea: { flex: 1, backgroundColor: '#f1f5f9' },
+	scroll: { padding: 16, paddingBottom: 32 },
+	heading: {
+		fontSize: 22,
+		fontWeight: '700',
+		color: '#0f172a',
+		marginBottom: 16,
 	},
 })