feat(react): Closes morfeojs#125

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Box'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Card'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Button'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Input'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'InputFeedback'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Label'>, 'componentName'>;
 

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

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

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Container'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Grid'>, 'componentName'>;
 

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

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

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Hr'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'List'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Footer'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Header'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Main'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Page'>, 'componentName'>;
 

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Section'>, 'componentName'>;
 

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

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

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

@@ -1,4 +1,4 @@
-import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
+import { MorfeoComponent, MorfeoComponentProps } from '@morfeo/react';
 
 type Props = Omit<MorfeoComponentProps<'Typography'>, 'componentName'>;
 

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

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

packages/react/src/MorfeoComponent.tsx

@@ -0,0 +1,39 @@
+import { ReactNode, HTMLProps, createElement } from 'react';
+import { Style, Variant, Component, component } from '@morfeo/web';
+import { useClassName } from './useClassName';
+
+export type MorfeoComponentProps<T extends Component> = {
+  style?: Style;
+  variant?: Variant<T>;
+  children?: ReactNode;
+  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();
+
+  const baseClassName = useClassName({ ...componentStyle, ...style });
+  const className = props.className
+    ? `${baseClassName} ${props.className}`
+    : baseClassName;
+
+  return createElement(
+    tag,
+    {
+      ...componentProps,
+      ...props,
+      className,
+    },
+    children,
+  );
+}

packages/react/src/index.ts

@@ -1,5 +1,6 @@
 export * from '@morfeo/web';
 export * from '@morfeo/hooks';
 export * from './useClassName';
+export * from './MorfeoComponent';
 
 export { useStyle, useStyles } from './hooks';

packages/react/tests/MorfeoComponent.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { morfeo } from '@morfeo/web';
+import { render } from '@testing-library/react';
+import { MorfeoComponent } from '../src';
+
+const theme = {
+  colors: {
+    primary: 'black',
+    secondary: 'white',
+  },
+  components: {
+    Box: {
+      style: {},
+      variants: {},
+    },
+    Button: {
+      tag: 'button',
+      style: {
+        bg: 'secondary',
+      },
+      variants: {
+        primary: {
+          style: { bg: 'primary' },
+        },
+      },
+      props: {
+        type: 'button',
+      },
+    },
+  },
+} as any;
+
+morfeo.setTheme('default', theme);
+
+describe('MorfeoComponent', () => {
+  beforeAll(() => {
+    morfeo.useTheme('default');
+  });
+
+  test('should create a button with initial style and props based on the theme', async () => {
+    const { getByTestId } = render(
+      <MorfeoComponent componentName={'Button' as any} data-testid="button" />,
+    );
+    const button = getByTestId('button');
+
+    expect(button).toHaveStyle(
+      `background-color: ${morfeo.getTheme()['colors']['secondary']}`,
+    );
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  test('should handle the variant', async () => {
+    const { getByTestId } = render(
+      <MorfeoComponent
+        componentName={'Button' as any}
+        variant={'primary' as any}
+        data-testid="button-primary"
+      />,
+    );
+    const button = getByTestId('button-primary');
+
+    expect(button).toHaveStyle(
+      `background-color: ${morfeo.getTheme()['colors']['primary']}`,
+    );
+  });
+
+  test('should create a div if the tag is not specified', async () => {
+    const { getByTestId } = render(
+      <MorfeoComponent componentName="Box" data-testid="box" />,
+    );
+    const box = getByTestId('box');
+
+    expect(box.tagName).toBe('DIV');
+  });
+
+  test('should append the additional class if specified', async () => {
+    const { getByTestId } = render(
+      <MorfeoComponent
+        componentName="Box"
+        data-testid="box"
+        className="additional-class"
+      />,
+    );
+    const box = getByTestId('box');
+
+    expect(box.classList).toHaveLength(2);
+    expect(box.classList).toContain('additional-class');
+  });
+});