From 5221294f78b8c42b276c2af30e400aa8bdb37225 Mon Sep 17 00:00:00 2001
From: "Haytham A. Salama" <haythamasalama@gmail.com>
Date: Sun, 30 Jul 2023 16:56:01 +0300
Subject: [PATCH] chore: add eslint rules for spacing (#464)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 .eslintrc.cjs                                 | 39 ++++++++++++++++---
 .../examples/AccordionExampleDefaultSlot.vue  |  2 +-
 .../examples/CommandPaletteExampleGroups.vue  | 20 +++++-----
 .../examples/SelectMenuExampleObjects.vue     |  9 ++---
 src/runtime/components/elements/Alert.vue     |  2 +-
 src/runtime/components/forms/Toggle.vue       |  6 +--
 src/runtime/components/layout/Card.vue        |  2 +-
 .../navigation/CommandPaletteGroup.vue        |  2 +-
 .../components/overlays/Notification.vue      |  2 +-
 src/runtime/types/avatar.d.ts                 |  2 +-
 10 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index b2030aed..b9874762 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,15 +2,42 @@ module.exports = {
   root: true,
   extends: ['@nuxt/eslint-config'],
   rules: {
-    'semi': ['error', 'never'],
-    'quotes': ['error', 'single'],
+    // General
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
     'comma-dangle': ['error', 'never'],
+    'comma-spacing': ['error', { before: false, after: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
     'space-before-function-paren': ['error', 'always'],
+    'object-curly-spacing': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'space-before-blocks': ['error', 'always'],
+    'space-infix-ops': ['error', { int32Hint: false }],
+
+    // Typescript
+    '@typescript-eslint/type-annotation-spacing': 'error',
+
+    // Vuejs
     'vue/multi-word-component-names': 0,
-    'vue/max-attributes-per-line': ['error', {
-      singleline: {
-        max: 5
+    'vue/html-indent': ['error', 2],
+    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
+    'vue/keyword-spacing': ['error', { before: true, after: true }],
+    'vue/object-curly-spacing': ['error', 'always'],
+    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'vue/arrow-spacing': ['error', { before: true, after: true }],
+    'vue/array-bracket-spacing': ['error', 'never'],
+    'vue/block-spacing': ['error', 'always'],
+    'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+    'vue/space-infix-ops': ['error', { int32Hint: false }],
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: {
+          max: 5
+        }
       }
-    }]
+    ],
+    'vue/padding-line-between-blocks': ['error', 'always']
   }
 }
diff --git a/docs/components/content/examples/AccordionExampleDefaultSlot.vue b/docs/components/content/examples/AccordionExampleDefaultSlot.vue
index f1d70ff1..1b3dd4b0 100644
--- a/docs/components/content/examples/AccordionExampleDefaultSlot.vue
+++ b/docs/components/content/examples/AccordionExampleDefaultSlot.vue
@@ -30,7 +30,7 @@ const items = [{
 <template>
   <UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
     <template #default="{ item, index, open }">
-      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
+      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded: 'rounded-none', padding: { sm: 'p-3' } }">
         <template #leading>
           <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
             <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
diff --git a/docs/components/content/examples/CommandPaletteExampleGroups.vue b/docs/components/content/examples/CommandPaletteExampleGroups.vue
index b6de28db..6717978b 100644
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ b/docs/components/content/examples/CommandPaletteExampleGroups.vue
@@ -18,17 +18,17 @@ const actions = [
 
 const groups = computed(() => commandPaletteRef.value?.query
   ? [{
-      key: 'users',
-      commands: users
-    }]
+    key: 'users',
+    commands: users
+  }]
   : [{
-      key: 'recent',
-      label: 'Recent searches',
-      commands: users.slice(0, 1)
-    }, {
-      key: 'actions',
-      commands: actions
-    }])
+    key: 'recent',
+    label: 'Recent searches',
+    commands: users.slice(0, 1)
+  }, {
+    key: 'actions',
+    commands: actions
+  }])
 
 function onSelect (option) {
   if (option.click) {
diff --git a/docs/components/content/examples/SelectMenuExampleObjects.vue b/docs/components/content/examples/SelectMenuExampleObjects.vue
index 3f9510e7..aa050124 100644
--- a/docs/components/content/examples/SelectMenuExampleObjects.vue
+++ b/docs/components/content/examples/SelectMenuExampleObjects.vue
@@ -5,22 +5,19 @@ const people = [{
   href: 'https://github.com/benjamincanac',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
-},
-{
+}, {
   id: 'Atinux',
   label: 'Atinux',
   href: 'https://github.com/Atinux',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
-},
-{
+}, {
   id: 'smarroufin',
   label: 'smarroufin',
   href: 'https://github.com/smarroufin',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
-},
-{
+}, {
   id: 'nobody',
   label: 'Nobody',
   icon: 'i-heroicons-user-circle'
diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index 07960a77..59d0393a 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -38,7 +38,7 @@ import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
-import type { Avatar} from '../../types/avatar'
+import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index 9e78532a..c8150d66 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -84,7 +84,7 @@ export default defineComponent({
       }
     })
 
-    const switchClass = computed(()=>{
+    const switchClass = computed(() => {
       return classNames(
         ui.value.base,
         ui.value.rounded,
@@ -93,13 +93,13 @@ export default defineComponent({
       )
     })
 
-    const onIconClass = computed(()=>{
+    const onIconClass = computed(() => {
       return classNames(
         ui.value.icon.on.replaceAll('{color}', props.color)
       )
     })
 
-    const offIconClass = computed(()=>{
+    const offIconClass = computed(() => {
       return classNames(
         ui.value.icon.off.replaceAll('{color}', props.color)
       )
diff --git a/src/runtime/components/layout/Card.vue b/src/runtime/components/layout/Card.vue
index bc0c0bbc..a7eba706 100644
--- a/src/runtime/components/layout/Card.vue
+++ b/src/runtime/components/layout/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="$attrs.onSubmit ? 'form': as"
+    :is="$attrs.onSubmit ? 'form' : as"
     :class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
     v-bind="$attrs"
   >
diff --git a/src/runtime/components/navigation/CommandPaletteGroup.vue b/src/runtime/components/navigation/CommandPaletteGroup.vue
index e068639b..2e2f7779 100644
--- a/src/runtime/components/navigation/CommandPaletteGroup.vue
+++ b/src/runtime/components/navigation/CommandPaletteGroup.vue
@@ -123,7 +123,7 @@ export default defineComponent({
       return typeof label === 'function' ? label(props.query) : label
     })
 
-    function highlight (text: string, { indices, value }: { indices: number[][], value:string }): string {
+    function highlight (text: string, { indices, value }: { indices: number[][], value: string }): string {
       if (text === value) {
         return ''
       }
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index fbc4bcec..eadd2be3 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -47,7 +47,7 @@ import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useTimer } from '../../composables/useTimer'
 import type { NotificationAction } from '../../types'
-import type { Avatar} from '../../types/avatar'
+import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
diff --git a/src/runtime/types/avatar.d.ts b/src/runtime/types/avatar.d.ts
index bb79c019..5baed741 100644
--- a/src/runtime/types/avatar.d.ts
+++ b/src/runtime/types/avatar.d.ts
@@ -1,7 +1,7 @@
 export interface Avatar {
   src?: string | boolean
   alt?: string
-  text:? string
+  text?: string
   size?: string
   chipColor?: string
   chipVariant?: string