🔥 Improve plugins loaders (#5697)

- [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

@@ -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: [

argilla-frontend/plugins/di/index.ts → 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);
 };

argilla-frontend/plugins/directives/badge.directive.js → argilla-frontend/plugins/directives/badge.directive.ts

@@ -1,15 +1,26 @@
-// 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'
 //    => horizontalPosition (String) horizontal position : 'right' or 'left'
 //    => 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 {

argilla-frontend/plugins/directives/circle.directive.js → argilla-frontend/plugins/directives/circle.directive.ts

@@ -1,4 +1,5 @@
 import Vue from "vue";
+
 Vue.directive("circle", {
   bind: (element, binding) => {
     let circleDiameter = "0px";

argilla-frontend/plugins/directives/required-field.directive.js → 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;

argilla-frontend/plugins/directives/tooltip.directive.js → 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;
 };

argilla-frontend/plugins/plugins/copy-to-clipboard.js → 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);
   };
 

argilla-frontend/plugins/plugins/filters.js → 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);

argilla-frontend/plugins/plugins/vue-draggable.js → 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);

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);
+      }
+    });
+};