refactor(#285): Add zod for KtBanner

packages/kotti-ui/source/kotti-banner/KtBanner.vue

@@ -18,11 +18,12 @@
 </template>
 
 <script lang="ts">
-import { isYocoIcon, Yoco } from '@3yourmind/yoco'
+import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref } from '@vue/composition-api'
 
 import { KtButton } from '../kotti-button'
 import { useTranslationNamespace } from '../kotti-translation/hooks'
+import { propValidator } from '../props'
 
 import { KottiBanner } from './types'
 
@@ -32,16 +33,39 @@ export default defineComponent<KottiBanner.PropsInternal>({
 		KtButton,
 	},
 	props: {
-		actionText: { default: null, type: String },
-		expandCloseLabel: { default: null, type: String },
-		expandLabel: { default: null, type: String },
+		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: isYocoIcon,
+			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'),
 		},
-		isGray: { default: false, type: Boolean },
-		message: { required: true, type: String },
 	},
 	setup(props, { slots }) {
 		const translations = useTranslationNamespace('KtBanner')

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

@@ -1,16 +1,18 @@
-import { Yoco } from '@3yourmind/yoco'
+import { yocoIconSchema } from '@3yourmind/yoco'
+import { z } from 'zod'
 
 import { SpecifyRequiredProps } from '../types/utilities'
 
 export namespace KottiBanner {
-	export type PropsInternal = {
-		actionText: string | null
-		icon: Yoco.Icon
-		isGray: boolean
-		message: string
-		expandCloseLabel: string | null
-		expandLabel: string | null
-	}
+	export const propsInternalSchema = z.object({
+		actionText: z.string().nullable(),
+		expandCloseLabel: z.string().nullable(),
+		expandLabel: z.string().nullable(),
+		icon: yocoIconSchema,
+		isGray: z.boolean(),
+		message: z.string(),
+	})
+	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
 	export type Props = SpecifyRequiredProps<PropsInternal, 'message'>