unicorn-demo-app 6.12.2 → 6.13.0

package/package.json

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

package/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'
   }
 ];
 

package/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}

package/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'}
     ]
   },

package/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',

package/src/screens/componentScreens/BadgesScreen.tsx

@@ -1,11 +1,8 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
-
+import {Colors, View, Badge, Text, Image, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
 
 const BadgesSpace = 30;
-const plusIcon = require('../../assets/icons/chevronUp.png');
-const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
 const bell = require('../../assets/icons/bell.png');
 
@@ -22,165 +19,149 @@ export default class BadgesScreen extends Component {
     }
   }
 
-  render() {
-    const customElement1 = (
-      <View row>
-        <Image source={bell}/>
-        <Image source={bell}/>
-      </View>
-    );
+  customElement1 = (
+    <View row>
+      <Image source={bell}/>
+      <Image source={bell}/>
+    </View>
+  );
+
+  customElement2 = (
+    <View row>
+      <Image source={bell}/>
+      <Text white text90>
+        37
+      </Text>
+      <Image source={bell}/>
+    </View>
+  );
+
+  onValueChange = (value: number, _?: string) => {
+    this.setState({value});
+  };
 
-    const customElement2 = (
-      <View row>
-        <Image source={bell}/>
-        <Text white text90>
-          37
-        </Text>
-        <Image source={bell}/>
-      </View>
-    );
+  render() {
+    const {value} = this.state;
 
     return (
-      <ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
-        <Text text50 row center marginB-15>
+      <View flex>
+        <Text h1 $textDefault margin-20>
           Badges
         </Text>
-        <View row center style={{alignItems: 'flex-start'}}>
-          <View center paddingH-10>
-            <Badge size={20} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
-            <Badge
-              label={this.state.value.toString()}
-              containerStyle={{marginTop: BadgesSpace}}
-              backgroundColor={Colors.red30}
-              borderWidth={1}
-            />
-            <Badge
-              size={16}
-              label={this.state.value.toString()}
-              containerStyle={{marginTop: BadgesSpace}}
-              backgroundColor={Colors.red30}
-            />
-          </View>
 
-          <View center paddingH-10>
+        <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
+          <View row spread>
             <Badge label={'9999'} labelFormatterLimit={3}/>
             <Badge
               label={'999'}
               labelFormatterLimit={2}
-              containerStyle={{marginTop: BadgesSpace}}
               borderWidth={2}
               borderColor={Colors.white}
             />
-            <Badge labelFormatterLimit={1} size={16} label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
-          </View>
-        </View>
-
-        <View row paddingT-20 marginB-15>
-          <Button
-            bg-grey60
-            style={{width: 30, height: 30, borderWidth: 1, marginRight: 15}}
-            iconSource={minusIcon}
-            avoidMinWidth
-            onPress={() => this.changeLabelValue(-1)}
-            onLongPress={() => this.changeLabelValue(-10)}
-          />
-          <Button
-            bg-grey60
-            style={{width: 30, height: 30, borderWidth: 1}}
-            iconSource={plusIcon}
-            avoidMinWidth
-            onPress={() => this.changeLabelValue(1)}
-            onLongPress={() => this.changeLabelValue(10)}
-          />
-        </View>
-        <Text center>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>
-
-        <Text text50 row center marginT-40>
-          Pimple Badges
-        </Text>
-        <View row>
-          <View
-            center
-            style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
-          >
-            <Text text80 row>
-              size={'{6}'}
-            </Text>
-            <Text text80>size={'{10}'}</Text>
-            <Text text80 row>
-              size={'{14}'}
-            </Text>
+            <Badge labelFormatterLimit={1} size={16} label={'99999999'}/>
           </View>
 
-          <View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
+          <View row spread marginV-20>
+            <Badge size={20} label={value.toString()} backgroundColor={Colors.red30}/>
+            <Badge
+              label={value.toString()}
+              backgroundColor={Colors.red30}
+              borderWidth={1}
+              borderColor={Colors.$outlinePrimary}
+            />
+            <Badge
+              size={16}
+              label={value.toString()}
+              backgroundColor={Colors.red30}
+            />
           </View>
-        </View>
-        <Text text50 marginB-10 row center marginT-25>
-          Icon Badges
-        </Text>
-        <View row paddingH-15>
-          <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={16} icon={star} borderWidth={1} borderColor={Colors.red30}/>
-            <Text text80 style={{marginTop: 10}}>
-              small(16)
-            </Text>
+          <View center>
+            <Stepper onValueChange={this.onValueChange} value={value} maxValue={100} minValue={1}/>
           </View>
-
-          <View style={styles.iconBadgeColumnContainer}>
-            <Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
-            <Text text80 style={{marginTop: 10}}>
-              default(20)
-            </Text>
+          <Text center $textDefault marginT-10>Press buttons to change red badge value by 1.{'\n'}Long press to change it by 10.</Text>
+
+          <Text row center text50 $textDefault marginT-40 >
+            Pimple Badges
+          </Text>
+          <View row>
+            <View center style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}>
+              <Text row text80 $textDefault>
+                size={'{6}'}
+              </Text>
+              <Text text80 $textDefault>size={'{10}'}</Text>
+              <Text row text80 $textDefault>
+                size={'{14}'}
+              </Text>
+            </View>
+            <View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
+              <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
+              <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
+              <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
+            </View>
           </View>
 
-          <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
-            <Text text80 style={{marginTop: 10}}>
-              large(24)
-            </Text>
+          <Text row center text50 $textDefault margin-25>
+            Icon Badges
+          </Text>
+          <View row spread>
+            <View center>
+              <Badge 
+                size={16} 
+                icon={star} 
+                borderWidth={1} 
+                borderColor={Colors.red30} 
+                iconStyle={{tintColor: Colors.red30}}
+              />
+              <Text $textDefault text80 style={{marginTop: 10}}>
+                small(16)
+              </Text>
+            </View>
+
+            <View center>
+              <Badge icon={star} iconStyle={{tintColor: Colors.red30}}/>
+              <Text $textDefault text80 style={{marginTop: 10}}>
+                default(20)
+              </Text>
+            </View>
+
+            <View center>
+              <Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
+              <Text $textDefault text80 style={{marginTop: 10}}>
+                large(24)
+              </Text>
+            </View>
+
+            <View center>
+              <Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
+              <Text $textDefault text80 style={{marginTop: 10}}>
+                border radius
+              </Text>
+            </View>
           </View>
 
-          <View style={styles.iconBadgeColumnContainer}>
-            <Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
-            <Text text80 style={{marginTop: 10}}>
-              border radius
-            </Text>
+          <Text row center text50 $textDefault margin-25>
+            Counter Icon Badges
+          </Text>
+          <View row spread marginH-50>
+            <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
+            <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
           </View>
-        </View>
-
-        <Text text50 marginB-10 row center marginT-25>
-          Counter Icon Badges
-        </Text>
-        <View row paddingH-15>
-          <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
-          <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
-        </View>
 
-        <Text text50 marginB-10 row center marginT-25>
-          Custom Element Badges
-        </Text>
-        <View row paddingH-15>
-          <Badge marginR-10 label={'17'} customElement={customElement1}/>
-          <Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
-        </View>
-      </ScrollView>
+          <Text row center text50 $textDefault margin-25>
+            Custom Element Badges
+          </Text>
+          <View row spread marginH-50>
+            <Badge marginR-10 label={'17'} customElement={this.customElement1}/>
+            <Badge marginR-10 customElement={this.customElement2} backgroundColor={Colors.grey30}/>
+          </View>
+        </ScrollView>
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    padding: 20,
-    backgroundColor: Colors.grey70
-  },
-  iconBadgeColumnContainer: {
-    flex: 1,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'column'
+    padding: 20
   }
 });