@codyswann/lisa 1.0.0

package/expo/copy-overwrite/eslint-plugin-component-structure/rules/single-component-per-file.js

@@ -0,0 +1,238 @@
+/**
+ * ESLint rule to enforce exactly one React component per file
+ *
+ * This rule ensures that View and Container files contain only one React component.
+ * A React component is defined as any PascalCase function that returns JSX.
+ *
+ * Applies to:
+ * - *View.tsx, *View.jsx files
+ * - *Container.tsx, *Container.jsx files
+ *
+ * Excludes:
+ * - components/ui/** directory (third-party generated files)
+ * - components/custom/ui/** directory (third-party generated files)
+ * - components/shared/** directory (shared utility components)
+ * @module eslint-plugin-component-structure/rules/single-component-per-file
+ */
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce exactly one React component per View or Container file",
+      category: "Best Practices",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      multipleComponents:
+        "Only one React component is allowed per file. Found '{{componentName}}' in addition to '{{firstComponentName}}'. Extract '{{componentName}}' to a separate file.",
+    },
+  },
+
+  create(context) {
+    const filename = context.getFilename();
+    const normalizedPath = filename.replace(/\\/g, "/");
+
+    // Only check View and Container files
+    const isViewOrContainer =
+      filename.endsWith("View.tsx") ||
+      filename.endsWith("View.jsx") ||
+      filename.endsWith("Container.tsx") ||
+      filename.endsWith("Container.jsx");
+
+    if (!isViewOrContainer) {
+      return {};
+    }
+
+    // Exclude components/ui/**, components/custom/ui/**, and components/shared/** directories
+    if (
+      normalizedPath.includes("/components/ui/") ||
+      normalizedPath.includes("/components/custom/ui/") ||
+      normalizedPath.includes("/components/shared/") ||
+      normalizedPath.startsWith("components/ui/") ||
+      normalizedPath.startsWith("components/custom/ui/") ||
+      normalizedPath.startsWith("components/shared/")
+    ) {
+      return {};
+    }
+
+    // Check if file is in features/**/components directory or components directory
+    const isFeatureComponent =
+      normalizedPath.includes("/features/") &&
+      normalizedPath.includes("/components/");
+    const isComponentsDir =
+      normalizedPath.includes("/components/") ||
+      normalizedPath.startsWith("components/");
+
+    if (!isFeatureComponent && !isComponentsDir) {
+      return {};
+    }
+
+    const state = {
+      components: [], // Array of { name, node }
+      firstComponent: null,
+    };
+
+    /**
+     * Recursively checks if an expression contains JSX
+     * @param {object} node - AST node to check
+     * @returns {boolean} True if expression contains JSX
+     */
+    const containsJSX = node => {
+      if (!node) {
+        return false;
+      }
+
+      const type = node.type;
+      if (type === "JSXElement" || type === "JSXFragment") {
+        return true;
+      }
+
+      // Check conditional expressions: condition ? consequent : alternate
+      if (type === "ConditionalExpression") {
+        return containsJSX(node.consequent) || containsJSX(node.alternate);
+      }
+
+      // Check logical expressions: left && right, left || right
+      if (type === "LogicalExpression") {
+        return containsJSX(node.left) || containsJSX(node.right);
+      }
+
+      // Check parenthesized expressions
+      if (type === "ParenthesizedExpression") {
+        return containsJSX(node.expression);
+      }
+
+      return false;
+    };
+
+    /**
+     * Checks if a function returns JSX by examining its body
+     * @param {object} node - AST node to check
+     * @returns {boolean} True if function returns JSX
+     */
+    const returnsJSX = node => {
+      if (!node || !node.body) {
+        return false;
+      }
+
+      // Handle arrow function with direct JSX return (no block)
+      if (node.type === "ArrowFunctionExpression") {
+        return containsJSX(node.body);
+      }
+
+      // Handle function with block body
+      if (node.body.type === "BlockStatement") {
+        const hasJSXReturn = node.body.body.some(statement => {
+          return (
+            statement.type === "ReturnStatement" &&
+            containsJSX(statement.argument)
+          );
+        });
+
+        if (hasJSXReturn) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    /**
+     * Records a component if it meets all criteria (PascalCase + returns JSX)
+     * @param {string} name - Component name
+     * @param {object} node - AST node
+     * @param {object} functionNode - Function AST node
+     */
+    const recordComponent = (name, node, functionNode) => {
+      // Check if name is PascalCase
+      if (!/^[A-Z]/.test(name)) {
+        return;
+      }
+
+      // Check if function returns JSX
+      if (!returnsJSX(functionNode)) {
+        return;
+      }
+
+      // This is a component - record it
+      if (state.components.length === 0) {
+        state.firstComponent = { name, node };
+      }
+      state.components.push({ name, node });
+    };
+
+    return {
+      VariableDeclarator(node) {
+        if (node.id.type !== "Identifier") {
+          return;
+        }
+
+        const name = node.id.name;
+
+        // Check for arrow function assignment: const Component = () => <div />
+        if (node.init && node.init.type === "ArrowFunctionExpression") {
+          const jsxCheck = returnsJSX(node.init);
+          if (jsxCheck) {
+            recordComponent(name, node, node.init);
+            return;
+          }
+        }
+
+        // Check for memo-wrapped component: const Component = memo(() => <div />)
+        if (
+          node.init &&
+          node.init.type === "CallExpression" &&
+          ((node.init.callee.type === "Identifier" &&
+            node.init.callee.name === "memo") ||
+            (node.init.callee.type === "MemberExpression" &&
+              node.init.callee.object.name === "React" &&
+              node.init.callee.property.name === "memo"))
+        ) {
+          const firstArg = node.init.arguments[0];
+          if (firstArg && returnsJSX(firstArg)) {
+            recordComponent(name, node, firstArg);
+            return;
+          }
+        }
+
+        // Check for React.FC typed components: const Component: React.FC = () => <div />
+        if (
+          node.init &&
+          node.init.type === "ArrowFunctionExpression" &&
+          node.id.typeAnnotation &&
+          returnsJSX(node.init)
+        ) {
+          recordComponent(name, node, node.init);
+        }
+      },
+
+      FunctionDeclaration(node) {
+        if (!node.id || node.id.type !== "Identifier") {
+          return;
+        }
+
+        const name = node.id.name;
+        recordComponent(name, node, node);
+      },
+
+      "Program:exit"() {
+        // Report all components after the first one
+        if (state.components.length > 1) {
+          state.components.slice(1).forEach(component => {
+            context.report({
+              node: component.node,
+              messageId: "multipleComponents",
+              data: {
+                componentName: component.name,
+                firstComponentName: state.firstComponent.name,
+              },
+            });
+          });
+        }
+      },
+    };
+  },
+};

package/expo/copy-overwrite/eslint-plugin-ui-standards/README.md

@@ -0,0 +1,260 @@
+# ESLint Plugin: UI Standards
+
+Custom ESLint rules for enforcing UI-related coding standards in React Native applications.
+
+## Rules
+
+### no-classname-outside-ui
+
+Restricts the use of `className` prop to designated UI component directories.
+
+#### Rule Details
+
+This rule ensures that `className` (used with Tailwind/NativeWind) is only used in reusable UI components. Business components should use semantic props instead of styling classes.
+
+**Why this rule exists:**
+- Keeps styling concerns in UI layer components
+- Business components remain style-agnostic
+- Makes component APIs more semantic and maintainable
+- Facilitates design system consistency
+
+**Where is className allowed?**
+- `components/ui/` - Core UI components
+- `components/custom/ui/` - Custom UI components
+
+#### Examples
+
+**Incorrect** (className in business component):
+
+```tsx
+// features/user/components/ProfileCard/ProfileCardView.tsx
+const ProfileCardView = ({ user }) => (
+  <View className="p-4 bg-white rounded-lg">  {/* className here - NOT allowed */}
+    <Text className="text-lg font-bold">{user.name}</Text>
+  </View>
+);
+```
+
+**Correct** (using UI components with semantic props):
+
+```tsx
+// features/user/components/ProfileCard/ProfileCardView.tsx
+import { Card, Heading } from '@/components/ui';
+
+const ProfileCardView = ({ user }) => (
+  <Card variant="elevated">
+    <Heading size="lg">{user.name}</Heading>
+  </Card>
+);
+```
+
+**Correct** (className in UI component):
+
+```tsx
+// components/ui/Card/CardView.tsx
+const CardView = ({ variant, children }) => (
+  <View className={cn("rounded-lg", variants[variant])}>
+    {children}
+  </View>
+);
+```
+
+#### Configuration
+
+```javascript
+// eslint.config.mjs
+{
+  rules: {
+    'ui-standards/no-classname-outside-ui': ['error', {
+      allowedPaths: ['/components/ui/', '/components/custom/ui/']
+    }]
+  }
+}
+```
+
+**Options:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `allowedPaths` | `string[]` | `['/components/ui/', '/components/custom/ui/']` | Paths where className is allowed |
+
+---
+
+### no-direct-rn-imports
+
+Prevents direct imports from `react-native` to encourage use of wrapped UI components.
+
+#### Rule Details
+
+This rule blocks direct imports from `react-native` in favor of using the project's UI component library. This ensures:
+
+- Consistent styling across the app
+- Ability to swap underlying implementations
+- Centralized accessibility handling
+- Design system compliance
+
+**What's blocked?**
+- `import { View, Text, ... } from 'react-native'`
+
+**What to use instead?**
+- `import { View, Text, ... } from '@/components/ui'`
+
+#### Examples
+
+**Incorrect:**
+
+```tsx
+import { View, Text, TouchableOpacity } from 'react-native';
+
+const MyComponent = () => (
+  <View>
+    <Text>Hello</Text>
+    <TouchableOpacity onPress={handlePress}>
+      <Text>Click me</Text>
+    </TouchableOpacity>
+  </View>
+);
+```
+
+**Correct:**
+
+```tsx
+import { View, Text, Button } from '@/components/ui';
+
+const MyComponent = () => (
+  <View>
+    <Text>Hello</Text>
+    <Button onPress={handlePress}>Click me</Button>
+  </View>
+);
+```
+
+#### Configuration
+
+```javascript
+// eslint.config.mjs
+{
+  rules: {
+    'ui-standards/no-direct-rn-imports': 'error'
+  }
+}
+```
+
+**Allowed directories:**
+- `components/ui/` - UI wrappers need to import from react-native
+- `components/custom/ui/` - Custom UI components
+
+---
+
+### no-inline-styles
+
+Prevents inline style objects in favor of className-based styling.
+
+#### Rule Details
+
+This rule prohibits inline `style` props with object literals. All styling should use className with Tailwind/NativeWind classes.
+
+**Why this rule exists:**
+- Inline styles bypass the design system
+- Harder to maintain consistency
+- NativeWind provides better performance
+- Enables theme support
+
+#### Examples
+
+**Incorrect:**
+
+```tsx
+const MyView = () => (
+  <View style={{ padding: 16, backgroundColor: 'white' }}>
+    <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Title</Text>
+  </View>
+);
+```
+
+**Incorrect** (StyleSheet is also discouraged):
+
+```tsx
+const styles = StyleSheet.create({
+  container: { padding: 16 }
+});
+
+const MyView = () => (
+  <View style={styles.container}>
+    <Text>Content</Text>
+  </View>
+);
+```
+
+**Correct:**
+
+```tsx
+const MyView = () => (
+  <View className="p-4 bg-white">
+    <Text className="text-lg font-bold">Title</Text>
+  </View>
+);
+```
+
+#### Configuration
+
+```javascript
+// eslint.config.mjs
+{
+  rules: {
+    'ui-standards/no-inline-styles': 'error'
+  }
+}
+```
+
+**Allowed exceptions:**
+- Dynamic styles computed at runtime (with eslint-disable comment)
+- Animation styles (Reanimated)
+
+---
+
+## Installation
+
+This plugin is installed locally as a file dependency:
+
+```json
+{
+  "devDependencies": {
+    "eslint-plugin-ui-standards": "file:./eslint-plugin-ui-standards"
+  }
+}
+```
+
+## Usage with ESLint 9 Flat Config
+
+```javascript
+// eslint.config.mjs
+import uiStandardsPlugin from './eslint-plugin-ui-standards/index.js';
+
+export default [
+  {
+    plugins: {
+      'ui-standards': uiStandardsPlugin,
+    },
+    rules: {
+      'ui-standards/no-classname-outside-ui': 'error',
+      'ui-standards/no-direct-rn-imports': 'error',
+      'ui-standards/no-inline-styles': 'error',
+    },
+  },
+];
+```
+
+## Contributing
+
+When adding new rules:
+
+1. Create rule implementation in `rules/`
+2. Add tests in `__tests__/`
+3. Export in `index.js`
+4. Document in this README
+5. Add to ESLint configuration
+
+## Version
+
+1.0.0

package/expo/copy-overwrite/eslint-plugin-ui-standards/index.js

@@ -0,0 +1,29 @@
+/**
+ * ESLint plugin for UI standards
+ *
+ * This plugin enforces UI-related coding standards for React Native components.
+ * Supports ESLint 9 flat config format.
+ *
+ * Rules:
+ * - no-classname-outside-ui: Disallows className prop outside UI components
+ * - no-direct-rn-imports: Disallows direct React Native imports
+ * - no-inline-styles: Disallows inline style objects
+ * @module eslint-plugin-ui-standards
+ */
+const noClassnameOutsideUi = require("./rules/no-classname-outside-ui");
+const noDirectRnImports = require("./rules/no-direct-rn-imports");
+const noInlineStyles = require("./rules/no-inline-styles");
+
+const plugin = {
+  meta: {
+    name: "eslint-plugin-ui-standards",
+    version: "1.0.0",
+  },
+  rules: {
+    "no-classname-outside-ui": noClassnameOutsideUi,
+    "no-direct-rn-imports": noDirectRnImports,
+    "no-inline-styles": noInlineStyles,
+  },
+};
+
+module.exports = plugin;

package/expo/copy-overwrite/eslint-plugin-ui-standards/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "eslint-plugin-ui-standards",
+  "version": "1.0.0",
+  "description": "ESLint plugin for UI component standards",
+  "main": "index.js",
+  "private": true,
+  "peerDependencies": {
+    "eslint": ">=9.0.0"
+  }
+}

