Infra/live code playground device wrapper

docs/getting-started/usage.md

@@ -5,32 +5,32 @@ title: 'Usage'
 # path: "/getting-started/usage"
 ---
 
+import UILivePreview from '@site/src/components/UILivePreview';
+
 This is a quick example of how to use our basic components, modifiers and presets to generate a good looking screen.  
 For detailed information please go over the other sections: [Style](../foundation/style.md), [Modifiers](../foundation/modifiers.md), Components...
 
 <!-- ![basic showcase](basic-showcase.png). -->
 
-```jsx live
-function Example(props) {
-  return (
-    <div>
-      <View flex center>
-        <Text blue50 text20 marginB-s5>
+<UILivePreview code={`function Example(props) {
+return (
+
+<div>
+<View flex center>
+ <Text blue50 text20 marginB-s5>
           Welcome
         </Text>
-        <SegmentedControl segments={[{label: 'Register'}, {label: 'Login'}]} />
-
-        <View marginT-s5>
-          <TextField preset="outline" placeholder="username" />
-          <TextField preset="outline" placeholder="password" secureTextEntry grey10 />
-        </View>
+<SegmentedControl segments={[{label: 'Register'}, {label: 'Login'}]} />
+<View marginT-s5>
+<TextField preset="outline" placeholder="username" />
+<TextField preset="outline" placeholder="password" secureTextEntry grey10 />
+</View>
+<View row marginT-s5 centerV>
+<Button link text70 orange30 label="Sign Up" marginR-s5 />
+<Button text70 white background-orange30 label="Login" />
+</View>
+</View>
 
-        <View row marginT-s5 centerV>
-          <Button link text70 orange30 label="Sign Up" marginR-s5 />
-          <Button text70 white background-orange30 label="Login" />
-        </View>
-      </View>
-    </div>
-  );
-}
-```
+</div>
+);
+}`}/>

docuilib/package.json

@@ -28,6 +28,7 @@
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^2.1.0",
     "react-html-parser": "^2.0.2",
+    "react-live": "^4.1.7",
     "react-native-web": "^0.19.12",
     "sass": "^1.39.0",
     "showdown": "^2.1.0",

docuilib/src/components/UILivePreview.tsx

@@ -0,0 +1,73 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {LiveProvider, LiveEditor} from 'react-live';
+import {View, Colors} from 'react-native-ui-lib/core';
+import ReactLiveScope from '../theme/ReactLiveScope';
+
+const messageType = 'LIVE_PREVIEW_CODE_UPDATE_MESSAGE';
+
+export default function UILivePreview({code: codeProp}) {
+  const [code, setCode] = useState(codeProp);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    if (iframeRef.current && iframeLoaded) {
+      setTimeout(() => {
+        sendMessageToIframe(code);
+      }, 100);
+    }
+  }, [iframeRef, iframeLoaded, code]);
+
+  const sendMessageToIframe = code => {
+    const message = {type: messageType, code};
+    iframeRef.current.contentWindow.postMessage(message, '*');
+  };
+
+  return (
+    <View row gap-s2 style={styles.liveCodeWrapper}>
+      <LiveProvider code={code} scope={ReactLiveScope}>
+        <View flex style={{maxHeight: 700, padding: 10, borderRadius: 20, overflow: 'hidden'}}>
+          <LiveEditor
+            className="font-mono"
+            onChange={setCode}
+            style={{
+              overflowY: 'scroll',
+              scrollbarWidth: 'none' // For Firefox
+            }}
+          />
+        </View>
+        <View
+          bg-$backgroundDefault
+          margin-s2
+          style={{
+            alignSelf: 'center',
+            borderRadius: 40,
+            borderWidth: 4,
+            borderColor: Colors.$outlineDisabledHeavy,
+            width: 320,
+            height: 700
+          }}
+        >
+          <iframe
+            ref={iframeRef}
+            style={{padding: 10, height: 720, width: 320}}
+            src="http://localhost:3000/react-native-ui-lib/livePreview"
+            title="Simulator"
+            onLoad={() => setIframeLoaded(true)}
+          />
+        </View>
+      </LiveProvider>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  liveCodeWrapper: {
+    borderRadius: 20,
+    borderWidth: 1,
+    backgroundColor: '#011627',
+    height: 725,
+    width: 900
+  }
+});

docuilib/src/pages/livePreview.tsx

@@ -0,0 +1,24 @@
+import React, {useEffect, useState} from 'react';
+import {LiveProvider, LivePreview} from 'react-live';
+import ReactLiveScope from '../theme/ReactLiveScope';
+
+const messageType = 'LIVE_PREVIEW_CODE_UPDATE_MESSAGE';
+
+export default function UILivePreview() {
+  const [code, setCode] = useState(``);
+
+  useEffect(() => {
+    window.addEventListener('message', (e: MessageEvent) => {
+      if (e.data.type === messageType) {
+        console.log(e.data.code);
+      }
+      setCode(e.data.code);
+    });
+  }, []);
+
+  return (
+    <LiveProvider code={code} scope={ReactLiveScope}>
+      <LivePreview style={{overflow: 'hidden'}}/>
+    </LiveProvider>
+  );
+}

