Various small codebase clean-ups (directus#20977)

Author: paescuj

.eslintignore

@@ -1,7 +1,6 @@
 dist/
 /packages/extensions-sdk/templates/
 /api/extensions/
-!/app/.storybook/
 !/docs/.vitepress/
 !/docs/.typedocs/
 /docs/.vitepress/cache/

.eslintrc.js

@@ -124,5 +124,12 @@ module.exports = {
 				...vueRules,
 			},
 		},
+		// Test files
+		{
+			files: ['*.test.ts'],
+			rules: {
+				'vue/one-component-per-file': 'off',
+			},
+		},
 	],
 };

.gitignore

@@ -6,12 +6,11 @@ node_modules/
 
 # Builds / Caches
 dist/
-storybook-static/
 coverage/
+.histoire/
 *.tsbuildinfo
 **/.vitepress/cache/
 **/.vitepress/.temp/
-.thumbsmith/
 .eslintcache
 
 # Dotenv configs

.prettierignore

@@ -1,12 +1,12 @@
 dist/
 coverage/
 pnpm-lock.yaml
+.histoire/
 **/.vitepress/cache/
 /.changeset/pre.json
 /.changeset/*.md
 /app/src/lang/translations/*.yaml
 !/app/src/lang/translations/en-US.yaml
 /docs/packages/
-storybook-static/
 /api/uploads/
 /api/extensions/

api/globalSetup.js api/src/__setup__/global.js

@@ -1,4 +1,4 @@
 {
 	"extends": "./tsconfig.json",
-	"exclude": ["**/*.test.ts"]
+	"exclude": ["**/*.test.ts", "src/__utils__", "src/__setup__"]
 }

api/tsconfig.prod.json

@@ -2,6 +2,6 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
 	test: {
-		globalSetup: ['./globalSetup.js'],
+		globalSetup: ['./src/__setup__/global.js'],
 	},
 });

