@codyswann/lisa 1.0.0

package/expo/copy-overwrite/.claude/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/expo/copy-overwrite/.easignore.extra

@@ -0,0 +1,2 @@
+# Ignoring large assets not needed for build
+public/images/

package/expo/copy-overwrite/.mcp.json

@@ -0,0 +1,33 @@
+{
+  "mcpServers": {
+    "expo-docs": {
+      "command": "npx",
+      "args": ["expo-local-docs-mcp"]
+    },
+    "sonarqube": {
+      "command": "docker",
+      "args": [
+        "run",
+        "-i",
+        "--rm",
+        "-e",
+        "SONARQUBE_TOKEN",
+        "-e",
+        "SONARQUBE_ORG",
+        "mcp/sonarqube"
+      ],
+      "env": {
+        "SONARQUBE_TOKEN": "${SONAR_TOKEN}",
+        "SONARQUBE_ORG": "${SONAR_ORG}"
+      }
+    },
+    "atlassian": {
+      "type": "sse",
+      "url": "https://mcp.atlassian.com/v1/sse"
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"]
+    }
+  }
+}

package/expo/copy-overwrite/eslint-plugin-component-structure/README.md

@@ -0,0 +1,234 @@
+# ESLint Plugin: Component Structure
+
+Custom ESLint rules for enforcing component structure standards in the frontend.
+
+## Rules
+
+### enforce-component-structure
+
+Enforces the Container/View pattern for React components by ensuring component directories contain exactly three files: `*Container.tsx`, `*View.tsx`, and `index.tsx`.
+
+This rule helps maintain consistent component organization and separation of concerns throughout the codebase.
+
+#### Rule Details
+
+This rule checks component directories to ensure they follow the standard three-file structure:
+
+- `ComponentNameContainer.tsx` - Contains logic, state, and data fetching
+- `ComponentNameView.tsx` - Pure UI presentation receiving props only
+- `index.tsx` - Default export of the Container
+
+**Where does this rule apply?**
+
+- Files in `features/**/components/` directories
+- Files in `components/` directory
+- **Excludes**: `components/ui/`, `components/shared/`, `components/icons/`
+
+#### Configuration
+
+In `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "component-structure/enforce-component-structure": "error"
+  }
+}
+```
+
+---
+
+### no-return-in-view
+
+Prevents early returns and conditional logic in View components to maintain pure presentation components.
+
+#### Rule Details
+
+View components should only contain JSX presentation logic. Any conditional rendering or early returns should be handled in the Container component or passed as props.
+
+**Where does this rule apply?**
+
+- Files matching `*View.tsx`, `*View.jsx`
+
+#### Configuration
+
+In `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "component-structure/no-return-in-view": "error"
+  }
+}
+```
+
+---
+
+### require-memo-in-view
+
+Enforces the use of `React.memo()` for View components to optimize rendering performance.
+
+#### Rule Details
+
+All View components should be wrapped with `React.memo()` to prevent unnecessary re-renders when props haven't changed.
+
+**Where does this rule apply?**
+
+- Files matching `*View.tsx`, `*View.jsx`
+- **Excludes**: `components/ui/` directory
+
+#### Configuration
+
+In `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "component-structure/require-memo-in-view": "error"
+  }
+}
+```
+
+---
+
+### single-component-per-file
+
+Enforces one React component per file to improve code organization and maintainability.
+
+#### Rule Details
+
+This rule ensures that each file contains exactly one React component. Multiple components in a single file make code harder to navigate, test, and maintain.
+
+**What is considered a React component?**
+
+- Any function with PascalCase naming that returns JSX
+- This includes components wrapped with `memo()` or `React.memo()`
+- Both arrow functions and function declarations
+
+**Where does this rule apply?**
+
+- Files matching `*View.tsx`, `*View.jsx`, `*Container.tsx`, `*Container.jsx`
+- In `features/**/components/` directories
+- In `components/` directory
+- **Excludes**: `components/ui/`, `components/shared/`, `components/icons/`
+
+#### Examples
+
+❌ **Incorrect** (multiple components):
+
+```typescript
+// MessageListView.tsx
+const MessageItem = ({ item }) => <div>{item}</div>;
+
+const MessageListView = ({ messages }) => (
+  <div>
+    {messages.map(msg => <MessageItem item={msg} />)}
+  </div>
+);
+
+export default MessageListView;
+```
+
+✅ **Correct** (one component per file):
+
+```typescript
+// MessageItem.tsx
+const MessageItem = ({ item }) => <div>{item}</div>;
+export default MessageItem;
+
+// MessageListView.tsx
+import MessageItem from "./MessageItem";
+
+const MessageListView = ({ messages }) => (
+  <div>
+    {messages.map(msg => <MessageItem item={msg} />)}
+  </div>
+);
+
+export default MessageListView;
+```
+
+#### Configuration
+
+In `.eslintrc.json`:
+
+```json
+{
+  "rules": {
+    "component-structure/single-component-per-file": "error"
+  }
+}
+```
+
+#### When to Disable
+
+This rule should rarely be disabled. If you have a valid use case, use an inline comment:
+
+```typescript
+/* eslint-disable component-structure/single-component-per-file --
+   Reason: These components are tightly coupled and only used together
+*/
+```
+
+## Installation
+
+This plugin is installed locally as a file dependency:
+
+```json
+{
+  "devDependencies": {
+    "eslint-plugin-component-structure": "file:./eslint-plugin-component-structure"
+  }
+}
+```
+
+## Usage
+
+### ESLint 9 Flat Config (Recommended)
+
+```javascript
+// eslint.config.mjs
+import componentStructurePlugin from './eslint-plugin-component-structure/index.js';
+
+export default [
+  {
+    plugins: {
+      'component-structure': componentStructurePlugin,
+    },
+    rules: {
+      'component-structure/enforce-component-structure': 'error',
+      'component-structure/no-return-in-view': 'error',
+      'component-structure/require-memo-in-view': 'error',
+      'component-structure/single-component-per-file': 'error',
+    },
+  },
+];
+```
+
+### Legacy Config (.eslintrc.json)
+
+```json
+{
+  "plugins": ["component-structure"],
+  "rules": {
+    "component-structure/enforce-component-structure": "error",
+    "component-structure/no-return-in-view": "error",
+    "component-structure/require-memo-in-view": "error",
+    "component-structure/single-component-per-file": "error"
+  }
+}
+```
+
+## Version
+
+1.0.0
+
+## Contributing
+
+When adding new rules to this plugin:
+
+1. Create the rule implementation in `rules/`
+2. Add comprehensive tests in `__tests__/`
+3. Export the rule in `index.js`
+4. Update this README with rule documentation
+5. Add the rule to `.eslintrc.json` configuration

