Bladeren bron

feat: Replace BaseVarType with BaseFieldType for consistent field type usage across components

tags/2.0.0-beta.1
twwu 6 maanden geleden
bovenliggende
commit
8367ae85de

+ 5
- 5
web/app/components/base/form/form-scenarios/base/field.tsx Bestand weergeven

@@ -1,5 +1,5 @@
import React, { useMemo } from 'react'
import { type BaseConfiguration, BaseVarType } from './types'
import { type BaseConfiguration, BaseFieldType } from './types'
import { withForm } from '../..'
import { useStore } from '@tanstack/react-form'

@@ -36,7 +36,7 @@ const BaseField = <T,>({
if (!isAllConditionsMet)
return <></>

if (type === BaseVarType.textInput) {
if (type === BaseFieldType.textInput) {
return (
<form.AppField
name={variable}
@@ -55,7 +55,7 @@ const BaseField = <T,>({
)
}

if (type === BaseVarType.numberInput) {
if (type === BaseFieldType.numberInput) {
return (
<form.AppField
name={variable}
@@ -76,7 +76,7 @@ const BaseField = <T,>({
)
}

if (type === BaseVarType.checkbox) {
if (type === BaseFieldType.checkbox) {
return (
<form.AppField
name={variable}
@@ -89,7 +89,7 @@ const BaseField = <T,>({
)
}

if (type === BaseVarType.select) {
if (type === BaseFieldType.select) {
return (
<form.AppField
name={variable}

+ 2
- 2
web/app/components/base/form/form-scenarios/base/types.ts Bestand weergeven

@@ -2,7 +2,7 @@ import type { DeepKeys } from '@tanstack/react-form'
import type { FormType } from '../..'
import type { Option } from '../../../select/pure'

export enum BaseVarType {
export enum BaseFieldType {
textInput = 'textInput',
numberInput = 'numberInput',
checkbox = 'checkbox',
@@ -31,7 +31,7 @@ export type BaseConfiguration<T> = {
required: boolean
showOptional?: boolean // show optional label
showConditions: ShowCondition<T>[] // Show this field only when all conditions are met
type: BaseVarType
type: BaseFieldType
tooltip?: string // Tooltip for this field
} & NumberConfiguration & SelectConfiguration


+ 9
- 9
web/app/components/base/form/form-scenarios/base/utils.ts Bestand weergeven

@@ -1,6 +1,6 @@
import type { ZodSchema, ZodString } from 'zod'
import { z } from 'zod'
import { type BaseConfiguration, BaseVarType } from './types'
import { type BaseConfiguration, BaseFieldType } from './types'

export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
const shape: Record<string, ZodSchema> = {}
@@ -9,16 +9,16 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
let zodType

switch (field.type) {
case BaseVarType.textInput:
case BaseFieldType.textInput:
zodType = z.string()
break
case BaseVarType.numberInput:
case BaseFieldType.numberInput:
zodType = z.number()
break
case BaseVarType.checkbox:
case BaseFieldType.checkbox:
zodType = z.boolean()
break
case BaseVarType.select:
case BaseFieldType.select:
zodType = z.string()
break
default:
@@ -27,7 +27,7 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
}

if (field.required) {
if ([BaseVarType.textInput].includes(field.type))
if ([BaseFieldType.textInput].includes(field.type))
zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
}
else {
@@ -35,17 +35,17 @@ export const generateZodSchema = <T>(fields: BaseConfiguration<T>[]) => {
}

if (field.maxLength) {
if ([BaseVarType.textInput].includes(field.type))
if ([BaseFieldType.textInput].includes(field.type))
zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
}

if (field.min) {
if ([BaseVarType.numberInput].includes(field.type))
if ([BaseFieldType.numberInput].includes(field.type))
zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`)
}

if (field.max) {
if ([BaseVarType.numberInput].includes(field.type))
if ([BaseFieldType.numberInput].includes(field.type))
zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`)
}


+ 6
- 6
web/app/dev-preview/page.tsx Bestand weergeven

@@ -1,6 +1,6 @@
'use client'
import BaseForm from '../components/base/form/form-scenarios/base'
import { BaseVarType } from '../components/base/form/form-scenarios/base/types'
import { BaseFieldType } from '../components/base/form/form-scenarios/base/types'

export default function Page() {
return (
@@ -16,21 +16,21 @@ export default function Page() {
}}
configurations={[
{
type: BaseVarType.textInput,
type: BaseFieldType.textInput,
variable: 'variable',
label: 'Variable',
required: true,
showConditions: [],
},
{
type: BaseVarType.textInput,
type: BaseFieldType.textInput,
variable: 'label',
label: 'Label',
required: true,
showConditions: [],
},
{
type: BaseVarType.numberInput,
type: BaseFieldType.numberInput,
variable: 'maxLength',
label: 'Max Length',
required: true,
@@ -39,14 +39,14 @@ export default function Page() {
min: 1,
},
{
type: BaseVarType.checkbox,
type: BaseFieldType.checkbox,
variable: 'required',
label: 'Required',
required: true,
showConditions: [],
},
{
type: BaseVarType.select,
type: BaseFieldType.select,
variable: 'type',
label: 'Type',
required: true,

Laden…
Annuleren
Opslaan