api/vitest.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'histoire';
 
 export default defineConfig({
 	plugins: [HstVue()],
-	setupFile: './src/histoire/setup.ts',
+	setupFile: './src/__histoire__/setup.ts',
 	theme: {
 		title: 'Directus Components',
 		favicon: './public/favicon.ico',

app/histoire.config.ts

@@ -1,9 +1,15 @@
+import { h } from 'vue';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
-export function generateRouter(routes: RouteRecordRaw[]) {
+export function generateRouter(routes?: RouteRecordRaw[]) {
 	const router = createRouter({
 		history: createWebHistory(),
-		routes,
+		routes: routes ?? [
+			{
+				path: '/',
+				component: h('div'),
+			},
+		],
 	});
 
 	return router;

app/src/histoire/register.ts app/src/__histoire__/register.ts

@@ -1,28 +1,18 @@
-import { test, expect, beforeEach } from 'vitest';
 import { mount } from '@vue/test-utils';
-
-import VButton from './v-button.vue';
-import { h } from 'vue';
-import { generateRouter } from '@/__utils__/router';
+import { beforeEach, expect, test } from 'vitest';
 import { Router } from 'vue-router';
-import { GlobalMountOptions } from '@vue/test-utils/dist/types';
+
 import { Focus } from '@/__utils__/focus';
+import { generateRouter } from '@/__utils__/router';
+import { Tooltip } from '@/__utils__/tooltip';
+import { GlobalMountOptions } from '@/__utils__/types';
+import VButton from './v-button.vue';
 
 let router: Router;
-
 let global: GlobalMountOptions;
 
 beforeEach(async () => {
-	router = generateRouter([
-		{
-			path: '/',
-			component: h('div', VButton),
-		},
-		{
-			path: '/test',
-			component: h('div', 'empty'),
-		},
-	]);
+	router = generateRouter();
 
 	router.push('/');
 	await router.isReady();
@@ -31,6 +21,7 @@ beforeEach(async () => {
 		stubs: ['v-progress-circular'],
 		directives: {
 			focus: Focus,
+			tooltip: Tooltip,
 		},
 		plugins: [router],
 	};
@@ -45,17 +36,3 @@ test('Mount component', () => {
 
 	expect(wrapper.html()).toMatchSnapshot();
 });
-
-// test('Click on link', async () => {
-// 	const wrapper = mount(VButton, {
-//         props: {
-//             to: '/test'
-//         },
-// 		global
-// 	});
-
-//     await wrapper.get('a').trigger('click')
-
-//     expect(router.currentRoute.value.path).toBe('/test')
-
-// });

app/src/histoire/setup.ts app/src/__histoire__/setup.ts

@@ -1,32 +1,22 @@
-import { test, expect, beforeEach } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { beforeEach, expect, test } from 'vitest';
+import { Router } from 'vue-router';
 
-import VCheckboxTree from './v-checkbox-tree.vue';
-import VCheckboxTreeCheckbox from './v-checkbox-tree-checkbox.vue';
-import VListItem from '../v-list-item.vue';
+import { generateRouter } from '@/__utils__/router';
+import type { GlobalMountOptions } from '@/__utils__/types';
+import VCheckbox from '../v-checkbox.vue';
+import VListGroup from '../v-list-group.vue';
 import VListItemIcon from '../v-list-item-icon.vue';
+import VListItem from '../v-list-item.vue';
 import VList from '../v-list.vue';
-import VListGroup from '../v-list-group.vue';
-import VCheckbox from '../v-checkbox.vue';
-import { h } from 'vue';
-import type { GlobalMountOptions } from '@/__utils__/types';
-import { Router } from 'vue-router';
-import { generateRouter } from '@/__utils__/router';
+import VCheckboxTreeCheckbox from './v-checkbox-tree-checkbox.vue';
+import VCheckboxTree from './v-checkbox-tree.vue';
 
 let router: Router;
 let global: GlobalMountOptions;
 
 beforeEach(async () => {
-	router = generateRouter([
-		{
-			path: '/',
-			component: h('div', 'test'),
-		},
-		{
-			path: '/test',
-			component: h('div', 'empty'),
-		},
-	]);
+	router = generateRouter();
 
 	router.push('/');
 	await router.isReady();
@@ -54,39 +44,3 @@ test('Mount component', () => {
 
 	expect(wrapper.html()).toMatchSnapshot();
 });
-
-// test('Choices prop', async () => {
-// 	const wrapper = mount(VCheckboxTree, {
-// 		props: {
-// 			modelValue: ['p1', 'c1'],
-// 			showSelectionOnly: true,
-// 			choices: [
-// 				{
-// 					text: 'Parent 1',
-// 					value: 'p1',
-// 				},
-// 				{
-// 					text: 'Parent 2',
-// 					value: 'p2',
-// 					children: [
-// 						{
-// 							text: 'Child 1',
-// 							value: 'c1',
-// 						},
-// 					],
-// 				},
-// 			],
-// 		},
-// 		global,
-// 	});
-
-// 	expect(wrapper.getComponent('.v-checkbox:nth-child(1)').classes()).toContain('checked');
-// 	expect(wrapper.getComponent('.v-checkbox:nth-child(1)').props().label).toBe('Parent 1');
-// 	expect(wrapper.getComponent('.v-checkbox:nth-child(2)').classes()).not.toContain('checked');
-
-// 	await wrapper.get('.v-checkbox:nth-child(2)').trigger('click');
-
-// 	const child1 = wrapper.get('.v-checkbox:nth-child(2)').find('.v-checkbox');
-// 	expect(child1.exists()).toBeTruthy();
-// 	expect(child1.props().label).toBe('Child 1');
-// });

app/src/histoire/wrapper.vue app/src/__histoire__/wrapper.vue

@@ -1,5 +1,3 @@
-/* eslint-disable vue/one-component-per-file */
-
 import { mount } from '@vue/test-utils';
 import { afterAll, beforeAll, expect, test, vi } from 'vitest';
 import { defineComponent, h, nextTick } from 'vue';