Revert "style: introduce aliasing, sort imports (#511)" (#520)

* Revert "style: introduce aliasing, sort imports (#511)"

This reverts commit 17276df.

We are reverting PR #511 because we found out that the outputs
of `craco start` and `craco build` were different, resulting in
CSS files being imported in an order different to what is intended.

The workarounds we found online were convoluted and would introduce
unnecessary complexity to the repo. Furthermore, we also found
a library (react-app-rewire-alias) which can help us achieve aliasing
with CRA as an alternative to Craco. In addition to the bug associated
with Craco here, Craco is also overkill since it's a powerful tool which
helps users to extend their default CRA configs for webpack among other
things.

As such, we are reverting this commit and will be attempting to
reintroduce aliases at a later date.

A sample of how to use react-app-rewire-alias can be found in the
vaccinegovsg repo https://github.com/datagovsg/vaccinegovsg-clinic/blob/dev/frontend/config-overrides.js

References:
- dilanx/craco#57
- DocSpring/craco-antd#12

* lint: correct linting error

.eslintrc.json

@@ -4,69 +4,22 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 12,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["only-warn", "react", "simple-import-sort", "import"],
+  "plugins": ["only-warn", "react"],
   "rules": {
-    "no-underscore-dangle": "off",
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Node.js builtins. You could also generate this regex if you use a `.js` config.
-          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
-          [
-            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
-          ],
-          // Packages. `react` related packages come first.
-          ["^react(.*|$)"],
-          ["^@?\\w"],
-          // Internal packages.
-          ["^@src(.*|$)"],
-          ["^@contexts(.*|$)"],
-          ["^@hooks(.*|$)"],
-          ["^@templates(.*|$)"],
-          ["^@utils(.*|$)"],
-          ["^@style(.*|$)"],
-          ["^@components(.*|$)"],
-          ["^@layouts(.*|$)"],
-          ["^@routing(.*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Direct imports for e.g. import "<package>"
-          ["^.+\\.s?css$"]
-        ]
-      }
-    ]
-  },
-  "settings": {
-    "import/resolver": {
-      "alias": {
-        "map": [
-          ["@root", "./"],
-          ["@src", "./src"],
-          ["@components", "./src/components"],
-          ["@contexts", "./src/contexts"],
-          ["@hooks", "./src/hooks"],
-          ["@layouts", "./src/layouts"],
-          ["@routing", "./src/routing"],
-          ["@styles", "./src/styles"],
-          ["@templates", "./src/templates"],
-          ["@utils", "./src/utils"]
-        ],
-        "extensions": [".js", ".jsx", ".scss"]
-      }
-    }
+    "no-underscore-dangle": "off"
   },
   "globals": {
     "cy": "readonly",

cypress/integration/editPage.spec.js

@@ -1,10 +1,9 @@
+import "cypress-file-upload"
 import {
-  generatePageFileName,
-  generateResourceFileName,
   slugifyCategory,
-} from "@src/utils"
-
-import "cypress-file-upload"
+  generateResourceFileName,
+  generatePageFileName,
+} from "../../src/utils"
 
 Cypress.config("baseUrl", Cypress.env("BASEURL"))
 Cypress.config("defaultCommandTimeout", 5000)

cypress/integration/files.spec.js

@@ -1,6 +1,5 @@
-import { generateImageorFilePath, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { generateImageorFilePath, slugifyCategory } from "../../src/utils"
 
 describe("Files", () => {
   Cypress.config("baseUrl", Cypress.env("BASEURL"))

cypress/integration/homepage.spec.js

@@ -13,12 +13,10 @@ describe("Login flow", () => {
 
     // This is necessary to prevent the frontend from throwing the 401 error from the backend.
     // TODO: We should handle this properly in the axios interceptor.
-    cy.on(
-      "uncaught:exception",
-      () =>
-        // returning false here prevents Cypress from failing the test
-        false
-    )
+    cy.on("uncaught:exception", () => {
+      // returning false here prevents Cypress from failing the test
+      return false
+    })
 
     cy.contains(LOGIN_BUTTON_TEXT).click()
     cy.url().should("include", GITHUB_LOGIN_URL)

cypress/integration/images.spec.js

@@ -1,6 +1,5 @@
-import { generateImageorFilePath, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { generateImageorFilePath, slugifyCategory } from "../../src/utils"
 
 describe("Images", () => {
   Cypress.config("baseUrl", Cypress.env("BASEURL"))

cypress/integration/pages.spec.js

@@ -1,9 +1,9 @@
 import {
-  deslugifyDirectory,
   deslugifyPage,
+  deslugifyDirectory,
   generatePageFileName,
   slugifyCategory,
-} from "@src/utils"
+} from "../../src/utils"
 
 const CUSTOM_TIMEOUT = 30000 // 30 seconds
 

cypress/integration/resourceCategory.spec.js

@@ -1,6 +1,5 @@
-import { generateResourceFileName, slugifyCategory } from "@src/utils"
-
 import "cypress-file-upload"
+import { slugifyCategory, generateResourceFileName } from "../../src/utils"
 
 describe("Resource category page", () => {
   Cypress.config("defaultCommandTimeout", 5000)

cypress/integration/resources.spec.js

@@ -1,4 +1,4 @@
-import { slugifyCategory } from "@src/utils"
+import { slugifyCategory } from "../../src/utils"
 
 describe("Resources page", () => {
   const CMS_BASEURL = Cypress.env("BASEURL")