@codyswann/lisa 1.0.0

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

@@ -0,0 +1,196 @@
+/**
+ * Unit tests for the require-memo-in-view ESLint rule
+ *
+ * Tests that View components are properly wrapped with React.memo() and have displayName.
+ * Ensures components/ui/** directory is excluded from the rule.
+ * @module eslint-plugin-component-structure/tests
+ */
+
+const { RuleTester } = require("eslint");
+
+const rule = require("../rules/require-memo-in-view");
+
+const FEATURE_EXAMPLE_COMPONENTS_PATH = "features/example/components";
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run("require-memo-in-view", rule, {
+  valid: [
+    {
+      code: `
+        import { memo } from "react";
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        MyView.displayName = "MyView";
+
+        export default memo(MyView);
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+    {
+      code: `
+        import { memo } from "react";
+        import { Text } from "react-native";
+
+        const AnotherView = () => (
+          <Text>Hello</Text>
+        );
+
+        AnotherView.displayName = "AnotherView";
+
+        export default memo(AnotherView);
+      `,
+      filename: "components/AnotherView.tsx",
+    },
+    {
+      code: `
+        // This should be ignored - components/ui/** is excluded
+        import { View } from "react-native";
+
+        const UIComponent = () => <View />;
+
+        export default UIComponent;
+      `,
+      filename: "components/ui/Button/ButtonView.tsx",
+    },
+    {
+      code: `
+        // This should be ignored - components/custom/ui/** is excluded
+        import { View } from "react-native";
+
+        const CustomUIComponent = () => <View />;
+
+        export default CustomUIComponent;
+      `,
+      filename: "components/custom/ui/Input/InputView.tsx",
+    },
+    {
+      code: `
+        // Non-View file should be ignored
+        import { memo } from "react";
+
+        const MyContainer = () => null;
+
+        export default MyContainer;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyContainer.tsx`,
+    },
+    {
+      code: `
+        import React from "react";
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        MyView.displayName = "MyView";
+
+        export default React.memo(MyView);
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        MyView.displayName = "MyView";
+
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "missingMemo",
+          data: { componentName: "MyView" },
+        },
+      ],
+    },
+    {
+      code: `
+        import { memo } from "react";
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        export default memo(MyView);
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "missingDisplayName",
+          data: { componentName: "MyView" },
+        },
+      ],
+    },
+    {
+      code: `
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        export default MyView;
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "missingMemo",
+          data: { componentName: "MyView" },
+        },
+        {
+          messageId: "missingDisplayName",
+          data: { componentName: "MyView" },
+        },
+      ],
+    },
+    {
+      code: `
+        import React from "react";
+        import { View } from "react-native";
+
+        const MyView = () => <View />;
+
+        export default React.memo(MyView);
+      `,
+      filename: `${FEATURE_EXAMPLE_COMPONENTS_PATH}/MyView.tsx`,
+      errors: [
+        {
+          messageId: "missingDisplayName",
+          data: { componentName: "MyView" },
+        },
+      ],
+    },
+    {
+      code: `
+        import { View } from "react-native";
+
+        const TestView = () => <View />;
+
+        TestView.displayName = "TestView";
+
+        export default TestView;
+      `,
+      filename: "features/test/components/TestView.jsx",
+      errors: [
+        {
+          messageId: "missingMemo",
+          data: { componentName: "TestView" },
+        },
+      ],
+    },
+  ],
+});

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

@@ -0,0 +1,289 @@
+/**
+ * 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/expo/copy-overwrite/eslint-plugin-component-structure/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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/expo/copy-overwrite/eslint-plugin-component-structure/package.json

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