Infra/live code playground device wrapper

docuilib/src/theme/ReactLiveScope/Playground.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
-import {Text, View} from 'react-native-ui-lib/core';
+import React, {useState, useEffect} from 'react';
+import {StyleSheet} from 'react-native';
+import {Text, View, Colors, Image} from 'react-native-ui-lib/core';
 import Switch from 'react-native-ui-lib/switch';
+import SegmentedControl from 'react-native-ui-lib/segmentedControl';
 
 interface ControlBaseProps<S> {
   state: S;
@@ -13,6 +15,21 @@ interface ToggleControlProps extends ControlBaseProps<boolean> {
   spread?: boolean;
 }
 
+interface SimulatorSize {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+enum SimulatorTypes {
+  MOBILE = 'MOBILE',
+  TABLET = 'TABLET'
+}
+
+const simulatorOptions = [
+  {label: 'Mobile', value: SimulatorTypes.MOBILE},
+  {label: 'Tablet', value: SimulatorTypes.TABLET}
+];
+
 export function ToggleControl(props: ToggleControlProps) {
   const {state, setState, title, spread = false, key = 'does not change'} = props;
   return (
@@ -24,3 +41,81 @@ export function ToggleControl(props: ToggleControlProps) {
     </View>
   );
 }
+
+export function MobileDeviceWrapper({children}) {
+  const [simulatorSize, setSimulatorSize] = useState<SimulatorSize>({width: 340, height: 754});
+  const [type, setType] = useState<SimulatorTypes>(SimulatorTypes.MOBILE);
+
+  useEffect(() => {
+    changeType();
+  }, [type]);
+
+  function changeType() {
+    switch (type) {
+      case SimulatorTypes.MOBILE:
+      default:
+        setSimulatorSize({width: 340, height: 754});
+        break;
+      case SimulatorTypes.TABLET:
+        setSimulatorSize({width: 900, height: 754});
+        break;
+    }
+  }
+
+  const onPress = (type: SimulatorTypes) => {
+    setType?.(type);
+  };
+
+  const renderHeader = () => {
+    return (
+      <View center padding-s2 row>
+        <Image
+          marginH-s1
+          source={{
+            uri: 'https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png'
+          }}
+          style={{width: 40, height: 40}}
+        />
+        <Text text60 marginV-s1>
+          Wix React Native UILIB
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <View gap-s3>
+      <View gap-s1 marginV-s1 center>
+        <Text marginR-s3 style={styles.typesTitle}>
+          Choose Type
+        </Text>
+        <SegmentedControl
+          initialIndex={0}
+          segments={simulatorOptions}
+          onChangeIndex={index => {
+            onPress(simulatorOptions[index].value);
+          }}
+          backgroundColor={Colors.$backgroundDefault}
+        />
+      </View>
+      <View style={[styles.simulatorWrapper, simulatorSize]} gap-s2>
+        {renderHeader()}
+        <div>{children}</div>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  typesTitle: {
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  simulatorWrapper: {
+    alignSelf: 'center',
+    borderRadius: 40,
+    borderWidth: 4,
+    borderColor: Colors.$outlineDisabledHeavy,
+    overflow: 'hidden'
+  }
+});

docuilib/src/theme/ReactLiveScope/index.js

@@ -55,7 +55,7 @@ const ReactLiveScope = {
   ...React,
   /* Docs' utils and components */
   Data,
-  Playground,
+  ...Playground,
   /* UI Lib's components */
   ActionBar,
   Assets,

scripts/buildDocs.js

@@ -38,6 +38,28 @@ fs.mkdirSync(COMPONENTS_DOCS_DIR);
 
 const compoundComponents = components.filter(c => c.name.includes('.'));
 const parentComponents = _.flow(components => _.map(components, c => c.name.split('.')[0]), _.uniq)(compoundComponents);
+const processSnippet = snippet => {
+  //Replace placeholder texts
+  const processedSnippet = snippet.map(item => item.replace(new RegExp(/\$[1-9]/g), ''));
+  //Check if the snippet is a function or plain JSX
+  const isFunction = processedSnippet[0].trim().startsWith('function');
+
+  if (isFunction) {
+    //Check if <div> tag is immediately after return statement
+    const divTagIndex = processedSnippet.findIndex(line =>
+      line.trim().startsWith('return (') && processedSnippet[processedSnippet.indexOf(line) + 1]?.includes('<div>'));
+
+    if (divTagIndex !== -1) {
+      //If <div> tag is found, replace <div> and </div> with <MobileDeviceWrapper> and </MobileDeviceWrapper>
+      return processedSnippet
+        .map(line => line.replace('<div>', '<MobileDeviceWrapper>').replace('</div>', '</MobileDeviceWrapper>'))
+        .join('\n');
+    }
+  } else {
+    //Wrap the snippet with <MobileDeviceWrapper>
+    return ['<MobileDeviceWrapper>', ...processedSnippet, '</MobileDeviceWrapper>'].join('\n');
+  }
+};
 
 components.forEach(component => {
   const [componentName, componentParentName] = getComponentNameParts(component.name);
@@ -157,7 +179,8 @@ function getFirstTab(component) {
   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';
+    content += processSnippet(component.snippet);
     content += '\n```\n';
   } else {
     console.warn(`${component.name} does not have a snippet`);