unicorn-demo-app 6.18.2 → 6.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "6.18.2",
+  "version": "6.19.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/data/products.ts

@@ -1,5 +1,6 @@
 const products = [
   {
+    id: 'a',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -10,6 +11,7 @@ const products = [
     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: {
@@ -20,6 +22,7 @@ const products = [
     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: {
@@ -30,6 +33,7 @@ const products = [
     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: {
@@ -40,6 +44,7 @@ const products = [
     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: {
@@ -50,6 +55,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_f9de629d8c97416f82b398725bd49918.jpg_128'
   },
   {
+    id: 'f',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -60,6 +66,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_1782572f1dfc49d397e830918d912568.jpg_128'
   },
   {
+    id: 'g',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -70,6 +77,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_03906910d07749199b09e443ce9fed6c.jpg_128'
   },
   {
+    id: 'h',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -80,6 +88,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_9d3e5b8fc70e4d2997806ece35e7de54.jpg_128'
   },
   {
+    id: 'i',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -90,6 +99,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_db24e0568cdc4a82be0a8559fb123b55.jpg_128'
   },
   {
+    id: 'j',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -100,6 +110,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_085a5f9575ba4b208f6091b26cbda4c4.jpg_128'
   },
   {
+    id: 'k',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -110,6 +121,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/cda177_82d66fece3e54a7aa10d49bda4d98259.jpg_128'
   },
   {
+    id: 'l',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -120,6 +132,7 @@ const products = [
     mediaUrl: 'https://static.wixstatic.com/media/84770f_c611ded729fd4461a1bb57134d4e9dd2.png_128'
   },
   {
+    id: 'm',
     name: 'I\'m a Product',
     formattedPrice: '$19.99',
     inventory: {
@@ -130,6 +143,7 @@ const products = [
     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: {
@@ -140,6 +154,7 @@ const products = [
     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: {
@@ -150,6 +165,7 @@ const products = [
     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: {

package/src/screens/componentScreens/AvatarsScreen.tsx

@@ -12,7 +12,7 @@ const examples = [
   {
     title: 'Initials with Color',
     label: 'AD',
-    backgroundColor: Colors.$backgroundWarning,
+    backgroundColor: Colors.$backgroundWarningLight,
     labelColor: Colors.$textMajor,
     ribbonLabel: 'New',
     ribbonStyle: {backgroundColor: Colors.purple30}
@@ -95,13 +95,13 @@ const examples = [
   },
   {
     title: 'Empty Gravatar',
-    backgroundColor: Colors.$backgroundDanger,
+    backgroundColor: Colors.$backgroundDangerLight,
     source: {uri: 'https://www.gravatar.com/avatar/2497473d558a37020c558bf26e380a7c?d=blank'}
   },
   {
     title: 'With custom badge label',
     label: 'LD',
-    backgroundColor: Colors.$backgroundDanger,
+    backgroundColor: Colors.$backgroundDangerLight,
     badgePosition: 'BOTTOM_RIGHT',
     badgeProps: {
       label: '+2',

package/src/screens/componentScreens/ButtonsScreen.tsx

@@ -103,7 +103,7 @@ export default class ButtonsScreen extends Component {
             <Button
               label={'Dark Label'}
               $textDanger
-              backgroundColor={Colors.$backgroundDanger}
+              backgroundColor={Colors.$backgroundDangerLight}
               style={{marginBottom: ButtonSpace}}
             />
             <Button label={'With Shadow'} enableShadow style={{marginBottom: ButtonSpace}}/>
@@ -275,12 +275,12 @@ export default class ButtonsScreen extends Component {
             <Button
               fullWidth
               size="medium"
-              bg-$backgroundDanger
+              bg-$backgroundDangerLight
               $textDefault
               label="Medium Size Full Width"
               marginB-10
             />
-            <Button fullWidth size="small" bg-$backgroundSuccess $textSuccess label="Small Size Full Width"/>
+            <Button fullWidth size="small" bg-$backgroundSuccessLight $textSuccess label="Small Size Full Width"/>
           </View>
         </ScrollView>
       </View>

package/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -55,20 +55,20 @@ export default class ColorSwatchScreen extends Component {
     const {color, color1, color2, selected} = this.state;
 
     return (
-      <ScrollView style={{backgroundColor: Colors.$backgroundNeutralLight}}>
+      <ScrollView>
         <View flex center useSafeArea>
-          <Text margin-5 text60 grey10>
+          <Text margin-5 text60>
             Single ColorSwatch
           </Text>
           <View row>
             <ColorSwatch selected={selected} onPress={this.onPress}/>
             <View>
-              <ColorSwatch selected color={Colors.$backgroundMajor}/>
+              <ColorSwatch selected color={Colors.$backgroundMajorLight}/>
               <Text>Disabled</Text>
             </View>
           </View>
 
-          <Text marginT-20 text60 grey10>
+          <Text marginT-20 text60>
             ColorPalette
           </Text>
           <Text marginB-10 text70 style={{color}}>
@@ -76,12 +76,12 @@ export default class ColorSwatchScreen extends Component {
           </Text>
           <ColorPalette value={color} onValueChange={this.onValueChange} colors={this.colors}/>
 
-          <Text margin-10 text60 grey10>
+          <Text margin-10 text60>
             Scrollable
           </Text>
           <ColorPalette value={color1} onValueChange={this.onValueChange1} colors={this.mainColors}/>
 
-          <Text margin-10 text60 grey10>
+          <Text margin-10 text60>
             Pagination
           </Text>
           <ColorPalette

package/src/screens/componentScreens/PickerScreen.tsx

@@ -135,9 +135,10 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            title="Native Picker"
+            title="Wheel Picker"
             placeholder="Pick a Language"
-            useNativePicker
+            // useNativePicker
+            useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}

package/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -15,7 +15,7 @@ import {
 import _ from 'lodash';
 import products from '../../data/products';
 
-const productsWithIds = products.map((product, index) => ({...product, id: index.toString()}));
+const productsWithIds = products.map((product) => ({...product}));
 type Item = typeof productsWithIds[0];
 
 class SortableGridListScreen extends Component {
@@ -120,7 +120,7 @@ class SortableGridListScreen extends Component {
 
 const styles = StyleSheet.create({
   list: {
-    padding: Spacings.s5
+    paddingTop: Spacings.s5
   },
   itemImage: {
     width: '100%',

package/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -174,7 +174,7 @@ class TabControllerScreen extends Component<{}, State> {
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             enableShadow
-            activeBackgroundColor={Colors.$backgroundPrimaryLight}
+            activeBackgroundColor={Colors.$backgroundPrimaryMedium}
             centerSelected={centerSelected}
           >
             {/* {this.renderTabItems()} */}

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -107,7 +107,7 @@ export default class ToastsScreen extends Component {
         swipeable={isSwipeable}
         onDismiss={this.toggleVisibility}
         autoDismiss={3500}
-        // backgroundColor={Colors.$backgroundSuccess}
+        // backgroundColor={Colors.$backgroundSuccessLight}
         // icon={Assets.icons.demo.add}
         // iconColor={Colors.$backgroundSuccessHeavy}
         // style={{borderWidth: 1, borderColor: Colors.$outlineDisabled}}

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -44,6 +44,9 @@ const colors: Item[] = [
   {value: Colors.yellow50, label: 'Yellow50'},
   {value: Colors.yellow70, label: 'Yellow70'}
 ];
+const TOAST_DIRECTIONS = [PanView.directions.LEFT, PanView.directions.DOWN, PanView.directions.RIGHT];
+const DIALOG_DIRECTIONS = [PanView.directions.DOWN];
+const TOAST_THRESHOLD = {y: 10};
 
 class PanViewScreen extends Component {
   state = {
@@ -78,10 +81,9 @@ class PanViewScreen extends Component {
           visible
         >
           <PanView
-            directions={[PanView.directions.DOWN]}
+            directions={DIALOG_DIRECTIONS}
             dismissible
             animateToOrigin
-            // threshold={{y: 10}}
             containerStyle={styles.panView}
             onDismiss={this.onDialogDismissed}
           >
@@ -111,11 +113,11 @@ class PanViewScreen extends Component {
   renderToast = () => {
     return (
       <PanView
-        directions={[PanView.directions.LEFT, PanView.directions.DOWN, PanView.directions.RIGHT]}
+        directions={TOAST_DIRECTIONS}
         dismissible
         animateToOrigin
         directionLock
-        threshold={{y: 10}}
+        threshold={TOAST_THRESHOLD}
         containerStyle={styles.panView}
         onDismiss={this.onToastDismissed}
       >
@@ -146,7 +148,7 @@ class PanViewScreen extends Component {
     const {showToast, showDialog} = this.state;
     const Container = showDialog ? View : GestureHandlerRootView;
     return (
-      <Container style={[styles.root, styles.gestureHandler]}>
+      <Container style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -171,11 +173,9 @@ export default PanViewScreen;
 
 const styles = StyleSheet.create({
   root: {
+    flex: 1,
     backgroundColor: Colors.grey80
   },
-  gestureHandler: {
-    flex: 1
-  },
   panView: {
     flex: 1,
     position: 'absolute',