eslint-plugin-smarthr 2.3.0 → 2.5.0

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

@@ -92,6 +92,7 @@ module.exports = {
             context.report({
               node,
               message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
  - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
@@ -115,8 +116,10 @@ module.exports = {
               node,
               message:
                 (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
-                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
+                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
                   : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください
  - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
             })
@@ -128,55 +131,64 @@ module.exports = {
 
         context.report({
           node,
-          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。`
+          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
         })
       },
       [`${HEADING_ELEMENT} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: 'Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+          message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${HEADING_ELEMENT} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: 'HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください',
+          message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
         context.report({
           node,
-          message: `FormControlのlabel属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。`,
+          message: `FormControlのlabel属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: 'FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+          message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FORM_CONTROL_LABEL_ATTRIBUTE} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: "FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください",
+          message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FIELDSET_LEGEND_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
         context.report({
           node,
-          message: `Fieldsetのlegend属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。`,
+          message: `Fieldsetのlegend属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FIELDSET_LEGEND_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: 'Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+          message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
       [`${FIELDSET_LEGEND_ATTRIBUTE} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: "Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください",
+          message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
         })
       },
     }

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

@@ -13,6 +13,7 @@ module.exports = {
       context.report({
         node,
         message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index
  - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
  - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`,
       })

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

@@ -11,7 +11,8 @@ module.exports = {
       context.report({
         node,
         message: `${node.parent.name.name}の${node.name.name}属性には直接文字列を指定してください。
-  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）`,
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog
+ - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）`,
       })
     }
 

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

@@ -13,7 +13,8 @@ module.exports = {
       ':matches(ArrowFunctionExpression,FunctionDeclaration,ReturnStatement)>JSXElement>JSXOpeningElement JSXAttribute[name.name="className"][value.value=/( |^)shr-m[trbl]?-/]': (node) => {
         context.report({
           node,
-          message: 'コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。',
+          message: `コンポーネントのルート要素に外側への余白（margin）を設定しないでください。外側の余白は使用する側で制御するべきです。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin`,
         })
       },
     }

package/rules/best-practice-for-tailwind-variants/index.js

@@ -43,7 +43,8 @@ module.exports = {
         if (node.source.value === TV_COMPONENTS && node.specifiers.some(findValidImportNameNode)) {
           context.report({
             node,
-            message: `${TV_COMPONENTS} をimportする際は、名称が"${TV_COMPONENTS_METHOD}" となるようにしてください。例: "import { ${TV_COMPONENTS_METHOD} } from '${TV_COMPONENTS}'"`,
+            message: `${TV_COMPONENTS} をimportする際は、名称が"${TV_COMPONENTS_METHOD}" となるようにしてください。例: "import { ${TV_COMPONENTS_METHOD} } from '${TV_COMPONENTS}'"
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants`,
           });
         }
       },
@@ -54,13 +55,15 @@ module.exports = {
           if (idNode && !TV_RESULT_CONST_NAME_REGEX.test(idNode.id.name)) {
             context.report({
               node: idNode,
-              message: `${TV_COMPONENTS_METHOD}の実行結果を格納する変数名は "${idNode.id.name}" ではなく "${TV_RESULT_CONST_NAME_REGEX}"にmatchする名称に統一してください。`,
+              message: `${TV_COMPONENTS_METHOD}の実行結果を格納する変数名は "${idNode.id.name}" ではなく "${TV_RESULT_CONST_NAME_REGEX}"にmatchする名称に統一してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants`,
             });
           }
         } else if (TV_RESULT_CONST_NAME_REGEX.test(node.callee.name) && !findNodeUseMemo(node.parent)) {
           context.report({
             node,
-            message: `"${node.callee.name}" を実行する際、useMemoでラップし、メモ化してください`,
+            message: `"${node.callee.name}" を実行する際、useMemoでラップし、メモ化してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants`,
           });
         }
       },

package/rules/component-name/README.md

@@ -20,13 +20,18 @@
 // import 時のasをチェック
 import { HogeSelect as Fuga } from 'any'
 
-// selectと勘違いしてしまうような名称はNG
+// 特定の要素と勘違いしてしまうような名称はNG
+// 例: select要素ではないにも関わらずselectを予想してしまう名称を設定している
 const HogeSelect = styled.div
 const HogeSelect = styled(Hoge)
 
-// selectとわからないような名称はNG
+// 拡張前の要素がわからないような名称はNG
+// 例: select要素であることがHogeから想像できない
 const Hoge = styled.select
 const Hoge = styled(FugaSelect)
+
+// Modalでは意味が通らないパターンがあるためDialogに統一する方針のためNG
+const HogeModal = styled(Any)
 ```
 
 ## ✅ Correct
@@ -38,7 +43,10 @@ import { HogeSelect as FugaSelect } from 'any'
 import { type HogeSelect as Fuga } from 'any'
 import type { HogeSelect as Fuga } from 'any'
 
-// 継承元がselectであることがわかるためOK
+// あたらしい名称が継承元の要素を予想できるためOK
 const HogeSelect = styled.select
 const HogeSelect = styled(FugaSelect)
+
+// ModalではなくDialogが利用されているためOK
+const HogeDialog = styled(Any)
 ```

package/rules/component-name/index.js

@@ -1,4 +1,61 @@
-const { generateTagFormatter } = require('../../libs/format_styled_components')
+const STYLED_COMPONENTS_METHOD = 'styled'
+const STYLED_COMPONENTS = `${STYLED_COMPONENTS_METHOD}-components`
+
+const findInvalidImportNameNode = (s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== STYLED_COMPONENTS_METHOD
+
+const checkImportStyledComponents = (node, context) => {
+  if (node.source.value !== STYLED_COMPONENTS) {
+    return
+  }
+
+  const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
+
+  if (invalidNameNode) {
+    context.report({
+      node: invalidNameNode,
+      message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name`,
+    });
+  }
+}
+
+const getStyledComponentBaseName = (node) => {
+  let base = null
+
+  if (!node.init) {
+    return base
+  }
+
+  const tag = node.init.tag || node.init
+
+  if (tag.object?.name === STYLED_COMPONENTS_METHOD) {
+    base = tag.property.name
+  } else if (tag.callee) {
+    const callee = tag.callee
+
+    switch (STYLED_COMPONENTS_METHOD) {
+      case callee.name: {
+        const arg = tag.arguments[0]
+        base = arg.name || arg.value
+        break
+      }
+      case callee.callee?.name: {
+        const arg = callee.arguments[0]
+        base = arg.name || arg.value
+        break
+      }
+      case callee.object?.name:
+        base = callee.property.name
+        break
+      case callee.object?.callee?.name:
+        const arg = callee.object.arguments[0]
+        base = arg.name || arg.value
+        break
+    }
+  }
+
+  return base
+}
 
 const EXPECTED_NAMES = {
   '(A|^a)rticle$': 'Article$',
@@ -71,6 +128,7 @@ const EXPECTED_NAMES = {
 }
 
 const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name
  - childrenにHeadingを含まない場合、コンポーネントの名称から"{{expected}}"を取り除いてください
  - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/{{expected}}をexendしてください
    - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"{{expected}}"を設定し、そのコンポーネント内でsmarthr-ui/{{expected}}を利用してください`
@@ -134,7 +192,82 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
-    return generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES })
+    const entriesesTagNames = Object.entries(EXPECTED_NAMES).map(([b, e]) => [ new RegExp(b), new RegExp(e) ])
+    const entriesesUnTagNames = UNEXPECTED_NAMES ? Object.entries(UNEXPECTED_NAMES).map(([b, e]) => {
+      const [ auctualE, messageTemplate ] = Array.isArray(e) ? e : [e, '']
+
+      return [ new RegExp(b), new RegExp(auctualE), messageTemplate ]
+    }) : []
+
+
+    const checkImportedNameToLocalName = (node, base, extended, isImport) => {
+      entriesesTagNames.forEach(([b, e]) => {
+        if (base.match(b) && !extended.match(e)) {
+          context.report({
+            node,
+            message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name${isImport ? `
+ - ${base}が型の場合、'import type { ${base} as ${extended} }' もしくは 'import { type ${base} as ${extended} }' のように明示的に型であることを宣言してください。名称変更が不要になります` : ''}`,
+          });
+        }
+      })
+    }
+
+    return {
+      ImportDeclaration: (node) => {
+        checkImportStyledComponents(node, context)
+
+        if (node.importKind !== 'type') {
+          node.specifiers.forEach((s) => {
+            if (s.importKind !== 'type' && s.imported && s.imported.name !== s.local.name) {
+              checkImportedNameToLocalName(node, s.imported.name, s.local.name, true)
+            }
+          })
+        }
+      },
+      VariableDeclarator: (node) => {
+        const base = getStyledComponentBaseName(node)
+
+        if (base) {
+          const extended = node.id.name
+
+          checkImportedNameToLocalName(node, base, extended)
+
+          entriesesUnTagNames.forEach(([b, e, m]) => {
+            const matcher = extended.match(e)
+
+            if (matcher && !base.match(b)) {
+              const expected = matcher[1]
+              const isBareTag = base === base.toLowerCase()
+              const sampleFixBase = `styled${isBareTag ? `.${base}` : `(${base})`}`
+
+              context.report({
+                node,
+                message: m ? m
+                .replaceAll('{{extended}}', extended)
+                .replaceAll('{{expected}}', expected) : `${extended} は ${b.toString()} にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name
+ - ${extended} の名称の末尾が"${expected}" という文字列ではない状態にしつつ、"${base}"を継承していることをわかる名称に変更してください
+ - もしくは"${base}"を"${extended}"の継承元であることがわかるような${isBareTag ? '適切なタグや別コンポーネントに差し替えてください' : '名称に変更するか、適切な別コンポーネントに差し替えてください'}
+   - 修正例1: const ${extended.replace(expected, '')}Xxxx = ${sampleFixBase}
+   - 修正例2: const ${extended}Xxxx = ${sampleFixBase}
+   - 修正例3: const ${extended} = styled(Xxxx${expected})`
+              })
+            }
+          })
+        }
+      },
+      'VariableDeclarator[id.name=/Modal/]': (node) => {
+        context.report({
+          node,
+          message: `コンポーネント名や変数名に"Modal"という名称は使わず、"Dialog"に統一してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/component-name
+ - Modalとは形容詞であり、かつ"現在の操作から切り離して専用の操作を行わせる" という意味合いを持ちます
+   - そのためDialogでなければ正しくない場合がありえます(smarthr-ui/ModelessDialogのように元々の操作も行えるDialogなどが該当)
+   - DialogはModalなダイアログ、Modelessなダイアログすべてを含有した名称のため、統一することを推奨しています`
+        })
+      },
+    }
   },
 }
 module.exports.schema = SCHEMA

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

@@ -14,6 +14,7 @@ module.exports = {
         context.report({
           node,
           message: `${node.name.name} には prefix と suffix は同時に設定できません。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons
  - どちらにもアイコンをつけられそうな場合は、prefixを優先してください。`,
         })
       }

package/rules/format-import-path/index.js

@@ -130,7 +130,8 @@ module.exports = {
         if (importPath !== fixedImportPath) {
           context.report({
             node,
-            message: `${fixedImportPath} に修正してください`,
+            message: `${fixedImportPath} に修正してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path`,
             fix: (fixer) => fixer.replaceText(
               node,
               context.sourceCode.getText(node).replace(new RegExp(`from '${importPath}'$`), `from '${fixedImportPath}'`)

package/rules/jsx-start-with-spread-attributes/index.js

@@ -39,7 +39,8 @@ module.exports = {
 
           context.report({
             node,
-            message: `"${attributeCode}" は意図しない上書きを防ぐため、spread attributesでない属性より先に記述してください`,
+            message: `"${attributeCode}" は意図しない上書きを防ぐため、spread attributesでない属性より先に記述してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/jsx-start-with-spread-attributes`,
             fix: option?.fix ? (fixer) => {
               const elementNode = node.parent
               const sortedAttributes = [...elementNode.attributes].reduce((p, a, i) => {

package/rules/no-import-other-domain/index.js

@@ -122,7 +122,8 @@ module.exports = {
 
           context.report({
             node,
-            message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。`,
+            message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/no-import-other-domain`,
           })
         }
       },

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

@@ -12,6 +12,7 @@ module.exports = {
         context.report({
           node,
           message: `型をexportする際、配列ではなくアイテムの型をexportしてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-export-array-type
  - 型を配列でexportすると、その型が配列かどうかを判定するための情報は名称のみになります
  - 名称から配列かどうかを判定しにくい場合があるため、利用するファイル内で配列として型を設定してください`,
         })

package/rules/prohibit-file-name/index.js

@@ -34,7 +34,8 @@ module.exports = {
       matcher = context.filename.match(new RegExp(path))
 
       if (matcher) {
-        messages.push([...matcher].reduce(((prev, k, index) => prev.replaceAll(`\$${index}`, k)), message))
+        messages.push([...matcher].reduce(((prev, k, index) => prev.replaceAll(`\$${index}`, k)), `${message}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-file-name`))
       }
     })
 

package/rules/prohibit-import/index.js

@@ -33,7 +33,8 @@ const SCHEMA = [{
 
 const CWD = process.cwd()
 
-const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} は利用しないでください`
+const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} は利用しないでください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-import`
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -84,7 +85,8 @@ module.exports = {
               if (useImported) {
                 context.report({
                   node,
-                  message: reportMessage ? reportMessage.replaceAll('{{module}}', node.source.value).replaceAll('{{export}}', useImported) : defaultReportMessage(node.source.value, useImported)
+                  message: reportMessage ? `${reportMessage.replaceAll('{{module}}', node.source.value).replaceAll('{{export}}', useImported)}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-import` : defaultReportMessage(node.source.value, useImported)
                 });
               }
             }

package/rules/prohibit-path-within-template-literal/index.js

@@ -46,7 +46,8 @@ module.exports = {
           if (name) {
             context.report({
               node: exp,
-              message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })`,
+              message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-path-within-template-literal`,
             });
           }
         })

package/rules/require-barrel-import/index.js

@@ -185,7 +185,8 @@ module.exports = {
 
           context.report({
             node,
-            message: deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`,
+            message: `${deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-barrel-import`,
           });
         }
       },

package/rules/require-declaration/index.js

@@ -103,7 +103,8 @@ module.exports = {
             if (!hit) {
               context.report({
                 node,
-                message: localOption.reportMessage || `${localOption.type} ${requireDeclaration}が宣言されていません`,
+                message: `${localOption.reportMessage || `${localOption.type} ${requireDeclaration}が宣言されていません`}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-declaration`,
               })
             } else if (localOption.use) {
               const code = context.sourceCode.getText(hit)
@@ -113,7 +114,8 @@ module.exports = {
                 if (!useRegex(u).test(code) && (!localOption.reportMessage || !reported)) {
                   context.report({
                     node: hit,
-                    message: localOption.reportMessage || `${localOption.type} ${requireDeclaration} では ${u} を利用してください`,
+                    message: `${localOption.reportMessage || `${localOption.type} ${requireDeclaration} では ${u} を利用してください`}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-declaration`,
                   })
                   reported = true
                 }

package/rules/require-export/index.js

@@ -79,7 +79,8 @@ module.exports = {
           if (notExistsExports.length) {
             context.report({
               node,
-              message: `${notExistsExports.join(', ')} をexportしてください`,
+              message: `${notExistsExports.join(', ')} をexportしてください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-export`,
             })
           }
         })

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

@@ -55,7 +55,8 @@ module.exports = {
     const reportAttributeError = (node) => {
       context.report({
         node,
-        message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください`,
+        message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-i18n-text`,
       })
     }
 
@@ -83,7 +84,8 @@ module.exports = {
     handlers['JSXText[value=/\\S/]'] = (node) => {
       context.report({
         node,
-        message: '子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください',
+        message: `子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-i18n-text`,
       })
     }
 

package/rules/require-import/index.js

@@ -80,7 +80,8 @@ module.exports = {
             const reporter = (item) => {
               context.report({
                 node,
-                message: reportMessage ? reportMessage.replaceAll('{{module}}', actualTarget).replaceAll('{{export}}', item) : defaultReportMessage(actualTarget, item)
+                message: `${reportMessage ? reportMessage.replaceAll('{{module}}', actualTarget).replaceAll('{{export}}', item) : defaultReportMessage(actualTarget, item)}
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-import`
               })
             }
 

package/rules/trim-props/index.js

@@ -1,5 +1,17 @@
 const SCHEMA = []
 
+const searchBubbleUp = (node) => {
+  switch (node.type) {
+    case 'Program':
+    case 'JSXAttribute':
+      return null
+    case 'TemplateLiteral':
+      return node
+  }
+
+  return searchBubbleUp(node.parent)
+}
+
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -10,21 +22,21 @@ module.exports = {
     fixable: 'whitespace',
   },
   create(context) {
-    return {
-      'JSXAttribute Literal[value=/(^ | $)/]': (node) => {
-        return context.report({
-          node,
-          message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
-          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/^('|")\s+/, '$1').replace(/\s+('|")$/, '$1')),
-        })
-      },
-      'JSXAttribute TemplateLiteral:has(TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/]))': (node) => {
+    const checker = (node) => {
+      // HINT: TemplateLiteralがネストしている場合、親側だけチェックする
+      if (!searchBubbleUp(node.parent)) {
         return context.report({
           node,
-          message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
-          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/(^`\s+|\s+`$)/g, '`')),
+          message: `属性に設定している文字列から先頭、末尾の空白文字を削除してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/trim-props`,
+          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/^('|"|`)\s+/, '$1').replace(/\s+('|"|`)$/, '$1')),
         })
-      },
+      }
+    }
+
+    return {
+      'JSXAttribute Literal[value=/(^ | $)/]': checker,
+      'JSXAttribute TemplateLiteral:has(>TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/]))': checker,
     }
   },
 }

package/test/a11y-anchor-has-href-attribute.js

@@ -11,6 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 const generateErrorText = (name) => `${name} に href 属性を正しく設定してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-anchor-has-href-attribute
  - onClickなどでページ遷移する場合でもhref属性に遷移先のURIを設定してください
    - Cmd + clickなどのキーボードショートカットに対応出来ます
  - onClickなどの動作がURLの変更を行わない場合、button要素でマークアップすることを検討してください

package/test/a11y-clickable-element-has-text.js

@@ -11,6 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 const defaultErrorMessage = `a, buttonなどのクリッカブルな要素内にはテキストを設定してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-clickable-element-has-text
  - 要素内にアイコン、画像のみを設置する場合はaltなどの代替テキスト用属性を指定してください
   - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください
  - クリッカブルな要素内に設置しているコンポーネントがテキストを含んでいる場合、"XxxxText" のように末尾に "Text" もしくは "Message" という名称を設定してください`

package/test/a11y-delegate-element-has-role-presentation.js

@@ -17,6 +17,7 @@ const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveCompone
   const onAttrsText = onAttrs.join(', ')
 
   return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
  - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
  - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
@@ -29,6 +30,7 @@ const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveCompone
    - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
 }
 const messageRolePresentationNotHasInteractive = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => `${nodeName}に 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
  - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
  - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください

package/test/a11y-form-control-in-form.js

@@ -11,6 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 const generateErrorText = (elementName) => `${elementName}をform要素で囲むようにマークアップしてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-form-control-in-form
  - form要素で囲むことでスクリーンリーダーに入力フォームであることが正しく伝わる、入力要素にfocusした状態でEnterを押せばsubmitできる、inputのpattern属性を利用できるなどのメリットがあります
  - 以下のいずれかの方法で修正をおこなってください
    - 方法1: form要素で ${elementName} を囲んでください。smarthr-ui/ActionDialog、もしくはsmarthr-ui/RemoteTriggerActionDialogを利用している場合、smarthr-ui/FormDialog、smarthr-ui/RemoteTriggerFormDialogに置き換えてください