eslint-plugin-smarthr 0.5.7 → 0.5.9

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.9](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.7...v0.5.9) (2024-04-22)
+
+
+### 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))
+* a11y系コンポーネントでBase,BaseColumnにas="section"などSectioningContentが指定された場合、outlineが切られていると判断するよう修正 ([#138](https://github.com/kufu/eslint-plugin-smarthr/issues/138)) ([7b62c62](https://github.com/kufu/eslint-plugin-smarthr/commit/7b62c6293cf057e97616992dd30fcf67b758f32f))
+* 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))
+* best-practice-for-layoutsでStackコンポーネントにgap={0}が指定されている場合、適切に置き換え・または削除を促すように修正 ([#137](https://github.com/kufu/eslint-plugin-smarthr/issues/137)) ([2a11919](https://github.com/kufu/eslint-plugin-smarthr/commit/2a11919ffa20ddbbc6a59210ec14d81d2d510cda))
+
+### [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.9",
   "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/README.md

@@ -1,6 +1,6 @@
 # smarthr/a11y-heading-in-sectioning-content
 
-- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section, SectioningFragment) のいずれかで囲むことを促すルールです
+- Headingコンポーネントをsmarthr-ui/SectioningContent(Article, Aside, Nav, Section) のいずれかで囲むことを促すルールです
   - article, aside, nav, section で Heading とHeadingの対象となる範囲を囲むとブラウザが正確に解釈できるようになるメリットがあります
   - またsmarthr-ui/SectioningContentで smarthr-ui/Headingを囲むことで、Headingのレベル(h1~h6)を自動的に計算するメリットもあります
 - Headingコンポーネントをsmarthr-ui/Layout(Center, Reel, Sidebar, Stack) のいずれかで囲んでおり、かつas, forwardedAsのいずれかの属性で 'section', 'article', 'aside', 'nav' が指定されている場合、SectioningContentで囲んでいるものとして扱われるようになります

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

@@ -14,6 +14,8 @@ const EXPECTED_NAMES = {
   'Reel$': 'Reel$',
   'Sidebar$': 'Sidebar$',
   'Stack$': 'Stack$',
+  'Base$': 'Base$',
+  'BaseColumn$': 'BaseColumn$',
 }
 
 const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
@@ -42,6 +44,8 @@ const UNEXPECTED_NAMES = {
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',
+  'Base$': '(Base)$',
+  'BaseColumn$': '(BaseColumn)$',
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
@@ -50,7 +54,7 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
-const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
 const asRegex = /^(as|forwardedAs)$/
 const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/
@@ -61,14 +65,12 @@ const includeSectioningAsAttr = (a) => a.name?.name.match(asRegex) && bareTagReg
 const findHeadingAttribute = (a) => headingAttributeRegex.test(a.name?.name || '')
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
- - 'as="section"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
-  - 要素内のHeadingのレベルが自動計算されるようになります。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
 const rootHeadingMessage = `${headingMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageHeadingMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageHeadingInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 
 const VariableDeclaratorBareToSHR = (context, node) => {
@@ -223,6 +225,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/README.md

@@ -73,7 +73,7 @@
   <DatePicker />
   ~
   <DatePicker />
-</Fieldset>
+</FormControl>
 
 <Fieldset title="any heading">
   <FormControl role="group">

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

@@ -9,6 +9,8 @@ const EXPECTED_NAMES = {
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',
+  'Base$': '(Base)$',
+  'BaseColumn$': '(BaseColumn)$',
 }
 
 const UNEXPECTED_NAMES = EXPECTED_NAMES
@@ -16,7 +18,7 @@ const UNEXPECTED_NAMES = EXPECTED_NAMES
 const BARE_SECTIONING_TAG_REGEX = /^(article|aside|nav|section)$/
 const SECTIONING_REGEX = /((A(rticle|side))|Nav|Section)$/
 const SECTIONING_FRAGMENT_REGEX = /^SectioningFragment$/
-const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+const LAYOUT_REGEX = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
 const AS_REGEX = /^(as|forwardedAs)$/
 
 const includeSectioningAsAttr = (a) => a.name?.name?.match(AS_REGEX) && a.value.value?.match(BARE_SECTIONING_TAG_REGEX)
@@ -34,6 +36,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

@@ -24,8 +24,6 @@ const checkFalsyJSXText = (c) => (
   )
 )
 
-const findJustifyAttr = (a) => a.name?.name === 'justify'
-
 const searchChildren = (node) => {
   if (
     node.type === 'JSXFragment' ||
@@ -55,6 +53,9 @@ const searchChildren = (node) => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',
@@ -70,21 +71,56 @@ module.exports = {
           const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
 
           if (matcher) {
+            const layoutType = matcher[1]
+            let justifyAttr = null
+            let alignAttr = null
+            let gapAttr = null
+
+            node.attributes.forEach((a) => {
+              switch (a.name?.name) {
+                case 'justify':
+                  justifyAttr = a
+                  break
+                case 'align':
+                  alignAttr = a
+                  break
+                case 'gap':
+                  gapAttr = a
+                  break
+              }
+            })
+
+            if (layoutType === 'Stack') {
+              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+                return
+              } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
+                context.report({
+                  node,
+                  message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+ - 方法1: 子要素を一つにまとめられないか検討してください
+   - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
+ - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
+   - 子要素が個別に持っているmarginなどのstyleを${nodeName}のgap属性で共通化できないか確認してください
+ - 方法3: 別要素でマークアップし直すか、${nodeName}を削除してください
+   - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
+   - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
+                })
+              }
+            }
+
             const children = node.parent.children.filter(checkFalsyJSXText)
 
             if (children.length === 1) {
-              const layoutType = matcher[1]
-              const justifyAttr = layoutType === 'Cluster' ? node.attributes.find(findJustifyAttr) : null
-
               if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
                 return
               }
 
+
               if (searchChildren(children[0])) {
                 context.report({
                   node,
                   message:
-                    justifyAttr && justifyAttr.value.value === 'center'
+                    (justifyAttr?.value.value === 'center' || 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-heading-in-sectioning-content.js

@@ -13,14 +13,12 @@ const ruleTester = new RuleTester({
 });
 
 const lowerMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
- - 'as=\"section\"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
-  - 要素内のHeadingのレベルが自動計算されるようになります。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
 const message = `${lowerMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
  - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素を含んでいません。
  - SectioningContentはHeadingを含むようにマークアップする必要があります
@@ -74,6 +72,8 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<HogeReel forwardedAs="aside"><div><Heading>hoge</Heading></div></HogeReel>' },
     { code: '<HogeSidebar forwardedAs="nav"><div><Heading>hoge</Heading></div></HogeSidebar>' },
     { code: '<HogeStack forwardedAs="section"><div><Heading>hoge</Heading></div></HogeStack>' },
+    { code: '<HogeBase as="aside"><Heading>hoge</Heading></HogeBase>' },
+    { code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },

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/a11y-prohibit-useless-sectioning-fragment.js

@@ -27,5 +27,7 @@ ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
     { code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
     { code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
     { code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
+    { code: `<SectioningFragment><FugaBase as="article">hoge</FugaBase></SectioningFragment>`, errors: [ { message: error('<FugaBase as="article">') } ] },
+    { code: `<SectioningFragment><FugaBaseColumn as="article">hoge</FugaBaseColumn></SectioningFragment>`, errors: [ { message: error('<FugaBaseColumn as="article">') } ] },
   ]
 })

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

@@ -54,7 +54,9 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
     { 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: `<HogeCluster justify="end" gap={0}>{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,15 @@ 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 でマークアップしてください' } ] },
+    { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+ - 方法1: 子要素を一つにまとめられないか検討してください
+   - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
+ - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
+   - 子要素が個別に持っているmarginなどのstyleをHogeStackのgap属性で共通化できないか確認してください
+ - 方法3: 別要素でマークアップし直すか、HogeStackを削除してください
+   - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
+   - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください` } ] },
   ]
 })