Live Code - support more components 2

docuilib/src/assets/data/products.ts

@@ -0,0 +1,180 @@
+const products = [
+  {
+    id: 'a',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 1
+    },
+    mediaUrl: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
+  },
+  {
+    id: 'b',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 2
+    },
+    mediaUrl: 'https://images.pexels.com/photos/3737604/pexels-photo-3737604.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
+  },
+  {
+    id: 'c',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 1
+    },
+    mediaUrl: 'https://images.pexels.com/photos/3685538/pexels-photo-3685538.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
+  },
+  {
+    id: 'd',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'Out of Stock',
+      quantity: 0
+    },
+    mediaUrl: 'https://images.pexels.com/photos/4202467/pexels-photo-4202467.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'
+  },
+  {
+    id: 'e',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 3
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_f9de629d8c97416f82b398725bd49918.jpg_128'
+  },
+  {
+    id: 'f',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'statu',
+      status: 'Out of Stock',
+      quantity: 0
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_1782572f1dfc49d397e830918d912568.jpg_128'
+  },
+  {
+    id: 'g',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_03906910d07749199b09e443ce9fed6c.jpg_128'
+  },
+  {
+    id: 'h',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 11
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_9d3e5b8fc70e4d2997806ece35e7de54.jpg_128'
+  },
+  {
+    id: 'i',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_db24e0568cdc4a82be0a8559fb123b55.jpg_128'
+  },
+  {
+    id: 'j',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 2
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_085a5f9575ba4b208f6091b26cbda4c4.jpg_128'
+  },
+  {
+    id: 'k',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 8
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/cda177_82d66fece3e54a7aa10d49bda4d98259.jpg_128'
+  },
+  {
+    id: 'l',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 8
+    },
+    mediaUrl: 'https://static.wixstatic.com/media/84770f_c611ded729fd4461a1bb57134d4e9dd2.png_128'
+  },
+  {
+    id: 'm',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 3
+    },
+    mediaUrl: 'https://images.pexels.com/photos/3612182/pexels-photo-3612182.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    id: 'n',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 22
+    },
+    mediaUrl: 'https://images.pexels.com/photos/4841529/pexels-photo-4841529.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    id: 'o',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://images.pexels.com/photos/4173450/pexels-photo-4173450.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    id: 'p',
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://images.pexels.com/photos/10513273/pexels-photo-10513273.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  }
+];
+
+export default products;

docuilib/src/theme/ReactLiveScope/Playground.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, View} from 'react-native-ui-lib/core';
+import Switch from 'react-native-ui-lib/switch';
+
+interface ControlBaseProps<S> {
+  state: S;
+  setState: React.Dispatch<React.SetStateAction<S>>;
+}
+
+interface ToggleControlProps extends ControlBaseProps<boolean> {
+  title: string;
+  key?: string;
+  spread?: boolean;
+}
+
+export function ToggleControl(props: ToggleControlProps) {
+  const {state, setState, title, spread = false, key = 'does not change'} = props;
+  return (
+    <View row centerV spread={spread} marginB-s4 key={key}>
+      <Text $textDefault flex={spread} marginR-s4={!spread}>
+        {title}
+      </Text>
+      <Switch key={key} testID={key} value={state} onValueChange={setState}/>
+    </View>
+  );
+}

docuilib/src/theme/ReactLiveScope/configurations.ts

@@ -0,0 +1,6 @@
+import {ThemeManager} from 'react-native-ui-lib/core';
+
+ThemeManager.setComponentForcedTheme('Icon', props => {
+  const {source} = props;
+  return source?.source ? source : undefined;
+});

docuilib/src/theme/ReactLiveScope/index.js

@@ -1,29 +1,83 @@
 import React from 'react';
+import products from '../../assets/data/products';
+require('./configurations');
 import {Colors} from 'react-native-ui-lib/style';
-import {Button, Image, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
+import {BorderRadiuses, Button, Image, Spacings, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
 import ActionBar from 'react-native-ui-lib/actionBar';
+import Assets from 'react-native-ui-lib/assets';
+import Card from 'react-native-ui-lib/card';
+import Carousel from 'react-native-ui-lib/carousel';
 import Checkbox from 'react-native-ui-lib/checkbox';
 import Chip from 'react-native-ui-lib/chip';
+import Constants from 'react-native-ui-lib/constants';
+import Drawer from 'react-native-ui-lib/drawer';
+import Icon from 'react-native-ui-lib/icon';
+import Incubator from 'react-native-ui-lib/incubator';
+import MaskedInput from 'react-native-ui-lib/maskedInput';
 import RadioButton from 'react-native-ui-lib/radioButton';
 import RadioGroup from 'react-native-ui-lib/radioGroup';
 import SegmentedControl from 'react-native-ui-lib/segmentedControl';
+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 * as Playground from './Playground';
+
+Assets.loadAssetsGroup('icons.demo', {
+  // chevronDown: require('../../assets/icons/chevronDown.png').default,
+  chevronRight: {
+    source: require('../../assets/icons/chevronRight.png').default,
+    style: {width: 24, height: 24}
+  },
+  // add: require('../../assets/icons/add.png').default,
+  // camera: require('../../assets/icons/cameraSelected.png').default,
+  // close: require('../../assets/icons/close.png').default,
+  // dashboard: require('../../assets/icons/dashboard.png').default,
+  drag: {
+    source: require('../../assets/icons/drag.png').default,
+    style: {width: 10, height: 16}
+  }
+  // image: require('../../assets/icons/image.png').default,
+  // plus: require('../../assets/icons/plus.png').default,
+  // refresh: require('../../assets/icons/refresh.png').default,
+  // search: require('../../assets/icons/search.png').default,
+  // settings: require('../../assets/icons/settings.png').default,
+  // share: require('../../assets/icons/share.png').default,
+  // info: require('../../assets/icons/info.png').default,
+  // exclamation: require('../../assets/icons/exclamationFillSmall.png').default
+});
+
+const Data = {products};
 
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,
   ...React,
-  /* uilib components */
+  /* Docs' utils and components */
+  Data,
+  Playground,
+  /* UI Lib's components */
   ActionBar,
+  Assets,
+  BorderRadiuses,
   Button,
+  Card,
+  Carousel,
   Checkbox,
   Chip,
+  Constants,
   Colors,
+  Drawer,
+  Icon,
   Image,
+  Incubator,
+  MaskedInput,
   RadioButton,
   RadioGroup,
   SegmentedControl,
+  SortableGridList,
+  SortableList,
+  Spacings,
   Switch,
   Text,
   TextField,

scripts/buildDocs.js

@@ -155,10 +155,12 @@ function getFirstTab(component) {
 
   /* Snippet */
   if (component.snippet) {
-    content += '### Usage\n';
+    content += `### Usage\n`;
     content += '``` jsx live\n';
     content += component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
     content += '\n```\n';
+  } else {
+    console.warn(`${component.name} does not have a snippet`);
   }
 
   /* Props */

scripts/buildPackages/buildCustomPackages.js

@@ -6,6 +6,10 @@ const packages = [
     filename: 'keyboard.js',
     content: `module.exports = require('./lib/components/Keyboard').default;\n`
   },
+  {
+    filename: 'assets.js',
+    content: `module.exports = require('./src/assets').default;\n`
+  },
   {
     filename: 'config.js',
     content: `module.exports = require('./src/commons/Config').default;\n`
@@ -27,6 +31,10 @@ const packages = [
       'Scheme'
     ]
   },
+  {
+    filename: 'incubator.js',
+    incubatorComponents: ['Dialog', 'ExpandableOverlay', 'Slider', 'Toast']
+  },
   {
     filename: 'style.js',
     styleComponents: [
@@ -56,7 +64,7 @@ packages.forEach((package) => {
   let content = package.content || '';
   let typings = '';
 
-  if (package.components || package.styleComponents) {
+  if (package.components || package.incubatorComponents || package.styleComponents) {
     content += 'module.exports = {\n';
     _.forEach(package.components, (component) => {
       content += `get ${component}() {\n`;
@@ -66,6 +74,14 @@ packages.forEach((package) => {
       typings = addTyping(typings, component);
     });
 
+    _.forEach(package.incubatorComponents, (component) => {
+      content += `get ${component}() {\n`;
+      content += `return require('./src/incubator/${_.camelCase(component)}').default;`;
+      content += `},\n`;
+
+      typings = addTyping(typings, component);
+    });
+
     _.forEach(package.styleComponents, (component) => {
       content += `get ${component}() {\n`;
       content += `return require('./src/style/${_.camelCase(component)}').default;`;

src/components/card/card.api.json

@@ -42,8 +42,12 @@
     }
   ],
   "snippet": [
-    "<Card flex center onPress={() => console.log('pressed')}$1>",
-    " <Card.Image source={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg'$2}}/>",
+    "<Card  width={70} height={70} onPress={() => console.log('pressed')}$1>",
+    " <Card.Image",
+    "   width={70}",
+    "   height={70}",
+    "   source={{uri: 'https://images.pexels.com/photos/248412/pexels-photo-248412.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200'$2}}",
+    " />",
     "</Card>"
   ]
 }