npm - @idem.agency/form-builder - Versions diffs - 0.0.12 → 0.0.13 - Mend

@idem.agency/form-builder 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/package.json +5 -2
package/CHANGELOG.md +0 -16
package/eslint.config.js +0 -23
package/public/index.html +0 -13
package/public/main.tsx +0 -97
package/src/app/index.test.tsx +0 -137
package/src/app/index.tsx +0 -34
package/src/app/test.css +0 -1
package/src/entity/dynamicBuilder/element.tsx +0 -71
package/src/entity/dynamicBuilder/index.tsx +0 -21
package/src/entity/dynamicBuilder/model/createBuilderContext.tsx +0 -52
package/src/entity/dynamicBuilder/model/index.ts +0 -7
package/src/entity/inputs/index.ts +0 -2
package/src/entity/inputs/ui/group/index.test.tsx +0 -46
package/src/entity/inputs/ui/group/index.tsx +0 -26
package/src/entity/inputs/ui/input/index.test.tsx +0 -73
package/src/entity/inputs/ui/input/index.tsx +0 -31
package/src/plugins/validation/index.ts +0 -39
package/src/plugins/validation/rules/confirm.test.ts +0 -23
package/src/plugins/validation/rules/confirm.ts +0 -11
package/src/plugins/validation/rules/email.test.ts +0 -20
package/src/plugins/validation/rules/email.ts +0 -10
package/src/plugins/validation/rules/index.ts +0 -5
package/src/plugins/validation/rules/required.test.ts +0 -24
package/src/plugins/validation/rules/required.ts +0 -9
package/src/plugins/validation/types/index.ts +0 -7
package/src/plugins/validation/validation.test.ts +0 -69
package/src/plugins/validation/validation.ts +0 -57
package/src/plugins/visibility/core.ts +0 -56
package/src/plugins/visibility/index.ts +0 -25
package/src/plugins/visibility/types.ts +0 -20
package/src/shared/hook/useUpdateEffect.tsx +0 -23
package/src/shared/model/index.ts +0 -12
package/src/shared/model/plugins/EventBus.ts +0 -15
package/src/shared/model/plugins/FieldRegistry.ts +0 -15
package/src/shared/model/plugins/HookRegistry.ts +0 -21
package/src/shared/model/plugins/MiddlewareRegistry.ts +0 -17
package/src/shared/model/plugins/PipelineRegistry.ts +0 -73
package/src/shared/model/plugins/PluginManager.ts +0 -84
package/src/shared/model/plugins/context.tsx +0 -10
package/src/shared/model/plugins/hooks.ts +0 -22
package/src/shared/model/plugins/index.ts +0 -23
package/src/shared/model/plugins/types.ts +0 -99
package/src/shared/model/store/createStoreContext.tsx +0 -70
package/src/shared/model/store/index.test.tsx +0 -113
package/src/shared/model/store/index.tsx +0 -96
package/src/shared/model/store/store.test.ts +0 -64
package/src/shared/model/store/store.ts +0 -38
package/src/shared/test-utils.tsx +0 -33
package/src/shared/types/common.ts +0 -45
package/src/shared/utils.test.ts +0 -55
package/src/shared/utils.ts +0 -36
package/src/widgets/form/form.tsx +0 -59
package/tsconfig.json +0 -24
package/tsdown.config.ts +0 -10
package/vite.config.ts +0 -12

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@idem.agency/form-builder",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Построитель форм",
   "main": "src/index.ts",
   "author": "idem.agency",
@@ -23,6 +23,9 @@
     "react-dom": "19.2.3",
     "zod": "4.3.6"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@eslint/js": "9.39.2",
     "@tailwindcss/vite": "4.1.18",
@@ -43,5 +46,5 @@
     "vite-tsconfig-paths": "6.0.5",
     "vitest": "4.0.17"
   },
