eslint-plugin-smarthr 0.1.2 → 0.2.1

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,33 @@
 
 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.2.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.0...v0.2.1) (2022-08-15)
+
+
+### Features
+
+* 新しいルールの追加 (require-export, prohibit-file-name, prohibit-export-array-type, best-practice-for-date ) ([#22](https://github.com/kufu/eslint-plugin-smarthr/issues/22)) ([ddb7433](https://github.com/kufu/eslint-plugin-smarthr/commit/ddb7433c0f26d64043cdcec353143240eceeccee))
+
+### [0.2.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.1.2...v0.2.0) (2022-07-05)
+
+### ⚠ BREAKING CHANGES
+
+* BREAKING CHANGE: a11-xxxx-has-text を a11-clickable-element-has-text に統一する ([#16](https://github.com/kufu/eslint-plugin-smarthr/pull/16)
+
+
+### [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,491 +1,17 @@
 # eslint-plugin-smarthr
 
-## smarthr/a11y-icon-button-has-name
-
-- ボタンの中にIconのみが設置されている場合、アクセシビリティの問題が発生する可能性を防ぐルールです
-
-### rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-icon-button-has-name': 'error', // 'warn', 'off'
-  },
-}
-```
-
-### ❌ Incorrect
-
-```jsx
-<XxxButton>
-  <YyyIcon />
-</XxxButton>
-```
-
-### ✅ Correct
-
-```jsx
-<XxxButton>
-  <YyyIcon />
-  Hoge
-</XxxButton>
-```
-```jsx
-<XxxButton>
-  <YyyIcon />
-  <AnyComponent />
-</XxxButton>
-```
-```jsx
-<XxxButton>
-  <YyyIcon visuallyHiddenText="hoge" />
-</XxxButton>
-```
-
-## 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'
-```
-
-## 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" />
-```
-
-
-
-## 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'
-```
-
-## smarthr/prohibit-import
-
-- 例えば特定の module にバグが発見されたなど、importさせたくない場合に利用するルールです
-
-### rules
-
-```js
-{
-  rules: {
-    'smarthr/prohibit-import': [
-      'error', // 'warn', 'off'
-      {
-        '^.+$': {
-          'smarthr-ui': {
-            imported: ['SecondaryButtonAnchor'],
-            reportMessage: `{{module}}/{{export}} はXxxxxxなので利用せず yyyy/zzzz を利用してください`
-          }, 
-        }
-        '\/pages\/views\/': {
-          'query-string': {
-            imported: true,
-          },
-        },
-      }
-    ]
-  },
-}
-```
-
-### ❌ Incorrect
-
-```js
-// src/pages/views/Page.tsx
-import queryString from 'query-string'
-import { SecondaryButtonAnchor } from 'smarthr-ui'
-```
-
-### ✅ Correct
-
-
-```js
-// src/pages/views/Page.tsx
-import { PrimaryButton, SecondaryButton } from 'smarthr-ui'
-```
-
-## smarthr/require-import
-
-- 対象ファイルにimportを強制させたい場合に利用します
-  - 例: Page.tsx ではページタイトルを設定させたいので useTitle を必ずimportさせたい
-
-### rules
-
-```js
-{
-  rules: {
-    'smarthr/require-import': [
-      'error',
-      {
-        'Buttons\/.+\.tsx': {
-          'smarthr-ui': {
-            imported: ['SecondaryButton'],
-            reportMessage: 'Buttons以下のコンポーネントでは {{module}}/{{export}} を拡張するようにしてください',
-          },
-        },
-        'Page.tsx$': {
-          './client/src/hooks/useTitle': {
-            imported: true,
-            reportMessage: '{{module}} を利用してください（ページタイトルを設定するため必要です）',
-          },
-        },
-      },
-    ]
-  },
-}
-```
-
-### ❌ Incorrect
-
-```js
-// client/src/Buttons/SecondaryButton.tsx
-import { SecondaryButtonAnchor } from 'smarthr-ui'
-
-// client/src/Page.tsx
-import { SecondaryButton } from 'smarthr-ui'
-```
-
-### ✅ Correct
-
-
-```js
-// client/src/Buttons/SecondaryButton.tsx
-import { SecondaryButton } from 'smarthr-ui'
-
-// client/src/Page.tsx
-import useTitle from '.hooks/useTitle'
-```
-
-## smarthr/require-barrel-import
-
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
-- importした対象が本来exportされているべきであるbarrel(index.tsなど)が有る場合、import pathの変更を促します
-  - 例: Page/parts/Menu/Item の import は Page/parts/Menu から行わせたい
-- ディレクトリ内のindexファイルを捜査し、対象を決定します
-
-### rules
-
-```js
-{
-  rules: {
-    'smarthr/require-barrel-import': 'error',
-  },
-}
-```
-
-### ❌ Incorrect
-
-```js
-// client/src/views/Page/parts/Menu/index.ts
-export { Menu } from './Menu'
-export { Item } from './Item'
-
-// client/src/App.tsx
-import { Item } from './Page/parts/Menu/Item'
-```
-
-### ✅ Correct
-
-
-```js
-// client/src/views/Page/parts/Menu/index.ts
-export { Menu } from './Menu'
-export { Item } from './Item'
-
-// client/src/App.tsx
-import { Item } from './Page/parts/Menu'
-```
-
-
-## smarthr/redundant-name
-
-- ファイル、コードの冗長な部分を取り除くことを提案するruleです
-- ファイルが設置されているディレクトリ構造からキーワードを生成し、取り除く文字列を生成します
-
-### config
-
-- tsconfig.json の compilerOptions.pathsに '@/*' としてroot path を指定する必要があります
-- 以下の設定を行えます。全て省略可能です。
-  - ignoreKeywords
-    - ディレクトリ名から生成されるキーワードに含めたくない文字列を指定します
-  - betterNames
-    - 対象の名前を修正する候補を指定します
-  - suffix:
-    - type のみ指定出来ます
-    - type のsuffixを指定します
-
-#### ファイル例
-- `@/crews/index/views/page.tsx` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'page']`
-- `@/crews/index/views/parts/Abc.tsx` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'Abc']`
-- `@/crews/index/repositories/index.ts` の場合
-  - 生成されるキーワードは `['crews', 'crew', 'index', 'repositories', 'repository']`
-
-
-### rules
-
-```js
-const ignorekeywords = ['views', 'parts']
-const betterNames = {
-  '\/repositories\/': {
-    operator: '-',
-    names: ['repository', 'Repository'],
-  },
-  '\/entities\/': {
-    operator: '+',
-    names: ['entity'],
-  },
-  '\/slices\/': {
-    operator: '=',
-    names: ['index'],
-  },
-}
-
-{
-  rules: {
-    'smarthr/redundant-name': [
-      'error', // 'warn', 'off'
-      {
-        type: { ignorekeywords, suffix: ['Props', 'Type'] },
-        file: { ignorekeywords, betternames },
-        // property: { ignorekeywords },
-        // function: { ignorekeywords },
-        // variable: { ignorekeywords },
-        // class: { ignorekeywords },
-      }
-    ]
-  },
-}
-```
-
-### ❌ Incorrect
-
-```js
-// @/crews/index/views/page.tsx
-
-type CrewIndexPage = { hoge: string }
-type CrewsView = { hoge: string }
-```
-```js
-// @/crews/show/repositories/index.tsx
-
-type CrewIndexRepository = { hoge: () => any }
-```
-
-### ✅ Correct
-
-```js
-// @/crews/index/views/page.tsx
-
-type ItemProps = { hoge: string }
-```
-```js
-// @/crews/show/repositories/index.tsx
-
-type IndexProps = { hoge: () => any }
-type ResponseType = { hoge: () => any }
-``
+- [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
+- [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
+- [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
+- [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
+- [format-import-path](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-import-path)
+- [format-translate-component](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-translate-component)
+- [jsx-start-with-spread-attributes](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/jsx-start-with-spread-attributes)
+- [no-import-other-domain](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/no-import-other-domain)
+- [prohibit-export-array-type](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-export-array-type)
+- [prohibit-file-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-file-name)
+- [prohibit-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/prohibit-import)
+- [redundant-name](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/redundant-name)
+- [require-barrel-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-barrel-import)
+- [require-export](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-export)
+- [require-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-import)

package/github/CODEOWNERS

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

package/index.js

@@ -14,14 +14,11 @@ module.exports = {
 
 function generateRulesMap() {
   let rulesPath = path.join(__dirname, 'rules');
-  let files = fs.readdirSync(rulesPath);
+  let dirs = fs.readdirSync(rulesPath);
 
   let rulesMap = {};
-  for (let file of files) {
-    if (file.endsWith('.js') && !file.endsWith('.test.js')) {
-      let ruleName = path.parse(file).name;
-      rulesMap[ruleName] = require(`./rules/${file}`);
-    }
+  for (let dir of dirs) {
+    rulesMap[path.parse(dir).name] = require(`./rules/${dir}`);
   }
   return rulesMap;
 }

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.2.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-clickable-element-has-text/README.md

@@ -0,0 +1,61 @@
+# smarthr/a11y-clickable-element-has-text
+
+- ButtonやAnchor,Link コンポーネントにテキスト要素が設定されていない場合、アクセシビリティの問題が発生する可能性を防ぐルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-clickable-element-has-text': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<XxxAnchor>
+  <Xxx />
+</XxxAnchor>
+```
+
+```jsx
+<XxxLink>
+  <Yyy />
+</XxxLink>
+```
+
+```jsx
+<XxxButton>
+  <Zzz />
+</XxxButton>
+```
+
+## ✅ Correct
+
+```jsx
+<XxxAnchor>
+  Hoge
+</XxxAnchor>
+```
+```jsx
+<XxxLink>
+  <YyyIcon />
+  Fuga
+</XxxLink>
+```
+```jsx
+<XxxAnchor>>
+  <YyyIcon visuallyHiddenText="hoge" />
+</XxxAnchor>
+```
+```jsx
+<XxxButton>
+  <YyyImage alt="fuga" />
+</XxxButton>
+```
+
+```jsx
+<YyyAnchoor />
+```