eslint-plugin-smarthr 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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)
+
+
+### Features
+
+* a11y系のルールをsmarthr-ui/WarekiPickerに対応させる ([#471](https://github.com/kufu/tamatebako/issues/471)) ([a52995c](https://github.com/kufu/tamatebako/commit/a52995cb999de2942989eac00bbc299922cf6208))
+
 ## [1.1.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.0.0...eslint-plugin-smarthr-v1.1.0) (2025-01-08)
 
 

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.1.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"
@@ -15,7 +15,7 @@
     "type": "git",
     "url": "git+git@github.com:kufu/tamatebako.git"
   },
-  "homepage": "https://github.com/kufu/tamatebako/packages/eslint-plugin-smarthr",
+  "homepage": "https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -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": "7231c562b253db92c64527e5ab5350c8a7e0d92a"
+  "gitHead": "3c7f6f40f11714a9dd6cb88dc243d1b6973c6a93"
 }

package/rules/a11y-delegate-element-has-role-presentation/index.js

@@ -8,7 +8,7 @@ const EXPECTED_NAMES = {
   'RadioButtonPanel$': 'RadioButtonPanel$',
   'Check(b|B)ox$': 'CheckBox$',
   'Combo(b|B)ox$': 'ComboBox$',
-  'DatePicker$': 'DatePicker$',
+  '(Date|Wareki)Picker$': '(Date|Wareki)Picker$',
   'TimePicker$': 'TimePicker$',
   'DropZone$': 'DropZone$',
   'Switch$': 'Switch$',

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$',
-  'DatePicker$': 'DatePicker$',
-  'TimePicker$': 'TimePicker$',
-  'DropZone$': 'DropZone$',
+  '(Date|Wareki)Picker$': '(Date|Wareki)Picker$',
+  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/a11y-input-in-form-control/README.md

@@ -70,16 +70,16 @@
 </Fieldset>
 
 <FormControl title="any heading" role="group">
-  <DatePicker />
+  <WarekiPicker />
   ~
-  <DatePicker />
+  <WarekiPicker />
 </FormControl>
 
 <Fieldset title="any heading">
   <FormControl role="group">
-    <DatePicker />
+    <WarekiPicker />
     ~
-    <DatePicker />
+    <WarekiPicker />
   </FormControl>>
 </Fieldset>
 

package/rules/a11y-input-in-form-control/index.js

@@ -15,7 +15,7 @@ const EXPECTED_INPUT_NAMES = {
   '(S|^s)elect$': '(Select)$',
   'InputFile$': '(InputFile)$',
   'Combo(b|B)ox$': '(ComboBox)$',
-  'DatePicker$': '(DatePicker)$',
+  '(Date|Wareki)Picker$': '((Date|Wareki)Picker)$',
   'TimePicker$': '(TimePicker)$',
   ...EXPECTED_LABELED_INPUT_NAMES,
 }

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -6,10 +6,10 @@ const EXPECTED_NAMES = {
   '(t|T)extarea$': 'Textarea$',
   'FieldSet$': 'FieldSet$',
   'ComboBox$': 'ComboBox$',
-  'DatePicker$': 'DatePicker$',
+  '(Date|Wareki)Picker$': '(Date|Wareki)Picker$',
   'TimePicker$': 'TimePicker$',
 }
-const INPUT_TAG_REGEX = /((i|I)nput|(t|T)extarea|FieldSet|ComboBox|(Date|Time)Picker)$/
+const INPUT_TAG_REGEX = /((i|I)nput|(t|T)extarea|FieldSet|ComboBox|(Date|Wareki|Time)Picker)$/
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}

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/a11y-delegate-element-has-role-presantation.js

@@ -11,7 +11,7 @@ const ruleTester = new RuleTester({
   },
 })
 
-const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|TimePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|FilterDropdown$)/'
+const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|FilterDropdown$)/'
 const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
   const onAttrsText = onAttrs.join(', ')
 
