Uplift to the latest Storybook and Vite

.gitignore

@@ -2,4 +2,13 @@
 .DS_Store
 /dist
 /storybook-static
-build-storybook.log
+build-storybook.log
+
+# Yarn 3 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.storybook/main.js

@@ -2,11 +2,19 @@ const path = require('path');
 
 module.exports = {
   "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-dark-mode"],
-  "framework": "@storybook/vue3",
-  "core": {
-    "builder": "@storybook/builder-vite"
+
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-dark-mode",
+    "@storybook/addon-mdx-gfm"
+  ],
+
+  "framework": {
+    name: "@storybook/vue3-vite",
+    options: {}
   },
+
   viteFinal: async (config, { configType }) => {
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -15,5 +23,9 @@ module.exports = {
     };
 
     return config;
+  },
+
+  docs: {
+    autodocs: true
   }
-};
+};

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@astar-network/astar-ui",
   "version": "0.0.104",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/AstarNetwork/astar-ui.git"
@@ -14,38 +15,43 @@
   "typings": "dist/types/index.d.ts",
   "scripts": {
     "clean": "rm -rf node_modules",
-    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types ",
+    "build:types": "rm -rf ./node_modules/@types/react && vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types ",
     "build:lib": "vue-tsc --noEmit && vite build --config ./build/lib.config.ts && npm run build:types",
-    "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=af2bfd147de5 --auto-accept-changes",
     "dev": "vite --config ./build/base.config.ts"
   },
   "dependencies": {
-    "@iconify-prerendered/vue-ic": "^0.21.1672653513",
-    "vue": "^3.2.23"
+    "@iconify-prerendered/vue-ic": "^0.23.1672653513",
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.5.0-alpha.64",
-    "@storybook/addon-essentials": "^6.5.0-alpha.64",
-    "@storybook/addon-links": "^6.5.0-alpha.64",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/builder-vite": "^0.1.29",
-    "@storybook/vue3": "^6.5.15",
-    "@types/node": "^16.11.12",
-    "@vitejs/plugin-vue": "^1.10.2",
-    "babel-loader": "^8.2.4",
-    "chromatic": "^6.5.4",
-    "sass": "^1.49.11",
-    "storybook-dark-mode": "^1.1.0",
-    "typescript": "^4.4.4",
-    "vite": "^2.9.16",
+    "@babel/core": "^7.22.10",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addons": "^7.3.2",
+    "@storybook/vue3": "^7.3.2",
+    "@storybook/vue3-vite": "^7.3.2",
+    "@types/node": "^20.5.4",
+    "@vitejs/plugin-vue": "^4.3.3",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^6.23.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.66.1",
+    "storybook": "^7.3.2",
+    "storybook-dark-mode": "^3.0.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
     "vite-plugin-copy": "^0.1.6",
-    "vite-plugin-dts": "^0.9.6",
-    "vite-plugin-md": "^0.11.4",
-    "vue-loader": "^16.8.3",
-    "vue-router": "^4.0.12",
-    "vue-tsc": "^0.28.10"
-  }
+    "vite-plugin-dts": "^3.5.2",
+    "vite-plugin-md": "^0.21.5",
+    "vue-loader": "^17.2.2",
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.8.8"
+  },
+  "packageManager": "[email protected]"
 }

src/stories/Introduction.stories.mdx

@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Example/Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,7 +113,8 @@ import StackAlt from './assets/stackalt.svg';
   }
 
 
-`}</style>
+  `}
+</style>
 
 # Welcome to Storybook