docuilib/src/theme/ReactLiveScope/index.js

@@ -21,6 +21,7 @@ import SortableGridList from 'react-native-ui-lib/sortableGridList';
 import SortableList from 'react-native-ui-lib/sortableList';
 import Switch from 'react-native-ui-lib/switch';
 import TextField from 'react-native-ui-lib/textField';
+import UILivePreview from '@site/src/components/UILivePreview';
 import * as Playground from './Playground';
 
 Assets.loadAssetsGroup('icons.demo', {
@@ -56,6 +57,7 @@ const ReactLiveScope = {
   /* Docs' utils and components */
   Data,
   Playground,
+  UILivePreview,
   /* UI Lib's components */
   ActionBar,
   Assets,

docuilib/yarn.lock

@@ -8022,7 +8022,7 @@ react-json-view-lite@^1.2.0:
   resolved "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.5.0.tgz#377cc302821717ac79a1b6d099e1891df54c8662"
   integrity sha512-nWqA1E4jKPklL2jvHWs6s+7Na0qNgw9HCP6xehdQJeg6nPBTFZgGwyko9Q0oj+jQWKTTVRS30u0toM5wiuL3iw==
 
-react-live@^4.1.6:
+react-live@^4.1.6, react-live@^4.1.7:
   version "4.1.7"
   resolved "https://registry.npmjs.org/react-live/-/react-live-4.1.7.tgz#a451054bee78e6c9b4410dfc3940b318d9bc7880"
   integrity sha512-NTzl0POOAW3dkp7+QL30duOrIu2Vzf2LHdx4TaQ0BqOAtQcSTKEXujfm9jR2VoCHko0oi35PYp38yKQBXz4mrg==

scripts/buildDocsCommon.js

@@ -52,10 +52,8 @@ function resetDocsDir() {
 function processComponents(components) {
   /** Break into compound components (TabController.TabPage) and parent components (TabController) */
   const compoundComponents = components.filter(c => c.name.includes('.'));
-  const parentComponents = _.flow(
-    components => _.map(components, c => c.name.split('.')[0]),
-    _.uniq
-  )(compoundComponents);
+  const parentComponents = _.flow(components => _.map(components, c => c.name.split('.')[0]),
+    _.uniq)(compoundComponents);
 
   components.forEach(component => {
     const [componentName, componentParentName] = getComponentNameParts(component.name);
@@ -114,6 +112,7 @@ function generateExtendsLink(extendsLink) {
 
 function buildOldDocs(component) {
   let content = '';
+  content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
 
   /* General Info */
   content += `${component.description}  \n`;
@@ -170,9 +169,10 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += '``` jsx live\n';
-    content += component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
-    content += '\n```\n';
+    content += `<UILivePreview code={\`${component.snippet
+      ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
+      .join('\n')
+      .toString()}\`}/>\n\n`;
   } else {
     console.warn(`${component.name} does not have a snippet`);
   }

src/components/marquee/marquee.api.json

@@ -18,7 +18,7 @@
   ],
   "snippet": [
     "<Marquee",
-    "  key={`${index}`$1}",
+    "  key={\\`\\${index}\\`$1}",
     "  label={'Hey there'$2}",
     "  direction={directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT$3}",
     "  duration={duration$4}",

src/components/sortableGridList/sortableGridList.api.json

@@ -59,7 +59,7 @@
     "",
     "  return (",
     "    <div>",
-    "      <View style={{width: 800}}>",
+    "      <View style={{width: 300}}>",
     "        <Playground.ToggleControl title={'Order by index'} state={shouldOrderByIndex} setState={setShouldOrderByIndex}/>",
     "        <SortableGridList",
     "          data={data$1}",

src/components/sortableList/SortableList.api.json

@@ -45,14 +45,14 @@
   "snippet": [
     "function Example(props) {",
     "  const data = Array.from({length: 10}, (_, index) => {",
-    "    let text = `${index}`;",
+    "    let text = \\`\\${index}\\`;",
     "    if (index === 3) {",
     "      text = 'Locked item';",
     "    }",
     "  ",
     "    return {",
     "      text,",
-    "      id: `${index}`,",
+    "      id: \\`\\${index}\\`,",
     "      locked: index === 3",
     "    };",
     "  });",
@@ -78,7 +78,7 @@
     "  }, []);",
     "",
     "  const keyExtractor = useCallback((item: Item) => {",
-    "    return `${item.id}`;",
+    "    return \\`\\${item.id}\\`;",
     "  }, []);",
     "",
     "  return (",

src/incubator/Slider/slider.api.json

@@ -103,7 +103,7 @@
     "  value={0$1}",
     "  minimumValue={0$2}",
     "  maximumValue={10$3}",
-    "  onValueChange={value => console.log(`value changed: ${value}`)$4}",
+    "  onValueChange={value => console.log(\\`value changed: \\${value}\\`)$4}",
     "/>"
   ]
 }