feat: class used in morfeo component

devtool/src/_shared/components/Slices/Components/Detail/index.tsx

@@ -2,7 +2,7 @@ import { Component, component } from '@morfeo/react';
 import { useMemo } from 'react';
 import { useRouter } from '../../../../hooks';
 import { Grid, Item } from '../../../Grid';
-import { createMorfeoComponent } from '../createMorfeoComponent';
+import { MorfeoComponent } from '../MorfeoComponent';
 import { Preview } from '../Preview';
 
 import styles from './style.module.css';
@@ -16,12 +16,11 @@ export const Detail = () => {
   const variantKeys = Object.keys(variants || {});
 
   const componentPreview = useMemo(() => {
-    return createMorfeoComponent({
-      name: componentName as Component,
-      props: {},
-      variant,
-      children: [componentName],
-    });
+    return (
+      <MorfeoComponent name={componentName as Component} variant={variant}>
+        {componentName}
+      </MorfeoComponent>
+    );
   }, [componentName, variant]);
 
   return (

devtool/src/_shared/components/Slices/Components/MorfeoComponent.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { component, Component, useClassName } from '@morfeo/react';
+import clsx from 'clsx';
+
+type Props = {
+  name: Component;
+  variant?: string;
+};
+
+export const MorfeoComponent: React.FC<Props> = ({
+  name,
+  variant,
+  children,
+  ...props
+}) => {
+  const { tag, props: componentProps = {} } = component(name, variant).get();
+  const className = useClassName({ componentName: name, variant });
+
+  return React.createElement((tag || 'div') as any, {
+    ...componentProps,
+    ...props,
+    className: clsx(
+      className,
+      (props as any).className,
+      (componentProps as any).className,
+    ),
+    style: {
+      ...(props as any).style,
+      ...(componentProps as any).style,
+    },
+    children,
+  });
+};

devtool/src/_shared/components/Slices/Components/Preview.tsx

@@ -4,7 +4,7 @@ import { useRouter } from '../../../hooks/useRouter';
 import { RouteName } from '../../../contexts';
 import { SliceName } from '../../../contexts/Routing/types';
 import { Card } from '../../Card';
-import { createMorfeoComponent } from './createMorfeoComponent';
+import { MorfeoComponent } from './MorfeoComponent';
 import clsx from 'clsx';
 
 import styles from './style.module.css';
@@ -63,7 +63,9 @@ export const Preview: React.FC<Props> = ({ name, variant }) => {
         className={styles.previewContainer}
         copyText={variant || name}
       >
-        {createMorfeoComponent({ name, variant, props: {}, children: [name] })}
+        <MorfeoComponent name={name} variant={variant}>
+          {name}
+        </MorfeoComponent>
       </Card>
       <Info name={name} variant={variant} />
     </Card>