Refactor UILivePreview component to support code format (#3722)

* Refactor UILivePreview component to support code format

* Refactor to use prettify button

* bump docs version

Author: adids1221

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/components/UILivePreview.module.scss

@@ -4,16 +4,16 @@ $editor-height: 700px;
 
 .container {
   display: flex;
-  background-color: #1D1E21;
+  background-color: #1d1e21;
   border-radius: 8px;
-  padding: 50px
+  padding: 50px;
 }
 
 .liveEditor {
   height: $editor-height;
 
   span {
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     font-size: 14px;
     font-weight: 600;
     line-height: 24px;
@@ -32,19 +32,29 @@ $editor-height: 700px;
   pre {
     min-height: 100%;
     padding: 20px !important;
-    background-color: #1D1E21 !important;
-    border-right: 1px solid #D2D6D8;
+    background-color: #1d1e21 !important;
+    border-right: 1px solid #d2d6d8;
   }
 }
 
+.codeHeader {
+  position: sticky;
+  top: 5px;
+  right: 16px;
+  z-index: 1;
+  margin-right: 24px;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .errorContainer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
 
   pre {
-    background-color: rgba(255, 255, 255, 0.80) !important;
+    background-color: rgba(255, 255, 255, 0.8) !important;
     margin: 10px;
   }
 }
@@ -54,7 +64,7 @@ $editor-height: 700px;
   width: $preview-width;
   margin-left: $preview-margin;
   border-radius: 36px;
-  border: 10px solid rgba(255, 255, 255, 0.20);
+  border: 10px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 0 15px rgba(110, 120, 129, 0.05);
   overflow: hidden;
 }
@@ -68,4 +78,4 @@ $editor-height: 700px;
   border: 0;
   padding: 10;
   background-color: #fff;
-}
+}

docuilib/src/components/UILivePreview.tsx

@@ -4,6 +4,7 @@ import {themes} from 'prism-react-renderer';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
+import Button from 'react-native-ui-lib/Button';
 import ReactLiveScope from '../theme/ReactLiveScope';
 import {isComponentSupported} from '../utils/componentUtils';
 import useFormattedCode from '../hooks/useFormattedCode';
@@ -15,12 +16,8 @@ export default function UILivePreview({code: initialCode, componentName = undefi
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
-  const {code: formattedCode} = useFormattedCode(initialCode, {printWidth: 100});
-  const [code, setCode] = useState(formattedCode);
-
-  useEffect(() => {
-    setCode(formattedCode);
-  }, [formattedCode]);
+  const [code, setCode] = useState(initialCode);
+  const {code: formattedCode} = useFormattedCode(code, {printWidth: 100});
 
   useEffect(() => {
     if (iframeLoaded) {
@@ -33,6 +30,10 @@ export default function UILivePreview({code: initialCode, componentName = undefi
     iframeRef.current?.contentWindow.postMessage(message, '*');
   };
 
+  const handleFormat = () => {
+    setCode(formattedCode);
+  };
+
   if (!liveScopeSupport && !isComponentSupported(componentName)) {
     return <CodeBlock language="jsx">{code}</CodeBlock>;
   }
@@ -46,6 +47,15 @@ export default function UILivePreview({code: initialCode, componentName = undefi
           <LiveProvider code={code} scope={ReactLiveScope} theme={themes.oceanicNext}>
             <div className={styles.container}>
               <div className={styles.codeContainer}>
+                <div className={styles.codeHeader}>
+                  <Button
+                    label="Prettify"
+                    size={Button.sizes.small}
+                    onPress={handleFormat}
+                    backgroundColor="#2d2d2d"
+                    borderRadius={4}
+                  />
+                </div>
                 <LiveEditor onChange={setCode} className={styles.liveEditor}/>
                 <div className={styles.errorContainer}>
                   <LiveError/>