feat: update to vue3 and storybook 8

kiva · Nov 22, 2024 · 1bb0cd3 · 1bb0cd3
1 parent 9a83333
commit 1bb0cd3
Show file tree

Hide file tree

Showing 6 changed files with 19,842 additions and 66,693 deletions.
diff --git a/@kiva/kv-components/package.json b/@kiva/kv-components/package.json
@@ -13,20 +13,22 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@storybook/addon-a11y": "7.6.20",
-    "@storybook/addon-actions": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-links": "7.6.20",
-    "@storybook/addon-storysource": "7.6.20",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addons": "7.6.20",
-    "@storybook/vue": "7.6.20",
-    "@storybook/vue-webpack5": "7.6.20",
+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-storysource": "^8.0.9",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-viewport": "^8.0.9",
+    "@storybook/builder-webpack5": "^8.0.9",
+    "@storybook/core-common": "^8.1.5",
+    "@storybook/theming": "^8.0.9",
+    "@storybook/vue3": "^8.0.9",
+    "@storybook/vue3-webpack5": "^8.0.9",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.2.1",
-    "@testing-library/vue": "^5.8.1",
-    "@vue/composition-api": "^1.4.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vue/reactivity": "3.2.37",
     "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.6",
@@ -44,18 +46,18 @@
     "postcss-loader": "^7.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "storybook": "7.6.20",
+    "storybook": "^8.0.9",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.3",
     "tsup": "^6.7.0",
-    "vue": "2.6.14",
+    "vue": "^3.2.37",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.2",
     "vue-template-compiler": "2.6.14"
   },
   "scripts": {
-    "storybook": "vue-demi-switch 2 && storybook dev -p 6006 -c vue/.storybook",
-    "build-storybook": "vue-demi-switch 2 && storybook build -c vue/.storybook",
+    "storybook": "storybook dev -p 6006 -c vue/.storybook",
+    "build-storybook": "storybook build -c vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
     "test": "npm run lint",
     "build": "tsup utils/*.js --outDir dist/utils --format cjs,esm --clean && cp -R vue/ dist/components/ && cp -R data/ dist/data/"
@@ -87,12 +89,6 @@
     }
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.6.0 || >=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
   }
 }
diff --git a/@kiva/kv-components/vue/.storybook/main.js b/@kiva/kv-components/vue/.storybook/main.js
@@ -1,6 +1,5 @@
 const path = require('path');
