Feat/native form adapter

examples/react/package.json

@@ -15,6 +15,7 @@
     "@schepta/adapter-react": "workspace:*",
     "@schepta/core": "workspace:*",
     "@schepta/factory-react": "workspace:*",
+    "formik": "^2.4.6",
     "framer-motion": "^10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/react/src/basic-ui/components/ComponentRegistry.tsx

@@ -5,20 +5,13 @@ import { InputCheckbox } from "./Inputs/InputCheckbox";
 import { InputTextarea } from "./Inputs/InputTextarea";
 import { InputNumber } from "./Inputs/InputNumber";
 import { InputDate } from "./Inputs/InputDate";
-import { SubmitButton } from "./SubmitButton";
-import { FormContainer } from "./Containers/FormContainer";
 import { FormField } from "./Containers/FormField";
 import { FormSectionContainer } from "./Containers/FormSectionContainer";
 import { FormSectionTitle } from "./Containers/FormSectionTitle";
 import { FormSectionGroupContainer } from "./Containers/FormSectionGroupContainer";
 import { FormSectionGroup } from "./Containers/FormSectionGroup";
 
 export const components = {
-  'FormContainer': createComponentSpec({
-    id: "FormContainer",
-    type: "FormContainer",
-    factory: (props, runtime) => FormContainer,
-  }),
   InputText: createComponentSpec({
     id: "InputText",
     type: "field",
@@ -55,11 +48,6 @@ export const components = {
     type: "field",
     factory: (props, runtime) => InputDate,
   }),
-  SubmitButton: createComponentSpec({
-    id: "SubmitButton",
-    type: 'content',
-    factory: (props, runtime) => SubmitButton,
-  }),
   FormField: createComponentSpec({
     id: "FormField",
     type: 'container',

examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx

@@ -0,0 +1,145 @@
+/**
+ * Form with Formik
+ * 
+ * Example component demonstrating how to use Schepta with Formik.
+ * This shows how to inject custom Formik components via the component registry.
+ */
+
+import React, { useState } from 'react';
+import { FormFactory } from '@schepta/factory-react';
+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' },
+  }),
+};
+
+interface FormWithFormikProps {
+  schema: FormSchema;
+}
+
+/**
+ * FormWithFormik Component
+ * 
+ * Renders a form using Formik for state management.
+ * 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 handleSubmit = (values: Record<string, any>) => {
+    console.log('Form submitted (Formik):', values);
+    setSubmittedValues(values);
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          border: '1px solid #ddd',
+          padding: '24px',
+          borderRadius: '8px',
+        }}
+      >
+        <div style={{ 
+          marginBottom: '16px', 
+          padding: '8px 12px', 
+          backgroundColor: '#d4edda', 
+          borderRadius: '4px',
+          fontSize: '14px',
+        }}>
+          This form uses <strong>Formik</strong> for state management.
+          The FieldWrapper and FormContainer are custom Formik implementations.
+        </div>
+        <FormFactory
+          schema={schema}
+          components={formikComponents}
+          onSubmit={handleSubmit}
+          debug={true}
+        />
+      </div>
+      {submittedValues && (
+        <div style={{
+          marginTop: '24px',
+          padding: '16px',
+          background: '#f9fafb',
+          border: '1px solid #e5e7eb',
+          borderRadius: '8px',
+        }}>
+          <h3 style={{ marginTop: 0 }}>Submitted Values (Formik):</h3>
+          <pre style={{
+            background: 'white',
+            padding: '12px',
+            borderRadius: '4px',
+            overflow: 'auto',
+            fontSize: '13px',
+          }}>
+            {JSON.stringify(submittedValues, null, 2)}
+          </pre>
+        </div>
+      )}
+    </>
+  );
+};

examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx

@@ -0,0 +1,145 @@
+/**
+ * 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.
+ */
+
+import React, { useState } 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 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' },
+  }),
+};
+
+interface FormWithRHFProps {
+  schema: FormSchema;
+}
+
+/**
+ * FormWithRHF Component
+ * 
+ * Renders a form using react-hook-form for state management.
+ * 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);
+
+  const handleSubmit = (values: Record<string, any>) => {
+    console.log('Form submitted (RHF):', values);
+    setSubmittedValues(values);
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          border: '1px solid #ddd',
+          padding: '24px',
+          borderRadius: '8px',
+        }}
+      >
+        <div style={{ 
+          marginBottom: '16px', 
+          padding: '8px 12px', 
+          backgroundColor: '#e7f3ff', 
+          borderRadius: '4px',
+          fontSize: '14px',
+        }}>
+          This form uses <strong>react-hook-form</strong> for state management.
+          The FieldWrapper and FormContainer are custom RHF implementations.
+        </div>
+        <FormFactory
+          schema={schema}
+          components={rhfComponents}
+          onSubmit={handleSubmit}
+          debug={true}
+        />
+      </div>
+      {submittedValues && (
+        <div style={{
+          marginTop: '24px',
+          padding: '16px',
+          background: '#f9fafb',
+          border: '1px solid #e5e7eb',
+          borderRadius: '8px',
+        }}>
+          <h3 style={{ marginTop: 0 }}>Submitted Values (RHF):</h3>
+          <pre style={{
+            background: 'white',
+            padding: '12px',
+            borderRadius: '4px',
+            overflow: 'auto',
+            fontSize: '13px',
+          }}>
+            {JSON.stringify(submittedValues, null, 2)}
+          </pre>
+        </div>
+      )}
+    </>
+  );
+};

examples/react/src/basic-ui/components/FormModal.tsx → examples/react/src/basic-ui/components/Forms/ModalForm.tsx

@@ -13,7 +13,7 @@ interface FormModalProps {
  * The form is rendered in a modal-like structure where the submit button
  * is outside the FormFactory component (in the footer).
  */
-export const FormModal = ({ schema, onSubmit }: FormModalProps) => {
+export const ModalForm = ({ schema, onSubmit }: FormModalProps) => {
   const formRef = useRef<FormFactoryRef>(null);
   const [submittedValues, setSubmittedValues] = useState<Record<string, any> | null>(null);
   const [isOpen, setIsOpen] = useState(false);

examples/react/src/basic-ui/components/Form.tsx → examples/react/src/basic-ui/components/Forms/NativeForm.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { FormFactory } from "@schepta/factory-react";
+import { FormFactory } from '@schepta/factory-react';
 import { FormSchema } from "@schepta/core";
 
 interface FormProps {
   schema: FormSchema;
 }
 
-export const Form = ({ schema }: FormProps) => {
+export const NativeForm = ({ schema }: FormProps) => {
   const [submittedValues, setSubmittedValues] = useState<Record<string, any> | null>(null);
 
   const handleSubmit = (values: Record<string, any>) => {