eslint-plugin-smarthr 0.1.2 → 0.2.1

package/rules/a11y-clickable-element-has-text/index.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/README.md

@@ -0,0 +1,55 @@
+# smarthr/a11y-image-has-alt-attribute
+
+- 画像やアイコンにalt属性を設定することを強制するルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-image-has-alt-attribute': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Img />
+```
+```jsx
+<Image>
+  <Any />
+</Image>
+```
+```jsx
+<Icon />
+```
+```jsx
+import styled from 'styled-components'
+
+const StyledHoge = styled.img``
+const StyledFuga = styled(Img)``
+const StyledPiyo = styled(Icon)``
+```
+
+## ✅ Correct
+
+```jsx
+<Img alt="message" />
+```
+```jsx
+<Image alt="message">
+  <Any />
+</Image>
+```
+```jsx
+<Icon alt="message" />
+```
+```jsx
+import styled from 'styled-components'
+
+const StyledImage = styled.img``
+const StyledImg = styled(Img)``
+const StyledIcon = styled(Icon)``
+```

package/rules/a11y-image-has-alt-attribute/index.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/README.md

@@ -0,0 +1,57 @@
+# smarthr/a11y-trigger-has-button
+
+- DropdownTriggerやDialogTriggerの直下にButtonを設置することを強制するルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-trigger-has-button': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<DropdownTrigger>
+  <Xxx />
+</DropdownTrigger>
+```
+```jsx
+<DialogTrigger>
+  <Yyy />
+</DialogTrigger>
+```
+```jsx
+import styled from 'styled-components'
+
+const StyledHoge = styled.a``
+const StyledFuga = styled.button``
+const StyledAnchor = styled(Link)``
+const StyledBtn = styled(Button)``
+const StyledPiyo = styled(DropdownTrigger)``
+```
+
+## ✅ Correct
+
+```jsx
+<DropdownTrigger>
+  <Button />
+</DropdownTrigger>
+```
+```jsx
+<DialogTrigger>
+  <XxxButton />
+</DialogTrigger>
+```
+```jsx
+import styled from 'styled-components'
+
+const StyledAnchor = styled.a``
+const StyledButton = styled.button``
+const StyledLink = styled(Link)``
+const StyledButton = styled(Button)``
+const StyledDropdownTrigger = styled(DropdownTrigger)``
+```

package/rules/a11y-trigger-has-button/index.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/best-practice-for-date/README.md

