eslint-plugin-smarthr 2.2.1 → 2.4.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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)
+
+
+### Features
+
+* best-practice-for-layout にHeading, FormControl, Fieldsetのタイトル部分でLayout系コンポーネントの仕様を制限するチェックを追加 ([#906](https://github.com/kufu/tamatebako/issues/906)) ([631aeca](https://github.com/kufu/tamatebako/commit/631aecaa20c834b6d603e31af95f2aaee9694bd0))
+
 ## [2.2.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.2.0...eslint-plugin-smarthr-v2.2.1) (2025-11-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "a730418d8a507045795ce6140a58b5aea18c818b"
+  "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/best-practice-for-layouts/README.md

@@ -15,13 +15,28 @@
 ## ❌ Incorrect
 
 ```jsx
-// 子が複数無いためエラー
+// Cluster, Stackは子要素が複数存在する場合に利用するべきもののため
+// 要素が単一の場合エラーになる
 <Cluster>
-  <Any />
+  <div>
+    hoge
+  </div>
 </Cluster>
 <StyledStack>
-  {flg ? 'a' : 'b'}
+  <Any />
 </StyledStack>
+
+// Heading, FormControlのlabel, Fieldsetのlegendにsmarthr-ui/Layoutsに属するコンポーネントを設置するとエラー
+<Heading><Cluster><AnyIcon /><Text /></Cluster></Heading>
+<FormControl label={{
+  text: <Text prefixIcon={<AnyIcon />}>hoge</Cluster>
+}} />
+<Fieldset legend={
+  <Stack>
+    <Text />
+    <SubText />
+  </Stack>
+} />
 ```
 
 ## ✅ Correct
@@ -50,4 +65,33 @@
   <Any />
   <Any />
 </Cluster>
+
+// Heading, FormControlのlabel, FieldsetのlegendにIconを設定したい場合はicon属性を利用する
+<Heading icon={<AnyIcon />}><Text /></Heading>
+<FormControl label={{
+  text: <Text />,
+  icon: <AnyIcon />,
+}} />
+// Stackはas="span"、もしくはforwardedAs="span"を指定すれば利用できる
+<Fieldset legend={
+  <Stack as="span">
+    <Text />
+    <SubText />
+  </Stack>
+} />
+<FormControl label={{
+  text: (
+   <AnyStack forwardedAs="span">
+     <Text />
+     <SubText />
+   </AnyStack>
+  ),
+}} />
+
+// FormControl、Fieldsetで見出しの右側の領域に要素を設置する場合、statusLabels, subActionAreaを利用する
+<FormControl
+  label={<Text />}
+  statusLabels={<RequiredLabel />}
+  subActionArea={<HelpLink />}
+/>
 ```

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

@@ -1,8 +1,16 @@
 const MULTI_CHILDREN_REGEX = /(Cluster|Stack)$/
-
 const REGEX_NLSP = /^\s*\n+\s*$/
 const FLEX_END_REGEX = /^(flex-)?end$/
 
+const TARGET_INVALID_COMPONENT_REGEX = /(Center|Cluster|Container|Reel|Sidebar)$/
+const INVALID_ELEMENT = `JSXOpeningElement[name.name=${TARGET_INVALID_COMPONENT_REGEX}]`
+const HEADING_ELEMENT = 'JSXElement[openingElement.name.name=/Heading$/]'
+const STACK_ELEMENT_NOT_SPAN = 'JSXOpeningElement[name.name=/Stack$/]:not(:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value="span"]))'
+const FORM_CONTROL_LABEL_ATTRIBUTE = 'JSXOpeningElement[name.name=/FormControl$/] JSXAttribute[name.name="label"]'
+const FIELDSET_LEGEND_ATTRIBUTE = 'JSXOpeningElement[name.name=/Fieldset$/] JSXAttribute[name.name="legend"]'
+const ICON_ELEMENT_WITH_TEXT = `JSXOpeningElement[name.name=/Icon$/]:has(JSXAttribute[name.name="text"])`
+const TEXT_ELEMENT_WITH_PREFIX = 'JSXOpeningElement[name.name=/Text$/]:has(JSXAttribute[name.name="prefixIcon"])'
+
 const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
 const checkFalsyJSXText = (c) => (
   !(
@@ -55,39 +63,35 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
+      [`JSXOpeningElement[selfClosing=false][name.name=${MULTI_CHILDREN_REGEX}]`]: (node) => {
         const nodeName = node.name.name;
+        const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
+        const layoutType = matcher[1]
+        let justifyAttr = null
+        let alignAttr = null
+        let gapAttr = null
 
-        if (nodeName && !node.selfClosing) {
-          const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
-
-          if (matcher) {
-            const layoutType = matcher[1]
-            let justifyAttr = null
-            let alignAttr = null
-            let gapAttr = null
-
-            node.attributes.forEach((a) => {
-              switch (a.name?.name) {
-                case 'justify':
-                  justifyAttr = a
-                  break
-                case 'align':
-                  alignAttr = a
-                  break
-                case 'gap':
-                  gapAttr = a
-                  break
-              }
-            })
+        node.attributes.forEach((a) => {
+          switch (a.name?.name) {
+            case 'justify':
+              justifyAttr = a
+              break
+            case 'align':
+              alignAttr = a
+              break
+            case 'gap':
+              gapAttr = a
+              break
+          }
+        })
 
-            if (layoutType === 'Stack') {
-              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
-                return
-              } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
-                context.report({
-                  node,
-                  message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+        if (layoutType === 'Stack') {
+          if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+            return
+          } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
+            context.report({
+              node,
+              message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
  - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
@@ -95,32 +99,86 @@ module.exports = {
  - 方法3: 別要素でマークアップし直すか、${nodeName}を削除してください
    - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
    - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
-                })
-              }
-            }
+            })
+          }
+        }
 
-            const children = node.parent.children.filter(checkFalsyJSXText)
+        const children = node.parent.children.filter(checkFalsyJSXText)
 
-            if (children.length === 1) {
-              if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
-                return
-              }
+        if (children.length === 1) {
+          if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
+            return
+          }
 
-              if (searchChildren(children[0])) {
-                context.report({
-                  node,
-                  message:
-                    (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
-                      ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
-                      : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
+          if (searchChildren(children[0])) {
+            context.report({
+              node,
+              message:
+                (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
+                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
+                  : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください
  - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
-                })
-              }
-            }
+            })
           }
         }
       },
+      [`${HEADING_ELEMENT} ${INVALID_ELEMENT}`]: (node) => {
+        const component = node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]
+
+        context.report({
+          node,
+          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。`
+        })
+      },
+      [`${HEADING_ELEMENT} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${HEADING_ELEMENT} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
+        context.report({
+          node,
+          message: 'HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください',
+        })
+      },
+      [`${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 /> }'に置き換えてください。`,
+        })
+      },
+      [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${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属性を利用してください",
+        })
+      },
+      [`${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 /> }'に置き換えてください。`,
+        })
+      },
+      [`${FIELDSET_LEGEND_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${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属性を利用してください",
+        })
+      },
     }
   },
 }

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/best-practice-for-layouts.js

@@ -58,6 +58,12 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<Cluster>{a}</Cluster>` },
     { code: `<Cluster>{a.b}</Cluster>` },
     { code: `<Cluster>{a ? b : c}</Cluster>` },
