eslint-plugin-smarthr 0.5.7 → 0.5.8

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.
 
+### [0.5.8](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.7...v0.5.8) (2024-04-09)
+
+
+### Features
+
+* a11y-prohibit-input-maxlength-attribute ([#135](https://github.com/kufu/eslint-plugin-smarthr/issues/135)) ([9f9d010](https://github.com/kufu/eslint-plugin-smarthr/commit/9f9d010e819d936fe5f55556a8f65e6485c552ce))
+* best-practice-for-layouts に <Stack align="center"> を <Center> に置き換えることを促すチェックを追加 ([#133](https://github.com/kufu/eslint-plugin-smarthr/issues/133)) ([5835530](https://github.com/kufu/eslint-plugin-smarthr/commit/58355308bf9a5d18d2d731e699c54806af969ed9))
+
 ### [0.5.7](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.6...v0.5.7) (2024-04-01)
 
 

package/README.md

@@ -9,6 +9,7 @@
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-in-form-control)
 - [a11y-numbered-text-within-ol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-numbered-text-within-ol)
+- [a11y-prohibit-input-maxlength-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-maxlength-attribute)
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-replace-unreadable-symbol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-replace-unreadable-symbol)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -27,7 +27,8 @@
   "devDependencies": {
     "eslint": "^8.8.0",
     "jest": "^27.4.7",
-    "standard-version": "^9.3.2"
+    "standard-version": "^9.3.2",
+    "typescript-eslint": "^7.5.0"
   },
   "peerDependencies": {
     "eslint": "^7 || ^8"

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -93,6 +93,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -44,6 +44,9 @@ const message = `a, buttonなどのクリッカブルな要素内にはテキス
   - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください
  - クリッカブルな要素内に設置しているコンポーネントがテキストを含んでいる場合、"XxxxText" のように末尾に "Text" もしくは "Message" という名称を設定してください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -81,6 +81,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -62,6 +62,9 @@ const searchBubbleUp = (node) => {
   return searchBubbleUp(node.parent)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -223,6 +223,9 @@ const forInSearchChildren = (ary) => {
 
 const findTagAttr = (a) => a.name?.name == 'tag'
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-image-has-alt-attribute/index.js

@@ -48,6 +48,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -40,6 +40,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -77,6 +77,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-numbered-text-within-ol/index.js

@@ -53,6 +53,9 @@ const renderNode = (node, matcher) => node.type === 'JSXText' ? `\`${matcher[1]}
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-prohibit-input-maxlength-attribute/README.md

@@ -0,0 +1,35 @@
+# smarthr/a11y-prohibit-input-maxlength-attribute
+
+- input, textarea 要素に maxLength 属性を設定することを禁止するルールです
+  - maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります。
+- maxLength 属性ではなく、pattern 属性と title 属性を組み合わせて form 要素でラップすることで、入力時でなく、submit 時にバリデーションすることができます。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-input-maxlength-attribute': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<input maxLength={30} />
+<XxxInput maxLength={40} />
+<textarea maxLength={50} />
+<XxxTextarea maxLength={60} />
+```
+
+## ✅ Correct
+
+```jsx
+<input />
+<XxxInput />
+<textarea />
+<XxxTextarea />
+```

package/rules/a11y-prohibit-input-maxlength-attribute/index.js

@@ -0,0 +1,44 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Input|^input)$': '(Input)$',
+  '(Textarea|^textarea)$': '(Textarea)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const INPUT_COMPONENT_NAMES = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+
+const SCHEMA = []
+
+/**
+ * @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) => {
+        if (node.name.type === 'JSXIdentifier' && INPUT_COMPONENT_NAMES.test(node.name.name)) {
+          const checkHasMaxLength = (attr) => attr.name?.name === 'maxLength'
+          const maxLengthAttr = node.attributes.find(checkHasMaxLength)
+          if (maxLengthAttr) {
+            context.report({
+              node,
+              message: `${node.name.name}にmaxLength属性を設定しないでください。
+- maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります
+- 以下のいずれかの方法で修正をおこなってください
+  - 方法1: pattern属性とtitle属性を組み合わせ、form要素でラップする
+  - 方法2: JavaScriptを用いたバリデーションを実装する`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

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

@@ -9,6 +9,9 @@ const EXPECTED_NAMES = {
   'DatePicker$': 'DatePicker$',
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-prohibit-useless-sectioning-fragment/index.js

@@ -34,6 +34,9 @@ const searchSectioningFragment = (node) => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-replace-unreadable-symbol/index.js

@@ -2,6 +2,9 @@ const TILDE_REGEX = /([~〜])/
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-trigger-has-button/index.js

@@ -15,6 +15,9 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
   !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
 ))
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-button-element/index.js

@@ -10,6 +10,9 @@ const findTypeAttr = (a) => a.type === 'JSXAttribute' && a.name.name === 'type'
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-date/index.js

@@ -25,6 +25,9 @@ const fixAction = (fixer, node, replacedSuffix = '') => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-layouts/index.js

@@ -25,6 +25,7 @@ const checkFalsyJSXText = (c) => (
 )
 
 const findJustifyAttr = (a) => a.name?.name === 'justify'
+const findAlignAttr = (a) => a.name?.name === 'align'
 
 const searchChildren = (node) => {
   if (
@@ -55,6 +56,9 @@ const searchChildren = (node) => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',
@@ -80,11 +84,17 @@ module.exports = {
                 return
               }
 
+              const alignAttr = layoutType === 'Stack' ? node.attributes.find(findAlignAttr) : null
+
+              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+                return
+              }
+
               if (searchChildren(children[0])) {
                 context.report({
                   node,
                   message:
-                    justifyAttr && justifyAttr.value.value === 'center'
+                    (justifyAttr && justifyAttr.value.value === 'center' || alignAttr && alignAttr.value.value === 'center')
                       ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
                       : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください

package/rules/best-practice-for-remote-trigger-dialog/index.js

@@ -8,6 +8,9 @@ const EXPECTED_NAMES = {
 const REGEX_REMOTE_TRIGGER_DIALOG = /RemoteTrigger(Action|Message|Modeless)Dialog$/
 const REGEX_REMOTE_DIALOG_TRIGGER = /RemoteDialogTrigger$/
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/format-import-path/index.js

@@ -79,6 +79,9 @@ const calculateRelativeImportPath = ({ importPath, filteredDirs, filteredPaths }
   return `${filteredDirs.length === 0 ? './' : [...Array(filteredDirs.length)].reduce((prev) => `${prev}../`, '')}${filteredPaths.join('/')}`.replace(/^(.+?)\/$/, '$1')
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/format-translate-component/index.js

@@ -13,6 +13,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/jsx-start-with-spread-attributes/index.js

@@ -8,6 +8,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/no-import-other-domain/index.js

@@ -33,6 +33,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-export-array-type/index.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-file-name/index.js

@@ -9,6 +9,9 @@ const SCHEMA = [{
 }]
 
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-import/index.js

@@ -32,6 +32,9 @@ const SCHEMA = [{
 
 const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} は利用しないでください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-path-within-template-literal/index.js

@@ -26,6 +26,9 @@ const SCHEMA = [
   },
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-barrel-import/index.js

@@ -83,6 +83,9 @@ const calculateReplacedImportPath = (source) => {
 const pickImportedName = (s) => s.imported?.name
 const findExistsSync = (p) => fs.existsSync(p)
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-declaration/index.js

@@ -40,6 +40,9 @@ const useRegex = (use) => {
   return new RegExp(`((${codeSeparator}(${actualUse})${codeSeparator})|(^(${actualUse})${codeSeparator})|${codeSeparator}(${actualUse})$)`)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-export/index.js

@@ -20,6 +20,9 @@ const fetchEdgeDeclaration = (node) => {
   return fetchEdgeDeclaration(declaration)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-import/index.js

@@ -32,6 +32,9 @@ const SCHEMA = [{
 
 const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} をimportしてください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/trim-props/index.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/test/a11y-prohibit-input-maxlength-attribute.js

@@ -0,0 +1,39 @@
+const rule = require('../rules/a11y-prohibit-input-maxlength-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const expectedErrorMessage = (elName) => `${elName}にmaxLength属性を設定しないでください。
+- maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります
+- 以下のいずれかの方法で修正をおこなってください
+  - 方法1: pattern属性とtitle属性を組み合わせ、form要素でラップする
+  - 方法2: JavaScriptを用いたバリデーションを実装する`
+
+ruleTester.run('a11y-prohibit-input-maxlength-attribute', rule, {
+  valid: [
+    { code: `<input />` },
+    { code: `<Input type="text" />` },
+    { code: `<HogeInput value="hoge" />` },
+    { code: `<textarea>hoge</textarea>` },
+    { code: `<Textarea type="text" />` },
+    { code: `<HogeTextarea value="hoge" />` },
+    { code: `<><input /></>`}
+  ],
+  invalid: [
+    { code: `<input maxLength={30} />`, errors: [{ message: expectedErrorMessage('input') }] },
+    { code: `<Input type="text" maxLength={40} />`, errors: [{ message: expectedErrorMessage('Input') }] },
+    { code: `<HogeInput maxLength value="hoge" />`, errors: [{ message: expectedErrorMessage('HogeInput') }] },
+    { code: `<textarea maxLength={50}>hoge</textarea>`, errors: [{ message: expectedErrorMessage('textarea') }]},
+    { code: `<Textarea type="text" maxLength={60} />`, errors: [{ message: expectedErrorMessage('Textarea') }]},
+    { code: `<HogeTextarea maxLength={70} value="hoge" />`, errors: [{ message: expectedErrorMessage('HogeTextarea') }]}
+  ]
+})

package/test/best-practice-for-layouts.js

@@ -55,6 +55,8 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
     { code: `<Cluster justify="flex-end">{a}</Cluster>` },
     { code: `<HogeCluster justify="end">{a}</HogeCluster>` },
+    { code: `<Stack align="flex-end">{a}</Stack>` },
+    { code: `<HogeStack align="end">{a}</HogeStack>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
@@ -82,6 +84,7 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
+    { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
   ]
 })
 

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "target": "ESNext",
+    "module": "CommonJS",
+    "lib": ["ESNext"],
+    "noImplicitAny": true
+  },
+}

package/types.js

@@ -0,0 +1,3 @@
+/**
+ * @typedef {import('@typescript-eslint/utils').TSESTree.JSXOpeningElement} JSXOpeningElement
+ */