feat: add 'craco' for path aliasing

.eslintrc.js

@@ -1,3 +1,37 @@
 module.exports = {
-  extends: ["react-app", "react-app/jest"]
+  extends: [
+    "react-app",
+    "react-app/jest",
+    "eslint:recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:jest/recommended",
+    "plugin:testing-library/react"
+  ],
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    jest: true,
+    node: true
+  },
+  globals: {
+    React: true,
+    JSX: true
+  },
+  ignorePatterns: ["node_modules/*", ".github/*", "public/*", "build/*", "coverage/*"],
+  rules: {
+    "no-unused-vars": "warn",
+    "react/jsx-uses-vars": "warn",
+    "react/jsx-uses-react": "warn",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off"
+  },
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
 };

craco.config.js

@@ -0,0 +1,26 @@
+const path = require("path");
+
+const REPO_ROOT_DIR = path.resolve(__dirname);
+const SRC_DIR = `${REPO_ROOT_DIR}/src`;
+
+module.exports = {
+  webpack: {
+    alias: {
+      "@ROOT": REPO_ROOT_DIR,
+      "@": SRC_DIR,
+      "@app": `${SRC_DIR}/app`,
+      "@cache": `${SRC_DIR}/app/apolloCache`,
+      "@components": `${SRC_DIR}/components`,
+      "@config": `${SRC_DIR}/config`,
+      "@graphql": `${SRC_DIR}/graphql`,
+      "@hooks": `${SRC_DIR}/hooks`,
+      "@images": `${SRC_DIR}/images`,
+      "@layouts": `${SRC_DIR}/layouts`,
+      "@navigation": `${SRC_DIR}/navigation`,
+      "@pages": `${SRC_DIR}/pages`,
+      "@services": `${SRC_DIR}/services`,
+      "@types": `${SRC_DIR}/types`,
+      "@utils": `${SRC_DIR}/utils`
+    }
+  }
+};

tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "": "",
   "compilerOptions": {
     "target": "ES5",
     "module": "ESNext",
@@ -19,6 +18,7 @@
     "removeComments": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*"],
-  "exclude": [".github", "node_modules"]
+  "include": ["src"],
+  "exclude": [".github", "node_modules"],
+  "extends": "./tsconfig.paths.json"
 }

tsconfig.paths.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@ROOT/*": ["./*"],
+      "@/*": ["./src/*"],
+      "@app": ["./src/app"],
+      "@app/*": ["./src/app/*"],
+      "@cache": ["./src/app/apolloCache"],
+      "@cache/*": ["./src/app/apolloCache/*"],
+      "@components": ["./src/components"],
+      "@components/*": ["./src/components/*"],
+      "@config": ["./src/config"],
+      "@config/*": ["./src/config/*"],
+      "@graphql": ["./src/graphql"],
+      "@graphql/*": ["./src/graphql/*"],
+      "@hooks": ["./src/hooks"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@images": ["./src/images"],
+      "@images/*": ["./src/images/*"],
+      "@layouts": ["./src/layouts"],
+      "@layouts/*": ["./src/layouts/*"],
+      "@navigation": ["./src/navigation"],
+      "@navigation/*": ["./src/navigation/*"],
+      "@pages": ["./src/pages"],
+      "@pages/*": ["./src/pages/*"],
+      "@services": ["./src/services"],
+      "@services/*": ["./src/services/*"],
+      "@types": ["./src/types"],
+      "@types/*": ["./src/types/*"],
+      "@utils": ["./src/utils"],
+      "@utils/*": ["./src/utils/*"]
+    }
+  }
+}