eslint-plugin-smarthr 2.4.0 → 3.0.0

package/rules/a11y-required-layout-as-attribute/README.md

@@ -1,54 +0,0 @@
-# smarthr/a11y-required-layout-as-attribute
-
-- smarthr-ui/Layoutに属するコンポーネントはデフォルトではdiv要素を出力します
-- そのため他の一部コンポーネントとの組み合わせによってはinvalidなマークアップになる場合が起こり得ます
-  - 例: FormControlのtitle属性内でClusterを使うと `label > div` の構造になるためinvalid
-- 対象コンポーネントの使用方法をチェックし、適切なマークアップになるよう、as・forwardedAs属性の利用を促します
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-required-layout-as-attribute': [
-      'error', // 'warn', 'off'
-    ]
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<Heading>
-  <Cluster>any</Cluster>
-</Heading>
-
-<HogeFormControl title={
-  <FugaCluster>any</FugaCluster>
-} />
-
-<StyledFieldset title={
-  <Cluster>any</Cluster>
-}>
-  // any
-</StyledFieldset>
-```
-
-## ✅ Correct
-
-```jsx
-<Heading>
-  <Cluster as="span">any</Cluster>
-</Heading>
-
-<HogeFormControl title={
-  <FugaCluster forwardedAs="span">any</FugaCluster>
-} />
-
-<StyledFieldset title={
-  <Cluster as="strong">any</Cluster>
-}>
-  // any
-</StyledFieldset>
-```

package/rules/a11y-required-layout-as-attribute/index.js

@@ -1,65 +0,0 @@
-const layoutRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
-const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
-const asRegex = /^(as|forwardedAs)$/
-const formControlRegex = /(FormControl|Fieldset)$/
-
-const findAsAttr = (a) => a.name?.name.match(asRegex)
-
-const searchBubbleUp = (node) => {
-  switch (node.type) {
-    case 'Program':
-      // rootまで検索した場合は確定でエラーにする
-      return null
-    case 'JSXElement': {
-      const name = node.openingElement.name.name || ''
-
-      if (headingRegex.test(name)) {
-        return name
-      }
-
-      break
-    }
-    case 'JSXAttribute': {
-      const name = node.name.name || ''
-
-      if (name === 'title' && formControlRegex.test(node.parent.name.name)) {
-        return `${node.parent.name.name}のtitle属性`
-      }
-    }
-  }
-
-  return searchBubbleUp(node.parent)
-}
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: [],
-  },
-  create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        const name = node.name.name || ''
-
-        if (layoutRegex.test(name) && !node.attributes.some(findAsAttr)) {
-          const parentName = searchBubbleUp(node.parent.parent)
-
-          if (parentName) {
-            context.report({
-              node,
-              message: `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
- - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
- - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
- - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`,
-            })
-          }
-        }
-      },
-    }
-  },
-}
-
-module.exports.schema = []

package/test/a11y-required-layout-as-attribute.js

@@ -1,34 +0,0 @@
-const rule = require('../rules/a11y-required-layout-as-attribute')
-const RuleTester = require('eslint').RuleTester
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-const generateErrorText = (parentName, name) => `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
- - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
- - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
- - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`
-
-ruleTester.run('a11y-anchor-has-href-attribute', rule, {
-  valid: [
-    { code: `<h1><Cluster as="span">ほげ</Cluster></h1>` },
-    { code: `<Heading><Cluster as="strong" /></Heading>` },
-    { code: `<StyledHeading><AnyCluster forwardedAs="span" /></StyledHeading>` },
-    { code: `<FormControl title={<Cluster as="span" />} />` },
-    { code: `<StyledFieldset title={<AnyCluster forwardedAs="strong" />} />` },
-  ],
-  invalid: [
-    { code: `<h1><Cluster>ほげ</Cluster></h1>`, errors: [{ message: generateErrorText('h1', 'Cluster') }] },
-    { code: `<Heading><Cluster /></Heading>`, errors: [{ message: generateErrorText('Heading', 'Cluster') }] },
-    { code: `<StyledHeading><AnyCluster /></StyledHeading>`, errors: [{ message: generateErrorText('StyledHeading', 'AnyCluster') }] },
-    { code: `<FormControl title={<Cluster />} />`, errors: [{ message: generateErrorText('FormControlのtitle属性', 'Cluster') }] },
-    { code: `<StyledFieldset title={<AnyCluster />} />`, errors: [{ message: generateErrorText('StyledFieldsetのtitle属性', 'AnyCluster') }] },
-  ]
-})