From a9d57784034674345b09003becd7b76c1e5c93db Mon Sep 17 00:00:00 2001
From: Taylor Seamans <taylor.seamans@yahoo.com>
Date: Wed, 3 Nov 2021 21:03:43 -0700
Subject: [PATCH 1/2] Add formfield-name rule

---
 docs/rules/formfield-name.md      | 35 +++++++++++++++
 lib/rules/formfield-name.js       | 72 +++++++++++++++++++++++++++++++
 tests/lib/rules/formfield-name.js | 52 ++++++++++++++++++++++
 3 files changed, 159 insertions(+)
 create mode 100644 docs/rules/formfield-name.md
 create mode 100644 lib/rules/formfield-name.js
 create mode 100644 tests/lib/rules/formfield-name.js

diff --git a/docs/rules/formfield-name.md b/docs/rules/formfield-name.md
new file mode 100644
index 0000000..409e8e7
--- /dev/null
+++ b/docs/rules/formfield-name.md
@@ -0,0 +1,35 @@
+# Rule to enforce name on FormField and its child input (formfield-name)
+
+FormField and its child input require a matching `name` prop to ensure that data is included on form submission.
+
+Note from [W3Schools](https://www.w3schools.com/tags/att_input_name.asp): Only form elements with a name attribute will have their values passed when submitting a form.
+
+## Rule Details
+
+This rule aims to ensure that a matching `name` is applied to both a FormField and its child input.
+
+Examples of **incorrect** code for this rule:
+
+```js
+<Form>
+  <FormField label="Test Text Input">
+    <TextInput name="testinput" />
+  </FormField>
+  <FormField label="Another Test Text Input" name="testinput-2">
+    <TextInput name="abc" />
+  </FormField>
+</Form>
+```
+
+Examples of **correct** code for this rule:
+
+```js
+<Form>
+  <FormField label="Test Text Input" name="testinput">
+    <TextInput name="testinput" />
+  </FormField>
+  <FormField label="Another Test Text Input" name="testinput-2">
+    <TextInput name="testinput-2" />
+  </FormField>
+</Form>
+```
diff --git a/lib/rules/formfield-name.js b/lib/rules/formfield-name.js
new file mode 100644
index 0000000..b78dc50
--- /dev/null
+++ b/lib/rules/formfield-name.js
@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Rule to enforce name on FormField and its child input
+ * @author Taylor Seamans
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Rule to enforce name on FormField and its child input',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: null, // or "code" or "whitespace"
+    messages: {
+      'formfield-name':
+        'Image requires alt text that is descriptive about what the image contains.',
+    },
+  },
+
+  create: function (context) {
+    // variables should be defined here
+
+    //----------------------------------------------------------------------
+    // Helpers
+    //----------------------------------------------------------------------
+
+    // any helper functions should go here or else delete this section
+
+    //----------------------------------------------------------------------
+    // Public
+    //----------------------------------------------------------------------
+
+    return {
+      JSXElement(node) {
+        if (node.openingElement.name.name === 'FormField') {
+          let matchingName;
+
+          node.children.forEach((child) => {
+            node?.openingElement?.attributes?.forEach((attribute) => {
+              if (attribute?.name?.name === 'name') {
+                if (
+                  child.type === 'JSXElement' &&
+                  child.openingElement.attributes
+                ) {
+                  child.openingElement.attributes.forEach((childAttribute) => {
+                    if (
+                      childAttribute?.name?.name === 'name' &&
+                      childAttribute?.value?.value === attribute?.value?.value
+                    ) {
+                      matchingName = true;
+                    }
+                  });
+                }
+              }
+            });
+          });
+
+          if (!matchingName)
+            context.report({
+              node: node,
+              messageId: 'formfield-name',
+            });
+        }
+      },
+    };
+  },
+};
diff --git a/tests/lib/rules/formfield-name.js b/tests/lib/rules/formfield-name.js
new file mode 100644
index 0000000..3646acb
--- /dev/null
+++ b/tests/lib/rules/formfield-name.js
@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Rule to enforce name on FormField and its child input
+ * @author Taylor Seamans
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/formfield-name'),
+  RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester({
+  parserOptions: { ecmaFeatures: { jsx: true } },
+});
+ruleTester.run('formfield-name', rule, {
+  valid: [
+    '<FormField label="Test Text Input" name="testinput"><TextInput name="testinput" /></FormField>',
+  ],
+
+  invalid: [
+    {
+      code: '<FormField label="Label"><TextInput /></FormField>',
+      errors: [
+        {
+          messageId: 'formfield-name',
+        },
+      ],
+    },
+    {
+      code: '<FormField label="Label" name="test-input"><TextInput /></FormField>',
+      errors: [
+        {
+          messageId: 'formfield-name',
+        },
+      ],
+    },
+    {
+      code: '<FormField label="Label" name="test-input"><TextInput name="abc" /></FormField>',
+      errors: [
+        {
+          messageId: 'formfield-name',
+        },
+      ],
+    },
+  ],
+});

From 1e62cd8770ee8b17a91deffe285c4957102dc16b Mon Sep 17 00:00:00 2001
From: Taylor Seamans <taylor.seamans@yahoo.com>
Date: Fri, 12 Nov 2021 12:47:27 -0800
Subject: [PATCH 2/2] Add formfield-name rule

---
 lib/index.js                | 1 +
 lib/rules/formfield-name.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/index.js b/lib/index.js
index 8e9e8a5..22ab67d 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -25,6 +25,7 @@ module.exports.configs = {
       'grommet/button-single-kind': 'error',
       'grommet/datatable-aria-describedby': 'error',
       'grommet/datatable-groupby-onmore': 'error',
+      'grommet/formfield-name': 'error',
       'grommet/formfield-prefer-children': 'error',
       'grommet/image-alt-text': 'error',
       'grommet/spinner-message': 'error',
diff --git a/lib/rules/formfield-name.js b/lib/rules/formfield-name.js
index b78dc50..a11679e 100644
--- a/lib/rules/formfield-name.js
+++ b/lib/rules/formfield-name.js
@@ -18,7 +18,7 @@ module.exports = {
     fixable: null, // or "code" or "whitespace"
     messages: {
       'formfield-name':
-        'Image requires alt text that is descriptive about what the image contains.',
+        'FormField requires `name` prop that matches `name` prop on its child input. Only form elements with a name attribute will have their values passed when submitting a form.',
     },
   },