Usage component support live preview for compatible components (#3581)

* Usage component support live preview for compatible components

* Enhance UILivePreview to support codeBlock when react live scope not supported

* Refactor UILivePreview component to use destructuring for props

* Add default value for componentName prop in UILivePreview

---------

Co-authored-by: Ethan Sharabi <[email protected]>

Author: adids1221

docuilib/src/components/UILivePreview.tsx

@@ -5,15 +5,20 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import {View, Colors} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
+import CodeBlock from '@theme/CodeBlock';
 
 export const IFRAME_MESSAGE_TYPE = 'LIVE_PREVIEW_CODE_UPDATE_MESSAGE';
 
-export default function UILivePreview({code: codeProp}) {
+export default function UILivePreview({code: codeProp, componentName = undefined, liveScopeSupport = false}) {
   const [code, setCode] = useState(codeProp);
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
 
+  const supportedComponentNames = Object.keys(ReactLiveScope);
+  const componentLivePlaygroundSupport =
+    liveScopeSupport || (componentName && supportedComponentNames.includes(componentName));
+
   useEffect(() => {
     if (iframeLoaded) {
       sendMessageToIframe(code);
@@ -29,6 +34,10 @@ export default function UILivePreview({code: codeProp}) {
     return {overflowY: 'scroll', scrollbarWidth: 'none'};
   }, []);
 
+  if (!componentLivePlaygroundSupport) {
+    return <CodeBlock language="jsx">{code}</CodeBlock>;
+  }
+
   return (
     <BrowserOnly>
       {() => {

docuilib/src/components/pageComponents/Usage.tsx

@@ -2,15 +2,18 @@ import _ from 'lodash';
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import '../ComponentPage.module.scss';
+import ReactLiveScope from '../../theme/ReactLiveScope';
+import UILivePreview from '../UILivePreview';
 
 export const Usage = ({component}) => {
+  const supportedComponentNames = Object.keys(ReactLiveScope);
+  const componentLivePlaygroundSupport = supportedComponentNames.includes(component.name);
   if (component.snippet) {
-    return (
-      <div>
-        <CodeBlock language="jsx">
-          {component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n')}
-        </CodeBlock>
-      </div>
+    const code = component.snippet.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
+    return componentLivePlaygroundSupport ? (
+      <UILivePreview code={code} liveScopeSupport/>
+    ) : (
+      <CodeBlock language="jsx">{code}</CodeBlock>
     );
   }
 };

scripts/docs/buildDocsCommon.js

@@ -193,7 +193,7 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += `<UILivePreview code={\`${component.snippet
+    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
       ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
       .join('\n')
       .toString()}\`}/>\n\n`;