feat: use new eslint custom config

apps/app/.eslintrc.cjs

@@ -1,27 +1,10 @@
 module.exports = {
-  root: true,
   extends: [
-    "@nuxt/eslint-config",
+    "@shelve/eslint-config",
     "plugin:tailwindcss/recommended"
   ],
-  overrides: [
-    {
-      files: [
-        "*.vue"
-      ],
-      parser: "vue-eslint-parser"
-    }
-  ],
   rules: {
     "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/no-unnecessary-arbitrary-value": "off",
-    "vue/multi-word-component-names": "off",
-    "vue/require-default-prop": "off",
-    "vue/max-attributes-per-line": [
-      'warn',
-      {
-        singleline: 5,
-      }
-    ],
+    "@typescript-eslint/explicit-function-return-type": "off",
   }
 }

apps/app/app.config.ts

@@ -20,43 +20,43 @@ export default defineAppConfig({
       },
     }
   },
-  title: "Shelve",
-  description: "Shelve, is a project management tool for developers, designers, etc... to make project creation and management easier.",
-  email: "contact@hrcd.fr",
-  phone: "(+33) 6 21 56 22 18",
+  title: 'Shelve',
+  description: 'Shelve, is a project management tool for developers, designers, etc... to make project creation and management easier.',
+  email: 'contact@hrcd.fr',
+  phone: '(+33) 6 21 56 22 18',
   socials: [
-    { name: "github", link: "https://github.com/HugoRCD" },
-    { name: "twitter", link: "https://twitter.com/HugoRCD__" },
-    { name: "linkedin", link: "https://www.linkedin.com/in/hugo-richard-0801" },
-    { name: "instagram", link: "https://www.instagram.com/hugo.rcd_" },
-    { name: "spotify", link: "https://open.spotify.com/user/yuvl0zpp3bpx4hne1ag7huten?si=df7ee2777c0c4fc4" }
+    { name: 'github', link: 'https://github.com/HugoRCD' },
+    { name: 'twitter', link: 'https://twitter.com/HugoRCD__' },
+    { name: 'linkedin', link: 'https://www.linkedin.com/in/hugo-richard-0801' },
+    { name: 'instagram', link: 'https://www.instagram.com/hugo.rcd_' },
+    { name: 'spotify', link: 'https://open.spotify.com/user/yuvl0zpp3bpx4hne1ag7huten?si=df7ee2777c0c4fc4' }
   ],
   link: [
     {
-      rel: "icon",
-      type: "image/x-icon",
-      href: "/favicon.ico",
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
     },
     {
-      rel: "apple-touch-icon",
-      sizes: "180x180",
-      href: "/apple-touch-icon.png",
+      rel: 'apple-touch-icon',
+      sizes: '180x180',
+      href: '/apple-touch-icon.png',
     },
     {
-      rel: "icon",
-      type: "image/png",
-      sizes: "32x32",
-      href: "/favicon-32x32.png",
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '32x32',
+      href: '/favicon-32x32.png',
     },
     {
-      rel: "icon",
-      type: "image/png",
-      sizes: "16x16",
-      href: "/favicon-16x16.png",
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '16x16',
+      href: '/favicon-16x16.png',
     },
     {
-      rel: "manifest",
-      href: "/site.webmanifest",
+      rel: 'manifest',
+      href: '/site.webmanifest',
     },
   ],
-});
+})

apps/app/app.vue

@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { Toaster } from "vue-sonner";
+import { Toaster } from 'vue-sonner'
 
-const { title, link } = useAppConfig();
+const { title, link } = useAppConfig()
 useHead({
   title: title,
   link: link,
   script: [
     {
-      src: "https://eu.umami.is/script.js",
+      src: 'https://eu.umami.is/script.js',
       defer: true,
-      "data-website-id": "24a47d51-4629-4f67-af04-1e2242761c67",
+      'data-website-id': '24a47d51-4629-4f67-af04-1e2242761c67',
     },
   ],
-});
+})
 
 function setPrefersReducedMotion(reduceMotion: boolean) {
   if (reduceMotion) {
-    document.documentElement.setAttribute("data-reduce-motion", "reduce");
+    document.documentElement.setAttribute('data-reduce-motion', 'reduce')
   } else {
-    document.documentElement.removeAttribute("data-reduce-motion");
+    document.documentElement.removeAttribute('data-reduce-motion')
   }
 }
 
-const reduceMotion = useCookie<boolean>("reduceMotion", {
+const reduceMotion = useCookie<boolean>('reduceMotion', {
   watch: true,
-});
+})
 
-if (process.client) setPrefersReducedMotion(reduceMotion.value);
+if (process.client) setPrefersReducedMotion(reduceMotion.value)
 
 
-await useSession().refresh();
+await useSession().refresh()
 </script>
 
 <template>

apps/app/components/DropdownMenu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { publicUser } from "@shelve/types";
-import type { Ref } from "vue";
+import type { publicUser } from '@shelve/types'
+import type { Ref } from 'vue'
 
-const navigations = getNavigation("app");
-const admin_navigations = getNavigation("admin");
+const navigations = getNavigation('app')
+const admin_navigations = getNavigation('admin')
 const navItem = navigations.map((nav) => {
   return {
     label: nav.name,
@@ -20,7 +20,7 @@ const adminNavItem = admin_navigations.map((nav) => {
 })
 
 
-const user = useCurrentUser() as Ref<publicUser>;
+const user = useCurrentUser() as Ref<publicUser>
 
 const items = [
   [
@@ -36,7 +36,7 @@ const items = [
     {
       label: 'Sign out',
       icon: 'i-heroicons-arrow-left-on-rectangle',
-      iconClass: "text-red-500 dark:text-red-500",
+      iconClass: 'text-red-500 dark:text-red-500',
       click: () => useSession().clear()
     }
   ]

apps/app/components/Loader.vue

@@ -2,9 +2,9 @@
 defineProps({
   size: {
     type: String,
-    default: "md",
+    default: 'md',
   }
-});
+})
 </script>
 
 <template>

apps/app/components/OTP.vue

@@ -5,59 +5,59 @@ const props = defineProps({
     default: 6
   },
   disabled: Boolean
-});
+})
 
 const otpRef = ref<HTMLDivElement>()
