eslint-plugin-smarthr 0.3.26 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 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.4.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.27...v0.4.0) (2024-02-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* 利用者がいなくなったsmarthr/redundant-nameを削除する (#111)
+
+### Features
+
+* a11y-input-in-form-controlでlabelが設定されている可能性が高いRadio, Checkboxの複数形コンポーネントを正しく判定できるようにする ([#112](https://github.com/kufu/eslint-plugin-smarthr/issues/112)) ([77ee8f4](https://github.com/kufu/eslint-plugin-smarthr/commit/77ee8f4cac883eb0a198875305a416f0172a584e))
+
+
+### Bug Fixes
+
+* 利用者がいなくなったsmarthr/redundant-nameを削除する ([#111](https://github.com/kufu/eslint-plugin-smarthr/issues/111)) ([2bc1011](https://github.com/kufu/eslint-plugin-smarthr/commit/2bc10118cc0a18366300c3816f091060d2a0677d))
+
+### [0.3.27](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.26...v0.3.27) (2024-01-28)
+
+
+### Features
+
+* a11y系コンポーネントで入力要素の拡張コンポーネントの判定をfunctionを使っている場合にも正しく判定できるように修正 ([#108](https://github.com/kufu/eslint-plugin-smarthr/issues/108)) ([c929760](https://github.com/kufu/eslint-plugin-smarthr/commit/c929760b3d8e166e7e3f7befcf048fa28cc48042))
+
 ### [0.3.26](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.25...v0.3.26) (2024-01-24)
 
 

package/README.md

@@ -8,6 +8,7 @@
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-in-form-control)
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
+- [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-dialog)
@@ -19,7 +20,6 @@
 - [prohibit-file-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-file-name)
 - [prohibit-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-import)
 - [prohibit-path-within-template-literal](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-path-within-template-literal)
-- [redundant-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/redundant-name)
 - [require-barrel-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-barrel-import)
 - [require-declaration](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-declaration)
 - [require-export](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-export)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.3.26",
+  "version": "0.4.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -22,7 +22,6 @@
     "url": "https://github.com/kufu/eslint-plugin-smarthr/issues"
   },
   "dependencies": {
-    "inflected": "^2.1.0",
     "json5": "^2.2.0"
   },
   "devDependencies": {

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

@@ -112,6 +112,7 @@ const searchBubbleUp = (node) => {
   if (
     // Headingコンポーネントの拡張なので対象外
     node.type === 'VariableDeclarator' && ignoreHeadingCheckParentType.includes(node.parent.parent?.type) && node.id.name.match(declaratorHeadingRegex) ||
+    node.type === 'FunctionDeclaration' && ignoreHeadingCheckParentType.includes(node.parent.type) && node.id.name.match(declaratorHeadingRegex) ||
     // ModelessDialogのheaderにHeadingを設定している場合も対象外
     node.type === 'JSXAttribute' && node.name.name === 'header' && node.parent.name.name.match(modelessDialogRegex)
   ) {

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

@@ -2,8 +2,11 @@ const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_LABELED_INPUT_NAMES = {
   'RadioButton$': '(RadioButton)$',
+  'RadioButtons$': '(RadioButtons)$',
   'RadioButtonPanel$': '(RadioButtonPanel)$',
+  'RadioButtonPanels$': '(RadioButtonPanels)$',
   'Check(B|b)ox$': '(CheckBox)$',
+  'Check(B|b)ox(e)?s$': '(CheckBoxes)$',
 }
 const EXPECTED_INPUT_NAMES = {
   '(I|^i)nput$': '(Input)$',
@@ -33,6 +36,7 @@ const EXPECTED_NAMES = {
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',
+  '(L|^l)abel$': '(Label)$',
 
 }
 
@@ -42,9 +46,9 @@ const FORM_CONTROL_INPUTS_REGEX = new RegExp(`(${Object.keys(EXPECTED_INPUT_NAME
 const LABELED_INPUTS_REGEX = new RegExp(`(${Object.keys(EXPECTED_LABELED_INPUT_NAMES).join('|')})`)
 const SEARCH_INPUT_REGEX = /SearchInput$/
 const INPUT_REGEX = /(i|I)nput$/
-const RADIO_BUTTONS_REGEX = /RadioButton(Panel)?$/
-const CHECKBOX_REGEX = /Check(B|b)ox?$/
-const SELECT_REGEX = /(S|s)elect?$/
+const RADIO_BUTTONS_REGEX = /RadioButton(Panel)?(s)?$/
+const CHECKBOX_REGEX = /Check(B|b)ox(s|es)?$/
+const SELECT_REGEX = /(S|s)elect(s)?$/
 const FROM_CONTROLS_REGEX = new RegExp(`(${Object.keys(EXPECTED_FORM_CONTROL_NAMES).join('|')})`)
 const FORM_CONTROL_REGEX = /(Form(Control|Group))$/
 const FIELDSET_REGEX = /Fieldset$/
@@ -53,6 +57,7 @@ const SECTIONING_REGEX = /(((A|^a)(rticle|side))|(N|^n)av|(S|^s)ection|^Sectioni
 const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
 const LAYOUT_COMPONENT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
 const AS_REGEX = /^(as|forwardedAs)$/
+const SUFFIX_S_REGEX = /s$/
 
 const IGNORE_INPUT_CHECK_PARENT_TYPE = /^(Program|ExportNamedDeclaration)$/
 
@@ -131,6 +136,8 @@ module.exports = {
               }
             }
           }
+
+          const isPreMultiple = isAdditionalMultiInput || isFormControlInput && nodeName.match(SUFFIX_S_REGEX)
           const isRadio = (isPureInput && isTypeRadio) || nodeName.match(RADIO_BUTTONS_REGEX);
           const isCheckbox = !isRadio && (isPureInput && isTypeCheck || nodeName.match(CHECKBOX_REGEX));
 
@@ -153,7 +160,7 @@ module.exports = {
                       }
                     }
 
-                    const isMultiInput = isAdditionalMultiInput || hit || isInMap
+                    const isMultiInput = isPreMultiple || hit || isInMap
                     const matcherFormControl = name.match(FORM_CONTROL_REGEX)
 
                     if (matcherFormControl) {
@@ -179,15 +186,20 @@ module.exports = {
                       }
                     // HINT: 擬似的にラベルが設定されている場合、無視する
                     } else if (!isRadio && !isCheckbox && !isPseudoLabel) {
+                      const isSelect = nodeName.match(SELECT_REGEX)
+
                       context.report({
                         node: n,
                         message: `${name} が ラベルを持たない入力要素(${nodeName})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
  - 方法1: ${name} を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
  - 方法2: ${nodeName} がlabel要素を含むコンポーネントである場合、名称を${FORM_CONTROL_REGEX}にマッチするものに変更してください
-    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
+   - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
  - 方法3: ${nodeName} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を${LABELED_INPUTS_REGEX}にマッチするものに変更してください
-    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
- - 方法4: ${name} が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を ${FIELDSET_REGEX} にマッチしないものに変更してください`,
+   - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
+ - 方法4: ${name} が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を ${FIELDSET_REGEX} にマッチしないものに変更してください
+ - 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${nodeName}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
+ - 方法6: 上記のいずれの方法も適切ではない場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
+   - 例: <${nodeName} title="${isSelect ? '検索対象を選択してください' : '姓を全角カタカナのみで入力してください'}" />`,
                       });
                     }
 
@@ -209,7 +221,8 @@ module.exports = {
  - 方法1: ${actualName} を${wrapComponentName}、もしくはそれを拡張したコンポーネントに変更してください
    - ${actualName} 内のHeading要素は${wrapComponentName}のtitle属性に変更してください
  - 方法2: ${actualName} と ${nodeName} の間に ${wrapComponentName} が存在するようにマークアップを変更してください${isRadio ? '' : `
- - 方法3: 上記のいずれの方法も適切では場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
+ - 方法3: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${nodeName}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
+ - 方法4: 上記のいずれの方法も適切ではない場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
    - 例: <${nodeName} title="${isSelect ? '検索対象を選択してください' : '姓を全角カタカナのみで入力してください'}" />`}`,
                         });
                       }
@@ -233,6 +246,16 @@ module.exports = {
 
                 break
               }
+              case 'FunctionDeclaration': {
+                if (n.parent.type.match(IGNORE_INPUT_CHECK_PARENT_TYPE)) {
+                  const name = n.id.name
+
+                  // 入力要素系コンポーネントの拡張なので対象外
+                  if (name.match(FORM_CONTROL_INPUTS_REGEX) || checkAdditionalMultiInputComponents(name) || checkAdditionalInputComponents(name)) {
+                    return
+                  }
+                }
+              }
               case 'Program': {
                 // HINT: smarthr-ui/CheckBoxはlabelを単独で持つため、FormControl系でラップをする必要はない
                 // HINT: 擬似的にラベルが設定されている場合、無視する
@@ -246,7 +269,7 @@ module.exports = {
  - FieldsetでRadioButtonを囲むことでグループ化された入力要素に対して適切なタイトル・説明を追加出来ます` : ``}
  - ${nodeName}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を${FROM_CONTROLS_REGEX}とマッチするように修正してください
  - ${nodeName}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を${FORM_CONTROL_INPUTS_REGEX}とマッチするように修正してください${isRadio ? '' : `
- - 上記のいずれの方法も適切では場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
+ - 上記のいずれの方法も適切ではない場合、${nodeName}のtitle属性に "どんな値を${isSelect ? '選択' : '入力'}すれば良いのか" の説明を設定してください
    - 例: <${nodeName} title="${isSelect ? '検索対象を選択してください' : '姓を全角カタカナのみで入力してください'}" />`}`,
                   });
                 }

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

@@ -55,6 +55,8 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<><Section><Heading>hoge</Heading></Section><Section><Heading>fuga</Heading></Section></>' },
     { code: 'const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
     { code: 'export const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
+    { code: 'function FugaHeading() { return <PiyoHeading anyArg={abc}>hoge</PiyoHeading> }' },
+    { code: 'export function FugaHeading() { return <PiyoHeading anyArg={abc}>hoge</PiyoHeading> }' },
     { code: '<Center as="section"><div><Heading>hoge</Heading></div></Center>' },
     { code: '<Cluster as="section"><div><Heading>hoge</Heading></div></Cluster>' },
     { code: '<Reel as="aside"><div><Heading>hoge</Heading></div></Reel>' },

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

@@ -15,14 +15,14 @@ const ruleTester = new RuleTester({
 const noLabeledInput = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
  - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/とマッチするように修正してください
- - 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
+ - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
    - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
 const noLabeledSelect = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
  - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/とマッチするように修正してください
- - 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
+ - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
    - 例: <${name} title="検索対象を選択してください" />`
 const invalidPureCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
  - 可能なら${name}はsmarthr-ui/Checkboxへの変更を検討してください。難しい場合は ${name} と結びつくlabel要素が必ず存在するよう、マークアップする必要があることに注意してください。`
@@ -41,15 +41,29 @@ const invalidMultiInputsInFormControl = () => `HogeFormControl が複数の入
 const noLabeledInputInFieldset = (name) => `HogeFieldset が ラベルを持たない入力要素(${name})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
  - 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
  - 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
-    - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
- - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/にマッチするものに変更してください
-    - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
- - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください`
+   - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
+ - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/にマッチするものに変更してください
+   - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
+ - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
+ - 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
+ - 方法6: 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
+   - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
+const noLabeledInputInFieldsetWithSelect = (name) => `HogeFieldset が ラベルを持たない入力要素(${name})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
+ - 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
+ - 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
+   - smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
+ - 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/にマッチするものに変更してください
+   - smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
+ - 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
+ - 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
+ - 方法6: 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
+   - 例: <${name} title="検索対象を選択してください" />`
 const useFormControlInsteadOfSection = (name, section) => `${name}は${section}より先に、smarthr-ui/FormControlが入力要素を囲むようマークアップを以下のいずれかの方法で変更してください。
  - 方法1: ${section} をFormControl、もしくはそれを拡張したコンポーネントに変更してください
    - ${section} 内のHeading要素はFormControlのtitle属性に変更してください
  - 方法2: ${section} と ${name} の間に FormControl が存在するようにマークアップを変更してください
- - 方法3: 上記のいずれの方法も適切では場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
+ - 方法3: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
+ - 方法4: 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
    - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
 const useFormControlInsteadOfSectionInRadio = (name, section) => `${name}は${section}より先に、smarthr-ui/Fieldsetが入力要素を囲むようマークアップを以下のいずれかの方法で変更してください。
  - 方法1: ${section} をFieldset、もしくはそれを拡張したコンポーネントに変更してください
@@ -62,7 +76,7 @@ const invalidChildreninFormControl = (children) => `FormControl が、${children
    - FormControlではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
  - 方法2: 親要素であるFormControlがsmarthr-ui/FormControlを拡張したコンポーネントではない場合、コンポーネント名を/(Form(Control|Group))$/と一致しない名称に変更してください`
 const requireMultiInputInFormControlWithRoleGroup = () => `HogeFormControl内に入力要素が2個以上存在しないため、'role=\"group\"'を削除してください。'role=\"group\"'は複数の入力要素を一つのグループとして扱うための属性です。
- - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtonPanel$|Check(B|b)ox$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
+ - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
 
 ruleTester.run('a11y-input-in-form-control', rule, {
   valid: [
@@ -105,6 +119,9 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<FugaSection><HogeFormControl><HogeInput /></HogeFormControl></FugaSection>' },
     { code: '<Stack as="section"><HogeFormControl><HogeInput /></HogeFormControl></Stack>' },
     { code: `const AnyComboBox = () => <input />` },
+    { code: `export const AnyComboBox = () => <input />` },
+    { code: `function AnySingleCombobox() { return <SingleCombobox /> }` },
+    { code: `export function AnySingleCombobox() { return <SingleCombobox /> }` },
     { code: `<Fieldset><HogeFieldset /><HogeFormControl /></Fieldset>` },
     { code: '<HogeFieldset><HogeCheckBox /><HogeInput id="any" /></HogeFieldset>' },
     { code: '<FugaSection><HogeInput id="any" /></FugaSection>' },
@@ -112,6 +129,10 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFieldset><HogeCheckBox /><HogeInput title="any" /></HogeFieldset>' },
     { code: '<FugaSection><HogeInput title="any" /></FugaSection>' },
     { code: '<HogeTextarea title="any" />' },
+    { code: '<Fieldset><HogeRadioButtons /></Fieldset>' },
+    { code: '<Fieldset><HogeRadioButtonPanels /></Fieldset>' },
+    { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
+    { code: '<Fieldset><HogeCheckBoxes /></Fieldset>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -141,6 +162,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFormControl><RadioButton /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('RadioButton') } ] },
     { code: '<HogeFormControl><HogeRadioButtonPanel /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('HogeRadioButtonPanel') } ] },
     { code: '<HogeFieldset><HogeCheckBox /><HogeInput /></HogeFieldset>', errors: [ { message: noLabeledInputInFieldset('HogeInput') } ] },
+    { code: '<HogeFieldset><HogeCheckBox /><HogeSelect /></HogeFieldset>', errors: [ { message: noLabeledInputInFieldsetWithSelect('HogeSelect') } ] },
     { code: '<FugaSection><HogeInput /></FugaSection>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', 'FugaSection') } ] },
     { code: '<Stack as="section"><HogeInput /></Stack>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', '<Stack as="section">') } ] },
     { code: '<Center forwardedAs="aside"><HogeInput /></Center>', errors: [ { message: useFormControlInsteadOfSection('HogeInput', '<Center forwardedAs="aside">') } ] },
@@ -151,5 +173,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<FormControl><HogeFieldset /></FormControl>', errors: [ { message: invalidChildreninFormControl('HogeFieldset') } ] },
     { code: '<FormControl><HogeFormControl /></FormControl>', errors: [ { message: invalidChildreninFormControl('HogeFormControl') } ] },
     { code: '<HogeFormControl role="group"><HogeInput /></HogeFormControl>', errors: [ { message: requireMultiInputInFormControlWithRoleGroup() } ] },
+    { code: '<HogeFormControl><HogeRadioButtons /></HogeFormControl>', errors: [ { message: invalidRadioInFormControl('HogeRadioButtons') } ] },
+    { code: '<HogeFormControl><HogeCheckBoxs /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },
+    { code: '<HogeFormControl><HogeCheckBoxes /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },
   ]
 })

package/rules/redundant-name/README.md

@@ -1,97 +0,0 @@
-# smarthr/redundant-name
-
-- ファイル、コードの冗長な部分を取り除くことを提案するruleです
-- ファイルが設置されているディレクトリ構造からキーワードを生成し、取り除く文字列を生成します
-
-## config
-
-- tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
-  - tsconfig.json はデフォルトではコマンド実行をしたディレクトリから読み込みます
-  - tsconfig.json の設置ディレクトリを変更したい場合、 `.eslintrc` などのeslint設定ファイルに `parserOptions.project` を設定してください
-- 以下の設定を行えます。全て省略可能です。
-  - ignoreKeywords
-    - ディレクトリ名から生成されるキーワードに含めたくない文字列を指定します
-  - betterNames
-    - 対象の名前を修正する候補を指定します
-  - allowedNames
-    - 許可する名前を指定します
-  - suffix:
-    - type のみ指定出来ます
-    - type のsuffixを指定します
-
-### ファイル例
-- `@/crews/index/views/page.tsx` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'page']`
-- `@/crews/index/views/parts/Abc.tsx` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'Abc']`
-- `@/crews/index/repositories/index.ts` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'repositories', 'repository']`
-
-
-## rules
-
-```js
-const ignorekeywords = ['views', 'parts']
-const betterNames = {
-  '\/repositories\/': {
-    operator: '-',
-    names: ['repository', 'Repository'],
-  },
-  '\/entities\/': {
-    operator: '+',
-    names: ['entity'],
-  },
-  '\/slices\/': {
-    operator: '=',
-    names: ['index'],
-  },
-}
-// const allowedNames = {
-//   '\/views\/crews\/histories\/': ['crewId'],
-// }
-
-{
-  rules: {
-    'smarthr/redundant-name': [
-      'error', // 'warn', 'off'
-      {
-        ignores: [ '\.stories\.' ], // ファイルパスに対して正規表現として一致する場合はチェック対象外にする
-        type: { ignorekeywords, suffix: ['Props', 'Type'] },
-        file: { ignorekeywords, betternames },
-        // property: { ignorekeywords, allowedNames },
-        // function: { ignorekeywords },
-        // variable: { ignorekeywords },
-        // class: { ignorekeywords },
-      }
-    ]
-  },
-}
-```
-
-## ❌ Incorrect
-
-```js
-// @/crews/index/views/page.tsx
-
-type CrewIndexPage = { hoge: string }
-type CrewsView = { hoge: string }
-```
-```js
-// @/crews/show/repositories/index.tsx
-
-type CrewIndexRepository = { hoge: () => any }
-```
-
-## ✅ Correct
-
-```js
-// @/crews/index/views/page.tsx
-
-type ItemProps = { hoge: string }
-```
-```js
-// @/crews/show/repositories/index.tsx
-
-type IndexProps = { hoge: () => any }
-type ResponseType = { hoge: () => any }
-```

package/rules/redundant-name/index.js

@@ -1,505 +0,0 @@
-const path = require('path')
-const Inflector = require('inflected')
-
-const { rootPath } = require('../../libs/common')
-
-const uniq = (array) => array.filter((elem, index, self) => self.indexOf(elem) === index)
-
-const COMMON_DEFAULT_CONFIG = {
-  IGNORE_KEYWORDS: ['redux', 'views', 'pages', 'parts'],
-}
-const DEFAULT_CONFIG = {
-  ignores: [],
-  type: {
-    IGNORE_KEYWORDS: [
-      'redux', 'views', 'pages', 'parts',
-      'props', 'type', 'action', 'actions',
-    ],
-    SUFFIX: ['Props', 'Type'],
-  },
-  file: COMMON_DEFAULT_CONFIG,
-  property: COMMON_DEFAULT_CONFIG,
-  function: COMMON_DEFAULT_CONFIG,
-  functionParams: COMMON_DEFAULT_CONFIG,
-  variable: COMMON_DEFAULT_CONFIG,
-  class: COMMON_DEFAULT_CONFIG,
-  method: COMMON_DEFAULT_CONFIG,
-}
-
-const BETTER_NAMES_CALCULATER_PROPERTY = {
-  type: 'object',
-  properties: {
-    operator: ['-', '+', '='],
-    names:  {
-      type: 'array',
-      items: 'string',
-    },
-  },
-}
-const DEFAULT_SCHEMA_PROPERTY = {
-  ignoreKeywords: { type: 'array', items: { type: 'string' } },
-  betterNames: {
-    type: 'object',
-    properties: {
-      operator: ['-', '+', '='],
-      names:  {
-        type: 'array',
-        items: 'string',
-      },
-    },
-  },
-  allowedNames: {
-    type: 'array',
-    items: 'string',
-  },
-}
-
-const SCHEMA = [
-  {
-    type: 'object',
-    properties: {
-      ignores: { type: 'array', items: { type: 'string' }, default: [] },
-      type: {
-        ...DEFAULT_SCHEMA_PROPERTY,
-        suffix: { type: 'array', items: { type: 'string' } },
-      },
-      file: DEFAULT_SCHEMA_PROPERTY,
-      property: DEFAULT_SCHEMA_PROPERTY,
-      function: DEFAULT_SCHEMA_PROPERTY,
-      functionParams: DEFAULT_SCHEMA_PROPERTY,
-      variable: DEFAULT_SCHEMA_PROPERTY,
-      class: DEFAULT_SCHEMA_PROPERTY,
-      method: DEFAULT_SCHEMA_PROPERTY,
-    },
-    additionalProperties: false,
-  }
-]
-
-const fetchTerminalImportName = (filename) => {
-  const names = filename.split('/')
-  let name = names.pop()
-
-  if (name === 'index') {
-    name = names.pop()
-  }
-
-  return name
-}
-const generateRedundantKeywords = ({ args, key, terminalImportName }) => {
-  const option = args.option[key] || {}
-  const ignoreKeywords = option.ignoreKeywords || DEFAULT_CONFIG[key].IGNORE_KEYWORDS
-  const terminalImportKeyword = terminalImportName ? terminalImportName.toLowerCase() : ''
-
-  return args.keywords.reduce((prev, keyword) => {
-    if (keyword === terminalImportKeyword || ignoreKeywords.includes(keyword)) {
-      return prev
-    }
-
-    return [...prev, ...uniq([
-      Inflector.pluralize(keyword),
-      keyword,
-      Inflector.singularize(keyword),
-    ])]
-  }, [])
-}
-const handleReportBetterName = ({
-  key,
-  context,
-  option,
-  filename,
-  redundantKeywords,
-  defaultBetterName,
-  fetchName,
-  generateMessage,
-}) => {
-  if (!generateMessage) {
-    generateMessage = (({ name, betterName }) => `${name} からパスで推測できる箇所を取り除いてしてください (例: ${betterName})`)
-  }
-
-  return (node) => {
-    const name = fetchName(node)
-
-    if (
-      !name ||
-      option.allowedNames &&
-      Object.entries(option.allowedNames).find(([regex, calcs]) => filename.match(new RegExp(regex)) && calcs.find((c) => c === name))
-    ) {
-      return
-    }
-
-    let candidates = []
-    let conciseName = redundantKeywords.reduce((prev, keyword) => {
-      const regex = new RegExp(`(${keyword})`, 'i')
-      const matcher = prev.match(regex)
-
-      if (matcher) {
-        candidates.push(matcher[1])
-
-        return prev.replace(regex, '')
-      }
-
-      return prev
-    }, name)
-
-    if (name !== conciseName) {
-      conciseName = conciseName
-                     .replace(/^_+/, '')
-                     .replace(/_+$/, '')
-                     .replace(/_+/, '_')
-      let fullRedundant = false
-
-      if (!conciseName) {
-        fullRedundant = true
-        // HINT: 1keywordで構成されている名称はそのままにする
-        conciseName = candidates.length === 1 ? name : defaultBetterName
-      }
-
-      // HINT: camelCase、lower_snake_case の場合、keywordが取り除かれた結果違うケースになってしまう場合があるので対応する
-      if (name.match(/^[a-z]/) && conciseName.match(/^[A-Z]/)) {
-        conciseName = `${conciseName[0].toLowerCase()}${conciseName.slice(1)}`
-      }
-
-      if (fullRedundant) {
-        if (name.match(/^[A-Z]/)) {
-          candidates = candidates.map((k) => `${k[0].toUpperCase()}${k.slice(1)}`)
-        }
-      } else {
-        candidates = []
-      }
-
-      candidates = uniq([conciseName, ...candidates].filter((k) => !!k))
-
-      if (option.betterNames) {
-        Object.entries(option.betterNames).forEach(([regex, calc]) => {
-          if (calc && filename.match(new RegExp(regex))) {
-            switch(calc.operator) {
-              case '=':
-                candidates = calc.names
-                break
-              case '-':
-                candidates = candidates.filter((c) => !calc.names.includes(c))
-                break
-              case '+':
-                candidates = uniq([...candidates, ...calc.names])
-                break
-            }
-          }
-        })
-      }
-
-      candidates = candidates.filter((c) => c !== name)
-    }
-
-    if (candidates.length > 0) {
-      context.report({
-        node,
-        message: generateMessage({ name, betterName: candidates.join(', ') }),
-      });
-    }
-  }
-}
-
-const generateTypeRedundant = (args) => {
-  const { context, filename } = args
-  const key = 'type'
-  const redundantKeywords = generateRedundantKeywords({ args, key })
-  const option = args.option[key]
-  const defaultConfig = DEFAULT_CONFIG[key]
-
-  return (node) => {
-    const typeName = node.id.name
-
-    if (
-      option.allowedNames &&
-      Object.entries(option.allowedNames).find(([regex, calcs]) => filename.match(new RegExp(regex)) && calcs.find((c) => c === typeName))
-    ) {
-      return
-    }
-
-    const suffix = option.suffix || defaultConfig.SUFFIX
-
-    let SuffixedName = typeName
-    let report = null
-
-    if (!typeName.match(new RegExp(`(${suffix.join('|')})$`))) {
-      SuffixedName = `${typeName}${suffix[0]}`
-      report = {
-        node,
-        message: `type ${typeName} の名称の末尾に ${suffix.join(', ')} ${suffix.length > 1 ? 'のいずれか' : ''}を追加してください`,
-      }
-    }
-
-    let betterName = redundantKeywords.reduce((prev, keyword) => {
-      const result = prev.replace(new RegExp(keyword, 'i'), '')
-
-      return result === 's' || result.match(/^s[A-Z]/) ? `Multiple${result.slice(1)}` : result
-    }, SuffixedName) || suffix[0]
-
-    if (betterName === 'Multiple') {
-      betterName = `${betterName}${suffix[0]}`
-    }
-
-    if (SuffixedName !== betterName) {
-      report = {
-        node,
-        message: `type ${typeName} の名称からパスで推測できる箇所を取り除いてしてください (例: ${betterName})`,
-      }
-    }
-
-    if (report) {
-      context.report(report)
-    }
-  }
-}
-
-const generateTypePropertyRedundant = (args) => {
-  const key = 'property'
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key }),
-    defaultBetterName: '',
-    fetchName: (node) => node.key.name,
-  })
-}
-const generateTypePropertyFunctionParamsRedundant = (args) => {
-  const key = 'property'
-  const redundant = handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key }),
-    defaultBetterName: '',
-    fetchName: (node) => node.name,
-  })
-
-  return (node) => {
-    node.params.forEach((param) => redundant(param))
-  }
-}
-
-const generatePropertyRedundant = (args) => {
-  const key = 'property'
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key }),
-    defaultBetterName: 'item',
-    fetchName: (node) => {
-      // argumentsとしてわたされたobjectの展開などの場合は許可する
-      // このファイル内で修正すべき場合などは冗長な名前を修正するべき場合はtype propertyなどで判断出来る
-      if (node.parent.type === 'ObjectPattern') {
-        return null
-      }
-
-      return node.key.name
-    },
-  })
-}
-
-const generateFileRedundant = (args) => {
-  const key = 'file'
-  const terminalImportName = fetchTerminalImportName(args.filename)
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key, terminalImportName }),
-    defaultBetterName: 'index',
-    fetchName: () => terminalImportName,
-    generateMessage: ({ name, betterName }) => `${name} のファイル名からパスで推測できる箇所を取り除いてしてください (例: ${betterName})`
-  })
-}
-
-const generateFunctionRedundant = (args) => {
-  const key = 'function'
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key, terminalImportName: fetchTerminalImportName(args.filename) }),
-    defaultBetterName: '',
-    fetchName: (node) => node.id.name,
-  })
-}
-const generateFunctionParamsRedundant = (args) => {
-  const key = 'functionParams'
-  const redundant = handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key }),
-    defaultBetterName: '',
-    fetchName: (node) => node.name,
-  })
-
-  return (node) => {
-    node.params.forEach((param) => redundant(param))
-  }
-}
-
-const generateVariableRedundant = (args) => {
-  const key = 'variable'
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key, terminalImportName: fetchTerminalImportName(args.filename) }),
-    defaultBetterName: '',
-    fetchName: (node) => node.id.name,
-  })
-}
-
-const generateClassRedundant = (args) => {
-  const key = 'class'
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key, terminalImportName: fetchTerminalImportName(args.filename) }),
-    defaultBetterName: '',
-    fetchName: (node) => node.id.name,
-  })
-}
-
-const generateMethodRedundant = (args) => {
-  const key = 'method'
-
-  return handleReportBetterName({
-    ...args,
-    key,
-    option: args.option[key],
-    redundantKeywords: generateRedundantKeywords({ args, key }),
-    defaultBetterName: 'item',
-    fetchName: (node) => node.key.name,
-  })
-}
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    schema: SCHEMA,
-  },
-  create(context) {
-    if (!rootPath) {
-      throw new Error('tsconfig.json の compilerOptions.paths に `@/*`、もしくは `~/*` 形式でフロントエンドのroot dir を指定してください(例: `"@/*": ["./any_path/*"]`)')
-    }
-
-    let rules = {}
-
-    const option = context.options[0]
-    let filename = context.getFilename()
-
-    if ((option.ignores || []).some((i) => !!filename.match(new RegExp(i)))) {
-      return {}
-    }
-
-    const keywords = uniq((() => {
-      const keywordMatcher = filename.match(new RegExp(`${rootPath}/(.+?)$`))
-
-      if (keywordMatcher) {
-        const keywords = keywordMatcher[1].split('/')
-        keywords[keywords.length - 1] = keywords[keywords.length - 1].split('.')[0]
-
-        filename = `${rootPath}/${keywords.join('/')}`
-
-        if (keywords[keywords.length - 1] === 'index') {
-          keywords.pop()
-        }
-
-        // HINT: ファイル名 > ディレクトリ名 > 親ディレクトリ名 ...
-        // の順でキーワードとしての重要度が上がる。reverseして重要度順に並べる
-        return keywords.reverse().reduce((prev, dir, index) => {
-          prev.push(dir.replace(/_/g, '').toLowerCase())
-
-          return prev
-        }, [])
-      }
-
-      return []
-    })())
-
-    const args = {
-      context,
-      option,
-      filename,
-      keywords,
-    }
-
-    const addRule = (key, redundant) => {
-      const addedRules = rules[key] || []
-
-      rules[key] = [...addedRules, redundant]
-    }
-
-    if (option.type) {
-      addRule('TSTypeAliasDeclaration', generateTypeRedundant(args))
-      // addRule('TSInterfaceDeclaration', generateTypeRedundant(args)) // 必要になったら実装する
-    }
-    if (option.property) {
-      const typePropRedundant = generateTypePropertyRedundant(args)
-      const typeFuncParamRedundant = generateTypePropertyFunctionParamsRedundant(args)
-      const redundant = generatePropertyRedundant(args)
-
-      addRule('TSPropertySignature', (node) => {
-        typePropRedundant(node)
-
-        if (node.typeAnnotation.typeAnnotation.type === 'TSFunctionType') {
-          typeFuncParamRedundant(node.typeAnnotation.typeAnnotation)
-        }
-      })
-      addRule('Property', redundant)
-      addRule('PropertyDefinition', redundant)
-    }
-    if (option.file) {
-      addRule('Program', generateFileRedundant(args))
-    }
-    if (option.function) {
-      addRule('FunctionDeclaration', generateFunctionRedundant(args))
-    }
-    if (option.functionParams) {
-      const redundant = generateFunctionParamsRedundant(args)
-
-      addRule('FunctionDeclaration', redundant)
-      addRule('ArrowFunctionExpression', redundant)
-      addRule('MethodDefinition', (node) => {
-        if (node.value.type === 'FunctionExpression') {
-          redundant(node.value)
-        }
-      })
-    }
-    if (option.variable) {
-      const redundant = generateVariableRedundant(args)
-
-      addRule('VariableDeclarator', redundant)
-      addRule('TSEnumDeclaration', redundant)
-    }
-    if (option.class) {
-      addRule('ClassDeclaration', generateClassRedundant(args))
-    }
-    if (option.method) {
-      addRule('MethodDefinition', generateMethodRedundant(args))
-    }
-
-    Object.keys(rules).forEach((key) => {
-      const redundants = rules[key]
-      rules[key] = (node) => {
-        redundants.forEach((redundant) => {
-          redundant(node)
-        })
-      }
-    })
-
-    return rules
-  },
-}
-
-module.exports.schema = SCHEMA
-module.exports.default_config = DEFAULT_CONFIG