Feat/factory react default components (#14)

* feat(factory-react): add default components for all form-schema types

- Add default input components: InputText, InputSelect, InputCheckbox,
  InputDate, InputPhone, InputAutocomplete, InputTextarea, InputNumber
- Add default container components: FormField, FormSectionContainer,
  FormSectionTitle, FormSectionGroup, FormSectionGroupContainer
- Export *Props and *ComponentType for each for custom implementations
- Register all defaults in setFactoryDefaultComponents()
- Extend HTML/React attribute types instead of [key: string]: any

* refactor(examples): align react examples with factory-react props types

- basic-ui, chakra-ui, material-ui: use Input*Props from @schepta/factory-react
- Containers: use FormFieldProps, FormSection*Props where applicable
- Merge UI-specific props (e.g. CheckboxProps) with factory props in Chakra
- Remove empty basic-ui InputPhone (rely on registry default or shared)

Author: guynikan

examples/react/src/basic-ui/components/Containers/FormField.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormFieldProps } from '@schepta/factory-react';
 
-export const FormField = ({ children, ...props }: any) => {
+export const FormField: React.FC<FormFieldProps> = ({ children, ...props }) => {
     return <div data-test-id="FormField" {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionContainerProps } from '@schepta/factory-react';
 
-export const FormSectionContainer = ({ children, ...props }: any) => {
+export const FormSectionContainer: React.FC<FormSectionContainerProps> = ({ children, ...props }) => {
     return <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px' }} {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import type { FormSectionGroupProps } from '@schepta/factory-react';
 
-export const FormSectionGroup = ({ children, columns, ...props }: any) => {
-    const gridColumns = columns || 'repeat(auto-fit, minmax(200px, 1fr))';
-    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: gridColumns, gap: '16px' }} {...props}>{children}</div>;
+export const FormSectionGroup: React.FC<FormSectionGroupProps> = ({ children, ...props }) => {
+    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionGroupContainerProps } from '@schepta/factory-react';
 
-export const FormSectionGroupContainer = ({ children, ...props }: any) => {
+export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps> = ({ children, ...props }) => {
     return <div data-test-id="FormSectionGroupContainer" {...props}>{children}</div>;
   };

examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionTitleProps } from '@schepta/factory-react';
 
-export const FormSectionTitle = ({ 'x-content': content, children, ...props }: any) => {
-    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' }} {...props}>{content || children}</h2>;
+export const FormSectionTitle: React.FC<FormSectionTitleProps> = ({ 'x-content': content, children, ...props }) => {
+    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>{content || children}</h2>;
   };

examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
+import type { InputCheckboxProps } from '@schepta/factory-react';
 
-export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, children, ...rest } = props;
+export const InputCheckbox: React.FC<InputCheckboxProps> = ({ label, name, value, onChange, children, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
           <input
-            ref={ref}
             type="checkbox"
             name={name}
             data-test-id={name}
@@ -19,4 +18,4 @@ export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref
         {children}
       </div>
     );
-  });
+  };

examples/react/src/basic-ui/components/Inputs/InputDate.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { InputDateProps } from '@schepta/factory-react';
 
-export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
+export const InputDate: React.FC<InputDateProps> = ({ label, name, value, onChange, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -13,7 +13,6 @@ export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) =>
           </label>
         )}
         <input
-          ref={ref}
           type="date"
           id={name}
           name={name}
@@ -30,4 +29,4 @@ export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) =>
         />
       </div>
     );
-  });
+  };

examples/react/src/basic-ui/components/Inputs/InputNumber.tsx

@@ -1,8 +1,7 @@
+import type { InputNumberProps } from '@schepta/factory-react';
 import React from 'react';
 
-export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, min, max, step, ...rest } =
-      props;
+export const InputNumber: React.FC<InputNumberProps> = ({ label, name, value, onChange, placeholder, min, max, step, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -14,7 +13,6 @@ export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref)
           </label>
         )}
         <input
-          ref={ref}
           type="number"
           id={name}
           name={name}
@@ -37,4 +35,4 @@ export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref)
         />
       </div>
     );
-  });
+  };

examples/react/src/basic-ui/components/Inputs/InputPhone.tsx

@@ -1,16 +1,7 @@
+import type { InputSelectProps } from '@schepta/factory-react';
 import React from 'react';
 
-export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref) => {
-    const {
-      label,
-      name,
-      value,
-      onChange,
-      options = [],
-      placeholder = "Select...",
-      children,
-      ...rest
-    } = props;
+export const InputSelect: React.FC<InputSelectProps> = ({ label, name, value, onChange, options = [], placeholder = "Select...", children, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -22,7 +13,6 @@ export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref)
           </label>
         )}
         <select
-          ref={ref}
           id={name}
           name={name}
           data-test-id={name}
@@ -49,4 +39,4 @@ export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref)
         {children}
       </div>
     );
-  });
+  };