@codyswann/lisa 1.0.0

package/expo/copy-overwrite/eslint-plugin-component-structure/rules/enforce-component-structure.js

@@ -0,0 +1,230 @@
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Enforce component structure in features/**/components directories",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      missingContainer:
+        'Component directory "{{componentName}}" is missing {{componentName}}Container.tsx file',
+      missingView:
+        'Component directory "{{componentName}}" is missing {{componentName}}View.tsx file',
+      missingIndex:
+        'Component directory "{{componentName}}" is missing index.tsx file',
+      incorrectIndexExport:
+        "index.tsx should export {{componentName}}Container or {{componentName}}View as default",
+      componentNotInDirectory:
+        "Component files must be inside a directory named after the component",
+      incorrectFileNaming: "{{fileName}} should be named {{expectedName}}",
+      invalidFileInComponentDirectory:
+        "Only index.ts(x), {{componentName}}Container.tsx, and {{componentName}}View.tsx are allowed in component directories. Found: {{fileName}}",
+    },
+  },
+
+  create(context) {
+    const filename = context.getFilename();
+    const normalizedPath = filename.replace(/\\/g, "/");
+
+    // Get the path after components/ or screens/
+    const componentsMatch = normalizedPath.match(
+      /\/(components|screens)\/(.+)$/
+    );
+    if (!componentsMatch) return {};
+    const afterComponents = componentsMatch[2];
+
+    const pathParts = afterComponents.split("/");
+
+    // If file is directly in components/ directory (not in a subdirectory)
+    if (pathParts.length === 1) {
+      const fileName = pathParts[0];
+      if (fileName.endsWith(".tsx") || fileName.endsWith(".jsx")) {
+        context.report({
+          node: context.getSourceCode().ast,
+          messageId: "componentNotInDirectory",
+        });
+      }
+      return {};
+    }
+
+    // Get component name and file name from the END of the path
+    // This handles both ComponentName/file.tsx and custom/ui/ComponentName/file.tsx
+    const fileName = pathParts[pathParts.length - 1];
+    const componentName = pathParts[pathParts.length - 2];
+
+    // Skip validation for files in __tests__ directories
+    if (componentName === "__tests__") {
+      return {};
+    }
+
+    // Only check .ts/.tsx/.jsx files
+    if (
+      !fileName ||
+      (!fileName.endsWith(".ts") &&
+        !fileName.endsWith(".tsx") &&
+        !fileName.endsWith(".jsx"))
+    ) {
+      return {};
+    }
+
+    // Get the directory path
+    const dirPath = path.dirname(filename);
+
+    // Check if file is one of the allowed types
+    const isIndex =
+      fileName === "index.ts" ||
+      fileName === "index.tsx" ||
+      fileName === "index.jsx";
+
+    // Allow *Container.*.tsx and *Container.*.jsx patterns (e.g., MyComponentContainer.native.tsx)
+    const containerPattern = new RegExp(
+      `^${componentName}Container\\.[^.]+\\.(tsx|jsx)$`
+    );
+    const isContainer =
+      fileName === `${componentName}Container.tsx` ||
+      fileName === `${componentName}Container.jsx` ||
+      containerPattern.test(fileName);
+
+    // Allow *View.*.tsx and *View.*.jsx patterns (e.g., MyComponentView.web.tsx)
+    const viewPattern = new RegExp(
+      `^${componentName}View\\.[^.]+\\.(tsx|jsx)$`
+    );
+    const isView =
+      fileName === `${componentName}View.tsx` ||
+      fileName === `${componentName}View.jsx` ||
+      viewPattern.test(fileName);
+
+    // Report error if file is not one of the allowed types
+    if (!isIndex && !isContainer && !isView) {
+      context.report({
+        node: context.getSourceCode().ast,
+        messageId: "invalidFileInComponentDirectory",
+        data: { fileName, componentName },
+      });
+      return {};
+    }
+
+    // Check file naming
+    if (
+      fileName === "index.ts" ||
+      fileName === "index.tsx" ||
+      fileName === "index.jsx"
+    ) {
+      // Check if index.tsx exports the Container
+      return {
+        Program(node) {
+          const sourceCode = context.getSourceCode();
+          const text = sourceCode.getText();
+
+          // Check for export patterns (allow Container or View)
+          const defaultExportPattern = new RegExp(
+            `export\\s*{\\s*default\\s*}\\s*from\\s*['"\`]\\.\\/${componentName}(Container|View)['"\`]|` +
+              `export\\s*\\*\\s*from\\s*['"\`]\\.\\/${componentName}(Container|View)['"\`]|` +
+              `export\\s*{\\s*${componentName}(Container|View)\\s*as\\s*default\\s*}|` +
+              `export\\s*default\\s*${componentName}(Container|View)`
+          );
+
+          if (!defaultExportPattern.test(text)) {
+            context.report({
+              node,
+              messageId: "incorrectIndexExport",
+              data: { componentName },
+            });
+          }
+        },
+      };
+    } else if (
+      fileName.endsWith("Container.tsx") ||
+      fileName.endsWith("Container.jsx")
+    ) {
+      const expectedName = `${componentName}Container.tsx`;
+      if (
+        fileName !== expectedName &&
+        fileName !== `${componentName}Container.jsx`
+      ) {
+        context.report({
+          node: context.getSourceCode().ast,
+          messageId: "incorrectFileNaming",
+          data: { fileName, expectedName },
+        });
+      }
+    } else if (fileName.endsWith("View.tsx") || fileName.endsWith("View.jsx")) {
+      const expectedName = `${componentName}View.tsx`;
+      if (
+        fileName !== expectedName &&
+        fileName !== `${componentName}View.jsx`
+      ) {
+        context.report({
+          node: context.getSourceCode().ast,
+          messageId: "incorrectFileNaming",
+          data: { fileName, expectedName },
+        });
+      }
+    }
+
+    // Check for required files in the directory (only once per directory)
+    // We'll do this check only for the first file we encounter
+    const cache = new Map();
+    const checkRequiredFiles = () => {
+      try {
+        const files = cache.has(dirPath)
+          ? cache.get(dirPath)
+          : (() => {
+              const dirFiles = fs.readdirSync(dirPath);
+              cache.set(dirPath, dirFiles);
+              return dirFiles;
+            })();
+        const hasContainer = files.some(
+          f =>
+            f === `${componentName}Container.tsx` ||
+            f === `${componentName}Container.jsx`
+        );
+        const hasView = files.some(
+          f =>
+            f === `${componentName}View.tsx` || f === `${componentName}View.jsx`
+        );
+        const hasIndex = files.some(
+          f => f === "index.tsx" || f === "index.jsx"
+        );
+
+        if (!hasContainer) {
+          context.report({
+            node: context.getSourceCode().ast,
+            messageId: "missingContainer",
+            data: { componentName },
+          });
+        }
+        if (!hasView) {
+          context.report({
+            node: context.getSourceCode().ast,
+            messageId: "missingView",
+            data: { componentName },
+          });
+        }
+        if (!hasIndex) {
+          context.report({
+            node: context.getSourceCode().ast,
+            messageId: "missingIndex",
+            data: { componentName },
+          });
+        }
+      } catch (_err) {
+        // Directory might not exist or be accessible
+      }
+    };
+
+    // Only check once per file
+    if (fileName === "index.tsx" || fileName === "index.jsx") {
+      checkRequiredFiles();
+    }
+
+    return {};
+  },
+};

