chore: introduce prettier

Author: tigerabrodi

.eslintrc.cjs

@@ -1,12 +1,12 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
   rules: {
-    "react-hooks/exhaustive-deps": [
-      "warn",
+    'react-hooks/exhaustive-deps': [
+      'warn',
       {
-        additionalHooks: "useMutation",
+        additionalHooks: 'useMutation',
       },
     ],
   },
-};
+}

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

.vscode/utils.code-snippets

@@ -2,74 +2,52 @@
   "export function": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "exp",
-    "body": [
-      "export function $1 () {",
-      "return ($2)",
-      "}"
-    ]
+    "body": ["export function $1 () {", "return ($2)", "}"],
   },
   "sr only styles": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "sro",
-    "body": [
-      "sr-only"
-    ]
+    "body": ["sr-only"],
   },
   "class": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "cls",
-    "body": [
-      "className=\"$1\""
-    ]
+    "body": ["className=\"$1\""],
   },
   "export everything": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "exev",
-    "body": [
-      "export * from './$1'"
-    ]
+    "body": ["export * from './$1'"],
   },
   "playwright to be defined": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "ebf",
-    "body": [
-      "await expect($1).toBeDefined()"
-    ]
+    "body": ["await expect($1).toBeDefined()"],
   },
   "playwright to be visible": {
     "scope": "typescript,javascript,javascriptreact,typescriptreact",
     "prefix": "ebv",
-    "body": [
-      "await expect($1).toBeVisible()"
-    ]
+    "body": ["await expect($1).toBeVisible()"],
   },
   "Write calculated font size": {
     "scope": "css",
     "prefix": "fnz",
-    "body": [
-      "font-size: calc(1rem * $1 / 16);"
-    ],
-    "description": "Write the font size which calculates pixels and rem divided. Used to better understand the size of the font, but still let them be accessible as rems in the browser."
+    "body": ["font-size: calc(1rem * $1 / 16);"],
+    "description": "Write the font size which calculates pixels and rem divided. Used to better understand the size of the font, but still let them be accessible as rems in the browser.",
   },
   "Write media query": {
     "scope": "css",
     "prefix": "mdq",
-    "body": [
-      "@media screen and (min-width: $1) {$2}"
-    ]
+    "body": ["@media screen and (min-width: $1) {$2}"],
   },
   "colors primary": {
     "scope": "css",
     "prefix": "clrp",
-    "body": [
-      "var(--colors-primary-$1)"
-    ]
+    "body": ["var(--colors-primary-$1)"],
   },
   "colors": {
     "scope": "css",
     "prefix": "clr",
-    "body": [
-      "var(--colors-$1)"
-    ]
-  }
+    "body": ["var(--colors-$1)"],
+  },
 }

ARCHITECTURE.md

@@ -29,13 +29,13 @@ For authentication, the project uses HTTP cookies, which are straightforward to
 How you declare cookiee in Remix:
 
 ```javascript
-const authCookie = createCookie("auth", {
+const authCookie = createCookie('auth', {
   secrets: [secret],
   maxAge: 30 * 24 * 60 * 60,
   httpOnly: true,
-  secure: env.NODE_ENV === "production",
-  sameSite: "lax",
-});
+  secure: env.NODE_ENV === 'production',
+  sameSite: 'lax',
+})
 ```
 
 - secrets: An array of secrets that may be used to sign/unsign the value of a cookie.
@@ -64,14 +64,12 @@ How we create the hash:
 // 16 bytes is the recommended size for a salt
 // Having a salt added to the password before hashing it makes it more secure
 // Reduces the risk of rainbow table attacks: https://en.wikipedia.org/wiki/PBKDF2
-let salt = crypto.randomBytes(16).toString("hex");
+let salt = crypto.randomBytes(16).toString('hex')
 
 // Create a hash
 // 1000 stands for the number of iterations
 // 64 is the length of the output hash
-let hash = crypto
-  .pbkdf2Sync(password, salt, 1000, 64, "sha256")
-  .toString("hex");
+let hash = crypto.pbkdf2Sync(password, salt, 1000, 64, 'sha256').toString('hex')
 ```
 
 The salt is created using `crypto.randomBytes` and the hash is created using `crypto.pbkdf2Sync`.
@@ -80,11 +78,11 @@ How we compare the hash when a user logs in:
 
 ```js
 let hash = crypto
-  .pbkdf2Sync(password, user.Password.salt, 1000, 64, "sha256")
-  .toString("hex");
+  .pbkdf2Sync(password, user.Password.salt, 1000, 64, 'sha256')
+  .toString('hex')
 
 if (hash !== user.Password.hash) {
-  return false;
+  return false
 }
 ```