Skip to content

feat(validation): add schema validation system with AJV support #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guynikan merged 1 commit into from
Jan 26, 2026
Merged

feat(validation): add schema validation system with AJV support #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.9.0",
"@mui/material": "^5.15.0",
"@schepta/adapter-react": "workspace:*",
"@schepta/core": "workspace:*",
Expand Down
95 changes: 26 additions & 69 deletions examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,20 @@
* Form with Formik
*
* Example component demonstrating how to use Schepta with Formik.
* This shows how to inject custom Formik components via the component registry.
* This shows how to inject custom Formik components via the component registry
* with AJV validation using createFormikValidator.
*/

import React, { useState } from 'react';
import React, { useState, useMemo } from 'react';
import { FormFactory } from '@schepta/factory-react';
import { createComponentSpec, FormSchema } from '@schepta/core';
import {
createComponentSpec,
FormSchema,
} from '@schepta/core';
import { FormikFieldWrapper } from '../formik/FormikFieldWrapper';
import { FormikFormContainer } from '../formik/FormikFormContainer';

// Import the same input components from basic-ui
import { InputText } from '../Inputs/InputText';
import { InputSelect } from '../Inputs/InputSelect';
import { InputCheckbox } from '../Inputs/InputCheckbox';
import { InputTextarea } from '../Inputs/InputTextarea';
import { InputNumber } from '../Inputs/InputNumber';
import { InputDate } from '../Inputs/InputDate';

/**
* Formik-specific component registry.
* Registers the Formik FieldWrapper and FormContainer to use
* Formik for form state management.
*/
const formikComponents = {
// Register Formik FieldWrapper - this makes all fields use Formik's context
FieldWrapper: createComponentSpec({
id: 'FieldWrapper',
type: 'field-wrapper',
factory: () => FormikFieldWrapper,
}),
// Register Formik FormContainer - this provides the Formik context
FormContainer: createComponentSpec({
id: 'FormContainer',
type: 'FormContainer',
factory: () => FormikFormContainer,
}),
// Standard input components (same as basic-ui)
InputText: createComponentSpec({
id: 'InputText',
type: 'field',
factory: () => InputText,
}),
InputSelect: createComponentSpec({
id: 'InputSelect',
type: 'field',
factory: () => InputSelect,
}),
InputCheckbox: createComponentSpec({
id: 'InputCheckbox',
type: 'field',
factory: () => InputCheckbox,
}),
InputTextarea: createComponentSpec({
id: 'InputTextarea',
type: 'field',
factory: () => InputTextarea,
}),
InputNumber: createComponentSpec({
id: 'InputNumber',
type: 'field',
factory: () => InputNumber,
}),
InputDate: createComponentSpec({
id: 'InputDate',
type: 'field',
factory: () => InputDate,
}),
InputPhone: createComponentSpec({
id: 'InputPhone',
type: 'field',
factory: () => InputText,
defaultProps: { type: 'tel' },
}),
};
import { components } from '../ComponentRegistry';

