eslint-plugin-smarthr 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.
 
+## [2.1.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.0.0...eslint-plugin-smarthr-v2.1.0) (2025-10-29)
+
+
+### Features
+
+* prohibit-export-array-typeの型チェックをArray<any>の場合も対象にする ([#869](https://github.com/kufu/tamatebako/issues/869)) ([ee4a647](https://github.com/kufu/tamatebako/commit/ee4a64755c36880d8f43c31ebd47244d71ea2fe9))
+* コンポーネントの子要素やプロパティの文字列リテラルを多言語化の観点で検査するルールを追加 ([#815](https://github.com/kufu/tamatebako/issues/815)) ([9dc8bda](https://github.com/kufu/tamatebako/commit/9dc8bda98d1a978dd0e4d61b91c858ef1c117d9c))
+
 ## [2.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.11.0...eslint-plugin-smarthr-v2.0.0) (2025-10-16)
 
 

package/libs/format_styled_components.js

@@ -123,4 +123,4 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
   }
 }
 
-module.exports = { generateTagFormatter, checkImportStyledComponents, getStyledComponentBaseName }
+module.exports = { generateTagFormatter }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.20.0"
+    "node": ">=22.21.0"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.46.0"
+    "typescript-eslint": "^8.46.2"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "dd35a6760dd9022d4b28747996c2016022e94dc6"
+  "gitHead": "41a58b02c8a6116db8f65bfed94283fa0187d53f"
 }

package/rules/a11y-image-has-alt-attribute/index.js

@@ -1,4 +1,3 @@
-const REGEX_IMG = /((i|I)mg|Image)$/ // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
 const IMG_ELEMENT = 'JSXOpeningElement[name.name=/((i|I)mg|Image)$/]'
 const ALT_LIKE_ATTRIBUTE = 'JSXAttribute[name.name=/^(alt|aria-describedby)$/]'
 

package/rules/a11y-prohibit-useless-sectioning-fragment/index.js

@@ -1,24 +1,9 @@
-const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
-const SECTIONING_REGEX = /((A(rticle|side))|Nav|Section)$/
-const SECTIONING_FRAGMENT = 'SectioningFragment'
-const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
-const AS_REGEX = /^(as|forwardedAs)$/
-
-const includeSectioningAsAttr = (a) => AS_REGEX.test(a.name?.name) && BARE_SECTIONING_TAG_REGEX.test(a.value.value)
-
-const searchSectioningFragment = (node) => {
-  switch (node.type) {
-    case 'JSXElement':
-      return SECTIONING_FRAGMENT === node.openingElement.name?.name ? node.openingElement : null
-    case 'Program':
-      return null
-  }
-
-  return searchSectioningFragment(node.parent)
-}
-
 const SCHEMA = []
 
+const SECTIONING_FRAGMENT_ELEMENT = 'JSXElement[openingElement.name.name="SectioningFragment"]'
+const SECTIONING_CONTENT_ELEMENT = 'JSXOpeningElement[name.name=/((A(rticle|side))|Nav|Section)$/]'
+const SECTIONING_LAYOUT_ELEMENT = 'JSXOpeningElement[name.name=/((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/]:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^(article|aside|nav|section)$/])'
+
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -29,31 +14,11 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        const name = node.name?.name || ''
-        let hit = null
-        let asAttr = null
-
-        if (SECTIONING_REGEX.test(name)) {
-          hit = true
-        } else {
-          asAttr = LAYOUT_REGEX.test(name) && node.attributes.find(includeSectioningAsAttr)
-
-          if (asAttr) {
-            hit = true
-          }
-        }
-
-        if (hit) {
-          result = searchSectioningFragment(node.parent.parent)
-
-          if (result) {
-            context.report({
-              node: result,
-              message: `無意味なSectioningFragmentが記述されています。子要素である<${name}${asAttr ? ` ${asAttr.name.name}="${asAttr.value.value}"` : ''}>で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
-            })
-          }
-        }
+      [`${SECTIONING_FRAGMENT_ELEMENT}:has(:matches(${SECTIONING_CONTENT_ELEMENT}, ${SECTIONING_LAYOUT_ELEMENT}))`]: (node) => {
+        context.report({
+          node,
+          message: `無意味なSectioningFragmentが記述されています。子要素で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+        })
       },
     }
   },

package/rules/a11y-trigger-has-button/index.js

@@ -1,5 +1,4 @@
 const TRIGGER_REGEX = /(Dropdown|Dialog)Trigger$/
-const HELP_DIALOG_TRIGGER_REGEX = /HelpDialogTrigger$/
 const BUTTON_REGEX = /(B|^b)utton$/
 const ANCHOR_BUTTON_REGEX = /AnchorButton$/
 const FALSY_TEXT_REGEX = /^\s*\n+\s*$/