@@ -66,7 +66,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: messageRolePresentationNotHasInteractive('div', ['onClick', 'onSubmit']) } ] },
     { code: '<div onClick={any}><Link /></div>', errors: [ { message: messageNonInteractiveEventHandler('div', ['onClick']) } ] },
     { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
-    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|TimePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|FilterDropdown$|^Hoge$)/') } ] },
+    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|FilterDropdown$|^Hoge$)/') } ] },
     { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick', 'onChange']) } ] },
     { code: '<Wrapper onClick={any}>{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
   ],

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

@@ -30,6 +30,7 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: `import { CheckBox as FugaCheckBox } from './hoge'` },
     { code: `import { HogeComboBox as FugaComboBox } from './hoge'` },
     { code: `import { DatePicker as HogeDatePicker } from './hoge'` },
+    { code: `import { WarekiPicker as HogeWarekiPicker } from './hoge'` },
     { code: `import { HogeDropZone as HogeFugaDropZone } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeInput = styled(Input)``' },
@@ -65,8 +66,10 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
  - CheckBoxが型の場合、'import type { CheckBox as FugaCheckBoxHoge }' もしくは 'import { type CheckBox as FugaCheckBoxHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
     { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください。
  - HogeComboBoxが型の場合、'import type { HogeComboBox as ComboBoxFuga }' もしくは 'import { type HogeComboBox as ComboBoxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください。
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
  - DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
+    { code: `import { WarekiPicker as HogeWarekiPickerFuga } from './hoge'`, errors: [ { message: `HogeWarekiPickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
+ - WarekiPickerが型の場合、'import type { WarekiPicker as HogeWarekiPickerFuga }' もしくは 'import { type WarekiPicker as HogeWarekiPickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
     { code: `import { HogeDropZone as HogeFugaDropZoneAbc } from './hoge'`, errors: [ { message: `HogeFugaDropZoneAbcを正規表現 "/DropZone$/" がmatchする名称に変更してください。
  - HogeDropZoneが型の場合、'import type { HogeDropZone as HogeFugaDropZoneAbc }' もしくは 'import { type HogeDropZone as HogeFugaDropZoneAbc }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },

package/test/a11y-input-in-form-control.js

@@ -13,13 +13,13 @@ const ruleTester = new RuleTester({
 const noLabeledInput = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
  - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
  - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
    - 例: <${name} title="姓を全角カタカナのみで入力してください" />`
 const noLabeledSelect = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
  - FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
  - ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/とマッチするように修正してください
- - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
+ - ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/とマッチするように修正してください
  - 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
    - 例: <${name} title="検索対象を選択してください" />`
 const invalidPureCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
@@ -74,7 +74,7 @@ const invalidChildreninFormControl = (children) => `FormControl が、${children
    - FormControlではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
  - 方法2: 親要素であるFormControlがsmarthr-ui/FormControlを拡張したコンポーネントではない場合、コンポーネント名を/(Form(Control|Group))$/と一致しない名称に変更してください`
 const requireMultiInputInFormControlWithRoleGroup = () => `HogeFormControl内に入力要素が2個以上存在しないため、'role=\"group\"'を削除してください。'role=\"group\"'は複数の入力要素を一つのグループとして扱うための属性です。
- - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|DatePicker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
+ - HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput$|SearchInput$|(T|^t)extarea$|(S|^s)elect$|InputFile$|Combo(b|B)ox$|(Date|Wareki)Picker$|TimePicker$|RadioButton$|RadioButtons$|RadioButtonPanel$|RadioButtonPanels$|Check(B|b)ox$|Check(B|b)ox(e)?s$)/、もしくは/((FormGroup)$|(FormControl)$|((F|^f)ieldset)$)/にマッチする名称に変更してください`
 
 ruleTester.run('a11y-input-in-form-control', rule, {
   valid: [
@@ -90,6 +90,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: 'const HogeRadioButtonPanel = styled(FugaRadioButtonPanel)``' },
     { code: 'const HogeCheckBox = styled(FugaCheckbox)``' },
     { code: 'const DatePicker = styled(AnyDatePicker)``' },
+    { code: 'const WarekiPicker = styled(AnyWarekiPicker)``' },
     { code: '<input type="hidden" />' },
     { code: '<input title="any"/>' },
     { code: '<HogeInput title="any"/>' },
@@ -100,6 +101,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeInputFile title="any"/>' },
     { code: '<HogeComboBox title="any"/>' },
     { code: '<HogeDatePicker title="any"/>' },
+    { code: '<HogeWarekiPicker title="any"/>' },
     { code: '<HogeFormGroup />' },
     { code: '<HogeFormControl />' },
     { code: '<HogeFieldset />' },
@@ -158,6 +160,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeComboBox />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
     { code: '<HogeComboBox inputAttributes={{ any }} />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
     { code: '<HogeDatePicker />', errors: [ { message: noLabeledInput('HogeDatePicker') } ] },
+    { code: '<HogeWarekiPicker />', errors: [ { message: noLabeledInput('HogeWarekiPicker') } ] },
     { code: '<HogeFormControl><Input type="checkbox" /><Input type="checkbox" /></HogeFormControl>', errors: [ { message: invalidPureCheckboxInFormControl('Input') } ] },
     { code: '<HogeFormControl><HogeCheckBox /><Input /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },
     { code: '<HogeFormControl><HogeCheckBox /><HogeCheckBox /></HogeFormControl>', errors: [ { message: invalidCheckboxInFormControl('HogeCheckBox') } ] },

package/test/a11y-prohhibit-input-placeholder.js

@@ -20,6 +20,7 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `import { HogeTextarea as FugaHogeTextarea } from './hoge'` },
     { code: `import { ComboBox as FugaHogeComboBox } from './hoge'` },
     { code: `import { AbcDatePicker as StyledDatePicker } from './hoge'` },
+    { code: `import { AbcWarekiPicker as StyledWarekiPicker } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeTextarea = styled.textarea``' },
     { code: 'const HogeInput = styled(Input)``' },
@@ -39,6 +40,7 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<CustomComboBox />` },
     { code: `<SearchInput />` },
     { code: `<DatePicker />` },
+    { code: `<WarekiPicker />` },
     { code: `<TimePicker />` },
     { code: `<CustomSearchInput tooltipMessage="hoge" />` },
     { code: `<CustomSearchInput tooltipMessage="hoge" placeholder="fuga" />` },
@@ -57,8 +59,10 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
  - HogeTextareaが型の場合、'import type { HogeTextarea as HogeTextareaFuga }' もしくは 'import { type HogeTextarea as HogeTextareaFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
     { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください。
  - HogeComboBoxが型の場合、'import type { HogeComboBox as ComboBoxFuga }' もしくは 'import { type HogeComboBox as ComboBoxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
-    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください。
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
  - DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
+    { code: `import { WarekiPicker as HogeWarekiPickerFuga } from './hoge'`, errors: [ { message: `HogeWarekiPickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
+ - WarekiPickerが型の場合、'import type { WarekiPicker as HogeWarekiPickerFuga }' もしくは 'import { type WarekiPicker as HogeWarekiPickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
     { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
     { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
@@ -78,6 +82,7 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<HogeTextarea placeholder="any" />`, errors: [ { message: `HogeTextarea にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeTextarea /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<HogeFieldSet placeholder="any" />`, errors: [ { message: `HogeFieldSet にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeFieldSet /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<HogeDatePicker placeholder="any" />`, errors: [ { message: `HogeDatePicker にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeDatePicker /><Hint>ヒント</Hint></div>')` } ] },
+    { code: `<HogeWarekiPicker placeholder="any" />`, errors: [ { message: `HogeWarekiPicker にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeWarekiPicker /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<HogeComboBox placeholder="any" />`, errors: [ { message: `HogeComboBox にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
  - 選択肢をどんな値で絞り込めるかの説明をしたい場合は dropdownHelpMessage 属性に変更してください。
  - 空の値の説明のためにplaceholderを利用している場合は defaultItem 属性に変更してください。

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でラップし、メモ化してください` } ] },
+  ]
+})