refactor(#285): Add zod for KtButton

packages/kotti-ui/source/kotti-button/KtButton.vue

@@ -15,31 +15,54 @@
 </template>
 
 <script lang="ts">
-import { isYocoIcon } from '@3yourmind/yoco'
 import { computed, defineComponent } from '@vue/composition-api'
 
+import { propValidator } from '../props'
+
 import { KottiButton } from './types'
 
 export default defineComponent<KottiButton.PropsInternal>({
 	name: 'KtButton',
 	props: {
-		icon: { default: null, type: String, validator: isYocoIcon },
-		isBlock: { default: false, type: Boolean },
-		isLoading: { default: false, type: Boolean },
-		isMultiline: { default: false, type: Boolean },
-		isSubmit: { default: false, type: Boolean },
-		label: { default: null, type: String },
+		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: (value: unknown): value is KottiButton.Size =>
-				Object.values(KottiButton.Size).includes(value as KottiButton.Size),
+			validator: propValidator(KottiButton.propsInternalSchema, 'size'),
 		},
 		type: {
 			default: KottiButton.Type.DEFAULT,
 			type: String,
-			validator: (value: unknown): value is KottiButton.Type =>
-				Object.values(KottiButton.Type).includes(value as KottiButton.Type),
+			validator: propValidator(KottiButton.propsInternalSchema, 'type'),
 		},
 	},
 	setup(props, { emit, slots }) {

packages/kotti-ui/source/kotti-button/types.ts

@@ -1,4 +1,5 @@
-import { Yoco } from '@3yourmind/yoco'
+import { yocoIconSchema } from '@3yourmind/yoco'
+import { z } from 'zod'
 
 import { SpecifyRequiredProps } from '../types/utilities'
 
@@ -10,23 +11,26 @@ export namespace KottiButton {
 		SECONDARY = 'secondary',
 		TEXT = 'text',
 	}
+	export const typeSchema = z.nativeEnum(Type)
 
 	export enum Size {
 		LARGE = 'large',
 		MEDIUM = 'medium',
 		SMALL = 'small',
 	}
+	export const sizeSchema = z.nativeEnum(Size)
 
-	export type PropsInternal = {
-		icon: Yoco.Icon | null
-		isBlock: boolean
-		isLoading: boolean
-		isMultiline: boolean
-		isSubmit: boolean
-		label: string | null
-		size: KottiButton.Size
-		type: KottiButton.Type
-	}
+	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 type PropsInternal = z.infer<typeof propsInternalSchema>
 
 	export type Props = SpecifyRequiredProps<PropsInternal, never>
 }