diff --git a/packages/design/src/Form/components/PageSet/PageSet.tsx b/packages/design/src/Form/components/PageSet/PageSet.tsx index 6ef51344..a91d3a0e 100644 --- a/packages/design/src/Form/components/PageSet/PageSet.tsx +++ b/packages/design/src/Form/components/PageSet/PageSet.tsx @@ -1,15 +1,13 @@ import React from 'react'; -import { useLocation } from 'react-router-dom'; import { type PageSetProps } from '@atj/forms'; import { type PatternComponent } from '../..'; -import { useFormManagerStore } from '../../../FormManager/store'; import { PageMenu } from './PageMenu'; +import { useRouteParams } from '../../../FormRouter/hooks'; const PageSet: PatternComponent = props => { - const location = useLocation(); - const routeParams = useFormManagerStore(state => state.session.routeParams); + const { routeParams, pathname } = useRouteParams(); return (
); } - const session = createFormSession(result.data); + + const session = createFormSession(result.data, queryString); return (
; export type PatternMap = Record; export type GetPattern = (form: Blueprint, id: PatternId) => Pattern; -type ParseUserInput = ( +export type ParseUserInput = ( pattern: Pattern, obj: unknown ) => Result; diff --git a/packages/forms/src/patterns/checkbox.ts b/packages/forms/src/patterns/checkbox.ts index 1f16730c..a9c64397 100644 --- a/packages/forms/src/patterns/checkbox.ts +++ b/packages/forms/src/patterns/checkbox.ts @@ -2,7 +2,7 @@ import * as z from 'zod'; import { type Pattern, type PatternConfig, validatePattern } from '../pattern'; import { type CheckboxProps } from '../components'; -import { getFormSessionValue } from '../session'; +import { getFormSessionError, getFormSessionValue } from '../session'; import { safeZodParseFormErrors, safeZodParseToFormError } from '../util/zod'; const configSchema = z.object({ @@ -32,6 +32,7 @@ export const checkboxConfig: PatternConfig = { createPrompt(_, session, pattern, options) { const extraAttributes: Record = {}; const sessionValue = getFormSessionValue(session, pattern.id); + //const sessionError = getFormSessionError(session, pattern.id); if (options.validate) { const isValidResult = validatePattern( checkboxConfig, diff --git a/packages/forms/src/patterns/input.ts b/packages/forms/src/patterns/input.ts deleted file mode 100644 index a2914263..00000000 --- a/packages/forms/src/patterns/input.ts +++ /dev/null @@ -1,64 +0,0 @@ -import * as z from 'zod'; - -import { type Pattern, type PatternConfig, validatePattern } from '../pattern'; -import { type TextInputProps } from '../components'; -import { getFormSessionValue } from '../session'; -import { safeZodParseFormErrors, safeZodParseToFormError } from '../util/zod'; -import { en as message } from '@atj/common/src/locales/en/app'; - -const configSchema = z.object({ - label: z.string().min(1, message.patterns.input.fieldLabelRequired), - initial: z.string().optional(), - required: z.boolean(), - maxLength: z.coerce.number(), -}); -export type InputPattern = Pattern>; - -const createSchema = (data: InputPattern['data']) => { - const schema = z.string().max(data.maxLength); - if (!data.required) { - return schema; - } - return schema.min(1, { message: 'This field is required' }); -}; - -type InputPatternOutput = z.infer>; - -export const inputConfig: PatternConfig = { - displayName: message.patterns.input.displayName, - initial: { - label: message.patterns.input.fieldLabel, - initial: '', - required: true, - maxLength: 128, - }, - parseUserInput: (pattern, obj) => { - return safeZodParseToFormError(createSchema(pattern['data']), obj); - }, - parseConfigData: obj => safeZodParseFormErrors(configSchema, obj), - getChildren() { - return []; - }, - createPrompt(_, session, pattern, options) { - const extraAttributes: Record = {}; - const sessionValue = getFormSessionValue(session, pattern.id); - if (options.validate) { - const isValidResult = validatePattern(inputConfig, pattern, sessionValue); - if (!isValidResult.success) { - extraAttributes['error'] = isValidResult.error; - } - } - return { - props: { - _patternId: pattern.id, - type: 'input', - inputId: pattern.id, - value: sessionValue, - label: pattern.data.label, - required: pattern.data.required, - ...extraAttributes, - } as TextInputProps, - children: [], - }; - }, -}; diff --git a/packages/forms/src/patterns/input/config.ts b/packages/forms/src/patterns/input/config.ts new file mode 100644 index 00000000..8ea08303 --- /dev/null +++ b/packages/forms/src/patterns/input/config.ts @@ -0,0 +1,20 @@ +import { z } from 'zod'; + +import { en as message } from '@atj/common/src/locales/en/app'; + +import { ParsePatternConfigData, Pattern } from '../../pattern'; +import { safeZodParseFormErrors } from '../../util/zod'; + +const configSchema = z.object({ + label: z.string().min(1, message.patterns.input.fieldLabelRequired), + initial: z.string().optional(), + required: z.boolean(), + maxLength: z.coerce.number(), +}); +export type InputConfigSchema = z.infer; + +export const parseConfigData: ParsePatternConfigData< + InputConfigSchema +> = obj => { + return safeZodParseFormErrors(configSchema, obj); +}; diff --git a/packages/forms/src/patterns/input/index.ts b/packages/forms/src/patterns/input/index.ts new file mode 100644 index 00000000..95ef112c --- /dev/null +++ b/packages/forms/src/patterns/input/index.ts @@ -0,0 +1,25 @@ +import { en as message } from '@atj/common/src/locales/en/app'; + +import { Pattern, type PatternConfig } from '../../pattern'; + +import { parseConfigData, type InputConfigSchema } from './config'; +import { createPrompt } from './prompt'; +import { type InputPatternOutput, parseUserInput } from './response'; + +export type InputPattern = Pattern; + +export const inputConfig: PatternConfig = { + displayName: message.patterns.input.displayName, + initial: { + label: message.patterns.input.fieldLabel, + initial: '', + required: true, + maxLength: 128, + }, + parseUserInput, + parseConfigData, + getChildren() { + return []; + }, + createPrompt, +}; diff --git a/packages/forms/src/patterns/input/prompt.ts b/packages/forms/src/patterns/input/prompt.ts new file mode 100644 index 00000000..696acc8e --- /dev/null +++ b/packages/forms/src/patterns/input/prompt.ts @@ -0,0 +1,35 @@ +import { type InputPattern, inputConfig } from '.'; +import { + type CreatePrompt, + type TextInputProps, + getFormSessionValue, + validatePattern, +} from '../..'; + +export const createPrompt: CreatePrompt = ( + _, + session, + pattern, + options +) => { + const extraAttributes: Record = {}; + const sessionValue = getFormSessionValue(session, pattern.id); + if (options.validate) { + const isValidResult = validatePattern(inputConfig, pattern, sessionValue); + if (!isValidResult.success) { + extraAttributes['error'] = isValidResult.error; + } + } + return { + props: { + _patternId: pattern.id, + type: 'input', + inputId: pattern.id, + value: sessionValue, + label: pattern.data.label, + required: pattern.data.required, + ...extraAttributes, + } as TextInputProps, + children: [], + }; +}; diff --git a/packages/forms/src/patterns/input/response.ts b/packages/forms/src/patterns/input/response.ts new file mode 100644 index 00000000..99c96852 --- /dev/null +++ b/packages/forms/src/patterns/input/response.ts @@ -0,0 +1,23 @@ +import { z } from 'zod'; + +import { ParseUserInput } from '../../pattern'; +import { safeZodParseToFormError } from '../../util/zod'; + +import { type InputPattern } from '.'; + +const createSchema = (data: InputPattern['data']) => { + const schema = z.string().max(data.maxLength); + if (!data.required) { + return schema; + } + return schema.min(1, { message: 'This field is required' }); +}; + +export type InputPatternOutput = z.infer>; + +export const parseUserInput: ParseUserInput< + InputPattern, + InputPatternOutput +> = (pattern, obj) => { + return safeZodParseToFormError(createSchema(pattern['data']), obj); +}; diff --git a/packages/forms/src/patterns/page-set/prompt.ts b/packages/forms/src/patterns/page-set/prompt.ts index fbdf26c7..7d18eeea 100644 --- a/packages/forms/src/patterns/page-set/prompt.ts +++ b/packages/forms/src/patterns/page-set/prompt.ts @@ -62,5 +62,5 @@ const getRouteParamSchema = (pattern: PageSetPattern) => { const parseRouteData = (pattern: PageSetPattern, routeParams?: RouteData) => { const schema = getRouteParamSchema(pattern); - return safeZodParseFormErrors(schema, routeParams); + return safeZodParseFormErrors(schema, routeParams || {}); }; diff --git a/packages/forms/src/patterns/page/prompt.ts b/packages/forms/src/patterns/page/prompt.ts index 6e39abd7..0af8930b 100644 --- a/packages/forms/src/patterns/page/prompt.ts +++ b/packages/forms/src/patterns/page/prompt.ts @@ -5,7 +5,7 @@ import { getPattern, } from '../..'; -import { PagePattern } from './config'; +import { type PagePattern } from './config'; export const createPrompt: CreatePrompt = ( config, diff --git a/packages/forms/src/session.ts b/packages/forms/src/session.ts index 3628b0ed..44f74f94 100644 --- a/packages/forms/src/session.ts +++ b/packages/forms/src/session.ts @@ -82,6 +82,13 @@ export const getFormSessionValue = ( return session.data.values[patternId]; }; +export const getFormSessionError = ( + session: FormSession, + patternId: PatternId +) => { + return session.data.errors[patternId]; +}; + export const updateSessionValue = ( session: FormSession, id: PatternId, diff --git a/packages/forms/src/util/zod.ts b/packages/forms/src/util/zod.ts index af5e11bd..41339bfe 100644 --- a/packages/forms/src/util/zod.ts +++ b/packages/forms/src/util/zod.ts @@ -2,7 +2,7 @@ import * as z from 'zod'; import * as r from '@atj/common'; -import { FormError, FormErrorMap, type FormErrors, type Pattern } from '..'; +import { type FormError, type FormErrors, type Pattern } from '..'; export const safeZodParse = ( schema: z.Schema,