@rosetears/aili-pi 0.1.0

package/skills/react-native-dev/references/forms.md

@@ -0,0 +1,300 @@
+# Forms Reference
+
+React Hook Form + Zod validation for React Native / Expo.
+
+## Setup
+
+```bash
+npx expo install react-hook-form zod @hookform/resolvers
+```
+
+## Basic Form
+
+```tsx
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const schema = z.object({
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "Min 8 characters"),
+});
+type FormData = z.infer<typeof schema>;
+
+export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: "", password: "" },
+  });
+
+  return (
+    <View>
+      {/* Controller pattern — repeat for each field */}
+      <Controller
+        control={control}
+        name="email"
+        render={({ field: { onChange, onBlur, value } }) => (
+          <TextInput value={value} onChangeText={onChange} onBlur={onBlur}
+            placeholder="Email" keyboardType="email-address" autoCapitalize="none" />
+        )}
+      />
+      {errors.email && <Text style={styles.error}>{errors.email.message}</Text>}
+
+      {/* Same Controller pattern for password, with secureTextEntry */}
+
+      <Pressable onPress={handleSubmit(onSubmit)} disabled={isSubmitting}>
+        <Text>{isSubmitting ? "Submitting..." : "Login"}</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+## Zod Schema Patterns
+
+```tsx
+import { z } from "zod";
+
+// Registration form
+const registerSchema = z.object({
+  name: z.string().min(2, "Name must be at least 2 characters").max(50),
+  email: z.string().email("Invalid email address"),
+  password: z.string()
+    .min(8, "At least 8 characters")
+    .regex(/[A-Z]/, "Must contain uppercase letter")
+    .regex(/[0-9]/, "Must contain a number"),
+  confirmPassword: z.string(),
+  age: z.number({ invalid_type_error: "Age must be a number" }).int().min(18, "Must be 18+").optional(),
+  role: z.enum(["admin", "user", "guest"]),
+  agreedToTerms: z.literal(true, { errorMap: () => ({ message: "Must agree to terms" }) }),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+});
+
+// All-optional schema — use .optional() or .partial()
+const profileSchema = registerSchema.pick({ name: true, email: true }).partial();
+
+// Nested objects — compose schemas with z.array() and references
+const addressSchema = z.object({ street: z.string().min(1), city: z.string().min(1), country: z.string().length(2) });
+const orderSchema = z.object({ items: z.array(z.object({ productId: z.string(), quantity: z.number().int().positive() })).min(1), shippingAddress: addressSchema });
+```
+
+## Form State
+
+```tsx
+const {
+  control,
+  handleSubmit,
+  watch,
+  setValue,
+  getValues,
+  reset,
+  setError,
+  clearErrors,
+  formState: {
+    errors,
+    isSubmitting,
+    isValid,
+    isDirty,           // Any field changed from defaultValues
+    dirtyFields,       // Which fields changed
+    touchedFields,     // Which fields were focused
+  },
+} = useForm<FormData>({ resolver: zodResolver(schema) });
+
+// Watch a field value
+const password = watch("password");
+const allValues = watch(); // Watch all
+
+// Set a value programmatically
+setValue("email", "prefilled@example.com", { shouldValidate: true });
+
+// Reset form
+reset();                          // Back to defaultValues
+reset({ email: "new@email.com" }); // Reset with new values
+
+// Set server-side errors
+setError("email", { message: "Email already in use" });
+```
+
+## Async Submit with Error Handling
+
+```tsx
+const { handleSubmit, setError } = useForm<FormData>();
+
+const onSubmit = async (data: FormData) => {
+  try {
+    await api.post("/auth/register", data);
+    router.replace("/home");
+  } catch (error) {
+    if (error instanceof ApiError && error.status === 409) {
+      setError("email", { message: "Email already registered" });
+    } else {
+      setError("root", { message: "Something went wrong. Please try again." });
+    }
+  }
+};
+
+// Display root error
+{errors.root && <Text style={styles.rootError}>{errors.root.message}</Text>}
+```
+
+## Multi-Step Forms
+
+```tsx
+const schema = z.object({
+  step1: z.object({ name: z.string().min(1), email: z.string().email() }),
+  step2: z.object({ phone: z.string(), address: z.string() }),
+  step3: z.object({ password: z.string().min(8), confirmPassword: z.string() }),
+});
+
+type FormData = z.infer<typeof schema>;
+
+export function MultiStepForm() {
+  const [step, setStep] = useState(1);
+  const { control, handleSubmit, trigger, formState: { errors } } = useForm<FormData>({
+    resolver: zodResolver(schema),
+  });
+
+  const nextStep = async () => {
+    const stepKey = `step${step}` as keyof FormData;
+    const valid = await trigger(stepKey); // Validate only current step's fields
+    if (valid) setStep(s => s + 1);
+  };
+
+  // Render step component by index, with Back/Next/Submit navigation
+  // Key pattern: trigger(stepKey) validates only current step before advancing
+  return (/* StepOne | StepTwo | StepThree + Back/Next/Submit buttons */);
+
+}
+```
+
+## Reusable Field Components
+
+```tsx
+// components/ui/FormField.tsx
+import { Controller, Control, FieldValues, Path } from "react-hook-form";
+
+interface FormFieldProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  placeholder?: string;
+  secureTextEntry?: boolean;
+  keyboardType?: TextInputProps["keyboardType"];
+}
+
+export function FormField<T extends FieldValues>({
+  control, name, label, placeholder, secureTextEntry, keyboardType,
+}: FormFieldProps<T>) {
+  // Wraps Controller with: label, styled TextInput, and error message display
+  // Uses fieldState.error for per-field error, accessibilityLabel for a11y
+  return (
+    <Controller control={control} name={name}
+      render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
+        <View>
+          <Text>{label}</Text>
+          <TextInput value={value} onChangeText={onChange} onBlur={onBlur}
+            placeholder={placeholder} secureTextEntry={secureTextEntry} keyboardType={keyboardType}
+            style={[styles.input, error && styles.inputError]} accessibilityLabel={label} />
+          {error && <Text style={styles.errorText}>{error.message}</Text>}
+        </View>
+      )}
+    />
+  );
+}
+
+// Usage
+<FormField control={control} name="email" label="Email" keyboardType="email-address" />
+<FormField control={control} name="password" label="Password" secureTextEntry />
+```
+
+## Dynamic Arrays
+
+```tsx
+import { useFieldArray } from "react-hook-form";
+
+const schema = z.object({
+  tags: z.array(z.object({ value: z.string().min(1) })).min(1, "Add at least one tag"),
+});
+
+function TagsForm() {
+  const { control, handleSubmit } = useForm<z.infer<typeof schema>>();
+  const { fields, append, remove } = useFieldArray({ control, name: "tags" });
+
+  return (
+    <View>
+      {fields.map((field, index) => (
+        <View key={field.id} style={{ flexDirection: "row" }}>
+          <Controller
+            control={control}
+            name={`tags.${index}.value`}
+            render={({ field: { onChange, value } }) => (
+              <TextInput value={value} onChangeText={onChange} placeholder="Tag" />
+            )}
+          />
+          <Pressable onPress={() => remove(index)}><Text>✕</Text></Pressable>
+        </View>
+      ))}
+      <Pressable onPress={() => append({ value: "" })}><Text>+ Add Tag</Text></Pressable>
+    </View>
+  );
+}
+```
+
+## Keyboard Handling
+
+```tsx
+import { KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+
+export function FormScreen() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+    >
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        keyboardShouldPersistTaps="handled"  // Tapping outside keyboard doesn't dismiss
+      >
+        <LoginForm />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+## Testing Forms
+
+```tsx
+import { render, fireEvent, waitFor, screen } from "@testing-library/react-native";
+import { userEvent } from "@testing-library/react-native";
+
+it("validates required fields", async () => {
+  render(<LoginForm onSubmit={jest.fn()} />);
+  fireEvent.press(screen.getByText("Login")); // Submit without filling
+
+  await waitFor(() => {
+    expect(screen.getByText("Invalid email")).toBeTruthy();
+    expect(screen.getByText("Min 8 characters")).toBeTruthy();
+  });
+});
+
+it("submits with valid data", async () => {
+  const onSubmit = jest.fn();
+  const user = userEvent.setup();
+  render(<LoginForm onSubmit={onSubmit} />);
+
+  await user.type(screen.getByPlaceholderText("Email"), "user@example.com");
+  await user.type(screen.getByPlaceholderText("Password"), "password123");
+  await user.press(screen.getByText("Login"));
+
+  await waitFor(() => {
+    expect(onSubmit).toHaveBeenCalledWith({ email: "user@example.com", password: "password123" });
+  });
+});
+```

package/skills/react-native-dev/references/native-capabilities.md

@@ -0,0 +1,163 @@
+# Native Capabilities Reference
+
+Camera, location, permissions, haptics, notifications, and biometrics for Expo/React Native.
+
+## Permissions
+
+All Expo modules that need permissions expose a `use*Permissions()` hook. Follow this pattern:
+
+1. Call the permission hook to get current status and a request function
+2. Check `status` — if not `granted`, show a rationale and call `requestPermission()`
+3. If the user denies twice, `canAskAgain` becomes `false` — direct them to Settings
+
+```tsx
+import { useCameraPermissions } from "expo-camera";
+
+const [permission, requestPermission] = useCameraPermissions();
+
+if (!permission?.granted) {
+  // Show rationale, then call requestPermission()
+}
+```
+
+| Module | Permission Hook |
+|--------|----------------|
+| `expo-camera` | `useCameraPermissions()` |
+| `expo-location` | `useForegroundPermissions()` / `useBackgroundPermissions()` |
+| `expo-media-library` | `usePermissions()` |
+| `expo-notifications` | `getPermissionsAsync()` / `requestPermissionsAsync()` |
+| `expo-contacts` | `usePermissions()` |
+
+For modules without a hook, use `requestPermissionsAsync()` / `getPermissionsAsync()` directly.
+
+## Camera
+
+```tsx
+import { CameraView, useCameraPermissions } from "expo-camera";
+
+const [permission, requestPermission] = useCameraPermissions();
+const cameraRef = useRef<CameraView>(null);
+
+// Capture a photo
+const photo = await cameraRef.current?.takePictureAsync();
+
+// Toggle front/back
+const [facing, setFacing] = useState<"front" | "back">("back");
+```
+
+For simple photo/video selection without a camera UI, use `expo-image-picker`:
+
+```tsx
+import * as ImagePicker from "expo-image-picker";
+
+const result = await ImagePicker.launchImageLibraryAsync({
+  mediaTypes: ["images"],
+  allowsEditing: true,
+  quality: 0.8,
+});
+```
+
+## Location
+
+```tsx
+import * as Location from "expo-location";
+
+// One-time location
+const { status } = await Location.requestForegroundPermissionsAsync();
+if (status === "granted") {
+  const location = await Location.getCurrentPositionAsync({});
+  // location.coords.latitude, location.coords.longitude
+}
+```
+
+For background location tracking, request `requestBackgroundPermissionsAsync()` and register a background task. Background location requires the `location` background mode in `app.json`:
+
+```json
+{
+  "expo": {
+    "ios": { "infoPlist": { "UIBackgroundModes": ["location"] } }
+  }
+}
+```
+
+## Haptics
+
+```tsx
+import * as Haptics from "expo-haptics";
+
+// Light tap feedback (button press)
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+// Success / error / warning
+Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+
+// Selection change (picker scroll)
+Haptics.selectionAsync();
+```
+
+| Style | When to Use |
+|-------|-------------|
+| `ImpactFeedbackStyle.Light` | Button taps, toggles |
+| `ImpactFeedbackStyle.Medium` | Drag snaps, significant actions |
+| `ImpactFeedbackStyle.Heavy` | Destructive actions, impacts |
+| `NotificationFeedbackType.Success` | Task completed |
+| `NotificationFeedbackType.Warning` | Attention needed |
+| `NotificationFeedbackType.Error` | Action failed |
+| `selectionAsync()` | Picker/slider value changes |
+
+## Notifications
+
+### Push Notifications (Expo)
+
+```tsx
+import * as Notifications from "expo-notifications";
+import * as Device from "expo-device";
+
+async function registerForPushNotifications() {
+  if (!Device.isDevice) return; // Push doesn't work on simulators
+
+  const { status } = await Notifications.requestPermissionsAsync();
+  if (status !== "granted") return;
+
+  const token = await Notifications.getExpoPushTokenAsync({
+    projectId: "your-project-id", // From app.json > extra > eas > projectId
+  });
+  // Send token.data to your server
+}
+```
+
+### Notification Handlers
+
+```tsx
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
+// Listen for received/tapped notifications
+const subscription = Notifications.addNotificationReceivedListener(notification => {
+  // Notification received while app is foregrounded
+});
+```
+
+## Biometrics
+
+```tsx
+import * as LocalAuthentication from "expo-local-authentication";
+
+const hasHardware = await LocalAuthentication.hasHardwareAsync();
+const isEnrolled = await LocalAuthentication.isEnrolledAsync();
+
+if (hasHardware && isEnrolled) {
+  const result = await LocalAuthentication.authenticateAsync({
+    promptMessage: "Authenticate to continue",
+    fallbackLabel: "Use passcode",
+  });
+  if (result.success) {
+    // Authenticated
+  }
+}
+```