Merge branch 'staging'

.eslintignore

@@ -1,6 +1 @@
-build/*.js
-config/*.js
-config/env/*.js
-server/index.template.html
-test/unit/karma.conf.js
 src/lib/**/*.js

.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,10 @@ module.exports = {
 		'import/no-extraneous-dependencies': ['error', {
 			optionalDependencies: ['test/unit/index.js']
 		}],
+		// allow unresolved imports for svg files with a ?url suffix
+		'import/no-unresolved': ['error', { ignore: ['\\.svg\\?url$'] }],
+		// 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 +106,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',
 	}
 };

.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

.nvmrc

@@ -1 +1 @@
-v16.15.0
+lts/iron

.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;

.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({

.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: {