Added jsx rendering in docs (#3579)

* Added jsx rendering in docs

* Refactor Figma embed function to simplify parameters

* Update getImage function to make style parameter optional

* Rename 'jsx' prop to 'snippet' in ComponentItem and ContentItem components for clarity

* Replace image URL with JSX snippet in test.api.json for improved component representation

* Update snippet description in test.api.json for clarity

Author: nitzanyiz

docuilib/src/components/pageComponents/ContentItem.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {ComponentProps, useCallback, useMemo, useState} from 'react';
 import '../ComponentPage.module.scss';
 import {LiveProvider, LivePreview} from 'react-live';
 import styles from './ContentItem.module.scss';
@@ -8,11 +8,12 @@ import CodeIcon from '../../assets/icons/code';
 
 type ComponentItemProps = {
   componentName: string;
-  props: Record<string, unknown> | Record<string, unknown>[];
+  props?: Record<string, unknown> | Record<string, unknown>[];
+  snippet?: string
   showCodeButton?: boolean;
 };
 
-function generateComponentCodeSnippet(componentName, componentProps) {
+function generateComponentCodeSnippet(componentName: string, componentProps: Record<string, unknown>) {
   const propString = Object.keys(componentProps).reduce((acc, key) => {
     let propValue = componentProps[key];
     switch (typeof propValue) {
@@ -31,19 +32,21 @@ function generateComponentCodeSnippet(componentName, componentProps) {
 }
 
 const ComponentItem = (props: ComponentItemProps) => {
-  const {componentName, props: componentProps, showCodeButton = false} = props;
+  const {componentName, props: componentProps, snippet, showCodeButton = false} = props;
   const [showCode, setShowCode] = useState(false);
 
   const code = useMemo(() => {
-    if (Array.isArray(componentProps)) {
+    if (typeof snippet === 'string') {
+      return snippet;
+    } else if (Array.isArray(componentProps)) {
       const snippet = componentProps
         .map(componentPropsItem => generateComponentCodeSnippet(componentName, componentPropsItem))
         .join('');
       return `<View center gap-s1>${snippet}</View>`;
     } else {
       return generateComponentCodeSnippet(componentName, componentProps);
     }
-  }, [componentName, componentProps]);
+  }, [componentName, componentProps, snippet]);
 
   const toggleCode = useCallback(() => {
     setShowCode(prev => !prev);
@@ -76,21 +79,30 @@ type Item = {
   component?: string;
   props?: any;
   value?: any;
+  snippet?: string;
+  height?: number;
 };
 type ContentItemProps = {
   item: Item;
   componentName: string;
   showCodeButton?: boolean;
 };
+
+const extractComponentFromSnippet = (snippet: string) => {
+  if (!snippet.startsWith('<')) {
+    return;
+  }
+  const firstWord = snippet.split(' ')[0];
+  return firstWord.slice(1);
+};
+
 export const ContentItem = ({item, componentName, showCodeButton}: ContentItemProps) => {
-  const getFigmaEmbed = item => {
-    const value = item.value;
-    const height = item.height || 450;
+  const getFigmaEmbed = (value: string, height = 450) => {
 
     return <iframe width={'100%'} height={height} src={value}/>;
   };
 
-  const getImage = (value, style = undefined) => {
+  const getImage = (value: string, style?: ComponentProps<'img'>['style']) => {
     return (
       <div className={styles.image}>
         <img src={value} style={{display: 'block', ...style}}/>
@@ -100,12 +112,14 @@ export const ContentItem = ({item, componentName, showCodeButton}: ContentItemPr
 
   const value = item.value;
 
-  if (item.props) {
-    const name = item.component ?? componentName;
+  if (item.props || item.snippet) {
+    const name = item.snippet ? extractComponentFromSnippet(item.snippet) : item.component ?? componentName;
     const isComponentExists = !!ReactLiveScope[name];
 
     if (isComponentExists) {
-      return <ComponentItem componentName={name} props={item.props} showCodeButton={showCodeButton}/>;
+      return (
+        <ComponentItem componentName={name} props={item.props} snippet={item.snippet} showCodeButton={showCodeButton}/>
+      );
     } else if (!value) {
       return <div style={{color: 'red'}}>Component Not Supported</div>;
     }
@@ -114,7 +128,7 @@ export const ContentItem = ({item, componentName, showCodeButton}: ContentItemPr
   if (value) {
     if (typeof value === 'string') {
       if (value.includes('embed.figma.com')) {
-        return getFigmaEmbed(item);
+        return getFigmaEmbed(value, item.height);
       } else {
         return getImage(value);
       }

src/components/test.api.json

@@ -143,7 +143,7 @@
                 "description": "Item #2 Subtitle",
                 "content": [
                   {
-                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
+                    "snippet": "<Text text30>This is a code snippet</Text>"
                   }
                 ]
               },