package/expo/copy-overwrite/eslint-plugin-ui-standards/rules/no-classname-outside-ui.js

@@ -0,0 +1,51 @@
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow className outside of UI component directories",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allowedPaths: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noClassNameOutsideUI:
+        "className is only allowed in components/ui and components/custom/ui directories. Create a reusable component with semantic props instead.",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const allowedPaths = options.allowedPaths || [
+      "/components/ui/",
+      "/components/custom/ui/",
+    ];
+
+    return {
+      JSXAttribute(node) {
+        if (node.name.name !== "className") return;
+
+        const filename = context.getFilename().replace(/\\/g, "/");
+        const isAllowed = allowedPaths.some(path => filename.includes(path));
+
+        if (!isAllowed) {
+          context.report({
+            node,
+            messageId: "noClassNameOutsideUI",
+          });
+        }
+      },
+    };
+  },
+};

package/expo/copy-overwrite/eslint-plugin-ui-standards/rules/no-direct-rn-imports.js

@@ -0,0 +1,55 @@
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Prevent direct React Native component imports",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noDirectRNImport:
+        "Don't import {{importName}} from 'react-native'. Use {{suggestion}} from '@/components/ui' instead.",
+    },
+  },
+
+  create(context) {
+    const componentMap = {
+      View: "Box",
+      Text: "Text",
+      Image: "Image",
+      ScrollView: "ScrollView",
+      Pressable: "Pressable",
+      TouchableOpacity: "Pressable",
+      TouchableHighlight: "Pressable",
+      TouchableWithoutFeedback: "Pressable",
+      TextInput: "Input",
+      FlatList: "FlatList",
+      SectionList: "SectionList",
+    };
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "react-native") return;
+
+        node.specifiers.forEach(specifier => {
+          if (specifier.type === "ImportSpecifier") {
+            const importedName = specifier.imported.name;
+
+            if (componentMap[importedName]) {
+              context.report({
+                node: specifier,
+                messageId: "noDirectRNImport",
+                data: {
+                  importName: importedName,
+                  suggestion: componentMap[importedName],
+                },
+              });
+            }
+          }
+        });
+      },
+    };
+  },
+};