🦄 refactor: code cleanup

.github/workflows/release.yml

@@ -26,11 +26,8 @@ jobs:
           fetch-depth: 0
       - run: git fetch --force --tags
       - uses: mikefarah/yq@master
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: "yarn"
-      - run: yarn install
+      - uses: oven-sh/setup-bun@v1
+      - run: bun install
       - run: make build
         env:
           VITE_API_URL: ${{ vars.VITE_API_URL }}

Makefile

@@ -52,7 +52,7 @@ build: ## Building project
 	$(msg) "$(GREEN)Building project$(RESET)"
 	@yq -i -p=json -o=json '.commit = "${GIT_COMMIT}"' ${ROOT_PATH}/package.json
 	@yq -i -p=json -o=json '.version = "${VERSION}"' ${ROOT_PATH}/package.json
-	@yarn vite build --mode production
+	@bun x vite build --mode production
 #############################################################################
 
 

package.json

@@ -5,11 +5,11 @@
   "commit": "00000000",
   "private": true,
   "scripts": {
-    "dev": "VITE_CJS_IGNORE_WARNING=true vite",
-    "build": "VITE_CJS_IGNORE_WARNING=true vite build --mode production",
-    "preview": "vite preview --port 4173",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck",
-    "update": "ncu -i --format group"
+    "dev": "VITE_CJS_IGNORE_WARNING=true bun x vite",
+    "build": "VITE_CJS_IGNORE_WARNING=true bun x vite build --mode production",
+    "preview": "bun x vite preview --port 4173",
+    "typecheck": "bun x vue-tsc --noEmit --skipLibCheck",
+    "update": "bun x ncu -i --format group"
   },
   "dependencies": {
     "notiwind": "^2.0.2",
@@ -39,7 +39,7 @@
     "sass": "^1.77.2",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-devtools": "^7.2.1"
   }

src/assets/scss/components/table.scss

