eslint-plugin-smarthr 0.5.8 → 0.5.10

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.
 
+### [0.5.10](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.9...v0.5.10) (2024-04-26)
+
+
+### Bug Fixes
+
+*  <FormControl> 内に三項演算子がある場合に、入力要素が複数あると誤認されないようにする ([#139](https://github.com/kufu/eslint-plugin-smarthr/issues/139)) ([8a234c7](https://github.com/kufu/eslint-plugin-smarthr/commit/8a234c73e140725ff1926d4d23f64c263e46d5d6))
+
+### [0.5.9](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.7...v0.5.9) (2024-04-22)
+
+
+### Features
+
+* a11y-prohibit-input-maxlength-attribute ([#135](https://github.com/kufu/eslint-plugin-smarthr/issues/135)) ([9f9d010](https://github.com/kufu/eslint-plugin-smarthr/commit/9f9d010e819d936fe5f55556a8f65e6485c552ce))
+* a11y系コンポーネントでBase,BaseColumnにas="section"などSectioningContentが指定された場合、outlineが切られていると判断するよう修正 ([#138](https://github.com/kufu/eslint-plugin-smarthr/issues/138)) ([7b62c62](https://github.com/kufu/eslint-plugin-smarthr/commit/7b62c6293cf057e97616992dd30fcf67b758f32f))
+* best-practice-for-layouts に <Stack align="center"> を <Center> に置き換えることを促すチェックを追加 ([#133](https://github.com/kufu/eslint-plugin-smarthr/issues/133)) ([5835530](https://github.com/kufu/eslint-plugin-smarthr/commit/58355308bf9a5d18d2d731e699c54806af969ed9))
+* best-practice-for-layoutsでStackコンポーネントにgap={0}が指定されている場合、適切に置き換え・または削除を促すように修正 ([#137](https://github.com/kufu/eslint-plugin-smarthr/issues/137)) ([2a11919](https://github.com/kufu/eslint-plugin-smarthr/commit/2a11919ffa20ddbbc6a59210ec14d81d2d510cda))
+
 ### [0.5.8](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.7...v0.5.8) (2024-04-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-heading-in-sectioning-content/README.md

@@ -1,6 +1,6 @@
 # smarthr/a11y-heading-in-sectioning-content
 
-- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section, SectioningFragment) のいずれかで囲むことを促すルールです
+- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section) のいずれかで囲むことを促すルールです
   - article, aside, nav, section で Heading とHeadingの対象となる範囲を囲むとブラウザが正確に解釈できるようになるメリットがあります
   - またsmarthr-ui/SectioningContentで smarthr-ui/Headingを囲むことで、Headingのレベル(h1~h6)を自動的に計算するメリットもあります
 - Headingコンポーネントをsmarthr-ui/Layout(Center, Reel, Sidebar, Stack) のいずれかで囲んでおり、かつas, forwardedAsのいずれかの属性で 'section', 'article', 'aside', 'nav' が指定されている場合、SectioningContentで囲んでいるものとして扱われるようになります

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -14,6 +14,8 @@ const EXPECTED_NAMES = {
   'Reel$': 'Reel$',
   'Sidebar$': 'Sidebar$',
   'Stack$': 'Stack$',
+  'Base$': 'Base$',
+  'BaseColumn$': 'BaseColumn$',
 }
 
 const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
@@ -42,6 +44,8 @@ const UNEXPECTED_NAMES = {
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',
+  'Base$': '(Base)$',
+  'BaseColumn$': '(BaseColumn)$',
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
@@ -50,7 +54,7 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
-const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
 const asRegex = /^(as|forwardedAs)$/
 const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/
@@ -61,14 +65,12 @@ const includeSectioningAsAttr = (a) => a.name?.name.match(asRegex) && bareTagReg
 const findHeadingAttribute = (a) => headingAttributeRegex.test(a.name?.name || '')
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
- - 'as="section"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
-  - 要素内のHeadingのレベルが自動計算されるようになります。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
 const rootHeadingMessage = `${headingMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageHeadingMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageHeadingInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 
 const VariableDeclaratorBareToSHR = (context, node) => {

package/rules/a11y-input-in-form-control/README.md

@@ -73,7 +73,7 @@
   <DatePicker />
   ~
   <DatePicker />
-</Fieldset>
+</FormControl>
 
 <Fieldset title="any heading">
   <FormControl role="group">

package/rules/a11y-input-in-form-control/index.js

@@ -94,6 +94,7 @@ module.exports = {
     const checkAdditionalMultiInputComponents = (name) => additionalMultiInputComponents && name.match(additionalMultiInputComponents)
 
     let formControls = []
+    let conditionalformControls = []
     let checkboxFormControls = []
 
     return {
@@ -102,6 +103,7 @@ module.exports = {
         const nodeName = node.name.name || '';
         const isFormControlInput = nodeName.match(FORM_CONTROL_INPUTS_REGEX)
         const isAdditionalMultiInput = checkAdditionalMultiInputComponents(nodeName)
+        let conditionalExpressions = []
 
         if (isFormControlInput || isAdditionalMultiInput || checkAdditionalInputComponents(nodeName)) {
           let isInMap = false
@@ -162,15 +164,25 @@ module.exports = {
                 if (name) {
                   if (name.match(FROM_CONTROLS_REGEX)) {
                     const hit = formControls.includes(n)
+                    let conditionalHit = false
 
                     if (!hit) {
                       formControls.push(n)
 
+
                       if (isCheckbox) {
                         checkboxFormControls.push(n)
                       }
                     }
 
+                    if (conditionalExpressions.length > 0) {
+                      conditionalHit = conditionalformControls.includes(n)
+
+                      if (!conditionalHit) {
+                        conditionalformControls.push(n)
+                      }
+                    }
+
                     const isMultiInput = isPreMultiple || hit || isInMap
                     const matcherFormControl = name.match(FORM_CONTROL_REGEX)
 
@@ -184,7 +196,7 @@ module.exports = {
  - Fieldsetで同じname属性のラジオボタン全てを囲むことで正しくグループ化され、適切なタイトル・説明を追加出来ます` : ''}${isPureInput ? `
  - 可能なら${nodeName}は${convertComp}への変更を検討してください。難しい場合は ${nodeName} と結びつくlabel要素が必ず存在するよう、マークアップする必要があることに注意してください。` : ''}`,
                         });
-                      } else if (isMultiInput && !openingElement.attributes.find(findRoleGroup)) {
+                      } else if (isMultiInput && !conditionalHit && !openingElement.attributes.find(findRoleGroup)) {
                         context.report({
                           node: n,
                           message: `${name} が複数の入力要素を含んでいます。ラベルと入力要素の紐づけが正しく行われない可能性があるため、以下の方法のいずれかで修正してください。
@@ -245,6 +257,10 @@ module.exports = {
 
                 break
               }
+              case 'ConditionalExpression': {
+                conditionalExpressions.push(n)
+                break
+              }
               case 'VariableDeclarator': {
                 if (n.parent.parent?.type && n.parent.parent.type.match(IGNORE_INPUT_CHECK_PARENT_TYPE)) {
                   const name = n.id.name

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

@@ -9,6 +9,8 @@ const EXPECTED_NAMES = {
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',
+  'Base$': '(Base)$',
+  'BaseColumn$': '(BaseColumn)$',
 }
 
 const UNEXPECTED_NAMES = EXPECTED_NAMES
@@ -16,7 +18,7 @@ const UNEXPECTED_NAMES = EXPECTED_NAMES
 const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
 const SECTIONING_REGEX = /((A(rticle|side))|Nav|Section)$/
 const SECTIONING_FRAGMENT_REGEX = /^SectioningFragment$/
-const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
 const AS_REGEX = /^(as|forwardedAs)$/
 
 const includeSectioningAsAttr = (a) => a.name?.name?.match(AS_REGEX) && a.value.value?.match(BARE_SECTIONING_TAG_REGEX)

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

@@ -24,9 +24,6 @@ const checkFalsyJSXText = (c) => (
   )
 )
 
-const findJustifyAttr = (a) => a.name?.name === 'justify'
-const findAlignAttr = (a) => a.name?.name === 'align'
-
 const searchChildren = (node) => {
   if (
     node.type === 'JSXFragment' ||
@@ -74,27 +71,56 @@ module.exports = {
           const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
 
           if (matcher) {
-            const children = node.parent.children.filter(checkFalsyJSXText)
-
-            if (children.length === 1) {
-              const layoutType = matcher[1]
-              const justifyAttr = layoutType === 'Cluster' ? node.attributes.find(findJustifyAttr) : null
+            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
+              }
+            })
 
-              if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
+            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以外にできないか検討してください
+   - 子要素が個別に持っているmarginなどのstyleを${nodeName}のgap属性で共通化できないか確認してください
+ - 方法3: 別要素でマークアップし直すか、${nodeName}を削除してください
+   - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
+   - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
+                })
               }
+            }
 
-              const alignAttr = layoutType === 'Stack' ? node.attributes.find(findAlignAttr) : null
+            const children = node.parent.children.filter(checkFalsyJSXText)
 
-              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+            if (children.length === 1) {
+              if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
                 return
               }
 
+
               if (searchChildren(children[0])) {
                 context.report({
                   node,
                   message:
-                    (justifyAttr && justifyAttr.value.value === 'center' || alignAttr && alignAttr.value.value === 'center')
+                    (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
                       ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
                       : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください

package/test/a11y-heading-in-sectioning-content.js

@@ -13,14 +13,12 @@ const ruleTester = new RuleTester({
 });
 
 const lowerMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
- - 'as=\"section\"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
-  - 要素内のHeadingのレベルが自動計算されるようになります。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
 const message = `${lowerMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素を含んでいません。
  - SectioningContentはHeadingを含むようにマークアップする必要があります
@@ -74,6 +72,8 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<HogeReel forwardedAs="aside"><div><Heading>hoge</Heading></div></HogeReel>' },
     { code: '<HogeSidebar forwardedAs="nav"><div><Heading>hoge</Heading></div></HogeSidebar>' },
     { code: '<HogeStack forwardedAs="section"><div><Heading>hoge</Heading></div></HogeStack>' },
+    { code: '<HogeBase as="aside"><Heading>hoge</Heading></HogeBase>' },
+    { code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

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

@@ -135,6 +135,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<Fieldset><HogeRadioButtonPanels /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxes /></Fieldset>' },
+    { code: '<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>'},
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -179,5 +180,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFormControl><HogeRadioButtons /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('HogeRadioButtons') } ] },
     { code: '<HogeFormControl><HogeCheckBoxs /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },
     { code: '<HogeFormControl><HogeCheckBoxes /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },
+    { code: "<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }<CheckBox /></HogeFormControl>", errors: [ { message: invalidMultiInputsInFormControl() } ]},
+    { code: "<HogeFormControl><CheckBox />{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>", errors: [ { message: invalidMultiInputsInFormControl() } ]},
   ]
 })

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

@@ -27,5 +27,7 @@ ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
     { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
     { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
     { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
+    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: error('<FugaBase as="article">') } ] },
+    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: error('<FugaBaseColumn as="article">') } ] },
   ]
 })

package/test/best-practice-for-layouts.js

@@ -54,7 +54,7 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
     { code: `<Cluster justify="flex-end">{a}</Cluster>` },
-    { code: `<HogeCluster justify="end">{a}</HogeCluster>` },
+    { code: `<HogeCluster justify="end" gap={0}>{a}</HogeCluster>` },
     { code: `<Stack align="flex-end">{a}</Stack>` },
     { code: `<HogeStack align="end">{a}</HogeStack>` },
   ],
@@ -85,6 +85,14 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
     { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
+    { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+ - 方法1: 子要素を一つにまとめられないか検討してください
+   - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
+ - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
+   - 子要素が個別に持っているmarginなどのstyleをHogeStackのgap属性で共通化できないか確認してください
+ - 方法3: 別要素でマークアップし直すか、HogeStackを削除してください
+   - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
+   - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください` } ] },
   ]
 })