package/expo/copy-overwrite/eslint-plugin-component-structure/__tests__/plugin-index.test.js

@@ -0,0 +1,84 @@
+/**
+ * Unit tests for the plugin index
+ *
+ * Verifies that all rules are properly registered and exported from the plugin.
+ * Also verifies that the plugin has proper ESLint 9 flat config metadata.
+ * @module eslint-plugin-component-structure/tests/plugin-index
+ */
+
+const plugin = require("../index");
+
+describe("eslint-plugin-component-structure", () => {
+  describe("plugin meta (ESLint 9 flat config)", () => {
+    it("should export a meta object", () => {
+      expect(plugin).toHaveProperty("meta");
+      expect(typeof plugin.meta).toBe("object");
+    });
+
+    it("should have name property in meta", () => {
+      expect(plugin.meta).toHaveProperty("name");
+      expect(plugin.meta.name).toBe("eslint-plugin-component-structure");
+    });
+
+    it("should have version property in meta", () => {
+      expect(plugin.meta).toHaveProperty("version");
+      expect(plugin.meta.version).toBe("1.0.0");
+    });
+  });
+
+  describe("plugin exports", () => {
+    it("should export a rules object", () => {
+      expect(plugin).toHaveProperty("rules");
+      expect(typeof plugin.rules).toBe("object");
+    });
+
+    it("should export enforce-component-structure rule", () => {
+      expect(plugin.rules).toHaveProperty("enforce-component-structure");
+      expect(typeof plugin.rules["enforce-component-structure"]).toBe("object");
+      expect(plugin.rules["enforce-component-structure"]).toHaveProperty(
+        "create"
+      );
+      expect(plugin.rules["enforce-component-structure"]).toHaveProperty(
+        "meta"
+      );
+    });
+
+    it("should export no-return-in-view rule", () => {
+      expect(plugin.rules).toHaveProperty("no-return-in-view");
+      expect(typeof plugin.rules["no-return-in-view"]).toBe("object");
+      expect(plugin.rules["no-return-in-view"]).toHaveProperty("create");
+      expect(plugin.rules["no-return-in-view"]).toHaveProperty("meta");
+    });
+
+    it("should export require-memo-in-view rule", () => {
+      expect(plugin.rules).toHaveProperty("require-memo-in-view");
+      expect(typeof plugin.rules["require-memo-in-view"]).toBe("object");
+      expect(plugin.rules["require-memo-in-view"]).toHaveProperty("create");
+      expect(plugin.rules["require-memo-in-view"]).toHaveProperty("meta");
+    });
+
+    it("should export single-component-per-file rule", () => {
+      expect(plugin.rules).toHaveProperty("single-component-per-file");
+      expect(typeof plugin.rules["single-component-per-file"]).toBe("object");
+      expect(plugin.rules["single-component-per-file"]).toHaveProperty(
+        "create"
+      );
+      expect(plugin.rules["single-component-per-file"]).toHaveProperty("meta");
+    });
+
+    it("should have correct number of rules", () => {
+      const ruleCount = Object.keys(plugin.rules).length;
+      expect(ruleCount).toBe(4);
+    });
+  });
+
+  describe("rule metadata", () => {
+    it("single-component-per-file should have correct metadata", () => {
+      const rule = plugin.rules["single-component-per-file"];
+      expect(rule.meta.type).toBe("problem");
+      expect(rule.meta.docs).toHaveProperty("description");
+      expect(rule.meta.docs.description).toContain("one React component");
+      expect(rule.meta.messages).toHaveProperty("multipleComponents");
+    });
+  });
+});