@codyswann/lisa 4.74.9 → 4.75.0

package/plugins/lisa-expo-devin/skills/testing-library/references/query-priority.md

@@ -0,0 +1,291 @@
+# Query Priority Guide
+
+This reference provides detailed guidance on selecting the appropriate query for each testing scenario.
+
+## Priority Order
+
+The Testing Library team recommends queries in this priority order, based on how accessible they are to users and assistive technologies.
+
+### Priority 1: getByRole
+
+`getByRole` queries elements by their ARIA role, which is the primary way screen readers identify elements. This should be the default query for almost everything.
+
+```typescript
+// Buttons
+screen.getByRole("button", { name: "Submit" });
+screen.getByRole("button", { name: /save/i }); // Case-insensitive regex
+
+// Headings
+screen.getByRole("heading", { name: "Welcome" });
+screen.getByRole("heading", { level: 1 }); // h1
+screen.getByRole("heading", { level: 2, name: "Details" }); // h2 with name
+
+// Links
+screen.getByRole("link", { name: "View Profile" });
+
+// Form elements
+screen.getByRole("textbox"); // Input without specific type
+screen.getByRole("textbox", { name: "Email" }); // With accessible name
+screen.getByRole("checkbox", { name: "Accept terms" });
+screen.getByRole("radio", { name: "Option A" });
+screen.getByRole("combobox"); // Select/dropdown
+screen.getByRole("switch"); // Toggle switch
+
+// Status elements
+screen.getByRole("alert"); // Alert messages
+screen.getByRole("progressbar"); // Loading indicators
+screen.getByRole("status"); // Status updates
+
+// Navigation
+screen.getByRole("navigation");
+screen.getByRole("menu");
+screen.getByRole("menuitem", { name: "Settings" });
+
+// Tables
+screen.getByRole("table");
+screen.getByRole("row");
+screen.getByRole("cell", { name: "John Doe" });
+
+// Dialogs
+screen.getByRole("dialog");
+screen.getByRole("alertdialog");
+```
+
+#### Role Options
+
+```typescript
+// Filter by state
+screen.getByRole("button", { name: "Submit", disabled: true });
+screen.getByRole("checkbox", { checked: true });
+screen.getByRole("option", { selected: true });
+screen.getByRole("textbox", { busy: true });
+
+// Filter by expanded state (accordion, dropdown)
+screen.getByRole("button", { expanded: true });
+screen.getByRole("button", { expanded: false });
+
+// Filter by pressed state (toggle buttons)
+screen.getByRole("button", { pressed: true });
+```
+
+#### When getByRole Works with Split Text
+
+```typescript
+// Component with split text:
+// <Button><Icon /> Submit Form</Button>
+
+// This fails - text is split by Icon
+screen.getByText("Submit Form"); // Fails!
+
+// This works - queries by accessible name
+screen.getByRole("button", { name: /submit form/i }); // Works!
+```
+
+### Priority 2: getByLabelText
+
+Use for form fields that have associated labels. This is how users identify form inputs.
+
+```typescript
+// Standard label association
+// <label htmlFor="email">Email Address</label>
+// <input id="email" />
+screen.getByLabelText("Email Address");
+
+// Aria-labelledby
+// <span id="label-1">Username</span>
+// <input aria-labelledby="label-1" />
+screen.getByLabelText("Username");
+
+// Aria-label
+// <input aria-label="Search" />
+screen.getByLabelText("Search");
+
+// Case-insensitive matching
+screen.getByLabelText(/email/i);
+
+// Exact match
+screen.getByLabelText("Email", { exact: true });
+```
+
+### Priority 3: getByPlaceholderText
+
+Use when a form field has placeholder text but no visible label. Note: Placeholders are not a substitute for labels.
+
+```typescript
+// <input placeholder="Enter your email" />
+screen.getByPlaceholderText("Enter your email");
+screen.getByPlaceholderText(/email/i);
+```
+
+### Priority 4: getByText
+
+Use for non-interactive content like paragraphs, spans, and div text.
+
+```typescript
+// Static text content
+screen.getByText("Welcome to our app");
+screen.getByText(/welcome/i); // Case-insensitive
+
+// Partial matching
+screen.getByText("Welcome", { exact: false });
+
+// Custom normalizer (for whitespace issues)
+screen.getByText("Hello World", {
+  normalizer: str => str.replace(/\s+/g, " ").trim(),
+});
+```
+
+### Priority 5: getByDisplayValue
+
+Use for inputs with visible values (like filled form fields).
+
+```typescript
+// <input value="john@example.com" />
+screen.getByDisplayValue("john@example.com");
+
+// Select with selected option
+screen.getByDisplayValue("United States");
+```
+
+### Priority 6: getByAltText
+
+Use for images and elements with alt text.
+
+```typescript
+// <img alt="User avatar" src="..." />
+screen.getByAltText("User avatar");
+screen.getByAltText(/avatar/i);
+```
+
+### Priority 7: getByTitle
+
+Use for elements with title attribute. Less common in React Native.
+
+```typescript
+// <span title="Close">X</span>
+screen.getByTitle("Close");
+```
+
+### Priority 8: getByTestId (Last Resort)
+
+Use only when semantic queries are not possible. Adding unnecessary test IDs clutters components.
+
+```typescript
+// <View testID="custom-component">...</View>
+screen.getByTestId("custom-component");
+```
+
+#### Valid Use Cases for getByTestId
+
+1. Dynamic content that changes frequently
+2. Elements without semantic meaning
+3. Container elements that group other elements
+4. Canvas or custom drawing components
+
+```typescript
+// Valid: Dynamic chart container
+screen.getByTestId("chart-container");
+
+// Valid: Animation container
+screen.getByTestId("animation-wrapper");
+
+// Invalid: Button (use getByRole)
+screen.getByTestId("submit-button"); // Don't do this
+```
+
+## React Native Specific Roles
+
+React Native components map to accessibility roles:
+
+| Component          | Accessible Role    | Query Example                          |
+| ------------------ | ------------------ | -------------------------------------- |
+| `Button`           | `button`           | `getByRole("button")`                  |
+| `Text`             | `text`             | `getByRole("text")`                    |
+| `TextInput`        | `textbox`          | `getByRole("textbox")`                 |
+| `Switch`           | `switch`           | `getByRole("switch")`                  |
+| `Image`            | `image`            | `getByRole("image")` or `getByAltText` |
+| `Pressable`        | Depends on content | Set `accessibilityRole` explicitly     |
+| `TouchableOpacity` | Depends on content | Set `accessibilityRole` explicitly     |
+
+### Setting Explicit Roles
+
+```tsx
+// Pressable as a button
+<Pressable accessibilityRole="button" accessibilityLabel="Save">
+  <Text>Save</Text>
+</Pressable>
+
+// Custom checkbox
+<Pressable
+  accessibilityRole="checkbox"
+  accessibilityState={{ checked: isChecked }}
+  accessibilityLabel="Accept terms"
+>
+  <CheckIcon />
+</Pressable>
+
+// Link
+<Pressable accessibilityRole="link" accessibilityLabel="View profile">
+  <Text>Profile</Text>
+</Pressable>
+```
+
+## Common Mistakes
+
+### Using getByTestId When Semantic Query Works
+
+```typescript
+// Wrong
+screen.getByTestId("login-button");
+
+// Correct
+screen.getByRole("button", { name: "Login" });
+```
+
+### Using getByText for Interactive Elements
+
+```typescript
+// Wrong - getByText works but doesn't verify accessibility
+screen.getByText("Submit");
+
+// Correct - verifies element is actually a button
+screen.getByRole("button", { name: "Submit" });
+```
+
+### Case Sensitivity Issues
+
+```typescript
+// May fail if case doesn't match
+screen.getByText("Submit");
+
+// More robust - case insensitive
+screen.getByRole("button", { name: /submit/i });
+```
+
+### Querying Hidden Elements
+
+```typescript
+// By default, queries ignore hidden elements
+screen.getByRole("button", { name: "Submit" });
+
+// To include hidden elements
+screen.getByRole("button", { name: "Submit", hidden: true });
+```
+
+## Query Decision Tree
+
+1. Is it an interactive element (button, link, input)?
+   - Yes → Use `getByRole`
+2. Is it a form field with a label?
+   - Yes → Use `getByLabelText`
+3. Is it a form field with only placeholder?
+   - Yes → Use `getByPlaceholderText`
+4. Is it static text content?
+   - Yes → Use `getByText`
+5. Is it an image?
+   - Yes → Use `getByAltText`
+6. Does it have a value?
+   - Yes → Use `getByDisplayValue`
+7. None of the above?
+   - Consider if the component is accessible
+   - If not fixable, use `getByTestId` as last resort

