17124 + 16550 - Vue3 upgrade: Upgrade a component + Storybook

.eslintrc.js

@@ -8,9 +8,6 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/base',
-    'plugin:vue/essential',
-    'plugin:vue/recommended',
-    'plugin:vue/strongly-recommended',
     'plugin:vue/vue3-essential',
     'plugin:vue/vue3-recommended',
     'plugin:vue/vue3-strongly-recommended',

.storybook/main.ts

@@ -1,29 +1,28 @@
 const path = require('path')
-import type { StorybookConfig } from '@storybook/vue-vite'
+import type { StorybookConfig } from '@storybook/vue3-vite'
 
 const config: StorybookConfig = {
   framework: {
-    name: '@storybook/vue-vite',
+    name: '@storybook/vue3-vite',
     options: {}
   },
   core: {
-    builder: '@storybook/builder-vite',
     disableTelemetry: true
   },
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        actions: false,
-        backgrounds: true,
-        controls: true,
-        docs: false,
-        viewport: true,
-        toolbars: false
-      }
+  addons: [{
+    name: "@storybook/addon-essentials",
+    options: {
+      actions: false,
+      backgrounds: true,
+      controls: true,
+      docs: false,
+      viewport: true,
+      toolbars: false
     }
-  ]
-}
-
-export default config
+  }],
+  docs: {
+    autodocs: false
+  }
+};
+export default config;

.storybook/preview.ts

@@ -1,32 +1,23 @@
-import 'core-js/stable' // to polyfill ECMAScript features
-import 'regenerator-runtime/runtime' // to use transpiled generator functions
-import '@mdi/font/css/materialdesignicons.min.css' // ensure you are using css-loader
-import Vue from 'vue'
-import Vue2Filters from 'vue2-filters'
-import Vuelidate from 'vuelidate'
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.min.css'
-import { Preview } from '@storybook/vue'
+import  { setup }  from '@storybook/vue3';
+import type { App } from 'vue'
 import '@/assets/styles/base.scss'
 import '@/assets/styles/layout.scss'
 import '@/assets/styles/overrides.scss'
 
-Vue.use(Vue2Filters) // needed by SbcFeeSummary
-Vue.use(Vuelidate) // needed by BaseAddress
-Vue.use(Vuetify)
+import vuetify from '../src/plugins/vuetify'
 
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      vuetify: new Vuetify({ iconfont: 'mdi' }),
-      template: `
-        <v-app class="app-container theme--light">
-          <story />
-        </v-app>
-      `
-      })
-  ]
-}
+setup((app:App) => {
+  app.use(vuetify)
+})
 
-export default preview
+// you can define global your Vuetify decorators
+export const decorators = [
+  (story: any) => ({
+    components: { story },
+    template: `
+      <v-app class="app-container theme--light">
+        <story />
+      </v-app>
+    `
+    })
+]