@itcase/lint 1.0.1 → 1.0.3

package/eslint/eslint.styleObjects.js

@@ -0,0 +1,125 @@
+// In what order they are written, that’s how they will be sorted
+const eslintStyleObjects = [
+  // Size and positioning
+  // Размер и позиционирование
+  'width',
+  'height',
+  'flex',
+  'flexDirection',
+  'justifyContent',
+  'alignItems',
+  'alignSelf',
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'flexWrap',
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'zIndex',
+  'minWidth',
+  'maxWidth',
+  'minHeight',
+  'maxHeight',
+  'aspectRatio',
+
+  // Indents and margins
+  // Отступы и поля
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginHorizontal',
+  'marginVertical',
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'gap',
+
+  // Borders and shadows
+  // Границы и тени
+  'borderWidth',
+  'borderColor',
+  'borderRadius',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderTopColor',
+  'borderRightColor',
+  'borderBottomColor',
+  'borderLeftColor',
+  'borderStyle',
+  'borderEndWidth',
+  'borderStartWidth',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'shadowColor',
+  'shadowOffset',
+  'shadowOpacity',
+  'shadowRadius',
+  'elevation',
+
+  // Color and background
+  // Цвет и фон
+  'backgroundColor',
+  'opacity',
+
+  // Fonts and text
+  // Шрифты и текст
+  'color',
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'fontFamily',
+  'lineHeight',
+  'letterSpacing',
+  'textAlign',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textDecorationColor',
+  'textTransform',
+  'textShadowColor',
+  'textShadowOffset',
+  'textShadowRadius',
+  'includeFontPadding',
+  'textAlignVertical',
+  'writingDirection',
+
+  // Other
+  // Прочее
+  'overflow',
+  'display',
+  'resizeMode',
+  'backfaceVisibility',
+  'tintColor',
+  'overlayColor',
+  'end',
+  'start',
+  'direction',
+  'transform',
+  'transformOrigin',
+  'translateX',
+  'translateY',
+  'scale',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'perspective',
+  'cursor',
+]
+
+const eslintStyleObjectsCustomGroups = {}
+
+eslintStyleObjects.forEach((key) => (eslintStyleObjectsCustomGroups[key] = key))
+
+export { eslintStyleObjects, eslintStyleObjectsCustomGroups }

package/eslint/eslint.styleProps.js

@@ -0,0 +1,67 @@
+// In what order they are written, that’s how they will be sorted
+const eslintStyleProps = [
+  'width',
+  'height',
+  'minWidth',
+  'minHeight',
+  'maxWidth',
+  'maxHeight',
+  'aspectRatio',
+  'font',
+  'color',
+  'labelTextColor',
+  'labelTextSize',
+  'fill',
+  'fillHover',
+  'background',
+  'background-position',
+  'background-repeat',
+  'background-size',
+  'padding',
+  'margin',
+  'border',
+  'borderWidth',
+  'borderColor',
+  'borderStyle',
+  'borderRadius',
+  'borderLeft',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'float',
+  'clear',
+  'position',
+  'overflow',
+  'content',
+  'display',
+  'flex',
+  'flexDirection',
+  'flexWrap',
+  'flexFlow',
+  'order',
+  'justify-content',
+  'align-items',
+  'align-self',
+  'align-content',
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'visibility',
+  'box-sizing',
+  'box-shadow',
+  'left',
+  'top',
+  'right',
+  'bottom',
+  'verticalAlign',
+  'zIndex',
+  'transform',
+  'transition',
+  'opacity',
+  'cursor',
+]
+
+const eslintStylePropsCustomGroups = {}
+eslintStyleProps.forEach((key) => (eslintStylePropsCustomGroups[key] = key))
+
+export { eslintStyleProps, eslintStylePropsCustomGroups }

package/eslint/index.js

@@ -6,75 +6,14 @@ import eslintReact from 'eslint-plugin-react'
 import eslintReactHooks from 'eslint-plugin-react-hooks'
 import eslintTypeScript from 'typescript-eslint'
 