@@ -18,54 +17,37 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXElement: (parentNode) => {
-        // HINT: 閉じタグが存在しない === 子が存在しない
-        // 子を持っていない場合はおそらく固定の要素を吐き出すコンポーネントと考えられるため
-        // その中身をチェックすることで担保できるのでskipする
-        if (!parentNode.closingElement) {
-          return
-        }
-
-        const node = parentNode.openingElement
-
-        if (!node.name.name) {
-          return
-        }
-
-        const match = node.name.name.match(TRIGGER_REGEX)
-
-        if (!match || HELP_DIALOG_TRIGGER_REGEX.test(node.name.name)) {
-          return
-        }
-
+      [`JSXElement[openingElement.name.name=${TRIGGER_REGEX}]:not([openingElement.name.name=/HelpDialogTrigger$/])`]: (parentNode) => {
         const children = filterFalsyJSXText(parentNode.children)
 
         if (children.length > 1) {
+          const node = parentNode.openingElement
+          const match = node.name.name.match(TRIGGER_REGEX)
+
           context.report({
             node,
-            message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください`,
+            message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください`,
           })
-
-          return
-        }
-
-        children.forEach((c) => {
-          // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
-          if (c.type === 'JSXExpressionContainer') {
-            return false
-          }
+        } else {
+          const c = children[0]
 
           if (
-            c.type !== 'JSXElement' ||
-            !BUTTON_REGEX.test(c.openingElement.name.name) ||
-            ANCHOR_BUTTON_REGEX.test(c.openingElement.name.name)
+            // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
+            c &&
+            c.type !== 'JSXExpressionContainer' && (
+              c.type !== 'JSXElement' ||
+              !BUTTON_REGEX.test(c.openingElement.name.name) ||
+              ANCHOR_BUTTON_REGEX.test(c.openingElement.name.name)
+            )
           ) {
+            const match = parentNode.openingElement.name.name.match(TRIGGER_REGEX)
+
             context.report({
               node: c,
-              message: `${match[1]}Trigger の直下にはbuttonコンポーネントのみ設置してください`,
+              message: `${match[1]}Trigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)`,
             })
           }
-        })
+        }
       },
     }
   },

package/rules/best-practice-for-async-current-target/index.js