-const otpInputs = ref<Array<HTMLInputElement | null>>([]);
+const otpInputs = ref<Array<HTMLInputElement | null>>([])
 
-const digits = reactive<[string | null]>([null]);
+const digits = reactive<[string | null]>([null])
 
-const otp = defineModel({ type: String });
+const otp = defineModel({ type: String })
 
 for (let i = 0; i < props.digitCount; i++) {
-  digits[i] = otp.value![i] || null;
+  digits[i] = otp.value![i] || null
 }
 
-const emit = defineEmits(['otp:full']);
+const emit = defineEmits(['otp:full'])
 
 const isDigitsFull = function () {
   for (const elem of digits) {
-    if (elem == null || elem == undefined) {
-      return false;
+    if (elem) {
+      return false
     }
   }
-  return true;
+  return true
 }
 
 const handleKeyDown = function (event: KeyboardEvent, index: number) {
-  if (!otpRef.value) return;
-  if (event.key !== "Tab" &&
-      event.key !== "ArrowRight" &&
-      event.key !== "ArrowLeft"
+  if (!otpRef.value) return
+  if (event.key !== 'Tab' &&
+      event.key !== 'ArrowRight' &&
+      event.key !== 'ArrowLeft'
   ) {
-    event.preventDefault();
+    event.preventDefault()
   }
 
-  if (event.key === "Backspace") {
-    digits[index] = null;
-    if (index != 0) {
-      (otpRef.value.children)[index - 1].focus();
+  if (event.key === 'Backspace') {
+    digits[index] = null
+    if (index !== 0) {
+      (otpRef.value.children)[index - 1].focus()
     }
-    otp.value = digits.join('');
-    otp.value = otp.value.slice(0, -1);
-    return;
+    otp.value = digits.join('')
+    otp.value = otp.value.slice(0, -1)
+    return
   }
 
   if ((new RegExp('^([0-9])$')).test(event.key)) {
-    digits[index] = event.key;
-    if (index != props.digitCount - 1) {
-      (otpRef.value.children)[index + 1].focus();
+    digits[index] = event.key
+    if (index !== props.digitCount - 1) {
+      (otpRef.value.children)[index + 1].focus()
     }
-    otp.value = digits.join('');
+    otp.value = digits.join('')
   }
 
   if (isDigitsFull()) {
-    emit('otp:full', otp.value);
+    emit('otp:full', otp.value)
   }
 }
 </script>
@@ -68,12 +68,12 @@ const handleKeyDown = function (event: KeyboardEvent, index: number) {
       <input
         v-for="(el, index) in digits"
         ref="otpInputs"
-        :key="el+index"
+        :key="`otp-${index}`"
         v-model="digits[index]"
         type="text"
         class="digit-box"
         :autofocus="index === 0"
-        :placeholder="index+1"
+        :placeholder="`${index + 1}`"
         :disabled
         maxlength="1"
         @keydown="handleKeyDown($event, index)"

apps/app/components/Status.vue

@@ -12,7 +12,7 @@ defineProps({
     type: String,
     required: true,
   },
-});
+})
 </script>
 
 <template>

apps/app/components/auth/Session.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { Session } from "@shelve/types";
-import type { PropType } from "vue";
+import type { Session } from '@shelve/types'
+import type { PropType } from 'vue'
 
 const props = defineProps({
   session: {
     type: Object as PropType<Session>,
     required: true,
   },
-});
+})
 
 const { status, error, execute } = await useFetch(`/api/user/session/${props.session.id}`, {
-  method: "DELETE",
+  method: 'DELETE',
   watch: false,
   immediate: false,
 })
 
-const emit = defineEmits(["refresh"]);
+const emit = defineEmits(['refresh'])
 async function logoutSession() {
   await execute()
-  if (error.value) toast.error("An error occurred")
+  if (error.value) toast.error('An error occurred')
   else {
-    toast.success("You have been logged out from this device")
-    emit("refresh")
+    toast.success('You have been logged out from this device')
+    emit('refresh')
   }
 }
 </script>

apps/app/components/form/Group.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PropType } from "vue";
+import type { PropType } from 'vue'
 
 defineProps({
   label: {
@@ -11,8 +11,8 @@ defineProps({
     default: false,
   },
   type: {
-    type: String as PropType<"text" | "email" | "password" | "textarea">,
-    default: "text",
+    type: String as PropType<'text' | 'email' | 'password' | 'textarea'>,
+    default: 'text',
   },
   placeholder: {
     type: String,

apps/app/components/layout/Divider.vue

@@ -3,7 +3,7 @@ defineProps({
   text: {
     type: String
   }
-});
+})
 </script>
 
 <template>

apps/app/components/layout/NavItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Navigation } from "~/utils/navigation";
-import { capitalize, type PropType } from "vue";
+import { capitalize, type PropType } from 'vue'
+import type { Navigation } from '~/utils/navigation'
 
 defineProps({
   navItem: {
@@ -11,7 +11,7 @@ defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 </script>
 
 <template>

apps/app/components/layout/Navbar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const navigation = getNavigation("app");
+const navigation = getNavigation('app')
 </script>
 
 <template>