refactor (#15)

.eslintrc.cjs

@@ -1,38 +1,53 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
+  env: {
+    browser: true,
+    es2020: true,
+  },
   plugins: ['react-refresh'],
   extends: [
     'plugin:eslint-plugin-import/recommended',
     'plugin:react-hooks/recommended',
-    'eslint-config-prettier',
-    'eslint-config-airbnb',
+    'airbnb',
     'prettier',
   ],
-  env: {
-    browser: true,
-    es2020: true,
-  },
+  ignorePatterns: [
+    'node_modules',
+    'dist',
+    '.eslintrc.cjs',
+    'vite-env.d.ts',
+    'vite.config.ts',
+  ],
   rules: {
     'react/react-in-jsx-scope': 'off',
-    'react/require-default-props': 'off',
-    'react/destructuring-assignment': 'off',
     'react/jsx-props-no-spreading': 'off',
+    'react/function-component-definition': 'off',
+    'import/prefer-default-export': 'off',
+    'class-methods-use-this': 'off',
+    'max-classes-per-file': 'off',
+    'no-underscore-dangle': 'off',
+    'react/destructuring-assignment': ['off'],
+    'no-throw-literal': 'off',
     'consistent-return': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      { '': 'never', tsx: 'never', ts: 'never' },
+    ],
     'import/order': [
       'error',
       {
         pathGroups: [
           { pattern: 'react', group: 'builtin' },
           { pattern: 'vite', group: 'builtin' },
-          { pattern: '~shared/**', group: 'internal' },
-          { pattern: '~entities/**', group: 'internal' },
-          { pattern: '~features/**', group: 'internal' },
-          { pattern: '~widgets/**', group: 'internal' },
-          { pattern: '~pages/**', group: 'internal' },
+          { pattern: '~shared/**', group: 'internal', position: 'before' },
+          { pattern: '~entities/**', group: 'internal', position: 'before' },
+          { pattern: '~features/**', group: 'internal', position: 'before' },
+          { pattern: '~widgets/**', group: 'internal', position: 'before' },
+          { pattern: '~pages/**', group: 'internal', position: 'before' },
         ],
         pathGroupsExcludedImportTypes: ['builtin'],
         groups: [
@@ -77,61 +92,74 @@ module.exports = {
         ],
       },
     ],
-    'import/no-extraneous-dependencies': [
-      'error',
-      { devDependencies: ['./vite.config.ts'] },
-    ],
-    'import/prefer-default-export': 'off',
   },
   overrides: [
     {
-      files: ['./src/**/*.ts', './src/**/*.tsx'],
-      extends: [
-        'plugin:eslint-plugin-import/typescript',
-        'eslint-config-airbnb-typescript',
+      files: [
+        '*.ts',
+        '.*.ts',
+        './**/*.ts',
+        './**/.*.ts',
+        '*.tsx',
+        '.*.tsx',
+        './**/*.tsx',
+        './**/.*.tsx',
       ],
+      parser: '@typescript-eslint/parser',
       parserOptions: {
         ecmaVersion: 'latest',
         sourceType: 'module',
-        project: ['tsconfig.json'],
+        project: true,
       },
-      plugins: ['@typescript-eslint/eslint-plugin'],
+      plugins: ['@typescript-eslint/eslint-plugin', '@typescript-eslint'],
+      extends: [
+        'plugin:eslint-plugin-import/typescript',
+        'airbnb-typescript',
+        'prettier',
+      ],
       rules: {
+        'react/require-default-props': 'off',
         '@typescript-eslint/no-use-before-define': 'off',
         '@typescript-eslint/no-throw-literal': 'off',
-        '@typescript-eslint/no-shadow': 'off',
-        'object-curly-newline': 'off',
-        '@typescript-eslint/indent': 'off',
-        'import/no-extraneous-dependencies': [
+        'react/jsx-max-props-per-line': [
+          'error',
+          { maximum: 1, when: 'always' },
+        ],
+        '@typescript-eslint/naming-convention': [
           'error',
           {
-            devDependencies: [
-              '**/msw/**',
-              '**/react-query/utils.tsx',
-              '**/react-router/utils.ts',
-            ],
+            selector: 'variable',
+            format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+            leadingUnderscore: 'allow',
+            trailingUnderscore: 'allow',
+          },
+          {
+            selector: 'variable',
+            modifiers: ['destructured'],
+            format: ['camelCase', 'PascalCase', 'snake_case', 'UPPER_CASE'],
+            leadingUnderscore: 'allow',
           },
         ],
-      },
-
-    },
-    {
-      files: ['**/__tests__/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
-      extends: ['plugin:testing-library/react'],
-      rules: {
-        'testing-library/no-debugging-utils': 'warn',
+        'import/extensions': [
+          'error',
+          'ignorePackages',
+          { '': 'never', tsx: 'never', ts: 'never' },
+        ],
         'import/no-extraneous-dependencies': [
           'error',
-          { devDependencies: true },
+          {
+            devDependencies: [
+              '**/__tests__/**',
+              '**/__mocks__/**',
+              '**/*.test.ts',
+              '**/*.test.tsx',
+              '**/*.spec.ts',
+              'src/shared/lib/test/setup.ts',
+              'src/shared/lib/test/test.lib.tsx',
+            ],
+          },
         ],
       },
     },
   ],
-  settings: {
-    'import/resolver': {
-      typescript: {
-        alwaysTryTypes: true,
-      },
-    },
-  },
-};
+}

README.md

@@ -1,28 +1,18 @@
-<div>
-  <h1 align="center">🙌 RealWorld example app 🍰 Feature-Sliced Design</h1>
+# 🙌 RealWorld example app 🍰 Feature-Sliced Design
 
-  <p>
-    This codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the <a href="https://github.com/gothinkster/realworld">RealWorld</a> spec and API. Powered by <a href="https://feature-sliced.design">FSD (Feature-Sliced Design)</a> architectural methodology.
-  </p>
-  <p>Feel free to take a look at <a href="https://effector.dev/">Effector</a> version in <a href="https://github.com/sldk-yuri/realworld-react-fsd/tree/effector">the effector branch</a></p>
+This codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API. Powered by [FSD (Feature-Sliced Design)](https://feature-sliced.design) architectural methodology.
 
-  <a href="https://realworld-fsd.netlify.app">
-    <img
-      alt="Realworld example app website"
-      src="./logo.gif"
-    />
-  </a>
-</div>
+![Realworld example app](./logo.gif)
 
-<hr />
+---
 
 [![Netlify Status][netlify-domain]](https://realworld-fsd.netlify.app/)
 [![Build workflow][build-domain]](https://github.com/sldk-yuri/realworld-react-fsd/actions/workflows/build.yml)
 [![Codecov][codecov-domain]](https://app.codecov.io/gh/sldk-yuri/realworld-react-fsd/branch/master)
 [![Code style: prettier][prettier-domain]](https://github.com/prettier/prettier)
 [![license][license-domain]](https://github.com/sldk-yuri/realworld-react-fsd/blob/master/LICENSE)
 
-# Features
+## Features
 
 The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication.
 
@@ -58,7 +48,7 @@ The example application is a social blogging site (i.e. a Medium.com clone) call
   - Show basic user info
   - List of articles populated from author's created articles or author's favorited articles
 
-# Getting started
+## Getting started
 
 This project was bootstrapped with [Create Vite](https://vitejs.dev/guide/#getting-started)
 
@@ -68,20 +58,18 @@ To get the frontend running locally:
 2. `yarn install` to install all the dependencies defined in a `package.json` file.
 3. `yarn dev` to start Vite dev server.
 
-# Scripts
+## Scripts
 
 - `yarn dev` - start a development server with hot reload.
 - `yarn build` - build for production. The generated files will be on the dist folder.
 - `yarn preview` - locally preview the production build.
-- `yarn generate:api` - generate api via swagger scheme
 - `yarn lint` - run ESLint.
 - `yarn lint:perf` - run ESLint and track the performance of individual rules.
 - `yarn prettier` - run Prettier on changed files.
 - `yarn prettier:all` - run Prettier on all files.
 - `yarn test:run` - run all test suites.
 - `yarn test:watch` - run all test suites but watch for changes and rerun tests when they change.
 - `yarn test:coverage` - run all test suites and enable coverage report.
-- `coverage:open` - open coverage report in browser.
 - `yarn test:coverage:open` - run all test suites and enable coverage report then open coverage report in browser.
 - `yarn dep-cruiser:preview` - create a graph of the dependencies[^1]
 
@@ -91,8 +79,6 @@ To get the frontend running locally:
     [GraphViz' download page](https://www.graphviz.org/download/) for instructions
     on how to get it on your machine.
 
-<br/>
-
 [![Feature-Sliced Design][shields-fsd-domain]](https://feature-sliced.design/)
 [![Vite][shields-vite-domain]](https://vitejs.dev/)
 [![React][shields-react-domain]](https://react.dev/)