Add Components Package (#15094)

* move components without dependencies to packages

* make every components use vue script setup

* move components and utils from shared to @directus/components

* fix imports

* move over some more components

* get rid of unnecessary isEmpty and notEmpty

* move pagination

* fix missing !

* move groupable components

* move text-overflow and useElementSize

* fix icons not being shown

* add first unit tests

* remove capitalizeFirst

* simple cleanup

* add css-var unit test

* move over most other components

* make every component use script setup

* add some more unit tests

* add more tests and burn v-switch to the ground. 🔥

* add checkbox tests

* start with next test

* add storybook

* add more pages to storybook

* add final stories

* fix stories actions

* improve action fix

* cleaning props and adding tests

* unit tests -.-

* add some documentation to components

* Add docs to each prop

* clean storybook paths

* add more unit tests

* apply v-select fix

* update lock file

* small tweaks

* move back to shared

* fix imports

* fix imports

* cleaning

* stories to typescript

* Fix version number

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

app/src/utils/capitalize-first.test.ts

@@ -1,11 +0,0 @@
-import { test, expect } from 'vitest';
-
-import { capitalizeFirst } from '@/utils/capitalize-first';
-
-test('Capitalizes first character', () => {
-	expect(capitalizeFirst('test')).toBe('Test');
-});
-
-test('Does not explode on empty strings', () => {
-	expect(capitalizeFirst('')).toBe('');
-});

app/src/utils/capitalize-first.ts

@@ -1,15 +0,0 @@
-/**
- * Capitalizes the first character in a given string
- *
- * @param str - String to capitalize
- * @returns same string with first character capitalized
- *
- * @example
- * ```js
- * capitalizeFirst('test');
- * // => 'Test'
- * ```
- */
-export function capitalizeFirst(str: string): string {
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}

app/src/utils/get-js-type.ts

@@ -6,11 +6,29 @@ export function getJSType(field: Field): string {
 		field.meta!.special.some((special) => ['m2o', 'o2m', 'm2m', 'm2a', 'files', 'translations'].includes(special))
 	)
 		return 'object';
-	if (['bigInteger', 'integer', 'float', 'decimal'].includes(field.type)) return 'number';
-	if (['string', 'text', 'uuid', 'hash'].includes(field.type)) return 'string';
-	if (['boolean'].includes(field.type)) return 'boolean';
-	if (['time', 'timestamp', 'date', 'dateTime'].includes(field.type)) return 'string';
-	if (['json', 'csv'].includes(field.type)) return 'object';
+
+	switch (field.type) {
+		case 'bigInteger':
+		case 'integer':
+		case 'float':
+		case 'decimal':
+			return 'number';
+		case 'string':
+		case 'text':
+		case 'uuid':
+		case 'hash':
+		case 'time':
+		case 'timestamp':
+		case 'date':
+		case 'dateTime':
+			return 'string';
+		case 'boolean':
+			return 'boolean';
+		case 'json':
+		case 'csv':
+			return 'object';
+	}
+
 	if (field.type?.startsWith('geometry')) return 'object';
 	return 'undefined';
 }

app/src/utils/is-empty.test.ts

@@ -1,41 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-import { isEmpty, notEmpty } from '@/utils/is-empty';
-
-describe('isEmpty', () => {
-	it('Returns true for null', () => {
-		expect(isEmpty(null)).toBe(true);
-	});
-
-	it('Returns true for undefined', () => {
-		expect(isEmpty(undefined)).toBe(true);
-	});
-
-	it('Returns false for strings/numbers/etc', () => {
-		expect(isEmpty('')).toBe(false);
-		expect(isEmpty('hello')).toBe(false);
-		expect(isEmpty(123)).toBe(false);
-		expect(isEmpty(0)).toBe(false);
-		expect(isEmpty([])).toBe(false);
-		expect(isEmpty({})).toBe(false);
-	});
-});
-
-describe('notEmpty', () => {
-	it('Returns false for null', () => {
-		expect(notEmpty(null)).toBe(false);
-	});
-
-	it('Returns false for undefined', () => {
-		expect(notEmpty(undefined)).toBe(false);
-	});
-
-	it('Returns true for strings/numbers/etc', () => {
-		expect(notEmpty('')).toBe(true);
-		expect(notEmpty('hello')).toBe(true);
-		expect(notEmpty(123)).toBe(true);
-		expect(notEmpty(0)).toBe(true);
-		expect(notEmpty([])).toBe(true);
-		expect(notEmpty({})).toBe(true);
-	});
-});

app/src/utils/is-empty.ts

@@ -1,7 +0,0 @@
-export function isEmpty<Value>(value: Value | null | undefined): value is Value {
-	return value == null || value === undefined;
-}
-
-export function notEmpty<Value>(value: Value | null | undefined): value is Value {
-	return value !== null && value !== undefined;
-}

app/src/utils/percentage.ts

@@ -1,5 +1,5 @@
 export const percentage = (value: number, limit: number | undefined) => {
 	if (!limit) return null;
 	if (!value) return 100;
-	return 100 - (value / +limit) * 100;
+	return 100 - (value / Number(limit)) * 100;
 };

app/src/utils/translate-shortcut.ts

@@ -1,4 +1,4 @@
-import { capitalizeFirst } from '@/utils/capitalize-first';
+import { capitalize } from 'lodash';
 
 export function translateShortcut(keys: string[]): string {
 	const isMac = navigator.platform.toLowerCase().startsWith('mac') || navigator.platform.startsWith('iP');
@@ -10,14 +10,14 @@ export function translateShortcut(keys: string[]): string {
 				if (key === 'option') return '⌥';
 				if (key === 'shift') return '⇧';
 				if (key === 'alt') return '⌥';
-				return capitalizeFirst(key);
+				return capitalize(key);
 			})
 			.join('');
 	} else {
 		return keys
 			.map((key) => {
 				if (key === 'meta') return 'Ctrl';
-				return capitalizeFirst(key);
+				return capitalize(key);
 			})
 			.join('+');
 	}