[wip] feat: vue 3 upgrade (VMO-6873)

.storybook/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-typescript"
+    ]
+}

.storybook/custom/actions.js

@@ -0,0 +1,7 @@
+export const actions = {
+    actions: { 
+        argTypesRegex: '^on.*' 
+    }
+}
+
+export default actions

.storybook/custom/controls.js

@@ -0,0 +1,10 @@
+export const controls = {
+    controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/,
+        },
+    }
+}
+
+export default controls

.storybook/custom/icons.js

@@ -0,0 +1,13 @@
+
+import * as freeSolidIcons from '@fortawesome/free-solid-svg-icons'
+import * as freeRegularIcons from '@fortawesome/free-regular-svg-icons'
+// import CustomIcons from '../../resources/js/lib/custom-icons'
+// const prefixExist = item => item.prefix
+
+export const icons = [
+  // ...CustomIcons,
+  ...Object.values(freeSolidIcons),
+  ...Object.values(freeRegularIcons)
+]
+
+export default icons

.storybook/custom/options.js

@@ -0,0 +1,9 @@
+
+export const options = {
+    options: {
+        storySort: (a, b) =>
+            a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+    }
+}
+
+export default options

.storybook/custom/status.js

@@ -0,0 +1,44 @@
+export const statuses = {
+  status: {
+    statuses: {
+      beta: {
+        background: "#38a9f0",
+        color: "#ffffff",
+        description:
+          "This component is in beta and is not ready to be deployed",
+      },
+      experimental: {
+        background: "#ffff00",
+        color: "#2c2f33",
+        description: "Just an experiment",
+      },
+      exampleOnly: {
+        background: "#ff9933",
+        color: "#2c2f33",
+        description: "Just an example should not be used as a component",
+      },
+      readyToBeTested: {
+        background: "#ffff00",
+        color: "#2c2f33",
+        description: "Need Design/QA team review",
+      },
+      stable: {
+        background: "#15c534",
+        color: "#ffffff",
+        description: "This component is stable",
+      },
+      deprecated: {
+        background: "#ff0000",
+        color: "#ffffff",
+        description: "This component is deprecated",
+      },
+      underDevelopment: {
+        background: "#7167ce",
+        color: "#ffffff",
+        description: "This component is under development",
+      },
+    },
+  }
+}
+
+export default statuses

.storybook/custom/viewports.js

@@ -0,0 +1,29 @@
+import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+
+export const customViewports = {
+    kindleFire2: {
+      name: 'Kindle Fire 2',
+      styles: {
+        width: '600px',
+        height: '963px',
+      },
+    },
+    kindleFireHD: {
+      name: 'Kindle Fire HD',
+      styles: {
+        width: '533px',
+        height: '801px',
+      },
+    },
+};
+
+export const viewports = {
+  viewport: {
+    viewports: {
+        ...MINIMAL_VIEWPORTS,
+       ...customViewports,
+    },
+  }
+}
+
+export default viewports

.storybook/main.js

@@ -0,0 +1,27 @@
+const path = require('path')
+
+module.exports = {
+  "stories": ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "framework": "@storybook/vue3",
+  core: {
+    builder: "webpack5",
+    options: {
+      lazyCompilation: true,
+    },
+  },
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+      'scss': path.resolve(__dirname, '../src/scss'),
+      // vue$: 'vue/dist/vue.esm.js'
+    };
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+    return config
+  },
+};

.storybook/preview.js

@@ -0,0 +1,48 @@
+// styles
+import 'bootstrap/dist/js/bootstrap.js'
+import 'bootstrap/dist/css/bootstrap.css'
+import { app } from '@storybook/vue3';
+import registerCustomComponents from '@/common-imports'
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+
+/**
+ * This import modifies the jquery that should already be on the page globally at global.$
+ * e.g. adding $().modal() and other jquery plugins
+ */
+import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
+import 'vue-multiselect/dist/vue-multiselect.css'
+import '@/scss/main.scss'
+
+import {BTabs, BTab} from 'bootstrap-vue-3'
+// Custom parameters
+import viewports from './custom/viewports'
+// import options from './custom/options'
+// import status from './custom/status'
+import controls from './custom/controls'
+import actions from './custom/actions'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
+import Lang from '../src/lib/filters/lang'
+import {createStore} from 'vuex'
+import storeModules from '../src/store'
+const store = createStore({
+  ...storeModules
+})
+
+export const parameters = {
+  // ...components,
+  ...actions,
+  ...controls,
+  ...viewports,
+  // ...options,
+  // ...status,
+};
+
+registerCustomComponents(app)
+
+app.use(FloatingVue)
+app.use(store)
+app.component('BTabs', BTabs)
+app.component('BTab', BTab)
+app.component('FontAwesomeIcon', FontAwesomeIcon)
+app.mixin([Lang]);