app framework

2026-03-27 00:38:12 -04:00
parent a395f9422c
commit bba670491e
39 changed files with 11781 additions and 1 deletions
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+import { ScreenContainer } from '@/components/common/ScreenContainer';
+import { AuthStackParamList } from '@/navigation/types';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { useAppStore } from '@/store/useAppStore';
+
+type Props = NativeStackScreenProps<AuthStackParamList, 'Login'>;
+
+export function LoginScreen({ navigation }: Props): React.JSX.Element {
+  const setAuthenticatedUser = useAppStore((state) => state.setAuthenticatedUser);
+
+  return (
+    <ScreenContainer>
+      <Text style={styles.eyebrow}>FletchIQ</Text>
+      <Text style={styles.title}>Login to continue scoring</Text>
+      <Text style={styles.subtitle}>
+        Wire this form to Supabase auth and persist the session in global state.
+      </Text>
+      <TextInput style={styles.input} placeholder="Email" placeholderTextColor={colors.muted} />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        placeholderTextColor={colors.muted}
+        secureTextEntry
+      />
+      <Pressable
+        style={styles.primaryButton}
+        onPress={() =>
+          setAuthenticatedUser({
+            id: 'demo-user',
+            email: 'archer@example.com',
+            displayName: 'Demo Archer',
+          })
+        }
+      >
+        <Text style={styles.primaryButtonText}>Login</Text>
+      </Pressable>
+      <Pressable onPress={() => navigation.navigate('Register')}>
+        <Text style={styles.link}>Need an account? Register</Text>
+      </Pressable>
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  eyebrow: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  title: {
+    color: colors.text,
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  subtitle: {
+    color: colors.muted,
+    lineHeight: 22,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 16,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 14,
+    backgroundColor: colors.surface,
+  },
+  primaryButton: {
+    backgroundColor: colors.primary,
+    paddingVertical: 16,
+    borderRadius: 16,
+    alignItems: 'center',
+  },
+  primaryButtonText: {
+    color: colors.surface,
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  link: {
+    color: colors.primary,
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+});
+
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, TextInput } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+import { ScreenContainer } from '@/components/common/ScreenContainer';
+import { AuthStackParamList } from '@/navigation/types';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+
+type Props = NativeStackScreenProps<AuthStackParamList, 'Register'>;
+
+export function RegisterScreen({ navigation }: Props): React.JSX.Element {
+  return (
+    <ScreenContainer>
+      <Text style={styles.title}>Create your archer profile</Text>
+      <Text style={styles.subtitle}>
+        Add registration, email verification, and optional club metadata here.
+      </Text>
+      <TextInput style={styles.input} placeholder="Display name" placeholderTextColor={colors.muted} />
+      <TextInput style={styles.input} placeholder="Email" placeholderTextColor={colors.muted} />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        placeholderTextColor={colors.muted}
+        secureTextEntry
+      />
+      <Pressable style={styles.primaryButton}>
+        <Text style={styles.primaryButtonText}>Register</Text>
+      </Pressable>
+      <Pressable onPress={() => navigation.goBack()}>
+        <Text style={styles.link}>Back to login</Text>
+      </Pressable>
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    color: colors.text,
+    fontSize: 30,
+    fontWeight: '800',
+  },
+  subtitle: {
+    color: colors.muted,
+    lineHeight: 22,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 16,
+    paddingHorizontal: spacing.md,
+    paddingVertical: 14,
+    backgroundColor: colors.surface,
+  },
+  primaryButton: {
+    backgroundColor: colors.primary,
+    paddingVertical: 16,
+    borderRadius: 16,
+    alignItems: 'center',
+  },
+  primaryButtonText: {
+    color: colors.surface,
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  link: {
+    color: colors.primary,
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+});
+