refactor(*): migrate to arui-presets-lint (#38)

* refactor(*): migrate to arui-presets-lint

* fix(*): add /bin to .eslintignore

* feat(*): add /dist folders to .eslintignore

.editorconfig

@@ -1,8 +1,20 @@
-root = true
-
 [*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+max_line_length = 100
+
+# JavaScript
+[*.{jsx,js,ts,tsx}]
+indent_style = space
+indent_size = 4
+
+# CSS
+[*.css]
+indent_style = space
+indent_size = 4
+
+[package.json]
 indent_style = space
 indent_size = 2
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = true

.eslintignore

@@ -0,0 +1,2 @@
+/bin
+**/dist

.eslintrc.js

@@ -1,24 +1,14 @@
 module.exports = {
-    extends: [
-        require.resolve('arui-presets-lint/eslint'),
-        require.resolve('arui-presets-ts/eslint')
-    ],
-    ignorePatterns: ['node_modules/'],
-    settings: {
-      'import/resolver': {
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extends: [require.resolve('arui-presets-lint/eslint')],
+    overrides: [
+        {
+            files: ['**/*.tsx', '**/*.ts', '**/*.jsx', '**/*.js'],
+            rules: {
+                'import/no-extraneous-dependencies': [
+                    'error',
+                    { devDependencies: true, packageDir: './' },
+                ],
+            },
         },
-      },
-    },
-    overrides: [{
-        files: ['**/*.tsx', '**/*.ts', '**/*.jsx', '**/*.js'],
-        rules: {
-            'import/no-extraneous-dependencies': 0,
-            'react/prop-types': 'off',
-            'react/jsx-indent': 0,
-            'react/jsx-indent-props': 0,
-            indent: ['error', 2, { SwitchCase: 1 }],
-        }
-    }]
+    ],
 };

bin/demo-build.js

@@ -10,28 +10,27 @@ const parseGitUrl = require('git-url-parse');
 
 /** Config for github */
 const defaultConfig = {
-  gitUsername: 'alfa-bot',
-  gitEmail: 'ds@alfabank.ru',
-  commitMessage: 'Deploy Storybook to GitHub Pages',
-  gitRemote: 'origin',
-  targetBranch: 'gh-pages'
+    gitUsername: 'alfa-bot',
+    gitEmail: 'ds@alfabank.ru',
+    commitMessage: 'Deploy Storybook to GitHub Pages',
+    gitRemote: 'origin',
+    targetBranch: 'gh-pages',
 };
 /** Dir for merged storybook file */
 const ghMergeDir = 'storybook-demo';
 /** Custom option for shell.exec */
 const execOptions = {
-  silent: true,
-  fatal: true
+    silent: true,
+    fatal: true,
 };
 /** Temporary dir for builded file = last git commit hash */
 const tempOutputDir = shell.exec('git rev-parse HEAD', execOptions).stdout.trim();
 /** Current git branch */
 const sourceBranch = shell.exec('git rev-parse --abbrev-ref HEAD', execOptions).stdout.trim();
 /** Git remote url */
-const gitUrl = shell.exec(
-  `git config --get remote.${defaultConfig.gitRemote}.url`,
-  execOptions
-).stdout.trim();
+const gitUrl = shell
+    .exec(`git config --get remote.${defaultConfig.gitRemote}.url`, execOptions)
+    .stdout.trim();
 /** Parsed git url */
 const parsedGitUrl = parseGitUrl(gitUrl);
 const gitPagesUrl = `https://${parsedGitUrl.owner}.github.io/${parsedGitUrl.name}`;
@@ -63,9 +62,9 @@ shell.exec(`git pull -f -q ${gitUrl} ${defaultConfig.targetBranch}`, execOptions
 console.log('=> Merge builded storybook');
 shell.cd('../');
 if (sourceBranch === 'master') {
-  shell.cp('-rf', `./${tempOutputDir}`, `./${ghMergeDir}/master`);
+    shell.cp('-rf', `./${tempOutputDir}`, `./${ghMergeDir}/master`);
 } else {
-  shell.cp('-rf', `./${tempOutputDir}`, `./${ghMergeDir}`);
+    shell.cp('-rf', `./${tempOutputDir}`, `./${ghMergeDir}`);
 }
 shell.cd(ghMergeDir);
 
@@ -75,7 +74,6 @@ console.log(`=> Commit changes with message: ${defaultConfig.commitMessage}`);
 shell.exec('git add .', execOptions);
 shell.exec(`git commit -m "${defaultConfig.commitMessage}"`, execOptions);
 
-// log output url
 const storybookUrl = `${gitPagesUrl}/${sourceBranch === 'master' ? 'master' : tempOutputDir}/`;
 
 console.log(`=> Storybook deployed to: ${storybookUrl}`);

package.json

@@ -19,7 +19,8 @@
     "lint": "yarn lint:css && yarn lint:js",
     "lint:css": "stylelint ./packages/**/*.css",
     "lint:js": "eslint ./ --ext .ts,.tsx,.js,.jsx",
-    "test": "yarn lint"
+    "test": "yarn lint",
+    "format": "prettier --write \"./{packages,bin}/**/*.{ts,tsx,js,jsx,css}\""
   },
   "browserslist": {
     "production": [
@@ -56,33 +57,40 @@
     "@types/node": "^13.5.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.23.0",
     "alfa-ui-primitives": "2.4.3",
-    "arui-presets-lint": "^2.0.1",
+    "arui-presets-lint": "4.0.0",
     "arui-presets-ts": "^5.0.0",
     "babel-loader": "^8.0.6",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-airbnb-typescript": "^7.0.0",
+    "eslint-config-prettier": "^6.10.0",
     "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-plugin-chai-friendly": "^0.5.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "eslint-plugin-sort-class-members": "^1.6.0",
     "fork-ts-checker-webpack-plugin": "^4.0.2",
+    "git-url-parse": "^11.1.2",
     "husky": "^4.2.1",
     "lerna": "^3.20.2",
+    "lint-staged": "^10.0.8",
     "postcss-cli": "^7.1.0",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
+    "prettier": "^1.19.1",
     "react-docgen-typescript-loader": "^3.6.0",
     "react-scripts": "^3.3.1",
+    "shelljs": "^0.8.3",
     "storybook-addon-designs": "^5.1.2",
-    "stylelint": "^13.1.0",
+    "stylelint": "^12.0.0",
     "stylelint-config-standard": "^20.0.0",
     "ts-loader": "^6.2.1",
-    "typescript": "~3.7.5"
+    "typescript": "~3.8.3"
   },
   "publishConfig": {
     "access": "public"
@@ -91,9 +99,28 @@
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0"
   },
+  "prettier": "arui-presets-lint/prettier",
+  "eslintConfig": {
+    "extends": "./node_modules/arui-presets-lint/eslint/index.js"
+  },
+  "stylelint": {
+    "extends": "arui-presets-lint/stylelint"
+  },
+  "lint-staged": {
+    "{packages,bin}/**/*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "git add",
+      "eslint"
+    ],
+    "*.css": [
+      "prettier --write",
+      "git add",
+      "stylelint"
+    ]
+  },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn test",
+      "pre-commit": "yarn lint-staged && yarn test",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },

packages/amount/src/Component.tsx

@@ -15,54 +15,55 @@ import { formatAmount } from '../../utils';
  */
 
 import {
-  AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR,
-  THINSP, CURRENCY_CODES
+    AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR,
+    THINSP,
+    CURRENCY_CODES,
 } from '../../configs/currencyCodes';
 
 /**
  * Types
  */
 
 type Props = {
-  value: number;
-  currency: string;
-  minority: number;
-  hideMinority?: boolean;
+    value: number;
+    currency: string;
+    minority: number;
+    hideMinority?: boolean;
 
-  className?: string;
-  minorityClassName?: string;
+    className?: string;
+    minorityClassName?: string;
 };
 
 /**
  * Exp
  */
 
 export const Amount: React.FC<Props> = ({
-  value,
-  minority,
-  hideMinority = false,
+    value,
+    minority,
+    hideMinority = false,
 
-  className,
-  minorityClassName
+    className,
+    minorityClassName,
 }) => {
-  const { majorPart, minorPart, currencySymbol } = formatAmount({
-    value,
-    currency: {
-      code: CURRENCY_CODES.RUR, // TODO need work
-      minority
-    }
-  });
+    const { majorPart, minorPart, currencySymbol } = formatAmount({
+        value,
+        currency: {
+            code: CURRENCY_CODES.RUR, // TODO need work
+            minority,
+        },
+    });
 
-  return (
-    <div className={ className }>
-      { majorPart }
-      { !hideMinority && minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR }
+    return (
+        <div className={className}>
+            {majorPart}
+            {!hideMinority && minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
 
-      { !hideMinority && <span className={ minorityClassName }>{ minorPart }</span> }
-      <span>
-        { THINSP }
-        { currencySymbol }
-      </span>
-    </div>
-  );
+            {!hideMinority && <span className={minorityClassName}>{minorPart}</span>}
+            <span>
+                {THINSP}
+                {currencySymbol}
+            </span>
+        </div>
+    );
 };