chore: update dependencies

rotki · Aug 14, 2024 · 3e59aaa · 3e59aaa
1 parent 19824eb
commit 3e59aaa
Show file tree

Hide file tree

Showing 19 changed files with 2,888 additions and 2,419 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 A Vue2 backport of the [component library](https://github.com/rotki/ui-library) and design system for rotki
 
+> With the complete migration of rotki to vue3 this library will be eventually be deprecated after v1.35.0 of rotki.
+
 ## Getting started
 
 ### Installing the library
@@ -27,10 +29,9 @@ import '@fontsource/roboto/latin.css';
 To use the library you must install the library plugin:
 
 ```typescript
-import { createRui } from "@rotki/ui-library-compat";
+import { createRui } from '@rotki/ui-library-compat';
 
-...
-const RuiPlugin = createRui(options)
+const RuiPlugin = createRui(options);
 Vue.use(RuiPlugin);
 ```
 
@@ -76,14 +77,14 @@ You need to specify which icons you want to enable, when installing the RuiPlugi
 
 ```typescript
 import { Ri4kFill, Ri4kLine, RuiPlugin, createRui } from '@rotki/ui-library-compat';
-a
-const RuiPlugin = createRui({
+
+const RuiPluginInstance = createRui({
   theme: {
-    icons: [Ri4kFill, Ri4kLine]
-  }
-})
+    icons: [Ri4kFill, Ri4kLine],
+  },
+});
 
-Vue.use(RuiPlugin);
+Vue.use(RuiPluginInstance);
 ```
 
 ```vue
@@ -107,9 +108,9 @@ You can extend @rotki/ui-library-compat tailwind theme configuration by adding t
 // tailwind.config.js
 
 module.exports = {
-    // ... your tailwind configs,
-    plugins: [require('@rotki/ui-library-compat/theme')]
-}
+  // ... your tailwind configs,
+  plugins: [require('@rotki/ui-library-compat/theme')],
+};
 ```
 
 ## Development

diff --git a/eslint.config.js b/eslint.config.js
@@ -36,4 +36,9 @@ export default rotki({
       },
     ],
   },
+}, {
+  files: ['**/*.ts'],
+  rules: {
+    'storybook/no-uninstalled-addons': 'off', // until storybook eslint official supports eslint 9
+  },
 });
diff --git a/example/cypress/support/e2e.ts b/example/cypress/support/e2e.ts
@@ -20,6 +20,7 @@ Cypress.on('uncaught:exception', (e) => {
   if (
     /ResizeObserver loop completed/.test(e.message)
     || /ResizeObserver loop limit exceeded/.test(e.message)
-  )
+  ) {
     return false;
+  }
 });
diff --git a/example/cypress/e2e/tsconfig.json → example/cypress/tsconfig.json b/example/cypress/e2e/tsconfig.json → example/cypress/tsconfig.json
@@ -6,5 +6,5 @@
     "types": ["cypress"],
     "isolatedModules": false
   },
-  "include": ["./**/*", "../support/**/*"]
+  "include": ["./e2e/**/*", "./support/**/*"]
 }
diff --git a/example/package.json b/example/package.json
@@ -14,22 +14,22 @@
   },
   "dependencies": {
     "@rotki/ui-library-compat": "workspace:*",
-    "pinia": "2.1.7",
-    "tailwindcss": "3.4.3",
+    "pinia": "2.2.1",
+    "tailwindcss": "3.4.10",
     "vue": "2.7.16",
     "vue-router": "3.6.5"
   },
   "devDependencies": {
     "@tsconfig/node20": "20.1.4",
-    "@types/node": "20.12.12",
+    "@types/node": "20.14.15",
     "@vitejs/plugin-vue2": "2.3.1",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.19",
-    "cypress": "13.10.0",
-    "postcss": "8.4.38",
-    "start-server-and-test": "2.0.3",
-    "typescript": "5.4.5",
-    "vite": "5.2.11",
-    "vue-tsc": "2.0.19"
+    "autoprefixer": "10.4.20",
+    "cypress": "13.13.3",
+    "postcss": "8.4.41",
+    "start-server-and-test": "2.0.5",
+    "typescript": "5.5.4",
+    "vite": "5.4.0",
+    "vue-tsc": "2.0.29"
   }
 }
