feat: introduce a set of a morfeo component

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

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

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

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

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

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

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

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

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

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

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

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

apps/web-sandbox/src/components/Forms/index.ts

@@ -0,0 +1,4 @@
+export * from './Button';
+export * from './Input';
+export * from './Label';
+export * from './InputFeedback';

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

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

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

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

apps/web-sandbox/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export * from './Container';
+export * from './Grid';

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { Variant, useClassName, Component, component, useTheme, Style } from '@morfeo/react';
+import React, { ReactNode, HTMLProps, useMemo } from 'react';
+
+
+type Props<T extends Component> = {
+  variant?: Variant<T>;
+  componentName: T;
+  children?: ReactNode;
+  style?: Style;
+} & Omit<HTMLProps<HTMLElement>, 'style'>
+
+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,
+        children,
+        ...props
+      })
+    }
+
+    return <></> 
+
+  }, [children, className, componentObj.props, componentObj.tag, props, theme])
+
+  return render
+}

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

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

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

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

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

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

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

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

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

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

apps/web-sandbox/src/components/Templates/index.ts

@@ -0,0 +1,5 @@
+export * from './Footer';
+export * from './Header';
+export * from './Main';
+export * from './Page';
+export * from './Section';

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

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

apps/web-sandbox/src/components/index.ts

@@ -1,4 +1,8 @@
+export * from './Templates';
+export * from './Grid';
+export * from './Forms';
 export * from './Box';
-export * from './Button';
 export * from './Typography';
-export * from './ThemeToggle';
+export * from './Card';
+export * from './Hr';
+export * from './List';