eslint-plugin-smarthr 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.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.3.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "a730418d8a507045795ce6140a58b5aea18c818b"
+  "gitHead": "18f89a924a8920722a1e71982a4d117db0c6a073"
 }

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/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属性を利用してください` } ] },
   ]
 })