refactor(#285): Add zod for KtNavbar

packages/documentation/components/NavBar.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { Yoco } from '@3yourmind/yoco'
+import { Kotti } from '@3yourmind/kotti-ui'
 import { defineComponent, ref } from '@vue/composition-api'
 import { Route } from 'vue-router'
 
@@ -86,17 +86,7 @@ export default defineComponent({
 				},
 			],
 			sections: menu.map(
-				(
-					section,
-				): {
-					title: string | null
-					links: Array<{
-						icon: Yoco.Icon
-						title: string
-						path: string
-						isActive: boolean
-					}>
-				} => ({
+				(section): Kotti.Navbar.Section => ({
 					links: section.subsections.map((subsection) => ({
 						icon: subsection.icon,
 						title: subsection.title,

packages/documentation/pages/examples/layouts.vue

@@ -66,52 +66,53 @@ export default {
 				{
 					links: [
 						{
-							link: '#',
-							title: 'Dashboard',
 							icon: Yoco.Icon.DASHBOARD,
 							isActive: true,
+							link: '#',
+							title: 'Dashboard',
 						},
 						{
-							link: '/usage/layouts/navbar',
-							title: 'Close Example',
 							icon: Yoco.Icon.CLOSE,
 							isActive: true,
+							link: '/usage/layouts/navbar',
+							title: 'Close Example',
 						},
 					],
+					title: null,
 				},
 				{
-					title: 'Order Management',
 					links: [
 						{
-							link: '#',
-							title: 'Orders',
 							icon: Yoco.Icon.INVOICE,
 							isActive: false,
+							link: '#',
+							title: 'Orders',
 						},
 						{
-							link: '#',
-							title: 'Quotes',
 							icon: Yoco.Icon.REQUEST,
 							isActive: false,
+							link: '#',
+							title: 'Quotes',
 						},
 					],
+					title: 'Order Management',
 				},
 				{
-					title: 'Agile MES',
 					links: [
 						{
-							link: '#',
-							title: 'Parts',
 							icon: Yoco.Icon.BOX_3D,
 							isActive: false,
+							link: '#',
+							title: 'Parts',
 						},
 						{
-							link: '#',
-							title: 'Schedule',
 							icon: Yoco.Icon.CALENDAR,
 							isActive: false,
+							link: '#',
+							title: 'Schedule',
 						},
 					],
+					title: 'Agile MES',
 				},
 			],
 			navbarNotification: {

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 { Kotti } from '../types'
+import { propValidator } from '../props'
 
 import NavbarLogo from './components/NavbarLogo.vue'
 import NavbarMenu from './components/NavbarMenu.vue'
@@ -74,15 +74,35 @@ export default defineComponent<KottiNavbar.PropsInternal>({
 	},
 	mixins: [clickaway],
 	props: {
-		isNarrow: { default: false, type: Boolean },
-		logoUrl: { required: true, type: String },
-		notification: { default: null, type: Object },
-		quickLinks: { default: () => [], type: Array },
-		sections: { required: true, type: Array },
+		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: (theme) => theme === null || theme in Kotti.Navbar.Theme,
+			validator: propValidator(KottiNavbar.propsInternalSchema, 'theme'),
 		},
 	},
 	setup(props, { emit }) {

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

@@ -1,39 +1,52 @@
-import { Yoco } from '@3yourmind/yoco'
+import { yocoIconSchema } from '@3yourmind/yoco'
+import { z } from 'zod'
 
 import { SpecifyRequiredProps } from '../types/utilities'
 
 export namespace KottiNavbar {
-	export type QuickLink = {
-		link: string
-		title: string
-	}
-
-	export type SectionLink = {
-		icon: Yoco.Icon
-		isActive: boolean
-		title: string
-		to: unknown
-	}
-
-	export type Section = {
-		title: string | null
-		links: SectionLink[]
-	}
+	export const notificationSchema = z.object({
+		count: z.number(),
+		link: z.string(),
+		title: z.string(),
+	})
+	export type Notification = z.infer<typeof notificationSchema>
+
+	export const quickLinkSchema = z.object({
+		link: z.string(),
+		title: z.string(),
+	})
+	export type QuickLink = z.infer<typeof quickLinkSchema>
+
+	export const sectionLinkSchema = z.object({
+		icon: yocoIconSchema,
+		isActive: z.boolean(),
+		title: z.string(),
+		to: z.unknown().optional(),
+	})
+	export type SectionLink = z.infer<typeof sectionLinkSchema>
+
+	export const sectionSchema = z.object({
+		title: z.string().nullable(),
+		links: z.array(sectionLinkSchema),
+	})
+	export type Section = z.infer<typeof sectionSchema>
 
 	export enum Theme {
 		DARK = 'dark',
 		LIGHT = 'light',
 		REVERSE = 'reverse',
 	}
-
-	export type PropsInternal = {
-		isNarrow: boolean
-		logoUrl: string
-		notification: Record<string, unknown> | null
-		quickLinks: QuickLink[]
-		sections: Section[]
-		theme: Theme | null
-	}
+	export const themeSchema = z.nativeEnum(Theme)
+
+	export const propsInternalSchema = z.object({
+		isNarrow: z.boolean(),
+		logoUrl: z.string(),
+		notification: notificationSchema.nullable(),
+		quickLinks: z.array(quickLinkSchema),
+		sections: z.array(sectionSchema),
+		theme: themeSchema.nullable(),
+	})
+	export type PropsInternal = z.infer<typeof propsInternalSchema>
 
 	export type Props = SpecifyRequiredProps<
 		PropsInternal,