diff --git a/example/src/router/index.ts b/example/src/router/index.ts
@@ -40,132 +40,132 @@ const router = new VueRouter({
     {
       path: '/icons',
       name: 'icons',
-      component: () => import('@/views/IconView.vue'),
+      component: async () => import('@/views/IconView.vue'),
     },
     {
       path: '/checkboxes',
       name: 'checkboxes',
-      component: () => import('@/views/CheckboxView.vue'),
+      component: async () => import('@/views/CheckboxView.vue'),
     },
     {
       path: '/switches',
       name: 'switches',
-      component: () => import('@/views/SwitchView.vue'),
+      component: async () => import('@/views/SwitchView.vue'),
     },
     {
       path: '/radios',
       name: 'radios',
-      component: () => import('@/views/RadioView.vue'),
+      component: async () => import('@/views/RadioView.vue'),
     },
     {
       path: '/text-fields',
       name: 'text-fields',
-      component: () => import('@/views/TextFieldView.vue'),
+      component: async () => import('@/views/TextFieldView.vue'),
     },
     {
       path: '/text-areas',
       name: 'text-areas',
-      component: () => import('@/views/TextAreaView.vue'),
+      component: async () => import('@/views/TextAreaView.vue'),
     },
     {
       path: '/sliders',
       name: 'sliders',
-      component: () => import('@/views/SliderView.vue'),
+      component: async () => import('@/views/SliderView.vue'),
     },
     {
       path: '/steppers',
       name: 'steppers',
-      component: () => import('@/views/StepperView.vue'),
+      component: async () => import('@/views/StepperView.vue'),
     },
     {
       path: '/progress',
       name: 'progress',
-      component: () => import('@/views/ProgressView.vue'),
+      component: async () => import('@/views/ProgressView.vue'),
     },
     {
       path: '/loaders',
       name: 'loaders',
-      component: () => import('@/views/LoaderView.vue'),
+      component: async () => import('@/views/LoaderView.vue'),
     },
     {
       path: '/chips',
       name: 'chips',
-      component: () => import('@/views/ChipView.vue'),
+      component: async () => import('@/views/ChipView.vue'),
     },
     {
       path: '/alerts',
       name: 'alerts',
-      component: () => import('@/views/AlertView.vue'),
+      component: async () => import('@/views/AlertView.vue'),
     },
     {
       path: '/tooltips',
       name: 'tooltips',
-      component: () => import('@/views/TooltipView.vue'),
+      component: async () => import('@/views/TooltipView.vue'),
     },
     {
       path: '/menus',
       name: 'menus',
-      component: () => import('@/views/MenuView.vue'),
+      component: async () => import('@/views/MenuView.vue'),
     },
     {
       path: '/data-tables',
       name: 'data-tables',
-      component: () => import('@/views/DataTableView.vue'),
+      component: async () => import('@/views/DataTableView.vue'),
     },
     {
       path: '/cards',
       name: 'cards',
-      component: () => import('@/views/CardView.vue'),
+      component: async () => import('@/views/CardView.vue'),
     },
     {
       path: '/tabs',
       name: 'tabs',
-      component: () => import('@/views/TabView.vue'),
+      component: async () => import('@/views/TabView.vue'),
     },
     {
       path: '/badges',
       name: 'badges',
-      component: () => import('@/views/BadgeView.vue'),
+      component: async () => import('@/views/BadgeView.vue'),
     },
     {
       path: '/accordions',
       name: 'accordions',
-      component: () => import('@/views/AccordionView.vue'),
+      component: async () => import('@/views/AccordionView.vue'),
     },
     {
       path: '/dialogs',
       name: 'dialogs',
-      component: () => import('@/views/DialogView.vue'),
+      component: async () => import('@/views/DialogView.vue'),
     },
     {
       path: '/bottom-sheets',
       name: 'bottom-sheets',
-      component: () => import('@/views/BottomSheetView.vue'),
+      component: async () => import('@/views/BottomSheetView.vue'),
     },
     {
       path: '/color-pickers',
       name: 'color-pickers',
-      component: () => import('@/views/ColorPickerView.vue'),
+      component: async () => import('@/views/ColorPickerView.vue'),
     },
     {
       path: '/auto-completes',
       name: 'auto-completes',
-      component: () => import('@/views/AutoCompleteView.vue'),
+      component: async () => import('@/views/AutoCompleteView.vue'),
     },
     {
       path: '/navigation-drawers',
       name: 'navigation-drawers',
-      component: () => import('@/views/NavigationDrawerView.vue'),
+      component: async () => import('@/views/NavigationDrawerView.vue'),
     },
     {
       path: '/notification',
       name: 'notification',
-      component: () => import('@/views/NotificationView.vue'),
+      component: async () => import('@/views/NotificationView.vue'),
     },
     {
       path: '/breakpoint',
       name: 'breakpoint',
-      component: () => import('@/views/BreakpointView.vue'),
+      component: async () => import('@/views/BreakpointView.vue'),
     },
   ],
 });

diff --git a/example/src/views/CardView.vue b/example/src/views/CardView.vue
@@ -21,7 +21,7 @@ const sections = ref<
       actions?: (ButtonProps & { text: string; clicks: number })[];
     })[];
   }[]
-      >([
+>([
         {
           title: 'Outline cards: default',
           cards: [

diff --git a/example/src/views/LoaderView.vue b/example/src/views/LoaderView.vue
@@ -6,42 +6,42 @@ import {
 import { ref } from 'vue';
 
 const loaders = ref<
-(SkeletonLoaderProps & {
-  class?: string;
-})[]
-  >([
-    {},
-    {
-      type: 'paragraph',
-    },
-    {
-      type: 'heading',
-    },
-    {
-      type: 'article',
-    },
-    {
-      type: 'button',
-    },
-    {
-      type: 'icon',
-    },
-    {
-      type: 'avatar',
-    },
-    {
-      type: 'thumbnail',
-    },
-    {
-      type: 'custom',
-      class: 'w-20 h-20',
-    },
-    {
-      type: 'custom',
-      class: 'w-20 h-20',
-      rounded: 'full',
-    },
-  ]);
+  (SkeletonLoaderProps & {
+    class?: string;
+  })[]
+>([
+      {},
+      {
+        type: 'paragraph',
+      },
+      {
+        type: 'heading',
+      },
+      {
+        type: 'article',
+      },
+      {
+        type: 'button',
+      },
+      {
+        type: 'icon',
+      },
+      {
+        type: 'avatar',
+      },
+      {
+        type: 'thumbnail',
+      },
+      {
+        type: 'custom',
+        class: 'w-20 h-20',
+      },
+      {
+        type: 'custom',
+        class: 'w-20 h-20',
+        rounded: 'full',
+      },
+    ]);
 </script>
 
 <template>