eslint-plugin-smarthr 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.4.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.3.0...eslint-plugin-smarthr-v2.4.0) (2025-12-02)
+
+
+### Features
+
+* Modalというコンポーネントの作成を禁止し、Dialogという名称に統一させる ([#915](https://github.com/kufu/tamatebako/issues/915)) ([208c2a0](https://github.com/kufu/tamatebako/commit/208c2a06034bcf24bfe1a3dd0d8633b0c546db11))
+
+
+### Bug Fixes
+
+* a11y-prohibit-checkbox-or-radio-in-table-cellのautofixを削除 & childrenを持つ場合に警告されないよう修正 ([#914](https://github.com/kufu/tamatebako/issues/914)) ([3962fda](https://github.com/kufu/tamatebako/commit/3962fda01a1966c9624d5cd7056d807f86ccb5bc))
+* trim-props でTemplateLiteralがネストしている場合のチェックを修正 ([#912](https://github.com/kufu/tamatebako/issues/912)) ([2d090c4](https://github.com/kufu/tamatebako/commit/2d090c4ef6d1ac4c9537fdb13a0198552456c10c))
+
 ## [2.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.2.1...eslint-plugin-smarthr-v2.3.0) (2025-12-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "18f89a924a8920722a1e71982a4d117db0c6a073"
+  "gitHead": "6b27e405cda722121437718a67b5886cb13ed534"
 }

package/rules/a11y-prohibit-checkbox-or-radio-in-table-cell/index.js

@@ -1,12 +1,3 @@
-const findClosestThFromAncestor = (node) => {
-  if (node.type === 'JSXElement' && node.openingElement.name.name === 'Th') {
-    return node
-  }
-  if (node.parent) {
-    return findClosestThFromAncestor(node.parent)
-  }
-}
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -20,10 +11,8 @@ module.exports = {
     },
   },
   create(context) {
-    const sourceCode = context.sourceCode
-
     return {
-      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/]': (node) => {
+      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/][children.length=0]': (node) => {
         context.report({
           node,
           messageId: 'default',
@@ -34,7 +23,7 @@ module.exports = {
           },
         })
       },
-      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/RadioButton$/]': (node) => {
+      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/RadioButton$/][children.length=0]': (node) => {
         context.report({
           node,
           messageId: 'default',
@@ -45,7 +34,7 @@ module.exports = {
           },
         })
       },
-      'JSXElement[openingElement.name.name=/Th$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/]': (node) => {
+      'JSXElement[openingElement.name.name=/Th$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/][children.length=0]': (node) => {
         context.report({
           node,
           messageId: 'default',
@@ -54,14 +43,6 @@ module.exports = {
             component: 'Checkbox',
             preferred: 'ThCheckbox',
           },
-          *fix(fixer) {
-            const th = findClosestThFromAncestor(node)
-            if (th) {
-              const thCheckbox = sourceCode.getText(node).replace(/<Check(b|B)ox/, '<ThCheckbox')
-              yield fixer.insertTextAfter(th, thCheckbox)
-              yield fixer.remove(th)
-            }
-          },
         })
       },
     }

package/rules/component-name/index.js

@@ -1,4 +1,60 @@
-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}'"`,
+    });
+  }
+}
+
+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$',
@@ -134,7 +190,79 @@ 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する名称に変更してください。${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する名前のコンポーネントを拡張することを期待している名称になっています
+ - ${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"に統一してください
+ - Modalとは形容詞であり、かつ"現在の操作から切り離して専用の操作を行わせる" という意味合いを持ちます
+   - そのためDialogでなければ正しくない場合がありえます(smarthr-ui/ModelessDialogのように元々の操作も行えるDialogなどが該当)
+   - DialogはModalなダイアログ、Modelessなダイアログすべてを含有した名称のため、統一することを推奨しています`
+        })
+      },
+    }
   },
 }
 module.exports.schema = SCHEMA

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,20 @@ module.exports = {
     fixable: 'whitespace',
   },
   create(context) {
-    return {
-      'JSXAttribute Literal[value=/(^ | $)/]': (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+/, '$1').replace(/\s+('|")$/, '$1')),
+          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) => {
-        return context.report({
-          node,
-          message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
-          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/(^`\s+|\s+`$)/g, '`')),
-        })
-      },
+      }
+    }
+
+    return {
+      'JSXAttribute Literal[value=/(^ | $)/]': checker,
+      'JSXAttribute TemplateLiteral:has(>TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/]))': checker,
     }
   },
 }

