| @@ -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,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 | |||
| @@ -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}`) | |||
| } | |||
| @@ -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, | |||