SELF-141: Upgrade Storybook

.storybook/main.js

@@ -1,24 +1,22 @@
-const path = require('path');
-
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-docs',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-postcss'
   ],
+
   staticDirs: ['../src/assets/images'],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['vue-style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
-      include: path.resolve(__dirname, '../')
-    });
 
-    config.resolve.alias['@'] = path.resolve(__dirname, '../src');
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
 
-    return config;
+  docs: {
+    autodocs: true
   }
 };

.storybook/preview.js

@@ -1,14 +1,16 @@
-import { app } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 import * as mixins from '@/mixins';
 import * as configs from '@/config';
 
 import '@/assets/styles/main.scss';
 
-app.use(configs.constants);
-for (const mixinName in mixins) {
-  const mixin = mixins[mixinName];
-  app.mixin(mixin);
-}
+setup((app) => {
+  app.use(configs.constants);
+  for (const mixinName in mixins) {
+    const mixin = mixins[mixinName];
+    app.mixin(mixin);
+  }
+});
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

.storybook/routeDecorator.js

@@ -1,7 +1,6 @@
 import { createMemoryHistory, createRouter } from 'vue-router';
-import { app } from '@storybook/vue3';
+import { getCurrentInstance } from 'vue';
 
-let routerInstalled = false;
 let router;
 
 export const routeTemplate = (name) => `<div>${name}</div>`;
@@ -13,13 +12,17 @@ export default (path = '/', routes = []) => {
     ...routes
   ];
   return (storyFn) => {
-    if (!routerInstalled) {
+    // It is not recommended to utilize getCurrentInstance in production code, we should find a way to stop doing this.
+    const isVueRouterInstalled = Boolean(
+      getCurrentInstance().appContext.config.globalProperties.$router
+    );
+    if (!isVueRouterInstalled) {
+      const app = getCurrentInstance().appContext.app;
       router = createRouter({
         history: createMemoryHistory(),
         routes
       });
       app.use(router);
-      routerInstalled = true;
     } else {
       routes.forEach((r) => router.addRoute(r));
     }

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.5
+
+- Upgrade Storybook
+
 ## v2.0.4
 
 - Fix text color for `Link` `upgrade-button` variant.