eslint-plugin-smarthr 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

package/libs/common.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.3",
+  "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
@@ -262,8 +259,7 @@ const generateTypeRedundant = (args) => {
 }
 
 const generateTypePropertyRedundant = (args) => {
-  const key = 'typeProperty'
-
+  const key = 'property'
   return handleReportBetterName({
     ...args,
     key,
@@ -274,7 +270,7 @@ const generateTypePropertyRedundant = (args) => {
   })
 }
 const generateTypePropertyFunctionParamsRedundant = (args) => {
-  const key = 'typeProperty'
+  const key = 'property'
   const redundant = handleReportBetterName({
     ...args,
     key,
@@ -298,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
+    },
   })
 }
 
@@ -391,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 }}',
@@ -449,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)
@@ -460,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コンポーネントが一つだけ設置されている状態にしてください' } ] },
   ]
 })