@@ -0,0 +1,40 @@
+# smarthr/best-practice-for-date
+
+- `new Date(arg)` と `Date.parse(arg)` を禁止するルールです
+  - `new Date()` と`new Date(year, month, date)` などのように引数が1つ以外の場合は許容します
+- これらはブラウザの実装によっては意図しない日付として解釈されてしまう問題を回避するためのものです
+  - [Date オブジェクトを生成するいくつかの方法](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date#date_%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E3%81%84%E3%81%8F%E3%81%A4%E3%81%8B%E3%81%AE%E6%96%B9%E6%B3%95)
+  - [Date.parse](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date#date.parse)
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-date': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+new Date('2022/12/31')
+
+new Date(arg)
+
+Date.parse(value)
+```
+
+## ✅ Correct
+
+
+```js
+new Date(2022, 11, 31)
+
+const args = arg.split('/')
+new Date(args[0], parseInt(args[1], 10) - 1, args[2])
+
+// use dayjs
+dayjs(arg)
+```

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

@@ -0,0 +1,42 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'best-practice-for-date': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      NewExpression: (node) => {
+        if (
+          node.callee.name === 'Date' &&
+          node.arguments.length == 1
+        ) {
+          context.report({
+            node,
+            messageId: 'best-practice-for-date',
+            data: {
+              message: "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。",
+            },
+          });
+        }
+      },
+      CallExpression: (node) => {
+        if (
+          node.callee.object?.name === 'Date' &&
+          node.callee.property?.name === 'parse'
+        ) {
+          context.report({
+            node,
+            messageId: 'best-practice-for-date',
+            data: {
+              message: 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください',
+            },
+          });
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

package/rules/format-import-path/README.md

@@ -0,0 +1,99 @@
+# smarthr/format-import-path
+
+- importする際のpathをフォーマットするruleです
+- ディレクトリ構造からドメインを識別して相対パス、絶対パスいずれかにするかを判定することが出来ます
+  - 例: crews/index 以下同士でのimportは相対パス、crews/index外のファイルimportする場合は絶対パスにする
+- eslint を `--fix` オプション付きで実行すると自動的にパスを置き換えます
+
+## config
+
+- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
+- ドメインを識別するために以下の設定を記述する必要があります
+  - globalModuleDir
+    - 全体で利用するファイルを収めているディレクトリを相対パスで指定します
+  - domainModuleDir:
+    - ドメイン内で共通のファイルを収めているディレクトリ名を指定します
+  - domainConstituteDir
+    - ドメインを構築するディレクトリ名を指定します
+
+### ディレクトリ例
+```
+/ constants
+/ modules  // 全体共通ディレクトリ
+/ crews
+  / modules // 共通ディレクトリ
+    / views
+      / parts
+  / index
+    / adapters
+      / index.ts
+      / hoge.ts
+    / slices
+      / index.ts
+    / views
+      / index.ts
+      / parts
+        / Abc.ts
+  / show
+    / views
+      / parts
+```
+
+### 指定例
+```
+const DOMAIN_RULE_ARGS = {
+  globalModuleDir: [ './constants', './modules' ],
+  domainModuleDir: [ 'modules' ],
+  domainConstituteDir: [ 'adapters', 'slices', 'views', 'parts' ],
+}
+```
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/format-import-path': [
+      'error', // 'warn', 'off'
+      {
+        ...DOMAIN_RULE_ARGS,
+        format: {
+          // 'relative', 'auto', 'none'
+          // all: 'absolute',
+          outside: 'auto',
+          globalModule: 'absolute',
+          module: 'relative',
+          domain: 'relative',
+          lower: 'relative',
+        },
+      },
+    ],
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+// crews/index/views/index.js
+
+import slice from '@/crews/index/slice'
+import hoge from '@/crews/index/adapter/hoge'
+import Abc from '@/crews/index/views/parts/Abc'
+import modulePart from '@/crews/modules/views/part'
+import showPart from '../../show/views/parts'
+import globalModulePart from '../../../module/views/part'
+```
+
+## ✅ Correct
+
+```js
+// crews/index/views/index.js
+
+import slice from '../slice'
+import hoge from '../adapter/hoge'
+import Abc from './parts/Abc'
+import modulePart from '../../modules/views/parts'
+import showPart from '@/crews/show/views/parts'
+import globalModulePart from '@/modules/views/parts'
+```

package/rules/{format-import-path.js → format-import-path/index.js}

@@ -1,6 +1,6 @@
 const path = require('path')
-const { replacePaths } = require('../libs/common')
-const { BASE_SCHEMA_PROPERTIES, calculateDomainContext, calculateDomainNode } = require('../libs/common_domain')
+const { replacePaths } = require('../../libs/common')
+const { BASE_SCHEMA_PROPERTIES, calculateDomainContext, calculateDomainNode } = require('../../libs/common_domain')
 
 const SCHEMA_FORMAT_PROPERTY = { type: 'string', pattern: '^(none|absolute|relative|auto)$', default: 'none'}
 const SCHEMA = [

package/rules/format-translate-component/README.md

@@ -0,0 +1,58 @@
+# 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/rules/format-translate-component/index.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/jsx-start-with-spread-attributes/README.md

@@ -0,0 +1,31 @@
+# smarthr/jsx-start-with-spread-attributes
+
+- jsxを記述する際、意図しない属性の上書きを防ぐため、spread-attributesを先に指定するように強制するruleです
+- eslint を `--fix` オプション付きで実行する際、 fix option を true にすると自動修正します
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/jsx-start-with-spread-attributes': [
+      'error', // 'warn', 'off'
+      {
+        fix: false, // true
+      },
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<AnyComponent hoge="hoge" {...props} />
+```
+
+## ✅ Correct
+
+```jsx
+<AnyComponent {...props} hoge="hoge" />
+```