eslint-plugin-smarthr 0.2.1 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.2.4](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.3...v0.2.4) (2022-08-30)
+
+
+### Features
+
+* ruleを更新する ([#27](https://github.com/kufu/eslint-plugin-smarthr/issues/27)) ([1ec7783](https://github.com/kufu/eslint-plugin-smarthr/commit/1ec7783395c9dafa547c453724f3671df489997b))
+
+### [0.2.3](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.2...v0.2.3) (2022-08-26)
+
+
+### Bug Fixes
+
+* a11y-xxxx: styled(Hoge)の実行結果を変数に代入しないパターンに対応する ([#26](https://github.com/kufu/eslint-plugin-smarthr/issues/26)) ([0bb0259](https://github.com/kufu/eslint-plugin-smarthr/commit/0bb02595a3be35802c1fe8bc41011fd1e55bf319))
+
+### [0.2.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.1...v0.2.2) (2022-08-18)
+
+
+### Bug Fixes
+
+* redundant-name rule の allowedNames オプションが適用されないバグがあったため修正する ([#23](https://github.com/kufu/eslint-plugin-smarthr/issues/23)) ([86a7bc5](https://github.com/kufu/eslint-plugin-smarthr/commit/86a7bc548398261885f31c75b56d8edffe5017c3))
+
 ### [0.2.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.0...v0.2.1) (2022-08-15)
 
 

package/libs/common.js

@@ -28,7 +28,7 @@ const rootPath = (() => {
     return ''
   }
 
-  const p = (replacePaths['@/'] || [])[0]
+  const p = (replacePaths['@/'] || replacePaths['~/'] || [])[0]
 
   if (!p) {
     return ''

package/libs/format_styled_components.js

@@ -1,3 +1,31 @@
+const getExtendedComponentName = (node) => {
+  if (!node.parent) {
+    return null
+  }
+
+  return node.parent.id?.name || getExtendedComponentName(node.parent)
+}
+const getBaseComponentName = (node) => {
+  if (!node) {
+    return null
+  }
+
+  if (node.type === 'CallExpression') {
+    if (node.callee.name === 'styled') {
+      return node.arguments[0].name
+    }
+    if (node.callee.object?.name === 'styled') {
+      return node.callee.property.name
+    }
+  }
+
+  if (node?.object?.name === 'styled') {
+    return node.property.name
+  }
+
+  return getBaseComponentName(node.parent)
+}
+
 const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
   ImportDeclaration: (node) => {
     if (node.source.value !== 'styled-components') {
@@ -17,40 +45,29 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
     }
   },
   TaggedTemplateExpression: (node) => {
-    const { tag } = node
-    const base = (() => {
-      if (tag.type === 'CallExpression' && tag.callee.name === 'styled') {
-        return tag.arguments[0].name
-      }
-
-      if (tag?.object?.name === 'styled') {
-        return tag.property.name
-      }
+    const extended = getExtendedComponentName(node)
 
-      return null
-    })()
+    if (extended) {
+      const base = getBaseComponentName(node.tag)
 
-    if (!base) {
-      return
-    }
+      if (base) {
+        Object.entries(EXPECTED_NAMES).forEach(([b, e]) => {
+          if (base.match(new RegExp(b))) {
+            const extendedregex = new RegExp(e)
 
-    const extended = node.parent.id.name
-
-    Object.entries(EXPECTED_NAMES).forEach(([b, e]) => {
-      if (base.match(new RegExp(b))) {
-        const extendedregex = new RegExp(e)
-
-        if (!extended.match(extendedregex)) {
-          context.report({
-            node: node.parent,
-            messageId: 'format-styled-components',
-            data: {
-              message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
-            },
-          });
-        }
+            if (!extended.match(extendedregex)) {
+              context.report({
+                node: node.parent,
+                messageId: 'format-styled-components',
+                data: {
+                  message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
+                },
+              });
+            }
+          }
+        })
       }
-    })
+    }
   },
 })
 

package/package.json

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

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

@@ -1,6 +1,7 @@
 const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_NAMES = {
+  'SmartHRLogo$': 'SmartHRLogo$',
   '(b|B)utton$': 'Button$',
   'Anchor$': 'Anchor$',
   'Link$': 'Link$',
@@ -35,23 +36,17 @@ module.exports = {
           return
         }
 
-        const recursiveSearch = (c) => {
-          if (['JSXText', 'JSXExpressionContainer'].includes(c.type)) {
-            return true
-          }
-
-          if (c.type === 'JSXElement') {
-            if (c.openingElement.attributes.some((a) => (['visuallyHiddenText', 'alt'].includes(a.name.name) && !!a.value.value))) {
-              return true
-            }
-
-            if (c.children && filterFalsyJSXText(c.children).some(recursiveSearch)) {
-              return true
-            }
-          }
-
-          return false
-        }
+        const recursiveSearch = (c) => (
+          ['JSXText', 'JSXExpressionContainer'].includes(c.type) ||
+          (
+            c.type === 'JSXElement' && (
+              // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
+              c.openingElement.name.name.match(/SmartHRLogo$/) ||
+              c.openingElement.attributes.some((a) => (['visuallyHiddenText', 'alt'].includes(a.name.name) && !!a.value.value)) ||
+              (c.children && filterFalsyJSXText(c.children).some(recursiveSearch))
+            )
+          )
+        ) 
 
         const child = filterFalsyJSXText(parentNode.children).find(recursiveSearch)
 

package/rules/a11y-trigger-has-button/index.js

@@ -47,7 +47,21 @@ module.exports = {
           return
         }
 
-        filterFalsyJSXText(parentNode.children).forEach((c) => {
+        const children = filterFalsyJSXText(parentNode.children)
+
+        if (children.length > 1) {
+          context.report({
+            node,
+            messageId: 'a11y-trigger-has-button',
+            data: {
+              message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください`,
+            },
+          })
+
+          return
+        }
+
+        children.forEach((c) => {
           // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
           if (c.type === 'JSXExpressionContainer') {
             return false
@@ -56,7 +70,7 @@ module.exports = {
           if (
             c.type !== 'JSXElement' ||
             !c.openingElement.name.name.match(/(b|B)utton$/) ||
-            c.openingElement.name.name.match(/AnchorButton?/)
+            c.openingElement.name.name.match(/AnchorButton$/)
           ) {
             context.report({
               node: c,

package/rules/redundant-name/index.js

@@ -16,7 +16,6 @@ const DEFAULT_CONFIG = {
     ],
     SUFFIX: ['Props', 'Type'],
   },
-  typeProperty: COMMON_DEFAULT_CONFIG,
   file: COMMON_DEFAULT_CONFIG,
   property: COMMON_DEFAULT_CONFIG,
   function: COMMON_DEFAULT_CONFIG,
@@ -62,7 +61,6 @@ const SCHEMA = [
         ...DEFAULT_SCHEMA_PROPERTY,
         suffix: { type: 'array', items: { type: 'string' } },
       },
-      typeProperty: DEFAULT_SCHEMA_PROPERTY,
       file: DEFAULT_SCHEMA_PROPERTY,
       property: DEFAULT_SCHEMA_PROPERTY,
       function: DEFAULT_SCHEMA_PROPERTY,
@@ -89,7 +87,6 @@ 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
@@ -203,7 +200,7 @@ const handleReportBetterName = ({
 }
 
 const generateTypeRedundant = (args) => {
-  const { context } = args
+  const { context, filename } = args
   const key = 'type'
   const redundantKeywords = generateRedundantKeywords({ args, key })
   const option = args.option[key]
@@ -211,6 +208,14 @@ const generateTypeRedundant = (args) => {
 
   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
@@ -254,8 +259,7 @@ const generateTypeRedundant = (args) => {
 }
 
 const generateTypePropertyRedundant = (args) => {
-  const key = 'typeProperty'
-
+  const key = 'property'
   return handleReportBetterName({
     ...args,
     key,
@@ -266,7 +270,7 @@ const generateTypePropertyRedundant = (args) => {
   })
 }
 const generateTypePropertyFunctionParamsRedundant = (args) => {
-  const key = 'typeProperty'
+  const key = 'property'
   const redundant = handleReportBetterName({
     ...args,
     key,
@@ -290,7 +294,15 @@ const generatePropertyRedundant = (args) => {
     option: args.option[key],
     redundantKeywords: generateRedundantKeywords({ args, key }),
     defaultBetterName: 'item',
-    fetchName: (node) => node.key.name,
+    fetchName: (node) => {
+      // argumentsとしてわたされたobjectの展開などの場合は許可する
+      // このファイル内で修正すべき場合などは冗長な名前を修正するべき場合はtype propertyなどで判断出来る
+      if (node.parent.type === 'ObjectPattern') {
+        return null
+      }
+
+      return node.key.name
+    },
   })
 }
 
@@ -383,7 +395,6 @@ module.exports = {
       'file-name': ' {{ message }}',
       'type-name': '{{ message }}',
       'type-name/invalid-suffix': '{{ message }}',
-      'typeProperty-name': '{{ message }}',
       'property-name': ' {{ message }}',
       'function-name': ' {{ message }}',
       'functionParams-name': ' {{ message }}',
@@ -441,9 +452,10 @@ module.exports = {
       addRule('TSTypeAliasDeclaration', generateTypeRedundant(args))
       // addRule('TSInterfaceDeclaration', generateTypeRedundant(args)) // 必要になったら実装する
     }
-    if (option.typeProperty) {
+    if (option.property) {
       const typePropRedundant = generateTypePropertyRedundant(args)
       const typeFuncParamRedundant = generateTypePropertyFunctionParamsRedundant(args)
+      const redundant = generatePropertyRedundant(args)
 
       addRule('TSPropertySignature', (node) => {
         typePropRedundant(node)
@@ -452,10 +464,6 @@ module.exports = {
           typeFuncParamRedundant(node.typeAnnotation.typeAnnotation)
         }
       })
-    }
-    if (option.property) {
-      const redundant = generatePropertyRedundant(args)
-
       addRule('Property', redundant)
       addRule('PropertyDefinition', redundant)
     }

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

@@ -104,7 +104,7 @@ module.exports = {
           sourceValue = sources.join('/')
         }
 
-        if (barrel) {
+        if (barrel && !barrel.match(new RegExp(`^${rootPath}/index\.`))) {
           barrel = calculateReplacedImportPath(barrel)
 
           context.report({

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

@@ -26,6 +26,7 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const HogeLink = styled(Link)``' },
     { code: 'const HogeButton = styled(Button)``' },
     { code: 'const FugaAnchor = styled(HogeAnchor)``' },
+    { code: 'const FugaSmartHRLogo = styled(SmartHRLogo)``' },
     {
       code: `<a>ほげ</a>`,
     },
@@ -89,6 +90,12 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     {
       code: `<a><span>{any}</span></a>`,
     },
+    {
+      code: `<a><SmartHRLogo /></a>`,
+    },
+    {
+      code: `<a><PrefixSmartHRLogo /></a>`,
+    },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
@@ -98,6 +105,8 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Fuga = styled(SmartHRLogo)``', errors: [ { message: `Fugaを正規表現 "/SmartHRLogo$/" がmatchする名称に変更してください` } ]  },
     {
       code: `<a><img src="hoge.jpg" /></a>`,
       errors: [{ message: defaultErrorMessage }]
@@ -138,5 +147,9 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
       code: `<button><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></button>`,
       errors: [{ message: defaultErrorMessage }]
     },
+    {
+      code: `<button><SmartHRLogoSuffix /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
   ]
 })

package/test/a11y-trigger-has-button.js

@@ -33,18 +33,20 @@ ruleTester.run('a11y-trigger-has-button', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
-    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ]  },
-    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ]  },
-    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
-    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
-    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
-    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
+    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
+    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
+    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
+    { code: '<DialogTrigger><button>{hoge}</button>{hoge}</DialogTrigger>', errors: [ { message: 'DialogTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
+    { code: '<DropdownTrigger>{hoge}<span>text</span></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください' } ] },
   ]
 })