@@ -33,16 +33,12 @@ module.exports = {
     const getSourceCodeText = (node) => context.sourceCode.getText(node)
 
     return {
-      MemberExpression: (node) => {
-        if (node.property && node.property.name === 'currentTarget') {
-          const eventObjectName = node.object.name
-
-          if (eventObjectName) {
-            switch (checkFunctionTopVariable(node.parent, eventObjectName, getSourceCodeText)) {
-              case 1:
-                context.report({
-                  node,
-                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+      [`:matches(FunctionExpression, ArrowFunctionExpression) MemberExpression[property.name="currentTarget"][object.name]`]: (node) => {
+        switch (checkFunctionTopVariable(node.parent, node.object.name, getSourceCodeText)) {
+          case 1:
+            context.report({
+              node,
+              message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
  - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
  - NG例:
     const onChange = async (e) => {
@@ -55,13 +51,13 @@ module.exports = {
       await hoge()
       fuga(value)
     }`,
-                })
+            })
 
-                break
-              case 2:
-                context.report({
-                  node,
-                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+            break
+          case 2:
+            context.report({
+              node,
+              message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
  - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
  - React/useStateのsetterは第一引数に関数を渡すと非同期処理になるためこの問題が起きる可能性があります
  - イベントハンドラ内で関数を定義すると参照タイミングがずれる可能性があるため、イベントハンドラ直下のスコープ内にcurrentTarget関連の参照を変数に残すことをオススメします
@@ -74,12 +70,9 @@ module.exports = {
       const value = e.currentTarget.value
       setItem((current) => ({ ...current, value }))
     }`,
-                })
-
-                break
-            }
-          }
+            })
 
+            break
         }
       },
     }

package/rules/best-practice-for-button-element/index.js

@@ -1,12 +1,6 @@
-const { checkImportStyledComponents, getStyledComponentBaseName } = require('../../libs/format_styled_components')
-
 const ERRORMESSAGE_SUFFIX = `
  - button要素のtype属性のデフォルトは "submit" のため、button要素がformでラップされていると意図しないsubmitを引き起こす可能性があります
  - smarthr-ui/Button, smarthr-ui/UnstyledButtonのtype属性のデフォルトは "button" になっているため、buttonから置き換えることをおすすめします`
-const ERRORMESSAGE_REQUIRED_TYPE_ATTR = `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください${ERRORMESSAGE_SUFFIX}`
-const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください${ERRORMESSAGE_SUFFIX}`
-
-const findTypeAttr = (a) => a.type === 'JSXAttribute' && a.name.name === 'type'
 
 const SCHEMA = []
 
@@ -21,24 +15,17 @@ module.exports = {
   },
   create(context) {
     return {
-      ImportDeclaration: (node) => {
-        checkImportStyledComponents(node, context)
-      },
-      JSXOpeningElement: (node) => {
-        if (node.name.name === 'button' && !node.attributes.find(findTypeAttr)) {
-          context.report({
-            node,
-            message: ERRORMESSAGE_REQUIRED_TYPE_ATTR,
-          });
-        }
+      [`JSXOpeningElement[name.name="button"]:not(:has(JSXAttribute[name.name="type"]))`]: (node) => {
+        context.report({
+          node,
+          message: `button要素を利用する場合、type属性に "button" もしくは "submit" を指定してください${ERRORMESSAGE_SUFFIX}`,
+        });
       },
-      VariableDeclarator: (node) => {
-        if (getStyledComponentBaseName(node) === 'button') {
-          context.report({
-            node,
-            message: ERRORMESSAGE_PROHIBIT_STYLED,
-          });
-        }
+      [`MemberExpression[object.name="styled"][property.name="button"]`]: (node) => {
+        context.report({
+          node,
+          message: `"styled.button" の直接利用をやめ、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonを利用してください${ERRORMESSAGE_SUFFIX}`,
+        });
       },
     }
   },

package/rules/best-practice-for-data-test-attribute/index.js

@@ -12,20 +12,17 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXAttribute: (node) => {
-        const hit = node.name.name.match(PROHIBIT_ATTR_REGEX)
-
-        if (hit) {
-          context.report({
-            node,
-            message: `テストのために要素を指定するために、${hit[1]} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
- - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+      'JSXAttribute[name.name=/^(data-(spec|testid))$/]': (node) => {
+        context.report({
+          node,
+          message: `テストしたい要素を指定するためにテスト用の属性は利用せず、他の方法を検討してください
+ - 方法1: click_link, click_button等を利用することで、テスト環境に準じた方法で要素を指定することを検討してください
    - 参考(Testing Library): https://testing-library.com/docs/queries/about
    - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
- - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
- - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
-          });
-        }
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole、name、aria系などユーザーが認識できる属性を利用した方法で要素を指定することを検討してください
+   - 画像の場合、alt属性が利用できます
+   - id, class属性は基本的にユーザーが認識出来ないため利用しないでください`,
+        });
       },
     }
   },

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

@@ -1,10 +1,3 @@
-const MESSAGE_NEW_DATE = `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
- - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
- - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`
-const MESSAGE_PARSE = `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
- - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
- - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`
-
 const SEPARATOR = '(\/|-)'
 const DATE_REGEX = new RegExp(`^([0-9]{4})${SEPARATOR}([0-9]{1,2})${SEPARATOR}([0-9]{1,2})`)
 
@@ -36,29 +29,23 @@ module.exports = {
   },
   create(context) {
     return {
-      NewExpression: (node) => {
-        if (
-          node.callee.name === 'Date' &&
-          node.arguments.length == 1
-        ) {
-          context.report({
-            node,
-            message: MESSAGE_NEW_DATE,
-            fix: (fixer) => fixAction(fixer, node),
-          });
-        }
+      'NewExpression[callee.name="Date"][arguments.length=1]': (node) => {
+        context.report({
+          node,
+          message: `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`,
+          fix: (fixer) => fixAction(fixer, node),
+        });
       },
-      CallExpression: (node) => {
-        if (
-          node.callee.object?.name === 'Date' &&
-          node.callee.property?.name === 'parse'
-        ) {
-          context.report({
-            node,
-            message: MESSAGE_PARSE,
-            fix: (fixer) => fixAction(fixer, node, '.getTime()'),
-          });
-        }
+      'CallExpression[callee.object.name="Date"][callee.property.name="parse"]': (node) => {
+        context.report({
+          node,
+          message: `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`,
+          fix: (fixer) => fixAction(fixer, node, '.getTime()'),
+        });
       },
     }
   },

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

@@ -1,7 +1,5 @@
 const SCHEMA = []
 
-const NOINDEX_ARRAY_REGEX = /\[\]\[/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -11,24 +9,18 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
-    const checker = (node, value) => {
-      if (NOINDEX_ARRAY_REGEX.test(value)) {
-        context.report({
-          node,
-          message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+    const checker = (node) => {
+      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)
-      },
+      'Literal[value=/\\[\\]\\[/]': checker,
+      'TemplateElement[value.cooked=/\\[\\]\\[/]': checker,
     }
   },
 }

package/rules/best-practice-for-remote-trigger-dialog/index.js

@@ -1,6 +1,3 @@
-const REGEX_REMOTE_TRIGGER_DIALOG = /RemoteTrigger(Action|Form|Message|Modeless)Dialog$/
-const REGEX_REMOTE_DIALOG_TRIGGER = /RemoteDialogTrigger$/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -10,27 +7,17 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
-
-        const regexRemoteTriggerDialog = REGEX_REMOTE_TRIGGER_DIALOG.test(nodeName)
-
-        if (regexRemoteTriggerDialog || REGEX_REMOTE_DIALOG_TRIGGER.test(nodeName)) {
-          const attrName = regexRemoteTriggerDialog ? 'id' : 'targetId'
-          const id = node.attributes.find((a) => a.name?.name === attrName)
+    const checker = (node) => {
+      context.report({
+        node,
+        message: `${node.parent.name.name}の${node.name.name}属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）`,
+      })
+    }
 
-          if (id && id.value.type !== 'Literal') {
-            context.report({
-              node: id,
-              message: `${nodeName}の${attrName}属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください`,
-            })
-          }
-        }
-      }
+    return {
+      'JSXOpeningElement[name.name=/RemoteTrigger(Action|Form|Message|Modeless)Dialog$/] JSXAttribute[name.name="id"]:not([value.type="Literal"])': checker,
+      'JSXOpeningElement[name.name=/RemoteDialogTrigger$/] JSXAttribute[name.name="targetId"]:not([value.type="Literal"])': checker,
     }
   },
 }

package/rules/best-practice-for-tailwind-prohibit-root-margin/index.js

@@ -1,46 +1,4 @@
-const { AST_NODE_TYPES } = require('@typescript-eslint/utils')
-
 const SCHEMA = []
-const MARGIN_CLASS_PATTERNS = /shr-m[trbl]?-/ // mt-, mr-, mb-, ml-, m-
-
-const findClassNameAttr = (attr) => attr.type === AST_NODE_TYPES.JSXAttribute && attr.name.name === 'className'
-
-/**
- * コンポーネントのルート要素を渡し、該当の余白クラスが存在すればそれを、なければNULLを返す
- * @param {import('@typescript-eslint/utils').TSESTree.Node} node
- * @returns {import('@typescript-eslint/utils').TSESTree.Literal | null}
- */
-const findSpacingClassInRootElement = (node) => {
-  // JSX でなければ対象外
-  if (node.type !== AST_NODE_TYPES.JSXElement) return null
-
-  const classNameAttr = node.openingElement.attributes.find(findClassNameAttr)
-
-  if (
-    classNameAttr &&
-    // className属性の値がリテラル、かつ余白クラスの場合
-    classNameAttr.value?.type === AST_NODE_TYPES.Literal && typeof classNameAttr.value.value === 'string' &&
-    MARGIN_CLASS_PATTERNS.test(classNameAttr.value.value)
-  ) {
-    return classNameAttr.value
-  }
-
-  return null
-}
-
-/**
- * ブロックステートメント内から、JSX要素を返す ReturnStatement を返す
- * @param {import('@typescript-eslint/utils').TSESTree.BlockStatement} block
- * @returns {import('@typescript-eslint/utils').TSESTree.ReturnStatement | null}
- */
-const findJSXReturnStatement = (block) => {
-  for (const statement of block.body) {
-    if (statement.type === AST_NODE_TYPES.ReturnStatement && statement.argument?.type === AST_NODE_TYPES.JSXElement) {
-      return statement
-    }
-  }
-  return null
-}
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule}
@@ -49,61 +7,15 @@ module.exports = {
   meta: {
     type: 'problem',
     schema: SCHEMA,
-    messages: {
-      noRootSpacing:
-        'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
-    },
   },
   create(context) {
-    /**
-     * 関数本体をチェックし、ルート要素で余白クラスが設定されたJSXを返している場合、エラーを報告する
-     * @param {import('@typescript-eslint/utils').TSESTree.Node} body
-     */
-    const checkFunctionBody = (n) => {
-      const body = n.body
-
-      switch (body.type) {
-        // 関数がブロックを持たずに直接JSXを返すパターン
-        case AST_NODE_TYPES.JSXElement: {
-          const spacingClass = findSpacingClassInRootElement(body)
-
-          if (spacingClass) {
-            context.report({
-              node: spacingClass,
-              messageId: 'noRootSpacing',
-            })
-          }
-
-          break
-        }
-        // 関数がブロック内で JSX を return するパターン
-        case AST_NODE_TYPES.BlockStatement: {
-          const returnStatement = findJSXReturnStatement(body)
-          if (returnStatement?.argument) {
-            const spacingClass = findSpacingClassInRootElement(returnStatement.argument)
-            if (spacingClass) {
-              context.report({
-                node: spacingClass,
-                messageId: 'noRootSpacing',
-              })
-            }
-          }
-
-          break
-        }
-      }
-    }
-
     return {
-      // アロー関数式のコンポーネントをチェック
-      ArrowFunctionExpression: (node) => {
-        if (node.parent?.type === AST_NODE_TYPES.VariableDeclarator) {
-          checkFunctionBody(node)
-        }
+      ':matches(ArrowFunctionExpression,FunctionDeclaration,ReturnStatement)>JSXElement>JSXOpeningElement JSXAttribute[name.name="className"][value.value=/( |^)shr-m[trbl]?-/]': (node) => {
+        context.report({
+          node,
+          message: 'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
+        })
       },
-
-      // function宣言のコンポーネントをチェック
-      FunctionDeclaration: checkFunctionBody,
     }
   },
 }

package/rules/design-system-guideline-prohibit-double-icons/index.js

@@ -1,7 +1,5 @@
 const SCHEMA = []
 
-const REGEX_PATTERN = /(Button|Link)$/
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -12,35 +10,12 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name
-
-        if (REGEX_PATTERN.test(nodeName)) {
-          let prefix = null
-          let suffix = null
-
-          for (const attr of node.attributes) {
-            switch (attr.name.name) {
-              case 'prefix':
-                prefix = attr
-                break
-              case 'suffix':
-                suffix = attr
-                break
-            }
-
-            if(prefix && suffix) {
-              context.report({
-                node,
-                message: `${nodeName} には prefix と suffix は同時に設定できません。
- - prefix または suffix のみを設定してください。
- - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
- - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
-              })
-              break
-            }
-          }
-        }
+      'JSXOpeningElement[name.name=/(Button|Link)$/]:has(JSXAttribute[name.name="prefix"]):has(JSXAttribute[name.name="suffix"])': (node) => {
+        context.report({
+          node,
+          message: `${node.name.name} には prefix と suffix は同時に設定できません。
+ - どちらにもアイコンをつけられそうな場合は、prefixを優先してください。`,
+        })
       }
     }
   },

package/rules/prohibit-export-array-type/index.js

@@ -7,18 +7,15 @@ module.exports = {
     schema: [],
   },
   create(context) {
-    const checker = (node) => {
-      if (node.declaration?.typeAnnotation?.type === 'TSArrayType') {
+    return {
+      ':matches(TSTypeReference,ExportNamedDeclaration):matches([declaration.typeAnnotation.type="TSArrayType"],[declaration.typeAnnotation.typeName.name="Array"])': (node) => {
         context.report({
           node,
-          message: '利用する際、配列かどうかわかりにくいため、配列ではない状態でexportしてください',
+          message: `型をexportする際、配列ではなくアイテムの型をexportしてください。
+ - 型を配列でexportすると、その型が配列かどうかを判定するための情報は名称のみになります
+ - 名称から配列かどうかを判定しにくい場合があるため、利用するファイル内で配列として型を設定してください`,
         })
-      }
-    }
-
-    return {
-      ExportDefaultDeclaration: checker,
-      ExportNamedDeclaration: checker,
+      },
     }
   },
 }

package/rules/require-i18n-text/README.md

@@ -0,0 +1,123 @@
+# smarthr/require-i18n-text
+
+- JSX/TSXファイル内で文字列リテラルが直接指定されていないかをチェックするルールです
+- 多言語化対応での翻訳対応漏れを防ぐために使用します
+- HTML要素の属性、カスタムコンポーネントの属性、子要素の文字列リテラルを検査対象とします
+- 数値リテラル、真偽値、空文字列は検査対象外です
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/require-i18n-text': [
+      'error', // 'warn', 'off'
+      {
+        elements: {
+          // HTML要素
+          'img': ['alt', 'title'],
+          'input': ['placeholder', 'title'],
+          'button': ['title', 'aria-label'],
+
+          // カスタムコンポーネント
+          'Button': ['label', 'errorMessage'],
+          'Input': ['placeholder', 'helperText'],
+          'Dialog': ['title', 'description'],
+
+          // すべての要素に適用
+          '*': ['data-tooltip']
+        }
+      }
+    ]
+  },
+}
+```
+
+## options
+
+### elements
+
+HTML要素とカスタムコンポーネントごとに検査対象とする属性名を指定します。
+オブジェクトのキーに要素名/コンポーネント名、値に属性名の配列を指定します。
+
+デフォルト: `{ '*': ['alt', 'aria-label', 'term', 'title'] }`
+
+オプションを指定しない場合、デフォルトでi18n候補属性がすべての要素で検査されます。
+
+#### ワイルドカード `'*'` の使用
+
+`'*'` をキーとして使用すると、すべての要素（HTML要素とカスタムコンポーネント両方）に対して属性をチェックできます。
+個別の要素設定がある場合は、そちらが優先されます。
+
+```js
+{
+  elements: {
+    // すべての要素で title をチェック
+    '*': ['title'],
+    // img要素は alt も追加でチェック
+    'img': ['alt', 'title'],
+    // Icon は除外（空配列で上書き）
+    'Icon': []
+  }
+}
+```
+
+#### デフォルト設定の上書き
+
+ワイルドカード `'*'` を明示的に設定すると、デフォルト設定を上書きできます。
+
+```js
+{
+  elements: {
+    // デフォルトを上書き
+    '*': ['data-tooltip'],
+    // 個別設定も可能
+    'Button': ['label']
+  }
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// HTML要素の属性に文字列リテラルを直接指定
+<img alt="Profile picture" />
+<input placeholder="Enter your name" />
+<button title="Close dialog" />
+
+// カスタムコンポーネントの属性に文字列リテラルを直接指定
+<Button label="Submit" />
+<Input helperText="Required field" />
+
+// 子要素に文字列リテラルを直接指定
+<div>Hello World</div>
+<Button>Submit</Button>
+<p>Welcome to our application</p>
+```
+
+## ✅ Correct
+
+```jsx
+// 翻訳関数を使用
+<img alt={t('profile_picture')} />
+<input placeholder={t('enter_your_name')} />
+<button title={t('close_dialog')} />
+
+// カスタムコンポーネントでも翻訳関数を使用
+<Button label={t('submit')} />
+<Input helperText={t('required_field')} />
+
+// 子要素でも翻訳関数を使用
+<div>{t('hello_world')}</div>
+<Button>{t('submit')}</Button>
+<p>{t('welcome_message')}</p>
+
+// 数値リテラル、真偽値、空文字列は検査対象外
+<div>{123}</div>
+<Button disabled={true} />
+<input value="" />
+
+// 検査対象外の属性（設定していない属性）
+<input name="username" />
+<div id="main-content" />
+```

package/rules/require-i18n-text/index.js

@@ -0,0 +1,94 @@
+// デフォルトのワイルドカード設定
+const DEFAULT_WILDCARD_ATTRIBUTES = [
+  'alt',
+  'aria-label',
+  // smarthr-ui DefinitionListItem
+  'term',
+  'title',
+]
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      elements: {
+        type: 'object',
+        patternProperties: {
+          '.+': {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
+        },
+        default: {},
+      },
+    },
+    additionalProperties: false,
+  },
+]
+
+// 文字列リテラルを持つ属性を選択するセレクタの条件部分
+const STRING_LITERAL_CONDITION =
+  ':matches([value.type="Literal"][value.value=/\\S/], [value.type="JSXExpressionContainer"][value.expression.type="Literal"][value.expression.value=/\\S/])'
+
+const generateAttributeSelector = (attributes) =>
+  `JSXAttribute[name.name=/^(${attributes.join('|')})$/]${STRING_LITERAL_CONDITION}`
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const elementsObj = options.elements || {}
+
+    // ユーザーが'*'を設定していない場合のみデフォルトを適用
+    const wildcardAttributes = elementsObj['*'] || DEFAULT_WILDCARD_ATTRIBUTES
+    const specificElements = Object.keys(elementsObj).filter((k) => k !== '*')
+    const handlers = {}
+
+    const reportAttributeError = (node) => {
+      context.report({
+        node,
+        message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください`,
+      })
+    }
+
+    // 個別要素の設定
+    for (const elementName of specificElements) {
+      const attributes = elementsObj[elementName]
+      if (attributes.length === 0) continue
+
+      handlers[`JSXOpeningElement[name.name="${elementName}"] > ${generateAttributeSelector(attributes)}`] = reportAttributeError
+    }
+
+    // ワイルドカード設定
+    if (wildcardAttributes && wildcardAttributes.length > 0) {
+      const attributeSelector = generateAttributeSelector(wildcardAttributes)
+      if (specificElements.length > 0) {
+        // 個別設定要素を除外
+        handlers[`JSXOpeningElement:not([name.name=/^(${specificElements.join('|')})$/]) > ${attributeSelector}`] =
+          reportAttributeError
+      } else {
+        handlers[attributeSelector] = reportAttributeError
+      }
+    }
+
+    // 子要素の文字列リテラルチェック（空白のみのテキストは除外）
+    handlers['JSXText[value=/\\S/]'] = (node) => {
+      context.report({
+        node,
+        message: '子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください',
+      })
+    }
+
+    return handlers
+  },
+}
+
+module.exports.schema = SCHEMA

package/test/a11y-prohibit-useless-sectioning-fragment.js

@@ -10,7 +10,7 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const error = (tag) => `無意味なSectioningFragmentが記述されています。子要素である${tag}で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
+const ERROR = `無意味なSectioningFragmentが記述されています。子要素で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
 
 ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
   valid: [
@@ -21,11 +21,11 @@ ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
     { code: `<AnyArticle>hoge</AnyArticle>` },
   ],
   invalid: [
-    { code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: error('<AnySection>') } ] },
-    { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
-    { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
-    { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
-    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: error('<FugaBase as="article">') } ] },
-    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: error('<FugaBaseColumn as="article">') } ] },
+    { code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: ERROR } ] },
+    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: ERROR } ] },
   ]
 })

package/test/a11y-trigger-has-button.js

@@ -13,15 +13,16 @@ const ruleTester = new RuleTester({
 ruleTester.run('a11y-trigger-has-button', rule, {
   valid: [
     { code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
-    { code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
+    { code: '<DialogTrigger><AnyButton>{hoge}</AnyButton></DialogTrigger>' },
     { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
+    { code: '<AnyDropdownTrigger/>' },
   ],
   invalid: [
-    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
-    { code: '<DialogTrigger><button>{hoge}</button>{hoge}</DialogTrigger>', errors: [ { message: 'DialogTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
-    { code: '<DropdownTrigger>{hoge}<span>text</span></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
+    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbutton要素のみ設置してください(AnchorButtonはa要素のため設置できません)' } ] },
+    { code: '<DialogTrigger><button>{hoge}</button>{hoge}</DialogTrigger>', errors: [ { message: 'DialogTrigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください' } ] },
+    { code: '<DropdownTrigger>{hoge}<span>text</span></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下には複数のコンポーネントを設置することは出来ません。button要素が一つだけ設置されている状態にしてください' } ] },
   ]
 })

package/test/best-practice-for-button-element.js

@@ -19,8 +19,6 @@ const ERRORMESSAGE_PROHIBIT_STYLED = `"styled.button" の直接利用をやめ
 
 ruleTester.run('best-practice-for-button-element', rule, {
   valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
     { code: `<Button />` },
     { code: `<Button>ほげ</Button>` },
     { code: `<AnyButton>ほげ</AnyButton>` },
@@ -29,7 +27,6 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: 'const HogeButton = styled(HogeButton)``' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: `<button>ほげ</button>`, errors: [ { message: ERRORMESSAGE_REQUIRED_TYPE_ATTR } ] },
     { code: 'const HogeButton = styled.button``', errors: [ { message: ERRORMESSAGE_PROHIBIT_STYLED } ] },
   ]

package/test/best-practice-for-data-test-attribute.js

@@ -10,12 +10,13 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const generateErrorMessage = (attr) => `テストのために要素を指定するために、${attr} 属性を利用するのではなく、他の方法で要素を指定することを検討してください。
- - 方法1: click_link, click_button等を利用したりすることで、利用しているテスト環境に準じた方法で要素を指定することを検討してください。
+const ERROR_MESSAGE = `テストしたい要素を指定するためにテスト用の属性は利用せず、他の方法を検討してください
+ - 方法1: click_link, click_button等を利用することで、テスト環境に準じた方法で要素を指定することを検討してください
    - 参考(Testing Library): https://testing-library.com/docs/queries/about
    - 参考(Capybara): https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders
- - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole属性、name属性、id属性等を利用した方法で要素を指定することを検討してください。
- - 方法3: 上記の方法でも要素が指定できない場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+ - 方法2: テスト環境のメソッド等で要素が指定できない場合はrole、name、aria系などユーザーが認識できる属性を利用した方法で要素を指定することを検討してください
+   - 画像の場合、alt属性が利用できます
+   - id, class属性は基本的にユーザーが認識出来ないため利用しないでください`
 
 
 ruleTester.run('best-practice-for-data-test-attribute', rule, {
@@ -25,9 +26,9 @@ ruleTester.run('best-practice-for-data-test-attribute', rule, {
     { code: '<Any data-any="fuga">ほげ</Any>'},
   ],
   invalid: [
-    { code: '<Any data-spec="hijklmn">ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
-    { code: '<Any data-spec>ほげ</Any>', errors: [{message: generateErrorMessage("data-spec")}] },
-    { code: '<Any data-testid="abcdefg">ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
-    { code: '<Any data-testid>ほげ</Any>', errors: [{message: generateErrorMessage("data-testid")}] },
+    { code: '<Any data-spec="hijklmn">ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-spec>ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-testid="abcdefg">ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
+    { code: '<Any data-testid>ほげ</Any>', errors: [{message: ERROR_MESSAGE}] },
   ]
 })

package/test/best-practice-for-remote-trigger-dialog.js

@@ -19,16 +19,10 @@ ruleTester.run('best-practice-for-remote-trigger-dialog', rule, {
   ],
   invalid: [
     { code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
     { code: '<StyledRemoteDialogTrigger targetId={"fuga"}>open.</StyledRemoteDialogTrigger>', errors: [ { message: `StyledRemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
     { code: '<StyldRemoteTriggerActionDialog {...args} id={"fuga"}>content.</StyldRemoteTriggerActionDialog>', errors: [ { message: `StyldRemoteTriggerActionDialogのid属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
-  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
-  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）` } ] },
   ]
 })

package/test/best-practice-for-tailwind-prohibit-root-margin.js

@@ -25,15 +25,24 @@ ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
       `,
     },
     // コンポーネントのルート以外の要素での余白使用
+    {
+      code: `
+        const Card = () => (
+          <div className="shr-bg-white">
+            <h2 className="shr-mt-4">Title</h2>
+            <p className="shr-mb-2 shr-pt-2">Content</p>
+          </div>
+        )
+      `,
+    },
+    // returnしない場合
     {
       code: `
         const Card = () => {
-          return (
-            <div className="shr-bg-white">
-              <h2 className="shr-mt-4">Title</h2>
-              <p className="shr-mb-2 shr-pt-2">Content</p>
-            </div>
-          )
+          <div className="shr-bg-white">
+            <h2 className="shr-mt-4">Title</h2>
+            <p className="shr-mb-2 shr-pt-2">Content</p>
+          </div>
         }
       `,
     },
@@ -91,7 +100,7 @@ ruleTester.run('best-practice-for-tailwind-prohibit-root-margin', rule, {
     {
       code: `
         const Box = () => (
-            <div className="shr-bg-gray-100 shr-ml-2">
+            <div className="shr-bg-gray-100 shr-ml-2 hoge">
               <p>Content</p>
             </div>
         )

package/test/design-system-guideline-prohibit-double-icons.js

@@ -11,9 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 const generateErrorText = (name) => `${name} には prefix と suffix は同時に設定できません。
- - prefix または suffix のみを設定してください。
- - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
- - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+ - どちらにもアイコンをつけられそうな場合は、prefixを優先してください。`
 
 ruleTester.run('design-system-guideline-prohibit-double-icons', rule, {
   valid: [

package/test/require-i18n-text.js

@@ -0,0 +1,170 @@
+const rule = require('../rules/require-i18n-text')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const attributeError = (element, attr) =>
+  `${element}の${attr}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください`
+const childTextError = '子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください'
+
+const options = [
+  {
+    elements: {
+      img: ['alt', 'title'],
+      div: ['title'],
+      Button: ['label'],
+    },
+  },
+]
+
+ruleTester.run('require-i18n-text', rule, {
+  valid: [
+    // 翻訳関数を使用している場合
+    { code: `<img alt={t('profile_picture')} />`, options },
+    { code: `<div>{t('hello')}</div>`, options },
+
+    // 検査対象外の属性
+    { code: `<img src="test.png" />`, options },
+
+    // 検査対象外の要素
+    { code: `<Input label="test" />`, options },
+
+    // 数値リテラル（検査対象外）
+    { code: `<div>{123}</div>`, options },
+
+    // 真偽値（検査対象外）
+    { code: `<Button disabled={true} />`, options },
+
+    // 空文字列（検査対象外）
+    { code: `<img alt="" />`, options },
+
+    // 空白のみのテキスト（検査対象外）
+    { code: `<div>  </div>`, options },
+
+    // デフォルト設定対象外の属性
+    { code: `<img src="image.png" />` },
+    { code: `<div data-testid="test" />` },
+
+    // ワイルドカード - 空配列で除外
+    {
+      code: `<Icon label="Icon text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+            Icon: [],
+          },
+        },
+      ],
+    },
+
+    // デフォルト設定の上書き
+    {
+      code: `<img alt="text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['data-tooltip'],
+          },
+        },
+      ],
+    },
+  ],
+  invalid: [
+    // 属性エラー: デフォルト設定
+    {
+      code: `<img alt="Profile picture" />`,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+    {
+      code: `<CustomComponent aria-label="Label" />`,
+      errors: [{ message: attributeError('CustomComponent', 'aria-label') }],
+    },
+    {
+      code: `<DefinitionListItem term="Label" />`,
+      errors: [{ message: attributeError('DefinitionListItem', 'term') }],
+    },
+    {
+      code: `<button title="Click me" />`,
+      errors: [{ message: attributeError('button', 'title') }],
+    },
+
+    // 属性エラー: カスタムオプション
+    {
+      code: `<img alt="Profile picture" />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+    {
+      code: `<img alt={'Profile'} />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+
+    // 属性エラー: 同一要素の複数属性
+    {
+      code: `<img alt="Profile" title="User profile" />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }, { message: attributeError('img', 'title') }],
+    },
+
+    // 属性エラー: ワイルドカード
+    {
+      code: `<CustomComponent label="Text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+          },
+        },
+      ],
+      errors: [{ message: attributeError('CustomComponent', 'label') }],
+    },
+
+    // 属性エラー: 個別設定がワイルドカードより優先
+    {
+      code: `<Button label="Submit" helperText="Help" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+            Button: ['label', 'helperText'],
+          },
+        },
+      ],
+      errors: [{ message: attributeError('Button', 'label') }, { message: attributeError('Button', 'helperText') }],
+    },
+
+    // 子要素エラー（オプション未設定時でもチェックされる）
+    {
+      code: `<div>Hello World</div>`,
+      errors: [{ message: childTextError }],
+    },
+
+    // 複合エラー: 属性と子要素
+    {
+      code: `<Button label="Submit">Click here</Button>`,
+      options,
+      errors: [{ message: attributeError('Button', 'label') }, { message: childTextError }],
+    },
+
+    // 複合エラー: 入れ子構造
+    {
+      code: `<div title="Parent"><Button label="Child">Grandchild text</Button></div>`,
+      options,
+      errors: [
+        { message: attributeError('div', 'title') },
+        { message: attributeError('Button', 'label') },
+        { message: childTextError },
+      ],
+    },
+  ],
+})