eslint-plugin-smarthr 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.8.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.7.0...eslint-plugin-smarthr-v1.8.0) (2025-06-09)
+
+
+### Features
+
+* best-practice-for-layoutsで <any>{hoge}</any> など子要素が変数のみの場合を許容する ([#668](https://github.com/kufu/tamatebako/issues/668)) ([7d03ff1](https://github.com/kufu/tamatebako/commit/7d03ff150833f673b9c2afe8e86adfdaee150d72))
+* format-translate-component rule で RangeSeparator を許容する ([#667](https://github.com/kufu/tamatebako/issues/667)) ([951bee2](https://github.com/kufu/tamatebako/commit/951bee2f376ddf48c5e9a0b13eb50b2daeeec7f9))
+
+## [1.7.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.6.0...eslint-plugin-smarthr-v1.7.0) (2025-06-02)
+
+
+### Features
+
+* a11y-help-link-with-support-href を追加 ([#646](https://github.com/kufu/tamatebako/issues/646)) ([662ca33](https://github.com/kufu/tamatebako/commit/662ca33120acac3fb9acdc7331d187fba9be86ef))
+* best-practice-for-nested-attributes-array-index ruleを追加 ([#648](https://github.com/kufu/tamatebako/issues/648)) ([8774d84](https://github.com/kufu/tamatebako/commit/8774d84f46fcaff9360aa76cb3773f644d6d5529))
+
 ## [1.6.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.5.1...eslint-plugin-smarthr-v1.6.0) (2025-05-20)
 
 

package/README.md

@@ -5,6 +5,7 @@
 - [a11y-delegate-element-has-role-presentation](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation)
 - [a11y-form-control-in-form](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-form-control-in-form)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content)
+- [a11y-help-link-with-support-href](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-help-link-with-support-href)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-image-has-alt-attribute)
 - [a11y-input-has-name-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-input-in-form-control)
@@ -16,13 +17,15 @@
 - [a11y-replace-unreadable-symbol](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-replace-unreadable-symbol)
 - [a11y-required-layout-as-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-required-layout-as-attribute)
 - [a11y-trigger-has-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-trigger-has-button)
+- [best-practice-for-async-current-target](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-async-current-target)
 - [best-practice-for-button-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-button-element)
 - [best-practice-for-data-test-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-data-test-attribute)
 - [best-practice-for-date](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-date)
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
+- [best-practice-for-nested-attributes-array-index](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog)
-- [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
 - [best-practice-for-tailwind-prohibit-root-margin](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin)
+- [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.15.1"
+    "node": ">=22.16.0"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.33.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "92e589c6bfc8e311b4c873f7e4c65b29eed61304"
+  "gitHead": "baf2b489f2397ac050c0c699e186b8356a8775cb"
 }

package/rules/a11y-help-link-with-support-href/README.md

@@ -0,0 +1,34 @@
+# smarthr/a11y-help-link-with-support-href
+
+- [ヘルプページ](https://support.smarthr.jp/) へのリンクはsmarthr-ui/HelpLinkを使うことを促すルールです
+  - ヘルプページへのリンクは、通常のテキストリンクと設定するべき属性が異なるため、専用のコンポーネントが用意されています
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-help-link-with-support-href': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<TextLink href="https://support.smarthr.jp/xxxxx">any</TextLink>
+<a href={`//support.smarthr.jp/${hoge}`}>any</a>
+<AnchorButton href={supportURL}>any</a>
+<AnyAnchor href={path.support.xxxx.yyyy} />
+```
+
+## ✅ Correct
+
+```jsx
+<HelpLink href="https://support.smarthr.jp/xxxxx">any</HelpLink>
+<HelpLink href={`//support.smarthr.jp/${hoge}`}>any</HelpLink>
+<HelpLink href={supportURL}>any</HelpLink>
+<HogeHelpLink href={path.support.xxxx.yyyy} />
+```

package/rules/a11y-help-link-with-support-href/index.js

@@ -0,0 +1,82 @@
+const SCHEMA = []
+
+const SUPPORT_URL_PREFIX_REGEX = /(\/|\.)support\./
+const SUPPORT_IDENTIFIER_REGEX = /(S|(^|_)s)upport(.*)(H(ref|REF)|U(rl|URL))$/
+const PATH_OBJ_REGEX = /^((p|P)ath|PATH)\./
+const SUPPORT_PATH_MEMBER_REGEX = /\.support\./
+
+const ANCHER_LIKE_REGEX = /(Anchor(Button)?|Link|^a)$/
+const HELP_LINK_REGEX = /HelpLink$/
+
+const checkSupportURL = (node, context) => {
+  switch (node.type) {
+    case 'Literal': {
+      return SUPPORT_URL_PREFIX_REGEX.test(node.value)
+    }
+    case 'JSXExpressionContainer': {
+      return checkSupportURLExpression(node.expression, context)
+    }
+  }
+
+  return false
+}
+
+const checkSupportURLExpression = (node, context) => {
+  switch (node.type) {
+    case 'Literal': {
+      return SUPPORT_URL_PREFIX_REGEX.test(node.value)
+    }
+    case 'Identifier': {
+      return SUPPORT_IDENTIFIER_REGEX.test(node.name)
+    }
+    case 'CallExpression':
+    case 'ChainExpression':
+    case 'MemberExpression': {
+      const fullName = context.sourceCode.getText(node)
+
+      return PATH_OBJ_REGEX.test(fullName) && SUPPORT_PATH_MEMBER_REGEX.test(fullName)
+    }
+    case 'TemplateLiteral': {
+      const someChecker = (e) => checkSupportURLExpression(e, context)
+
+      return node.expressions.some(someChecker) || node.quasis.some(someChecker)
+    }
+    case 'TemplateElement': {
+      return node.value.raw && SUPPORT_URL_PREFIX_REGEX.test(node.value.raw)
+    }
+    case 'TSAsExpression': {
+      return checkSupportURLExpression(node.expression, context)
+    }
+    case 'LogicalExpression': {
+      return checkSupportURLExpression(node.left, context) || checkSupportURLExpression(node.right, context)
+    }
+    case 'ConditionalExpression': {
+      return checkSupportURLExpression(node.alternate, context) || checkSupportURLExpression(node.consequent, context)
+    }
+  }
+
+  return false
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      JSXAttribute: (node) => {
+        if (node.name.name === 'href' && ANCHER_LIKE_REGEX.test(node.parent.name.name) && !HELP_LINK_REGEX.test(node.parent.name.name) && checkSupportURL(node.value, context)) {
+          context.report({
+            node,
+            message: `ヘルプページ用のリンクは smarthr-ui/HelpLink コンポーネントを利用してください`,
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/best-practice-for-layouts/index.js

@@ -24,6 +24,11 @@ const searchChildren = (node) => {
   }
 
   switch(node.type) {
+    case 'MemberExpression':
+      return searchChildren(node.object)
+    // {hoge} や {hoge.fuga} の場合、許容する
+    case 'Identifier':
+      return false
     case 'JSXExpressionContainer':
     case 'ChainExpression':
       return searchChildren(node.expression)
@@ -101,7 +106,6 @@ module.exports = {
                 return
               }
 
-
               if (searchChildren(children[0])) {
                 context.report({
                   node,

package/rules/best-practice-for-nested-attributes-array-index/README.md

@@ -0,0 +1,91 @@
+# smarthr/best-practice-for-nested-attributes-array-index
+
+- 入力要素のname属性で、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy]）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してすることを促すルールです
+- 前述例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります
+
+## indexを設定しない場合に起こり得る問題の詳細
+
+配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy]）、配列のアイテムの値はどこからどこまでが1つ目、ここから2つ目... というように区切る処理が自動的に行われます。
+これらの区切りは `全く同じnameが出てきたら区切る` という処理が行われます。
+
+```js
+a[xxx][][id]='1'
+a[xxx][][value]='hoge'
+a[xxx][][id]='2' // `a[xxx][][id]`が被ったのでここで別オブジェクトになる
+a[xxx][][value]='fuga'
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: 1, value: 'hoge' },
+    { id: 2, value: 'fuga' },
+  ]
+}
+*/
+```
+
+この挙動は、例えば以下のようなパターンで問題になります。
+
+```js
+// 問題あるパターン
+// 新規作成でa[xxx][][id]=undefinedなので非表示にしたと仮定
+a[xxx][][value]='hoge'
+a[xxx][][id]='2' // 本来↓のvalueと紐づくべき値が↑に紐づいてしまう
+a[xxx][][value]='fuga' // `a[xxx][][value]`が被ったのでここで別オブジェクトになる
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: 2, value: 'hoge' },
+    { id: nil, value: 'fuga' }, // fugaだったもののidがhogeに紐づいてしまう
+  ]
+}
+*/
+```
+
+この問題は正しくnameにindexを含めることで回避できます
+
+```js
+a[xxx][0][value]='hoge'
+a[xxx][1][id]='2'
+a[xxx][1][value]='fuga'
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: nil, value: 'hoge' },
+    { id: 2, value: 'fuga' },
+  ]
+}
+*/
+```
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-nested-attributes-array-index': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Input name="a[xxxx][][yyy]" />
+<Input name={"${any}[][xxx]"} />
+
+
+// 文字列の変数などでも `[][` のような指定が出てくるのはほぼname属性に対する指定として
+// 利用される可能性が高いためチェック対象です
+const namePrefix = 'a[xxx][][yyy]'
+```
+
+## ✅ Correct
+
+```jsx
+<Input name="a[xxxx][0][yyy]" />
+<Input name={"${any}[${index}][xxx]"} />
+const namePrefix = `a[xxx][${index}][yyy]`
+```

package/rules/best-practice-for-nested-attributes-array-index/index.js

@@ -0,0 +1,35 @@
+const SCHEMA = []
+
+const NOINDEX_ARRAY_REGEX = /\[\]\[/
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const checker = (node, value) => {
+      if (NOINDEX_ARRAY_REGEX.test(value)) {
+        context.report({
+          node,
+          message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+ - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
+ - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`,
+        })
+      }
+    }
+
+    return {
+      Literal: (node) => {
+        checker(node, node.value)
+      },
+      TemplateElement: (node) => {
+        checker(node, node.value.cooked)
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/component-name/index.js

@@ -37,6 +37,7 @@ const EXPECTED_NAMES = {
   'FormControls$': 'FormControls$',
   'FormDialog$': 'FormDialog$',
   'FormGroup$': 'FormGroup$',
+  'HelpLink$': 'HelpLink$',
   'Icon$': 'Icon$',
   'Image$': 'Image$',
   'Img$': 'Img$',

package/rules/format-translate-component/index.js

@@ -14,6 +14,10 @@ const SCHEMA = [
 ]
 
 const NOOP = () => {}
+const findDangerouslySetInnerHTMLAttr = (a) => a.name.name === 'dangerouslySetInnerHTML'
+
+const WHITESPACE_REGEX = /(\s|\n)+/g
+const ALLOW_ELM_REGEX = /^(br|RangeSeparator)$/
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -46,43 +50,39 @@ module.exports = {
         // HINT: 翻訳コンポーネントはテキストとbrのみ許容する
         if (node.name.name === componentName) {
           let existValidChild = false
-          let existNotBrElement = false
 
-          node.parent.children.forEach((c) => {
+          for (let i = 0; i < node.parent.children.length; i++) {
+            const c = node.parent.children[i]
+
             switch (c.type) {
               case 'JSXText':
                 // HINT: 空白と改行のみの場合はテキストが存在する扱いにはしない
-                if (c.value.replace(/(\s|\n)+/g, '')) {
-                  existValidChild = true
+                if (existValidChild || !c.value.replace(WHITESPACE_REGEX, '')) {
+                  break
                 }
 
-                break
+                existValidChild = true
               case 'JSXExpressionContainer':
                 // TODO 変数がstringのみか判定できるなら対応したい
                 existValidChild = true
 
                 break
               case 'JSXElement':
-                if (c.openingElement.name.name !== 'br') {
-                  existNotBrElement = true
+                if (ALLOW_ELM_REGEX.test(c.openingElement.name.name)) {
+                  break
                 }
 
-                break
-            }
-          })
-
-          const message = (() => {
-            if (existNotBrElement) {
-              return `${componentName} 内では <br /> 以外のタグは使えません`
-            } else if (!existValidChild && !node.attributes.some((a) => a.name.name === 'dangerouslySetInnerHTML')) {
-              return `${componentName} 内には必ずテキストを設置してください`
+                return context.report({
+                  node,
+                  message: `${componentName} 内では <br />, <RangeSeparator /> 以外のタグは使えません`,
+                });
             }
-          })()
+          }
 
-          if (message) {
+          if (!existValidChild && !node.attributes.some(findDangerouslySetInnerHTMLAttr)) {
             context.report({
               node,
-              message,
+              message: `${componentName} 内には必ずテキストを設置してください`,
             });
           }
         }

package/test/a11y-help-link-with-support-href.js

@@ -0,0 +1,32 @@
+const rule = require('../rules/a11y-help-link-with-support-href')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+const errorText = `ヘルプページ用のリンクは smarthr-ui/HelpLink コンポーネントを利用してください`
+
+ruleTester.run('a11y-help-link-with-support-href', rule, {
+  valid: [
+    { code: `<HelpLink href="//support.hoge">any</HelpLink>` },
+    { code: `<Hoge href="//support.hoge">any</Hoge>` },
+    { code: `<HelpLink href="//support.hoge" />` },
+    { code: `<HelpLink href={"//support.hoge"} />` },
+    { code: `<HelpLink href={path.support.hoge} />` },
+    { code: `<HelpLink href={supportUrl} />` },
+  ],
+  invalid: [
+    { code: `<Anchor href="//support.hoge">any</Anchor>`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={path.support.hoge} />`, errors: [{ message: errorText }] },
+    { code: `<a href={supportUrl}>ほげ</a>`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={path.support.hoge?.fuga} />`, errors: [{ message: errorText }] },
+    { code: `<HogeAnchor href={a ? path.support.hoge?.fuga : null} />`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={a ? undefined : supportHogeHref} />`, errors: [{ message: errorText }] },
+  ]
+})

package/test/best-practice-for-layouts.js

@@ -55,10 +55,12 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<HogeCluster justify="end" gap={0}>{a}</HogeCluster>` },
     { code: `<Stack align="flex-end">{a}</Stack>` },
     { code: `<HogeStack align="end">{a}</HogeStack>` },
+    { code: `<Cluster>{a}</Cluster>` },
+    { code: `<Cluster>{a.b}</Cluster>` },
+    { code: `<Cluster>{a ? b : c}</Cluster>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
-    { code: `<Stack>{a}</Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
     { code: `<AnyStack>{a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && <><Hoge /></>}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a && a.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
@@ -70,7 +72,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyStack>{a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<AnyStack>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyStack>`, errors: [ { message: errorMessage('Stack', 'AnyStack') } ] },
     { code: `<Cluster><Hoge /></Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
-    { code: `<Cluster>{a}</Cluster>`, errors: [ { message: errorMessage('Cluster', 'Cluster') } ] },
     { code: `<AnyCluster>{a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && <><Hoge /></>}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a && a.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
@@ -81,8 +82,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? a.b.hoge(action) : <Hoge />}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
-    { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
-    { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
     { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど

package/test/best-practice-for-nested-attributes-array-index.js

@@ -0,0 +1,31 @@
+const rule = require('../rules/best-practice-for-nested-attributes-array-index')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const ERROR_MESSAGE = `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+ - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
+ - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`
+
+ruleTester.run('best-practice-for-nested-attributes-array-index', rule, {
+  valid: [
+    { code: `<Input name="a[xxxx][0][yyy]" />` },
+    { code: '`<Input name="a[xxxx][${index}][yyy]" />`' },
+    { code: `const hoge = 'a[xxxx][0][id]'`},
+    { code: 'const hoge = `${prefix}[${index}][id]`'},
+  ],
+  invalid: [
+    { code: `<Input name="a[xxxx][][yyy]" />`, errors: [ { message: ERROR_MESSAGE } ] },
+    { code: '<Input name={`${any}[][yyy]`} />', errors: [ { message: ERROR_MESSAGE } ] },
+    { code: `const hoge = 'a[xxxx][][id]'`, errors: [ { message: ERROR_MESSAGE } ] },
+    { code: 'const hoge = `${prefix}[][id]`', errors: [ { message: ERROR_MESSAGE } ] },
+  ]
+})

package/test/format-translate-component.js

@@ -23,13 +23,14 @@ ruleTester.run('format-translate-component', rule, {
     { code: '<Any data-wovn-enable="true">ほげ</Any>', options },
     { code: '<Translate>ほげ</Translate>', options },
     { code: '<Translate>ほげ<br />ふが</Translate>', options },
+    { code: '<Translate>1<RangeSeparator />100</Translate>', options },
     { code: '<Translate>{any}</Translate>', options },
     { code: '<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />', options },
   ],
   invalid: [
     { code: '<Any data-translate="true">ほげ</Any>', options, errors: [ { message: 'data-translate 属性は使用せず、 @/any/path/Translate コンポーネントを利用してください' } ] },
-    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
-    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br />, <RangeSeparator /> 以外のタグは使えません' } ] },
     { code: '<Translate></Translate>', options, errors: [ { message: 'Translate 内には必ずテキストを設置してください' } ] },
   ]
 })