From ea27b9de33ce5ff2ca01e5efae284aacc200900b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Pumar?= <damianpumar@gmail.com>
Date: Tue, 26 Nov 2024 10:59:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Improve=20plugins=20loaders=20(#?=
 =?UTF-8?q?5697)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- [x] Remove duplicated names
- [x] Improve the way to load plugins and extensions
- [x] Auto loading new plugins
- [x] Convert to typescript
- [x] Delete unused directive
---
 argilla-frontend/nuxt.config.ts               | 23 +----------
 .../plugins/{plugins => axios}/axios-cache.ts |  0
 .../axios-global-handler.ts}                  |  0
 .../plugins/di/{index.ts => di.ts}            |  4 +-
 ...{badge.directive.js => badge.directive.ts} | 17 ++++++--
 ...ircle.directive.js => circle.directive.ts} |  1 +
 .../click-outside.directive.ts}               |  0
 argilla-frontend/plugins/directives/index.ts  |  6 ---
 .../directives/optional-field.directive.js    | 22 ----------
 ...rective.js => required-field.directive.ts} |  4 +-
 .../svg-icon.element.ts}                      |  0
 ...ltip.directive.js => tooltip.directive.ts} | 40 ++++++++++++++++---
 .../color-generator.ts                        |  0
 .../{plugins => extensions}/color-schema.ts   |  0
 .../copy-to-clipboard.ts}                     |  2 +
 .../format-number.ts}                         |  9 ++++-
 .../toast.ts => extensions/notification.ts}   |  0
 .../{plugins => extensions}/platform.ts       |  0
 .../vue-draggable.ts}                         |  1 +
 argilla-frontend/plugins/index.ts             | 28 +++++++++++++
 .../{index.ts => language-detector.ts}        |  0
 .../language-direction.ts}                    |  0
 .../plugins/logo/{index.ts => logo.ts}        |  0
 23 files changed, 93 insertions(+), 64 deletions(-)
 rename argilla-frontend/plugins/{plugins => axios}/axios-cache.ts (100%)
 rename argilla-frontend/plugins/{plugins/axios.ts => axios/axios-global-handler.ts} (100%)
 rename argilla-frontend/plugins/di/{index.ts => di.ts} (90%)
 rename argilla-frontend/plugins/directives/{badge.directive.js => badge.directive.ts} (81%)
 rename argilla-frontend/plugins/directives/{circle.directive.js => circle.directive.ts} (99%)
 rename argilla-frontend/plugins/{plugins/click-outside.js => directives/click-outside.directive.ts} (100%)
 delete mode 100644 argilla-frontend/plugins/directives/index.ts
 delete mode 100644 argilla-frontend/plugins/directives/optional-field.directive.js
 rename argilla-frontend/plugins/directives/{required-field.directive.js => required-field.directive.ts} (83%)
 rename argilla-frontend/plugins/{plugins/svg-icon.js => directives/svg-icon.element.ts} (100%)
 rename argilla-frontend/plugins/directives/{tooltip.directive.js => tooltip.directive.ts} (91%)
 rename argilla-frontend/plugins/{plugins => extensions}/color-generator.ts (100%)
 rename argilla-frontend/plugins/{plugins => extensions}/color-schema.ts (100%)
 rename argilla-frontend/plugins/{plugins/copy-to-clipboard.js => extensions/copy-to-clipboard.ts} (96%)
 rename argilla-frontend/plugins/{plugins/filters.js => extensions/format-number.ts} (69%)
 rename argilla-frontend/plugins/{plugins/toast.ts => extensions/notification.ts} (100%)
 rename argilla-frontend/plugins/{plugins => extensions}/platform.ts (100%)
 rename argilla-frontend/plugins/{plugins/vue-draggable.js => extensions/vue-draggable.ts} (51%)
 create mode 100644 argilla-frontend/plugins/index.ts
 rename argilla-frontend/plugins/language/{index.ts => language-detector.ts} (100%)
 rename argilla-frontend/plugins/{plugins/language.ts => language/language-direction.ts} (100%)
 rename argilla-frontend/plugins/logo/{index.ts => logo.ts} (100%)

