Feat/factory react default components

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/InputSelect.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>
     );
-  });
+  };

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

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

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

@@ -1,45 +1,42 @@
-import React from 'react';
+import type { InputTextareaProps } from "@schepta/factory-react";
+import React from "react";
 
-export const InputTextarea = React.forwardRef<HTMLTextAreaElement, any>(
-    (props, ref) => {
-      const {
-        label,
-        name,
-        value,
-        onChange,
-        placeholder,
-        rows = 4,
-        ...rest
-      } = props;
-      return (
-        <div style={{ marginBottom: "16px" }}>
-          {label && (
-            <label
-              htmlFor={name}
-              style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-            >
-              {label}
-            </label>
-          )}
-          <textarea
-            ref={ref}
-            id={name}
-            name={name}
-            data-test-id={name}
-            value={value || ""}
-            placeholder={placeholder}
-            rows={rows}
-            onChange={(e) => onChange?.(e.target.value)}
-            style={{
-              width: "100%",
-              padding: "8px",
-              border: "1px solid #ccc",
-              borderRadius: "4px",
-              fontFamily: "inherit",
-            }}
-            {...rest}
-          />
-        </div>
-      );
-    }
-  );
+export const InputTextarea: React.FC<InputTextareaProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  ...rest
+}) => {
+  return (
+    <div style={{ marginBottom: "16px" }}>
+      {label && (
+        <label
+          htmlFor={name}
+          style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        id={name}
+        name={name}
+        data-test-id={name}
+        value={value || ""}
+        placeholder={placeholder}
+        rows={rows}
+        onChange={(e) => onChange?.(e.target.value)}
+        style={{
+          width: "100%",
+          padding: "8px",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          fontFamily: "inherit",
+        }}
+        {...rest}
+      />
+    </div>
+  );
+};

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

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

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
+import type { FormSectionContainerProps } from "@schepta/factory-react";
 
-export const FormSectionContainer = ({ children, ...props }: any) => {
+export const FormSectionContainer: React.FC<FormSectionContainerProps & BoxProps> = ({ children, ...props }) => {
     return <Box mb={6} {...props}>{children}</Box>;
   };

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

@@ -1,12 +1,10 @@
 import React from "react";
-import { Grid } from "@chakra-ui/react";
+import { Grid, GridProps } from "@chakra-ui/react";
+import type { FormSectionGroupProps } from "@schepta/factory-react";
 
-export const FormSectionGroup = ({ children, 'x-component-props': xComponentProps, ...props }: any) => {
-    const columns = xComponentProps?.columns || '1fr 1fr';
-    const gridColumns = columns === '1fr' ? 1 : 2;
-
+export const FormSectionGroup: React.FC<FormSectionGroupProps & GridProps> = ({ children, ...props }) => {
     return (
-      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(${gridColumns}, 1fr)`} gap={4} {...props}>
+      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(auto-fit, minmax(200px, 1fr))`} gap={4} {...props}>
         {children}
       </Grid>
     );

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

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

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { Heading } from "@chakra-ui/react";
+import { Heading, HeadingProps } from "@chakra-ui/react";
+import type { FormSectionTitleProps } from "@schepta/factory-react";
 
-export const FormSectionTitle = ({ 'x-content': content, children, ...props }: any) => {
+export const FormSectionTitle: React.FC<FormSectionTitleProps & HeadingProps> = ({ 'x-content': content, children, ...props }) => {
     return (
       <Heading size="md" mb={4} {...props}>
         {content || children}

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

@@ -1,18 +1,23 @@
 import React from "react";
-import { Checkbox } from "@chakra-ui/react";
+import { Checkbox, CheckboxProps } from "@chakra-ui/react";
+import type { InputCheckboxProps } from "@schepta/factory-react";
 
-export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
-    return (
-      <Checkbox
-        ref={ref}
-        name={name}
-        isChecked={value || false}
-        onChange={(e) => onChange?.(e.target.checked)}
-        data-test-id={name}
-        {...rest}
-      >
-        {label}
-      </Checkbox>
-    );
-  });
+export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <Checkbox
+      name={name}
+      isChecked={value || false}
+      onChange={(e) => onChange?.(e.target.checked)}
+      data-test-id={name}
+      {...rest}
+    >
+      {label}
+    </Checkbox>
+  );
+};