@codyswann/lisa 1.50.0 → 1.50.2

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

@@ -0,0 +1,294 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * Unit tests for the single-component-per-file ESLint rule
+ *
+ * Tests that View and Container files contain exactly one React component.
+ * Ensures components/ui/** and components/shared/** directories are excluded from the rule.
+ * @module eslint-plugin-component-structure/tests
+ */
+
+const { RuleTester } = require("eslint");
+
+const rule = require("../rules/single-component-per-file");
+
+const FEATURE_EXAMPLE_COMPONENTS_PATH = "/features/example/components";
+const SHARED_COMPONENTS_PATH = "/components/shared";
+const UI_COMPONENTS_PATH = "/components/ui";
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run("single-component-per-file", rule, {
+  valid: [
+    // 1. Single component - arrow function
+    {
+      code: `
+        const MyView = () => <div>Hello</div>;
+        MyView.displayName = "MyView";
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 2. Single component - memo wrapped
+    {
+      code: `
+        import { memo } from "react";
+        const MyView = memo(() => <div>Hello</div>);
+        MyView.displayName = "MyView";
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 3. Single component - React.memo wrapped
+    {
+      code: `
+        import React from "react";
+        const MyView = React.memo(() => <div>Hello</div>);
+        MyView.displayName = "MyView";
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 4. Single component - function declaration
+    {
+      code: `
+        function MyView() {
+          return <div>Hello</div>;
+        }
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 5. Single component - TypeScript React.FC (parser will handle TypeScript syntax)
+    {
+      code: `
+        const MyView: React.FC = () => <div>Hello</div>;
+        MyView.displayName = "MyView";
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      languageOptions: {
+        parser: require("@typescript-eslint/parser"),
+      },
+    },
+    // 6. Single component in Container file
+    {
+      code: `
+        const MyContainer = () => {
+          return <div>Hello</div>;
+        };
+        export default MyContainer;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyContainer.tsx`,
+    },
+    // 7. PascalCase function that doesn't return JSX (not a component)
+    {
+      code: `
+        const MyView = () => <div>Hello</div>;
+        const HelperFunction = () => {
+          return "not JSX";
+        };
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 8. Non-View/Container file (rule should not apply)
+    {
+      code: `
+        const Component1 = () => <div>1</div>;
+        const Component2 = () => <div>2</div>;
+        export { Component1, Component2 };
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/utils.tsx`,
+    },
+    // 9. Excluded directory - UI components
+    {
+      code: `
+        const Component1 = () => <div>1</div>;
+        const Component2 = () => <div>2</div>;
+        export { Component1, Component2 };
+      `,
+      filename: `${UI_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 10. Excluded directory - Shared components
+    {
+      code: `
+        const Component1 = () => <div>1</div>;
+        const Component2 = () => <div>2</div>;
+        export { Component1, Component2 };
+      `,
+      filename: `${SHARED_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 11. Single component - conditional expression
+    {
+      code: `
+        const MyView = ({ show }) => show ? <div>Visible</div> : <div>Hidden</div>;
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    // 12. Single component - logical expression
+    {
+      code: `
+        const MyView = ({ show }) => show && <div>Content</div>;
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+  ],
+  invalid: [
+    // 1. Two arrow function components
+    {
+      code: `
+        const Component1 = () => <div>First</div>;
+        const Component2 = () => <div>Second</div>;
+        export default Component1;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component2",
+            firstComponentName: "Component1",
+          },
+        },
+      ],
+    },
+    // 2. Two memo-wrapped components
+    {
+      code: `
+        import { memo } from "react";
+        const Component1 = memo(() => <div>First</div>);
+        const Component2 = memo(() => <div>Second</div>);
+        export default Component1;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component2",
+            firstComponentName: "Component1",
+          },
+        },
+      ],
+    },
+    // 3. Main component and helper component (realistic violation)
+    {
+      code: `
+        import React from "react";
+        const MessageItem = ({ item }) => <div>{item}</div>;
+        const MessageListView = ({ messages }) => (
+          <div>{messages.map(msg => <MessageItem item={msg} />)}</div>
+        );
+        export default MessageListView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MessageListView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "MessageListView",
+            firstComponentName: "MessageItem",
+          },
+        },
+      ],
+    },
+    // 4. Function declaration and arrow function
+    {
+      code: `
+        function Component1() {
+          return <div>First</div>;
+        }
+        const Component2 = () => <div>Second</div>;
+        export default Component1;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component2",
+            firstComponentName: "Component1",
+          },
+        },
+      ],
+    },
+    // 5. Three components (multiple violations)
+    {
+      code: `
+        const Component1 = () => <div>First</div>;
+        const Component2 = () => <div>Second</div>;
+        const Component3 = () => <div>Third</div>;
+        export default Component1;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component2",
+            firstComponentName: "Component1",
+          },
+        },
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component3",
+            firstComponentName: "Component1",
+          },
+        },
+      ],
+    },
+    // 6. Container file with multiple components
+    {
+      code: `
+        const Helper = () => <div>Helper</div>;
+        const MyContainer = () => <div><Helper /></div>;
+        export default MyContainer;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyContainer.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "MyContainer",
+            firstComponentName: "Helper",
+          },
+        },
+      ],
+    },
+    // 7. Multiple components with conditional expressions
+    {
+      code: `
+        const Component1 = ({ show }) => show ? <div>First</div> : null;
+        const Component2 = ({ show }) => show && <div>Second</div>;
+        export default Component1;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "multipleComponents",
+          data: {
+            componentName: "Component2",
+            firstComponentName: "Component1",
+          },
+        },
+      ],
+    },
+  ],
+});

package/node_modules/@codyswann/eslint-plugin-component-structure/index.js

@@ -0,0 +1,37 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+/**
+ * ESLint plugin for component structure standards
+ *
+ * This plugin enforces component structure and patterns for React components
+ * in the frontend application. Supports ESLint 9 flat config format.
+ *
+ * Rules:
+ * - enforce-component-structure: Ensures components follow the Container/View pattern
+ * - no-return-in-view: Disallows return statements in View components
+ * - require-memo-in-view: Enforces React.memo usage in View components
+ * - single-component-per-file: Ensures only one React component per file
+ * @module eslint-plugin-component-structure
+ */
+const enforceComponentStructure = require("./rules/enforce-component-structure");
+const noReturnInView = require("./rules/no-return-in-view");
+const requireMemoInView = require("./rules/require-memo-in-view");
+const singleComponentPerFile = require("./rules/single-component-per-file");
+
+const plugin = {
+  meta: {
+    name: "eslint-plugin-component-structure",
+    version: "1.0.0",
+  },
+  rules: {
+    "enforce-component-structure": enforceComponentStructure,
+    "no-return-in-view": noReturnInView,
+    "require-memo-in-view": requireMemoInView,
+    "single-component-per-file": singleComponentPerFile,
+  },
+};
+
+module.exports = plugin;

package/node_modules/@codyswann/eslint-plugin-component-structure/package.json

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

package/node_modules/@codyswann/eslint-plugin-component-structure/rules/enforce-component-structure.js

@@ -0,0 +1,235 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+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/node_modules/@codyswann/eslint-plugin-component-structure/rules/no-return-in-view.js

@@ -0,0 +1,96 @@
+/**
+ * This file is managed by Lisa.
+ * Do not edit directly — changes will be overwritten on the next `lisa` run.
+ */
+
+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 (...) }. Hoist any definitions outside of the arrow function body or into the corresponding Container.",
+    },
+  },
+
+  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",
+          });
+        }
+      },
+    };
+  },
+};