eslint-plugin-smarthr 0.3.9 → 0.3.10

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.3.10](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.9...v0.3.10) (2023-09-20)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentでSectioningContentと予想される名前だがそれらの拡張ではないコンポーネントはエラーとする ([#77](https://github.com/kufu/eslint-plugin-smarthr/issues/77)) ([f7248d5](https://github.com/kufu/eslint-plugin-smarthr/commit/f7248d597cb06ba0bab1d3f0d51956efefd04aac))
+* a11y-xxx-has-yyy-attributeにcheckTypeオプションを追加 ([#81](https://github.com/kufu/eslint-plugin-smarthr/issues/81)) ([94a511a](https://github.com/kufu/eslint-plugin-smarthr/commit/94a511a412e62431282eb1980941862313dfb777))
+* a11y系ruleにstyled-componentsで既存のコンポーネントなどを拡張する際、誤検知が発生しそうな名称が設定されている場合はエラーにする機能を追加 ([#80](https://github.com/kufu/eslint-plugin-smarthr/issues/80)) ([727ff3f](https://github.com/kufu/eslint-plugin-smarthr/commit/727ff3fc6116fca017f8c3a3e62af569b76863da))
+
 ### [0.3.9](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.8...v0.3.9) (2023-09-04)
 
 

package/libs/format_styled_components.js

@@ -3,8 +3,13 @@ const STYLED_COMPONENTS = `${STYLED_COMPONENTS_METHOD}-components`
 
 const findInvalidImportNameNode = (s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== STYLED_COMPONENTS_METHOD
 
-const generateTagFormatter = ({ context, EXPECTED_NAMES }) => {
+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 ]
+  }) : []
 
   return {
     ImportDeclaration: (node) => {
@@ -63,6 +68,28 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES }) => {
             });
           }
         })
+
+        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})`
+            })
+          }
+        })
       }
     },
   }

package/package.json

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

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

@@ -6,13 +6,17 @@
   - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
     - これらの操作は href属性を参照します
   - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
+- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
 
 ## rules
 
 ```js
 {
   rules: {
-    'smarthr/a11y-anchor-has-href-attribute': 'error', // 'warn', 'off'
+    'smarthr/a11y-anchor-has-href-attribute': [
+      'error', // 'warn', 'off'
+      // { checkType: 'always' } /* 'always' || 'smart' */
+    ]
   },
 }
 ```
@@ -24,6 +28,10 @@
 <XxxAnchor>any</XxxAnchor>
 <XxxLink>any</XxxLink>
 <XxxLink href>any</XxxLink>
+
+// checkType: 'always'
+<XxxAnchor {...args} />
+<XxxLink {...args} any="any" />
 ```
 
 ## ✅ Correct
@@ -38,4 +46,8 @@
 
 // react-router-domを利用している場合
 <Link to={hoge}>any</Link>
