eslint-plugin-smarthr 0.2.15 → 0.2.16

package/CHANGELOG.md

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

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.15",
+  "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/prohibit-path-within-template-literal/index.js

@@ -1,6 +1,6 @@
 const recursiveFetchName = (obj, chained = '') => {
   const o = obj.callee || obj
-  const name = o.name || o.property.name || ''
+  const name = o?.name || o?.property?.name || ''
   const nextChained = chained ? `${name}.${chained}` : name
 
   if (o.property && o.object) {

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を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
+  ],
+});