eslint-plugin-smarthr 0.2.23 → 0.2.25

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.25](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.24...v0.2.25) (2023-04-04)
+
+
+### Features
+
+* best-practice-for-remote-trigger-action-dialog ルールを追加 ([#60](https://github.com/kufu/eslint-plugin-smarthr/issues/60)) ([d2bbeef](https://github.com/kufu/eslint-plugin-smarthr/commit/d2bbeeff4d2f48133b2b44f956985cf18aae9800))
+
+### [0.2.24](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.23...v0.2.24) (2023-03-10)
+
+
+### Features
+
+* next.js, react-routerのLinkコンポーネントに対応するオプションを追加 ([#59](https://github.com/kufu/eslint-plugin-smarthr/issues/59)) ([88996e8](https://github.com/kufu/eslint-plugin-smarthr/commit/88996e88dfd4c14bfaaa36594663737d47f1f029))
+
 ### [0.2.23](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.22...v0.2.23) (2023-03-09)
 
 ### [0.2.22](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.21...v0.2.22) (2023-01-27)

package/README.md

@@ -7,6 +7,7 @@
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
+- [best-practice-for-remote-trigger-action-dialog](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-remote-trigger-action-dialog)
 - [format-import-path](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-translate-component)
 - [jsx-start-with-spread-attributes](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/jsx-start-with-spread-attributes)

package/package.json

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

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -12,7 +12,13 @@
 ```js
 {
   rules: {
-    'smarthr/a11y-anchor-has-href-attribute': 'error', // 'warn', 'off'
+    'smarthr/a11y-anchor-has-href-attribute': [
+      'error', // 'warn', 'off'
+      // {
+      //   nextjs: true,
+      //   react_router: true,
+      // },
+    ]
   },
 }
 ```
@@ -32,4 +38,10 @@
 <a href="https://www.google.com/search">any</a>
 <XxxAnchor href={hoge}>any</XxxAnchor>
 <XxxLink href={undefined}>any</XxxLink>
+
+// nextjs: true
+<Link href={hoge}><a>any</a></Link>
+
+// react_router: true
+<Link to={hoge}>any</Link>
 ```

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -7,34 +7,84 @@ const EXPECTED_NAMES = {
 }
 
 const REGEX_TARGET = /(Anchor|Link|^a)$/
-const findHref = (a) => a.name?.name == 'href'
+const check = (node, option) => {
+  let result = baseCheck(node)
+
+  if (
+    result && (
+      (option.nextjs && !nextCheck(node)) ||
+      (option.react_router && !reactRouterCheck(node))
+    )
+  ) {
+    result = null
+  }
+
+  return result
+}
+const baseCheck = (node) => {
+  const nodeName = node.name.name || ''
+
+  if (nodeName.match(REGEX_TARGET)) {
+    const href = node.attributes.find((a) => a.name?.name == 'href')
+
+    if (!href || !href.value) {
+      return nodeName
+    }
+  }
+
+  return false
+}
+const nextCheck = (node) => {
+  // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
+  const target = node.parent.parent.openingElement
+
+  if (target) {
+    return baseCheck(target)
+  }
+
+  return false
+}
+const reactRouterCheck = (node) => {
+  const href = node.attributes.find((a) => a.name?.name == 'to')
+
+  return !href || !href.value
+}
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      nextjs: { type: 'boolean' },
+      react_router: { type: 'boolean' },
+    },
+    additionalProperties: false,
+  }
+]
 
 module.exports = {
   meta: {
     type: 'problem',
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
+
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || ''
-
-        if (nodeName.match(REGEX_TARGET)) {
-          const href = node.attributes.find(findHref)
+        const nodeName = check(node, option)
 
-          if (!href || !href.value) {
-            context.report({
-              node,
-              message: `${nodeName} に href 属性を設定してください。
+        if (nodeName) {
+          context.report({
+            node,
+            message: `${nodeName} に href 属性を設定してください。
  - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
  - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
  - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`,
-            })
-          }
+          })
         }
       },
     }
   },
 }
-module.exports.schema = []
+module.exports.schema = SCHEMA

package/rules/best-practice-for-remote-trigger-action-dialog/README.md