package/expo/copy-overwrite/eslint-plugin-component-structure/rules/no-return-in-view.js

@@ -0,0 +1,91 @@
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow return statements in View components - use arrow function shorthand",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noReturnInView:
+        "View components should use arrow function shorthand: () => (...) instead of () => { return (...) }",
+    },
+  },
+
+  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 {};
+    }
+
+    // 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/") &&
+      !normalizedPath.includes("/components/ui/") &&
+      !normalizedPath.includes("/components/custom/ui/");
+
+    if (!isFeatureComponent && !isFeatureScreen && !isComponentsDir) {
+      return {};
+    }
+
+    return {
+      ArrowFunctionExpression(node) {
+        // Check if this is a component (starts with capital letter or is exported)
+        const parent = node.parent;
+
+        // Helper to check if variable has a View component name
+        const isViewComponent = name =>
+          /^[A-Z]/.test(name) && name.includes("View");
+
+        // Determine if this is a component
+        const isComponent = (() => {
+          // Check if it's a default export
+          if (parent.type === "ExportDefaultDeclaration") {
+            return true;
+          }
+
+          // Check if it's a variable declaration with PascalCase name
+          if (
+            parent.type === "VariableDeclarator" &&
+            parent.id.type === "Identifier"
+          ) {
+            return isViewComponent(parent.id.name);
+          }
+
+          // Check if it's part of an export statement
+          if (
+            parent.type === "VariableDeclarator" &&
+            parent.parent.type === "VariableDeclaration" &&
+            parent.parent.parent.type === "ExportNamedDeclaration"
+          ) {
+            return isViewComponent(parent.id.name);
+          }
+
+          return false;
+        })();
+
+        if (!isComponent) return;
+
+        // Check if the arrow function has a block body (any BlockStatement is forbidden)
+        if (node.body.type === "BlockStatement") {
+          context.report({
+            node,
+            messageId: "noReturnInView",
+          });
+        }
+      },
+    };
+  },
+};

package/expo/copy-overwrite/eslint-plugin-component-structure/rules/require-memo-in-view.js

@@ -0,0 +1,178 @@
+/**
+ * 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 },
+          });
+        }
+      },
+    };
+  },
+};