@codyswann/lisa 1.50.1 → 1.50.2

package/node_modules/@codyswann/eslint-plugin-component-structure/rules/require-memo-in-view.js

@@ -0,0 +1,183 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * ESLint rule to enforce React.memo usage with displayName in View components
+ *
+ * This rule ensures that all View components (*View.tsx, *View.jsx) follow the standardized pattern:
+ * - Must be wrapped with memo() or React.memo() in the default export
+ * - Must have a displayName property
+ *
+ * Excludes components/ui/** and components/custom/ui/** directories (third-party generated files)
+ * @module eslint-plugin-component-structure/rules/require-memo-in-view
+ */
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce React.memo usage with displayName in View components",
+      category: "Best Practices",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      missingMemo:
+        "View components must be wrapped with memo(). Expected: export default memo({{componentName}})",
+      missingDisplayName:
+        'View components must have a displayName property. Expected: {{componentName}}.displayName = "{{componentName}}"',
+    },
+  },
+
+  create(context) {
+    const filename = context.getFilename();
+    const normalizedPath = filename.replace(/\\/g, "/");
+
+    // Only check View.tsx and View.jsx files
+    if (!filename.endsWith("View.tsx") && !filename.endsWith("View.jsx")) {
+      return {};
+    }
+
+    // Exclude components/ui/** and components/custom/ui/** directories
+    if (
+      normalizedPath.includes("/components/ui/") ||
+      normalizedPath.includes("/components/custom/ui/")
+    ) {
+      return {};
+    }
+
+    // Check if file is in features/**/components, features/**/screens, or components directory
+    const isFeatureComponent =
+      normalizedPath.includes("features/") &&
+      normalizedPath.includes("/components/");
+    const isFeatureScreen =
+      normalizedPath.includes("features/") &&
+      normalizedPath.includes("/screens/");
+    const isComponentsDir = normalizedPath.includes("/components/");
+
+    if (!isFeatureComponent && !isFeatureScreen && !isComponentsDir) {
+      return {};
+    }
+
+    const state = {
+      componentName: null,
+      hasMemoImport: false,
+      hasMemoWrapper: false,
+      hasDisplayName: false,
+      exportNode: null,
+    };
+
+    return {
+      ImportDeclaration(node) {
+        // Check if memo is imported from 'react'
+        if (node.source.value === "react") {
+          const memoImport = node.specifiers.find(
+            spec =>
+              spec.type === "ImportSpecifier" && spec.imported.name === "memo"
+          );
+          if (memoImport) {
+            state.hasMemoImport = true;
+          }
+        }
+      },
+
+      VariableDeclarator(node) {
+        // Find the component name from variable declaration
+        if (
+          node.id.type === "Identifier" &&
+          /^[A-Z]/.test(node.id.name) &&
+          node.id.name.includes("View")
+        ) {
+          state.componentName = node.id.name;
+        }
+      },
+
+      AssignmentExpression(node) {
+        // Check for displayName assignment
+        if (
+          node.left.type === "MemberExpression" &&
+          node.left.property.name === "displayName" &&
+          node.left.object.type === "Identifier"
+        ) {
+          const componentName = node.left.object.name;
+          if (
+            componentName === state.componentName ||
+            /^[A-Z]/.test(componentName)
+          ) {
+            state.hasDisplayName = true;
+          }
+        }
+      },
+
+      ExportDefaultDeclaration(node) {
+        state.exportNode = node;
+
+        // Check if the default export is wrapped with memo()
+        if (node.declaration.type === "CallExpression") {
+          const callee = node.declaration.callee;
+
+          // Check for memo() or React.memo()
+          const isMemoCall =
+            (callee.type === "Identifier" && callee.name === "memo") ||
+            (callee.type === "MemberExpression" &&
+              callee.object.name === "React" &&
+              callee.property.name === "memo");
+
+          if (isMemoCall) {
+            state.hasMemoWrapper = true;
+
+            // If using React.memo, ensure memo is imported from 'react'
+            if (callee.type === "MemberExpression" && !state.hasMemoImport) {
+              // React.memo is allowed, but we prefer direct memo import
+              // Store that we found React.memo usage
+              state.hasReactMemo = true;
+            }
+
+            // Get the component name from the memo argument
+            const firstArg = node.declaration.arguments[0];
+            if (
+              firstArg &&
+              firstArg.type === "Identifier" &&
+              !state.componentName
+            ) {
+              state.componentName = firstArg.name;
+            }
+          }
+        } else if (
+          node.declaration.type === "Identifier" &&
+          !state.componentName
+        ) {
+          // Component exported without memo wrapper
+          state.componentName = node.declaration.name;
+        }
+      },
+
+      "Program:exit"() {
+        if (!state.exportNode || !state.componentName) {
+          return;
+        }
+
+        // Report missing memo wrapper
+        if (!state.hasMemoWrapper) {
+          context.report({
+            node: state.exportNode,
+            messageId: "missingMemo",
+            data: { componentName: state.componentName },
+          });
+        }
+
+        // Report missing displayName
+        if (!state.hasDisplayName) {
+          context.report({
+            node: state.exportNode,
+            messageId: "missingDisplayName",
+            data: { componentName: state.componentName },
+          });
+        }
+      },
+    };
+  },
+};

package/node_modules/@codyswann/eslint-plugin-component-structure/rules/single-component-per-file.js

@@ -0,0 +1,243 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * 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/node_modules/@codyswann/eslint-plugin-ui-standards/README.md

@@ -0,0 +1,192 @@
+# 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
+
+---
+
+## 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',
+    },
+  },
+];
+```
+
+## 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/node_modules/@codyswann/eslint-plugin-ui-standards/index.js

@@ -0,0 +1,31 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * 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
+ * @module eslint-plugin-ui-standards
+ */
+const noClassnameOutsideUi = require("./rules/no-classname-outside-ui");
+const noDirectRnImports = require("./rules/no-direct-rn-imports");
+
+const plugin = {
+  meta: {
+    name: "eslint-plugin-ui-standards",
+    version: "1.0.0",
+  },
+  rules: {
+    "no-classname-outside-ui": noClassnameOutsideUi,
+    "no-direct-rn-imports": noDirectRnImports,
+  },
+};
+
+module.exports = plugin;

package/node_modules/@codyswann/eslint-plugin-ui-standards/package.json

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