package/test/a11y-prohibit-checkbox-or-radio-in-table-cell.js

@@ -13,7 +13,20 @@ const ruleTester = new RuleTester({
 })
 
 ruleTester.run('a11y-prohibit-checkbox-or-radio-in-table-cell', rule, {
-  valid: ['<TdCheckbox />', '<ThCheckbox />', '<TdRadioButton />', '<Td>hello</Td>', '<Th>hello</Th>'],
+  valid: [
+    '<TdCheckbox />',
+    '<ThCheckbox />',
+    '<TdRadioButton />',
+    '<Td>hello</Td>',
+    '<Th>hello</Th>',
+    `
+    <Td>
+      <Checkbox>
+        可視ラベル
+      </Checkbox>
+    </Td>
+    `,
+  ],
   invalid: [
     {
       code: `<Td><Checkbox /></Td>`,
@@ -21,12 +34,10 @@ ruleTester.run('a11y-prohibit-checkbox-or-radio-in-table-cell', rule, {
     },
     {
       code: `<Th><Checkbox /></Th>`,
-      output: `<ThCheckbox />`,
       errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
     },
     {
       code: `<Th><Checkbox id="my-checkbox" name="agree" error /></Th>`,
-      output: `<ThCheckbox id="my-checkbox" name="agree" error />`,
       errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
     },
     {
@@ -49,7 +60,6 @@ ruleTester.run('a11y-prohibit-checkbox-or-radio-in-table-cell', rule, {
     },
     {
       code: `<CustomTh><CustomCheckbox /></CustomTh>`,
-      output: null,
       errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
     },
     {

package/test/component-name.js

@@ -243,5 +243,9 @@ ruleTester.run('component-name', rule, {
 
     { code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: messageInheritance({ extended: 'Hoge', matcher: /DialogTrigger$/ }) }, { message: messageInheritance({ extended: 'Hoge', matcher: /RemoteDialogTrigger$/ }) } ] },
     { code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: messageInheritance({ extended: 'Fuga', matcher: /RemoteTrigger(.+)Dialog$/ }) } ] },
+    { code: 'const HogeModalFuga = any', errors: [ { message: `コンポーネント名や変数名に"Modal"という名称は使わず、"Dialog"に統一してください
+ - Modalとは形容詞であり、かつ"現在の操作から切り離して専用の操作を行わせる" という意味合いを持ちます
+   - そのためDialogでなければ正しくない場合がありえます(smarthr-ui/ModelessDialogのように元々の操作も行えるDialogなどが該当)
+   - DialogはModalなダイアログ、Modelessなダイアログすべてを含有した名称のため、統一することを推奨しています` } ] },
   ]
 })

package/test/trim-props.js

@@ -19,6 +19,7 @@ ruleTester.run('trim-props', rule, {
     { code: `<img src={'/sample.jpg'} alt={'sample'} />` },
     { code: '<div data-spec="info-area">....</div>' },
     { code: '<div data-spec={`a${b} c`}>....</div>' },
+    { code: '<div data-spec={`a${b ? ` ${c} ` : "  "} d`}>....</div>' },
   ],
   invalid: [
     {
@@ -87,5 +88,10 @@ ruleTester.run('trim-props', rule, {
       output: '<div data-spec={`a${b} c`}>....</div>',
       errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
     },
+    {
+      code: '<div data-spec={` a${b ? ` ${c} ` : "  "} d `}>....</div>',
+      output: '<div data-spec={`a${b ? ` ${c} ` : "  "} d`}>....</div>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
   ],
 })

package/libs/format_styled_components.js

@@ -1,126 +0,0 @@
-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}'"`,
-    });
-  }
-}
-
-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 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する名称に変更してください。${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する名前のコンポーネントを拡張することを期待している名称になっています
- - ${extended} の名称の末尾が"${expected}" という文字列ではない状態にしつつ、"${base}"を継承していることをわかる名称に変更してください
- - もしくは"${base}"を"${extended}"の継承元であることがわかるような${isBareTag ? '適切なタグや別コンポーネントに差し替えてください' : '名称に変更するか、適切な別コンポーネントに差し替えてください'}
-   - 修正例1: const ${extended.replace(expected, '')}Xxxx = ${sampleFixBase}
-   - 修正例2: const ${extended}Xxxx = ${sampleFixBase}
-   - 修正例3: const ${extended} = styled(Xxxx${expected})`
-            })
-          }
-        })
-      }
-    },
-  }
-}
-
-module.exports = { generateTagFormatter }