refactor (#14)

* feat: Add tabs component to shared/ui (#11) * Create tabs component * Integrate new tabs component to HomePage * Integrate new tabs component to ProfilePage * feat(shared/ui): add tabs component * refactor(pages/home): update tabs logic with shared/tabs * refactor(pages/profile): update tabs logic with shared/tabs --------- Co-authored-by: Yuri <118747540+sldk-yuri@users.noreply.github.com> * build: upgrade package dependencies * refactor: update session logic * refactor: forms * refactor: profile * refactor: article * refactor: article api * refactor: articles features * refactor: comments * refactor: tags * refactor: article filter * refactor: features * refactor: profile page * refactor: pages * refactor: session * refactor: profile-page * refactor: comment * fix: typo * fix: remove delete comment button for guest * refactor: update logout logic * chore: graph * chore: readme --------- Co-authored-by: Yakov-Botov <55227000+Yakov-Botov@users.noreply.github.com>
yurisldk · Jan 23, 2024 · 881a4d3 · 881a4d3
1 parent b199275
commit 881a4d3
Show file tree

Hide file tree

Showing 305 changed files with 7,650 additions and 15,165 deletions.
diff --git a/.dependency-cruiser.cjs b/.dependency-cruiser.cjs
@@ -27,6 +27,9 @@ module.exports = {
         pathNot: [
           '(^|/)\\.[^/]+\\.(js|cjs|mjs|ts|json)$', // dot files
           '\\.d\\.ts$', // TypeScript declaration files
+          '\\.types\\.ts$',
+          '^src/shared/lib/',
+          '(^|/)@x',
           '(^|/)tsconfig\\.json$', // TypeScript config
           '(^|/)(babel|webpack)\\.config\\.(js|cjs|mjs|ts|json)$', // other configs
         ],
@@ -344,12 +347,6 @@ module.exports = {
           'src/(pages/[^/]+/)',
           'src/(features/[^/]+/[^/]+/)',
           'src/([^/]+/[^/]+)',
-          // 'src/(app/[^/]+/)',
-          // 'src/(pages/[^/]+/)',
-          // 'src/([^/].*/api)',
-          // 'src/([^/].*/model)',
-          // 'src/([^/].*/ui)',
-          // 'src/([^/].*/index.ts)',
         ],
 
         /* Options to tweak the appearance of your graph.See

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,23 +1,27 @@
 module.exports = {
-  env: { browser: true, es2020: true },
-  extends: [
-    'plugin:eslint-plugin-import/recommended',
-    'plugin:react-hooks/recommended',
-    'eslint-config-airbnb',
-    'eslint-config-prettier',
-  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
   plugins: ['react-refresh'],
+  extends: [
+    'plugin:eslint-plugin-import/recommended',
+    'plugin:react-hooks/recommended',
+    'eslint-config-prettier',
+    'eslint-config-airbnb',
+    'prettier',
+  ],
+  env: {
+    browser: true,
+    es2020: true,
+  },
   rules: {
-    'react-refresh/only-export-components': 'warn',
     'react/react-in-jsx-scope': 'off',
     'react/require-default-props': 'off',
-    'import/prefer-default-export': 'off',
+    'react/destructuring-assignment': 'off',
     'react/jsx-props-no-spreading': 'off',
+    'consistent-return': 'off',
     'import/order': [
       'error',
       {
@@ -77,9 +81,9 @@ module.exports = {
       'error',
       { devDependencies: ['./vite.config.ts'] },
     ],
+    'import/prefer-default-export': 'off',
   },
   overrides: [
-    // typescript
     {
       files: ['./src/**/*.ts', './src/**/*.tsx'],
       extends: [
@@ -93,6 +97,10 @@ module.exports = {
       },
       plugins: ['@typescript-eslint/eslint-plugin'],
       rules: {
+        '@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': [
           'error',
@@ -105,11 +113,11 @@ module.exports = {
           },
         ],
       },
+
     },
-    // tests
     {
-      files: ['./src/**/*.test.ts', './src/**/*.test.tsx'],
-      extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
+      files: ['**/__tests__/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
       rules: {
         'testing-library/no-debugging-utils': 'warn',
         'import/no-extraneous-dependencies': [

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
   <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 Effector version in <a href="https://github.com/sldk-yuri/realworld-react-fsd/tree/effector">the effector branch</a></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>
 
   <a href="https://realworld-fsd.netlify.app">
     <img

diff --git a/dependency-graph-preview.svg b/dependency-graph-preview.svg
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -1,73 +1,68 @@
 {
-  "name": "template-vite-react-ts-fsd",
+  "name": "realworld-react-fsd",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "npx swagger-typescript-api -p ./swagger.json -o ./src/shared/api/realworld -n Api.ts --type-suffix Dto",
     "lint": "eslint src --ext ts,tsx --cache --report-unused-disable-directives --max-warnings 0",
     "lint:perf": "set TIMING=1 && eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier": "pretty-quick --ignore-path .gitignore",
     "prettier:all": "prettier --write . --ignore-path .gitignore",
     "test:watch": "vitest watch",
-    "test:run": "vitest run",
+    "test:run": "set NODE_OPTIONS=--trace-deprecation&& vitest run",
     "test:coverage": "vitest run --coverage",
     "coverage:open": "npx vite preview --outDir ./coverage",
     "test:coverage:open": "yarn run test:coverage && yarn run coverage:open",
     "dep-cruiser:preview": "npx depcruise src --include-only \"^src\" --output-type dot | dot -T svg > dependency-graph-preview.svg"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.29.11",
-    "@tanstack/react-query-devtools": "^4.29.11",
-    "classnames": "^2.3.2",
-    "dayjs": "^1.11.7",
-    "formik": "^2.4.0",
+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.10",
+    "formik": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.10",
-    "react-icons": "^4.9.0",
+    "react-error-boundary": "^4.0.12",
+    "react-icons": "^5.0.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.11.2",
-    "yup": "^1.2.0",
-    "zustand": "^4.3.8"
+    "react-router-dom": "^6.21.1",
+    "zod": "^3.22.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@mswjs/data": "^0.13.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^0.32.0",
-    "dependency-cruiser": "^13.0.5",
-    "eslint": "8.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.3",
+    "dependency-cruiser": "^16.0.0",
+    "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-jest-dom": "^5.0.1",
-    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "jsdom": "^22.1.0",
-    "msw": "^1.2.1",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "jsdom": "^23.2.0",
     "path": "^0.12.7",
-    "prettier": "^2.8.8",
+    "prettier": "^3.1.1",
     "pretty-quick": "^3.1.3",
-    "typescript": "^5.0.2",
-    "unplugin-fonts": "^1.0.3",
-    "vite": "^4.3.2",
-    "vite-plugin-checker": "^0.6.0",
+    "typescript": "^5.3.3",
+    "unplugin-fonts": "^1.1.1",
+    "vite": "^5.0.11",
+    "vite-plugin-checker": "^0.6.2",
     "vite-plugin-eslint": "^1.8.1",
-    "vitest": "^0.32.0"
+    "vitest": "^1.1.3"
   }
 }
diff --git a/src/app/providers/QueryClientProvider.tsx b/src/app/providers/QueryClientProvider.tsx
@@ -12,32 +12,7 @@ export function QueryClientProvider(props: QueryClientProviderProps) {
   return (
     <TanStackQueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools
-        initialIsOpen={false}
-        errorTypes={[
-          {
-            name: '422',
-            initializer: () => ({
-              status: 422,
-              error: {
-                errors: {
-                  field1: ['error message 1', 'error message 2'],
-                  field2: ['error message 3'],
-                },
-              },
-            }),
-          },
-          {
-            name: '500',
-            initializer: () => ({
-              status: 500,
-              error: {
-                message: 'Internal server error',
-              },
-            }),
-          },
-        ]}
-      />
+      <ReactQueryDevtools initialIsOpen={false} />
     </TanStackQueryClientProvider>
   );
 }