refactor: adds auto-import support for the ui-library

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;

components/NavigationMenu.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiIcon } from '@rotki/ui-library';
 const { t } = useI18n();
 </script>
 

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';

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';
 

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';
 

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';

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';

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 }>(), {

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';

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';

components/account/signup/SignupForm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import {
   email,
   helpers,

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';

components/common/ButtonLink.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
-
 defineOptions({
   inheritAttrs: false,
 });

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();

components/footer/FooterIconLinks.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { RuiIcon } from '@rotki/ui-library';
-
 const menus = [
   {
     title: 'Github',

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();

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();

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

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>

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';
 

modules/ui-library/module.ts

@@ -0,0 +1,46 @@
+import {
+  addComponent,
+  addImports,
+  addPlugin,
+  createResolver,
+  defineNuxtModule,
+} from '@nuxt/kit';
+import * as ui from '@rotki/ui-library';
+
+// 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'));
+
+    const imports = Object.keys(ui);
+    const components = imports.filter((i) => i.startsWith('Rui'));
+
+    for (const component of components) {
+      await addComponent({
+        name: component,
+        export: component,
+        filePath: '@rotki/ui-library',
+      });
+    }
+
+    const composables = imports.filter((i) => i.startsWith('use'));
+
+    for (const composable of composables) {
+      addImports({
+        name: composable,
+        as: composable,
+        from: '@rotki/ui-library',
+      });
+    }
+  },
+});

plugins/ui-library.ts → 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) => {

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: {

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.0",
     "@types/braintree-web": "3.75.23",
     "@types/paypal-checkout-components": "4.0.5",
     "@types/qrcode": "1.5.1",