Merge pull request #551 from soramitsu/feature/WDS-129-update-vue

WDS-129 update vue

.changeset/itchy-kiwis-tell.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**: update vue and storybook

.eslintrc.js

@@ -49,6 +49,13 @@ module.exports = {
         'vue/one-component-per-file': 'off',
       },
     },
+    // TODO: delete when `as` to `satisfies` replaced
+    {
+      files: ['**/packages/ui/stories/**/*.stories.ts'],
+      rules: {
+        '@typescript-eslint/consistent-type-assertions': 'off',
+      },
+    },
     {
       files: ['**/*.spec.ts', '**/*.spec.cy.ts'],
       rules: {

packages/ui/.storybook/main.js

@@ -1,28 +1,34 @@
-const path = require('path')
-const { loadConfigFromFile, mergeConfig } = require('vite')
-
+const path = require('path');
+const {
+  loadConfigFromFile,
+  mergeConfig
+} = require('vite');
 function resolve(...paths) {
-  return path.resolve(__dirname, '..', ...paths)
+  return path.resolve(__dirname, '..', ...paths);
 }
-
 module.exports = {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  core: {
-    builder: 'storybook-builder-vite',
-  },
   /**
    * @param {import('vite').UserConfig} config
    */
   async viteFinal(config) {
-    const { config: mainConfig } = await loadConfigFromFile(
-      { mode: 'development', command: 'serve' },
-      resolve('vite.config.ts'),
-    )
+    const {
+      config: mainConfig
+    } = await loadConfigFromFile({
+      mode: 'development',
+      command: 'serve'
+    }, resolve('vite.config.ts'));
 
     // vue plugin is already presented in storybook's config, so we need to deduplicate it
-    mainConfig.plugins = mainConfig.plugins.filter((x) => !/vite:vue/.test(x.name))
-
-    return mergeConfig(config, mainConfig)
+    mainConfig.plugins = mainConfig.plugins.filter(x => !/vite:vue/.test(x.name));
+    return mergeConfig(config, mainConfig);
   },
-}
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

packages/ui/cypress.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'cypress'
+import viteConfig from './vite.config'
+import { mergeConfig } from 'vite'
 import fs from 'fs'
 
 function useAxeCoreReader(on: Cypress.PluginEvents) {
@@ -29,7 +31,7 @@ export default defineConfig({
       bundler: 'vite',
 
       // additional opts to the main `vite.config.ts`
-      viteConfig: {
+      viteConfig: mergeConfig(viteConfig, {
         resolve: {
           alias: {
             vue: 'vue/dist/vue.esm-bundler.js',
@@ -39,7 +41,7 @@ export default defineConfig({
           include: ['cypress-plugin-tab'],
           exclude: ['platform'],
         },
-      },
+      }),
     },
   },
 })