+    { code: `<Heading><Stack as="span"><Hoge /><Fuga /></Stack></Heading>` },
+    { code: `<AnyHeading icon={<AnyIcon />}>hoge</AnyHeading>` },
+    { code: `<FormControl label={<AnyStack as="span"><span>a</span><span>b</span></AnyStack>} />` },
+    { code: `<AnyFormControl label={{ text: 'hoge', icon: <AnyIcon /> }} />` },
+    { code: `<AnyFieldset legend={{ text: <AnyStack as="span"><span>a</span><span>b</span></AnyStack> }} />` },
+    { code: `<Fieldset legend={{ text: 'hoge', icon: <AnyIcon /> }} />` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
@@ -90,6 +96,18 @@ ruleTester.run('best-practice-for-button-element', rule, {
  - 方法3: 別要素でマークアップし直すか、HogeStackを削除してください
    - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
    - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください` } ] },
+    { code: `<Heading><Cluster><Hoge /><Fuga /></Cluster></Heading>`, errors: [ { message: `Headingの子孫にClusterを置くことはできません。Headingの外でClusterを使用するようにマークアップを修正してください。` } ] },
+    { code: `<AnyHeading><AnyStack><Hoge /><Fuga /></AnyStack></AnyHeading>`, errors: [ { message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<Heading><AnyIcon text="hoge" /></Heading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください` } ] },
+    { code: `<AnyHeading><Text prefixIcon={<SomeIcon />}>hoge</Text></AnyHeading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください` } ] },
+    { code: `<AnyFormControl label={{ text: <Cluster><Hoge /><Fuga /></Cluster> }} />`, errors: [ { message: `FormControlのlabel属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。` } ] },
+    { code: `<FormControl label={<AnyStack><Hoge /><Fuga /></AnyStack>} />`, errors: [ { message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<AnyFormControl label={{ text: <AnyIcon text="hoge" /> }} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください` } ] },
+    { code: `<FormControl label={{ text: <Text prefixIcon={<SomeIcon /> }>hoge</Text>}} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください` } ] },
+    { code: `<Fieldset legend={<Cluster><Hoge /><Fuga /></Cluster>} />`, errors: [ { message: `Fieldsetのlegend属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。` } ] },
+    { code: `<AnyFieldset legend={{ text: <AnyStack><Hoge /><Fuga /></AnyStack> }} />`, errors: [ { message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<Fieldset legend={<AnyIcon text="hoge" />} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください` } ] },
+    { code: `<AnyFieldset legend={{ text: <Text prefixIcon={<SomeIcon />}>hoge</Text>}} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください` } ] },
   ]
 })
 

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 }