feat!: migrate to vue 3

BREAKING CHANGE: only supports Vue 3 APIs and only provides Vue 3 components
kiva · May 20, 2024 · ef9cd09 · ef9cd09
1 parent 01b1fdb
commit ef9cd09
Show file tree

Hide file tree

Showing 895 changed files with 71,504 additions and 88,848 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,6 +1 @@
-build/*.js
-config/*.js
-config/env/*.js
-server/index.template.html
-test/unit/karma.conf.js
 src/lib/**/*.js
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -4,11 +4,14 @@ const fs = require('fs');
 
 const isProd = process.env.NODE_ENV === 'production';
 
+// resolve path
+const resolve = dir => path.resolve(__dirname, dir);
+
 let schema;
 
 // Use build/schema.graphql as the schema definition. That file only exists after running node build/fetch-schema.js
 try {
-	schema = fs.readFileSync(path.join(__dirname, 'build/schema.graphql')).toString();
+	schema = fs.readFileSync(resolve('build/schema.graphql')).toString();
 } catch (e) {
 	console.warn(e);
 	schema = 'type Query { hello: String }';
@@ -21,12 +24,15 @@ const graphqlOptions = {
 
 module.exports = {
 	root: true,
+	reportUnusedDisableDirectives: true,
 	parserOptions: {
-		parser: '@babel/eslint-parser',
-		sourceType: 'module'
+		ecmaVersion: 2022,
+		sourceType: 'module',
 	},
 	env: {
+		node: true,
 		browser: true,
+		es2022: true,
 	},
 	extends: ['plugin:vue/strongly-recommended', 'airbnb-base', 'plugin:storybook/recommended'],
 	// required to lint *.vue files
@@ -38,12 +44,15 @@ module.exports = {
 	// check if imports actually resolve
 	settings: {
 		'import/resolver': {
-			webpack: {
-				config: './build/webpack.base.conf.js'
-			},
 			node: {
 				extensions: ['.js', '.mjs']
-			}
+			},
+			alias: {
+				map: [
+					['#src', resolve('src')],
+				],
+				extensions: ['.js', '.mjs', '.vue'],
+			},
 		}
 	},
 	// add your custom rules here
@@ -64,6 +73,8 @@ module.exports = {
 		'import/no-extraneous-dependencies': ['error', {
 			optionalDependencies: ['test/unit/index.js']
 		}],
+		// allow files with only one named export
+		'import/prefer-default-export': 'off',
 		// allow debugger during development
 		'no-debugger': isProd ? 'error' : 'off',
 		// allow console during development
@@ -93,13 +104,17 @@ module.exports = {
 		'graphql/required-fields': ['error', { ...graphqlOptions, requiredFields: ['id', 'key'] }],
 
 		// require component names that match the file name
-		"vue/require-name-property": "error",
-		"vue/match-component-file-name": [
-			"error",
+		'vue/require-name-property': 'error',
+		'vue/match-component-file-name': [
+			'error',
 			{
-				extensions: ["vue"],
+				extensions: ['vue'],
 				shouldMatchCase: true,
 			},
 		],
+
+		// require v-for keys on template root
+		'vue/no-v-for-template-key': 'off',
+		'vue/no-v-for-template-key-on-child': 'error',
 	}
 };
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,8 @@
 .DS_Store
 node_modules/
+
+# Temporary files
 dist/
-npm-debug.log*
 coverage/
 test/e2e/screenshots
 test/e2e/results
@@ -10,6 +11,11 @@ build/schema.graphql
 .nyc_output/
 .lighthouseci/
 lhci/
+vite.config.js.*
+
+# Logs
+npm-debug.log*
+*storybook.log
 
 # Editor directories and files
 .idea

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.15.0
+lts/iron
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,39 +1,18 @@
-const path = require('path');
-
-module.exports = {
-	stories: [
-		'./stories/**/*.stories.@(js|mdx)'
-	],
-	addons: [
-		'@storybook/addon-essentials',
-		'@storybook/addon-links',
-		'@storybook/addon-a11y',
-		'@storybook/addon-postcss',
-		'@storybook/addon-storysource'
-	],
-	webpackFinal: async (config) => {
-		config.module.rules.push({
-		  	test: /\,css&/,
-		  	exclude: [/\.module\.css$/, /@storybook/],
-		  	use: [
-				"style-loader",
-				{
-					loader: "css-loader",
-					options: { importLoaders: 1, sourceMap: false },
-				},
-				{
-				loader: 'postcss-loader',
-					options: {
-						ident: 'postcss',
-						plugins: [
-						require('tailwindcss'),
-						require('autoprefixer')
-						]
-					}
-				}
-		  	],
-		  	include: path.resolve(__dirname, '../'),
-		})
-		return config
-	}
-}
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming/create';
 
 const theme = create({

diff --git a/.storybook/mixins/kv-auth0-story-mixin.js b/.storybook/mixins/kv-auth0-story-mixin.js
@@ -1,4 +1,4 @@
-import { MockKvAuth0 } from '@/util/KvAuth0';
+import { MockKvAuth0 } from '#src/util/KvAuth0';
 
 export default {
 	provide: {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,13 +1,9 @@
-import { addParameters } from '@storybook/vue';
 import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import Vue from 'vue';
-import Meta from 'vue-meta';
+// import Vue from 'vue';
+// import Meta from 'vue-meta'; // vue-meta has been replaced with unhead (@unhead/vue)
 import VueRouter from 'vue-router'
-import KvThemeProvider from '~/@kiva/kv-components/vue/KvThemeProvider';
-import { defaultTheme } from '@kiva/kv-tokens/configs/kivaColors';
-
-//load all the svg icon sprites
-import '@/assets/iconLoader';
+import KvThemeProvider from '@kiva/kv-components/vue/KvThemeProvider.vue';
+import { defaultTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
 
 // same styles that are in App.vue
 import '../src/assets/scss/app.scss';
@@ -20,21 +16,21 @@ import './tailwind.css';
 import './storybookStyles.scss';
 
 // import config file for storybook environment
-import config from '../config/local';
+// import config from '../config/local';
 
 // initialize vue-meta
-Vue.use(Meta);
+// Vue.use(Meta);
 
 // Mock the analytics Vue plugin
-Vue.use({ install: Vue => {
-	Vue.directive('kv-track-event', () => {});
-	Vue.prototype.$kvTrackEvent = () => {};
-}});
+// Vue.use({ install: Vue => {
+// 	Vue.directive('kv-track-event', () => {});
+// 	Vue.prototype.$kvTrackEvent = () => {};
+// }});
 
-Vue.use(VueRouter)
+// Vue.use(VueRouter)
 
 // provide global application config
-Vue.prototype.$appConfig = config.app;
+// Vue.prototype.$appConfig = config.app;
 
 // add custom viewports
 const customViewports = {
@@ -62,10 +58,10 @@ const customViewports = {
 };
 
 
-addParameters({
+export const parameters = {
 	options: {
 		storySort: (a, b) => { // sort the categories alphabetically.
-			return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
+			return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
 		},
 		showRoots: true,
 		enableShortcuts: false,
@@ -96,7 +92,7 @@ addParameters({
 			...customViewports,
     },
   },
-});
+};
 
 // Wrap all stories with the kv-theme-provider component
 export const decorators = [(story) => ({

diff --git a/.storybook/stories/15years.stories.js b/.storybook/stories/15years.stories.js
@@ -1,17 +1,17 @@
 import Vue from 'vue';
 
 // import plugins
-import kivaPlugins from '@/plugins';
+import kivaPlugins from '#src/plugins';
 Vue.use(kivaPlugins);
 
-import AppealBanner15 from '@/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBanner15';
-import FifteenYears from '@/pages/15Years/15Years';
-import FifteenYearsHeader from '@/components/15Years/15YearsHeader';
-import FifteenYearsHowKivaWorks from '@/components/15Years/15YearsHowKivaWorks';
-import FifteenYearsIndividuals from '@/components/15Years/15YearsIndividuals';
-import FifteenYearsPartners from '@/components/15Years/15YearsPartners';
-import FifteenYearsStyles from '@/components/15Years/15YearsStyles';
-import FifteenYearsTimeline from '@/components/15Years/15YearsTimeline';
+import AppealBanner15 from '#src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBanner15';
+import FifteenYears from '#src/pages/15Years/15Years';
+import FifteenYearsHeader from '#src/components/15Years/15YearsHeader';
+import FifteenYearsHowKivaWorks from '#src/components/15Years/15YearsHowKivaWorks';
+import FifteenYearsIndividuals from '#src/components/15Years/15YearsIndividuals';
+import FifteenYearsPartners from '#src/components/15Years/15YearsPartners';
+import FifteenYearsStyles from '#src/components/15Years/15YearsStyles';
+import FifteenYearsTimeline from '#src/components/15Years/15YearsTimeline';
 
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import kvAuth0StoryMixin from '../mixins/kv-auth0-story-mixin';

diff --git a/.storybook/stories/AppealBannerCircular.stories.js b/.storybook/stories/AppealBannerCircular.stories.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import AppealBannerCircular from '@/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue';
+import AppealBannerCircular from '#src/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircular.vue';
 
 // import plugins
-import kivaPlugins from '@/plugins';
+import kivaPlugins from '#src/plugins';
 Vue.use(kivaPlugins)
 
 export default {

diff --git a/.storybook/stories/BorrowerProfile.stories.js b/.storybook/stories/BorrowerProfile.stories.js
@@ -1,11 +1,11 @@
 import Vue from 'vue'
 
 // import plugins
-import kivaPlugins from '@/plugins';
+import kivaPlugins from '#src/plugins';
 Vue.use(kivaPlugins)
 
-import BorrowerProfile from '@/pages/BorrowerProfile/BorrowerProfile'
-import FundedBorrowerProfile from '@/components/BorrowerProfile/FundedBorrowerProfile'
+import BorrowerProfile from '#src/pages/BorrowerProfile/BorrowerProfile'
+import FundedBorrowerProfile from '#src/components/BorrowerProfile/FundedBorrowerProfile'
 
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';

diff --git a/.storybook/stories/ChallengeCallout.stories.js b/.storybook/stories/ChallengeCallout.stories.js
@@ -1,4 +1,4 @@
-import ChallengeCallout from '@/components/Lend/LoanSearch/ChallengeCallout';
+import ChallengeCallout from '#src/components/Lend/LoanSearch/ChallengeCallout';
 import apolloStoryMixin from "../mixins/apollo-story-mixin";
 
 export default {

diff --git a/.storybook/stories/ChallengeHeader.stories.js b/.storybook/stories/ChallengeHeader.stories.js
@@ -1,4 +1,4 @@
-import ChallengeHeader from '@/components/Thanks/ChallengeHeader';
+import ChallengeHeader from '#src/components/Thanks/ChallengeHeader';
 import apolloStoryMixin from "../mixins/apollo-story-mixin";
 
 export default {

diff --git a/.storybook/stories/CheckoutReceipt.stories.js b/.storybook/stories/CheckoutReceipt.stories.js
@@ -1,4 +1,4 @@
-import CheckoutReceipt from '@/components/Checkout/CheckoutReceipt';
+import CheckoutReceipt from '#src/components/Checkout/CheckoutReceipt';
 import mockedReceiptData from '../mock-data/receipt-data-mock';
 
 // https://api-vm.kiva.org/graphqlgraphql?user_id=1003394&app_id=org.kiva.www&query=query%20checkoutReceipt%20%7B%20%0A%09shop%20%7B%0A%09%09receipt(checkoutId%3A%2038663432)%20%7B%0A%09%09%09credits%20%7B%0A%09%09%09%09values%20%7B%0A%09%09%09%09%09creditType%0A%09%09%09%09%09amount%0A%09%09%09%09%7D%0A%09%09%09%7D%0A%09%09%09totals%20%7B%0A%20%20%20%20%20%20%20%20bonusAppliedTotal%0A%09%09%09%09itemTotal%0A%09%09%09%09donationTotal%0A%09%09%09%09kivaCardTotal%0A%09%09%09%09depositTotals%20%7B%0A%09%09%09%09%09depositTotal%0A%09%09%09%09%09kivaCreditAdded%0A%09%09%09%09%09kivaCreditUsed%0A%09%09%09%09%7D%0A%20%20%20%20%20%20%20%20freeTrialAppliedTotal%0A%09%09%09%09kivaCreditAppliedTotal%0A%20%20%20%20%20%20%20%20redemptionCodeAppliedTotal%0A%20%20%20%20%20%20%20%20universalCodeAppliedTotal%0A%09%09%09%7D%0A%09%09%09hasFreeCredits%0A%09%09%09items%20%7B%0A%09%09%09%09totalCount%0A%09%09%09%09values%20%7B%0A%09%09%09%09%09id%0A%09%09%09%09%09price%0A%09%09%09%09%09basketItemType%0A%09%09%09%09%09...%20on%20KivaCard%20%7B%0A%09%09%09%09%09%09individualPrice%0A%09%09%09%09%09%09basketItemType%0A%09%09%09%09%09%09kivaCardObject%20%7B%0A%09%09%09%09%09%09%09deliveryType%0A%09%09%09%09%09%09%09mailingInfo%20%7B%0A%09%09%09%09%09%09%09%09firstName%0A%09%09%09%09%09%09%09%09lastName%0A%09%09%09%09%09%09%09%09address%0A%09%09%09%09%09%09%09%09address2%0A%09%09%09%09%09%09%09%09city%0A%09%09%09%09%09%09%09%09state%0A%09%09%09%09%09%09%09%09zip%0A%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%09recipient%20%7B%0A%09%09%09%09%09%09%09%09name%0A%09%09%09%09%09%09%09%09email%0A%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%7D%0A%09%09%09%09%09%7D%0A%09%09%09%09%09...%20on%20LoanReservation%20%7B%0A%09%09%09%09%09%09loan%20%7B%0A%09%09%09%09%09%09%09name%0A%09%09%09%09%09%09%09id%0A%09%09%09%09%09%09%09image%20%7B%0A%09%09%09%09%09%09%09%09url%0A%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%09use%0A%09%09%09%09%09%09%09geocode%20%7B%0A%09%09%09%09%09%09%09%09city%0A%09%09%09%09%09%09%09%09country%20%7B%0A%09%09%09%09%09%09%09%09%09name%0A%09%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%09%7D%0A%09%09%09%09%09%09%7D%0A%09%09%09%09%09%7D%0A%09%09%09%09%7D%0A%09%09%09%7D%0A%09%09%7D%0A%09%7D%0A%09my%20%7B%0A%09%09userAccount%20%7B%0A%09%09%09firstName%0A%09%09%09lastName%0A%09%09%09email%0A%09%09%7D%0A%09%7D%0A%7D%0A&operationName=checkoutReceipt

diff --git a/.storybook/stories/CorporateCampaign.stories.js b/.storybook/stories/CorporateCampaign.stories.js
@@ -1,13 +1,13 @@
 import Vue from 'vue';
 
 // import plugins
-import kivaPlugins from '@/plugins';
+import kivaPlugins from '#src/plugins';
 Vue.use(kivaPlugins);
 
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
-import CorporateCampaignLanding from '@/pages/LandingPages/CorporateCampaign/CCLandingPage';
-import CampaignHero from '@/components/CorporateCampaign/CampaignHero';
-import CampaignStatus from '@/components/CorporateCampaign/CampaignStatus';
+import CorporateCampaignLanding from '#src/pages/LandingPages/CorporateCampaign/CCLandingPage';
+import CampaignHero from '#src/components/CorporateCampaign/CampaignHero';
+import CampaignStatus from '#src/components/CorporateCampaign/CampaignStatus';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
 
 export default {

diff --git a/.storybook/stories/DepositIncentiveBanner.stories.js b/.storybook/stories/DepositIncentiveBanner.stories.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
-import DepositIncentiveBanner from '@/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue';
+import DepositIncentiveBanner from '#src/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
 
 // import plugins
-import kivaPlugins from '@/plugins';
+import kivaPlugins from '#src/plugins';
 Vue.use(kivaPlugins);
 
 export default {

diff --git a/.storybook/stories/DepositIncentiveUpsell.stories.js b/.storybook/stories/DepositIncentiveUpsell.stories.js
@@ -1,4 +1,4 @@
-import DepositIncentiveUpsell from '@/components/Checkout/DepositIncentiveUpsell.vue';
+import DepositIncentiveUpsell from '#src/components/Checkout/DepositIncentiveUpsell.vue';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 import { mockLoansArray } from '../utils';
 

diff --git a/.storybook/stories/DonationBanner.stories.js b/.storybook/stories/DonationBanner.stories.js
@@ -1,8 +1,8 @@
 import Vue from "vue";
-import DonationBanner from "@/components/WwwFrame/PromotionalBanner/Banners/Donation/DonationBanner.vue";
+import DonationBanner from "#src/components/WwwFrame/PromotionalBanner/Banners/Donation/DonationBanner.vue";
 
 // import plugins
-import kivaPlugins from "@/plugins";
+import kivaPlugins from "#src/plugins";
 Vue.use(kivaPlugins);
 
 export default {

diff --git a/.storybook/stories/DonationNudgeLightbox.stories.js b/.storybook/stories/DonationNudgeLightbox.stories.js
@@ -1,4 +1,4 @@
-import DonationNudgeLightbox from '@/components/Checkout/DonationNudge/DonationNudgeLightbox.vue';
+import DonationNudgeLightbox from '#src/components/Checkout/DonationNudge/DonationNudgeLightbox.vue';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 

diff --git a/.storybook/stories/DynamicHeroClassic.stories.js b/.storybook/stories/DynamicHeroClassic.stories.js
@@ -1,4 +1,4 @@
-import DynamicHeroClassic from '@/components/Contentful/DynamicHeroClassic';
+import DynamicHeroClassic from '#src/components/Contentful/DynamicHeroClassic';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';
 
 export default {

diff --git a/.storybook/stories/EcoChallengeLightbox.stories.js b/.storybook/stories/EcoChallengeLightbox.stories.js
@@ -1,4 +1,4 @@
-import EcoChallengeLightbox from '@/components/Lightboxes/EcoChallengeLightbox.vue';
+import EcoChallengeLightbox from '#src/components/Lightboxes/EcoChallengeLightbox.vue';
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
 import apolloStoryMixin from '../mixins/apollo-story-mixin';