@@ -6,7 +6,7 @@ table {
   }
 
   tr {
-    //@apply border-b border-gray-100;
+    @apply border-b border-gray-100;
 
     &.cursor {
       &:hover,

src/components/Alert/index.vue

@@ -5,56 +5,15 @@
         <Notification v-slot="{ notifications }" enter="transform ease-out duration-300 transition" enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
           enter-to="translate-y-0 opacity-100 sm:translate-x-0" leave="transition ease-in duration-500" leave-from="opacity-100" leave-to="opacity-0" move="transition duration-500"
           move-delay="delay-300">
-          <div v-for="notification in notifications" :key="notification.id">
-            <div v-if="notification.type === 'error'" class="notification">
-              <div class="ico bg-red-500">
-                <SvgIcon name="error" class="text-white" />
-              </div>
-
-              <div class="message">
-                <div class="mx-3">
-                  <span class="font-semibold text-red-500">Error</span>
-                  <p>{{ notification.text }}</p>
-                </div>
-              </div>
+          <div v-for="notification in notifications" :key="notification.id" class="notification">
+            <div :class="['ico', typeStyles[notification.type].bgColor]">
+              <SvgIcon :name="typeStyles[notification.type].icon" class="text-white" />
             </div>
 
-            <div v-if="notification.type === 'info'" class="notification">
-              <div class="ico bg-blue-500">
-                <SvgIcon name="info" class="text-white" />
-              </div>
-
-              <div class="message">
-                <div class="mx-3">
-                  <span class="font-semibold text-blue-500">Info</span>
-                  <p>{{ notification.text }}</p>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="notification.type === 'success'" class="notification">
-              <div class="ico bg-green-500">
-                <SvgIcon name="success" class="text-white" />
-              </div>
-
-              <div class="message">
-                <div class="mx-3">
-                  <span class="font-semibold text-green-500">Success</span>
-                  <p>{{ notification.text }}</p>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="notification.type === 'warning'" class="notification">
-              <div class="ico bg-yellow-500">
-                <SvgIcon name="warning" class="text-white" />
-              </div>
-
-              <div class="message">
-                <div class="mx-3">
-                  <span class="font-semibold text-yellow-500">Warning</span>
-                  <p>{{ notification.text }}</p>
-                </div>
+            <div class="message">
+              <div class="mx-3">
+                <span :class="['font-semibold', typeStyles[notification.type].textColor]">{{ typeStyles[notification.type].label }}</span>
+                <p>{{ notification.text }}</p>
               </div>
             </div>
           </div>
@@ -67,8 +26,7 @@
 <script setup lang="ts">
 import { notify, Notification, NotificationGroup } from "notiwind";
 import { SvgIcon } from "@/components";
-
-const NOTIFICATION_DURATION = 4000;
+import { computed } from 'vue';
 
 const handleNotification = (eName: string, notificationType: string) => {
   const callback = (e: Event) => {
@@ -78,7 +36,7 @@ const handleNotification = (eName: string, notificationType: string) => {
         type: notificationType,
         text: (<any>e).detail,
       },
-      NOTIFICATION_DURATION
+      4000
     );
   };
 
@@ -91,6 +49,13 @@ handleNotification("connextError", "error");
 handleNotification("connextSuccess", "success");
 handleNotification("connextWarning", "warning");
 handleNotification("connextInfo", "info");
+
+const typeStyles = computed(() => ({
+  error: { bgColor: 'bg-red-500', textColor: 'text-red-500', label: 'Error', icon: 'error' },
+  info: { bgColor: 'bg-blue-500', textColor: 'text-blue-500', label: 'Info', icon: 'info' },
+  success: { bgColor: 'bg-green-500', textColor: 'text-green-500', label: 'Success', icon: 'success' },
+  warning: { bgColor: 'bg-yellow-500', textColor: 'text-yellow-500', label: 'Warning', icon: 'warning' }
+}));
 </script>
 
 <style lang="scss">

src/components/Badge/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <span class="badge" :class="classBadge">
-    {{ name }}
-  </span>
+  <span :class="badgeClass">{{ props.name }}</span>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
+
 const props = defineProps({
   name: {
     type: String,
@@ -14,12 +14,10 @@ const props = defineProps({
     type: String,
     default: "gray",
   },
-  class: {
-    type: String,
-  },
+  class: String,
 });
 
-const classBadge = "badge-" + props.color + " " + props.class;
+const badgeClass = computed(() => `badge badge-${props.color} ${props.class}`);
 </script>
 
 <style lang="scss">

src/components/Breadcrumbs/server-name.vue

@@ -7,30 +7,25 @@ import { ref, onMounted } from "vue";
 import { serverNameByID } from "@/api/server";
 import { ServerNameByID_Request } from "@proto/server";
 
-const data: any = ref({});
+interface ServerData {
+  server_name: string;
+}
 
-const props = defineProps({
-  memberId: {
-    type: String,
-    required: true,
-  },
-  serverId: {
-    type: String,
-    required: true,
-  },
-  projectId: {
-    type: String,
-    required: true,
-  },
-});
+const data = ref<ServerData | null>(null);
+
+const props = defineProps<{
+  memberId: string;
+  serverId: string;
+  projectId: string;
+}>();
 
-onMounted(() => {
-  serverNameByID(<ServerNameByID_Request>{
+onMounted(async () => {
+  const response = await serverNameByID(<ServerNameByID_Request>{
     user_id: props.memberId,
     server_id: props.serverId,
     project_id: props.projectId,
-  }).then((res) => {
-    data.value = res.data.result;
   });
+
+  data.value = response.data.result;
 });
 </script>

src/components/Drawer/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <div class="drawer" :class="{ 'is-open': isOpen, 'is-visible': isVisible }">
-      <div class="drawer__overlay" :style="{ transitionDuration: `${speed}ms` }"></div>
-      <div class="drawer__content" ref="drawer" :style="{ maxWidth: maxWidth, transitionDuration: `${speed}ms`, backgroundColor: backgroundColor }">
+    <div class="drawer" :class="{ 'is-open': props.isOpen, 'is-visible': isVisible }">
+      <div class="drawer__overlay" :style="{ transitionDuration: `${props.speed}ms` }"></div>
+      <div class="drawer__content" ref="drawer" :style="{ maxWidth: props.maxWidth, transitionDuration: `${props.speed}ms`, backgroundColor: props.backgroundColor }">
         <div class="pb-4">
-          <h2>{{ title }}</h2>
+          <h2>{{ props.title }}</h2>
         </div>
 
         <slot />

src/components/Form/Input/index.vue

@@ -1,57 +1,41 @@
 <template>
-  <div class="form-control" :class="class">
+  <div class="form-control" :for="id" :class="class">
     <label class="label">
-      <span v-if="name" class="text">{{ name }}{{ required ? "*" : "" }}</span>
-      <span v-if="error" class="error">
-        {{ error }}
-      </span>
+      <span v-if="props.name" class="text">{{ fullName }}</span>
+      <span v-if="props.error" class="error">{{ props.error }}</span>
     </label>
-    <input :type="type" v-model="value" :class="error ? 'error' : ''" class="input" :disabled="disabled" :placeholder="placeholder" :autocomplete="autocomplete" />
+    <input :type="props.type" v-model="value" :class="props.error ? 'error' : ''" class="input" :disabled="props.disabled" :placeholder="props.placeholder"
+      :autocomplete="props.autocomplete" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 
 const props = defineProps({
-  name: {
-    type: String,
-  },
+  name: String,
   modelValue: {
     required: true,
   },
+  id: String,
   type: {
     type: String,
     default: "text",
   },
-  error: {
-    type: String,
-  },
-  class: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-  },
-  required: {
-    type: Boolean,
-  },
-  placeholder: {
-    type: String,
-  },
-  autocomplete: {
-    type: String,
-  },
+  error: String,
+  class: String,
+  disabled: Boolean,
+  required: Boolean,
+  placeholder: String,
+  autocomplete: String,
 });
 
 const emits = defineEmits(["update:modelValue"]);
 
 const value = computed({
-  get: () => {
-    return props.modelValue;
-  },
-  set: (val) => {
-    emits("update:modelValue", val);
-  },
+  get: () => props.modelValue,
+  set: (val) => emits("update:modelValue", val),
 });
+
+const fullName = computed(() => `${props.name}${props.required ? "*" : ""}`);
 </script>

src/components/Form/Select/index.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="form-dropdown">
     <label class="label">
-      <span v-if="name" class="text">{{ name }}{{ required ? "*" : "" }}</span>
-      <span v-if="error" class="error">
-        {{ error }}
-      </span>
+      <span v-if="props.name" class="text">{{ fullName }}</span>
+      <span v-if="props.error" class="error">{{ props.error }}</span>
     </label>
 
     <div ref="compSelect">
@@ -14,7 +12,7 @@
       </button>
 
       <ul v-if="open">
-        <li v-for="(item) in options" @click="setLanguage(item)">
+        <li v-for="(item) in props.options" @click="setLanguage(item)">
           {{ item }}
         </li>
       </ul>
@@ -33,35 +31,24 @@ onClickOutside(compSelect, event => close());
 const open = ref(false);
 
 const props = defineProps({
-  name: {
-    type: String,
-  },
+  name: String,
   modelValue: {
     required: false,
   },
-  error: {
-    type: String,
-  },
-  required: {
-    type: Boolean,
-  },
+  error: String,
+  required: Boolean,
   options: Object,
 });
 
 const emits = defineEmits(["update:modelValue"]);
-const value = computed({
-  get: () => {
-    if (props.modelValue === undefined) {
-      return "Choose option";
-    }
 
-    return props.modelValue;
-  },
-  set: (val) => {
-    emits("update:modelValue", val);
-  },
+const value = computed({
+  get: () => props.modelValue ?? "Choose option",
+  set: (val) => emits("update:modelValue", val),
 });
 
+const fullName = computed(() => `${props.name}${props.required ? "*" : ""}`);
+
 const toggle = () => {
   open.value = !open.value;
 };