From fa0bf873e783ede54bed05f80ae650eddb4eb218 Mon Sep 17 00:00:00 2001
From: Allen Francis <lallenfrancisl@gmail.com>
Date: Fri, 29 Dec 2023 11:58:04 +0530
Subject: [PATCH] refactor: format every file using prettier

---
 .prettierignore              |  1 +
 components.json              | 28 ++++++++++++++--------------
 src/components/AppDialog.vue |  8 ++++----
 src/components/CopyLink.vue  |  2 +-
 src/components/FileItem.vue  | 14 +++++++-------
 src/components/SpaceCard.vue | 20 +++++++++++---------
 src/layouts/BaseLayout.vue   |  4 ++--
 src/layouts/SpaceLayout.vue  | 12 ++++++------
 8 files changed, 46 insertions(+), 43 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..5c457d7
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+docs
\ No newline at end of file
diff --git a/components.json b/components.json
index 69cc532..467fba7 100644
--- a/components.json
+++ b/components.json
@@ -1,15 +1,15 @@
 {
-  "style": "default",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/assets/index.scss",
-    "baseColor": "slate",
-    "cssVariables": true
-  },
-  "framework": "vite",
-  "aliases": {
-    "components": "src/components",
-    "utils": "src/lib/utils"
-  }
-}
\ No newline at end of file
+    "style": "default",
+    "typescript": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "src/assets/index.scss",
+        "baseColor": "slate",
+        "cssVariables": true
+    },
+    "framework": "vite",
+    "aliases": {
+        "components": "src/components",
+        "utils": "src/lib/utils"
+    }
+}
diff --git a/src/components/AppDialog.vue b/src/components/AppDialog.vue
index 46f26bd..450ed31 100644
--- a/src/components/AppDialog.vue
+++ b/src/components/AppDialog.vue
@@ -4,7 +4,7 @@
             <DialogOverlay class="overlay" />
             <DialogContent
                 as="article"
-                class="content rounded-medium bg-surface-primary text-primary py-x3 border-primary border"
+                class="content rounded-medium border border-primary bg-surface-primary py-x3 text-primary"
             >
                 <header class="px-x4 py-x3">
                     <div class="flex items-center justify-between">
@@ -12,18 +12,18 @@
                             <component
                                 :is="icon"
                                 v-if="icon"
-                                class="text-surface-brand h-6 w-auto"
+                                class="h-6 w-auto text-surface-brand"
                             ></component>
 
                             <DialogTitle
-                                class="text-heading-small font-space-grotesk ml-2 font-bold capitalize"
+                                class="ml-2 font-space-grotesk text-heading-small font-bold capitalize"
                             >
                                 {{ title }}
                             </DialogTitle>
                         </div>
 
                         <DialogClose class="flex items-center" type="button">
-                            <XIcon class="text-surface-tertiary h-6 w-auto" />
+                            <XIcon class="h-6 w-auto text-surface-tertiary" />
                         </DialogClose>
                     </div>
 
diff --git a/src/components/CopyLink.vue b/src/components/CopyLink.vue
index 309549a..104671f 100644
--- a/src/components/CopyLink.vue
+++ b/src/components/CopyLink.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="copy-link text-xs cursor-pointer border border-neutral-300 rounded-md px-3 py-2.5 truncate"
+        class="copy-link cursor-pointer truncate rounded-md border border-neutral-300 px-3 py-2.5 text-xs"
         @click="copyLink()"
     >
         {{ link }}
diff --git a/src/components/FileItem.vue b/src/components/FileItem.vue
index 5bc9fb1..f8ec269 100644
--- a/src/components/FileItem.vue
+++ b/src/components/FileItem.vue
@@ -1,10 +1,10 @@
 <template>
-    <article class="gap-x4 px-x4 py-x2 flex items-center justify-between">
+    <article class="flex items-center justify-between gap-x4 px-x4 py-x2">
         <div class="flex-grow">
-            <div class="gap-x2 flex items-center">
+            <div class="flex items-center gap-x2">
                 <component
                     :is="icon"
-                    class="h-x4 text-surface-brand w-auto"
+                    class="h-x4 w-auto text-surface-brand"
                 ></component>
 
                 <div class="text-paragraph-small text-primary">
@@ -14,15 +14,15 @@
 
             <ProgressRoot
                 :model-value="clampedProgress"
-                class="progress translate- mt-x2 h-x1 bg-surface-tertiary w-8/12 overflow-hidden rounded-full"
+                class="progress translate- mt-x2 h-x1 w-8/12 overflow-hidden rounded-full bg-surface-tertiary"
             >
                 <ProgressIndicator
-                    class="indicator bg-surface-brand w-full h-full rounded-full"
+                    class="indicator h-full w-full rounded-full bg-surface-brand"
                     :style="`transform: translateX(-${100 - clampedProgress}%)`"
                 />
             </ProgressRoot>
 
