@ivannxbt/ai-config 0.1.0

package/.agents/skills/react-native-expo/references/react-19-migration.md

@@ -0,0 +1,365 @@
+# React 19 Migration Guide for React Native
+
+**Last Updated:** 2025-11-22
+**React Native Versions:** 0.78+ (React 19 support added)
+**Source:** [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
+
+---
+
+## Breaking Changes Summary
+
+| Removed API | Replacement | Required Action |
+|-------------|-------------|-----------------|
+| `propTypes` | TypeScript | Remove all `propTypes` declarations |
+| `forwardRef` | Regular `ref` prop | Remove wrapper, pass `ref` directly |
+| `defaultProps` (function components) | Default parameters | Use JS default params |
+| Legacy Context (`contextTypes`) | `useContext` hook | Migrate to modern Context API |
+| String refs (`ref="input"`) | Callback/object refs | Use `useRef` hook |
+
+---
+
+## 1. propTypes Removed
+
+### What Changed
+
+React 19 **completely removed** runtime `propTypes` validation. No errors, no warnings - they're simply ignored.
+
+### Before (Old Code)
+
+```typescript
+import PropTypes from 'prop-types';
+
+function Button({ title, onPress, variant }) {
+  return <Pressable onPress={onPress}><Text>{title}</Text></Pressable>;
+}
+
+Button.propTypes = {  // ❌ Silently ignored in React 19
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary'])
+};
+
+Button.defaultProps = {  // ❌ Also ignored for function components
+  variant: 'primary'
+};
+```
+
+### After (Use TypeScript)
+
+```typescript
+type ButtonProps = {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+};
+
+function Button({ title, onPress, variant = 'primary' }: ButtonProps) {
+  return <Pressable onPress={onPress}><Text>{title}</Text></Pressable>;
+}
+```
+
+### Migration Steps
+
+1. **Install TypeScript (if not already)**:
+   ```bash
+   npm install --save-dev typescript @types/react @types/react-native
+   ```
+
+2. **Run React 19 codemod**:
+   ```bash
+   npx @codemod/react-19 upgrade
+   ```
+
+3. **Manually convert remaining propTypes**:
+   - Find all `propTypes` declarations: `grep -r "\.propTypes" src/`
+   - Convert to TypeScript types
+   - Remove `prop-types` package: `npm uninstall prop-types`
+
+---
+
+## 2. forwardRef Deprecated
+
+### What Changed
+
+`ref` is now a regular prop - no need for `forwardRef` wrapper.
+
+### Before (Old Code)
+
+```typescript
+import { forwardRef } from 'react';
+
+const TextInput = forwardRef((props, ref) => {  // ❌ Deprecated
+  return <NativeTextInput ref={ref} {...props} />;
+});
+
+// Usage
+<TextInput ref={inputRef} />
+```
+
+### After (React 19)
+
+```typescript
+function TextInput({ ref, ...props }) {  // ✅ ref is a regular prop
+  return <NativeTextInput ref={ref} {...props} />;
+}
+
+// Usage (same)
+<TextInput ref={inputRef} />
+```
+
+### Migration Steps
+
+1. **Find all forwardRef usages**:
+   ```bash
+   grep -r "forwardRef" src/
+   ```
+
+2. **Unwrap components**:
+   - Remove `forwardRef()` wrapper
+   - Add `ref` to function parameters
+   - Keep everything else the same
+
+3. **Codemod can help**:
+   ```bash
+   npx @codemod/react-19 upgrade
+   ```
+
+---
+
+## 3. New Hooks
+
+React 19 introduces several new hooks that replace common patterns.
+
+### `useActionState` (replaces form state patterns)
+
+**Replaces:** Manual form state management with `useState` + async functions
+
+```typescript
+import { useActionState } from 'react';
+
+function LoginForm() {
+  const [state, loginAction, isPending] = useActionState(
+    async (prevState, formData) => {
+      try {
+        const user = await api.login(formData);
+        return { success: true, user };
+      } catch (error) {
+        return { success: false, error: error.message };
+      }
+    },
+    { success: false }  // Initial state
+  );
+
+  return (
+    <View>
+      <TextInput name="email" />
+      <TextInput name="password" secureTextEntry />
+      <Button onPress={() => loginAction(new FormData())}>
+        {isPending ? 'Logging in...' : 'Login'}
+      </Button>
+      {!state.success && state.error && <Text>{state.error}</Text>}
+    </View>
+  );
+}
+```
+
+### `useOptimistic` (optimistic UI updates)
+
+**Use case:** Update UI immediately, then sync with server
+
+```typescript
+import { useOptimistic } from 'react';
+
+function TodoItem({ todo, onToggle }) {
+  const [optimisticTodo, addOptimisticToggle] = useOptimistic(
+    todo,
+    (current, toggle) => ({ ...current, completed: toggle })
+  );
+
+  async function handleToggle() {
+    addOptimisticToggle(!optimisticTodo.completed);  // UI updates immediately
+    await onToggle(todo.id);  // Server syncs in background
+  }
+
+  return (
+    <Pressable onPress={handleToggle}>
+      <Text style={{ textDecorationLine: optimisticTodo.completed ? 'line-through' : 'none' }}>
+        {optimisticTodo.text}
+      </Text>
+    </Pressable>
+  );
+}
+```
+
+### `use` (read promises/contexts during render)
+
+**Replaces:** `React.Suspense` + manual promise handling
+
+```typescript
+import { use, Suspense } from 'react';
+
+function UserProfile({ userPromise }) {
+  const user = use(userPromise);  // Suspends if promise is pending
+
+  return <Text>{user.name}</Text>;
+}
+
+// Usage
+<Suspense fallback={<Text>Loading...</Text>}>
+  <UserProfile userPromise={fetchUser(id)} />
+</Suspense>
+```
+
+---
+
+## 4. Common Migration Errors
+
+### Error: "propTypes is not a function"
+
+**Cause:** Trying to use `propTypes` in React 19
+
+**Fix:** Remove all `propTypes` declarations, use TypeScript
+
+```bash
+# Find all propTypes
+grep -r "\.propTypes" src/
+
+# Remove prop-types package
+npm uninstall prop-types
+```
+
+### Error: "Warning: forwardRef is deprecated"
+
+**Cause:** Using `forwardRef` wrapper
+
+**Fix:** Remove wrapper, add `ref` as regular prop parameter
+
+```typescript
+// Before
+const Component = forwardRef((props, ref) => <View ref={ref} />);
+
+// After
+function Component({ ref, ...props }) {
+  return <View ref={ref} />;
+}
+```
+
+### Error: "defaultProps is ignored for function components"
+
+**Cause:** Using `defaultProps` on function components
+
+**Fix:** Use JavaScript default parameters
+
+```typescript
+// Before
+function Button({ title, variant }) { ... }
+Button.defaultProps = { variant: 'primary' };
+
+// After
+function Button({ title, variant = 'primary' }) { ... }
+```
+
+---
+
+## 5. Recommended Migration Order
+
+1. **Upgrade React Native to 0.78+** (includes React 19)
+   ```bash
+   npm install react-native@0.78 react@19
+   ```
+
+2. **Run codemod**
+   ```bash
+   npx @codemod/react-19 upgrade
+   ```
+
+3. **Install TypeScript** (if not already)
+   ```bash
+   npm install --save-dev typescript @types/react @types/react-native
+   ```
+
+4. **Convert propTypes to TypeScript**
+   - Use codemod or manually convert
+   - Remove `prop-types` package when done
+
+5. **Remove forwardRef wrappers**
+   - Codemod handles most cases
+   - Manually check complex components
+
+6. **Update defaultProps**
+   - Replace with default parameters
+   - Class components can still use `defaultProps`
+
+7. **Test thoroughly**
+   - Run on both iOS and Android
+   - Check all form submissions
+   - Verify ref forwarding still works
+
+---
+
+## 6. Compatibility Notes
+
+### What Still Works
+
+✅ **Class components** - Fully supported, no changes needed
+✅ **Hooks** - All existing hooks work the same
+✅ **Context API** - No changes
+✅ **Memo/useMemo** - No changes
+✅ **TypeScript** - Better type inference
+
+### What Doesn't Work
+
+❌ **propTypes** - Removed, use TypeScript
+❌ **forwardRef** - Deprecated, use regular ref prop
+❌ **defaultProps** (function components) - Use default params
+❌ **String refs** - Removed, use `useRef`
+❌ **Legacy Context** - Removed, use modern Context API
+
+---
+
+## 7. Resources
+
+- **Official Upgrade Guide**: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
+- **Codemod Tool**: https://github.com/codemod-com/react-19
+- **React 19 Release**: https://react.dev/blog/2024/12/05/react-19
+- **TypeScript Handbook**: https://www.typescriptlang.org/docs/handbook/react.html
+
+---
+
+## 8. Quick Reference: Before & After
+
+```typescript
+// ❌ OLD (React 18 / RN 0.72-0.77)
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+
+const Button = forwardRef(({ title, onPress, variant }, ref) => {
+  return <Pressable ref={ref} onPress={onPress}><Text>{title}</Text></Pressable>;
+});
+
+Button.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary'])
+};
+
+Button.defaultProps = {
+  variant: 'primary'
+};
+
+// ✅ NEW (React 19 / RN 0.78+)
+type ButtonProps = {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+  ref?: React.Ref<View>;
+};
+
+function Button({ title, onPress, variant = 'primary', ref }: ButtonProps) {
+  return <Pressable ref={ref} onPress={onPress}><Text>{title}</Text></Pressable>;
+}
+```
+
+---
+
+**Bottom Line:** React 19 removes runtime validation (propTypes) in favor of compile-time validation (TypeScript). Use the codemod to automate most of the migration, then manually convert remaining propTypes to TypeScript types.

package/.agents/skills/react-native-expo/scripts/check-rn-version.sh

@@ -0,0 +1,121 @@
+#!/bin/bash
+
+# React Native Version Checker
+# Detects React Native version and warns about architecture requirements
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# Get React Native version from package.json
+RN_VERSION=$(node -p "require('./package.json').dependencies['react-native']" 2>/dev/null | tr -d '^~' || echo "not-found")
+
+if [ "$RN_VERSION" = "not-found" ] || [ "$RN_VERSION" = "undefined" ]; then
+    echo -e "${RED}❌ React Native not found in package.json${NC}"
+    exit 1
+fi
+
+# Extract major and minor version
+MAJOR=$(echo "$RN_VERSION" | cut -d. -f1)
+MINOR=$(echo "$RN_VERSION" | cut -d. -f2)
+VERSION_NUM="${MAJOR}.${MINOR}"
+
+echo ""
+echo "React Native Version: $RN_VERSION"
+echo ""
+
+# Check version and provide guidance
+if [ "$MAJOR" -ge 1 ] || ([ "$MAJOR" = "0" ] && [ "$MINOR" -ge 82 ]); then
+    echo -e "${GREEN}✅ React Native $VERSION_NUM - New Architecture MANDATORY${NC}"
+    echo ""
+    echo "Notes:"
+    echo "  - Legacy Architecture completely removed"
+    echo "  - Cannot disable New Architecture"
+    echo "  - Hermes is the default (and only supported) JS engine"
+    echo "  - All dependencies must support Fabric/TurboModules"
+    echo ""
+
+elif [ "$MAJOR" = "0" ] && [ "$MINOR" -ge 76 ] && [ "$MINOR" -le 81 ]; then
+    echo -e "${YELLOW}⚠️  React Native $VERSION_NUM - Interop Layer Available${NC}"
+    echo ""
+    echo "Notes:"
+    echo "  - New Architecture is default but can be disabled"
+    echo "  - Legacy Architecture frozen (no new features/fixes)"
+    echo "  - Interop layer helps migration"
+    echo "  - Recommended: Enable New Architecture and test before 0.82+"
+    echo ""
+    echo "To check if New Architecture is enabled:"
+    echo "  Android: grep newArchEnabled android/gradle.properties"
+    echo "  iOS: grep RCT_NEW_ARCH_ENABLED ios/Podfile"
+    echo ""
+
+elif [ "$MAJOR" = "0" ] && [ "$MINOR" -lt 76 ]; then
+    echo -e "${RED}⚠️  React Native $VERSION_NUM - Legacy Architecture${NC}"
+    echo ""
+    echo "Recommendations:"
+    echo "  1. Upgrade to 0.76+ to access New Architecture with interop layer"
+    echo "  2. Test with New Architecture enabled"
+    echo "  3. Fix incompatible dependencies (Redux, i18n, etc.)"
+    echo "  4. Then upgrade to 0.82+"
+    echo ""
+    echo "DO NOT skip directly to 0.82+ - you'll lose the interop layer!"
+    echo ""
+else
+    echo -e "${YELLOW}⚠️  Unrecognized version: $RN_VERSION${NC}"
+fi
+
+# Check for React version (should be 19+ for RN 0.78+)
+REACT_VERSION=$(node -p "require('./package.json').dependencies.react" 2>/dev/null | tr -d '^~' || echo "not-found")
+
+if [ "$REACT_VERSION" != "not-found" ] && [ "$REACT_VERSION" != "undefined" ]; then
+    REACT_MAJOR=$(echo "$REACT_VERSION" | cut -d. -f1)
+
+    if [ "$MAJOR" = "0" ] && [ "$MINOR" -ge 78 ]; then
+        if [ "$REACT_MAJOR" -lt 19 ]; then
+            echo -e "${RED}❌ React $REACT_VERSION is too old for React Native $VERSION_NUM${NC}"
+            echo "   Upgrade to React 19+: npm install react@19"
+            echo ""
+        else
+            echo -e "${GREEN}✅ React $REACT_VERSION${NC}"
+            echo ""
+        fi
+    fi
+fi
+
+# Check for common incompatible dependencies
+echo "Checking for known incompatible dependencies..."
+echo ""
+
+ISSUES_FOUND=false
+
+# Check for old Redux
+if grep -q '"redux"' package.json 2>/dev/null; then
+    echo -e "${YELLOW}⚠️  Legacy 'redux' package found${NC}"
+    echo "   Use Redux Toolkit instead: npm install @reduxjs/toolkit"
+    ISSUES_FOUND=true
+fi
+
+# Check for i18n-js
+if grep -q '"i18n-js"' package.json 2>/dev/null; then
+    echo -e "${YELLOW}⚠️  'i18n-js' may be incompatible with New Architecture${NC}"
+    echo "   Use 'react-i18next' instead: npm install react-i18next i18next"
+    ISSUES_FOUND=true
+fi
+
+# Check for CodePush
+if grep -q '"react-native-code-push"' package.json 2>/dev/null; then
+    echo -e "${YELLOW}⚠️  CodePush has known issues with New Architecture${NC}"
+    echo "   Consider alternatives or monitor GitHub issues"
+    ISSUES_FOUND=true
+fi
+
+if [ "$ISSUES_FOUND" = false ]; then
+    echo -e "${GREEN}✅ No known incompatible dependencies found${NC}"
+fi
+
+echo ""
+echo "For more info: https://reactnative.dev/docs/new-architecture-intro"

package/.agents/skills/react-native-expo/scripts/example-script.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# [TODO: Script Name]
+# [TODO: Brief description of what this script does]
+
+# Example script structure - delete if not needed
+
+set -e  # Exit on error
+
+# [TODO: Add your script logic here]
+
+echo "Example script - replace or delete this file"
+
+# Usage:
+# ./scripts/example-script.sh [args]

package/.agents/skills/react-native-testing/SKILL.md

@@ -0,0 +1,161 @@
+---
+name: react-native-testing
+description: >
+  Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`).
+  Use when writing, reviewing, or fixing React Native component tests.
+  Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers,
+  userEvent, fireEvent, waitFor, and async patterns.
+  Supports v13 (React 18, sync render) and v14 (React 19+, async render).
+  Triggers on: test files for React Native components, RNTL imports, mentions of
+  "testing library", "write tests", "component tests", or "RNTL".
+---
+
+# RNTL Test Writing Guide
+
+**IMPORTANT:** Your training data about `@testing-library/react-native` may be outdated or incorrect — API signatures, sync/async behavior, and available functions differ between v13 and v14. Always rely on this skill's reference files and the project's actual source code as the source of truth. Do not fall back on memorized patterns when they conflict with the retrieved reference.
+
+## Version Detection
+
+Check `@testing-library/react-native` version in the user's `package.json`:
+
+- **v14.x** → load [references/api-reference-v14.md](references/api-reference-v14.md) (React 19+, async APIs, `test-renderer`)
+- **v13.x** → load [references/api-reference-v13.md](references/api-reference-v13.md) (React 18+, sync APIs, `react-test-renderer`)
+
+Use the version-specific reference for render patterns, fireEvent sync/async behavior, screen API, configuration, and dependencies.
+
+## Query Priority
+
+Use in this order: `getByRole` > `getByLabelText` > `getByPlaceholderText` > `getByText` > `getByDisplayValue` > `getByTestId` (last resort).
+
+## Query Variants
+
+| Variant       | Use case                 | Returns                       | Async |
+| ------------- | ------------------------ | ----------------------------- | ----- |
+| `getBy*`      | Element must exist       | element instance (throws)     | No    |
+| `getAllBy*`   | Multiple must exist      | element instance[] (throws)   | No    |
+| `queryBy*`    | Check non-existence ONLY | element instance \| null      | No    |
+| `queryAllBy*` | Count elements           | element instance[]            | No    |
+| `findBy*`     | Wait for element         | `Promise<element instance>`   | Yes   |
+| `findAllBy*`  | Wait for multiple        | `Promise<element instance[]>` | Yes   |
+
+## Interactions
+
+Prefer `userEvent` over `fireEvent`. userEvent is always async.
+
+```tsx
+const user = userEvent.setup();
+await user.press(element); // full press sequence
+await user.longPress(element, { duration: 800 }); // long press
+await user.type(textInput, 'Hello'); // char-by-char typing
+await user.clear(textInput); // clear TextInput
+await user.paste(textInput, 'pasted text'); // paste into TextInput
+await user.scrollTo(scrollView, { y: 100 }); // scroll
+```
+
+`fireEvent` — use only when `userEvent` doesn't support the event. See version-specific reference for sync/async behavior:
+
+```tsx
+fireEvent.press(element);
+fireEvent.changeText(textInput, 'new text');
+fireEvent(element, 'blur');
+```
+
+## Assertions (Jest Matchers)
+
+Available automatically with any `@testing-library/react-native` import.
+
+| Matcher                                    | Use for                                   |
+| ------------------------------------------ | ----------------------------------------- |
+| `toBeOnTheScreen()`                        | Element exists in tree                    |
+| `toBeVisible()`                            | Element visible (not hidden/display:none) |
+| `toBeEnabled()` / `toBeDisabled()`         | Disabled state via `aria-disabled`        |
+| `toBeChecked()` / `toBePartiallyChecked()` | Checked state                             |
+| `toBeSelected()`                           | Selected state                            |
+| `toBeExpanded()` / `toBeCollapsed()`       | Expanded state                            |
+| `toBeBusy()`                               | Busy state                                |
+| `toHaveTextContent(text)`                  | Text content match                        |
+| `toHaveDisplayValue(value)`                | TextInput display value                   |
+| `toHaveAccessibleName(name)`               | Accessible name                           |
+| `toHaveAccessibilityValue(val)`            | Accessibility value                       |
+| `toHaveStyle(style)`                       | Style match                               |
+| `toHaveProp(name, value?)`                 | Prop check (last resort)                  |
+| `toContainElement(el)`                     | Contains child element                    |
+| `toBeEmptyElement()`                       | No children                               |
+
+## Rules
+
+1. **Use `screen`** for queries, not destructuring from `render()`
+2. **Use `getByRole` first** with `{ name: '...' }` option
+3. **Use `queryBy*` ONLY** for `.not.toBeOnTheScreen()` checks
+4. **Use `findBy*`** for async elements, NOT `waitFor` + `getBy*`
+5. **Never put side-effects in `waitFor`** (no `fireEvent`/`userEvent` inside)
+6. **One assertion per `waitFor`**
+7. **Never pass empty callbacks to `waitFor`**
+8. **Don't wrap in `act()`** - `render`, `fireEvent`, `userEvent` handle it
+9. **Don't call `cleanup()`** - automatic after each test
+10. **Prefer ARIA props** (`role`, `aria-label`, `aria-disabled`) over legacy `accessibility*` props
+11. **Use RNTL matchers** over raw prop assertions
+
+## `*ByRole` Quick Reference
+
+Common roles: `button`, `text`, `heading` (alias: `header`), `searchbox`, `switch`, `checkbox`, `radio`, `img`, `link`, `alert`, `menu`, `menuitem`, `tab`, `tablist`, `progressbar`, `slider`, `spinbutton`, `timer`, `toolbar`.
+
+`getByRole` options: `{ name, disabled, selected, checked, busy, expanded, value: { min, max, now, text } }`.
+
+For `*ByRole` to match, the element must be an accessibility element:
+
+- `Text`, `TextInput`, `Switch` are by default
+- `View` needs `accessible={true}` (or use `Pressable`/`TouchableOpacity`)
+
+## waitFor
+
+```tsx
+// Correct: action first, then wait for result
+fireEvent.press(button);
+await waitFor(() => {
+  expect(screen.getByText('Result')).toBeOnTheScreen();
+});
+
+// Better: use findBy* instead
+fireEvent.press(button);
+expect(await screen.findByText('Result')).toBeOnTheScreen();
+```
+
+Options: `waitFor(cb, { timeout: 1000, interval: 50 })`. Works with Jest fake timers automatically.
+
+## Fake Timers
+
+Recommended with `userEvent` (press/longPress involve real durations):
+
+```tsx
+jest.useFakeTimers();
+
+test('with fake timers', async () => {
+  const user = userEvent.setup();
+  render(<Component />);
+  await user.press(screen.getByRole('button'));
+  // ...
+});
+```
+
+## Custom Render
+
+Wrap providers using `wrapper` option:
+
+```tsx
+function renderWithProviders(ui: React.ReactElement) {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeProvider>
+        <AuthProvider>{children}</AuthProvider>
+      </ThemeProvider>
+    ),
+  });
+}
+```
+
+## References
+
+- [v13 API Reference](references/api-reference-v13.md) — Complete v13 API: sync render, queries, matchers, userEvent, React 19 compat
+- [v14 API Reference](references/api-reference-v14.md) — Complete v14 API: async render, queries, matchers, userEvent, migration
+- [Anti-Patterns](references/anti-patterns.md) — Common mistakes to avoid