From a487a6d2072748f615b0e023268c01b0adebcf5c Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Thu, 27 Jul 2023 13:30:20 +0200
Subject: [PATCH] refactor: adds auto-import support for the ui-library

---
 assets/css/tailwind.css                       |  2 +-
 components/NavigationMenu.vue                 |  1 -
 .../account/home/AccountInformation.vue       |  1 -
 components/account/home/ApiKeys.vue           |  1 -
 .../account/home/CancelSubscription.vue       |  1 -
 components/account/home/ChangePassword.vue    |  1 -
 components/account/home/DangerZone.vue        |  1 -
 components/account/login/LoginForm.vue        |  1 -
 components/account/password/PasswordForm.vue  |  1 -
 components/account/password/PasswordReset.vue |  1 -
 components/account/signup/SignupForm.vue      |  1 -
 components/checkout/plan/ChangePlanDialog.vue |  1 -
 components/common/ButtonLink.vue              |  2 -
 components/download/DownloadButton.vue        |  1 -
 components/footer/FooterIconLinks.vue         |  2 -
 components/footer/PageFooter.vue              |  2 -
 components/header/PageHeader.vue              |  1 -
 components/plans/blocks/PlanBox.vue           |  1 -
 components/plans/details/CustomPlan.vue       |  2 -
 error.vue                                     |  1 -
 modules/ui-library/module.ts                  | 42 +++++++++++++++++++
 .../ui-library/runtime/plugin.ts              |  1 +
 nuxt.config.ts                                |  1 +
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 17 ++++----
 25 files changed, 54 insertions(+), 34 deletions(-)
 create mode 100644 modules/ui-library/module.ts
 rename plugins/ui-library.ts => modules/ui-library/runtime/plugin.ts (91%)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index a90a793f..1d9d6494 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,4 +1,4 @@
-@import '@rotki/ui-library/dist/style.css';
+@import '@rotki/ui-library/style.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/components/NavigationMenu.vue b/components/NavigationMenu.vue
index 5b20b46e..44493269 100644
--- a/components/NavigationMenu.vue
+++ b/components/NavigationMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiIcon } from '@rotki/ui-library';
 const { t } = useI18n();
 </script>
 
diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index df0ffc24..ee4e1584 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { get, set } from '@vueuse/core';
diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
index 55497de7..a816fcf3 100644
--- a/components/account/home/ApiKeys.vue
+++ b/components/account/home/ApiKeys.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 
diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue
index 6599c3b9..cf4c42f6 100644
--- a/components/account/home/CancelSubscription.vue
+++ b/components/account/home/CancelSubscription.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { type Subscription } from '~/types';
 import { useMainStore } from '~/store';
 
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
index 3e625974..c15b8572 100644
--- a/components/account/home/ChangePassword.vue
+++ b/components/account/home/ChangePassword.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { minLength, required, sameAs } from '@vuelidate/validators';
 import { storeToRefs } from 'pinia';
diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
index 87b85838..9b924826 100644
--- a/components/account/home/DangerZone.vue
+++ b/components/account/home/DangerZone.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 import { type ActionResult } from '~/types/common';
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index 5056da60..b68d59d6 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useMainStore } from '~/store';
 
 const props = withDefaults(defineProps<{ modal?: boolean }>(), {
diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
index ec17cbdd..4ab8959a 100644
--- a/components/account/password/PasswordForm.vue
+++ b/components/account/password/PasswordForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { email, required } from '@vuelidate/validators';
 import { FetchError } from 'ofetch';
diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue
index 371035eb..6a05ca2e 100644
--- a/components/account/password/PasswordReset.vue
+++ b/components/account/password/PasswordReset.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { minLength, required, sameAs } from '@vuelidate/validators';
 import { set } from '@vueuse/core';
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index d5b924c4..bf63ea8c 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import {
   email,
   helpers,
diff --git a/components/checkout/plan/ChangePlanDialog.vue b/components/checkout/plan/ChangePlanDialog.vue
index fad6f454..26aab574 100644
--- a/components/checkout/plan/ChangePlanDialog.vue
+++ b/components/checkout/plan/ChangePlanDialog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { get, set, toRefs } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { type ComputedRef } from 'vue';
diff --git a/components/common/ButtonLink.vue b/components/common/ButtonLink.vue
index dabad8bd..ff2096d1 100644
--- a/components/common/ButtonLink.vue
+++ b/components/common/ButtonLink.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
-
 defineOptions({
   inheritAttrs: false,
 });
diff --git a/components/download/DownloadButton.vue b/components/download/DownloadButton.vue
index ff22fad3..a3d3c5cf 100644
--- a/components/download/DownloadButton.vue
+++ b/components/download/DownloadButton.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 const emit = defineEmits<{ (e: 'click'): void }>();
 
 const { t } = useI18n();
diff --git a/components/footer/FooterIconLinks.vue b/components/footer/FooterIconLinks.vue
index 961d328c..cdf9560f 100644
--- a/components/footer/FooterIconLinks.vue
+++ b/components/footer/FooterIconLinks.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiIcon } from '@rotki/ui-library';
-
 const menus = [
   {
     title: 'Github',
diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
index 1947883d..e10ee6b1 100644
--- a/components/footer/PageFooter.vue
+++ b/components/footer/PageFooter.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiButton, RuiLogo } from '@rotki/ui-library';
-
 const { t } = useI18n();
 
 const year = new Date().getFullYear().toString();
diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
index 5baa8300..24f13859 100644
--- a/components/header/PageHeader.vue
+++ b/components/header/PageHeader.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton, RuiIcon, RuiLogo } from '@rotki/ui-library';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 const { t } = useI18n();
diff --git a/components/plans/blocks/PlanBox.vue b/components/plans/blocks/PlanBox.vue
index 7feb3148..4e10fa17 100644
--- a/components/plans/blocks/PlanBox.vue
+++ b/components/plans/blocks/PlanBox.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { get } from '@vueuse/core';
 
 const props = defineProps<{
diff --git a/components/plans/details/CustomPlan.vue b/components/plans/details/CustomPlan.vue
index c0d3f761..7f80cb08 100644
--- a/components/plans/details/CustomPlan.vue
+++ b/components/plans/details/CustomPlan.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
-
 const { t } = useI18n();
 const css = useCssModule();
 </script>
diff --git a/error.vue b/error.vue
index 6a5164e5..0a6a889a 100644
--- a/error.vue
+++ b/error.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { RuiButton } from '@rotki/ui-library';
 import { get } from '@vueuse/core';
 import { commonAttrs, noIndex } from '~/utils/metadata';
 
diff --git a/modules/ui-library/module.ts b/modules/ui-library/module.ts
new file mode 100644
index 00000000..943fedac
--- /dev/null
+++ b/modules/ui-library/module.ts
@@ -0,0 +1,42 @@
+import {
+  addComponent,
+  addImports,
+  addPlugin,
+  createResolver,
+  defineNuxtModule,
+} from '@nuxt/kit';
+import * as components from '@rotki/ui-library/components';
+import * as composables from '@rotki/ui-library/composables';
+
+// Module options TypeScript interface definition
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@rotki/ui-library',
+    configKey: '@rotki/ui-library',
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  async setup() {
+    const resolver = createResolver(import.meta.url);
+
+    addPlugin(resolver.resolve('./runtime/plugin'));
+
+    for (const component in components) {
+      await addComponent({
+        name: component,
+        export: component,
+        filePath: '@rotki/ui-library/components',
+      });
+    }
+
+    for (const composable in composables) {
+      addImports({
+        name: composable,
+        as: composable,
+        from: '@rotki/ui-library/composables',
+      });
+    }
+  },
+});
diff --git a/plugins/ui-library.ts b/modules/ui-library/runtime/plugin.ts
similarity index 91%
rename from plugins/ui-library.ts
rename to modules/ui-library/runtime/plugin.ts
index d024f22b..9f7a8aa3 100644
--- a/plugins/ui-library.ts
+++ b/modules/ui-library/runtime/plugin.ts
@@ -7,6 +7,7 @@ import {
   RiTwitterLine,
   RuiPlugin,
 } from '@rotki/ui-library';
+import { defineNuxtPlugin } from '#app';
 import '@fontsource/roboto/latin.css';
 
 export default defineNuxtPlugin((nuxtApp) => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4595c0ed..24b7a26a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -95,6 +95,7 @@ export default defineNuxtConfig({
     ['@pinia/nuxt', { disableVuex: true }],
     'nuxt-simple-sitemap',
     'nuxt-vitest',
+    './modules/ui-library/module.ts',
   ],
 
   i18n: {
diff --git a/package.json b/package.json
index 8aae30bb..6b4a7e8e 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@nuxt/devtools": "0.6.7",
     "@nuxtjs/i18n": "8.0.0-beta.12",
     "@rotki/eslint-config": "1.1.0",
-    "@rotki/ui-library": "0.1.2",
+    "@rotki/ui-library": "0.2.2",
     "@types/braintree-web": "3.75.23",
     "@types/paypal-checkout-components": "4.0.5",
     "@types/qrcode": "1.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c19415df..d11edc50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,8 +83,8 @@ devDependencies:
     specifier: 1.1.0
     version: 1.1.0(eslint@8.45.0)(vue@3.3.4)
   '@rotki/ui-library':
-    specifier: 0.1.2
-    version: 0.1.2(vue@3.3.4)
+    specifier: 0.2.2
+    version: 0.2.2(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4)
   '@types/braintree-web':
     specifier: 3.75.23
     version: 3.75.23
@@ -2234,12 +2234,16 @@ packages:
       - vue
     dev: true
 
-  /@rotki/ui-library@0.1.2(vue@3.3.4):
-    resolution: {integrity: sha512-2gzD/kjuw13Pxpsjcf/8BzQkN36Yhg1FltrkVJNFABcpimkGkZZLgyIeDWw4V6BnLkQUCRhAYUfj1Jb6Sxjviw==}
+  /@rotki/ui-library@0.2.2(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4):
+    resolution: {integrity: sha512-LgOMSSYzhVQso8SM2DoPNiqXCosA82zvWtGYDGAjISOPQDdgQMjUGAMP7hBSkyxgpf9NDbeDWx7nMmz4u9fx2A==}
     engines: {pnpm: '>=8 <9'}
     peerDependencies:
+      '@vueuse/core': '>10.0.0'
+      '@vueuse/shared': '>10.0.0'
       vue: '>=3.3.4'
     dependencies:
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
       vue: 3.3.4
     dev: true
 
@@ -2454,7 +2458,6 @@ packages:
 
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
-    dev: false
 
   /@types/yauzl@2.10.0:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
@@ -2978,11 +2981,9 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /@vueuse/metadata@10.2.1:
     resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
-    dev: false
 
   /@vueuse/nuxt@10.2.1(nuxt@3.6.3)(vue@3.3.4):
     resolution: {integrity: sha512-01iDXnjZFDaGZnEL0nvlmSTNV0EG6WY+VSFyWnBji9lbxdQwOn4DHvLou3ePe8ipaoQVtY58WcL0OHIFa4+fBA==}
@@ -3009,7 +3010,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
 
   /@webassemblyjs/ast@1.11.6:
     resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
@@ -12339,7 +12339,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: false
 
   /vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}