eslint-plugin-smarthr 0.2.24 → 0.2.25

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.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)
 
 

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.24",
+  "version": "0.2.25",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

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/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を利用してください` } ] },
+  ]
+})