eslint-plugin-smarthr 0.3.14 → 0.3.15

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.3.15](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.14...v0.3.15) (2023-11-29)
+
+
+### Features
+
+* a11y系ruleに "import時のasでのrename内容をチェックする" 処理を追加 ([#90](https://github.com/kufu/eslint-plugin-smarthr/issues/90)) ([2eab779](https://github.com/kufu/eslint-plugin-smarthr/commit/2eab77960985e7c52bd262ff674ae31cb2c6008e))
+
 ### [0.3.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.13...v0.3.14) (2023-11-05)
 
 

package/libs/format_styled_components.js

@@ -3,6 +3,21 @@ const STYLED_COMPONENTS = `${STYLED_COMPONENTS_METHOD}-components`
 
 const findInvalidImportNameNode = (s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== STYLED_COMPONENTS_METHOD
 
+const checkImportStyledComponents = (node, context) => {
+  if (node.source.value !== STYLED_COMPONENTS) {
+    return
+  }
+
+  const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
+
+  if (invalidNameNode) {
+    context.report({
+      node: invalidNameNode,
+      message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"`,
+    });
+  }
+}
+
 const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) => {
   const entriesesTagNames = Object.entries(EXPECTED_NAMES).map(([b, e]) => [ new RegExp(b), new RegExp(e) ])
   const entriesesUnTagNames = UNEXPECTED_NAMES ? Object.entries(UNEXPECTED_NAMES).map(([b, e]) => {
@@ -11,20 +26,27 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
     return [ new RegExp(b), new RegExp(auctualE), messageTemplate ]
   }) : []
 
-  return {
-    ImportDeclaration: (node) => {
-      if (node.source.value !== STYLED_COMPONENTS) {
-        return
-      }
-
-      const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
 
-      if (invalidNameNode) {
+  const checkImportedNameToLocalName = (node, base, extended) => {
+    entriesesTagNames.forEach(([b, e]) => {
+      if (base.match(b) && !extended.match(e)) {
         context.report({
-          node: invalidNameNode,
-          message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"`,
+          node,
+          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
         });
       }
+    })
+  }
+
+  return {
+    ImportDeclaration: (node) => {
+      checkImportStyledComponents(node, context)
+
+      node.specifiers.forEach((s) => {
+        if (s.imported && s.imported.name !== s.local.name) {
+          checkImportedNameToLocalName(node, s.imported.name, s.local.name)
+        }
+      })
     },
     VariableDeclarator: (node) => {
       if (!node.init) {
@@ -64,14 +86,7 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
       if (base) {
         const extended = node.id.name
 
-        entriesesTagNames.forEach(([b, e]) => {
-          if (base.match(b) && !extended.match(e)) {
-            context.report({
-              node,
-              message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
-            });
-          }
-        })
+        checkImportedNameToLocalName(node, base, extended)
 
         entriesesUnTagNames.forEach(([b, e, m]) => {
           const matcher = extended.match(e)

package/package.json

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

package/test/a11y-anchor-has-href-attribute.js

@@ -25,6 +25,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { HogeAnchor as FugaAnchor } from './hoge'` },
+    { code: `import { Link as FugaLink } from './hoge'` },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
     { code: 'const HogeAnchor = styled(Anchor)``' },
@@ -39,6 +41,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Anchor as AnchorHoge } from './hoge'`, errors: [ { message: `AnchorHogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeLink as HogeLinkFuga } from './hoge'`, errors: [ { message: `HogeLinkFugaを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },

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

@@ -22,6 +22,12 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { SmartHRLogo as HogeSmartHRLogo } from './hoge'` },
+    { code: `import { AbcButton as StyledAbcButton } from './hoge'` },
+    { code: `import { HogeAnchor as FugaAnchor } from './hoge'` },
+    { code: `import { Link as FugaLink } from './hoge'` },
+    { code: `import { FugaText as HogeFugaText } from './hoge'` },
+    { code: `import { FugaMessage as HogeFugaMessage } from './hoge'` },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
     { code: 'const HogeButton = styled.button``' },
@@ -128,6 +134,12 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { SmartHRLogo as SmartHRLogoHoge } from './hoge'`, errors: [ { message: `SmartHRLogoHogeを正規表現 "/SmartHRLogo$/" がmatchする名称に変更してください` } ] },
+    { code: `import { AbcButton as AbcButtonFuga } from './hoge'`, errors: [ { message: `AbcButtonFugaを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Anchor as AnchorHoge } from './hoge'`, errors: [ { message: `AnchorHogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeLink as HogeLinkFuga } from './hoge'`, errors: [ { message: `HogeLinkFugaを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
+    { code: `import { FugaText as FugaTextFuga } from './hoge'`, errors: [ { message: `FugaTextFugaを正規表現 "/Text$/" がmatchする名称に変更してください` } ] },
+    { code: `import { FugaMessage as FugaMessageFuga } from './hoge'`, errors: [ { message: `FugaMessageFugaを正規表現 "/Message$/" が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(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },

package/test/a11y-heading-in-sectioning-content.js

@@ -26,6 +26,13 @@ const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
     { code: `import styled from 'styled-components'` },
+    { code: `import { PageHeading as HogePageHeading } from './hoge'` },
+    { code: `import { HogeHeading as FugaHeading } from './hoge'` },
+    { code: `import { HogeArticle as FugaArticle } from './hoge'` },
+    { code: `import { HogeAside as FugaAside } from './hoge'` },
+    { code: `import { HogeNav as FugaNav } from './hoge'` },
+    { code: `import { HogeSection as FugaSection } from './hoge'` },
+    { code: `import { ModelessDialog as FugaModelessDialog } from './hoge'` },
     { code: 'const HogePageHeading = styled.h1``' },
     { code: 'const HogeHeading = styled.h2``' },
     { code: 'const HogeHeading = styled.h3``' },
@@ -47,6 +54,13 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { HogePageHeading as PageHeadingAbc } from './hoge'`, errors: [ { message: `PageHeadingAbcを正規表現 "/PageHeading$/" がmatchする名称に変更してください` }, { message: `PageHeadingAbcを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Heading as HeadingHoge } from './hoge'`, errors: [ { message: `HeadingHogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeArticle as HogeArticleFuga } from './hoge'`, errors: [ { message: `HogeArticleFugaを正規表現 "/Article$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeAside as HogeAsideFuga } from './hoge'`, errors: [ { message: `HogeAsideFugaを正規表現 "/Aside$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeNav as HogeNavFuga } from './hoge'`, errors: [ { message: `HogeNavFugaを正規表現 "/Nav$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeSection as HogeSectionFuga } from './hoge'`, errors: [ { message: `HogeSectionFugaを正規表現 "/Section$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeModelessDialog as HogeModelessDialogFuga } from './hoge'`, errors: [ { message: `HogeModelessDialogFugaを正規表現 "/ModelessDialog$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h1``', errors: [ { message: `Hogeを正規表現 "/PageHeading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h2``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h3``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },

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

@@ -26,6 +26,9 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { HogeImg as FugaImg } from './hoge'` },
+    { code: `import { HogeImage as FugaImage } from './hoge'` },
+    { code: `import { HogeIcon as FugaIcon } from './hoge'` },
     { code: 'const HogeImg = styled.img``' },
     { code: 'const HogeImage = styled.img``' },
     { code: 'const HogeIcon = styled.img``' },
@@ -46,6 +49,9 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { HogeImg as ImgFuga } from './hoge'`, errors: [ { message: `ImgFugaを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeImage as HogeImageFuga } from './hoge'`, errors: [ { message: `HogeImageFugaを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Icon as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
     { 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する名称に変更してください` } ] },

package/test/a11y-input-has-name-attribute.js

@@ -23,6 +23,15 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { Input as HogeInput } from './hoge'` },
+    { code: `import { HogeTextarea as FugaTextarea } from './hoge'` },
+    { code: `import { Select as HogeSelect } from './hoge'` },
+    { code: `import { InputFile as HogeInputFile } from './hoge'` },
+    { code: `import { HogeRadioButton as FugaRadioButton } from './hoge'` },
+    { code: `import { CheckBox as FugaCheckBox } from './hoge'` },
+    { code: `import { HogeComboBox as FugaComboBox } from './hoge'` },
+    { code: `import { DatePicker as HogeDatePicker } from './hoge'` },
+    { code: `import { HogeDropZone as HogeFugaDropZone } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeInput = styled(Input)``' },
     { code: 'const HogeRadioButton = styled(RadioButton)``' },
@@ -43,6 +52,15 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeSelect as SelectFuga } from './hoge'`, errors: [ { message: `SelectFugaを正規表現 "/Select$/" がmatchする名称に変更してください` } ] },
+    { code: `import { InputFile as HogeInputFileFuga } from './hoge'`, errors: [ { message: `HogeInputFileFugaを正規表現 "/InputFile$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeRadioButton as FugaRadioButtonAbc } from './hoge'`, errors: [ { message: `FugaRadioButtonAbcを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
+    { code: `import { CheckBox as FugaCheckBoxHoge } from './hoge'`, errors: [ { message: `FugaCheckBoxHogeを正規表現 "/CheckBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeDropZone as HogeFugaDropZoneAbc } from './hoge'`, errors: [ { message: `HogeFugaDropZoneAbcを正規表現 "/DropZone$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },

package/test/a11y-prohhibit-input-placeholder.js

@@ -17,6 +17,11 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { Input as HogeInput } from './hoge'` },
+    { code: `import { HogeSearchInput as FugaSearchInput } from './hoge'` },
+    { code: `import { HogeTextarea as FugaHogeTextarea } from './hoge'` },
+    { code: `import { ComboBox as FugaHogeComboBox } from './hoge'` },
+    { code: `import { AbcDatePicker as StyledDatePicker } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeTextarea = styled.textarea``' },
     { code: 'const HogeInput = styled(Input)``' },
@@ -44,6 +49,11 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: `import { SearchInput as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },

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

@@ -17,6 +17,12 @@ ruleTester.run('a11y-trigger-has-button', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { DropdownTrigger as HogeDropdownTrigger } from './hoge'` },
+    { code: `import { FugaDialogTrigger as HogeDialogTrigger } from './hoge'` },
+    { code: `import { AbcButton as HogeAbcButton } from './hoge'` },
+    { code: `import { AnchorButton as FugaAnchorButton } from './hoge'` },
+    { code: `import { HogeAnchor as HogeFugaAnchor } from './hoge'` },
+    { code: `import { FugaLink as HogeLink } from './hoge'` },
     { code: 'const HogeButton = styled.button``' },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
@@ -33,6 +39,12 @@ ruleTester.run('a11y-trigger-has-button', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Button as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Link as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
     { 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する名称に変更してください` } ] },