Custom Components Override

interface CustomComponentProps {
  form: UseFormReturn; // react-hook-form instance
  entity: Record<string, any>; // Initial entity state (static)
}

// Override Component Signature
type CustomComponent = React.FC<CustomComponentProps>;

{
  "layout": [
    {
      "type": "Form",
      "form": {
        "groups": [
          {
            "fields": [
              {
                "id": "myCustomField",
                "type": "custom",
                "componentId": "myCustomComponent" // Matches override key
              }
            ]
          }
        ]
      }
    }
  ]
}

// components/customComponents/CustomInput.tsx
import { useController } from '@wix/patterns/form';
import type { CustomComponentProps } from '@wix/auto-patterns';
import { Input, FormField } from '@wix/design-system';

export const CustomInput: React.FC<CustomComponentProps> = ({ form, entity }) => {
  const { field, fieldState } = useController({
    name: 'title', // Matches schema field ID
    control: form.control,
    defaultValue: entity?.title
  });

  return (
    <FormField label="Title" status={fieldState.error ? 'error' : undefined}>
      <Input {...field} />
    </FormField>
  );
};

// components/customComponents/index.tsx
import { CustomInput } from './CustomInput';
export const useComponents = () => ({ CustomInput });

// 1. Add import (keep all existing imports)
import { useComponents } from './components/customComponents';

// 2. Add hook call (keep all existing hook calls)
const components = useComponents();

// 3. Add components to PatternsWizardOverridesProvider value (keep ALL existing overrides)