-const eslintStyleProps = [
-  'width',
-  'height',
-  'minWidth',
-  'minHeight',
-  'maxWidth',
-  'maxHeight',
-  'aspectRatio',
-  'font',
-  'color',
-  'labelTextColor',
-  'labelTextSize',
-  'fill',
-  'fillHover',
-  'background',
-  'background-position',
-  'background-repeat',
-  'background-size',
-  'padding',
-  'margin',
-  'border',
-  'borderWidth',
-  'borderColor',
-  'borderStyle',
-  'borderRadius',
-  'borderLeft',
-  'borderTop',
-  'borderRight',
-  'borderBottom',
-  'float',
-  'clear',
-  'position',
-  'overflow',
-  'content',
-  'display',
-  'flex',
-  'flexDirection',
-  'flexWrap',
-  'flexFlow',
-  'order',
-  'justify-content',
-  'align-items',
-  'align-self',
-  'align-content',
-  'flexGrow',
-  'flexShrink',
-  'flexBasis',
-  'visibility',
-  'box-sizing',
-  'box-shadow',
-  'left',
-  'top',
-  'right',
-  'bottom',
-  'verticalAlign',
-  'zIndex',
-  'transform',
-  'transition',
-  'opacity',
-  'cursor',
-]
-
-const eslintStylePropsCustomGroups = {}
-eslintStyleProps.forEach((key) => (eslintStylePropsCustomGroups[key] = key))
+import { eslintStyleObjects, eslintStyleObjectsCustomGroups } from './eslint.styleObjects.js'
+import { eslintStyleProps, eslintStylePropsCustomGroups } from './eslint.styleProps.js'
 
 const eslintConfig = [
   eslintJs.configs.recommended,
-  eslintPluginPrettierRecommended,
   ...eslintTypeScript.configs.recommended,
+  eslintPluginPrettierRecommended,
+
   {
     plugins: {
       react: eslintReact,
@@ -82,16 +21,16 @@ const eslintConfig = [
       perfectionist: eslintPerfectionist,
     },
   },
+
   {
     ignores: ['dist', 'node_modules', 'eslint.config.mjs'],
   },
+
   {
     files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
     rules: {
+      // react-hooks configs recommended rules
       ...eslintReactHooks.configs.recommended.rules,
-      camelcase: 'off',
-      'multiline-ternary': 'off',
-      'object-shorthand': ['warn', 'consistent'],
 
       // @typescript-eslint
       '@typescript-eslint/ban-ts-comment': 'off',
@@ -105,6 +44,11 @@ const eslintConfig = [
       'react-hooks/exhaustive-deps': 'warn',
       'react-hooks/rules-of-hooks': 'error',
 
+      // disables the requirement to format ternary operators in multiline form
+      'multiline-ternary': 'off',
+      // shorthand for methods and properties of objects
+      'object-shorthand': ['warn', 'consistent'],
+
       // Class
       'perfectionist/sort-classes': [
         'error',
@@ -142,6 +86,7 @@ const eslintConfig = [
             'isDesktop',
             'id',
             'children',
+            ...eslintStyleObjects,
             'device',
             'is',
             'unknown',
@@ -153,6 +98,7 @@ const eslintConfig = [
             isMobile: 'isMobile*',
             isTablet: 'isTablet*',
             isDesktop: 'isDesktop*',
+            ...eslintStyleObjectsCustomGroups,
             is: 'is*',
             callback: 'on*',
           },
@@ -166,7 +112,10 @@ const eslintConfig = [
           type: 'natural',
           order: 'asc',
           groups: [
-            'top',
+            'className',
+            'key',
+            'ref',
+            'name',
             ...eslintStyleProps,
             'shorthand',
             'unknown',
@@ -176,11 +125,14 @@ const eslintConfig = [
             'callback',
           ],
           customGroups: {
-            top: ['className', 'key', 'ref', 'name'],
+            className: 'className',
+            key: 'key',
+            ref: 'ref',
+            name: 'name',
+            ...eslintStylePropsCustomGroups,
             is: 'is*',
             callback: 'on*',
             set: ['set*'],
-            ...eslintStylePropsCustomGroups,
           },
         },
       ],

package/eslint/mobx/index.js

@@ -0,0 +1,20 @@
+import eslintMobx from 'eslint-plugin-mobx'
+
+export default [
+  {
+    plugins: {
+      mobx: eslintMobx,
+    },
+  },
+
+  {
+    rules: {
+      // mobx
+      'mobx/exhaustive-make-observable': 'warn',
+      'mobx/missing-make-observable': 'error',
+      'mobx/missing-observer': 'warn',
+      'mobx/no-anonymous-observer': 'warn',
+      'mobx/unconditional-make-observable': 'error',
+    },
+  },
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/lint",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "ITCase",
   "description": "Code style linter configuration presets",
   "engines": {

package/readme.md

@@ -1,72 +1,54 @@
 # ITCase Lint
 
-Пакет с пресетами конфигураций линтеров.
+Presets of linter configurations
 
-## Использование
-
-### Установка
+## Installation
 
 ```bash
 $ npm i -D @itcase/lint eslint stylelint prettier
 ```
 
-### Конфигурация
-
-#### С помощью `package.json`
-
-```json
-{
-  "prettier": "@itcase/lint/prettier",
-  "eslintConfig": {
-    "extends": "./node_modules/@itcase/lint/eslint/index.js"
-  },
-  "stylelint": {
-    "extends": "@itcase/lint/stylelint"
-  }
-}
-```
-
-#### С помощью отдельных конфигурационных файлов
+## Usage
 
-##### ESLint
+## ESLint
 
-Создать в корне проекта файл `.eslintrc.js` со следующим содержимым:
+Create a `eslint.config.mjs` configuration file in the root of your project with the following content:
 
 ```js
-module.exports = {
-  extends: require.resolve('@itcase/lint/eslint'),
-};
+import eslint from '@itcase/lint/eslint/index.js'
+
+export default eslint
 ```
 
-##### Stylelint
+## Stylelint
 
-Создать в корне проекта файл `stylelint.config.js` со следующим содержимым:
+Create a `eslint.config.mjs` configuration file in the root of your project with the following content:
 
 ```js
-module.exports = {
-  extends: require.resolve('@itcase/lint/stylelint'),
-};
+export default {
+  extends: ['@itcase/lint/stylelint/index.js'],
+}
 ```
 
-##### Prettier
-
-Создать в корне проекта файл `.prettierrc.js` со следующим содержимым:
+## Prettier
+Create a `prettier.config.mjs` configuration file in the root of your project with the following content:
 
 ```js
-module.exports = require('@itcase/lint/prettier');
-```
+import prettier from '@itcase/lint/prettier/index.js'
 
-### Настройка git-хуков
+export default prettier
 
-Удобно использовать `husky` в связке с `lint-staged`, для этого необходимо:
+```
+
+## git-hook
 
-1. Установить пакеты
+1. Use `husky` and `lint-staged`
 
 ```bash
 npm i -D husky lint-staged
 ```
 
-2. Создать в корне проекта файл `.lintstagedrc` со следующим содержимым:
+2. Create a `.lintstagedrc` configuration file in the root of your project with the following content:
 
 ```json
 {
@@ -80,7 +62,13 @@ npm i -D husky lint-staged
 
 ```
 
-3. Добавить **pre-commit** хук согласно документации husky: `npx lint-staged`
+3. Add **pre-commit** hook in `.husky/pre-commit`
 
-https://typicode.github.io/husky/how-to.html#adding-a-new-hook
+```bash
+#!/bin/bash
 
+if grep --include=*.{json,css,html} --exclude-dir={dist,node_modules,bower_components,.git} -nri --color -B 1 -A 1 '<\{7\} HEAD\|^\=\.{7\}\|>\.{7\}' .; then
+  echo 'Fix conflicts'
+  exit 1
+else ./node_modules/lint-staged/bin/lint-staged.js; fi
+```