fix: fixed types of web sandbox components

apps/web-sandbox/src/App.tsx

@@ -409,17 +409,17 @@ const Comps = () => {
                 </Box>
               </Grid>
               <Grid variant="item">
-                  <Label>Email</Label>
-                  <Input
-                    style={{ width: '100' }}
-                    autoComplete="false"
-                    placeholder="john@mail.com"
-                    type="email"
-                    variant="error"
-                  />
-                  <InputFeedback variant="error">
-                    The email is not valid!
-                  </InputFeedback>
+                <Label>Email</Label>
+                <Input
+                  style={{ width: '100' }}
+                  autoComplete="false"
+                  placeholder="john@mail.com"
+                  type="email"
+                  variant="error"
+                />
+                <InputFeedback variant="error">
+                  The email is not valid!
+                </InputFeedback>
               </Grid>
               <Grid variant="item">
                 <Box style={{ width: '100' }} variant="column">

apps/web-sandbox/src/components/Box.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Box'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Box'>, 'componentName'>;
 
-export const Box: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Box" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Box: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Box" {...props} />
+);

apps/web-sandbox/src/components/Card.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Card'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Card'>, 'componentName'>;
 
-export const Card: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Card" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Card: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Card" {...props} />
+);

apps/web-sandbox/src/components/Forms/Button.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Button'>, 'componentName'>;
 
-export const Button: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Button" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Button: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Button" {...props} />
+);

apps/web-sandbox/src/components/Forms/Input.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Input'>, 'componentName'>;
 
-export const Input: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Input" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Input: React.FC<Props> = props => {
+  return <MorfeoComponent componentName="Input" {...props} />;
+};

apps/web-sandbox/src/components/Forms/InputFeedback.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'InputFeedback'>, 'componentName'>;
 
-export const InputFeedback: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="InputFeedback" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const InputFeedback: React.FC<Props> = props => (
+  <MorfeoComponent componentName="InputFeedback" {...props} />
+);

apps/web-sandbox/src/components/Forms/Label.tsx

@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Label'>, 'componentName'>;
 
-export const Label: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Label" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Label: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Label" {...props} />
+);

apps/web-sandbox/src/components/Grid/Container.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Container'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Container'>, 'componentName'>;
 
-export const Container: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Container" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Container: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Container" {...props} />
+);

apps/web-sandbox/src/components/Grid/Grid.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Grid'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Grid'>, 'componentName'>;
 
-export const Grid: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Grid" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Grid: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Grid" {...props} />
+);

apps/web-sandbox/src/components/Hr.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Hr'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Hr'>, 'componentName'>;
 
-export const Hr: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Hr" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Hr: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Hr" {...props} />
+);

apps/web-sandbox/src/components/List.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'List'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'List'>, 'componentName'>;
 
-export const List: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="List" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const List: React.FC<Props> = props => (
+  <MorfeoComponent componentName="List" {...props} />
+);

apps/web-sandbox/src/components/MorfeoComponent.tsx

@@ -1,34 +1,54 @@
-import { Variant, useClassName, Component, component, useTheme, Style } from '@morfeo/react';
+import {
+  Style,
+  Variant,
+  useTheme,
+  Component,
+  component,
+  useClassName,
+} from '@morfeo/react';
 import React, { ReactNode, HTMLProps, useMemo } from 'react';
 
-
-type Props<T extends Component> = {
+export type MorfeoComponentProps<T extends Component> = {
+  style?: Style;
   variant?: Variant<T>;
-  componentName: T;
   children?: ReactNode;
-  style?: Style;
-} & Omit<HTMLProps<HTMLElement>, 'style'>
+  componentName: T;
+} & Omit<HTMLProps<HTMLElement>, 'style'>;
+
+export function MorfeoComponent<T extends Component>({
+  style,
+  variant,
+  children,
+  componentName,
+  ...props
+}: MorfeoComponentProps<T>) {
+  const {
+    tag = 'div',
+    props: componentProps,
+    style: componentStyle,
+  } = component(componentName, variant).get();
 
-export function MorfeoComponent<T extends Component>({ componentName , variant, children, style, ...props }: Props<T>) {
-  const componentObj = component(componentName, variant).get();
-  const componentStyle = component(componentName, variant).getStyle();
   const theme = useTheme();
-  
+
   const className = useClassName({ ...componentStyle, ...style });
-  
+
   const render = useMemo(() => {
-    if (componentObj.tag && theme) {
-      return React.createElement(componentObj.tag, {
-        ...componentObj.props,
-        className,
+    if (tag && theme) {
+      return React.createElement(
+        tag,
+        {
+          ...componentProps,
+          ...props,
+          className: props.className
+            ? [className, props.className].join(' ')
+            : className,
+        },
         children,
-        ...props
-      })
+      );
     }
-
-    return <></> 
-
-  }, [children, className, componentObj.props, componentObj.tag, props, theme])
 
-  return render
-}
+    return <></>;
+  }, [children, className, componentProps, props, tag, theme]);
+
+  return render;
+}

apps/web-sandbox/src/components/Templates/Footer.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Footer'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Footer'>, 'componentName'>;
 
-export const Footer: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Footer" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Footer: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Footer" {...props} />
+);

apps/web-sandbox/src/components/Templates/Header.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Header'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Header'>, 'componentName'>;
 
-export const Header: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Header" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Header: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Header" {...props} />
+);

apps/web-sandbox/src/components/Templates/Main.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Main'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Main'>, 'componentName'>;
 
-export const Main: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Main" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Main: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Main" {...props} />
+);

apps/web-sandbox/src/components/Templates/Page.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Page'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Page'>, 'componentName'>;
 
-export const Page: React.FC<Props> = ({ children, variant, ...props }) => {
-  return <MorfeoComponent componentName="Page" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Page: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Page" {...props} />
+);

apps/web-sandbox/src/components/Templates/Section.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Section'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Section'>, 'componentName'>;
 
-export const Section: React.FC<Props> = ({ children, variant, ...props }) => {
-  return <MorfeoComponent componentName="Section" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Section: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Section" {...props} />
+);

apps/web-sandbox/src/components/Typography.tsx

@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Typography'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Typography'>, 'componentName'>;
 
-export const Typography: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Typography" variant={variant} {...props}>{children}</MorfeoComponent>
-}
+export const Typography: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Typography" {...props} />
+);

apps/web-sandbox/src/morfeo-components/Box.ts

@@ -1,6 +1,8 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Box: ComponentConfig = {
+type BoxVariant = 'block' | 'column' | 'row';
+
+export const Box: ComponentConfig<BoxVariant> = {
   tag: 'div',
   style: {
     position: 'relative',