+
+// checkType: 'smart'
+<XxxAnchor {...args} />
+<XxxLink {...args} any="any" />
 ```

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

@@ -28,22 +28,35 @@ const EXPECTED_NAMES = {
   '^a$': '(Anchor|Link)$',
 }
 
+const UNEXPECTED_NAMES = {
+  '(Anchor|^a)$': '(Anchor)$',
+  '(Link|^a)$': '(Link)$',
+}
+
 const REGEX_TARGET = /(Anchor|Link|^a)$/
-const check = (node) => {
-  const result = baseCheck(node)
+const check = (node, checkType) => {
+  const result = baseCheck(node, checkType)
 
-  return result && ((OPTION.nextjs && !nextCheck(node)) || (OPTION.react_router && !reactRouterCheck(node))) ? null : result
+  return result && ((OPTION.nextjs && !nextCheck(node, checkType)) || (OPTION.react_router && !reactRouterCheck(node))) ? null : result
 }
-const baseCheck = (node) => {
+const baseCheck = (node, checkType) => {
   const nodeName = node.name.name || ''
 
-  return nodeName.match(REGEX_TARGET) && checkExistAttribute(node, findHrefAttribute) ? nodeName : false
+  if (
+    nodeName.match(REGEX_TARGET) &&
+    checkExistAttribute(node, findHrefAttribute) &&
+    (checkType !== 'smart' || !node.attributes.some(findSpreadAttr))
+  ) {
+    return nodeName
+  }
+
+  return false
 }
-const nextCheck = (node) => {
+const nextCheck = (node, checkType) => {
   // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
   const target = node.parent.parent.openingElement
 
-  return target ? baseCheck(target) : false
+  return target ? baseCheck(target, checkType) : false
 }
 const reactRouterCheck = (node) => checkExistAttribute(node, findToAttribute)
 
@@ -57,6 +70,7 @@ const checkExistAttribute = (node, find) => {
   )
 }
 const isNullTextHref = (attr) => attr.type === 'Literal' && (attr.value === '' || attr.value === '#')
+const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
 
 const findHrefAttribute = (a) => a.name?.name == 'href'
 const findToAttribute = (a) => a.name?.name == 'to'
@@ -69,7 +83,15 @@ const MESSAGE_SUFFIX = ` に href 属性を正しく設定してください
  - リンクが存在せず無効化されていることを表したい場合、href属性に undefined を設定してください
    - button要素のdisabled属性が設定された場合に相当します`
 
-const SCHEMA = []
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+    },
+    additionalProperties: false,
+  }
+]
 
 module.exports = {
   meta: {
@@ -77,10 +99,13 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
+    const checkType = option.checkType || 'always'
+
     return {
-      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = check(node)
+        const nodeName = check(node, checkType)
 
         if (nodeName) {
           context.report({

package/rules/a11y-clickable-element-has-text/index.js

@@ -20,6 +20,12 @@ const EXPECTED_NAMES = {
   '^a$': '(Anchor|Link)$',
 }
 
+const UNEXPECTED_NAMES = {
+  '(B|^b)utton$': '(Button)$',
+  '(Anchor|^a)$': '(Anchor)$',
+  '(Link|^a)$': '(Link)$',
+}
+
 const REGEX_NLSP = /^\s*\n+\s*$/
 const REGEX_CLICKABLE_ELEMENT = /^(a|(.*?)Anchor(Button)?|(.*?)Link|(b|B)utton)$/
 const REGEX_SMARTHR_LOGO = /SmartHRLogo$/
@@ -47,7 +53,7 @@ module.exports = {
     const componentsWithText = option.componentsWithText || []
 
     return {
-      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
       JSXElement: (parentNode) => {
         // HINT: 閉じタグが存在しない === テキストノードが存在しない
         if (!parentNode.closingElement) {

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

@@ -12,6 +12,30 @@ const EXPECTED_NAMES = {
   'ModelessDialog$': 'ModelessDialog$',
 }
 
+const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
+ - childrenにHeadingを含まない場合、コンポーネントの名称から"{{expected}}"を取り除いてください
+ - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/{{expected}}をexendしてください
+   - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"{{expected}}"を設定し、そのコンポーネント内でsmarthr-ui/{{expected}}を利用してください`
+const UNEXPECTED_NAMES = {
+  '(Heading|^h(1|2|3|4|5|6))$': '(Heading)$',
+  '(A|^a)rticle$': [
+    '(Article)$',
+    unexpectedMessageTemplate,
+  ],
+  '(A|^a)side$': [
+    '(Aside)$',
+    unexpectedMessageTemplate,
+  ],
+  '(N|^n)av$': [
+    '(Nav)$',
+    unexpectedMessageTemplate,
+  ],
+  '(S|^s)ection$': [
+    '(Section)$',
+    unexpectedMessageTemplate,
+  ],
+}
+
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
 const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
