eslint-plugin-smarthr 0.2.2 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.5](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.4...v0.2.5) (2022-09-08)
+
+
+### Bug Fixes
+
+* require-import, prohibit-import: report message の一部でテンプレート文字列がそのまま出力されてしまう事があるバグを修正 ([#29](https://github.com/kufu/eslint-plugin-smarthr/issues/29)) ([b805f90](https://github.com/kufu/eslint-plugin-smarthr/commit/b805f90cd39b1aa4b95cbfbd983c5ff1c61f8afe))
+* 画像系コンポーネントが代替テキスト属性を持つかチェックする際にエラーになるパターンを修正 ([#30](https://github.com/kufu/eslint-plugin-smarthr/issues/30)) ([bcd1044](https://github.com/kufu/eslint-plugin-smarthr/commit/bcd1044d7532531015a279520ed8eda582227492))
+
+### [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)
 
 

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.2",
+  "version": "0.2.5",
   "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$',
@@ -41,7 +42,18 @@ module.exports = {
           }
 
           if (c.type === 'JSXElement') {
-            if (c.openingElement.attributes.some((a) => (['visuallyHiddenText', 'alt'].includes(a.name.name) && !!a.value.value))) {
+            // // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
+            if (c.openingElement.name.name.match(/SmartHRLogo$/)) {
+              return true
+            }
+            
+            if (c.openingElement.attributes.some((a) =>  {
+              if (!['visuallyHiddenText', 'alt'].includes(a.name.name)) {
+                return false
+              }
+
+              return (!!a.value.value || a.value.type === 'JSXExpressionContainer')
+            })) {
               return true
             }
 

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

@@ -21,7 +21,7 @@ module.exports = {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
         if ((node.name.name || '').match(/(img|image)$/i)) { // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
-          const alt = node.attributes.find((a) => a.name.name === 'alt')
+          const alt = node.attributes.find((a) => a.name?.name === 'alt')
 
           let message = ''
 

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/format-import-path/README.md

@@ -7,7 +7,7 @@
 
 ## config
 
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
+- tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
 - ドメインを識別するために以下の設定を記述する必要があります
   - globalModuleDir
     - 全体で利用するファイルを収めているディレクトリを相対パスで指定します

package/rules/no-import-other-domain/README.md

@@ -6,7 +6,7 @@
 
 ## config
 
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
+- tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
 - ドメインを識別するために以下の設定を記述する必要があります
   - globalModuleDir
     - 全体で利用するファイルを収めているディレクトリを相対パスで指定します

package/rules/prohibit-import/index.js

@@ -90,7 +90,7 @@ module.exports = {
                 node,
                 messageId: 'prohibit_import',
                 data: {
-                  message: reportMessage ? reportMessage.replace('{{module}}', node.source.value).replace('{{export}}', useImported) : defaultReportMessage(node.source.value, useImported)
+                  message: reportMessage ? reportMessage.replaceAll('{{module}}', node.source.value).replaceAll('{{export}}', useImported) : defaultReportMessage(node.source.value, useImported)
                 },
               });
             }

package/rules/redundant-name/README.md

@@ -5,7 +5,7 @@
 
 ## config
 
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
+- tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
 - 以下の設定を行えます。全て省略可能です。
   - ignoreKeywords
     - ディレクトリ名から生成されるキーワードに含めたくない文字列を指定します

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 }}',
@@ -403,7 +406,7 @@ module.exports = {
   },
   create(context) {
     if (!rootPath) {
-      throw new Error('tsconfig.json の compilerOptions.paths に `"@/*": ["any_path/*"]` 形式でフロントエンドのroot dir を指定してください')
+      throw new Error('tsconfig.json の compilerOptions.paths に `@/*`、もしくは `~/*` 形式でフロントエンドのroot dir を指定してください(例: `"@/*": ["./any_path/*"]`)')
     }
 
     let rules = {}
@@ -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/README.md

@@ -1,6 +1,6 @@
 # smarthr/require-barrel-import
 
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
+- tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
 - importした対象が本来exportされているべきであるbarrel(index.tsなど)が有る場合、import pathの変更を促します
   - 例: Page/parts/Menu/Item の import は Page/parts/Menu から行わせたい
 - ディレクトリ内のindexファイルを捜査し、対象を決定します

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/rules/require-import/index.js

@@ -83,7 +83,7 @@ module.exports = {
                 node,
                 messageId: 'require_import',
                 data: {
-                  message: reportMessage ? reportMessage.replace('{{module}}', actualTarget).replace('{{export}}', item) : defaultReportMessage(actualTarget, item)
+                  message: reportMessage ? reportMessage.replaceAll('{{module}}', actualTarget).replaceAll('{{export}}', item) : defaultReportMessage(actualTarget, item)
                 },
               })
             }

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コンポーネントが一つだけ設置されている状態にしてください' } ] },
   ]
 })