eslint-plugin-smarthr 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.0...v0.5.1) (2024-03-17)
+
+
+### Features
+
+* a11y-form-control-in-formルールを追加 ([#121](https://github.com/kufu/eslint-plugin-smarthr/issues/121)) ([a6270f9](https://github.com/kufu/eslint-plugin-smarthr/commit/a6270f9f22832a8ccaeef3b63e35da84b6e13e68))
+
+## [0.5.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.2...v0.5.0) (2024-03-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* spread attributesが指定されている場合、ruleをcorrectにする smartr オプションを allow-spread-attributes オプションにリネームする (#119)
+
+### Bug Fixes
+
+* spread attributesが指定されている場合、ruleをcorrectにする smartr オプションを allow-spread-attributes オプションにリネームする ([#119](https://github.com/kufu/eslint-plugin-smarthr/issues/119)) ([25752bb](https://github.com/kufu/eslint-plugin-smarthr/commit/25752bb8e77cf170779de3746b9dbbc3997be09d))
+
 ### [0.4.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.1...v0.4.2) (2024-03-03)
 
 
@@ -333,7 +351,7 @@ All notable changes to this project will be documented in this file. See [standa
 ### [0.2.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
 
 ### Features
-* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44)) 
+* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44))
 
 ### [0.2.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.13) (2022-12-07)
 

package/README.md

@@ -3,6 +3,7 @@
 - [a11y-anchor-has-href-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-anchor-has-href-attribute)
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
 - [a11y-delegate-element-has-role-presentation](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-delegate-element-has-role-presentation)
+- [a11y-form-control-in-form](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-form-control-in-form)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-heading-in-sectioning-content)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)

package/index.js

@@ -23,6 +23,23 @@ function generateRulesMap() {
   return rulesMap;
 }
 
