eslint-plugin-smarthr 0.5.12 → 0.5.13

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

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/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')}]},
+  ]
+})