refactor(#285): propValidator => makeProps

Unfortunately, the makeProps type hints only work for some types in Vue, others somehow get resolved to any. As far as I can tell, this is due to PropType<> being buggy. I also tested @vue/composition-api@1.1.5 and PropType does appear to be broken there as well. Let’s hope that one day Vue will properly support this.
3YOURMIND · Sep 24, 2021 · 37d0a51 · 37d0a51
1 parent 930eb2b
commit 37d0a51
Show file tree

Hide file tree

Showing 14 changed files with 228 additions and 248 deletions.
diff --git a/packages/kotti-ui/source/kotti-banner/KtBanner.vue b/packages/kotti-ui/source/kotti-banner/KtBanner.vue
@@ -23,7 +23,7 @@ import { computed, defineComponent, ref } from '@vue/composition-api'
 
 import { KtButton } from '../kotti-button'
 import { useTranslationNamespace } from '../kotti-translation/hooks'
-import { propValidator } from '../props'
+import { makeProps } from '../props'
 
 import { KottiBanner } from './types'
 
@@ -32,41 +32,7 @@ export default defineComponent<KottiBanner.PropsInternal>({
 	components: {
 		KtButton,
 	},
-	props: {
-		actionText: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiBanner.propsInternalSchema, 'actionText'),
-		},
-		expandCloseLabel: {
-			default: null,
-			type: String,
-			validator: propValidator(
-				KottiBanner.propsInternalSchema,
-				'expandCloseLabel',
-			),
-		},
-		expandLabel: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiBanner.propsInternalSchema, 'expandLabel'),
-		},
-		icon: {
-			default: Yoco.Icon.ANNOUNCE,
-			type: String,
-			validator: propValidator(KottiBanner.propsInternalSchema, 'icon'),
-		},
-		isGray: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiBanner.propsInternalSchema, 'isGray'),
-		},
-		message: {
-			required: true,
-			type: String,
-			validator: propValidator(KottiBanner.propsInternalSchema, 'message'),
-		},
-	},
+	props: makeProps(KottiBanner.propsSchema),
 	setup(props, { slots }) {
 		const translations = useTranslationNamespace('KtBanner')
 

diff --git a/packages/kotti-ui/source/kotti-banner/types.ts b/packages/kotti-ui/source/kotti-banner/types.ts
@@ -1,20 +1,18 @@
-import { yocoIconSchema } from '@3yourmind/yoco'
+import { Yoco, yocoIconSchema } from '@3yourmind/yoco'
 import { z } from 'zod'
 
-import { SpecifyRequiredProps } from '../types/utilities'
-
 export namespace KottiBanner {
-	export const propsInternalSchema = z.object({
-		actionText: z.string().nullable(),
-		expandCloseLabel: z.string().nullable(),
-		expandLabel: z.string().nullable(),
-		icon: yocoIconSchema,
-		isGray: z.boolean(),
+	export const propsSchema = z.object({
+		actionText: z.string().nullable().default(null),
+		expandCloseLabel: z.string().nullable().default(null),
+		expandLabel: z.string().nullable().default(null),
+		icon: yocoIconSchema.default(Yoco.Icon.ANNOUNCE),
+		isGray: z.boolean().default(false),
 		message: z.string(),
 	})
-	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
-	export type Props = SpecifyRequiredProps<PropsInternal, 'message'>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 
 	export type Translations = {
 		expandCloseLabel: string

diff --git a/packages/kotti-ui/source/kotti-breadcrumb/KtBreadcrumb.vue b/packages/kotti-ui/source/kotti-breadcrumb/KtBreadcrumb.vue
@@ -25,36 +25,15 @@
 </template>
 
 <script lang="ts">
-import { Yoco } from '@3yourmind/yoco'
 import { defineComponent } from '@vue/composition-api'
 
-import { propValidator } from '../props'
+import { makeProps } from '../props'
 
 import { KottiBreadcrumb } from './types'
 
 export default defineComponent<KottiBreadcrumb.PropsInternal>({
 	name: 'KtBreadcrumb',
-	props: {
-		breadcrumbs: {
-			required: true,
-			type: Array,
-			validator: propValidator(
-				KottiBreadcrumb.propsInternalSchema,
-				'breadcrumbs',
-			),
-		},
-		separator: {
-			default: (): KottiBreadcrumb.Separator => ({
-				style: KottiBreadcrumb.SeparatorType.ICON,
-				value: Yoco.Icon.CHEVRON_RIGHT,
-			}),
-			type: Object,
-			validator: propValidator(
-				KottiBreadcrumb.propsInternalSchema,
-				'separator',
-			),
-		},
-	},
+	props: makeProps(KottiBreadcrumb.propsSchema),
 	setup(props) {
 		return {
 			handleClick: (item: KottiBreadcrumb.Breadcrumb) => {

diff --git a/packages/kotti-ui/source/kotti-breadcrumb/types.ts b/packages/kotti-ui/source/kotti-breadcrumb/types.ts
@@ -1,8 +1,6 @@
-import { yocoIconSchema } from '@3yourmind/yoco'
+import { Yoco, yocoIconSchema } from '@3yourmind/yoco'
 import { z } from 'zod'
 
-import { SpecifyRequiredProps } from '../types/utilities'
-
 export namespace KottiBreadcrumb {
 	export enum SeparatorType {
 		ICON = 'icon',
@@ -29,14 +27,14 @@ export namespace KottiBreadcrumb {
 	])
 	export type Separator = z.infer<typeof separatorSchema>
 
-	export const propsInternalSchema = z.object({
+	export const propsSchema = z.object({
 		breadcrumbs: z.array(breadcrumbSchema),
-		separator: separatorSchema,
+		separator: separatorSchema.default(() => ({
+			style: SeparatorType.ICON as const,
+			value: Yoco.Icon.CHEVRON_RIGHT,
+		})),
 	})
-	export type PropsInternal = {
-		breadcrumbs: Array<Breadcrumb>
-		separator: Separator
-	}
 
-	export type Props = SpecifyRequiredProps<PropsInternal, 'breadcrumbs'>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 }
diff --git a/packages/kotti-ui/source/kotti-button/KtButton.vue b/packages/kotti-ui/source/kotti-button/KtButton.vue
@@ -17,54 +17,13 @@
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api'
 
-import { propValidator } from '../props'
+import { makeProps } from '../props'
 
 import { KottiButton } from './types'
 
 export default defineComponent<KottiButton.PropsInternal>({
 	name: 'KtButton',
-	props: {
-		icon: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiButton.propsInternalSchema, 'icon'),
-		},
-		isBlock: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiButton.propsInternalSchema, 'isBlock'),
-		},
-		isLoading: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiButton.propsInternalSchema, 'isLoading'),
-		},
-		isMultiline: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiButton.propsInternalSchema, 'isMultiline'),
-		},
-		isSubmit: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiButton.propsInternalSchema, 'isSubmit'),
-		},
-		label: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiButton.propsInternalSchema, 'label'),
-		},
-		size: {
-			default: KottiButton.Size.MEDIUM,
-			type: String,
-			validator: propValidator(KottiButton.propsInternalSchema, 'size'),
-		},
-		type: {
-			default: KottiButton.Type.DEFAULT,
-			type: String,
-			validator: propValidator(KottiButton.propsInternalSchema, 'type'),
-		},
-	},
+	props: makeProps(KottiButton.propsSchema),
 	setup(props, { emit, slots }) {
 		const hasSlot = computed(() => Boolean(slots.default))
 

diff --git a/packages/kotti-ui/source/kotti-button/types.ts b/packages/kotti-ui/source/kotti-button/types.ts
@@ -1,8 +1,6 @@
 import { yocoIconSchema } from '@3yourmind/yoco'
 import { z } from 'zod'
 
-import { SpecifyRequiredProps } from '../types/utilities'
-
 export namespace KottiButton {
 	export enum Type {
 		DANGER = 'danger',
@@ -20,17 +18,17 @@ export namespace KottiButton {
 	}
 	export const sizeSchema = z.nativeEnum(Size)
 
-	export const propsInternalSchema = z.object({
-		icon: yocoIconSchema,
-		isBlock: z.boolean(),
-		isLoading: z.boolean(),
-		isMultiline: z.boolean(),
-		isSubmit: z.boolean(),
-		label: z.string().nullable(),
-		size: sizeSchema,
-		type: typeSchema,
+	export const propsSchema = z.object({
+		icon: yocoIconSchema.nullable().default(null),
+		isBlock: z.boolean().default(false),
+		isLoading: z.boolean().default(false),
+		isMultiline: z.boolean().default(false),
+		isSubmit: z.boolean().default(false),
+		label: z.string().nullable().default(null),
+		size: sizeSchema.default(Size.MEDIUM),
+		type: typeSchema.default(Type.DEFAULT),
 	})
-	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
-	export type Props = SpecifyRequiredProps<PropsInternal, never>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 }
diff --git a/packages/kotti-ui/source/kotti-line/KtLine.vue b/packages/kotti-ui/source/kotti-line/KtLine.vue
@@ -9,19 +9,13 @@
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
 
-import { propValidator } from '../props'
+import { makeProps } from '../props'
 
 import { KottiLine } from './types'
 
 export default defineComponent<KottiLine.PropsInternal>({
 	name: 'KtLine',
-	props: {
-		text: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiLine.propsInternalSchema, 'text'),
-		},
-	},
+	props: makeProps(KottiLine.propsSchema),
 })
 </script>
 

diff --git a/packages/kotti-ui/source/kotti-line/types.ts b/packages/kotti-ui/source/kotti-line/types.ts
@@ -1,12 +1,10 @@
 import { z } from 'zod'
 
-import { SpecifyRequiredProps } from '../types/utilities'
-
 export namespace KottiLine {
-	export const propsInternalSchema = z.object({
-		text: z.string(),
+	export const propsSchema = z.object({
+		text: z.string().nullable().default(null),
 	})
-	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
-	export type Props = SpecifyRequiredProps<PropsInternal, never>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 }
diff --git a/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue b/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue
@@ -55,7 +55,7 @@
 import { computed, defineComponent, provide, ref } from '@vue/composition-api'
 import { mixin as clickaway } from 'vue-clickaway'
 
-import { propValidator } from '../props'
+import { makeProps } from '../props'
 
 import NavbarLogo from './components/NavbarLogo.vue'
 import NavbarMenu from './components/NavbarMenu.vue'
@@ -73,38 +73,7 @@ export default defineComponent<KottiNavbar.PropsInternal>({
 		NavbarQuickLink,
 	},
 	mixins: [clickaway],
-	props: {
-		isNarrow: {
-			default: false,
-			type: Boolean,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'isNarrow'),
-		},
-		logoUrl: {
-			required: true,
-			type: String,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'logoUrl'),
-		},
-		notification: {
-			default: null,
-			type: Object,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'notification'),
-		},
-		quickLinks: {
-			default: () => [],
-			type: Array,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'quickLinks'),
-		},
-		sections: {
-			required: true,
-			type: Array,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'sections'),
-		},
-		theme: {
-			default: null,
-			type: String,
-			validator: propValidator(KottiNavbar.propsInternalSchema, 'theme'),
-		},
-	},
+	props: makeProps(KottiNavbar.propsSchema),
 	setup(props, { emit }) {
 		const mobileMenuToggle = ref(false)
 

diff --git a/packages/kotti-ui/source/kotti-navbar/types.ts b/packages/kotti-ui/source/kotti-navbar/types.ts
@@ -1,8 +1,6 @@
 import { yocoIconSchema } from '@3yourmind/yoco'
 import { z } from 'zod'
 
-import { SpecifyRequiredProps } from '../types/utilities'
-
 export namespace KottiNavbar {
 	export const notificationSchema = z.object({
 		count: z.number(),
@@ -38,20 +36,17 @@ export namespace KottiNavbar {
 	}
 	export const themeSchema = z.nativeEnum(Theme)
 
-	export const propsInternalSchema = z.object({
-		isNarrow: z.boolean(),
+	export const propsSchema = z.object({
+		isNarrow: z.boolean().default(false),
 		logoUrl: z.string(),
-		notification: notificationSchema.nullable(),
-		quickLinks: z.array(quickLinkSchema),
+		notification: notificationSchema.nullable().default(null),
+		quickLinks: z.array(quickLinkSchema).default(() => []),
 		sections: z.array(sectionSchema),
-		theme: themeSchema.nullable(),
+		theme: themeSchema.nullable().default(null),
 	})
-	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
-	export type Props = SpecifyRequiredProps<
-		PropsInternal,
-		'logoUrl' | 'sections'
-	>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 
 	export type Translations = {
 		menuCollapse: string