+const DISAPPROVE_RULE_NAMES = [
+  'a11y-form-control-in-form', // formを使用することの是非について議論中のため
+
+  // ルールが動作するために設定が必要なものはrecommendedに含めない
+  'format-import-path',
+  'format-translate-component',
+  'jsx-start-with-spread-attributes',
+  'no-import-other-domain',
+  'prohibit-file-name',
+  'prohibit-import',
+  'prohibit-path-within-template-literal',
+  'require-declaration',
+  'require-export',
+  'require-import',
+]
+const DISAPPROVE_RULE_NAMES_REGEX = new RegExp(`^(${DISAPPROVE_RULE_NAMES.join('|')})$`)
+
 function generateRecommendedConfig(rules) {
   let config = {
     plugins: ['smarthr'],
@@ -30,7 +47,9 @@ function generateRecommendedConfig(rules) {
   };
 
   for (let ruleName of Object.keys(rules)) {
-    config.rules[`smarthr/${ruleName}`] = 'off';
+    if (!DISAPPROVE_RULE_NAMES_REGEX.test(ruleName)) {
+      config.rules[`smarthr/${ruleName}`] = 'off';
+    }
   }
 
   return config;

package/package.json

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

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -6,7 +6,7 @@
   - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
     - これらの操作は href属性を参照します
   - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます
 - react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
 - next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
 
@@ -17,7 +17,7 @@
   rules: {
     'smarthr/a11y-anchor-has-href-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -49,7 +49,7 @@
 // react-router-domを利用している場合
 <Link to={hoge}>any</Link>
 
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <XxxAnchor {...args} />
 <XxxLink {...args} any="any" />
 ```

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -45,7 +45,7 @@ const baseCheck = (node, checkType) => {
   if (
     nodeName.match(REGEX_TARGET) &&
     checkExistAttribute(node, findHrefAttribute) &&
-    (checkType !== 'smart' || !node.attributes.some(findSpreadAttr))
+    (checkType !== 'allow-spread-attributes' || !node.attributes.some(findSpreadAttr))
   ) {
     return nodeName
   }
@@ -87,7 +87,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }

package/rules/a11y-delegate-element-has-role-presentation/README.md

@@ -1,10 +1,10 @@
-# smarthr/a11y-delegate-element-has-role-presantation
+# smarthr/a11y-delegate-element-has-role-presentation
 
-- 'role="presantation"'を適切に設定することを促すルールです
-- インタラクティブな要素に対して'role="presantation"'が設定されている場合、エラーになります
+- 'role="presentation"'を適切に設定することを促すルールです
+- インタラクティブな要素に対して'role="presentation"'が設定されている場合、エラーになります
   - インタラクティブな要素とは form, inputなどの入力要素、button, a などのクリッカブルな要素を指します
-- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presantation"' を設定することを促します
-  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presantation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
+- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presentation"' を設定することを促します
+  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presentation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
 - additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することが可能です
 
 ## rules
@@ -12,7 +12,7 @@
 ```js
 {
   rules: {
-    'smarthr/a11y-delegate-element-has-role-presantation': [
+    'smarthr/a11y-delegate-element-has-role-presentation': [
       'error', // 'warn', 'off'
       // { additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }
     ]
@@ -23,12 +23,12 @@
 ## ❌ Incorrect
 
 ```jsx
-// インタラクティブな要素に対して role="presantation" は設定できない
-<Button role="presantation">text.</Button>
-<input type="text" role="presantation" />
+// インタラクティブな要素に対して role="presentation" は設定できない
+<Button role="presentation">text.</Button>
+<input type="text" role="presentation" />
 
 // インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presantation" を設定する必要がある
+// role="presentation" を設定する必要がある
 <div onClick={hoge}>
   <Button>text.</Button>
 </div>
@@ -44,7 +44,7 @@
 
 ```jsx
 // インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presantation" を設定する
+// role="presentation" を設定する
 <div onClick={hoge} role="presentation">
   <Button>text.</Button>
 </div>

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

@@ -0,0 +1,67 @@
+# smarthr/a11y-form-control-in-form
+
+- fieldset, Fieldset, FormControl を利用する場合、form要素で囲むことを促すルールです
+- form要素で囲むことで以下のようなメリットがあります
+  - 適切にマークアップできるようになり、フォームの範囲などがスクリーンリーダーに正しく伝わる
+  - 入力要素にfocusした状態でEnterを押せばフォームをsubmitできる
+  - inputのrequired属性、pattern属性を利用した入力チェックをブラウザの機能として実行できる
+- smarthr/a11y-input-in-form-control と組み合わせることでより厳密なフォームのマークアップを行えます
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-form-control-in-form': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// formで囲まれていないためNG
+const AnyComponent = <>
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</>
+```
+
+## ✅ Correct
+
+```jsx
+// formで囲まれているためOK
+const AnyComponent = <StyledForm>
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</StyledForm>
+const AnyComponent = <Hoge as="form">
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</Hoge>
+const AnyComponent = <Hoge forwardedAs="form">
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</Hoge>
+
+// Dialogの場合、FormDialog・RemoteTriggerFormDialogで囲めばOK
+const AnyComponent = <FormDialog>
+  <FugaFormControl />
+</FormDialog>
+const AnyComponent = <RemoteTriggerAnyFormDialog>
+  <FugaFormControl />
+</RemoteTriggerAnyFormDialog>
+
+// 対象のFormControl、Fieldsetがコンポーネントの一要素であり、その親コンポーネント名がFormControl、もしくはFieldsetの場合OK
+const AnyFormControl = <>
+  <StyledFormControl />
+</>
+const AnyFieldset = <>
+  <StyledFieldset />
+</>
+```

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

@@ -0,0 +1,94 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const FIELDSET_EXPECTED_NAMES = {
+  '((F|^f)ieldset)$': '(Fieldset)$',
+  '(Fieldsets)$': '(Fieldsets)$',
+}
+const FORM_CONTROL_EXPECTED_NAMES = {
+  ...FIELDSET_EXPECTED_NAMES,
+  '(FormGroup)$': '(FormGroup)$',
+  '(FormControl)$': '(FormControl)$',
+  '(FormControls)$': '(FormControls)$',
+}
+const FORM_EXPECTED_NAMES = {
+  '((F|^f)orm)$': '(Form)$',
+  '(FormDialog)$': '(FormDialog)$',
+  'RemoteTrigger(.*)FormDialog$': 'RemoteTrigger(.*)FormDialog$',
+}
+const EXPECTED_NAMES = {
+  ...FORM_CONTROL_EXPECTED_NAMES,
+  ...FORM_EXPECTED_NAMES,
+}
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const targetRegex = new RegExp(`(${Object.keys(FORM_CONTROL_EXPECTED_NAMES).join('|')})`)
+const wrapperRegex = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+const messageFieldset = `(${Object.values(FORM_CONTROL_EXPECTED_NAMES).join('|')})`
+const declaratorTargetRegex = new RegExp(messageFieldset)
+const asRegex = /^(as|forwardedAs)$/
+const bareTagRegex = /^(form|fieldset)$/
+
+const includeAsAttrFormOrFieldset = (a) => a.name?.name.match(asRegex) && a.value.value.match(bareTagRegex)
+
+const searchBubbleUp = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合は確定でエラーにする
+      return null
+    case 'JSXElement':
+      // formかFieldsetでラップされていればOK
+      if (node.openingElement.name.name && (wrapperRegex.test(node.openingElement.name.name) || node.openingElement.attributes.some(includeAsAttrFormOrFieldset))) {
+        return node
+      }
+      break
+    case 'VariableDeclarator':
+      // FormControl系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.parent?.type) && declaratorTargetRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+    case 'FunctionDeclaration':
+    case 'ClassDeclaration':
+      // FormControl系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.type) && declaratorTargetRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+  }
+
+  return searchBubbleUp(node.parent)
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const elementName = node.name.name
+
+        if (elementName && targetRegex.test(elementName)) {
+          const result = searchBubbleUp(node.parent.parent)
+
+          if (!result) {
+            context.report({
+              node,
+              message: `${elementName}をform要素で囲むようにマークアップしてください。
+ - form要素で囲むことでスクリーンリーダーに入力フォームであることが正しく伝わる、入力要素にfocusした状態でEnterを押せばsubmitできる、inputのpattern属性を利用できるなどのメリットがあります
+ - 以下のいずれかの方法で修正をおこなってください
+   - 方法1: form要素で ${elementName} を囲んでください。smarthr-ui/ActionDialog、もしくはsmarthr-ui/RemoteTriggerActionDialogを利用している場合、smarthr-ui/FormDialog、smarthr-ui/RemoteTriggerFormDialogに置き換えてください
+   - 方法2: ${elementName} がコンポーネント内の一要素であり、かつその親コンポーネントがFormControl、もしくはFieldsetを表現するものである場合、親コンポーネント名を "${messageFieldset}" とマッチするものに変更してください`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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

@@ -126,7 +126,7 @@ const findTagAttr = (a) => a.name?.name == 'tag'
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     schema: [],
   },
   create(context) {

package/rules/a11y-image-has-alt-attribute/README.md

@@ -1,7 +1,7 @@
 # smarthr/a11y-image-has-alt-attribute
 
 - 画像やアイコンにalt属性を設定することを強制するルールです
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
 
 ## rules
 
@@ -10,7 +10,7 @@
   rules: {
     'smarthr/a11y-image-has-alt-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -56,7 +56,7 @@ const StyledPiyo = styled(Icon)``
 <Icon alt="message" />
 ```
 ```jsx
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <XxxImage {...args} />
 <YyyIcon {...args} any="any" />
 ```

package/rules/a11y-image-has-alt-attribute/index.js

@@ -42,7 +42,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }
@@ -76,7 +76,7 @@ module.exports = {
                   !isWithinSvgJsxElement(node.parent)
                 ) &&
                 (
-                  checkType !== 'smart' ||
+                  checkType !== 'allow-spread-attributes' ||
                   !node.attributes.some(findSpreadAttr)
                 )
               ) {

package/rules/a11y-input-has-name-attribute/README.md

@@ -4,7 +4,7 @@
   - 入力要素は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
     - 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
   - input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
 
 ## rules
 
@@ -13,7 +13,7 @@
   rules: {
     'smarthr/a11y-input-has-name-attribute': [
       'error', // 'warn', 'off'
-      // { checkType: 'always' } /* 'always' || 'smart' */
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
     ]
   },
 }
@@ -51,7 +51,7 @@ const StyledPiyo = styled(RadioButton)``;
 <Textarea name="some" />
 <Select name="piyo" />
 
-// checkType: 'smart'
+// checkType: 'allow-spread-attributes'
 <AnyInput {...args} />
 <AnyInput {...args} any="any" />
 ```

package/rules/a11y-input-has-name-attribute/index.js

@@ -34,7 +34,7 @@ const SCHEMA = [
   {
     type: 'object',
     properties: {
-      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+      checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
   }
@@ -60,7 +60,7 @@ module.exports = {
           if (!nameAttr) {
             if (
               node.attributes.length === 0 ||
-              checkType !== 'smart' ||
+              checkType !== 'allow-spread-attributes' ||
               !node.attributes.some(findSpreadAttr)
             ) {
               const isRadio =

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -11,7 +11,7 @@ const EXPECTED_NAMES = {
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     schema: [],
   },
   create(context) {

package/test/a11y-anchor-has-href-attribute.js

@@ -37,7 +37,7 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>` },
     { code: `<Link href="hoge">ほげ</Link>` },
     { code: `<Link href="#fuga">ほげ</Link>` },
-    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'smart' }] },
+    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

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

