chore(zui): move studio component definitions in zui as defaults (#374)

zui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bpinternal/zui",
-  "version": "0.9.3",
-  "description": "An extension of Zod for working nicely with UIs and JSON Schemas",
+  "version": "0.10.0",
+  "description": "A fork of Zod with additional features",
   "type": "module",
   "source": "./src/index.ts",
   "main": "./dist/index.js",

zui/src/index.ts

@@ -7,22 +7,7 @@ import {
   TypescriptGenerationOptions,
 } from './transforms/zui-to-typescript-next'
 
-export type {
-  BaseType,
-  UIComponentDefinitions,
-  ZuiComponentMap,
-  AsBaseType,
-  ZuiReactComponent,
-  DefaultComponentDefinitions,
-  ZuiReactComponentProps,
-  JSONSchema,
-  JSONSchemaOfType,
-  MergeUIComponentDefinitions,
-  FormValidation,
-  FormError,
-} from './ui/types'
-export type { BoundaryFallbackComponent } from './ui/ErrorBoundary'
-export { ZuiForm, type ZuiFormProps } from './ui'
+export * from './ui'
 export * from './z'
 
 export const transforms = {

zui/src/ui/Form.tsx

@@ -1,16 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { BoundaryFallbackComponent, ErrorBoundary } from './ErrorBoundary'
 import { FormDataProvider, deepMerge, getDefaultValues } from './hooks/useFormData'
-import {
-  FormValidation,
-  DefaultComponentDefinitions,
-  JSONSchema,
-  UIComponentDefinitions,
-  ZuiComponentMap,
-} from './types'
+import { FormValidation, EmptyComponentDefinitions, JSONSchema, UIComponentDefinitions, ZuiComponentMap } from './types'
 import { FormElementRenderer } from './ElementRenderer'
 
-export type ZuiFormProps<UI extends UIComponentDefinitions = DefaultComponentDefinitions> = {
+export type ZuiFormProps<UI extends UIComponentDefinitions = EmptyComponentDefinitions> = {
   schema: JSONSchema
   components: ZuiComponentMap<UI>
   value: any
@@ -21,7 +15,7 @@ export type ZuiFormProps<UI extends UIComponentDefinitions = DefaultComponentDef
   onValidation?: (validation: FormValidation) => void
 }
 
-export const ZuiForm = <UI extends UIComponentDefinitions = DefaultComponentDefinitions>({
+export const ZuiForm = <UI extends UIComponentDefinitions = EmptyComponentDefinitions>({
   schema,
   components,
   onChange,
@@ -53,7 +47,7 @@ export const ZuiForm = <UI extends UIComponentDefinitions = DefaultComponentDefi
     >
       <ErrorBoundary fallback={fallback} fieldSchema={schema} path={[]}>
         <FormElementRenderer
-          components={components as any}
+          components={components}
           fieldSchema={schema}
           path={[]}
           fallback={fallback}

zui/src/ui/component-definitions.ts

@@ -0,0 +1,23 @@
+import z from '../z'
+import { UIComponentDefinitions } from './types'
+
+export const defaultComponentDefinitions = {
+  string: {},
+  number: {
+    slider: {
+      id: 'slider',
+      params: z.object({}),
+    },
+  },
+  boolean: {
+    switch: {
+      id: 'switch',
+      params: z.object({}),
+    },
+  },
+  array: {},
+  object: {},
+  discriminatedUnion: {},
+} as const satisfies UIComponentDefinitions
+
+export type DefaultComponentDefinitions = typeof defaultComponentDefinitions

zui/src/ui/index.ts

@@ -1,2 +1,18 @@
 export { ZuiForm, type ZuiFormProps } from './Form'
-export { getSchemaType } from './utils'
+
+export * from './component-definitions'
+export * from './ErrorBoundary'
+
+export type {
+  BaseType,
+  UIComponentDefinitions,
+  ZuiComponentMap,
+  AsBaseType,
+  ZuiReactComponent,
+  ZuiReactComponentProps,
+  JSONSchema,
+  JSONSchemaOfType,
+  MergeUIComponentDefinitions,
+  FormValidation,
+  FormError,
+} from './types'

zui/src/ui/types.ts

@@ -133,7 +133,7 @@ export type BaseType = 'number' | 'string' | 'boolean' | 'object' | 'array' | 'd
 export const containerTypes = ['object', 'array', 'discriminatedUnion'] as const
 export type ContainerType = (typeof containerTypes)[number]
 
-export type DefaultComponentDefinitions = {
+export type EmptyComponentDefinitions = {
   number: {}
   string: {}
   boolean: {}
@@ -197,7 +197,7 @@ export type AsBaseType<T> = T extends BaseType ? T : never
 export type SchemaContext<
   Type extends BaseType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = {
   type: Type
   id: ID
@@ -215,7 +215,7 @@ export type FormError = {
 export type ZuiReactComponentBaseProps<
   Type extends BaseType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = {
   type: Type
   componentID: ID
@@ -252,7 +252,7 @@ export type ZuiReactArrayChildProps =
 export type ZuiReactDiscriminatedUnionComponentProps<
   Type extends ContainerType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = ZuiReactComponentBaseProps<Type, ID, UI> & {
   discriminatorKey: string | null
   discriminatorLabel: string
@@ -265,15 +265,15 @@ export type ZuiReactDiscriminatedUnionComponentProps<
 export type ZuiReactObjectComponentProps<
   Type extends ContainerType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = ZuiReactComponentBaseProps<Type, ID, UI> & {
   children: JSX.Element | JSX.Element[]
 }
 
 export type ZuiReactArrayComponentProps<
   Type extends ContainerType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = ZuiReactComponentBaseProps<Type, ID, UI> & {
   children: JSX.Element | JSX.Element[]
   addItem: (initialData?: any) => void
@@ -283,7 +283,7 @@ export type ZuiReactArrayComponentProps<
 export type ZuiReactControlComponentProps<
   Type extends BaseType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = ZuiReactComponentBaseProps<Type, ID, UI> & {
   description?: string
   required: boolean
@@ -293,7 +293,7 @@ export type ZuiReactControlComponentProps<
 export type ZuiReactComponentProps<
   Type extends BaseType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = Type extends 'object'
   ? ZuiReactObjectComponentProps<Type, ID, UI>
   : Type extends 'array'
@@ -305,10 +305,10 @@ export type ZuiReactComponentProps<
 export type ZuiReactComponent<
   Type extends BaseType,
   ID extends keyof UI[Type],
-  UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+  UI extends UIComponentDefinitions = EmptyComponentDefinitions,
 > = FC<ZuiReactComponentProps<Type, ID, UI>>
 
-export type ZuiComponentMap<UI extends UIComponentDefinitions = DefaultComponentDefinitions> = {
+export type ZuiComponentMap<UI extends UIComponentDefinitions = EmptyComponentDefinitions> = {
   [T in BaseType]: {
     [K in keyof UI[T]]: ZuiReactComponent<T, K, UI>
   } & {
@@ -325,10 +325,9 @@ export type ParseSchema<I> = I extends infer U
     : object
   : never
 
+export type Merge<A, B> = Omit<A, keyof B> & B
 export type MergeUIComponentDefinitions<T extends UIComponentDefinitions, U extends UIComponentDefinitions> = {
-  [Type in BaseType]: {
-    [K in keyof (T[Type] & U[Type])]: (T[Type] & U[Type])[K]
-  }
+  [Type in BaseType]: Merge<T[Type], U[Type]>
 }
 
 export type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T

zui/src/ui/ui.test.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { ZuiForm, ZuiFormProps, getSchemaType } from './index'
+import { ZuiForm, ZuiFormProps } from './index'
 import { resolveDiscriminatedSchema, resolveDiscriminator } from './hooks/useDiscriminator'
 import { ZuiComponentMap } from '../index'
 import { ObjectSchema, JSONSchema, ZuiReactComponentBaseProps, BaseType, UIComponentDefinitions } from './types'
 import { FC, PropsWithChildren, useState } from 'react'
 import { vi } from 'vitest'
 import { z as zui } from '../z/index'
 import { zuiKey } from './constants'
+import { getSchemaType } from './utils'
 
 const TestId = (type: BaseType, path: string[], subpath?: string) =>
   `${type}:${path.length > 0 ? path.join('.') : ''}${subpath ? `:${subpath}` : ''}`

zui/src/z/types/basetype/index.ts

@@ -4,7 +4,7 @@ import type {
   ZodKindToBaseType,
   JSONSchema,
   ParseSchema,
-  DefaultComponentDefinitions,
+  EmptyComponentDefinitions,
   ZuiExtensionObject,
 } from '../../../ui/types'
 import { zuiKey } from '../../../ui/constants'
@@ -526,7 +526,7 @@ export abstract class ZodType<Output = any, Def extends ZodTypeDef = ZodTypeDef,
    * The type of component to use to display the field and its options
    */
   displayAs<
-    UI extends UIComponentDefinitions = DefaultComponentDefinitions,
+    UI extends UIComponentDefinitions = EmptyComponentDefinitions,
     Type extends BaseType = ZodKindToBaseType<this['_def']>,
   >(options: ParseSchema<UI[Type][keyof UI[Type]]>): this {
     this._def[zuiKey] ??= {}

zui/src/z/types/error/index.ts

@@ -1,4 +1,5 @@
-import { TypeOf, ZodType, ZodFirstPartyTypeKind, defaultErrorMap, ZodParsedType, util, Primitive } from '../index'
+import { errorMap as defaultErrorMap } from './locales/en'
+import { TypeOf, ZodType, ZodFirstPartyTypeKind, ZodParsedType, util, Primitive } from '../index'
 
 type allKeys<T> = T extends any ? keyof T : never
 

zui/src/z/types/error/locales/en.ts

@@ -1,6 +1,6 @@
 import { type ZodErrorMap, util, ZodIssueCode, ZodParsedType } from '../../index'
 
-const errorMap: ZodErrorMap = (issue, _ctx) => {
+export const errorMap: ZodErrorMap = (issue, _ctx) => {
   let message: string
   switch (issue.code) {
     case ZodIssueCode.invalid_type: