Merge branch 'master' into release

Author: lidord-wix

.github/stale.yml

@@ -17,7 +17,7 @@ exemptLabels:
   - "typescript"
 
 # Set to true to ignore issues in a project (defaults to false)
-exemptProjects: false
+exemptProjects: true
 
 # Set to true to ignore issues in a milestone (defaults to false)
 exemptMilestones: false

.npmignore

@@ -247,4 +247,6 @@ index.ios.js
 *.ts
 *.tsx
 # include the .d.ts files
-!*.d.ts 
+!*.d.ts
+
+!testkit/*.ts

demo/src/data/products.ts

@@ -118,6 +118,46 @@ const products = [
       quantity: 8
     },
     mediaUrl: 'https://static.wixstatic.com/media/84770f_c611ded729fd4461a1bb57134d4e9dd2.png_128'
+  },
+  {
+    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'
+  },
+  {
+    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'
+  },
+  {
+    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'
+  },
+  {
+    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'
   }
 ];
 

demo/src/screens/ExampleScreenPresenter.tsx

@@ -24,7 +24,7 @@ interface RadioGroupOptions {
 
 export function renderHeader(title: string, others: TextProps) {
   return (
-    <Text text30 grey10 {...others}>
+    <Text text30 $textDefault {...others}>
       {title}
     </Text>
   );
@@ -35,7 +35,7 @@ export function renderBooleanOption(title: string, key: string) {
   const value = this.state[key];
   return (
     <View row centerV spread marginB-s4 key={key}>
-      <Text flex>{title}</Text>
+      <Text $textDefault flex>{title}</Text>
       <Switch
         useCustomTheme
         key={key}
@@ -51,7 +51,7 @@ export function renderBooleanOption(title: string, key: string) {
 export function renderBooleanGroup(title: string, options: string[]) {
   return (
     <View marginB-s2>
-      <Text text70M marginB-s2>
+      <Text text70M $textDefault marginB-s2>
         {title}
       </Text>
       <View row style={styles.rowWrap}>
@@ -69,7 +69,7 @@ export function renderBooleanGroup(title: string, options: string[]) {
                 // @ts-ignore
                 onValueChange={value => this.setState({[key]: value})}
               />
-              <Text text70 marginR-s3 marginB-s2>
+              <Text text70 marginR-s3 $textDefault marginB-s2>
                 {key}
               </Text>
             </View>
@@ -89,7 +89,7 @@ export function renderRadioGroup(title: string,
   return (
     <View marginB-s2>
       {!_.isUndefined(title) && (
-        <Text text70M marginB-s2>
+        <Text text70M $textDefault marginB-s2>
           {title}
         </Text>
       )}
@@ -125,7 +125,7 @@ export function renderColorOption(title: string,
   const value = this.state[key];
   return (
     <View marginV-s2>
-      <Text text70M>{title}</Text>
+      <Text text70M $textDefault>{title}</Text>
       <ColorPalette
         value={value}
         colors={colors}
@@ -143,7 +143,7 @@ export function renderSliderOption(title: string,
   const value = this.state[key] || initial;
   return (
     <View marginV-s2>
-      <Text marginB-s1 text70M>
+      <Text marginB-s1 text70M $textDefault>
         {title}
       </Text>
       <View row centerV>
@@ -157,7 +157,7 @@ export function renderSliderOption(title: string,
           // @ts-ignore
           onValueChange={value => this.setState({[key]: value})}
         />
-        <Text marginL-s4 text70 style={styles.text}>
+        <Text marginL-s4 text70 $textDefault style={styles.text}>
           {sliderText}
           {value}
         </Text>
@@ -173,7 +173,7 @@ export function renderMultipleSegmentOptions(title: string, key: string, options
 
   return (
     <View row centerV spread marginB-s4 key={key}>
-      {!!title && <Text marginR-s2>{title}</Text>}
+      {!!title && <Text $textDefault marginR-s2>{title}</Text>}
       <SegmentedControl
         initialIndex={index}
         segments={options}

demo/src/screens/MenuStructure.js

@@ -112,6 +112,8 @@ export const navigationData = {
         screen: 'unicorn.components.FaderScreen'
       },
       {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'},
+      {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
+      {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'},
       {title: 'GridView', tags: 'grid view', screen: 'unicorn.components.GridViewScreen'}
     ]
   },

demo/src/screens/componentScreens/AvatarsScreen.tsx

@@ -1,19 +1,19 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView, View, Text, StyleSheet, Alert} from 'react-native';
-import {Avatar, AvatarHelper, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {ScrollView, StyleSheet, Alert} from 'react-native';
+import {Avatar, AvatarHelper, View, Text, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 
 
 const star = require('../../assets/icons/star.png');
-const onlineColor = Colors.green30;
+const onlineColor = Colors.$backgroundSuccessHeavy;
 const examples = [
   {title: 'Custom Background', backgroundColor: Colors.violet60},
   {title: 'Empty Avatar with ribbon', ribbonLabel: 'New'},
   {
     title: 'Initials with Color',
     label: 'AD',
-    backgroundColor: Colors.yellow60,
-    labelColor: Colors.orange20,
+    backgroundColor: Colors.$backgroundWarning,
+    labelColor: Colors.$textMajor,
     ribbonLabel: 'New',
     ribbonStyle: {backgroundColor: Colors.purple30}
   },
@@ -24,7 +24,7 @@ const examples = [
       uri:
         'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'
     },
-    badgeProps: {size: 10, backgroundColor: Colors.yellow30},
+    badgeProps: {size: 10, backgroundColor: Colors.$backgroundWarningHeavy},
     badgePosition: 'BOTTOM_RIGHT'
   },
 
@@ -35,7 +35,7 @@ const examples = [
       uri:
         'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
     },
-    badgeProps: {size: 10, backgroundColor: Colors.grey50},
+    badgeProps: {size: 10, backgroundColor: Colors.$backgroundDisabled},
     badgePosition: 'BOTTOM_LEFT'
   },
   {
@@ -65,8 +65,8 @@ const examples = [
       icon: star,
       size: 14,
       borderWidth: 1.5,
-      borderColor: Colors.white,
-      iconStyle: {backgroundColor: Colors.yellow20}
+      borderColor: Colors.$outlineLight,
+      iconStyle: {backgroundColor: Colors.$backgroundWarningHeavy}
     }
   },
   {
@@ -79,7 +79,7 @@ const examples = [
   {
     title: 'Invalid Gravatar (see logs)',
     label: '🤦',
-    backgroundColor: Colors.grey60,
+    backgroundColor: Colors.$backgroundNeutralMedium,
     source: {uri: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=404'},
     onImageLoadStart: () => console.log('AvatarScreen: Invalid avatar load STARTED...'), // eslint-disable-line
     onImageLoadEnd: () => console.log('AvatarScreen: Invalid avatar load ENDED'), // eslint-disable-line
@@ -88,26 +88,26 @@ const examples = [
   {
     title: 'Monitored Avatar (see logs)',
     label: '?!',
-    backgroundColor: Colors.blue20,
+    backgroundColor: Colors.$backgroundGeneralHeavy,
     source: {uri: 'https://static.altomusic.com/media/catalog/product/M/A/MAJ100SBK_0.jpg'},
     onImageLoadStart: () => console.log('AvatarScreen: Monitored avatar load STARTED...'), // eslint-disable-line
     onImageLoadEnd: () => console.log('AvatarScreen: Monitored avatar load ENDED') // eslint-disable-line
   },
   {
     title: 'Empty Gravatar',
-    backgroundColor: Colors.red60,
+    backgroundColor: Colors.$backgroundDanger,
     source: {uri: 'https://www.gravatar.com/avatar/2497473d558a37020c558bf26e380a7c?d=blank'}
   },
   {
     title: 'With custom badge label',
     label: 'LD',
-    backgroundColor: Colors.red60,
+    backgroundColor: Colors.$backgroundDanger,
     badgePosition: 'BOTTOM_RIGHT',
     badgeProps: {
       label: '+2',
       size: 24,
       borderWidth: 1.5,
-      borderColor: Colors.white
+      borderColor: Colors.$outlineLight
     }
   }
 ];
@@ -130,7 +130,7 @@ export default class AvatarsScreen extends Component {
       <ScrollView contentContainerStyle={styles.container}>
         {_.map(examples, (example, i) => (
           <View key={i} style={styles.section}>
-            <Text style={{...Typography.text80}}>{example.title}</Text>
+            <Text $textDefault style={{...Typography.text80}}>{example.title}</Text>
             <Avatar containerStyle={{marginVertical: 5}} {...example} onPress={() => this.onAvatarPress(example)}/>
           </View>
         ))}
@@ -141,7 +141,8 @@ export default class AvatarsScreen extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 25
+    padding: 25,
+    backgroundColor: Colors.$backgroundDefault
   },
   section: {
     flexDirection: 'row',