eslint-plugin-smarthr 0.2.14 → 0.2.16

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.16](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.15...v0.2.16) (2022-12-21)
+
+
+### Features
+
+* ラジオボタンにnameを強制するルールを追加 ([97792cf](https://github.com/kufu/eslint-plugin-smarthr/commit/97792cf276e3400cb6e01a01ef4cf104de5db190))
+
+
+### Bug Fixes
+
+* no-import-other-domain、require-barrel-import でignoresオプションを指定するとエラーが発生する問題を修正する ([#49](https://github.com/kufu/eslint-plugin-smarthr/issues/49)) ([8526236](https://github.com/kufu/eslint-plugin-smarthr/commit/85262365d105c1afa4fd53662825c4c51cb84531))
+* prohibit-path-within-template-literalのpathオブジェクト名の解析の際、エラーになるパターンがあったため修正する ([#48](https://github.com/kufu/eslint-plugin-smarthr/issues/48)) ([715e485](https://github.com/kufu/eslint-plugin-smarthr/commit/715e485f3679e4ca2eb9675b67b8f452f9707096))
+
+### [0.2.15](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.15) (2022-12-15)
+
+
+### Features
+
+* add prohibit-path-within-template-literal rule. ([#46](https://github.com/kufu/eslint-plugin-smarthr/issues/46)) ([1ea51a9](https://github.com/kufu/eslint-plugin-smarthr/commit/1ea51a95f0720e34729959dbc27b33a91ec2d73e))
+* ignores option for no-import-other-domain and require-barrel-import ([#45](https://github.com/kufu/eslint-plugin-smarthr/issues/45)) ([559fdcf](https://github.com/kufu/eslint-plugin-smarthr/commit/559fdcf9d075e5fe29a48ab2f2d4f1e5d1a33201))
+
+
+### Bug Fixes
+
+* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([#43](https://github.com/kufu/eslint-plugin-smarthr/issues/43)) ([6de9618](https://github.com/kufu/eslint-plugin-smarthr/commit/6de961831a9f9e0e93eeeebb80e56ecb60d9a2ff))
+
 ### [0.2.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
 
 ### Features

package/README.md

@@ -12,6 +12,7 @@
 - [prohibit-export-array-type](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-export-array-type)
 - [prohibit-file-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-file-name)
 - [prohibit-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-import)
+- [prohibit-path-within-template-literal](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-path-within-template-literal)
 - [redundant-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/redundant-name)
 - [require-barrel-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-barrel-import)
 - [require-declaration](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-declaration)

package/libs/common_domain.js

@@ -13,8 +13,9 @@ const calculateDomainContext = (context) => {
     throw new Error('tsconfig.json の compilerOptions.paths に `"@/*": ["any_path/*"]` 形式でフロントエンドのroot dir を指定してください')
   }
 
+  const filename = context.getFilename()
   const parentDir = (() => {
-    const dir = context.getFilename().split('/')
+    const dir = filename.split('/')
     dir.pop()
     return dir.join('/')
   })()
@@ -23,6 +24,7 @@ const calculateDomainContext = (context) => {
   return {
     option: context.options[0],
     parentDir,
+    filename,
     humanizeParentDir,
     isTarget: humanizeParentDir !== parentDir,
   }

package/package.json

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

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

@@ -0,0 +1,58 @@
+# smarthr/a11y-radio-has-bane-attribute
+
+- ラジオボタンに name 属性を設定することを強制するルールです。
+  - name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-radio-has-name-attribute': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<RadioButton />
+```
+
+```jsx
+<Input type="radio" />
+```
+
+```jsx
+<input type="radio" />
+```
+
+```jsx
+import styled from 'styled-components';
+
+const StyledHoge = styled.input``;
+const StyledFuga = styled(Input)``;
+const StyledPiyo = styled(RadioButton)``;
+```
+
+## ✅ Correct
+
+```jsx
+<RadioButton name="hoge" />
+```
+
+```jsx
+<Input type="radio" name="hoge" />
+```
+
+```jsx
+<input type="radio" name="hoge" />
+```
+
+```jsx
+import styled from 'styled-components';
+
+const StyledInput = styled.input``;
+const StyledInput = styled(Input)``;
+const StyledRadioButton = styled(RadioButton)``;
+```

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

@@ -0,0 +1,49 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components');
+
+const EXPECTED_NAMES = {
+  RadioButton$: 'RadioButton$',
+  '(i|I)nput$': 'Input$',
+};
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-radio-has-name-attribute': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const name = node.name.name || '';
+        const isRadio =
+          (name.match(/(i|I)nput$/) &&
+            node.attributes.some(
+              (a) => a.name?.name === 'type' && a.value.value === 'radio'
+            )) ||
+          name.match(/RadioButton$/);
+
+        if (!isRadio) return;
+
+        const hasName = node.attributes.some(
+          (attribute) => attribute?.name?.name === 'name'
+        );
+
+        if (!hasName) {
+          context.report({
+            node,
+            messageId: 'a11y-radio-has-name-attribute',
+            data: {
+              message:
+                'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。',
+            },
+          });
+        }
+      },
+    };
+  },
+};
+module.exports.schema = [];

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

@@ -56,6 +56,13 @@ const DOMAIN_RULE_ARGS = {
       'error', // 'warn', 'off'
       {
         ...DOMAIN_RULE_ARGS,
+        // ignores: ['\\/test\\/'], // 除外したいファイルの正規表現
+        // allowedImports: {
+        //   '/any/path/': { // 正規表現でチェックするファイルを指定
+        //     // import制御するファイル (相対パスを指定する場合、.eslintrc.js を基準とする)
+        //     '@/hoge/fuga': true // ['abc', 'def'] と指定すると個別に指定
+        //   }
+        // },
         // analyticsMode: 'all', // 'same-domain', 'another-domain'
       }
     ]

package/rules/no-import-other-domain/index.js

@@ -8,6 +8,25 @@ const SCHEMA = [
     type: 'object',
     properties: {
       ...BASE_SCHEMA_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: [] },
       analyticsMode: { type: 'string', default: 'none' }, // 'none' | 'all' | 'same-domain' | 'another-domain'
     },
     additionalProperties: false,
@@ -27,7 +46,7 @@ module.exports = {
     const calcContext = calculateDomainContext(context)
 
     // 対象外ファイル
-    if (!calcContext.isTarget) {
+    if (!calcContext.isTarget || calcContext.option.ignores && calcContext.option.ignores.some((i) => !!calcContext.filename.match(new RegExp(i)))) {
       return {}
     }
 
@@ -36,8 +55,49 @@ module.exports = {
       humanizeParentDir,
     } = calcContext
 
+    const targetPathRegexs = Object.keys(option?.allowedImports || {})
+    const targetAllowedImports = targetPathRegexs.filter((regex) => !!calcContext.filename.match(new RegExp(regex)))
+
     return {
       ImportDeclaration: (node) => {
+        let isDenyPath = false
+        let deniedModules = []
+
+        targetAllowedImports.forEach((allowedKey) => {
+          const allowedOption = option.allowedImports[allowedKey]
+          const targetModules = Object.keys(allowedOption)
+
+          targetModules.forEach((targetModule) => {
+            const allowedModules = allowedOption[targetModule] || true
+            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${process.cwd()}/${targetModule}`)
+            let sourceValue = node.source.value
+
+            if (actualTarget[0] === '/') {
+              sourceValue = path.resolve(`${calcContext.parentDir}/${sourceValue}`)
+            }
+
+            if (actualTarget !== sourceValue) {
+              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))
+            }
+          })
+        })
+
+        if (isDenyPath && deniedModules[0] === true) {
+          return
+        }
+
+        if (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0) {
+          return
+        }
+
         const { importPath, dirs, paths, humanizeImportPath, isGlobalModuleImport, isModuleImport, isDomainImport } = calculateDomainNode(calcContext, node)
         const hit = !isGlobalModuleImport && !isModuleImport && !isDomainImport
 
@@ -58,14 +118,16 @@ module.exports = {
         }
 
         if (hit) {
+          deniedModules = [...new Set(deniedModules.flat())]
+
           context.report({
             node,
             messageId: 'no-import-other-domain',
             data: {
-              message: `別ドメインから ${importPath} がimportされています。`,
+              message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。`,
             },
           })
-        } 
+        }
       },
     }
   },

package/rules/prohibit-path-within-template-literal/README.md

@@ -0,0 +1,42 @@
+# smarthr/prohibit-path-within-template-literal
+
+- URIを管理するオブジェクト(path, localPath, GlobalPath, PATH, etc...)をtemplate-literalで囲むことを禁止するルールです
+- query-stringの生成やパスの一部などをtemplate-literalで結合することは責務を拡散させることになります
+- それらの責務を指定したオブジェクトに集中させたい場合などに利用出来ます
+  - 例
+    - NG: `\`${path.xxx}?${queryString}\``
+      - pathオブジェクト外でqueryStringが生成されてしまっており、どのようなqueryStringが設定される可能性があるか？という情報が拡散してしまう
+    - OK: `path.xxx({ xxxx: 'yyyyy' })`
+      - path内でqueryStringを生成するため、URL生成の情報が集約される
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/prohibit-path-within-template-literal': [
+      'error', // 'warn', 'off'
+      // {
+      //   pathRegex: '((p|P)ath|PATH)$', // URIを管理するオブジェクトの名称を判定する正規表現
+      // },
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+\`${path.any.hoge}\?${queryString}`
+```
+```jsx
+\`${path.any.hoge(ANY)}\${HOGE}`
+```
+```jsx
+\`${path.any.fuga}\`
+```
+
+## ✅ Correct
+```jsx
+path.any.hoge(queryString)
+```

package/rules/prohibit-path-within-template-literal/index.js

@@ -0,0 +1,60 @@
+const recursiveFetchName = (obj, chained = '') => {
+  const o = obj.callee || obj
+  const name = o?.name || o?.property?.name || ''
+  const nextChained = chained ? `${name}.${chained}` : name
+
+  if (o.property && o.object) {
+    return recursiveFetchName(o.object, nextChained)
+  }
+
+  return [name, nextChained]
+}
+
+const recursiveFetchRootNameIsPath = (obj, regex) => {
+  const [name, chained] = recursiveFetchName(obj, '')
+
+  return name.match(regex) ? chained : null
+}
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      pathRegex: { type: 'string', default: '((p|P)ath|PATH)$' },
+    },
+    additionalProperties: false,
+  },
+]
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'prohibit-path-within-template-literal': '{{ message }}',
+    },
+    schema: SCHEMA,
+  },
+  create(context) {
+    const option = context.options[0]
+    const nameRegex = new RegExp(option?.pathRegex || SCHEMA[0].properties.pathRegex.default)
+
+    return {
+      TemplateLiteral: (node) => {
+        node.expressions.forEach((exp) => {
+          const name = recursiveFetchRootNameIsPath(exp, nameRegex)
+
+          if (name) {
+            context.report({
+              node: exp,
+              messageId: 'prohibit-path-within-template-literal',
+              data: {
+                message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })`,
+              },
+            });
+          }
+        })
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/require-barrel-import/README.md

@@ -10,7 +10,16 @@
 ```js
 {
   rules: {
-    'smarthr/require-barrel-import': 'error',
+    'smarthr/require-barrel-import': [
+      'error',
+      // ignores: ['\\/test\\/'], // 除外したいファイルの正規表現
+      // allowedImports: {
+      //   '/any/path/': { // 正規表現でチェックするファイルを指定
+      //     // import制御するファイル (相対パスを指定する場合、.eslintrc.js を基準とする)
+      //     '@/hoge/fuga': true // ['abc', 'def'] と指定すると個別に指定
+      //   }
+      // },
+    ],
   },
 }
 ```

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

@@ -44,6 +44,33 @@ const calculateReplacedImportPath = (source) => {
   }, 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,
+  }
+]
 
 module.exports = {
   meta: {
@@ -51,20 +78,65 @@ module.exports = {
     messages: {
       'require-barrel-import': '{{ message }}',
     },
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
     const filename = context.getFilename()
 
+    if ((option.ignores || []).some((i) => !!filename.match(new RegExp(i)))) {
+      return {}
+    }
+
     const dir = (() => {
       const d = filename.split('/')
       d.pop()
 
       return d.join('/')
     })()
+    const targetPathRegexs = Object.keys(option?.allowedImports || {})
+    const targetAllowedImports = targetPathRegexs.filter((regex) => !!filename.match(new RegExp(regex)))
 
     return {
       ImportDeclaration: (node) => {
+        let isDenyPath = false
+        let deniedModules = []
+
+        targetAllowedImports.forEach((allowedKey) => {
+          const allowedOption = option.allowedImports[allowedKey]
+          const targetModules = Object.keys(allowedOption)
+
+          targetModules.forEach((targetModule) => {
+            const allowedModules = allowedOption[targetModule] || true
+            const actualTarget = targetModule[0] !== '.' ? targetModule : path.resolve(`${process.cwd()}/${targetModule}`)
+            let sourceValue = node.source.value
+
+            if (actualTarget[0] === '/') {
+              sourceValue = path.resolve(`${dir}/${sourceValue}`)
+            }
+
+            if (actualTarget !== sourceValue) {
+              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))
+            }
+          })
+        })
+
+        if (isDenyPath && deniedModules[0] === true) {
+          return
+        }
+
+        if (!isDenyPath && deniedModules.length === 1 && deniedModules[0].length === 0) {
+          return
+        }
+
         let sourceValue = node.source.value
 
         if (sourceValue[0] === '.') {
@@ -106,12 +178,14 @@ module.exports = {
 
         if (barrel && !barrel.match(new RegExp(`^${rootPath}/index\.`))) {
           barrel = calculateReplacedImportPath(barrel)
+          const noExt = barrel.replace(/\/index\.(ts|js)x?$/, '')
+          deniedModules = [...new Set(deniedModules.flat())]
 
           context.report({
             node,
             messageId: 'require-barrel-import',
             data: {
-              message: `${barrel.replace(/\/index\.(ts|js)x?$/, '')} からimportするか、${barrel} を削除してください`,
+              message: deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`,
             },
           });
         }
@@ -119,4 +193,4 @@ module.exports = {
     }
   },
 }
-module.exports.schema = []
+module.exports.schema = SCHEMA

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

@@ -0,0 +1,36 @@
+const rule = require('../rules/a11y-radio-has-name-attribute');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('a11y-radio-has-name-attribute', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeInput = styled.input``' },
+    { code: 'const HogeInput = styled(Input)``' },
+    { code: 'const HogeRadioButton = styled(RadioButton)``' },
+    { code: '<input type="radio" name="hoge" />' },
+    { code: '<HogeInput type="radio" name="hoge" />' },
+    { code: '<HogeRadioButton name="hoge" />' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
+    { code: '<input type="radio" />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
+    { code: '<HogeInput type="radio" />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
+    { code: '<HogeRadioButton />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
+  ],
+});

package/test/prohibit-path-within-template-literal.js

@@ -0,0 +1,30 @@
+const rule = require('../rules/prohibit-path-within-template-literal')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2015
+  },
+})
+
+ruleTester.run('prohibit-path-within-template-literal', rule, {
+  valid: [
+    { code: 'path.hoge', },
+    { code: 'path.fuga()', },
+    { code: 'localPath.any.aaa("hoge")', },
+    { code: 'PATH.some({ x })', },
+    { code: 'hoge.some({ x })', options: [{ pathRegex: '^hoge$' }] },
+  ],
+  invalid: [
+    {
+      code: '`${path.hoge}`',
+      errors: [{ message: 'path.hogeは `` で囲まないでください。queryStringを結合するなどのURL生成は path.hoge 内で行います。 (例: path.hoge({ query: { hoge: \'abc\' } })' }]
+    },
+    {
+      code: '`${ABC.hoge()}${hogehoge}`',
+      options: [{ pathRegex: '^ABC$' }],
+      errors: [{ message: 'ABC.hogeは `` で囲まないでください。queryStringを結合するなどのURL生成は ABC.hoge 内で行います。 (例: ABC.hoge({ query: { hoge: \'abc\' } })' }]
+    },
+  ]
+})