-            <div class="mt-x2 text-paragraph-x-small text-secondary uppercase">
+            <div class="mt-x2 text-paragraph-x-small uppercase text-secondary">
                 {{ filesizeString(file.size, "b") }}
             </div>
         </div>
@@ -37,7 +37,7 @@
             <PauseIcon v-if="state === 'transferring'" class="h-x6 w-auto" />
             <CheckIcon
                 v-if="state === 'done'"
-                class="h-x6 text-surface-brand w-auto"
+                class="h-x6 w-auto text-surface-brand"
             />
         </button>
     </article>
diff --git a/src/components/SpaceCard.vue b/src/components/SpaceCard.vue
index 33567fd..31dc3bc 100644
--- a/src/components/SpaceCard.vue
+++ b/src/components/SpaceCard.vue
@@ -1,39 +1,41 @@
 <template>
     <button
-        class="rounded-medium p-x4 w-full text-left border"
+        class="w-full rounded-medium border p-x4 text-left"
         :class="[
             state === 'active'
-                ? 'shadow-brand-focus-ring border-brand'
+                ? 'border-brand shadow-brand-focus-ring'
                 : 'border-primary',
         ]"
     >
-        <header class="font-space-grotesk flex items-center justify-between">
+        <header class="flex items-center justify-between font-space-grotesk">
             <section class="flex items-center">
                 <component
                     :is="icon[type]"
-                    class="w-auto h-6"
+                    class="h-6 w-auto"
                     :class="[
                         state === 'active'
                             ? 'text-surface-brand'
                             : 'text-surface-tertiary',
                     ]"
                 />
-                <h3 class="ml-x2 text-primary font-bold capitalize">{{ name }}</h3>
+                <h3 class="ml-x2 font-bold capitalize text-primary">
+                    {{ name }}
+                </h3>
             </section>
 
             <section
-                class="text-paragraph-x-small flex items-center justify-center w-6 h-6 font-bold border rounded-full"
+                class="flex h-6 w-6 items-center justify-center rounded-full border text-paragraph-x-small font-bold"
                 :class="[
                     state === 'active'
-                        ? 'border-brand text-brand-purple bg-opacity-35 bg-surface-brand'
-                        : 'text-placeholder bg-surface-secondary border-primary',
+                        ? 'border-brand bg-surface-brand bg-opacity-35 text-brand-purple'
+                        : 'border-primary bg-surface-secondary text-placeholder',
                 ]"
             >
                 {{ count }}
             </section>
         </header>
 
-        <p class="text-paragraph-x-small mt-x2 text-secondary">
+        <p class="mt-x2 text-paragraph-x-small text-secondary">
             Space created on {{ formattedDate }}
         </p>
     </button>
diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index db4d976..3e22e23 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -1,13 +1,13 @@
 <template>
     <article class="h-screen-d bg-[#0F172A]">
-        <div class="px-x4 py-x3 flex flex-col h-full max-w-3xl mx-auto">
+        <div class="mx-auto flex h-full max-w-3xl flex-col px-x4 py-x3">
             <header>
                 <slot name="header"></slot>
             </header>
 
             <AppDivider class="my-3" />
 
-            <main class="flex flex-col flex-grow">
+            <main class="flex flex-grow flex-col">
                 <slot name="body"></slot>
             </main>
 
diff --git a/src/layouts/SpaceLayout.vue b/src/layouts/SpaceLayout.vue
index bbe1eef..9540e87 100644
--- a/src/layouts/SpaceLayout.vue
+++ b/src/layouts/SpaceLayout.vue
@@ -1,13 +1,13 @@
 <template>
     <article
-        class="h-screen-d bg-surface-primary pt-x4 text-primary flex flex-col w-screen overflow-x-hidden"
+        class="flex h-screen-d w-screen flex-col overflow-x-hidden bg-surface-primary pt-x4 text-primary"
     >
-        <header class="px-x4 py-x4 relative flex items-center justify-between">
+        <header class="relative flex items-center justify-between px-x4 py-x4">
             <button @click="onBackBtnClick">
-                <ArrowLeft class="w-auto h-6" />
+                <ArrowLeft class="h-6 w-auto" />
             </button>
-            <div class="flex items-center mx-auto">
-                <SpaceIcon class="text-surface-brand w-auto h-6" />
+            <div class="mx-auto flex items-center">
+                <SpaceIcon class="h-6 w-auto text-surface-brand" />
                 <h1 class="ml-x2 font-space-grotesk font-bold capitalize">
                     Design Space
                 </h1>
@@ -16,7 +16,7 @@
 
         <AppDivider class="my-x2" />
 
-        <section class="pb-x3 flex-grow">
+        <section class="flex-grow pb-x3">
             <slot></slot>
         </section>
     </article>