eslint-plugin-smarthr 0.5.12 → 0.5.14

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.5.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.11...v0.5.14) (2024-07-02)
+
+
+### Features
+
+* best-practice-for-data-test-attributeを追加 ([#141](https://github.com/kufu/eslint-plugin-smarthr/issues/141)) ([30a8f00](https://github.com/kufu/eslint-plugin-smarthr/commit/30a8f003e1cdb79c709390be0322703e74de284d))
+* ButtonやTextLinkコンポーネントにprefix, suffixの両属性を同時に設定できないルールを追加 ([1eb7568](https://github.com/kufu/eslint-plugin-smarthr/commit/1eb75680a1125391106994532b58cc0591853711))
+
+
+### Bug Fixes
+
+* a11y-clickable-element-has-text でtext属性を持つコンポーネントが存在する場合、真となるように修正 ([#143](https://github.com/kufu/eslint-plugin-smarthr/issues/143)) ([46b7048](https://github.com/kufu/eslint-plugin-smarthr/commit/46b7048dc3bb5a29455e205fabdd584fa478d2f1))
+
+### [0.5.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.12...v0.5.13) (2024-06-21)
+
+
+### Features
+
+* ButtonやTextLinkコンポーネントにprefix, suffixの両属性を同時に設定できないルールを追加 ([1eb7568](https://github.com/kufu/eslint-plugin-smarthr/commit/1eb75680a1125391106994532b58cc0591853711))
+
 ### [0.5.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.11...v0.5.12) (2024-06-10)
 
 

package/package.json

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

package/rules/a11y-clickable-element-has-text/index.js

@@ -32,8 +32,6 @@ const REGEX_SMARTHR_LOGO = /SmartHRLogo$/
 const REGEX_TEXT_COMPONENT = /(Text|Message)$/
 const REGEX_JSX_TYPE = /^(JSXText|JSXExpressionContainer)$/
 
-const HIT_TEXT_ATTR = 'alt'
-
 const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
 const checkFalsyJSXText = (c) => (
   !(c.type === 'JSXText' && c.value.match(REGEX_NLSP))
@@ -91,30 +89,29 @@ module.exports = {
                 return true
               }
 
-              // HINT: role & aria-label を同時に設定されている場合は許可
+              // HINT: role & aria-label を同時に設定されている場合か、text属性が設定されている場合許可
               let existRole = false
               let existAriaLabel = false
               const result = c.openingElement.attributes.reduce((prev, a) =>  {
-                existRole = existRole || (a.name.name === 'role' && a.value.value === 'img')
-                existAriaLabel = existAriaLabel || a.name.name === 'aria-label'
-
-                if (
-                  prev ||
-                  HIT_TEXT_ATTR !== a.name.name
-                ) {
-                  return prev
+                const n = a.name.name
+
+                if (prev || n === 'text') {
+                  return true
+                }
+
+                const v = a.value?.value
+
+                existRole = existRole || (n === 'role' && v === 'img')
+                existAriaLabel = existAriaLabel || n === 'aria-label'
+
+                if (existRole && existAriaLabel) {
+                  return true
                 }
 
-                return (!!a.value.value || a.value.type === 'JSXExpressionContainer') ? a : prev
+                return n === 'alt' && (v || a.value.type === 'JSXExpressionContainer') || false
               }, null)
 
-              if (
-                result ||
-                (existRole && existAriaLabel) ||
-                (c.children && filterFalsyJSXText(c.children).some(recursiveSearch))
-              ) {
-                return true
-              }
+              return result || (c.children && filterFalsyJSXText(c.children).some(recursiveSearch))
             }
           }
 

package/rules/design-system-guideline-prohibit-double-icons/README.md

@@ -0,0 +1,47 @@
+# smarthr/design-system-guideline-prohibit-double-icons
+
+- 要素の前後両方にアイコンの使用を禁止するルールです
+  - `Button` や `TextLink` において、`prefix` と `suffix` が同時に設定されている場合、エラーとなります。
+  - 基本的にアイコンのみが設定される前提のルールになっていますが、文字列などが設定されている場合もエラーとなります。
+  - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/design-system-guideline-prohibit-double-icons': [
+      'error', // 'warn', 'off'
+      // { checkType: 'always' } /* 'always' || 'allow-spread-attributes' */
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Button>hoge</Button>
+<Button suffix={SUFFIX}>hoge</Button>
+<Button prefix="PREFIX">hoge</Button>
+<TextLink>hoge</TextLink>
+<TextLink suffix="SUFFIX">hoge</TextLink>
+<TextLink prefix={PREFIX}>hoge</TextLink>
+<StyledButton>hoge</StyledButton>
+<StyledLink>hoge</StyledLink>
+<Input prefix={PREFIX} suffix={SUFFIX} />
+```
+
+## ✅ Correct
+
+```jsx
+<Button>hoge</Button>
+<Button suffix={SUFFIX}>hoge</Button>
+<Button prefix="PREFIX">hoge</Button>
+<TextLink>hoge</TextLink>
+<TextLink suffix="SUFFIX">hoge</TextLink>
+<TextLink prefix={PREFIX}>hoge</TextLink>
+<StyledButton>hoge</StyledButton>
+<StyledLink>hoge</StyledLink>
+<Input prefix={PREFIX} suffix={SUFFIX} />
+```

package/rules/design-system-guideline-prohibit-double-icons/index.js

@@ -0,0 +1,58 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Button)$': '(Button)$',
+  '(Link)$': '(Link)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const SCHEMA = []
+
+const REGEX_PATTERN = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name
+
+        if (REGEX_PATTERN.test(nodeName)) {
+          let prefix = null
+          let suffix = null
+
+          for (const attr of node.attributes) {
+            switch (attr.name.name) {
+              case 'prefix':
+                prefix = attr
+                break
+              case 'suffix':
+                suffix = attr
+                break
+            }
+
+            if(prefix && suffix) {
+              context.report({
+                node,
+                message: `${nodeName} には prefix と suffix は同時に設定できません。
+ - prefix または suffix のみを設定してください。
+ - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+ - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`,
+              })
+              break
+            }
+          }
+        }
+      }
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/a11y-clickable-element-has-text.js

@@ -119,6 +119,9 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     {
       code: `<a><FormattedMessage /></a>`,
     },
+    {
+      code: `<button><Hoge text="any" /></button>`,
+    },
     {
       code: `<a><AnyComponent /></a>`,
       options: [{

package/test/a11y-delegate-element-has-role-presantation.js

@@ -12,7 +12,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$|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$)/'
+const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|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(', ')
 
@@ -67,7 +67,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$|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$|^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$|DatePicker$|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/design-system-guideline-prohibit-double-icons.js

@@ -0,0 +1,39 @@
+const rule = require('../rules/design-system-guideline-prohibit-double-icons')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (name) => `${name} には prefix と suffix は同時に設定できません。
+ - prefix または suffix のみを設定してください。
+ - どちらにもアイコンをつけられそうな場合は、アイコン付き（右）（サフィックス）を優先し、アイコン付き（左）（プレフィックス）には指定しないでください。
+ - 両方設定したい場合は、'eslint-disable-next-line' 等を利用して、このルールを無効化してください。`
+
+ruleTester.run('design-system-guideline-prohibit-double-icons', rule, {
+  valid: [
+    { code: `<Button>hoge</Button>` },
+    { code: `<Button suffix={SUFFIX}>hoge</Button>` },
+    { code: `<Button prefix="PREFIX">hoge</Button>` },
+    { code: `<TextLink>hoge</TextLink>` },
+    { code: `<TextLink suffix="SUFFIX">hoge</TextLink>` },
+    { code: `<TextLink prefix={PREFIX}>hoge</TextLink>` },
+    { code: `<StyledButton>hoge</StyledButton>` },
+    { code: `<StyledLink>hoge</StyledLink>` },
+    { code: `<Input prefix={PREFIX} suffix={SUFFIX} />` },
+  ],
+  invalid: [
+    { code: `<Button suffix={SUFFIX} prefix={PREFIX}>hoge</Button>`, errors: [{message: generateErrorText('Button')}]},
+    { code: `<Button suffix prefix>hoge</Button>`, errors: [{message: generateErrorText('Button')}]},
+    { code: `<StyledButton suffix={undefined} prefix={null}>hoge</StyledButton>`, errors: [{message: generateErrorText('StyledButton')}]},
+    { code: `<Link prefix="PREFIX" suffix="SUFFIX">hoge</Link>`, errors: [{message: generateErrorText('Link')}]},
+    { code: `<StyledLink prefix="PREFIX" suffix="SUFFIX">hoge</StyledLink>`, errors: [{message: generateErrorText('StyledLink')}]},
+  ]
+})