eslint-plugin-smarthr 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.
 
+## [1.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.2.0...eslint-plugin-smarthr-v1.3.0) (2025-02-21)
+
+
+### Features
+
+* tailwind-variantsの使い方をチェックするルールを追加 ([#480](https://github.com/kufu/tamatebako/issues/480)) ([1501f05](https://github.com/kufu/tamatebako/commit/1501f05e84492e7671a4dc95ef08b15360a1c309))
+
+
+### Bug Fixes
+
+* [a11y-input-has-name-attribute]Inputにreact-hook-formのregisterが指定されている場合はエラーにならないようにする ([#490](https://github.com/kufu/tamatebako/issues/490)) ([2fc6abe](https://github.com/kufu/tamatebako/commit/2fc6abe9515a06dbf7e823da556e045402298a1b))
+
 ## [1.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.1.0...eslint-plugin-smarthr-v1.2.0) (2025-01-09)
 
 

package/README.md

@@ -21,6 +21,7 @@
 - [best-practice-for-date](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-date)
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog)
+- [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=20.18.1"
+    "node": ">=20.18.2"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.14.0"
+    "typescript-eslint": "^8.19.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "71d56c769bf74139d828b181bec39fb148d9b5ca"
+  "gitHead": "3c7f6f40f11714a9dd6cb88dc243d1b6973c6a93"
 }

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

@@ -1,27 +1,42 @@
-const { generateTagFormatter } = require('../../libs/format_styled_components');
+const fs = require('fs')
+
+const JSON5 = require('json5')
+
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const OPTION = (() => {
+  const file = `${process.cwd()}/package.json`
+
+  if (!fs.existsSync(file)) {
+    return {}
+  }
+
+  const json = JSON5.parse(fs.readFileSync(file))
+  const dependencies = [...Object.keys(json.dependencies || {}), ...Object.keys(json.devDependencies || {})]
+
+  return {
+    react_hook_form: dependencies.includes('react-hook-form'),
+  }
+})()
 
 const EXPECTED_NAMES = {
   '(i|I)nput$': 'Input$',
   '(t|T)extarea$': 'Textarea$',
   '(s|S)elect$': 'Select$',
-  'InputFile$': 'InputFile$',
-  'RadioButton$': 'RadioButton$',
-  'RadioButtonPanel$': 'RadioButtonPanel$',
+  InputFile$: 'InputFile$',
+  RadioButton$: 'RadioButton$',
+  RadioButtonPanel$: 'RadioButtonPanel$',
   'Check(b|B)ox$': 'CheckBox$',
   'Combo(b|B)ox$': 'ComboBox$',
   '(Date|Wareki)Picker$': '(Date|Wareki)Picker$',
-  'TimePicker$': 'TimePicker$',
-  'DropZone$': 'DropZone$',
+  TimePicker$: 'TimePicker$',
+  DropZone$: 'DropZone$',
 }
 const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
 const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
 const INPUT_TAG_REGEX = /(i|I)nput$/
 const RADIO_BUTTON_REGEX = /RadioButton(Panel)?$/
 
-const findNameAttr = (a) => a?.name?.name === 'name'
-const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
-const findRadioInput = (a) => a.name?.name === 'type' && a.value.value === 'radio'
-
 const MESSAGE_PART_FORMAT = `"${INPUT_NAME_REGEX.toString()}"にmatchするフォーマットで命名してください`
 const MESSAGE_UNDEFINED_NAME_PART = `
  - ブラウザの自動補完が有効化されるなどのメリットがあります
@@ -38,7 +53,7 @@ const SCHEMA = [
       checkType: { type: 'string', enum: ['always', 'allow-spread-attributes'], default: 'always' },
     },
     additionalProperties: false,
-  }
+  },
 ]
 
 /**
@@ -56,25 +71,49 @@ module.exports = {
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
+        const { name, attributes } = node
+        const nodeName = name.name || ''
 
         if (nodeName.match(TARGET_TAG_NAME_REGEX)) {
-          const nameAttr = node.attributes.find(findNameAttr)
+          let nameAttr = null
+          let hasSpreadAttr = false
+          let hasReactHookFormRegisterSpreadAttr = false
+          let hasRadioInput = false
+
+          attributes.forEach((a) => {
+            if (a.type === 'JSXSpreadAttribute') {
+              hasSpreadAttr = true
+
+              if (hasReactHookFormRegisterSpreadAttr === false && a.argument?.callee?.name === 'register') {
+                hasReactHookFormRegisterSpreadAttr = true
+              }
+            } else {
+              switch (a.name?.name) {
+                case 'name': {
+                  nameAttr = a
+                  break
+                }
+                case 'type': {
+                  if (a.value.value === 'radio') {
+                    hasRadioInput = true
+                  }
+                  break
+                }
+              }
+            }
+          })
 
           if (!nameAttr) {
             if (
-              node.attributes.length === 0 ||
-              checkType !== 'allow-spread-attributes' ||
-              !node.attributes.some(findSpreadAttr)
+              !(OPTION.react_hook_form && hasReactHookFormRegisterSpreadAttr) &&
+              (attributes.length === 0 || checkType !== 'allow-spread-attributes' || !hasSpreadAttr)
             ) {
-              const isRadio =
-                nodeName.match(RADIO_BUTTON_REGEX) ||
-                (nodeName.match(INPUT_TAG_REGEX) && node.attributes.some(findRadioInput));
+              const isRadio = nodeName.match(RADIO_BUTTON_REGEX) || (nodeName.match(INPUT_TAG_REGEX) && hasRadioInput)
 
               context.report({
                 node,
                 message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
-              });
+              })
             }
           } else {
             const nameValue = nameAttr.value?.value || ''
@@ -83,12 +122,12 @@ module.exports = {
               context.report({
                 node,
                 message: `${nodeName} のname属性の値(${nameValue})${MESSAGE_NAME_FORMAT_SUFFIX}`,
-              });
+              })
             }
           }
         }
       },
-    };
+    }
   },
-};
-module.exports.schema = SCHEMA;
+}
+module.exports.schema = SCHEMA

package/rules/best-practice-for-tailwind-variants/README.md

@@ -0,0 +1,53 @@
+# smarthr/best-practice-for-tailwind-variants
+
+- tailwind-variantsの記法をチェックするルールです
+- tailwind-variantsの使い方に一定のルールを課すことで、実装のブレを無くし、レビューコストなどを下げることが目的です
+- tv関数の実行結果を格納する変数の名称を一定のルールにすることで可読性を向上させます
+- また、上記関数を実行する際、一律useMemoを利用することを促します
+   - useMemo内にtailwind系の実行をまとめることで将来的にtailwind-variantsから乗り換える際の作業を楽にする、などmemo化以外の効果もあります
+- まとめると現状以下のチェックを行います
+  - tailwind-variants(tv) のimport時の名称をtvに固定しているか (asなどでの名称変更の禁止)
+  - tv の実行結果を格納する変数名を統一 (classNameGenerator、もしくはxxxClassNameGenerator)
+  - tvで生成した関数の実行をuseMemo hook でメモ化しているか
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-tailwind-variants': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+import { tv as hoge } from 'tailwind-variants'
+```
+```jsx
+import { tv } from 'tailwind-variants'
+
+const xxx = tv({
+  ...
+})
+
+...
+
+const yyyy = xxx()
+```
+
+## ✅ Correct
+
+```jsx
+import { tv } from 'tailwind-variants'
+
+const classNameGenerator = tv({
+  ...
+})
+
+...
+
+const yyyy = useMemo(() => classNameGenerator(), [])
+```

package/rules/best-practice-for-tailwind-variants/index.js

@@ -0,0 +1,78 @@
+const SCHEMA = []
+
+const TV_COMPONENTS_METHOD = 'tv'
+const TV_COMPONENTS = 'tailwind-variants'
+const TV_RESULT_CONST_NAME_REGEX = /(C|c)lassNameGenerator$/
+
+const findValidImportNameNode = (s) => s.type === 'ImportSpecifier' && s.local.name === TV_COMPONENTS_METHOD
+
+const checkImportTailwindVariants = (node, context) => {
+}
+const findNodeHasId = (node) => {
+  if (node.id) {
+    return node
+  }
+
+  if (node.parent) {
+    return findNodeHasId(node.parent)
+  }
+
+  return null
+}
+const findNodeUseMemo = (node) => {
+  if (node.type === 'CallExpression' && node.callee.name === 'useMemo') {
+    return node
+  }
+
+  if (node.parent) {
+    return findNodeUseMemo(node.parent)
+  }
+
+  return null
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ImportDeclaration: (node) => {
+        if (node.source.value === TV_COMPONENTS) {
+          if (!node.specifiers.some(findValidImportNameNode)) {
+            context.report({
+              node,
+              message: `${TV_COMPONENTS} をimportする際は、名称が"${TV_COMPONENTS_METHOD}" となるようにしてください。例: "import { ${TV_COMPONENTS_METHOD} } from '${TV_COMPONENTS}'"`,
+            });
+          }
+        }
+      },
+      CallExpression: (node) => {
+        if (node.callee.name === TV_COMPONENTS_METHOD) {
+          const idNode = findNodeHasId(node.parent)
+
+          if (idNode && !TV_RESULT_CONST_NAME_REGEX.test(idNode.id.name)) {
+            context.report({
+              node: idNode,
+              message: `${TV_COMPONENTS_METHOD}の実行結果を格納する変数名は "${idNode.id.name}" ではなく "${TV_RESULT_CONST_NAME_REGEX}"にmatchする名称に統一してください。`,
+            });
+          }
+        } else if (TV_RESULT_CONST_NAME_REGEX.test(node.callee.name)) {
+          const useMemoNode = findNodeUseMemo(node.parent)
+
+          if (!useMemoNode) {
+            context.report({
+              node,
+              message: `"${node.callee.name}" を実行する際、useMemoでラップし、メモ化してください`,
+            });
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-tailwind-variants.js

@@ -0,0 +1,28 @@
+const rule = require('../rules/best-practice-for-tailwind-variants')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('best-practice-for-button-element', rule, {
+  valid: [
+    { code: `import { tv } from 'tailwind-variants'` },
+    { code: `const classNameGenerator = tv()` },
+    { code: `const xxxClassNameGenerator = tv()` },
+    { code: `const hoge = useMemo(() => classNameGenerator(), [])` },
+    { code: `const xxx = useMemo(() => hogeClassNameGenerator(), [])` },
+  ],
+  invalid: [
+    { code: `import { tv as hoge } from 'tailwind-variants'`, errors: [ { message: `tailwind-variants をimportする際は、名称が"tv" となるようにしてください。例: "import { tv } from 'tailwind-variants'"` } ] },
+    { code: `const hoge = tv()`, errors: [ { message: `tvの実行結果を格納する変数名は "hoge" ではなく "/(C|c)lassNameGenerator$/"にmatchする名称に統一してください。` } ] },
+    { code: `const hoge = classNameGenerator()`, errors: [ { message: `"classNameGenerator" を実行する際、useMemoでラップし、メモ化してください` } ] },
+    { code: `const hoge = hogeClassNameGenerator()`, errors: [ { message: `"hogeClassNameGenerator" を実行する際、useMemoでラップし、メモ化してください` } ] },
+  ]
+})