Component Utils for docs (#3609)

Author: adids1221

docuilib/src/components/UILivePreview.tsx

@@ -3,9 +3,10 @@ import {StyleSheet} from 'react-native';
 import {LiveProvider, LiveEditor} from 'react-live';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
+import CodeBlock from '@theme/CodeBlock';
 import {View, Colors} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
-import CodeBlock from '@theme/CodeBlock';
+import {isComponentSupported} from '../utils/componentUtils';
 
 export const IFRAME_MESSAGE_TYPE = 'LIVE_PREVIEW_CODE_UPDATE_MESSAGE';
 
@@ -15,10 +16,6 @@ export default function UILivePreview({code: codeProp, componentName = undefined
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
 
-  const supportedComponentNames = Object.keys(ReactLiveScope);
-  const componentLivePlaygroundSupport =
-    liveScopeSupport || (componentName && supportedComponentNames.includes(componentName));
-
   useEffect(() => {
     if (iframeLoaded) {
       sendMessageToIframe(code);
@@ -34,7 +31,7 @@ export default function UILivePreview({code: codeProp, componentName = undefined
     return {overflowY: 'scroll', scrollbarWidth: 'none'};
   }, []);
 
-  if (!componentLivePlaygroundSupport) {
+  if (!liveScopeSupport && !isComponentSupported(componentName)) {
     return <CodeBlock language="jsx">{code}</CodeBlock>;
   }
 

docuilib/src/components/pageComponents/Usage.tsx

@@ -2,15 +2,13 @@ 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';
+import {isComponentSupported} from '../../utils/componentUtils';
 
 export const Usage = ({component}) => {
-  const supportedComponentNames = Object.keys(ReactLiveScope);
-  const componentLivePlaygroundSupport = supportedComponentNames.includes(component.name);
   if (component.snippet) {
     const code = component.snippet.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
-    return componentLivePlaygroundSupport ? (
+    return isComponentSupported(component.name) ? (
       <UILivePreview code={code} liveScopeSupport/>
     ) : (
       <CodeBlock language="jsx">{code}</CodeBlock>

docuilib/src/utils/componentUtils.ts

@@ -0,0 +1,7 @@
+import ReactLiveScope from '../theme/ReactLiveScope';
+
+const supportedComponentNames = Object.keys(ReactLiveScope);
+
+export const isComponentSupported = componentName => {
+  return supportedComponentNames.includes(componentName);
+};