-  "gitHead": "47f4057163e739a39cfd1616bfb6e720bdb7f592"
+  "gitHead": "700ffe97c5801f382c16129af4ecb85fd476e030"
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,16 +0,0 @@
-# Change Log
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-## [0.0.12](https://gitlab.idem.agency/idem-project/front-package/compare/@idem.agency/form-builder@0.0.11...@idem.agency/form-builder@0.0.12) (2026-03-16)
-**Note:** Version bump only for package @idem.agency/form-builder
-## [0.0.11](https://gitlab.idem.agency/idem-project/front-package/compare/@idem.agency/form-builder@0.0.10...@idem.agency/form-builder@0.0.11) (2026-02-09)
-**Note:** Version bump only for package @idem.agency/form-builder

package/eslint.config.js DELETED Viewed

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/public/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Виджет для генерации форм</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="main.tsx"></script>
-  </body>
-</html>

package/public/main.tsx DELETED Viewed

@@ -1,97 +0,0 @@
-import {StrictMode} from 'react'
-import {createRoot} from 'react-dom/client'
-import {plugins, FormBuilder, inputs} from "@/index";
-import type {FormBuilderRef, FormElementRegistry, FormFieldConfig} from "@/index";
-import {useRef} from "react";
-function Debug() {
-  const fields: FormElementRegistry = {
-    text: inputs.TextField,
-    group: inputs.FormGroup,
-  }
-  const layout: FormFieldConfig[] = [
-    {
-      name: 'username',
-      label: 'Имя пользователя',
-      type: 'text',
-      placeholder: 'Введите ваше имя',
-      defaultValue: 'Мое имя',
-      validation: ['required', 'confirm:personal.username_2,Имя 2 пользователя'],
-      visibility: {
-        logic: 'and',
-        rules: [
-          {
-            field: 'personal.username_2',
-            operator: 'in',
-            value: ['Alex']
-          },
-        ]
-      }
-    },
-    {
-      name: 'personal',
-      label: 'Группа',
-      type: 'group',
-      variant: 'col',
-      fields: [
-        {
-          name: 'username_2',
-          label: 'Имя 2 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-        {
-          name: 'username_3',
-          label: 'Имя 3 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-        {
-          name: 'username_4',
-          label: 'Имя 4 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-      ],
-    },
-  ];
-  const ref = useRef<FormBuilderRef>(null);
-  const validation = plugins.createValidationPlugin();
-  const visibility = plugins.createVisibilityPlugin();
-  return <>
-    <FormBuilder plugins={[validation, visibility]} ref={ref} layout={layout} onChange={(e) => {
-      console.log(e);
-    }} onSubmit={(e) => {
-      console.log(e);
-    }} fields={fields} formData={{
-      personal: {
-        username_2: "Alex"
-      }
-    }}></FormBuilder>
-    <button onClick={() => {
-      ref.current?.reset();
-    }}>Сбросить
-    </button>
-    <button onClick={() => {
-      ref.current?.submit();
-    }}>Отправить
-    </button>
-  </>
-}
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Debug/>
-  </StrictMode>,
-)

package/src/app/index.test.tsx DELETED Viewed

@@ -1,137 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, fireEvent, act } from '@testing-library/react'
-import { createRef } from 'react'
-import { FormBuilder } from './index'
-import type { FormBuilderRef, FormElementProps } from '@/shared/types/common'
-const TextField = ({ field, value, onChange }: FormElementProps) => (
-  <input
-    data-testid={`field-${field.name}`}
-    name={field.name}
-    value={value || ''}
-    onChange={e => onChange(e.target.value)}
-  />
-)
-const fields = { text: TextField }
-const layout = [
-  { type: 'text', name: 'username', label: 'Username' },
-]
-describe('FormBuilder (integration)', () => {
-  it('renders fields from layout via registry', () => {
-    const { getByTestId } = render(
-      <FormBuilder layout={layout} fields={fields} />
-    )
-    expect(getByTestId('field-username')).toBeTruthy()
-  })
-  it('calls onChange when a field value changes', async () => {
-    const onChange = vi.fn()
-    const { getByTestId } = render(
-      <FormBuilder layout={layout} fields={fields} onChange={onChange} />
-    )
-    await act(async () => {
-      fireEvent.change(getByTestId('field-username'), { target: { value: 'John' } })
-    })
-    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ username: 'John' }))
-  })
-  it('ref.reset() clears the form', async () => {
-    const ref = createRef<FormBuilderRef>()
-    const { getByTestId } = render(
-      <FormBuilder ref={ref} layout={layout} fields={fields} />
-    )
-    await act(async () => {
-      fireEvent.change(getByTestId('field-username'), { target: { value: 'John' } })
-    })
-    expect((getByTestId('field-username') as HTMLInputElement).value).toBe('John')
-    act(() => ref.current!.reset())
-    expect((getByTestId('field-username') as HTMLInputElement).value).toBe('')
-  })
-  it('ref.submit() calls onSubmit with formData when valid', async () => {
-    const onSubmit = vi.fn()
-    const ref = createRef<FormBuilderRef>()
-    render(
-      <FormBuilder ref={ref} layout={layout} fields={fields} onSubmit={onSubmit} />
-    )
-    await act(async () => { await ref.current!.submit() })
-    expect(onSubmit).toHaveBeenCalledWith(expect.any(Object))
-  })
-  it('ref.submit() does NOT call onSubmit when validation fails and sets errors', async () => {
-    const onSubmit = vi.fn()
-    const ref = createRef<FormBuilderRef>()
-    const layoutWithValidation = [
-      { type: 'text', name: 'username', label: 'Username', validation: ['required'] },
-    ]
-    render(
-      <FormBuilder ref={ref} layout={layoutWithValidation} fields={fields} onSubmit={onSubmit} />
-    )
-    await act(async () => { await ref.current!.submit() })
-    expect(onSubmit).not.toHaveBeenCalled()
-    const errors = ref.current!.errors()
-    expect(errors.username).toBeDefined()
-  })
-  it('ref.errors() returns current errors', async () => {
-    const ref = createRef<FormBuilderRef>()
-    render(
-      <FormBuilder ref={ref} layout={layout} fields={fields} />
-    )
-    const errors = ref.current!.errors()
-    expect(errors).toEqual({})
-  })
-  it('formData prop initializes the form with initial values', () => {
-    const { getByTestId } = render(
-      <FormBuilder
-        layout={layout}
-        fields={fields}
-        formData={{ username: 'InitialUser' }}
-      />
-    )
-    expect((getByTestId('field-username') as HTMLInputElement).value).toBe('InitialUser')
-  })
-  it('plugins can intercept field:change pipeline', async () => {
-    const stages: string[] = []
-    const testPlugin = {
-      name: 'test',
-      install(ctx: any) {
-        ctx.pipeline.use('field:change', (data: any, next: any) => {
-          stages.push('plugin')
-          return next({ ...data, value: data.value.toUpperCase() })
-        })
-      },
-    }
-    const onChange = vi.fn()
-    const { getByTestId } = render(
-      <FormBuilder layout={layout} fields={fields} onChange={onChange} plugins={[testPlugin]} />
-    )
-    await act(async () => {
-      fireEvent.change(getByTestId('field-username'), { target: { value: 'john' } })
-    })
-    expect(stages).toContain('plugin')
-    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ username: 'JOHN' }))
-  })
-  it('plugins can tap form:submit:before hook', async () => {
-    const hookCalled = vi.fn()
-    const testPlugin = {
-      name: 'test',
-      install(ctx: any) {
-        ctx.events.tap('form:submit:before', hookCalled)
-      },
-    }
-    const onSubmit = vi.fn()
-    const ref = createRef<FormBuilderRef>()
-    render(
-      <FormBuilder ref={ref} layout={layout} fields={fields} onSubmit={onSubmit} plugins={[testPlugin]} />
-    )
-    await act(async () => { await ref.current!.submit() })
-    expect(hookCalled).toHaveBeenCalled()
-  })
-})

package/src/app/index.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-import type { FormBuilderRef, TFormBuilder } from "../shared/types/common";
-import { forwardRef, useEffect, useMemo } from "react";
-import { FormStoreProvider } from "@/shared/model/store";
-import { Form } from "@/widgets/form/form";
-import { PluginManager } from '@/shared/model/plugins/PluginManager';
-import { PluginSystemContext } from '@/shared/model/plugins/context';
-import { createValidationPlugin } from '@/plugins/validation';
-export const FormBuilder = forwardRef<FormBuilderRef, TFormBuilder>((props, ref) => {
-  const { formData, ...innerProps } = props;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const pluginManager = useMemo(() => {
-    const pm = new PluginManager([createValidationPlugin(props.validator), ...(props.plugins ?? [])]);
-    pm.install();
-    return pm;
-  }, []);
-  useEffect(() => {
-    // Re-install after Strict Mode's simulated unmount clears subscriptions
-    pluginManager.install();
-    return () => pluginManager.uninstall();
-  }, [pluginManager]);
-  return (
-    <PluginSystemContext.Provider value={pluginManager}>
-      <FormStoreProvider formData={formData}>
-        <Form {...innerProps} ref={ref} />
-      </FormStoreProvider>
-    </PluginSystemContext.Provider>
-  );
-});
-export default FormBuilder;

package/src/app/test.css DELETED Viewed

	@@ -1 +0,0 @@
1	- @import "tailwindcss";

package/src/entity/dynamicBuilder/element.tsx DELETED Viewed

@@ -1,71 +0,0 @@
-import { useEffect } from 'react';
-import { useFormStore, useFormDispatch, useFormStoreInstance } from "@/shared/model/store";
-import { getNestedValue } from "@/shared/utils";
-import type { FormFieldConfig, FormElementComponent } from "@/shared/types/common";
-import { useCallEvents, useRunPipeline, useRunPipelineSync } from '@/shared/model/plugins/hooks';
-type BuilderElementProps = {
-  element: FormElementComponent;
-  field: FormFieldConfig;
-  path: string;
-};
-export const DynamicBuilderElement = (props: BuilderElementProps) => {
-  const Element = props.element;
-  const field = props.field;
-  const currentFieldPath = props.path ? `${props.path}.${field.name}` : field.name;
-  const value = useFormStore((s) => getNestedValue(s.formData, currentFieldPath));
-  const errors = useFormStore((s) => s.errors[currentFieldPath]);
-  const dispatch = useFormDispatch();
-  const store = useFormStoreInstance();
-  const callEvents = useCallEvents();
-  const runPipeline = useRunPipeline();
-  const runPipelineSync = useRunPipelineSync();
-  useEffect(() => {
-    callEvents('field:register', { path: currentFieldPath, field });
-  }, [currentFieldPath]);
-  const visible = useFormStore((s) =>
-    runPipelineSync('field:visible', {
-      visible: true,
-      field,
-      path: currentFieldPath,
-      formData: s.formData,
-    }).visible
-  );
-  if (!visible) return null;
-  return (
-    <Element
-      field={{ ...field }}
-      path={currentFieldPath}
-      value={value}
-      errors={errors}
-      onChange={async (value: any) => {
-        const data = store.getState().formData;
-        const { value: finalValue, errors } = await runPipeline('field:change', {
-          value,
-          field,
-          path: currentFieldPath,
-          formData: data,
-          errors: [],
-        });
-        dispatch({
-          type: 'setFieldValue',
-          path: currentFieldPath,
-          value: finalValue,
-          errors,
-        });
-        await callEvents('field:change', {
-          value: finalValue,
-          prevValue: value,
-          field,
-          path: currentFieldPath,
-          formData: store.getState().formData,
-        });
-      }}
-    />
-  );
-};

package/src/entity/dynamicBuilder/index.tsx DELETED Viewed

@@ -1,21 +0,0 @@
-import type {TDynamicBuilder} from "@/shared/types/common";
-import {DynamicBuilderElement} from "./element";
-import { useFields } from "@/entity/dynamicBuilder/model";
-export const DynamicBuilder: TDynamicBuilder = (props) => {
-  const path = props.path ?? '';
-  const fields = useFields();
-  return props.layout.map((field, index) => {
-    const FormElement = fields[field.type];
-    if (!FormElement) {
-      console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);
-      return null;
-    }
-    return <DynamicBuilderElement key={`${field.name}-${index}`} element={FormElement} path={path} field={field}/>
-  })
-}
-export * from './model';

package/src/entity/dynamicBuilder/model/createBuilderContext.tsx DELETED Viewed

@@ -1,52 +0,0 @@
-import React, {createContext, type ReactNode, useCallback, useContext} from "react";
-import {DynamicBuilder} from "@/entity/dynamicBuilder";
-import type {FormElementRegistry} from "~/src";
-export type TFnBuilder = (layout: any, path: string | undefined, children?: ReactNode) => ReactNode;
-export function createBuilderContext() {
-  const BuilderContext = createContext<{
-    builder: TFnBuilder,
-    fields: FormElementRegistry,
-  } | null>(null);
-  const Provider: React.FC<{ children: React.ReactNode, fields: FormElementRegistry }> = ({
-                                                                            fields,
-                                                                            children
-                                                                          }) => {
-    const builder = useCallback<TFnBuilder>((layout, path, children) => {
-      return <DynamicBuilder layout={layout} path={path}>{children}</DynamicBuilder>
-    }, [fields]);
-    return (
-      <BuilderContext.Provider value={{builder, fields}}>
-        {children}
-      </BuilderContext.Provider>
-    );
-  };
-  function useBuilder(): TFnBuilder {
-    const store = useContext(BuilderContext);
-    if (!store) {
-      throw new Error("StoreProvider missing");
-    }
-    return store.builder
-  }
-  function useFields(): FormElementRegistry {
-    const store = useContext(BuilderContext);
-    if (!store) {
-      throw new Error("StoreProvider missing");
-    }
-    return store.fields
-  }
-  return {
-    Provider,
-    useBuilder,
-    useFields,
-  };
-}

package/src/entity/dynamicBuilder/model/index.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import { createBuilderContext } from "./createBuilderContext";
-export const {
-  Provider: BuilderProvider,
-  useBuilder,
-  useFields,
-} = createBuilderContext();

package/src/entity/inputs/index.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export * from './ui/input/index'
2	- export * from './ui/group/index'

package/src/entity/inputs/ui/group/index.test.tsx DELETED Viewed

@@ -1,46 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import React from 'react'
-import { renderWithProviders } from '@/shared/test-utils'
-import { FormGroup } from './index'
-import type { FormGroupConfig } from './index'
-const baseGroupField: FormGroupConfig = {
-  type: 'group',
-  name: 'myGroup',
-  label: 'My Group',
-  fields: [],
-}
-describe('FormGroup', () => {
-  it('renders the label', () => {
-    const { getByText } = renderWithProviders(
-      <FormGroup field={baseGroupField} path="myGroup" value={undefined} onChange={() => {}} />
-    )
-    expect(getByText('My Group')).toBeTruthy()
-  })
-  it('applies flex-col by default', () => {
-    const { container } = renderWithProviders(
-      <FormGroup field={baseGroupField} path="myGroup" value={undefined} onChange={() => {}} />
-    )
-    const inner = container.querySelector('.flex-col')
-    expect(inner).toBeTruthy()
-  })
-  it('applies flex-row when variant is row', () => {
-    const rowField: FormGroupConfig = { ...baseGroupField, variant: 'row' }
-    const { container } = renderWithProviders(
-      <FormGroup field={rowField} path="myGroup" value={undefined} onChange={() => {}} />
-    )
-    const inner = container.querySelector('.flex-row')
-    expect(inner).toBeTruthy()
-  })
-  it('returns null when fields is not an array', () => {
-    const invalidField = { type: 'group', name: 'g', label: 'G' } as any
-    const { container } = renderWithProviders(
-      <FormGroup field={invalidField} path="g" value={undefined} onChange={() => {}} />
-    )
-    expect(container.firstChild).toBeNull()
-  })
-})

