eslint-plugin-smarthr 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.7.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.6.0...eslint-plugin-smarthr-v1.7.0) (2025-06-02)
+
+
+### Features
+
+* a11y-help-link-with-support-href を追加 ([#646](https://github.com/kufu/tamatebako/issues/646)) ([662ca33](https://github.com/kufu/tamatebako/commit/662ca33120acac3fb9acdc7331d187fba9be86ef))
+* best-practice-for-nested-attributes-array-index ruleを追加 ([#648](https://github.com/kufu/tamatebako/issues/648)) ([8774d84](https://github.com/kufu/tamatebako/commit/8774d84f46fcaff9360aa76cb3773f644d6d5529))
+
 ## [1.6.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.5.1...eslint-plugin-smarthr-v1.6.0) (2025-05-20)
 
 

package/README.md

@@ -5,6 +5,7 @@
 - [a11y-delegate-element-has-role-presentation](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation)
 - [a11y-form-control-in-form](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-form-control-in-form)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content)
+- [a11y-help-link-with-support-href](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-help-link-with-support-href)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-image-has-alt-attribute)
 - [a11y-input-has-name-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-input-in-form-control)
@@ -16,13 +17,15 @@
 - [a11y-replace-unreadable-symbol](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-replace-unreadable-symbol)
 - [a11y-required-layout-as-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-required-layout-as-attribute)
 - [a11y-trigger-has-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-trigger-has-button)
+- [best-practice-for-async-current-target](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-async-current-target)
 - [best-practice-for-button-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-button-element)
 - [best-practice-for-data-test-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-data-test-attribute)
 - [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-nested-attributes-array-index](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index)
 - [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)
 - [best-practice-for-tailwind-prohibit-root-margin](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin)
+- [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.6.0",
+  "version": "1.7.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.15.1"
+    "node": ">=22.16.0"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.33.0"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "92e589c6bfc8e311b4c873f7e4c65b29eed61304"
+  "gitHead": "12babfba8f3ff1aa9bc9d159136ef15ffce24fe0"
 }

package/rules/a11y-help-link-with-support-href/README.md

@@ -0,0 +1,34 @@
+# smarthr/a11y-help-link-with-support-href
+
+- [ヘルプページ](https://support.smarthr.jp/) へのリンクはsmarthr-ui/HelpLinkを使うことを促すルールです
+  - ヘルプページへのリンクは、通常のテキストリンクと設定するべき属性が異なるため、専用のコンポーネントが用意されています
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-help-link-with-support-href': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<TextLink href="https://support.smarthr.jp/xxxxx">any</TextLink>
+<a href={`//support.smarthr.jp/${hoge}`}>any</a>
+<AnchorButton href={supportURL}>any</a>
+<AnyAnchor href={path.support.xxxx.yyyy} />
+```
+
+## ✅ Correct
+
+```jsx
+<HelpLink href="https://support.smarthr.jp/xxxxx">any</HelpLink>
+<HelpLink href={`//support.smarthr.jp/${hoge}`}>any</HelpLink>
+<HelpLink href={supportURL}>any</HelpLink>
+<HogeHelpLink href={path.support.xxxx.yyyy} />
+```

package/rules/a11y-help-link-with-support-href/index.js

@@ -0,0 +1,82 @@
+const SCHEMA = []
+
+const SUPPORT_URL_PREFIX_REGEX = /(\/|\.)support\./
+const SUPPORT_IDENTIFIER_REGEX = /(S|(^|_)s)upport(.*)(H(ref|REF)|U(rl|URL))$/
+const PATH_OBJ_REGEX = /^((p|P)ath|PATH)\./
+const SUPPORT_PATH_MEMBER_REGEX = /\.support\./
+
+const ANCHER_LIKE_REGEX = /(Anchor(Button)?|Link|^a)$/
+const HELP_LINK_REGEX = /HelpLink$/
+
+const checkSupportURL = (node, context) => {
+  switch (node.type) {
+    case 'Literal': {
+      return SUPPORT_URL_PREFIX_REGEX.test(node.value)
+    }
+    case 'JSXExpressionContainer': {
+      return checkSupportURLExpression(node.expression, context)
+    }
+  }
+
+  return false
+}
+
+const checkSupportURLExpression = (node, context) => {
+  switch (node.type) {
+    case 'Literal': {
+      return SUPPORT_URL_PREFIX_REGEX.test(node.value)
+    }
+    case 'Identifier': {
+      return SUPPORT_IDENTIFIER_REGEX.test(node.name)
+    }
+    case 'CallExpression':
+    case 'ChainExpression':
+    case 'MemberExpression': {
+      const fullName = context.sourceCode.getText(node)
+
+      return PATH_OBJ_REGEX.test(fullName) && SUPPORT_PATH_MEMBER_REGEX.test(fullName)
+    }
+    case 'TemplateLiteral': {
+      const someChecker = (e) => checkSupportURLExpression(e, context)
+
+      return node.expressions.some(someChecker) || node.quasis.some(someChecker)
+    }
+    case 'TemplateElement': {
+      return node.value.raw && SUPPORT_URL_PREFIX_REGEX.test(node.value.raw)
+    }
+    case 'TSAsExpression': {
+      return checkSupportURLExpression(node.expression, context)
+    }
+    case 'LogicalExpression': {
+      return checkSupportURLExpression(node.left, context) || checkSupportURLExpression(node.right, context)
+    }
+    case 'ConditionalExpression': {
+      return checkSupportURLExpression(node.alternate, context) || checkSupportURLExpression(node.consequent, context)
+    }
+  }
+
+  return false
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      JSXAttribute: (node) => {
+        if (node.name.name === 'href' && ANCHER_LIKE_REGEX.test(node.parent.name.name) && !HELP_LINK_REGEX.test(node.parent.name.name) && checkSupportURL(node.value, context)) {
+          context.report({
+            node,
+            message: `ヘルプページ用のリンクは smarthr-ui/HelpLink コンポーネントを利用してください`,
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/best-practice-for-nested-attributes-array-index/README.md

@@ -0,0 +1,91 @@
+# smarthr/best-practice-for-nested-attributes-array-index
+
+- 入力要素のname属性で、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy]）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してすることを促すルールです
+- 前述例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります
+
+## indexを設定しない場合に起こり得る問題の詳細
+
+配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy]）、配列のアイテムの値はどこからどこまでが1つ目、ここから2つ目... というように区切る処理が自動的に行われます。
+これらの区切りは `全く同じnameが出てきたら区切る` という処理が行われます。
+
+```js
+a[xxx][][id]='1'
+a[xxx][][value]='hoge'
+a[xxx][][id]='2' // `a[xxx][][id]`が被ったのでここで別オブジェクトになる
+a[xxx][][value]='fuga'
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: 1, value: 'hoge' },
+    { id: 2, value: 'fuga' },
+  ]
+}
+*/
+```
+
+この挙動は、例えば以下のようなパターンで問題になります。
+
+```js
+// 問題あるパターン
+// 新規作成でa[xxx][][id]=undefinedなので非表示にしたと仮定
+a[xxx][][value]='hoge'
+a[xxx][][id]='2' // 本来↓のvalueと紐づくべき値が↑に紐づいてしまう
+a[xxx][][value]='fuga' // `a[xxx][][value]`が被ったのでここで別オブジェクトになる
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: 2, value: 'hoge' },
+    { id: nil, value: 'fuga' }, // fugaだったもののidがhogeに紐づいてしまう
+  ]
+}
+*/
+```
+
+この問題は正しくnameにindexを含めることで回避できます
+
+```js
+a[xxx][0][value]='hoge'
+a[xxx][1][id]='2'
+a[xxx][1][value]='fuga'
+
+/* 送信される値の概念モデル
+a: {
+  xxx: [
+    { id: nil, value: 'hoge' },
+    { id: 2, value: 'fuga' },
+  ]
+}
+*/
+```
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-nested-attributes-array-index': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Input name="a[xxxx][][yyy]" />
+<Input name={"${any}[][xxx]"} />
+
+
+// 文字列の変数などでも `[][` のような指定が出てくるのはほぼname属性に対する指定として
+// 利用される可能性が高いためチェック対象です
+const namePrefix = 'a[xxx][][yyy]'
+```
+
+## ✅ Correct
+
+```jsx
+<Input name="a[xxxx][0][yyy]" />
+<Input name={"${any}[${index}][xxx]"} />
+const namePrefix = `a[xxx][${index}][yyy]`
+```

package/rules/best-practice-for-nested-attributes-array-index/index.js

@@ -0,0 +1,35 @@
+const SCHEMA = []
+
+const NOINDEX_ARRAY_REGEX = /\[\]\[/
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const checker = (node, value) => {
+      if (NOINDEX_ARRAY_REGEX.test(value)) {
+        context.report({
+          node,
+          message: `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+ - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
+ - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`,
+        })
+      }
+    }
+
+    return {
+      Literal: (node) => {
+        checker(node, node.value)
+      },
+      TemplateElement: (node) => {
+        checker(node, node.value.cooked)
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/component-name/index.js

@@ -37,6 +37,7 @@ const EXPECTED_NAMES = {
   'FormControls$': 'FormControls$',
   'FormDialog$': 'FormDialog$',
   'FormGroup$': 'FormGroup$',
+  'HelpLink$': 'HelpLink$',
   'Icon$': 'Icon$',
   'Image$': 'Image$',
   'Img$': 'Img$',

package/test/a11y-help-link-with-support-href.js

@@ -0,0 +1,32 @@
+const rule = require('../rules/a11y-help-link-with-support-href')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+const errorText = `ヘルプページ用のリンクは smarthr-ui/HelpLink コンポーネントを利用してください`
+
+ruleTester.run('a11y-help-link-with-support-href', rule, {
+  valid: [
+    { code: `<HelpLink href="//support.hoge">any</HelpLink>` },
+    { code: `<Hoge href="//support.hoge">any</Hoge>` },
+    { code: `<HelpLink href="//support.hoge" />` },
+    { code: `<HelpLink href={"//support.hoge"} />` },
+    { code: `<HelpLink href={path.support.hoge} />` },
+    { code: `<HelpLink href={supportUrl} />` },
+  ],
+  invalid: [
+    { code: `<Anchor href="//support.hoge">any</Anchor>`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={path.support.hoge} />`, errors: [{ message: errorText }] },
+    { code: `<a href={supportUrl}>ほげ</a>`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={path.support.hoge?.fuga} />`, errors: [{ message: errorText }] },
+    { code: `<HogeAnchor href={a ? path.support.hoge?.fuga : null} />`, errors: [{ message: errorText }] },
+    { code: `<HogeLink href={a ? undefined : supportHogeHref} />`, errors: [{ message: errorText }] },
+  ]
+})

package/test/best-practice-for-nested-attributes-array-index.js

@@ -0,0 +1,31 @@
+const rule = require('../rules/best-practice-for-nested-attributes-array-index')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const ERROR_MESSAGE = `入力要素のname属性に対して、配列に当たる部分の連番を指定しない場合（例: a[xxx][][yyy] ）、配列内アイテムの属性が意図せず入れ替わってしまう場合がありえるため、常にindexを設定してください。
+ - 例のyyyに当たる値が配列内の別アイテムに紐づいてしまう場合があります。
+ - 詳しくは https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index を参照してください`
+
+ruleTester.run('best-practice-for-nested-attributes-array-index', rule, {
+  valid: [
+    { code: `<Input name="a[xxxx][0][yyy]" />` },
+    { code: '`<Input name="a[xxxx][${index}][yyy]" />`' },
+    { code: `const hoge = 'a[xxxx][0][id]'`},
+    { code: 'const hoge = `${prefix}[${index}][id]`'},
+  ],
+  invalid: [
+    { code: `<Input name="a[xxxx][][yyy]" />`, errors: [ { message: ERROR_MESSAGE } ] },
+    { code: '<Input name={`${any}[][yyy]`} />', errors: [ { message: ERROR_MESSAGE } ] },
+    { code: `const hoge = 'a[xxxx][][id]'`, errors: [ { message: ERROR_MESSAGE } ] },
+    { code: 'const hoge = `${prefix}[][id]`', errors: [ { message: ERROR_MESSAGE } ] },
+  ]
+})