Fix/docs build (#3431)

* Fix UILivePreview from breaking the build by using BrowserOnly

* Minor content fix in Carousel api file

Author: ethanshar

docuilib/package.json

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

docuilib/src/components/UILivePreview.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useRef, useState, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import {LiveProvider, LiveEditor} from 'react-live';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import {View, Colors} from 'react-native-ui-lib/core';
 import ReactLiveScope from '../theme/ReactLiveScope';
 
@@ -12,7 +13,6 @@ export default function UILivePreview({code: codeProp}) {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const {siteConfig} = useDocusaurusContext();
   const iframeRef = useRef(null);
-  const iframeSource = `${window.location.origin}${siteConfig?.baseUrl}livePreview`;
 
   useEffect(() => {
     if (iframeLoaded) {
@@ -30,27 +30,35 @@ export default function UILivePreview({code: codeProp}) {
   }, []);
 
   return (
-    <View row gap-s2 style={styles.liveCodeWrapper}>
-      <LiveProvider code={code} scope={ReactLiveScope}>
-        <View flex style={styles.editorWrapper}>
-          <LiveEditor
-            className="font-mono"
-            onChange={setCode}
-            //@ts-ignore
-            style={liveEditorStyle}
-          />
-        </View>
-        <View bg-$backgroundDefault margin-s2 style={styles.iframeWrapper}>
-          <iframe
-            ref={iframeRef}
-            style={styles.iframe}
-            src={iframeSource}
-            title="Simulator"
-            onLoad={() => setIframeLoaded(true)}
-          />
-        </View>
-      </LiveProvider>
-    </View>
+    <BrowserOnly>
+      {() => {
+        const iframeSource = `${window.location.origin}${siteConfig?.baseUrl}livePreview`;
+
+        return (
+          <View row gap-s2 style={styles.liveCodeWrapper}>
+            <LiveProvider code={code} scope={ReactLiveScope}>
+              <View flex style={styles.editorWrapper}>
+                <LiveEditor
+                  className="font-mono"
+                  onChange={setCode}
+                  //@ts-ignore
+                  style={liveEditorStyle}
+                />
+              </View>
+              <View bg-$backgroundDefault margin-s2 style={styles.iframeWrapper}>
+                <iframe
+                  ref={iframeRef}
+                  style={styles.iframe}
+                  src={iframeSource}
+                  title="Simulator"
+                  onLoad={() => setIframeLoaded(true)}
+                />
+              </View>
+            </LiveProvider>
+          </View>
+        );
+      }}
+    </BrowserOnly>
   );
 }
 

src/components/carousel/carousel.api.json

@@ -223,7 +223,7 @@
               },
               {
                 "title": "Custom Content",
-                "description": "You can use the Carousel with custom content.
The spacing between the items of the carousel can be customized.",
+                "description": "You can use the Carousel with custom content.The spacing between the items of the carousel can be customized.",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_customContent.png"