Merge branch 'master' into release

Author: ethanshar

CONTRIBUTING.md

@@ -0,0 +1,40 @@
+# Contributing
+If you got here it means you want to dedicate some of your time and help us improve this library.  
+So first of all, thank you ❤️
+
+When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/wix/react-native-ui-lib/issues/new/choose),
+[Discord channel](https://discord.gg/2eW4g6Z), or any other method with the owners of this repository before making a change. 
+
+## Pull Request Process
+
+1. First make sure the environment is working and synced with master. For installation details go [here](https://github.com/wix/react-native-ui-lib/blob/master/markdowns/getting-started/setup.md#demo-app)
+2. Before submitting a PR we suggest running `npm run prepush` command that verifies our lint, TS and tests were not broken.
+3. Please use our PR prefixes accordingly. `fix` for bugfix, `feat` for feature, `infra` for infrastructure changes and `docs` for documentation related changes (e.g `fix/ButtonStyle`, `feat/Avatar_colorProp`)
+4. Please don't change our PR template.
+  - In the Description section add everything that can help the reviewer and the reviewing process, like a description of the issue and the way you decided to go about it, screenshots or gifs, etc.
+  - The Changelog section is important. Write a message for the library users - this message will be included in our release notes.
+5. We try to make the PR review process as quick as possible, please be patient
+
+
+### Code Standards
+
+- Readability and clean code above all - we believe a clean code is easier to maintain and refactor when needed. 
+- Deciding on an API is not trivial but we always aim to keep it generic and intuitive - feel free to consult with us.
+- Our documentation is derived from our components' prop comments, make sure to add a clear description when adding new props. 
+- When possible, consider adding tests for the new functionality you added.
+- Try separating logic from UI as much as possible using hooks and presenters.
+- Keep components small and single purposed.
+
+#### Controlled vs Uncontrolled components
+When facing a new component's API we usually aim for making it controlled.  
+This is in order to give the user most control over what will be rendered in the component.  
+Having said that, keep in mind that in some cases (mostly due to performance concerns) we decide on making a component uncontrolled.
+
+
+
+
+## Typescript Status
+Currently most of our code is migrated to typescript though we still have some leftovers of javascript code and manual typings.  
+Until we complete the migration you are required to do the following for new TS files
+
+Before pushing new code make sure to run `npm run build:dev` - this check for TS errors and create appropriate declarations (`d.ts`) files under generatedTypes folder. Make sure to push these files as well!

demo/src/configurations.js

@@ -1,6 +1,7 @@
 import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-lib'; // eslint-disable-line
 
 Assets.loadAssetsGroup('icons.demo', {
+  chevronDown: require('./assets/icons/chevronDown.png'),
   add: require('./assets/icons/add.png'),
   camera: require('./assets/icons/cameraSelected.png'),
   close: require('./assets/icons/close.png'),
@@ -22,7 +23,8 @@ Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},
   h3: {...Typography.text60},
-  body: Typography.text70
+  body: Typography.text70,
+  bodySmall: Typography.text80
 });
 
 Spacings.loadSpacings({

demo/src/index.js

@@ -225,6 +225,9 @@ module.exports = {
       get IncubatorTextFieldScreen() {
         return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
       },
+      get PanViewScreen() {
+        return require('./screens/incubatorScreens/PanViewScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/screens/ExampleScreenPresenter.js

@@ -107,7 +107,7 @@ export function renderColorOption(title,
 }
 
 export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
-  const value = this.state[key];
+  const value = this.state[key] || initial;
   return (
     <View marginV-s2>
       <Text marginB-s1 text70M>
@@ -123,7 +123,7 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
           step={step}
           onValueChange={value => this.setState({[key]: value})}
         />
-        <Text marginL-s4 text70>
+        <Text marginL-s4 text70 style={styles.text}>
           {sliderText}
           {value}
         </Text>
@@ -135,5 +135,8 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
 const styles = StyleSheet.create({
   rowWrap: {
     flexWrap: 'wrap'
+  },
+  text: {
+    width: 30
   }
 });

demo/src/screens/MenuStructure.js

@@ -156,7 +156,8 @@ export const navigationData = {
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
-      {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'}
+      {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
+      {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },
   Inspirations: {

demo/src/screens/componentScreens/EmptyStateScreen.js renamed to demo/src/screens/componentScreens/EmptyStateScreen.tsx

@@ -1,19 +1,20 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, View} from 'react-native';
-import {StateScreen, Constants, PageControl} from 'react-native-ui-lib';//eslint-disable-line
-const localImageSource = require('../../assets/images/empty-state.jpg'); // eslint-disable-line
-const remoteImageSource = {uri: 'https://static.pexels.com/photos/169651/pexels-photo-169651.jpeg'};
+import {StateScreen, Constants, PageControl} from 'react-native-ui-lib';
+const localImageSource = require('../../assets/images/empty-state.jpg');
+const remoteImageSource = {uri: 'https://cdn.pixabay.com/photo/2017/04/19/20/10/morning-2243465_1280.jpg'};
 
-export default class EmptyStateScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {currentPage: 0};
-  }
+type State = {
+  currentPage: number;
+};
+
+export default class EmptyStateScreen extends Component<{}, State> {
+  state = {currentPage: 0};
 
-  setCurrentPage(offsetX) {
+  setCurrentPage(offsetX: number) {
     if (offsetX >= 0) {
       this.setState({
-        currentPage: Math.floor(offsetX / Constants.screenWidth),
+        currentPage: Math.floor(offsetX / Constants.screenWidth)
       });
     }
   }
@@ -26,24 +27,24 @@ export default class EmptyStateScreen extends Component {
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled
-          onScroll={(event) => {
+          onScroll={event => {
             this.setCurrentPage(event.nativeEvent.contentOffset.x);
           }}
           scrollEventThrottle={200}
         >
           <View style={styles.pageView}>
             <StateScreen
-              title='Oppsie (with local image)'
-              subtitle='Nothing to see here..'
-              ctaLabel='OK'
+              title={'Oppsie (with local image)'}
+              subtitle={'Nothing to see here..'}
+              ctaLabel={'OK'}
               imageSource={localImageSource}
             />
           </View>
           <View style={styles.pageView}>
             <StateScreen
-              title='Oppsie (with remote image)'
-              subtitle='Nothing to see here..'
-              ctaLabel='OK'
+              title={'Oppsie (with remote image)'}
+              subtitle={'Nothing to see here..'}
+              ctaLabel={'OK'}
               imageSource={remoteImageSource}
             />
           </View>
@@ -53,7 +54,7 @@ export default class EmptyStateScreen extends Component {
             position: 'absolute',
             bottom: 10,
             left: 0,
-            width: Constants.screenWidth,
+            width: Constants.screenWidth
           }}
           numOfPages={2}
           currentPage={this.state.currentPage}
@@ -66,10 +67,10 @@ export default class EmptyStateScreen extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   pageView: {
     width: Constants.screenWidth,
-    height: Constants.screenHeight,
-  },
+    height: Constants.screenHeight
+  }
 });

demo/src/screens/componentScreens/LoadingScreen.js renamed to demo/src/screens/componentScreens/LoadingScreen.tsx

@@ -3,6 +3,7 @@ import React, {useState, useCallback} from 'react';
 import {Alert} from 'react-native';
 import {Text, View, SectionsWheelPicker, SegmentedControl, Button, Incubator} from 'react-native-ui-lib';
 
+const {WheelPicker} = Incubator;
 const SectionsWheelPickerScreen = () => {
   const [numOfSections, setNumOfSections] = useState(1);
 
@@ -65,21 +66,24 @@ const SectionsWheelPickerScreen = () => {
       onChange: onDaysChange,
       selectedValue: selectedDays,
       label: 'Days',
-      style: numOfSections === 1 ? {flex: 1} : {flex: 1, alignItems: 'flex-end'}
+      align: numOfSections === 1 ? WheelPicker.alignments.CENTER : WheelPicker.alignments.RIGHT,
+      style: {flex: 1}
     },
     {
       items: getItems(hours),
       onChange: onHoursChange,
       selectedValue: selectedHours,
       label: 'Hrs',
-      style: numOfSections === 2 ? {flex: 1, alignItems: 'flex-start'} : undefined
+      align: numOfSections === 2 ? WheelPicker.alignments.LEFT : WheelPicker.alignments.CENTER,
+      style: numOfSections === 2 ? {flex: 1} : undefined
     },
     {
       items: getItems(minutes),
       onChange: onMinutesChange,
       selectedValue: selectedMinutes,
       label: 'Mins',
-      style: {flex: 1, alignItems: 'flex-start'}
+      align: WheelPicker.alignments.LEFT,
+      style: {flex: 1}
     }
   ];
 

demo/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -2,12 +2,21 @@ import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
 
-
 const INITIAL_VALUE = 0;
 const COLOR = Colors.blue30;
 
-export default class SliderScreen extends Component {
-  constructor(props) {
+interface SliderScreenProps {
+  componentId: string;
+}
+
+interface SliderScreenState {
+  alpha: number;
+  color: string;
+  sliderValue: number;
+}
+
+export default class SliderScreen extends Component<SliderScreenProps, SliderScreenState> {
+  constructor(props: SliderScreenProps) {
     super(props);
 
     this.state = {
@@ -17,15 +26,15 @@ export default class SliderScreen extends Component {
     };
   }
 
-  onSliderValueChange = (value) => {
+  onSliderValueChange = (value: number) => {
     this.setState({sliderValue: value});
   }
 
-  onGradientValueChange = (value, alpha) => {
+  onGradientValueChange = (value: string, alpha: number) => {
     this.setState({color: value, alpha});
   }
 
-  onGroupValueChange = (value) => {
+  onGroupValueChange = (value: string) => {
     console.warn('onGroupValueChange: ', value);
   }
 

demo/src/screens/componentScreens/SliderScreen.js renamed to demo/src/screens/componentScreens/SliderScreen.tsx

@@ -69,7 +69,7 @@ class ViewScreen extends Component {
             <View height={2} bg-grey60 marginB-20/>
             {renderBooleanOption.call(this, 'Row (parent)', 'useRow')}
             {renderBooleanOption.call(this, 'Flex (child)', 'shouldFlex')}
-            {renderSliderOption.call(this, 'BorderRadius(brXX)', 'borderRadius', {step: 10, min: 0, max: 60})}
+            {renderSliderOption.call(this, 'BorderRadius(brXX)', 'borderRadius', {step: 10, min: 0, max: 60, initial: 20})}
             {renderSliderOption.call(this, 'Padding(padding-XX)', 'padding', {step: 4, min: 0, max: 40})}
             {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
             {renderRadioGroup.call(this, 'Alignment (parent)', 'alignment', ALIGNMENTS, {isRow: true})}

demo/src/screens/componentScreens/ViewScreen.js

@@ -8,6 +8,7 @@ const {KeyboardAwareInsetsView} = Keyboard;
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextInput>();
   input2 = React.createRef<TextInput>();
+  inputWithValidation = React.createRef<TextInput>();
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
@@ -121,6 +122,7 @@ export default class TextFieldScreen extends Component {
             <Text h3 blue50>
               Validation
             </Text>
+
             <Button
               size={Button.sizes.xSmall}
               label={`Error Position: ${_.upperCase(errorPosition)}`}
@@ -150,8 +152,28 @@ export default class TextFieldScreen extends Component {
             // validateOnStart
             // validateOnBlur
             fieldStyle={styles.withUnderline}
+            marginB-s4
           />
 
+          <View row top marginT-s4>
+            <TextField
+              ref={this.inputWithValidation}
+              placeholder="Enter full name"
+              validate="required"
+              validationMessage="This field is required"
+              containerStyle={{flexGrow: 1}}
+              fieldStyle={styles.withUnderline}
+            />
+            <Button
+              marginL-s5
+              label="Validate"
+              size={Button.sizes.xSmall}
+              onPress={() => {
+                this.inputWithValidation.current?.validate?.();
+              }}
+            />
+          </View>
+
           <View row centerV spread>
             <Text h3 blue50 marginV-s4>
               Colors By State