package/plugins/lisa-expo-devin/skills/upgrading-expo/SKILL.md

@@ -0,0 +1,134 @@
+---
+name: upgrading-expo
+description: Guidelines for upgrading Expo SDK versions and fixing dependency issues
+version: 1.0.0
+license: MIT
+---
+
+## References
+
+- ./references/react-19.md -- SDK +54: React 19 changes (useContext → use, Context.Provider → Context, forwardRef removal)
+- ./references/new-architecture.md -- SDK +53: New Architecture migration guide
+- ./references/react-compiler.md -- SDK +54: React Compiler setup and migration guide
+- ./references/native-tabs.md -- SDK +55: Native tabs changes (Icon/Label/Badge now accessed via NativeTabs.Trigger.\*)
+- ./references/expo-av-to-audio.md -- SDK +55: Migrate audio playback and recording from expo-av to expo-audio
+- ./references/expo-av-to-video.md -- SDK +55: Migrate video playback from expo-av to expo-video
+- ./references/react-navigation-to-expo-router.md -- SDK +56: Migrate `@react-navigation/*` imports to `expo-router` entry points (codemod + manual mapping)
+
+## Beta/Preview Releases
+
+Beta versions use `.preview` suffix (e.g., `55.0.0-preview.2`), published under `@next` tag.
+
+Check if latest is beta: https://exp.host/--/api/v2/versions (look for `-preview` in `expoVersion`)
+
+```bash
+npx expo install expo@next --fix  # install beta
+```
+
+## Step-by-Step Upgrade Process
+
+1. Upgrade Expo and dependencies
+
+```bash
+npx expo install expo@latest
+npx expo install --fix
+```
+
+2. Run diagnostics: `npx expo-doctor`
+
+3. Clear caches and reinstall
+
+```bash
+npx expo export -p ios --clear
+rm -rf node_modules .expo
+watchman watch-del-all
+```
+
+## Breaking Changes Checklist
+
+- Check for removed APIs in release notes
+- Update import paths for moved modules
+- Review native module changes requiring prebuild
+- Test all camera, audio, and video features
+- Verify navigation still works correctly
+
+## Prebuild for Native Changes
+
+**First check if `ios/` and `android/` directories exist in the project.** If neither directory exists, the project uses Continuous Native Generation (CNG) and native projects are regenerated at build time — skip this section and "Clear caches for bare workflow" entirely.
+
+If upgrading requires native changes:
+
+```bash
+npx expo prebuild --clean
+```
+
+This regenerates the `ios` and `android` directories. Ensure the project is not a bare workflow app before running this command.
+
+## Clear caches for bare workflow
+
+These steps only apply when `ios/` and/or `android/` directories exist in the project:
+
+- Clear the cocoapods cache for iOS: `cd ios && pod install --repo-update`
+- Clear derived data for Xcode: `npx expo run:ios --no-build-cache`
+- Clear the Gradle cache for Android: `cd android && ./gradlew clean`
+
+## Housekeeping
+
+- Review release notes for the target SDK version at https://expo.dev/changelog
+- If using Expo SDK 54 or later, ensure react-native-worklets is installed — this is required for react-native-reanimated to work.
+- Enable React Compiler in SDK 54+ by adding `"experiments": { "reactCompiler": true }` to app.json — it's stable and recommended
+- Delete sdkVersion from `app.json` to let Expo manage it automatically
+- Remove implicit packages from `package.json`: `@babel/core`, `babel-preset-expo`, `expo-constants`.
+- If the babel.config.js only contains 'babel-preset-expo', delete the file
+- If the metro.config.js only contains expo defaults, delete the file
+
+## Deprecated Packages
+
+| Old Package          | Replacement                                          |
+| -------------------- | ---------------------------------------------------- |
+| `expo-av`            | `expo-audio` and `expo-video`                        |
+| `expo-permissions`   | Individual package permission APIs                   |
+| `@expo/vector-icons` | `expo-symbols` (for SF Symbols)                      |
+| `AsyncStorage`       | `expo-sqlite/localStorage/install`                   |
+| `expo-app-loading`   | `expo-splash-screen`                                 |
+| expo-linear-gradient | experimental_backgroundImage + CSS gradients in View |
+
+When migrating deprecated packages, update all code usage before removing the old package. For expo-av, consult the migration references to convert Audio.Sound to useAudioPlayer, Audio.Recording to useAudioRecorder, and Video components to VideoView with useVideoPlayer.
+
+## expo.install.exclude
+
+Check if package.json has excluded packages:
+
+```json
+{
+  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
+}
+```
+
+Exclusions are often workarounds that may no longer be needed after upgrading. Review each one.
+## Removing patches
+
+Check if there are any outdated patches in the `patches/` directory. Remove them if they are no longer needed.
+
+## Postcss
+
+- `autoprefixer` isn't needed in SDK +53. Remove it from dependencies and check `postcss.config.js` or `postcss.config.mjs` to remove it from the plugins list.
+- Use `postcss.config.mjs` in SDK +53.
+
+## Metro
+
+Remove redundant metro config options:
+
+- resolver.unstable_enablePackageExports is enabled by default in SDK +53.
+- `experimentalImportSupport` is enabled by default in SDK +54.
+- `EXPO_USE_FAST_RESOLVER=1` is removed in SDK +54.
+- cjs and mjs extensions are supported by default in SDK +50.
+- Expo webpack is deprecated, migrate to [Expo Router and Metro web](https://docs.expo.dev/router/migrate/from-expo-webpack/).
+
+## Hermes engine v1
+
+Since SDK 55, users can opt-in to use Hermes engine v1 for improved runtime performance. This requires setting `useHermesV1: true` in the `expo-build-properties` config plugin, and may require a specific version of the `hermes-compiler` npm package. Hermes v1 will become a default in some future SDK release.
+
+## New Architecture
+
+The new architecture is enabled by default, the app.json field `"newArchEnabled": true` is no longer needed as it's the default. Expo Go only supports the new architecture as of SDK +53.

package/plugins/lisa-expo-devin/skills/upgrading-expo/references/expo-av-to-audio.md

@@ -0,0 +1,132 @@
+# Migrating from expo-av to expo-audio
+
+## Imports
+
+```tsx
+// Before
+import { Audio } from 'expo-av';
+
+// After
+import { useAudioPlayer, useAudioRecorder, RecordingPresets, AudioModule, setAudioModeAsync } from 'expo-audio';
+```
+
+## Audio Playback
+
+### Before (expo-av)
+
+```tsx
+const [sound, setSound] = useState<Audio.Sound>();
+
+async function playSound() {
+  const { sound } = await Audio.Sound.createAsync(require('./audio.mp3'));
+  setSound(sound);
+  await sound.playAsync();
+}
+
+useEffect(() => {
+  return sound ? () => { sound.unloadAsync(); } : undefined;
+}, [sound]);
+```
+
+### After (expo-audio)
+
+```tsx
+const player = useAudioPlayer(require('./audio.mp3'));
+
+// Play
+player.play();
+```
+
+## Audio Recording
+
+### Before (expo-av)
+
+```tsx
+const [recording, setRecording] = useState<Audio.Recording>();
+
+async function startRecording() {
+  await Audio.requestPermissionsAsync();
+  await Audio.setAudioModeAsync({ allowsRecordingIOS: true, playsInSilentModeIOS: true });
+  const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
+  setRecording(recording);
+}
+
+async function stopRecording() {
+  await recording?.stopAndUnloadAsync();
+  const uri = recording?.getURI();
+}
+```
+
+### After (expo-audio)
+
+```tsx
+const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
+
+async function startRecording() {
+  await AudioModule.requestRecordingPermissionsAsync();
+  await recorder.prepareToRecordAsync();
+  recorder.record();
+}
+
+async function stopRecording() {
+  await recorder.stop();
+  const uri = recorder.uri;
+}
+```
+
+## Audio Mode
+
+### Before (expo-av)
+
+```tsx
+await Audio.setAudioModeAsync({
+  allowsRecordingIOS: true,
+  playsInSilentModeIOS: true,
+  staysActiveInBackground: true,
+  interruptionModeIOS: InterruptionModeIOS.DoNotMix,
+});
+```
+
+### After (expo-audio)
+
+```tsx
+await setAudioModeAsync({
+  playsInSilentMode: true,
+  shouldPlayInBackground: true,
+  interruptionMode: 'doNotMix',
+});
+```
+
+## API Mapping
+
+| expo-av | expo-audio |
+|---------|------------|
+| `Audio.Sound.createAsync()` | `useAudioPlayer(source)` |
+| `sound.playAsync()` | `player.play()` |
+| `sound.pauseAsync()` | `player.pause()` |
+| `sound.setPositionAsync(ms)` | `player.seekTo(seconds)` |
+| `sound.setVolumeAsync(vol)` | `player.volume = vol` |
+| `sound.setRateAsync(rate)` | `player.playbackRate = rate` |
+| `sound.setIsLoopingAsync(loop)` | `player.loop = loop` |
+| `sound.unloadAsync()` | Automatic via hook |
+| `playbackStatus.positionMillis` | `player.currentTime` (seconds) |
+| `playbackStatus.durationMillis` | `player.duration` (seconds) |
+| `playbackStatus.isPlaying` | `player.playing` |
+| `Audio.Recording.createAsync()` | `useAudioRecorder(preset)` |
+| `Audio.RecordingOptionsPresets.*` | `RecordingPresets.*` |
+| `recording.stopAndUnloadAsync()` | `recorder.stop()` |
+| `recording.getURI()` | `recorder.uri` |
+| `Audio.requestPermissionsAsync()` | `AudioModule.requestRecordingPermissionsAsync()` |
+
+## Key Differences
+
+- **No auto-reset on finish**: After `play()` completes, the player stays paused at the end. To replay, call `player.seekTo(0)` then `play()`
+- **Time in seconds**: expo-audio uses seconds, not milliseconds (matching web standards)
+- **Immediate loading**: Audio loads immediately when the hook mounts—no explicit preloading needed
+- **Automatic cleanup**: No need to call `unloadAsync()`, hooks handle resource cleanup on unmount
+- **Multiple players**: Create multiple `useAudioPlayer` instances and store them—all load immediately
+- **Direct property access**: Set volume, rate, loop directly on the player object (`player.volume = 0.5`)
+
+## API Reference
+
+https://docs.expo.dev/versions/latest/sdk/audio/