@@ -28,6 +52,24 @@ const rootHeadingMessage = `${headingMessage}
 const pageHeadingMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageHeadingInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
 
+const VariableDeclaratorBareToSHR = (context, node) => {
+  if (!node.init) {
+    return
+  }
+
+  const tag = node.init.tag || node.init
+
+  if (tag.object?.name === 'styled') {
+    const message = reportMessageBareToSHR(tag.property.name, true)
+
+    if (message) {
+      context.report({
+        node,
+        message,
+      });
+    }
+  }
+}
 const reportMessageBareToSHR = (tagName, visibleExample) => {
   const matcher = tagName.match(bareTagRegex)
 
@@ -67,26 +109,11 @@ module.exports = {
   create(context) {
     let h1s = []
     let sections = []
-    let { VariableDeclarator, ...formatter } = generateTagFormatter({ context, EXPECTED_NAMES })
+    let { VariableDeclarator, ...formatter } = generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES, unexpectedMessageTemplate })
 
     formatter.VariableDeclarator = (node) => {
       VariableDeclarator(node)
-      if (!node.init) {
-        return
-      }
-
-      const tag = node.init.tag || node.init
-
-      if (tag.object?.name === 'styled') {
-        const message = reportMessageBareToSHR(tag.property.name, true)
-
-        if (message) {
-          context.report({
-            node,
-            message,
-          });
-        }
-      }
+      VariableDeclaratorBareToSHR(context, node)
     }
 
     return {

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

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

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

@@ -7,9 +7,16 @@ const EXPECTED_NAMES = {
   '^(img|svg)$': '(Img|Image|Icon)$',
 }
 
+const UNEXPECTED_NAMES = {
+  '(Img|^(img|svg))$': '(Img)$',
+  '(Image|^(img|svg))$': '(Image)$',
+  '(Icon|^(img|svg))$': '(Icon)$',
+}
+
 const REGEX_IMG = /(img|image)$/i // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
 
 const findAltAttr = (a) => a.name?.name === 'alt'
+const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
 const isWithinSvgJsxElement = (node) => {
   if (
     node.type === 'JSXElement' &&
@@ -28,14 +35,27 @@ const MESSAGE_NOT_EXIST_ALT = `画像にはalt属性を指定してください
 const MESSAGE_NULL_ALT = `画像の情報をテキストにした代替テキスト（'alt'）を設定してください。
  - 装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。`
 
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+    },
+    additionalProperties: false,
+  }
+]
+
 module.exports = {
   meta: {
     type: 'problem',
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
+    const checkType = option.checkType || 'always'
+
     return {
-      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
         if (node.name.name) {
           const matcher = node.name.name.match(REGEX_IMG)
@@ -46,7 +66,16 @@ module.exports = {
             let message = ''
 
             if (!alt) {
-              if (matcher.input !== 'image' || !isWithinSvgJsxElement(node.parent)) {
+              if (
+                (
+                  matcher.input !== 'image' ||
+                  !isWithinSvgJsxElement(node.parent)
+                ) &&
+                (
+                  checkType !== 'smart' ||
+                  !node.attributes.some(findSpreadAttr)
+                )
+              ) {
                 message = MESSAGE_NOT_EXIST_ALT
               }
             } else if (alt.value.value === '') {
@@ -65,4 +94,4 @@ module.exports = {
     }
   },
 }
-module.exports.schema = []
+module.exports.schema = SCHEMA

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

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

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

@@ -14,8 +14,10 @@ const EXPECTED_NAMES = {
 const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
 const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
 const INPUT_TAG_REGEX = /(i|I)nput$/
+const RADIO_BUTTON_REGEX = /RadioButton$/
 
 const findNameAttr = (a) => a?.name?.name === 'name'
+const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
 const findRadioInput = (a) => a.name?.name === 'type' && a.value.value === 'radio'
 
 const MESSAGE_PART_FORMAT = `"${INPUT_NAME_REGEX.toString()}"にmatchするフォーマットで命名してください`
@@ -27,7 +29,15 @@ const MESSAGE_UNDEFINED_FOR_RADIO = `にグループとなる他のinput[radio]
 const MESSAGE_UNDEFINED_FOR_NOT_RADIO = `にname属性を指定してください${MESSAGE_UNDEFINED_NAME_PART}`
 const MESSAGE_NAME_FORMAT_SUFFIX = `はブラウザの自動補完が適切に行えない可能性があるため${MESSAGE_PART_FORMAT}`
 
-const SCHEMA = []
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      checkType: { type: 'string', enum: ['always', 'smart'], default: 'always' },
+    },
+    additionalProperties: false,
+  }
+]
 
 module.exports = {
   meta: {
@@ -35,6 +45,9 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
+    const checkType = option.checkType || 'always'
+
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
@@ -44,14 +57,20 @@ module.exports = {
           const nameAttr = node.attributes.find(findNameAttr)
 
           if (!nameAttr) {
-            const isRadio =
-              nodeName.match(/RadioButton$/) ||
-              (nodeName.match(INPUT_TAG_REGEX) && node.attributes.some(findRadioInput));
+            if (
+              node.attributes.length === 0 ||
+              checkType !== 'smart' ||
+              !node.attributes.some(findSpreadAttr)
+            ) {
+              const isRadio =
+                nodeName.match(RADIO_BUTTON_REGEX) ||
+                (nodeName.match(INPUT_TAG_REGEX) && node.attributes.some(findRadioInput));
 
-            context.report({
-              node,
-              message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
-            });
+              context.report({
+                node,
+                message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
+              });
+            }
           } else {
             const nameValue = nameAttr.value?.value || ''
 

package/rules/require-barrel-import/index.js

@@ -1,19 +1,55 @@
 const path = require('path')
 const fs = require('fs')
 const { replacePaths, rootPath } = require('../../libs/common')
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      allowedImports: {
+        type: 'object',
+        patternProperties: {
+          '.+': {
+            type: 'object',
+            patternProperties: {
+              '.+': {
+                type: ['boolean', 'array' ],
+                items: {
+                  type: 'string',
+                },
+                additionalProperties: false
+              }
+            }
+          },
+        },
+        additionalProperties: true,
+      },
+      ignores: { type: 'array', items: { type: 'string' }, default: [] },
+    },
+    additionalProperties: false,
+  }
+]
+
+const entriedReplacePaths = Object.entries(replacePaths)
+const CWD = process.cwd()
+const REGEX_UNNECESSARY_SLASH = /(\/)+/g
+const REGEX_ROOT_PATH = new RegExp(`^${rootPath}/index\.`)
+const REGEX_INDEX_FILE = /\/index\.(ts|js)x?$/
+const TARGET_EXTS = ['ts', 'tsx', 'js', 'jsx']
+
 const calculateAbsoluteImportPath = (source) => {
   if (source[0] === '/') {
     return source
   }
 
-  return Object.entries(replacePaths).reduce((prev, [key, values]) => {
+  return entriedReplacePaths.reduce((prev, [key, values]) => {
     if (source === prev) {
+      const regexp = new RegExp(`^${key}(.+)$`)
+
       return values.reduce((p, v) => {
         if (prev === p) {
-          const regexp = new RegExp(`^${key}(.+)$`)
-
           if (prev.match(regexp)) {
-            return p.replace(regexp, `${path.resolve(`${process.cwd()}/${v}`)}/$1`)
+            return p.replace(regexp, `${path.resolve(`${CWD}/${v}`)}/$1`)
           }
         }
 
@@ -25,14 +61,14 @@ const calculateAbsoluteImportPath = (source) => {
   }, source)
 }
 const calculateReplacedImportPath = (source) => {
-  return Object.entries(replacePaths).reduce((prev, [key, values]) => {
+  return entriedReplacePaths.reduce((prev, [key, values]) => {
     if (source === prev) {
       return values.reduce((p, v) => {
         if (prev === p) {
-          const regexp = new RegExp(`^${path.resolve(`${process.cwd()}/${v}`)}(.+)$`)
+          const regexp = new RegExp(`^${path.resolve(`${CWD}/${v}`)}(.+)$`)
 
           if (prev.match(regexp)) {
-            return p.replace(regexp, `${key}/$1`).replace(/(\/)+/g, '/')
+            return p.replace(regexp, `${key}/$1`).replace(REGEX_UNNECESSARY_SLASH, '/')
           }
         }
 
@@ -43,34 +79,9 @@ const calculateReplacedImportPath = (source) => {
     return prev
   }, source)
 }
-const TARGET_EXTS = ['ts', 'tsx', 'js', 'jsx']
-const SCHEMA = [
-  {
-    type: 'object',
-    properties: {
-      allowedImports: {
-        type: 'object',
-        patternProperties: {
-          '.+': {
-            type: 'object',
-            patternProperties: {
-              '.+': {
-                type: ['boolean', 'array' ],
-                items: {
-                  type: 'string',
-                },
-                additionalProperties: false
-              }
-            }
-          },
-        },
-        additionalProperties: true,
-      },
-      ignores: { type: 'array', items: { type: 'string' }, default: [] },
-    },
-    additionalProperties: false,
-  }
-]
+
+const pickImportedName = (s) => s.imported?.name
+const findExistsSync = (p) => fs.existsSync(p)
 
 module.exports = {
   meta: {
@@ -81,16 +92,13 @@ module.exports = {
     const option = context.options[0] || {}
     const filename = context.getFilename()
 
-    if ((option.ignores || []).some((i) => !!filename.match(new RegExp(i)))) {
+    if (option.ignores && option.ignores.some((i) => !!filename.match(new RegExp(i)))) {
       return {}
     }
 
-    const dir = (() => {
-      const d = filename.split('/')
-      d.pop()
-
-      return d.join('/')
-    })()
+    let d = filename.split('/')
+    d.pop()
+    const dir = d.join('/')
     const targetPathRegexs = Object.keys(option?.allowedImports || {})
     const targetAllowedImports = targetPathRegexs.filter((regex) => !!filename.match(new RegExp(regex)))
 
@@ -105,7 +113,7 @@ module.exports = {
 
           targetModules.forEach((targetModule) => {
             const allowedModules = allowedOption[targetModule] || true
-            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${process.cwd()}/${targetModule}`)
+            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${CWD}/${targetModule}`)
             let sourceValue = node.source.value
 
             if (actualTarget[0] === '/') {
@@ -116,21 +124,19 @@ module.exports = {
               return
             }
 
-
             if (!Array.isArray(allowedModules)) {
               isDenyPath = true
               deniedModules.push(true)
             } else {
-              deniedModules.push(node.specifiers.map((s) => s.imported?.name).filter(i => allowedModules.indexOf(i) == -1))
+              deniedModules.push(node.specifiers.map(pickImportedName).filter(i => allowedModules.indexOf(i) == -1))
             }
           })
         })
 
-        if (isDenyPath && deniedModules[0] === true) {
-          return
-        }
-
-        if (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0) {
+        if (
+          isDenyPath && deniedModules[0] === true ||
+          !isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0
+        ) {
           return
         }
 
@@ -167,15 +173,15 @@ module.exports = {
             break
           }
 
-          barrel = TARGET_EXTS.map((e) => `${sourceValue}/index.${e}`).find((p) => fs.existsSync(p)) || barrel
+          barrel = TARGET_EXTS.map((e) => `${sourceValue}/index.${e}`).find(findExistsSync) || barrel
 
           sources.pop()
           sourceValue = sources.join('/')
         }
 
-        if (barrel && !barrel.match(new RegExp(`^${rootPath}/index\.`))) {
+        if (barrel && !barrel.match(REGEX_ROOT_PATH)) {
           barrel = calculateReplacedImportPath(barrel)
-          const noExt = barrel.replace(/\/index\.(ts|js)x?$/, '')
+          const noExt = barrel.replace(REGEX_INDEX_FILE, '')
           deniedModules = [...new Set(deniedModules.flat())]
 
           context.report({

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

@@ -29,30 +29,31 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: 'const HogeLink = styled.a``' },
     { code: 'const HogeAnchor = styled(Anchor)``' },
     { code: 'const HogeLink = styled(Link)``' },
-    {
-      code: `<a href="hoge">ほげ</a>`,
-    },
-    {
-      code: `<a href={hoge}>ほげ</a>`,
-    },
-    {
-      code: `<a href={undefined}>ほげ</a>`,
-    },
-    {
-      code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>`,
-    },
-    {
-      code: `<Link href="hoge">ほげ</Link>`,
-    },
-    {
-      code: `<Link href="#fuga">ほげ</Link>`,
-    },
+    { code: `<a href="hoge">ほげ</a>` },
+    { code: `<a href={hoge}>ほげ</a>` },
+    { code: `<a href={undefined}>ほげ</a>` },
+    { code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>` },
+    { code: `<Link href="hoge">ほげ</Link>` },
+    { code: `<Link href="#fuga">ほげ</Link>` },
+    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'smart' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
+    { code: 'const FugaAnchor = styled.div``', errors: [ { message: `FugaAnchor は /(Anchor|^a)$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - FugaAnchor の名称の末尾が"Anchor" という文字列ではない状態にしつつ、"div"を継承していることをわかる名称に変更してください
+ - もしくは"div"を"FugaAnchor"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const FugaXxxx = styled.div
+   - 修正例2: const FugaAnchorXxxx = styled.div
+   - 修正例3: const FugaAnchor = styled(XxxxAnchor)` } ] },
+    { code: 'const FugaLink = styled.p``', errors: [ { message: `FugaLink は /(Link|^a)$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - FugaLink の名称の末尾が"Link" という文字列ではない状態にしつつ、"p"を継承していることをわかる名称に変更してください
+ - もしくは"p"を"FugaLink"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const FugaXxxx = styled.p
+   - 修正例2: const FugaLinkXxxx = styled.p
+   - 修正例3: const FugaLink = styled(XxxxLink)` } ] },
     { code: `<a></a>`, errors: [{ message: generateErrorText('a') }] },
     { code: `<a>hoge</a>`, errors: [{ message: generateErrorText('a') }] },
     { code: `<Anchor>hoge</Anchor>`, errors: [{ message: generateErrorText('Anchor') }] },
@@ -65,5 +66,7 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<HogeLink href={''}>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href="#">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href={'#'}>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: '<AnyAnchor {...args1} />', errors: [{ message: generateErrorText('AnyAnchor') }] },
+    { code: '<AnyAnchor {...args1} />', options: [{ checkType: 'always' }], errors: [{ message: generateErrorText('AnyAnchor') }] },
   ]
 })

package/test/a11y-clickable-element-has-text.js

@@ -141,6 +141,24 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const Piyo = styled(Anchor)(() => ``)', errors: [ { message: `Piyoを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Text)``', errors: [ { message: `Hogeを正規表現 "/Text$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Hoge = styled(HogeMessage)``', errors: [ { message: `Hogeを正規表現 "/Message$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const StyledButton = styled.div``', errors: [ { message: `StyledButton は /(B|^b)utton$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - StyledButton の名称の末尾が"Button" という文字列ではない状態にしつつ、"div"を継承していることをわかる名称に変更してください
+ - もしくは"div"を"StyledButton"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const StyledXxxx = styled.div
+   - 修正例2: const StyledButtonXxxx = styled.div
+   - 修正例3: const StyledButton = styled(XxxxButton)` } ]  },
+    { code: 'const HogeAnchor = styled(Fuga)``', errors: [ { message: `HogeAnchor は /(Anchor|^a)$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - HogeAnchor の名称の末尾が"Anchor" という文字列ではない状態にしつつ、"Fuga"を継承していることをわかる名称に変更してください
+ - もしくは"Fuga"を"HogeAnchor"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
+   - 修正例1: const HogeXxxx = styled(Fuga)
+   - 修正例2: const HogeAnchorXxxx = styled(Fuga)
+   - 修正例3: const HogeAnchor = styled(XxxxAnchor)` } ]  },
+    { code: 'const HogeLink = styled.p``', errors: [ { message: `HogeLink は /(Link|^a)$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - HogeLink の名称の末尾が"Link" という文字列ではない状態にしつつ、"p"を継承していることをわかる名称に変更してください
+ - もしくは"p"を"HogeLink"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const HogeXxxx = styled.p
+   - 修正例2: const HogeLinkXxxx = styled.p
+   - 修正例3: const HogeLink = styled(XxxxLink)` } ]  },
     {
       code: `<a><img src="hoge.jpg" /></a>`,
       errors: [{ message: defaultErrorMessage }]

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

@@ -58,6 +58,30 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const StyledAside = styled.aside``', errors: [ { message: `"aside"を利用せず、smarthr-ui/Asideを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.aside" -> "styled(Aside)")` } ] },
     { code: 'const StyledNav = styled.nav``', errors: [ { message: `"nav"を利用せず、smarthr-ui/Navを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.nav" -> "styled(Nav)")` } ] },
     { code: 'const StyledSection = styled.section``', errors: [ { message: `"section"を利用せず、smarthr-ui/Sectionを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.section" -> "styled(Section)")` } ] },
+    { code: 'const StyledSection = styled.div``', errors: [ { message: `StyledSection は smarthr-ui/Section をextendすることを期待する名称になっています
+ - childrenにHeadingを含まない場合、コンポーネントの名称から"Section"を取り除いてください
+ - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Sectionをexendしてください
+   - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Section"を設定し、そのコンポーネント内でsmarthr-ui/Sectionを利用してください` } ] },
+    { code: 'const StyledArticle = styled(Hoge)``', errors: [ { message: `StyledArticle は smarthr-ui/Article をextendすることを期待する名称になっています
+ - childrenにHeadingを含まない場合、コンポーネントの名称から"Article"を取り除いてください
+ - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Articleをexendしてください
+   - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Article"を設定し、そのコンポーネント内でsmarthr-ui/Articleを利用してください` } ] },
+    { code: 'const StyledAside = styled(AsideXxxx)``', errors: [ { message: `StyledAside は smarthr-ui/Aside をextendすることを期待する名称になっています
+ - childrenにHeadingを含まない場合、コンポーネントの名称から"Aside"を取り除いてください
+ - childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Asideをexendしてください
+   - "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Aside"を設定し、そのコンポーネント内でsmarthr-ui/Asideを利用してください` } ] },
+    { code: 'const StyledHeading = styled(Hoge)``', errors: [ { message: `StyledHeading は /(Heading|^h(1|2|3|4|5|6))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - StyledHeading の名称の末尾が"Heading" という文字列ではない状態にしつつ、"Hoge"を継承していることをわかる名称に変更してください
+ - もしくは"Hoge"を"StyledHeading"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
+   - 修正例1: const StyledXxxx = styled(Hoge)
+   - 修正例2: const StyledHeadingXxxx = styled(Hoge)
+   - 修正例3: const StyledHeading = styled(XxxxHeading)` } ] },
+    { code: 'const StyledHeading = styled.div``', errors: [ { message: `StyledHeading は /(Heading|^h(1|2|3|4|5|6))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - StyledHeading の名称の末尾が"Heading" という文字列ではない状態にしつつ、"div"を継承していることをわかる名称に変更してください
+ - もしくは"div"を"StyledHeading"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const StyledXxxx = styled.div
+   - 修正例2: const StyledHeadingXxxx = styled.div
+   - 修正例3: const StyledHeading = styled(XxxxHeading)` } ] },
     { code: '<><PageHeading>hoge</PageHeading><PageHeading>fuga</PageHeading></>', errors: [ { message: pageMessage } ] },
     { code: '<Heading>hoge</Heading>', errors: [ { message } ] },
     { code: '<><Heading>hoge</Heading><Heading>fuga</Heading></>', errors: [ { message }, { message } ] },

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

@@ -32,12 +32,13 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: 'const HogeIcon = styled.svg``' },
     { code: 'const HogeImg = styled(Img)``' },
     { code: 'const HogeImage = styled(Image)``' },
-    { code: 'const HogeIcon = styled(ICon)``' },
+    { code: 'const HogeIcon = styled(Icon)``' },
     { code: '<img alt="hoge" />' },
     { code: '<HogeImg alt="hoge" />' },
     { code: '<HogeImage alt="hoge" />' },
     { code: '<HogeIcon />' },
     { code: '<svg><image /></svg>' },
+    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'smart' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -46,8 +47,28 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Img)``', errors: [ { message: `Hogeを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Image)``', errors: [ { message: `Hogeを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
+    { code: 'const StyledImage = styled.span``', errors: [ { message: `StyledImage は /(Image|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - StyledImage の名称の末尾が"Image" という文字列ではない状態にしつつ、"span"を継承していることをわかる名称に変更してください
+ - もしくは"span"を"StyledImage"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
+   - 修正例1: const StyledXxxx = styled.span
+   - 修正例2: const StyledImageXxxx = styled.span
+   - 修正例3: const StyledImage = styled(XxxxImage)` } ] },
+    { code: 'const StyledImg = styled(Hoge)``', errors: [ { message: `StyledImg は /(Img|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - StyledImg の名称の末尾が"Img" という文字列ではない状態にしつつ、"Hoge"を継承していることをわかる名称に変更してください
+ - もしくは"Hoge"を"StyledImg"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
+   - 修正例1: const StyledXxxx = styled(Hoge)
+   - 修正例2: const StyledImgXxxx = styled(Hoge)
+   - 修正例3: const StyledImg = styled(XxxxImg)` } ] },
+    { code: 'const FugaIcon = styled(Fuga)``', errors: [ { message: `FugaIcon は /(Icon|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
+ - FugaIcon の名称の末尾が"Icon" という文字列ではない状態にしつつ、"Fuga"を継承していることをわかる名称に変更してください
+ - もしくは"Fuga"を"FugaIcon"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
+   - 修正例1: const FugaXxxx = styled(Fuga)
+   - 修正例2: const FugaIconXxxx = styled(Fuga)
+   - 修正例3: const FugaIcon = styled(XxxxIcon)` } ] },
     { code: '<img />', errors: [ { message: messageNotExistAlt } ] },
     { code: '<HogeImage alt="" />', errors: [ { message: messageNullAlt } ] },
     { code: '<hoge><image /></hoge>', errors: [ { message: messageNotExistAlt } ] },
+    { code: '<AnyImg {...hoge} />', errors: [ { message: messageNotExistAlt } ]  },
+    { code: '<AnyImg {...hoge} />', options: [{ checkType: 'always' }], errors: [ { message: messageNotExistAlt } ] },
   ]
 })

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

@@ -37,6 +37,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' }] },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -56,5 +59,11 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: '<HogeTextarea />', errors: [ { message: `HogeTextarea にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
     { code: '<input type="radio" name="ほげ" />', errors: [ { message: 'input のname属性の値(ほげ)はブラウザの自動補完が適切に行えない可能性があるため"/^[a-zA-Z0-9_\\[\\]]+$/"にmatchするフォーマットで命名してください' } ] },
     { code: '<select name="hoge[fuga][0][あいうえお]" />', errors: [ { message: 'select のname属性の値(hoge[fuga][0][あいうえお])はブラウザの自動補完が適切に行えない可能性があるため"/^[a-zA-Z0-9_\\[\\]]+$/"にmatchするフォーマットで命名してください' } ] },
+    { code: '<Input {...hoge} />', errors: [ { message: `Input にname属性を指定してください
+ - ブラウザの自動補完が有効化されるなどのメリットがあります
+ - より多くのブラウザが自動補完を行える可能性を上げるため、\"/^[a-zA-Z0-9_\\[\\]]+$/\"にmatchするフォーマットで命名してください` } ] },
+    { code: '<Input {...hoge} hoge="fuga" />', options: [{ checkType: 'always' }], errors: [ { message: `Input にname属性を指定してください
+ - ブラウザの自動補完が有効化されるなどのメリットがあります
+ - より多くのブラウザが自動補完を行える可能性を上げるため、\"/^[a-zA-Z0-9_\\[\\]]+$/\"にmatchするフォーマットで命名してください` } ] },
   ],
 });

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

@@ -27,9 +27,9 @@ ruleTester.run('best-practice-for-date', rule, {
     { code: `const year = 2022; const month = 11; const date = 31; new Date(year, month, date)` },
   ],
   invalid: [
-    { code: 'new Date("2022/12/31")', errors: [ { message: errorNewDate } ] },
+    { code: 'new Date("2022/12/31")', errors: [ { message: errorNewDate } ], output: 'new Date(2022, 12 - 1, 31)' },
     { code: 'const arg = "2022/12/31"; new Date(arg)', errors: [ { message: errorNewDate } ] },
-    { code: 'Date.parse("2022/12/31")', errors: [ { message: errorDateParse } ] },
+    { code: 'Date.parse("2022/12/31")', errors: [ { message: errorDateParse } ], output: 'new Date(2022, 12 - 1, 31).getTime()' },
     { code: 'const arg = "2022/12/31"; Date.parse(arg)', errors: [ { message: errorDateParse } ] },
   ]
 })