-
-const config = {
+module.exports = {
 	stories: [
 		'../stories/Styleguide.stories.js', // show the base styleguide first
 		'../stories/**/*.stories.mdx',
@@ -72,14 +71,14 @@ const config = {
 	},
 
 	framework: {
-		name: "@storybook/vue-webpack5",
+		name: "@storybook/vue3-webpack5",
 		options: {}
 	},
-
+	core: {
+		builder: "@storybook/builder-webpack5"
+	},
 	docs: {
 		autodocs: true,
 		defaultName: 'Kv Components',
 	}
-}
-
-export default config;
+};
diff --git a/@kiva/kv-components/vue/.storybook/preview.js b/@kiva/kv-components/vue/.storybook/preview.js
@@ -1,17 +1,15 @@
 import './tailwind.css';
+import {
+	setup
+} from '@storybook/vue3';
 import { addons } from '@storybook/preview-api';
 import KvThemeProvider from '../KvThemeProvider.vue';
 import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
-import Vue from 'vue';
-import VueCompositionApi from '@vue/composition-api';
-import VueRouter from 'vue-router';
 
-// Add vue composition api
-Vue.use(VueCompositionApi);
+setup((app) => {
+});
 
-Vue.use(VueRouter);
-
-const parameters = {
+export const parameters = {
 	actions: { argTypesRegex: "^on[A-Z].*" },
 	controls: {
 		matchers: {
@@ -31,7 +29,7 @@ const parameters = {
 const channel = addons.getChannel();
 
 // Wrap all stories with the kv-theme-provider component
-const decorators = [(story) => ({
+export const decorators = [(story) => ({
 	components: { story, KvThemeProvider },
 	template: '<kv-theme-provider :theme="theme"><story /></kv-theme-provider>',
 	data() {
@@ -50,12 +48,4 @@ const decorators = [(story) => ({
 	destroyed() {
 		channel.off('DARK_MODE', this.setTheme);
 	},
-	router: new VueRouter(),
 })];
-
-const preview = {
-	parameters,
-	decorators,
-};
-
-export default preview;
diff --git a/@kiva/kv-components/vue/stories/KvButton.stories.js b/@kiva/kv-components/vue/stories/KvButton.stories.js
@@ -5,30 +5,26 @@ export default {
 	component: KvButton,
 	argTypes: {
 		variant: {
-			control: {
-				type: 'select',
-				options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
-			},
+			control: 'select',
+			options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
 		},
 		state: {
-			control: {
-				type: 'select',
-				options: ['', 'disabled', 'loading'],
-				defaultValue: null,
-			},
+			control: 'select',
+			options: ['', 'disabled', 'loading'],
 		},
 	},
 };
 
 const Template = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 		<kv-button
-			:variant="variant"
-			:state="state"
-			:to="to"
-			:href="href"
+			:variant="args.variant"
+			:state="args.state"
+			:to="args.to"
+			:href="args.href"
 			@click="onClick"
 		>
 			Find a borrower
@@ -41,6 +37,7 @@ const Template = (args, { argTypes }) => ({
 const VariantTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 		<ul>
 			<li
@@ -50,9 +47,9 @@ const VariantTemplate = (args, { argTypes }) => ({
 			>
 				<kv-button
 					:variant="variant"
-					:state="state"
-					:to="to"
-					:href="href"
+					:state="args.state"
+					:to="args.to"
+					:href="args.href"
 				>
 					Find a borrower
 				</kv-button>
@@ -119,6 +116,7 @@ WithHref.args = {
 export const FullWidth = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 	<ul>
 		<li
@@ -129,9 +127,9 @@ export const FullWidth = (args, { argTypes }) => ({
 			<kv-button
 				class="tw-w-full"
 				:variant="variant"
-				:state="state"
-				:to="to"
-				:href="href"
+				:state="args.state"
+				:to="args.to"
+				:href="args.href"
 				@click="onClick"
 			>
 				Find a borrower

diff --git a/@kiva/kv-components/vue/stories/KvClassicLoanCard.stories.js b/@kiva/kv-components/vue/stories/KvClassicLoanCard.stories.js
@@ -6,36 +6,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvClassicLoanCard },
+		setup() { return { args: templateArgs }; },
 		template: `
 			<div style="width: 600px;">
 				<kv-classic-loan-card
-					:loanId="loanId"
-					:loan="loan"
-					:custom-loan-details="customLoanDetails"
-					:use-full-width="useFullWidth"
-					:show-tags="showTags"
-					:category-page-name="categoryPageName"
-					:enable-five-dollars-notes="enableFiveDollarsNotes"
-					:five-dollars-selected="fiveDollarsSelected"
-					:large-card="largeCard"
-					:is-adding="isAdding"
-					:is-visitor="isVisitor"
-					:basket-items="basketItems"
-					:is-bookmarked="isBookmarked"
-					:kv-track-function="kvTrackFunction"
-					:photo-path="photoPath"
-					:show-view-loan="showViewLoan"
-					:custom-callouts="customCallouts"
-					:is-team-pick="isTeamPick"
-					:combined-activities="combinedActivities"
-					:showContributors="showContributors"
-					:enable-huge-amount="enableHugeAmount"
-					:primary-button-text="primaryButtonText"
-					:secondary-button-text="secondaryButtonText"
-					:secondary-button-handler="secondaryButtonHandler"
+				v-bind="args"
 					@show-loan-details="showLoanDetails"
 				/>
 			</div>