@@ -0,0 +1,31 @@
+# smarthr/best-practice-for-remote-trigger-action-dialog
+
+- RemoteDialogTrigger, RemoteTriggerActionDialog のベストプラクティスをチェックするルールです
+  - `id` もしくは `targetId` にリテラルな文字列以外が設定できなくなります
+  - 変数なども使えません
+  - これは対応するTriggerとDialogをわかりやすくするためです（検索などが容易になります）
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-remote-trigger-action-dialog': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+<RemoteDialogTrigger targetId={id}>open.</RemoteDialogTrigger>
+<RemoteTriggerActionDialog {...args} id={'hoge'}>content.</RemoteTriggerActionDialog>
+```
+
+## ✅ Correct
+
+
+```js
+<RemoteDialogTrigger targetId="help_dialog">open.</RemoteDialogTrigger>
+<RemoteTriggerActionDialog {...args} id="help_dialog">content.</RemoteTriggerActionDialog>
+```

package/rules/best-practice-for-remote-trigger-action-dialog/index.js

@@ -0,0 +1,41 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components');
+
+const EXPECTED_NAMES = {
+  'RemoteDialogTrigger$': 'RemoteDialogTrigger$',
+  'RemoteTrigger(.+)Dialog$': 'RemoteTrigger(.+)Dialog$',
+}
+
+const REGEX_REMOTE_TRIGGER_DIALOG = /RemoteTrigger(.+)Dialog$/
+const REGEX_REMOTE_DIALOG_TRIGGER = /RemoteDialogTrigger$/
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name || '';
+
+        const regexRemoteTriggerDialog = nodeName.match(REGEX_REMOTE_TRIGGER_DIALOG)
+
+        if (regexRemoteTriggerDialog || nodeName.match(REGEX_REMOTE_DIALOG_TRIGGER)) {
+          const attrName = regexRemoteTriggerDialog ? 'id' : 'targetId'
+          const id = node.attributes.find((a) => a.name?.name === attrName)
+
+          if (id.value.type !== 'Literal') {
+            context.report({
+              node: id,
+              message: `${nodeName}の${attrName}属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
+  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
+  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください`,
+            })
+          }
+        }
+      }
+    }
+  },
+}

package/test/a11y-anchor-has-href-attribute.js

@@ -41,6 +41,14 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     {
       code: `<Link href="hoge">ほげ</Link>`,
     },
+    {
+      code: `<Link href="hoge"><a>ほげ</a></Link>`,
+      options: [{ nextjs: true }],
+    },
+    {
+      code: `<Link to="hoge">ほげ</Link>`,
+      options: [{ react_router: true }],
+    },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -52,5 +60,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<Anchor>hoge</Anchor>`, errors: [{ message: generateErrorText('Anchor') }] },
     { code: `<HogeLink>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href="hoge"><a>hoge</a></HogeLink>`, errors: [{ message: generateErrorText('a') }] },
+    { code: `<HogeLink><a>hoge</a></HogeLink>`, options: [{ nextjs: true }], errors: [{ message: generateErrorText('a') }] },
+    { code: `<HogeLink to="hoge">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
   ]
 })

package/test/best-practice-for-remote-trigger-action-dialog.js

@@ -0,0 +1,46 @@
+const rule = require('../rules/best-practice-for-remote-trigger-action-dialog')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('best-practice-for-remote-trigger-action-dialog', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: 'const HogeRemoteDialogTrigger = styled(RemoteDialogTrigger)``' },
+    { code: 'const RemoteTriggerHogeDialog = styled(RemoteTriggerActionDialog)``' },
+    { code: '<RemoteDialogTrigger targetId="hoge">open.</RemoteDialogTrigger>' },
+    { code: '<StyledRemoteDialogTrigger targetId="fuga">open.</StyledRemoteDialogTrigger>' },
+    { code: '<RemoteTriggerActionDialog {...args} id="hoge">content.</RemoteTriggerActionDialog>' },
+    { code: '<RemoteTriggerHogeDialog {...args} id="hoge">content.</RemoteTriggerHogeDialog>' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: 'Hogeを正規表現 "/RemoteDialogTrigger$/" がmatchする名称に変更してください' } ] },
+    { code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: 'Fugaを正規表現 "/RemoteTrigger(.+)Dialog$/" がmatchする名称に変更してください' } ] },
+    { code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
+  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
+  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+    { code: '<StyledRemoteDialogTrigger targetId={"fuga"}>open.</StyledRemoteDialogTrigger>', errors: [ { message: `StyledRemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
+  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
+  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+    { code: '<RemoteTriggerHogeDialog {...args} id={hoge}>content.</RemoteTriggerHogeDialog>', errors: [ { message: `RemoteTriggerHogeDialogのid属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
+  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
+  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+    { code: '<StyldRemoteTriggerActionDialog {...args} id={"fuga"}>content.</StyldRemoteTriggerActionDialog>', errors: [ { message: `StyldRemoteTriggerActionDialogのid属性には直接文字列を指定してください。
+  - 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
+  - RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
+  - ループやDropdown以外にTriggerが設定されている場合、TriggerAndActionDialogを利用してください` } ] },
+  ]
+})