eslint-plugin-smarthr 0.1.3 → 0.2.2

package/rules/{a11y-clickable-element-has-text.js → a11y-clickable-element-has-text/index.js}

@@ -1,4 +1,4 @@
-const { generateTagFormatter } = require('../libs/format_styled_components')
+const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_NAMES = {
   '(b|B)utton$': 'Button$',

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.js → a11y-image-has-alt-attribute/index.js}

@@ -1,4 +1,4 @@
-const { generateTagFormatter } = require('../libs/format_styled_components')
+const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_NAMES = {
   'Img$': 'Img$',

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.js → a11y-trigger-has-button/index.js}

@@ -1,4 +1,4 @@
-const { generateTagFormatter } = require('../libs/format_styled_components')
+const { generateTagFormatter } = require('../../libs/format_styled_components')
 
 const EXPECTED_NAMES = {
   'DropdownTrigger$': 'DropdownTrigger$',

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/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" />
+```

package/rules/no-import-other-domain/README.md

@@ -0,0 +1,85 @@
+# smarthr/no-import-other-domain
+
+- ドメイン外からのimportを防ぐruleです
+  - 例: crews/index 以下からのimportはOK, crews/index から crews/show 以下をimportするとNG
+- ディレクトリ構造からドメインを識別して判定することが出来ます
+
+## 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/no-import-other-domain': [
+      'error', // 'warn', 'off'
+      {
+        ...DOMAIN_RULE_ARGS,
+        // analyticsMode: 'all', // 'same-domain', 'another-domain'
+      }
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+// crews/index/views/index.js
+
+import showPart1 from '@/crews/show/views/parts'
+import showPart2 from '../../show/views/parts'
+```
+
+## ✅ 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 globalModulePart from '@/modules/views/parts'
+```

package/rules/{no-import-other-domain.js → no-import-other-domain/index.js}

@@ -1,7 +1,7 @@
 const path = require('path')
 const fs = require('fs')
-const { replacePaths, rootPath } = require('../libs/common')
-const { BASE_SCHEMA_PROPERTIES, calculateDomainContext, calculateDomainNode } = require('../libs/common_domain')
+const { replacePaths, rootPath } = require('../../libs/common')
+const { BASE_SCHEMA_PROPERTIES, calculateDomainContext, calculateDomainNode } = require('../../libs/common_domain')
 
 const SCHEMA = [
   {

package/rules/prohibit-export-array-type/README.md

@@ -0,0 +1,28 @@
+# smarthr/prohibit-export-array-type
+
+- 配列の型をexport出来ないように制御するルールです
+- 利用するファイルで `ItemProps[]` のように配列指定を強制する目的などで利用できます
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/prohibit-export-array-type': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+type Item = { attr: string }
+export type Items = Item[]
+```
+
+## ✅ Correct
+
+
+```js
+export type Item = { attr: string }
+```

package/rules/prohibit-export-array-type/index.js

@@ -0,0 +1,28 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'prohibit-export-array-type': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    const checker = (node) => {
+      if (node.declaration?.typeAnnotation?.type === 'TSArrayType') {
+        context.report({
+          node,
+          messageId: 'prohibit-export-array-type',
+          data: {
+            message: '利用する際、配列かどうかわかりにくいため、配列ではない状態でexportしてください',
+          },
+        })
+      }
+    }
+
+    return {
+      ExportDefaultDeclaration: checker,
+      ExportNamedDeclaration: checker,
+    }
+  },
+}
+module.exports.schema = []

package/rules/prohibit-file-name/README.md

@@ -0,0 +1,35 @@
+# smarthr/prohibit-file-name
+
+- 正規表現に合致するファイル、ディレクトリの作成を阻害するルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/prohibit-file-name': [
+      'error', // 'warn', 'off'
+      {
+        '\/(actions|reducers)\/$': 'slicesディレクトリ内でcreateSliceを利用してください',
+        '\/views\/(page|template)\.(ts(x)?)$': 'index.$2、もしくはTemplate.$2にリネームしてください',
+        '\/modules\/(adapters|entities|repositories|slices)\/index\.ts(x)?$': '利用目的が推測出来ない為、リネームしてください(例: new, edit用ならform.tsなど)',
+      },
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```js
+// src/pages/actions/index.ts
+// src/modules/entities/index.ts
+```
+
+## ✅ Correct
+
+
+```js
+// src/pages/slices/index.ts
+// src/modules/entities/item.ts
+```

package/rules/prohibit-file-name/index.js

@@ -0,0 +1,61 @@
+const SCHEMA = [{
+  type: 'object',
+  patternProperties: {
+    '.+': {
+      type: 'string',
+    },
+  },
+  additionalProperties: true,
+}]
+
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'prohibit-file-name': '{{ message }}',
+    },
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0]
+    const filename = context.getFilename()
+    const targetPaths = Object.keys(options).filter((regex) => !!filename.match(new RegExp(regex)))
+
+
+    if (targetPaths.length === 0) {
+      return {}
+    }
+
+    const messages = []
+
+    targetPaths.forEach((path) => {
+      const message = options[path]
+
+      matcher = filename.match(new RegExp(path))
+
+      if (matcher) {
+        messages.push([...matcher].reduce(((prev, k, index) => prev.replaceAll(`\$${index}`, k)), message))
+      }
+    })
+
+    if (messages.length === 0) {
+      return {}
+    }
+
+    return {
+      Program: (node) => {
+        messages.forEach((message) => {
+          context.report({
+            node,
+            messageId: 'prohibit-file-name',
+            data: {
+              message,
+            },
+          })
+        })
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA