Add live code playground in uilib docs (#3254)

* Add live code playground in uilib docs

* Update live code example

Author: ethanshar

docs/getting-started/usage.md

@@ -1,9 +1,10 @@
 ---
 sidebar_position: 2
 sidebar_label: Usage
-title: "Usage"
+title: 'Usage'
 # path: "/getting-started/usage"
 ---
+
 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...
 
@@ -14,19 +15,45 @@ import React, {Component} from 'react';
 import {View, TextField, Text, Button} from 'react-native-ui-lib';
 
 export default class Example extends Component {
-
   render() {
     return (
       <View flex paddingH-25 paddingT-120>
-        <Text blue50 text20>Welcome</Text>
-        <TextField text50 placeholder="username" grey10/>
-        <TextField text50 placeholder="password" secureTextEntry grey10/>
+        <Text blue50 text20>
+          Welcome
+        </Text>
+        <TextField text50 placeholder="username" grey10 />
+        <TextField text50 placeholder="password" secureTextEntry grey10 />
         <View marginT-100 center>
-          <Button text70 white background-orange30 label="Login"/>
-          <Button link text70 orange30 label="Sign Up" marginT-20/>
+          <Button text70 white background-orange30 label="Login" />
+          <Button link text70 orange30 label="Sign Up" marginT-20 />
         </View>
       </View>
     );
   }
 }
 ```
+
+```jsx live
+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>
+
+        <View row marginT-s5 centerV>
+          <Button link text70 orange30 label="Sign Up" marginR-s5 />
+          <Button text70 white background-orange30 label="Login" />
+        </View>
+      </View>
+    </div>
+  );
+}
+```

docuilib/docusaurus.config.js

@@ -20,7 +20,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack',
       stars: '4.7'
     },
-    plugins: ['docusaurus-plugin-sass'],
+    plugins: ['docusaurus-plugin-sass', '@docusaurus/theme-live-codeblock', './plugins/uilib.js'],
     presets: [
       [
         '@docusaurus/preset-classic',

docuilib/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "2.3",
     "@docusaurus/preset-classic": "2.3",
+    "@docusaurus/theme-live-codeblock": "2.3",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "classnames": "^2.3.1",
@@ -25,6 +26,11 @@
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-native-linear-gradient": "2.6.2",
+    "react-native-reanimated": "^3.15.1",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-ui-lib": "snapshot",
+    "react-native-web": "^0.19.12",
     "sass": "^1.39.0",
     "url-loader": "^4.1.1"
   },
@@ -34,6 +40,7 @@
     "@types/react": "^17.0.14",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
+    "babel-plugin-react-native-web": "^0.19.12",
     "typescript": "^4.3.5"
   },
   "browserslist": {

docuilib/plugins/uilib.js

@@ -0,0 +1,68 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = ({siteDir}, options) => {
+  const baseProjectSource = [
+    path.resolve(siteDir, 'src'),
+    path.resolve(siteDir, 'node_modules/react-native-web'),
+    path.resolve(siteDir, 'node_modules/react-native-ui-lib'),
+    // // just for not getting warnings
+    path.resolve(siteDir, 'node_modules/react-native-shimmer-placeholder'),
+    path.resolve(siteDir, 'node_modules/react-native-linear-gradient')
+    // // end just for not getting warnings
+    // path.resolve(siteDir, 'node_modules/react-native-haptic-feedback'),
+    // path.resolve(siteDir, 'node_modules/react-native-animatable'),
+    // path.resolve(siteDir, 'node_modules/react-native-reanimated'),
+    // path.resolve(siteDir, 'node_modules/react-native-svg'),
+    // path.resolve(siteDir, 'node_modules/react-native-svg-transformer'),
+    // path.resolve(siteDir, 'node_modules/@react-native-community/netinfo'),
+    // path.resolve(siteDir, 'node_modules/@react-native-community/datetimepicker'),
+    // path.resolve(siteDir, 'node_modules/react-native-color'),
+
+    // path.resolve(siteDir, 'node_modules/postcss'),
+    // path.resolve(siteDir, 'node_modules/postcss-js')
+  ];
+
+  const useBabelForRN = {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: false,
+      // The 'react-native' preset is recommended to match React Native's packager
+      presets: ['module:metro-react-native-babel-preset'],
+      plugins: ['react-native-web', 'react-native-reanimated/plugin']
+    }
+  };
+
+  const babelLoaderAppConfiguration = {
+    test: /\.(js|jsx|ts|tsx)$/,
+    include: baseProjectSource,
+    use: useBabelForRN
+  };
+
+  return {
+    name: 'uilib-plugin',
+    configureWebpack(config, isServer, utils) {
+      return {
+        mergeStrategy: {
+          'resolve.extensions': 'prepend'
+        },
+        plugins: [
+          new webpack.DefinePlugin({
+            process: {env: {}},
+            __DEV__: 'false',
+            setImmediate: () => {}
+          })
+        ],
+        module: {
+          rules: [babelLoaderAppConfiguration]
+        },
+        resolve: {
+          alias: {
+            'react-native$': 'react-native-web'
+          },
+          extensions: ['.web.js']
+        }
+      };
+    }
+  };
+};

docuilib/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Text from 'react-native-ui-lib/text';
+import View from 'react-native-ui-lib/view';
+import Button from 'react-native-ui-lib/button';
+import TextField from 'react-native-ui-lib/textField';
+import SegmentedControl from 'react-native-ui-lib/segmentedControl';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  /* uilib components */
+  View,
+  Text,
+  Button, 
+  TextField,
+  SegmentedControl
+};
+
+export default ReactLiveScope;