eslint-plugin-smarthr 0.1.2 → 0.1.3

package/.github/CODEOWNERS

@@ -0,0 +1,3 @@
+# https://help.github.com/en/articles/about-code-owners
+
+* @kufu/group-dev-front-linter-reviewers

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.1.3](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.1.2...v0.1.3) (2022-07-05)
+
+
+### Features
+
+* add rules format-translate-component ([#19](https://github.com/kufu/eslint-plugin-smarthr/issues/19)) ([a429e9e](https://github.com/kufu/eslint-plugin-smarthr/commit/a429e9ef31779deb8f08499cfb8cbf00322c58b8))
+* リンク要素内にテキストが設定されていない場合、エラーとなるルールを追加する ([#15](https://github.com/kufu/eslint-plugin-smarthr/issues/15)) ([4bbb9c1](https://github.com/kufu/eslint-plugin-smarthr/commit/4bbb9c1204a8edd068fabcdca497d94ecc1db4a4))
+
+
+### Bug Fixes
+
+* redundant-nameのバグを修正する ([#20](https://github.com/kufu/eslint-plugin-smarthr/issues/20)) ([b733f18](https://github.com/kufu/eslint-plugin-smarthr/commit/b733f1835293c3b478f6d9bb3ebe944041c67038))
+
 ### [0.1.2](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.1.1...v0.1.2) (2022-03-09)
 
 

package/README.md

@@ -1,47 +1,67 @@
 # eslint-plugin-smarthr
 
-## smarthr/a11y-icon-button-has-name
+## smarthr/a11y-clickable-element-has-text
 
-- ボタンの中にIconのみが設置されている場合、アクセシビリティの問題が発生する可能性を防ぐルールです
+- ButtonやAnchor,Link コンポーネントにテキスト要素が設定されていない場合、アクセシビリティの問題が発生する可能性を防ぐルールです
 
 ### rules
 
 ```js
 {
   rules: {
-    'smarthr/a11y-icon-button-has-name': 'error', // 'warn', 'off'
+    'smarthr/a11y-clickable-element-has-text': 'error', // 'warn', 'off'
   },
 }
 ```
 
 ### ❌ Incorrect
 
+```jsx
+<XxxAnchor>
+  <Xxx />
+</XxxAnchor>
+```
+
+```jsx
+<XxxLink>
+  <Yyy />
+</XxxLink>
+```
+
 ```jsx
 <XxxButton>
-  <YyyIcon />
+  <Zzz />
 </XxxButton>
 ```
 
 ### ✅ Correct
 
 ```jsx
-<XxxButton>
-  <YyyIcon />
+<XxxAnchor>
   Hoge
-</XxxButton>
+</XxxAnchor>
 ```
 ```jsx
-<XxxButton>
+<XxxLink>
   <YyyIcon />
-  <AnyComponent />
-</XxxButton>
+  Fuga
+</XxxLink>
 ```
 ```jsx
-<XxxButton>
+<XxxAnchor>>
   <YyyIcon visuallyHiddenText="hoge" />
+</XxxAnchor>
+```
+```jsx
+<XxxButton>
+  <YyyImage alt="fuga" />
 </XxxButton>
 ```
 
+```jsx
+<YyyAnchoor />
+```
+
 ## smarthr/format-import-path
 
 - importする際のpathをフォーマットするruleです
@@ -413,6 +433,8 @@ import { Item } from './Page/parts/Menu'
     - ディレクトリ名から生成されるキーワードに含めたくない文字列を指定します
   - betterNames
     - 対象の名前を修正する候補を指定します
+  - allowedNames
+    - 許可する名前を指定します
   - suffix:
     - type のみ指定出来ます
     - type のsuffixを指定します
@@ -444,6 +466,9 @@ const betterNames = {
     names: ['index'],
   },
 }
+// const allowedNames = {
+//   '\/views\/crews\/histories\/': ['crewId'],
+// }
 
 {
   rules: {
@@ -452,7 +477,7 @@ const betterNames = {
       {
         type: { ignorekeywords, suffix: ['Props', 'Type'] },
         file: { ignorekeywords, betternames },
-        // property: { ignorekeywords },
+        // property: { ignorekeywords, allowedNames },
         // function: { ignorekeywords },
         // variable: { ignorekeywords },
         // class: { ignorekeywords },
@@ -489,3 +514,63 @@ type ItemProps = { hoge: string }
 type IndexProps = { hoge: () => any }
 type ResponseType = { hoge: () => any }
 ``
+
+## smarthr/format-translate-component
+
+- 翻訳用コンポーネントを適用する際のルールを定めます
+
+### rules
+
+```js
+{
+  rules: {
+    'smarthr/format-translate-component': [
+      'error', // 'warn', 'off'
+      {
+        componentName: 'Translate',
+        // componentPath: '@/any/path/Translate',
+        // prohibitAttributies: ['data-translate'],
+      }
+    ]
+  },
+}
+```
+
+### ❌ Incorrect
+
+```jsx
+<Translate><Any>ほげ</Any></Translate>
+```
+
+```jsx
+<Translate><Any /></Translate>
+```
+
+```jsx
+<Translate></Translate>
+```
+
+```jsx
+// prohibitAttributies: ['data-translate'],
+<Any data-translate="true">...</Any>
+```
+
+### ✅ Correct
+
+```jsx
+<Translate>ほげ</Translate>
+```
+```jsx
+<Translate>ほげ<br />ふが</Translate>
+```
+```jsx
+<Translate>{any}</Translate>
+```
+```jsx
+<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />
+```
+```jsx
+// prohibitAttributies: ['data-translate'],
+<Any data-hoge="true">...</Any>
+```
+

package/github/CODEOWNERS

@@ -0,0 +1,3 @@
+# https://help.github.com/en/articles/about-code-owners
+
+* @kufu/group-dev-front-linter-reviewers

package/libs/format_styled_components.js

@@ -0,0 +1,57 @@
+const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
+  ImportDeclaration: (node) => {
+    if (node.source.value !== 'styled-components') {
+      return
+    }
+
+    const invalidNameNode = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== 'styled')
+
+    if (invalidNameNode) {
+      context.report({
+        node: invalidNameNode,
+        messageId: 'format-styled-components',
+        data: {
+          message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`",
+        },
+      });
+    }
+  },
+  TaggedTemplateExpression: (node) => {
+    const { tag } = node
+    const base = (() => {
+      if (tag.type === 'CallExpression' && tag.callee.name === 'styled') {
+        return tag.arguments[0].name
+      }
+
+      if (tag?.object?.name === 'styled') {
+        return tag.property.name
+      }
+
+      return null
+    })()
+
+    if (!base) {
+      return
+    }
+
+    const extended = node.parent.id.name
+
+    Object.entries(EXPECTED_NAMES).forEach(([b, e]) => {
+      if (base.match(new RegExp(b))) {
+        const extendedregex = new RegExp(e)
+
+        if (!extended.match(extendedregex)) {
+          context.report({
+            node: node.parent,
+            messageId: 'format-styled-components',
+            data: {
+              message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
+            },
+          });
+        }
+      }
+    })
+  },
+})
+
+module.exports = { generateTagFormatter }

package/package.json

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

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

@@ -0,0 +1,71 @@
+const { generateTagFormatter } = require('../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(b|B)utton$': 'Button$',
+  'Anchor$': 'Anchor$',
+  'Link$': 'Link$',
+  '^a$': '(Anchor|Link)$',
+}
+
+const filterFalsyJSXText = (cs) => cs.filter((c) => (
+  !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
+))
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-clickable-element-has-text': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXElement: (parentNode) => {
+        // HINT: 閉じタグが存在しない === テキストノードが存在しない
+        if (!parentNode.closingElement) {
+          return
+        }
+
+        const node = parentNode.openingElement
+
+        if (!node.name.name || !node.name.name.match(/^(a|(.*?)Anchor(Button)?|(.*?)Link|(b|B)utton)$/)) {
+          return
+        }
+
+        const recursiveSearch = (c) => {
+          if (['JSXText', 'JSXExpressionContainer'].includes(c.type)) {
+            return true
+          }
+
+          if (c.type === 'JSXElement') {
+            if (c.openingElement.attributes.some((a) => (['visuallyHiddenText', 'alt'].includes(a.name.name) && !!a.value.value))) {
+              return true
+            }
+
+            if (c.children && filterFalsyJSXText(c.children).some(recursiveSearch)) {
+              return true
+            }
+          }
+
+          return false
+        }
+
+        const child = filterFalsyJSXText(parentNode.children).find(recursiveSearch)
+
+        if (!child) {
+          context.report({
+            node,
+            messageId: 'a11y-clickable-element-has-text',
+            data: {
+              message: 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください',
+            },
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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

@@ -0,0 +1,48 @@
+const { generateTagFormatter } = require('../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  'Img$': 'Img$',
+  'Image$': 'Image$',
+  'Icon$': 'Icon$',
+  '^(img|svg)$': '(Img|Image|Icon)$',
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-image-has-alt-attribute': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        if ((node.name.name || '').match(/(img|image)$/i)) { // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
+          const alt = node.attributes.find((a) => a.name.name === 'alt')
+
+          let message = ''
+
+          if (!alt) {
+            message = '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。'
+          } else if (alt.value.value === '') {
+            message = '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。'
+          }
+
+          if (message) {
+            context.report({
+              node,
+              messageId: 'a11y-image-has-alt-attribute',
+              data: {
+                message,
+              },
+            });
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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

@@ -0,0 +1,74 @@
+const { generateTagFormatter } = require('../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  'DropdownTrigger$': 'DropdownTrigger$',
+  'DialogTrigger$': 'DialogTrigger$',
+  '(b|B)utton$': 'Button$',
+  'AnchorButton$': 'AnchorButton$',
+  'ButtonAnchor$': 'ButtonAnchor$',
+  'Anchor$': 'Anchor$',
+  'Link$': 'Link$',
+  '^a$': '(Anchor|Link)$',
+}
+
+const filterFalsyJSXText = (cs) => cs.filter((c) => (
+  !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
+))
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-trigger-has-button': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXElement: (parentNode) => {
+        // HINT: 閉じタグが存在しない === 子が存在しない
+        // 子を持っていない場合はおそらく固定の要素を吐き出すコンポーネントと考えられるため
+        // その中身をチェックすることで担保できるのでskipする
+        if (!parentNode.closingElement) {
+          return
+        }
+
+        const node = parentNode.openingElement
+
+        if (!node.name.name) {
+          return
+        }
+
+        const match = node.name.name.match(/(Dropdown|Dialog)Trigger$/)
+
+        if (!match || node.name.name.match(/HelpDialogTrigger$/)) {
+          return
+        }
+
+        filterFalsyJSXText(parentNode.children).forEach((c) => {
+          // `<DialogTrigger>{button}</DialogTrigger>` のような場合は許可する
+          if (c.type === 'JSXExpressionContainer') {
+            return false
+          }
+
+          if (
+            c.type !== 'JSXElement' ||
+            !c.openingElement.name.name.match(/(b|B)utton$/) ||
+            c.openingElement.name.name.match(/AnchorButton?/)
+          ) {
+            context.report({
+              node: c,
+              messageId: 'a11y-trigger-has-button',
+              data: {
+                message: `${match[1]}Trigger の直下にはbuttonコンポーネントのみ設置してください`,
+              },
+            })
+          }
+        })
+      },
+    }
+  },
+}
+module.exports.schema = []

package/rules/format-translate-component.js

@@ -0,0 +1,97 @@
+const SCHEMA = [
+  {
+    type: 'object',
+    required: [
+      'componentName',
+    ],
+    properties: {
+      componentPath: { type: 'string', default: '' },
+      componentName: { type: 'string' },
+      prohibitAttributies: { type: 'array', items: { type: 'string' }, default: [] },
+    },
+    additionalProperties: false,
+  }
+]
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'format-translate-component': '{{ message }}',
+    },
+    schema: SCHEMA,
+  },
+  create(context) {
+    const { componentPath, componentName, prohibitAttributies } = context.options[0]
+    let JSXAttribute = () => {}
+
+    if (prohibitAttributies) {
+      JSXAttribute = (node) => {
+        const hit = prohibitAttributies.find((a) => a === node.name.name)
+
+        if (hit) {
+          context.report({
+            node,
+            messageId: 'format-translate-component',
+            data: {
+              message: `${hit} 属性は使用せず、 ${componentPath || componentName} コンポーネントを利用してください`,
+            },
+          });
+        }
+      }
+    }
+
+    return {
+      JSXAttribute,
+      JSXOpeningElement: (node) => {
+        // HINT: 翻訳コンポーネントはテキストとbrのみ許容する
+        if (node.name.name === componentName) {
+          let existValidChild = false
+          let existNotBrElement = false
+
+          node.parent.children.forEach((c) => {
+            switch (c.type) {
+              case 'JSXText': 
+                // HINT: 空白と改行のみの場合はテキストが存在する扱いにはしない
+                if (c.value.replace(/(\s|\n)+/g, '')) {
+                  existValidChild = true
+                }
+
+                break
+              case 'JSXExpressionContainer': 
+                // TODO 変数がstringのみか判定できるなら対応したい
+                existValidChild = true
+
+                break
+              case 'JSXElement': 
+                if (c.openingElement.name.name !== 'br') {
+                  existNotBrElement = true
+                }
+
+                break
+            }
+          })
+
+          const message = (() => {
+            if (existNotBrElement) {
+              return `${componentName} 内では <br /> 以外のタグは使えません`
+            } else if (!existValidChild && !node.attributes.some((a) => a.name.name === 'dangerouslySetInnerHTML')) {
+              return `${componentName} 内には必ずテキストを設置してください`
+            } 
+          })()
+
+          if (message) {
+            context.report({
+              node,
+              messageId: 'format-translate-component',
+              data: {
+                message,
+              },
+            });
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/rules/redundant-name.js

@@ -48,6 +48,10 @@ const DEFAULT_SCHEMA_PROPERTY = {
       },
     },
   },
+  allowedNames: {
+    type: 'array',
+    items: 'string',
+  },
 }
 
 const SCHEMA = [
@@ -91,9 +95,11 @@ const generateRedundantKeywords = ({ args, key, terminalImportName }) => {
       return prev
     }
 
-    const singularized = Inflector.singularize(keyword)
-
-    return singularized === keyword ? [...prev, keyword] : [...prev, keyword, singularized]
+    return [...prev, ...uniq([
+      Inflector.pluralize(keyword),
+      keyword,
+      Inflector.singularize(keyword),
+    ])]
   }, [])
 }
 const handleReportBetterName = ({
@@ -113,7 +119,11 @@ const handleReportBetterName = ({
   return (node) => {
     const name = fetchName(node)
 
-    if (!name) {
+    if (
+      !name ||
+      option.allowedNames &&
+      Object.entries(option.allowedNames).find(([regex, calcs]) => filename.match(new RegExp(regex)) && calcs.find((c) => c === name))
+    ) {
       return
     }
 

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

@@ -0,0 +1,142 @@
+const rule = require('../rules/a11y-clickable-element-has-text')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const defaultErrorMessage = 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください'
+
+ruleTester.run('a11y-clickable-element-has-text', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeButton = styled.button``' },
+    { code: 'const HogeAnchor = styled(Anchor)``' },
+    { code: 'const HogeLink = styled(Link)``' },
+    { code: 'const HogeButton = styled(Button)``' },
+    { code: 'const FugaAnchor = styled(HogeAnchor)``' },
+    {
+      code: `<a>ほげ</a>`,
+    },
+    {
+      code: `<Link>ほげ</Link>`,
+    },
+    {
+      code: `<HogeLink>ほげ</HogeLink>`,
+    },
+    {
+      code: `<Anchor>ほげ</Anchor>`,
+    },
+    {
+      code: `<FugaAnchor>ほげ</FugaAnchor>`,
+    },
+    {
+      code: `<AnchorButton>ほげ</AnchorButton>`,
+    },
+    {
+      code: `<HogaAnchorButton>ほげ</HogaAnchorButton>`,
+    },
+    {
+      code: `<Button>ほげ</Button>`,
+    },
+    {
+      code: `<a />`,
+    },
+    {
+      code: `<button />`,
+    },
+    {
+      code: `<Anchor />`,
+    },
+    {
+      code: `<Link />`,
+    },
+    {
+      code: `<Button />`,
+    },
+    {
+      code: `<HogeButton />`,
+    },
+    {
+      code: `<a><span>ほげ</span></a>`,
+    },
+    {
+      code: `<a><AnyComponent>ほげ</AnyComponent></a>`,
+    },
+    {
+      code: `<a><img src="hoge.jpg" alt="ほげ" /></a>`,
+    },
+    {
+      code: `<a><Icon visuallyHiddenText="ほげ" /></a>`,
+    },
+    {
+      code: `<a><AnyComponent><Icon visuallyHiddenText="ほげ" /></AnyComponent></a>`,
+    },
+    {
+      code: `<a>{any}</a>`,
+    },
+    {
+      code: `<a><span>{any}</span></a>`,
+    },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    {
+      code: `<a><img src="hoge.jpg" /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><Any /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><span><Any /></span></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><img src="hoge.jpg" alt="" /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<a><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><img src="hoge.jpg" /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><Any /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><span><Any /></span></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><img src="hoge.jpg" alt="" /></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+    {
+      code: `<button><AnyComponent><Icon visuallyHiddenText="" /></AnyComponent></button>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
+  ]
+})

package/test/a11y-image-has-alt-attribute.js

@@ -0,0 +1,44 @@
+const rule = require('../rules/a11y-image-has-alt-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-image-has-alt-attribute', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeImg = styled.img``' },
+    { code: 'const HogeImage = styled.img``' },
+    { code: 'const HogeIcon = styled.img``' },
+    { code: 'const HogeImg = styled.svg``' },
+    { code: 'const HogeImage = styled.svg``' },
+    { code: 'const HogeIcon = styled.svg``' },
+    { code: 'const HogeImg = styled(Img)``' },
+    { code: 'const HogeImage = styled(Image)``' },
+    { code: 'const HogeIcon = styled(ICon)``' },
+    { code: '<img alt="hoge" />' },
+    { code: '<HogeImg alt="hoge" />' },
+    { code: '<HogeImage alt="hoge" />' },
+    { code: '<HogeIcon />' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.img``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.svg``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Img)``', errors: [ { message: `Hogeを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Image)``', errors: [ { message: `Hogeを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
+    { code: '<img />', errors: [ { message: '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。' } ] },
+    { code: '<HogeImage alt="" />', errors: [ { message: '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。' } ] },
+  ]
+})

package/test/a11y-trigger-has-button.js

@@ -0,0 +1,50 @@
+const rule = require('../rules/a11y-trigger-has-button')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-trigger-has-button', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeButton = styled.button``' },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeButton = styled(Button)``' },
+    { code: 'const HogeButtonAnchor = styled(ButtonAnchor)``' },
+    { code: 'const HogeAnchorButton = styled(AnchorButton)``' },
+    { code: 'const HogeLink = styled(FugaLink)``' },
+    { code: 'const HogeAnchor = styled(FugaAnchor)``' },
+    { code: 'const HogeDialogTrigger = styled(DialogTrigger)``' },
+    { code: 'const HogeDropdownTrigger = styled(DropdownTrigger)``' },
+    { code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
+    { code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
+    { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ]  },
+    { code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+    { code: '<DropdownTrigger><ButtonAnchor>ほげ</ButtonAnchor></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ]  },
+  ]
+})

package/test/format-translate-component.js

@@ -0,0 +1,37 @@
+const rule = require('../rules/format-translate-component')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const options = [
+  {
+    componentPath: '@/any/path/Translate',
+    componentName: 'Translate',
+    prohibitAttributies: ['data-translate'],
+  }
+]
+
+ruleTester.run('format-translate-component', rule, {
+  valid: [
+    { code: '<Any data-wovn-enable="true">ほげ</Any>', options },
+    { code: '<Translate>ほげ</Translate>', options },
+    { code: '<Translate>ほげ<br />ふが</Translate>', options },
+    { code: '<Translate>{any}</Translate>', options },
+    { code: '<Translate dangerouslySetInnerHTML={{ __html: "ほげ" }} />', options },
+  ],
+  invalid: [
+    { code: '<Any data-translate="true">ほげ</Any>', options, errors: [ { message: 'data-translate 属性は使用せず、 @/any/path/Translate コンポーネントを利用してください' } ] },
+    { code: '<Translate><Any>ほげ</Any></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate><Any /></Translate>', options, errors: [ { message: 'Translate 内では <br /> 以外のタグは使えません' } ] },
+    { code: '<Translate></Translate>', options, errors: [ { message: 'Translate 内には必ずテキストを設置してください' } ] },
+  ]
+})

package/rules/a11y-icon-button-has-name.js

@@ -1,56 +0,0 @@
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    messages: {
-      'a11y-icon-button-has-name': '{{ message }}',
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        if (!node.name.name || !node.name.name.match(/Button(Anchor)?$/)) {
-          return
-        }
-
-        const children = node.parent.children.filter((c) => (
-          !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
-        ))
-
-        if (children.length === 0) {
-          return
-        }
-
-        let existIcon = false
-        let existNoIcon = false
-        let targetNode = node
-
-        const child = children.find((c) => {
-          if (c.type === 'JSXElement' && c.openingElement.name.name.match(/Icon$/)) {
-            existIcon = true
-            targetNode = c
-
-            if (!existNoIcon) {
-              existNoIcon = c.openingElement.attributes.some((a) => a.name.name === 'visuallyHiddenText')
-            }
-          } else {
-            existNoIcon = true
-          }
-
-          return existIcon && !existNoIcon
-        })
-
-        if (child) {
-          context.report({
-            node: targetNode,
-            messageId: 'a11y-icon-button-has-name',
-            data: {
-              message: `Button 内に Icon のみを設置する場合、Icon に visuallyHiddenText props を指定してください`,
-            },
-          });
-        }
-      },
-    }
-  },
-}
-module.exports.schema = []