Live-code device wrapper

docuilib/src/MobileDeviceWrapper.tsx

@@ -0,0 +1,79 @@
+import React, {useState, useEffect} from 'react';
+import {StyleSheet} from 'react-native';
+import {View, Text, Colors, Spacings} from 'react-native-ui-lib/core';
+import SegmentedControl from 'react-native-ui-lib/segmentedControl';
+
+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}
+];
+
+const 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);
+  };
+
+  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]}>{children}</View>
+    </View>
+  );
+};
+
+export default MobileDeviceWrapper;
+
+const styles = StyleSheet.create({
+  typesTitle: {
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  simulatorWrapper: {
+    alignSelf: 'center',
+    borderRadius: 40,
+    borderWidth: 4,
+    borderColor: Colors.$outlineDisabledHeavy,
+    marginVertical: Spacings.s2,
+    overflow: 'hidden'
+  }
+});

docuilib/src/theme/ReactLiveScope/index.js

@@ -9,11 +9,13 @@ import RadioGroup from 'react-native-ui-lib/radioGroup';
 import SegmentedControl from 'react-native-ui-lib/segmentedControl';
 import Switch from 'react-native-ui-lib/switch';
 import TextField from 'react-native-ui-lib/textField';
+import MobileDeviceWrapper from '../../MobileDeviceWrapper';
 
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,
   ...React,
+  MobileDeviceWrapper,
   /* uilib components */
   ActionBar,
   Button,

scripts/buildDocs.js

@@ -156,8 +156,21 @@ function getFirstTab(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 += '```jsx live\n';
+
+    content += '\n';
+    content += '<MobileDeviceWrapper>\n';
+    // Map and wrap each snippet, then join them together
+    const wrappedSnippets = component.snippet
+      .map(item => {
+        // Replace placeholders and wrap with MobileDeviceWrapper
+        const cleanedSnippet = _.replace(item, new RegExp(/\$[1-9]/, 'g'), '');
+        return `${cleanedSnippet}`;
+      })
+      .join('\n');
+
+    content += wrappedSnippets;
+    content += '\n</MobileDeviceWrapper>\n';
     content += '\n```\n';
   }