diff --git a/argilla-frontend/nuxt.config.ts b/argilla-frontend/nuxt.config.ts
index 96a0cfa20c..ece2d5dd31 100644
--- a/argilla-frontend/nuxt.config.ts
+++ b/argilla-frontend/nuxt.config.ts
@@ -56,28 +56,7 @@ const config: NuxtConfig = {
   css: ["~assets/scss/base/base.scss"],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [
-    { src: "~/plugins/logo" },
-
-    { src: "~/plugins/directives" },
-
-    { src: "~/plugins/di" },
-
-    { src: "~/plugins/language" },
-
-    { src: "~/plugins/plugins/axios.ts" },
-    { src: "~/plugins/plugins/axios-cache.ts" },
-    { src: "~/plugins/plugins/svg-icon.js" },
-    { src: "~/plugins/plugins/click-outside.js" },
-    { src: "~/plugins/plugins/toast.ts" },
-    { src: "~/plugins/plugins/copy-to-clipboard.js" },
-    { src: "~/plugins/plugins/filters.js" },
-    { src: "~/plugins/plugins/vue-draggable.js" },
-    { src: "~/plugins/plugins/platform.ts" },
-    { src: "~/plugins/plugins/language.ts" },
-    { src: "~/plugins/plugins/color-schema" },
-    { src: "~/plugins/plugins/color-generator.ts" },
-  ],
+  plugins: [{ src: "~/plugins" }],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: [
diff --git a/argilla-frontend/plugins/plugins/axios-cache.ts b/argilla-frontend/plugins/axios/axios-cache.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/axios-cache.ts
rename to argilla-frontend/plugins/axios/axios-cache.ts
diff --git a/argilla-frontend/plugins/plugins/axios.ts b/argilla-frontend/plugins/axios/axios-global-handler.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/axios.ts
rename to argilla-frontend/plugins/axios/axios-global-handler.ts
diff --git a/argilla-frontend/plugins/di/index.ts b/argilla-frontend/plugins/di/di.ts
similarity index 90%
rename from argilla-frontend/plugins/di/index.ts
rename to argilla-frontend/plugins/di/di.ts
index 9903fdd48d..e5bc76b968 100644
--- a/argilla-frontend/plugins/di/index.ts
+++ b/argilla-frontend/plugins/di/di.ts
@@ -18,6 +18,6 @@
 import { Context } from "@nuxt/types";
 import { loadDependencyContainer } from "@/v1/di";
 
-export default (instance: Context) => {
-  loadDependencyContainer(instance);
+export default (context: Context) => {
+  loadDependencyContainer(context);
 };
diff --git a/argilla-frontend/plugins/directives/badge.directive.js b/argilla-frontend/plugins/directives/badge.directive.ts
similarity index 81%
rename from argilla-frontend/plugins/directives/badge.directive.js
rename to argilla-frontend/plugins/directives/badge.directive.ts
index 11d70ce1eb..04672ec50a 100644
--- a/argilla-frontend/plugins/directives/badge.directive.js
+++ b/argilla-frontend/plugins/directives/badge.directive.ts
@@ -1,7 +1,6 @@
-// style for button to open formular
 import Vue from "vue";
 
-//NOTE - to use this directive, add to your html element where to put a badge :
+// NOTE - to use this directive, add to your html element where to put a badge :
 //  v-badge="{showBadge: true,  verticalPosition: 'top',  horizontalPosition: 'right'}"
 //    => showBadge (Boolean) to show or not the badge : true or false
 //    => verticalPosition (String) vertical position : 'top' or 'bottom'
@@ -9,7 +8,19 @@ import Vue from "vue";
 //    => size (String) height and size of the badge: '10px
 
 Vue.directive("badge", {
-  bind: (element, binding) => {
+  bind: (
+    element,
+    binding: {
+      value: {
+        showBadge: boolean;
+        verticalPosition: string;
+        horizontalPosition: string;
+        backgroundColor: string;
+        borderColor: string;
+        size: string;
+      };
+    }
+  ) => {
     const { showBadge } = binding.value;
     if (showBadge) {
       const {
diff --git a/argilla-frontend/plugins/directives/circle.directive.js b/argilla-frontend/plugins/directives/circle.directive.ts
similarity index 99%
rename from argilla-frontend/plugins/directives/circle.directive.js
rename to argilla-frontend/plugins/directives/circle.directive.ts
index 61d53cb1e7..6e57f5108c 100644
--- a/argilla-frontend/plugins/directives/circle.directive.js
+++ b/argilla-frontend/plugins/directives/circle.directive.ts
@@ -1,4 +1,5 @@
 import Vue from "vue";
+
 Vue.directive("circle", {
   bind: (element, binding) => {
     let circleDiameter = "0px";
diff --git a/argilla-frontend/plugins/plugins/click-outside.js b/argilla-frontend/plugins/directives/click-outside.directive.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/click-outside.js
rename to argilla-frontend/plugins/directives/click-outside.directive.ts
diff --git a/argilla-frontend/plugins/directives/index.ts b/argilla-frontend/plugins/directives/index.ts
deleted file mode 100644
index 1bc6ce2741..0000000000
--- a/argilla-frontend/plugins/directives/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import "./badge.directive";
-import "./circle.directive";
-import "./optional-field.directive";
-import "./required-field.directive";
-import "./tooltip.directive";
-import "./copy-code.directive";
diff --git a/argilla-frontend/plugins/directives/optional-field.directive.js b/argilla-frontend/plugins/directives/optional-field.directive.js
deleted file mode 100644
index da7b1c7e77..0000000000
--- a/argilla-frontend/plugins/directives/optional-field.directive.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from "vue";
-
-// NOTE - to use this directive, add to your html text element where to put the "(optional)" :
-//  v-optional-field="true"
-
-Vue.directive("optional-field", {
-  bind: (element, binding, node) => {
-    if (binding?.value) {
-      const text = document.createTextNode(" (optional)");
-      const textWrapper = document.createElement("span");
-      textWrapper.style.fontSize = "0.8em";
-      textWrapper.style.color = "rgba(0, 0, 0, 0.87)";
-      textWrapper.style.fontWeight = "400";
-
-      textWrapper.appendChild(text);
-
-      node.context.$nextTick(() => {
-        element.insertAdjacentElement("afterEnd", textWrapper);
-      });
-    }
-  },
-});
diff --git a/argilla-frontend/plugins/directives/required-field.directive.js b/argilla-frontend/plugins/directives/required-field.directive.ts
similarity index 83%
rename from argilla-frontend/plugins/directives/required-field.directive.js
rename to argilla-frontend/plugins/directives/required-field.directive.ts
index c478d96c18..51e80ae6f6 100644
--- a/argilla-frontend/plugins/directives/required-field.directive.js
+++ b/argilla-frontend/plugins/directives/required-field.directive.ts
@@ -2,10 +2,10 @@ import Vue from "vue";
 
 // NOTE - to use this directive, add to your html text element where to put a asterisk :
 //  v-required-field="{ show: true, color: 'blue'}"
-//    => color (String) the color of the asterisk : black by default
+//  => color (String) the color of the asterisk : black by default
 
 Vue.directive("required-field", {
-  bind(element, binding) {
+  bind(element, binding: { value: { show: boolean; color: string } }) {
     const span = document.createElement("span");
     span.textContent = " *";
     span.style.color = binding.value.color;
diff --git a/argilla-frontend/plugins/plugins/svg-icon.js b/argilla-frontend/plugins/directives/svg-icon.element.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/svg-icon.js
rename to argilla-frontend/plugins/directives/svg-icon.element.ts
diff --git a/argilla-frontend/plugins/directives/tooltip.directive.js b/argilla-frontend/plugins/directives/tooltip.directive.ts
similarity index 91%
rename from argilla-frontend/plugins/directives/tooltip.directive.js
rename to argilla-frontend/plugins/directives/tooltip.directive.ts
index 0e09764d2f..cc666bed17 100644
--- a/argilla-frontend/plugins/directives/tooltip.directive.js
+++ b/argilla-frontend/plugins/directives/tooltip.directive.ts
@@ -1,12 +1,35 @@
+/* eslint-disable */
 import Vue from "vue";
 
+type Element = HTMLElement & {
+  textWrapper: HTMLElement;
+  openTooltip: () => void;
+  closeTooltip: () => void;
+  clickOnTooltipElementEvent: () => void;
+  clickOnClose: (event: Event) => void;
+  clickOutsideEvent: (event: Event) => void;
+  scrollInParent: () => void;
+  resize: () => void;
+};
+
 // NOTE - to use tooltip directive, add to your html element where to put a tooltip :
 //  v-tooltip="{ content: tooltipMessage, tooltipPosition: 'bottom' }"
 //    => content (String) the message to show in the tooltip
 // TODO - implement the other tooltip direction top/right/left
 
 Vue.directive("tooltip", {
-  inserted: (element, binding) => {
+  inserted: (
+    element: Element,
+    binding: {
+      value: {
+        open: any;
+        content: string;
+        color: string;
+        width: number;
+        tooltipPosition: string;
+      };
+    }
+  ) => {
     const tooltipId = `${element.id}tooltip`;
     const tooltipCloseIconId = `${tooltipId}__close-icon`;
     let tooltip = null;
@@ -34,7 +57,10 @@ Vue.directive("tooltip", {
       // NOTE - init close icon
       let tooltipHeader = document.createElement("div");
       tooltipHeader = initTooltipHeaderStyle(tooltipHeader);
-      tooltipHeader.firstChild.setAttribute("id", tooltipCloseIconId);
+      (tooltipHeader.firstChild as HTMLElement).setAttribute(
+        "id",
+        tooltipCloseIconId
+      );
 
       // NOTE - triangle
       let tooltipTriangle = document.createElement("div");
@@ -50,7 +76,7 @@ Vue.directive("tooltip", {
       tooltipTriangle.appendChild(tooltipTriangleInner);
 
       // NOTE - text styles
-      textWrapper = initTextStyle(textWrapper, color);
+      textWrapper = initTextStyle(textWrapper);
 
       // NOTE - tooltip styles
       tooltip = initTooltipStyle(tooltip, width);
@@ -90,7 +116,9 @@ Vue.directive("tooltip", {
     };
 
     element.clickOutsideEvent = function (event) {
-      if (!(element == event.target || element.contains(event.target))) {
+      if (
+        !(element == event.target || element.contains(event.target as Node))
+      ) {
         element.closeTooltip();
       }
     };
@@ -136,7 +164,7 @@ const isScrollable = function (element) {
   const hasScrollableContent = element.scrollHeight > element.clientHeight;
 
   const overflowYStyle = window.getComputedStyle(element).overflowY;
-  const isOverflowHidden = overflowYStyle.indexOf("hidden") !== -1;
+  const isOverflowHidden = overflowYStyle.includes("hidden");
 
   return hasScrollableContent && !isOverflowHidden;
 };
@@ -198,7 +226,7 @@ const initTooltipStyle = (tooltip, width) => {
   tooltip.style.padding = "20px 8px 8px 8px";
   tooltip.style.boxShadow = "0 8px 20px 0 rgba(0,0,0,.2)";
   tooltip.style.transition = "opacity 0.3s ease 0.2s";
-  tooltip.style.border = `2px transparent solid`;
+  tooltip.style.border = "2px transparent solid";
   tooltip.style.cursor = "default";
   return tooltip;
 };
diff --git a/argilla-frontend/plugins/plugins/color-generator.ts b/argilla-frontend/plugins/extensions/color-generator.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/color-generator.ts
rename to argilla-frontend/plugins/extensions/color-generator.ts
diff --git a/argilla-frontend/plugins/plugins/color-schema.ts b/argilla-frontend/plugins/extensions/color-schema.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/color-schema.ts
rename to argilla-frontend/plugins/extensions/color-schema.ts
diff --git a/argilla-frontend/plugins/plugins/copy-to-clipboard.js b/argilla-frontend/plugins/extensions/copy-to-clipboard.ts
similarity index 96%
rename from argilla-frontend/plugins/plugins/copy-to-clipboard.js
rename to argilla-frontend/plugins/extensions/copy-to-clipboard.ts
index 58b65e542e..9f3826a46c 100644
--- a/argilla-frontend/plugins/plugins/copy-to-clipboard.js
+++ b/argilla-frontend/plugins/extensions/copy-to-clipboard.ts
@@ -25,8 +25,10 @@ export default (_, inject) => {
     try {
       document.execCommand("copy");
     } catch (err) {
+      // eslint-disable-next-line no-console
       console.error("Unable to copy to clipboard", err);
     }
+
     document.body.removeChild(textArea);
   };
 
diff --git a/argilla-frontend/plugins/plugins/filters.js b/argilla-frontend/plugins/extensions/format-number.ts
similarity index 69%
rename from argilla-frontend/plugins/plugins/filters.js
rename to argilla-frontend/plugins/extensions/format-number.ts
index ddfd3903f7..7b61f4f901 100644
--- a/argilla-frontend/plugins/plugins/filters.js
+++ b/argilla-frontend/plugins/extensions/format-number.ts
@@ -1,9 +1,16 @@
 import Vue from "vue";
 
+declare global {
+  interface Navigator {
+    languages: string[];
+    userLanguage: string;
+    systemLanguage: string;
+  }
+}
+
 const locale = [
   ...(navigator.languages || []),
   navigator.language,
-  navigator.browserLanguage,
   navigator.userLanguage,
   navigator.systemLanguage,
 ].filter(Boolean);
diff --git a/argilla-frontend/plugins/plugins/toast.ts b/argilla-frontend/plugins/extensions/notification.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/toast.ts
rename to argilla-frontend/plugins/extensions/notification.ts
diff --git a/argilla-frontend/plugins/plugins/platform.ts b/argilla-frontend/plugins/extensions/platform.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/platform.ts
rename to argilla-frontend/plugins/extensions/platform.ts
diff --git a/argilla-frontend/plugins/plugins/vue-draggable.js b/argilla-frontend/plugins/extensions/vue-draggable.ts
similarity index 51%
rename from argilla-frontend/plugins/plugins/vue-draggable.js
rename to argilla-frontend/plugins/extensions/vue-draggable.ts
index 73c4a328d4..d530be9c1e 100644
--- a/argilla-frontend/plugins/plugins/vue-draggable.js
+++ b/argilla-frontend/plugins/extensions/vue-draggable.ts
@@ -1,4 +1,5 @@
 import Vue from "vue";
 import Draggable from "vuedraggable";
 
+// eslint-disable-next-line vue/component-definition-name-casing, vue/multi-word-component-names
 Vue.component("draggable", Draggable);
diff --git a/argilla-frontend/plugins/index.ts b/argilla-frontend/plugins/index.ts
new file mode 100644
index 0000000000..a26e21096c
--- /dev/null
+++ b/argilla-frontend/plugins/index.ts
@@ -0,0 +1,28 @@
+import { Context } from "@nuxt/types";
+import { Inject } from "@nuxt/types/app";
+
+declare const require: {
+  context(
+    directory: string,
+    useSubdirectories: boolean,
+    regExp: RegExp
+  ): {
+    keys(): string[];
+    (id: string);
+  };
+};
+
+export default (context: Context, inject: Inject) => {
+  const importing = require.context("./", true, /^\.\/.*\.(ts|js)$/);
+
+  importing
+    .keys()
+    .filter((key) => key !== "./index.ts")
+    .forEach((key) => {
+      const module = importing(key);
+
+      if (module.default) {
+        module.default(context, inject);
+      }
+    });
+};
diff --git a/argilla-frontend/plugins/language/index.ts b/argilla-frontend/plugins/language/language-detector.ts
similarity index 100%
rename from argilla-frontend/plugins/language/index.ts
rename to argilla-frontend/plugins/language/language-detector.ts
diff --git a/argilla-frontend/plugins/plugins/language.ts b/argilla-frontend/plugins/language/language-direction.ts
similarity index 100%
rename from argilla-frontend/plugins/plugins/language.ts
rename to argilla-frontend/plugins/language/language-direction.ts
diff --git a/argilla-frontend/plugins/logo/index.ts b/argilla-frontend/plugins/logo/logo.ts
similarity index 100%
rename from argilla-frontend/plugins/logo/index.ts
rename to argilla-frontend/plugins/logo/logo.ts