package/src/entity/inputs/ui/group/index.tsx DELETED Viewed

@@ -1,26 +0,0 @@
-import type {FormElementProps, FormFieldBase, FormFieldConfig, RC} from "../../../../shared/types/common.ts";
-import clsx from "clsx";
-import {useBuilder} from "@/entity/dynamicBuilder";
-export type FormGroupConfig = FormFieldBase & { variant?: 'row' | 'col', fields: FormFieldConfig[] };
-function isGroupConfig(field: FormFieldConfig): field is FormGroupConfig {
-  return Array.isArray(field.fields);
-}
-export const FormGroup: RC<FormElementProps<FormGroupConfig>> = ({field, path}) => {
-  if (!isGroupConfig(field)) {
-    return null;
-  }
-  const Builder = useBuilder()(field.fields, path);
-  const variant = field.variant ?? 'col';
-  const className = variant == 'col' ? 'flex-col' : 'flex-row';
-  return <div>
-    <div>{field.label}</div>
-    <div className={clsx(className, 'flex')}>
-      {Builder}
-    </div>
-  </div>;
-};

package/src/entity/inputs/ui/input/index.test.tsx DELETED Viewed

@@ -1,73 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, fireEvent } from '@testing-library/react'
-import React from 'react'
-import { TextField } from './index'
-const baseField = { type: 'text' as const, name: 'username', label: 'Username' }
-describe('TextField', () => {
-  it('renders label and input', () => {
-    const { getByText, getByRole } = render(
-      <TextField field={baseField} path="username" value="" onChange={() => {}} />
-    )
-    expect(getByText('Username:')).toBeTruthy()
-    expect(getByRole('textbox')).toBeTruthy()
-  })
-  it('displays the passed value', () => {
-    const { getByRole } = render(
-      <TextField field={baseField} path="username" value="John" onChange={() => {}} />
-    )
-    expect((getByRole('textbox') as HTMLInputElement).value).toBe('John')
-  })
-  it('calls onChange when input changes', () => {
-    const onChange = vi.fn()
-    const { getByRole } = render(
-      <TextField field={baseField} path="username" value="" onChange={onChange} />
-    )
-    fireEvent.change(getByRole('textbox'), { target: { value: 'Jane' } })
-    expect(onChange).toHaveBeenCalledWith('Jane')
-  })
-  it('shows error message and red border when errors provided', () => {
-    const { getByText, getByRole } = render(
-      <TextField
-        field={baseField}
-        path="username"
-        value=""
-        errors={{ required: 'Field is required' }}
-        onChange={() => {}}
-      />
-    )
-    expect(getByText('Field is required')).toBeTruthy()
-    const input = getByRole('textbox') as HTMLInputElement
-    expect(input.style.borderColor).toBe('red')
-  })
-  it('returns null for invalid field type', () => {
-    const invalidField = { type: 'group' as any, name: 'g', label: 'G' }
-    const { container } = render(
-      <TextField field={invalidField} path="g" value="" onChange={() => {}} />
-    )
-    expect(container.firstChild).toBeNull()
-  })
-  it('works with email type', () => {
-    const emailField = { type: 'email' as const, name: 'email', label: 'Email' }
-    const { getByRole } = render(
-      <TextField field={emailField} path="email" value="a@b.com" onChange={() => {}} />
-    )
-    expect((getByRole('textbox') as HTMLInputElement).type).toBe('email')
-  })
-  it('works with password type', () => {
-    const passField = { type: 'password' as const, name: 'pass', label: 'Password' }
-    const { container } = render(
-      <TextField field={passField} path="pass" value="secret" onChange={() => {}} />
-    )
-    const input = container.querySelector('input[type="password"]') as HTMLInputElement
-    expect(input).toBeTruthy()
-    expect(input.value).toBe('secret')
-  })
-})