interface FormWithFormikProps {
schema: FormSchema;
Expand All @@ -83,12 +24,28 @@ interface FormWithFormikProps {
/**
* FormWithFormik Component
*
* Renders a form using Formik for state management.
* Renders a form using Formik for state management with AJV validation.
* Demonstrates how to integrate external form libraries with Schepta.
*/
export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
const [submittedValues, setSubmittedValues] = useState<Record<string, any> | null>(null);

const formikComponents = useMemo(() => ({
// Register Formik FieldWrapper - this makes all fields use Formik's context
FieldWrapper: createComponentSpec({
id: 'FieldWrapper',
type: 'field-wrapper',
factory: () => FormikFieldWrapper,
}),
// Register Formik FormContainer with validation - this provides the Formik context
FormContainer: createComponentSpec({
id: 'FormContainer',
type: 'FormContainer',
factory: () => FormikFormContainer,
}),
...components,
}), []);

const handleSubmit = (values: Record<string, any>) => {
console.log('Form submitted (Formik):', values);
setSubmittedValues(values);
Expand All @@ -110,7 +67,7 @@ export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
borderRadius: '4px',
fontSize: '14px',
}}>
This form uses <strong>Formik</strong> for state management.
This form uses <strong>Formik</strong> with <strong>AJV validation</strong>.
The FieldWrapper and FormContainer are custom Formik implementations.
</div>
<FormFactory
Expand Down
94 changes: 24 additions & 70 deletions examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,17 @@
* Form with React Hook Form
*
* Example component demonstrating how to use Schepta with react-hook-form.
* This shows how to inject custom RHF components via the component registry.
* This shows how to inject custom RHF components via the component registry
* with AJV validation using @hookform/resolvers/ajv.
*/

import React, { useState } from 'react';
import React, { useState, useMemo } from 'react';
import { FormFactory } from '@schepta/factory-react';
import { createComponentSpec, FormSchema } from '@schepta/core';
import { RHFFieldWrapper } from '../rhf/RHFFieldWrapper';
import { RHFFormContainer } from '../rhf/RHFFormContainer';
import { RHFFieldWrapper } from '../rhf/RHFFieldWrapper';

// Import the same input components from basic-ui
import { InputText } from '../Inputs/InputText';
import { InputSelect } from '../Inputs/InputSelect';
import { InputCheckbox } from '../Inputs/InputCheckbox';
import { InputTextarea } from '../Inputs/InputTextarea';
import { InputNumber } from '../Inputs/InputNumber';
import { InputDate } from '../Inputs/InputDate';

/**
* RHF-specific component registry.
* Registers the RHF FieldWrapper and FormContainer to use
* react-hook-form for form state management.
*/
const rhfComponents = {
// Register RHF FieldWrapper - this makes all fields use RHF's Controller
FieldWrapper: createComponentSpec({
id: 'FieldWrapper',
type: 'field-wrapper',
factory: () => RHFFieldWrapper,
}),
// Register RHF FormContainer - this provides the FormProvider context
FormContainer: createComponentSpec({
id: 'FormContainer',
type: 'FormContainer',
factory: () => RHFFormContainer,
}),
// Standard input components (same as basic-ui)
InputText: createComponentSpec({
id: 'InputText',
type: 'field',
factory: () => InputText,
}),
InputSelect: createComponentSpec({
id: 'InputSelect',
type: 'field',
factory: () => InputSelect,
}),
InputCheckbox: createComponentSpec({
id: 'InputCheckbox',
type: 'field',
factory: () => InputCheckbox,
}),
InputTextarea: createComponentSpec({
id: 'InputTextarea',
type: 'field',
factory: () => InputTextarea,
}),
InputNumber: createComponentSpec({
id: 'InputNumber',
type: 'field',
factory: () => InputNumber,
}),
InputDate: createComponentSpec({
id: 'InputDate',
type: 'field',
factory: () => InputDate,
}),
InputPhone: createComponentSpec({
id: 'InputPhone',
type: 'field',
factory: () => InputText,
defaultProps: { type: 'tel' },
}),
};
import { components } from '../ComponentRegistry';

interface FormWithRHFProps {
schema: FormSchema;
Expand All @@ -83,12 +21,28 @@ interface FormWithRHFProps {
/**
* FormWithRHF Component
*
* Renders a form using react-hook-form for state management.
* Renders a form using react-hook-form for state management with AJV validation.
* Demonstrates how to integrate external form libraries with Schepta.
*/
export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
const [submittedValues, setSubmittedValues] = useState<Record<string, any> | null>(null);

// Create RHF components with validation config
const rhfComponents = useMemo(() => ({
// Register RHF FieldWrapper - this makes all fields use RHF's Controller
FieldWrapper: createComponentSpec({
id: 'FieldWrapper',
type: 'field-wrapper',
factory: () => RHFFieldWrapper,
}),
// Register RHF FormContainer with validation - this provides the FormProvider context
FormContainer: createComponentSpec({
id: 'FormContainer',
type: 'FormContainer',
factory: () => RHFFormContainer,
}),
}), []);

const handleSubmit = (values: Record<string, any>) => {
console.log('Form submitted (RHF):', values);
setSubmittedValues(values);
Expand All @@ -110,12 +64,12 @@ export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
borderRadius: '4px',
fontSize: '14px',
}}>
This form uses <strong>react-hook-form</strong> for state management.
This form uses <strong>react-hook-form</strong> with <strong>AJV validation</strong>.
The FieldWrapper and FormContainer are custom RHF implementations.
</div>
<FormFactory
schema={schema}
components={rhfComponents}
components={{...components, ...rhfComponents}}
onSubmit={handleSubmit}
debug={true}
/>
Expand Down
13 changes: 10 additions & 3 deletions examples/react/src/basic-ui/components/Forms/NativeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import React, { useState } from "react";
import React, { useState, useMemo } from "react";
import { FormFactory } from '@schepta/factory-react';
import { FormSchema } from "@schepta/core";
import { FormSchema, generateValidationSchema } from "@schepta/core";

interface FormProps {
schema: FormSchema;
initialValues?: Record<string, any>;
}

export const NativeForm = ({ schema }: FormProps) => {
export const NativeForm = ({ schema, initialValues: externalInitialValues }: FormProps) => {
const [submittedValues, setSubmittedValues] = useState<Record<string, any> | null>(null);

const initialValues = useMemo(() => {
const { initialValues: schemaInitialValues } = generateValidationSchema(schema);
return { ...schemaInitialValues, ...externalInitialValues };
}, [schema, externalInitialValues]);

const handleSubmit = (values: Record<string, any>) => {
console.log('Form submitted:', values);
setSubmittedValues(values);
Expand All @@ -25,6 +31,7 @@ export const NativeForm = ({ schema }: FormProps) => {
>
<FormFactory
schema={schema}
initialValues={initialValues}
onSubmit={handleSubmit}
debug={true}
/>
Expand Down
Loading