@@ -0,0 +1,37 @@
+const rule = require('../rules/a11y-form-control-in-form')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (elementName) => `${elementName}をform要素で囲むようにマークアップしてください。
+ - form要素で囲むことでスクリーンリーダーに入力フォームであることが正しく伝わる、入力要素にfocusした状態でEnterを押せばsubmitできる、inputのpattern属性を利用できるなどのメリットがあります
+ - 以下のいずれかの方法で修正をおこなってください
+   - 方法1: form要素で ${elementName} を囲んでください。smarthr-ui/ActionDialog、もしくはsmarthr-ui/RemoteTriggerActionDialogを利用している場合、smarthr-ui/FormDialog、smarthr-ui/RemoteTriggerFormDialogに置き換えてください
+   - 方法2: ${elementName} がコンポーネント内の一要素であり、かつその親コンポーネントがFormControl、もしくはFieldsetを表現するものである場合、親コンポーネント名を "((Fieldset)$|(Fieldsets)$|(FormGroup)$|(FormControl)$|(FormControls)$)" とマッチするものに変更してください`
+
+ruleTester.run('a11y-form-control-in-form', rule, {
+  valid: [
+    { code: '<input />' },
+    { code: '<Select />' },
+    { code: '<form><FormControl /></form>' },
+    { code: '<Form><fieldset /></Form>' },
+    { code: '<StyledForm><AnyFieldset /></StyledForm>' },
+    { code: 'const HogeFormControl = <><AnyFormControl /></>' },
+    { code: 'const HogeFieldset = <><AnyFieldset /></>' },
+  ],
+  invalid: [
+    { code: '<FormControl />', errors: [ { message: generateErrorText('FormControl') } ] },
+    { code: '<fieldset />', errors: [ { message: generateErrorText('fieldset') } ] },
+    { code: '<AnyFieldset />', errors: [ { message: generateErrorText('AnyFieldset') } ] },
+    { code: 'const Hoge = <><AnyFormControl /></>', errors: [ { message: generateErrorText('AnyFormControl') } ] },
+  ]
+})

package/test/a11y-image-has-alt-attribute.js

@@ -45,7 +45,7 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: '<HogeImage aria-describedby="hoge" />' },
     { code: '<HogeImage aria-describedby="hoge" alt="fuga" />' },
     { code: '<svg><image /></svg>' },
-    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'smart' }] },
+    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

package/test/a11y-input-has-name-attribute.js

@@ -46,9 +46,9 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: '<HogeTextarea name="hoge" />' },
     { code: '<select name="hoge" />' },
     { code: '<Select name="hoge[0][Fuga]" />' },
-    { code: '<Input {...hoge} />', options: [{ checkType: 'smart' }] },
-    { code: '<Input {...args1} {...args2} />', options: [{ checkType: 'smart' }] },
-    { code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'smart' }] },
+    { code: '<Input {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
+    { code: '<Input {...args1} {...args2} />', options: [{ checkType: 'allow-spread-attributes' }] },
+    { code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'allow-spread-attributes' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },