add-zod(5): Add makeProps

.eslintrc.js

@@ -71,8 +71,6 @@ module.exports = {
 			plugins: ['jest'],
 			extends: ['plugin:jest/recommended'],
 			rules: {
-				'sonarjs/no-duplicate-string': 'off',
-				'no-console': 'off',
 				'import/order': [
 					'warn',
 					{
@@ -83,6 +81,10 @@ module.exports = {
 						'newlines-between': 'always',
 					},
 				],
+				'no-console': 'off',
+				'no-magic-numbers': 'off',
+				'sonarjs/no-duplicate-string': 'off',
+				'@typescript-eslint/ban-ts-comment': 'off',
 			},
 		},
 	],

jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
 	moduleFileExtensions: ['js', 'json', 'ts', 'vue', 'tsx', 'jsx'],
 	preset: 'ts-jest',
 	testEnvironment: 'node',
-	testRegex: 'tests.ts',
+	testRegex: '(.*.test.ts)|(tests.ts)',
 	transform: {
 		'.*\\.(vue)$': 'vue-jest',
 		'^.+\\.tsx?$': 'ts-jest',

packages/documentation/components/NavBar.vue

@@ -15,9 +15,8 @@
 </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'
 
 import navLogo from '../assets/img/nav_logo.svg'
 import { menu } from '../data/menu'
@@ -44,6 +43,7 @@ export default defineComponent({
 	setup() {
 		const route = useRoute()
 		const router = useRouter()
+
 		const isNarrow = ref<boolean>(
 			(() => {
 				try {
@@ -62,8 +62,8 @@ export default defineComponent({
 		)
 
 		return {
-			handleLinkClick(link: Route) {
-				router.value.push(link.path)
+			handleLinkClick(link: Kotti.Navbar.SectionLink & { to: string }) {
+				router.value.push(link.to)
 			},
 			isNarrow,
 			navLogo,
@@ -86,28 +86,22 @@ export default defineComponent({
 				},
 			],
 			sections: menu.map(
-				(
-					section,
-				): {
-					title: string | null
-					links: Array<{
-						icon: Yoco.Icon
-						title: string
-						path: string
-						isActive: boolean
-					}>
-				} => ({
-					links: section.subsections.map((subsection) => ({
-						icon: subsection.icon,
-						title: subsection.title,
-						path: `/${subsection.path}${
-							subsection.pages.length >= 1 ? `/${subsection.pages[0].path}` : ''
-						}`,
-						isActive:
-							subsection.path === ''
-								? route.value.path === '/'
-								: route.value.path.startsWith(`/${subsection.path}`),
-					})),
+				(section): Kotti.Navbar.Section => ({
+					links: section.subsections.map(
+						(subsection): Kotti.Navbar.SectionLink & { to: string } => ({
+							icon: subsection.icon,
+							isActive:
+								subsection.path === ''
+									? route.value.path === '/'
+									: route.value.path.startsWith(`/${subsection.path}`),
+							title: subsection.title,
+							to: `/${subsection.path}${
+								subsection.pages.length >= 1
+									? `/${subsection.pages[0].path}`
+									: ''
+							}`,
+						}),
+					),
 					title: section.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: {
@@ -121,7 +122,6 @@ export default {
 			},
 			userMenuData: [
 				{
-					title: 'Switch To',
 					links: [
 						{
 							link: '#',
@@ -132,9 +132,9 @@ export default {
 							title: 'Service Panel',
 						},
 					],
+					title: 'Switch To',
 				},
 				{
-					title: 'Recent Service',
 					links: [
 						{
 							link: '#',
@@ -149,6 +149,7 @@ export default {
 							title: '4YOURMIND Service',
 						},
 					],
+					title: 'Recent Service',
 				},
 				{
 					links: [
@@ -161,6 +162,7 @@ export default {
 							title: 'Logout (Close Example)',
 						},
 					],
+					title: null,
 				},
 			],
 			actionbarMenu: [

packages/kotti-ui/.unimportedrc.json

@@ -3,6 +3,7 @@
 	"extensions": [".js", ".jsx", ".ts", ".tsx", ".vue"],
 	"ignorePatterns": ["**/node_modules/**", "**/dist/**"],
 	"ignoreUnimported": [
+		"**/*.test.ts",
 		"**/tests.ts",
 		"**/*.d.ts",
 		"**/tokens/**",

packages/kotti-ui/package.json

@@ -19,7 +19,8 @@
 		"normalize.css": "^8.0.1",
 		"tippy.js": "6.x",
 		"ts-custom-error": "^3.1.1",
-		"vue-clickaway": "^2.2.2"
+		"vue-clickaway": "^2.2.2",
+		"zod": "^3.8.2"
 	},
 	"description": "Kotti Vue Component UI",
 	"devDependencies": {

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 { makeProps } from '../make-props'
 
 import { KottiBanner } from './types'
 
@@ -31,18 +32,7 @@ export default defineComponent<KottiBanner.PropsInternal>({
 	components: {
 		KtButton,
 	},
-	props: {
-		actionText: { default: null, type: String },
-		expandCloseLabel: { default: null, type: String },
-		expandLabel: { default: null, type: String },
-		icon: {
-			default: Yoco.Icon.ANNOUNCE,
-			type: String,
-			validator: isYocoIcon,
-		},
-		isGray: { default: false, type: Boolean },
-		message: { required: true, type: String },
-	},
+	props: makeProps(KottiBanner.propsSchema),
 	setup(props, { slots }) {
 		const translations = useTranslationNamespace('KtBanner')
 

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

@@ -1,18 +1,18 @@
-import { Yoco } from '@3yourmind/yoco'
-
-import { SpecifyRequiredProps } from '../types/utilities'
+import { Yoco, yocoIconSchema } from '@3yourmind/yoco'
+import { z } from 'zod'
 
 export namespace KottiBanner {
-	export type PropsInternal = {
-		actionText: string | null
-		icon: Yoco.Icon
-		isGray: boolean
-		message: string
-		expandCloseLabel: string | null
-		expandLabel: string | null
-	}
+	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 Props = SpecifyRequiredProps<PropsInternal, 'message'>
+	export type PropsInternal = z.output<typeof propsSchema>
+	export type Props = z.input<typeof propsSchema>
 
 	export type Translations = {
 		expandCloseLabel: string

packages/kotti-ui/source/kotti-breadcrumb/KtBreadcrumb.vue

@@ -25,49 +25,15 @@
 </template>
 
 <script lang="ts">
-import { isYocoIcon, Yoco } from '@3yourmind/yoco'
 import { defineComponent } from '@vue/composition-api'
-import { isBoolean, isFunction, isString } from 'lodash'
 
-import { KottiBreadcrumb } from './types'
+import { makeProps } from '../make-props'
 
-const breadcrumbValidator = (
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	value: any,
-): value is KottiBreadcrumb.Breadcrumb =>
-	value !== null &&
-	typeof value === 'object' &&
-	isBoolean(value.isCompleted) &&
-	isString(value.title) &&
-	isFunction(value.onClick)
+import { KottiBreadcrumb } from './types'
 
 export default defineComponent<KottiBreadcrumb.PropsInternal>({
 	name: 'KtBreadcrumb',
-	props: {
-		breadcrumbs: {
-			type: Array,
-			required: true,
-			validator: (value: unknown): value is Array<KottiBreadcrumb.Breadcrumb> =>
-				Array.isArray(value) && value.every(breadcrumbValidator),
-		},
-		separator: {
-			type: Object,
-			default: (): KottiBreadcrumb.Style => ({
-				style: KottiBreadcrumb.SeparatorType.ICON,
-				value: Yoco.Icon.CHEVRON_RIGHT,
-			}),
-			validator: (
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				value: any,
-			): value is KottiBreadcrumb.Props['separator'] =>
-				value !== null &&
-				typeof value === 'object' &&
-				((value.style === KottiBreadcrumb.SeparatorType.ICON &&
-					isYocoIcon(value.value)) ||
-					(value.style === KottiBreadcrumb.SeparatorType.TEXT &&
-						isString(value.value))),
-		},
-	},
+	props: makeProps(KottiBreadcrumb.propsSchema),
 	setup(props) {
 		return {
 			handleClick: (item: KottiBreadcrumb.Breadcrumb) => {