Merge branch 'master' into release

Author: ethanshar

.github/ISSUE_TEMPLATE/bug-report.md

@@ -7,28 +7,42 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+### Describe the bug
+<!--
 A clear and concise description of what the bug is.
+-->
 
-**To Reproduce**
+### To Reproduce
+<!--
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
+-->
 
-**Expected behavior**
+### Expected behavior
+<!--
 A clear and concise description of what you expected to happen.
+-->
 
-**Code snippet**
+### Code snippet
+<!--
 A code snippet that reproduce the issue. 
+-->
 
-**Screenshots**
+### Screenshots
+<!--
 If applicable, add screenshots to help explain your problem.
+-->
 
-**Device (please complete the following information):**
+### Device (please complete the following information)
+<!--
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
+-->
 
-**Additional context**
+### Additional context
+<!--
 Add any other context about the problem here.
+-->

.github/ISSUE_TEMPLATE/docs-issue.md

@@ -7,12 +7,16 @@ assignees: ''
 
 ---
 
-**Describe the bug**
+### Describe the bug
+<!--
 A clear and concise description of what the issue with the docs is.
+-->
 
-**Component?**
+### Component?
+<!--
 Are there missing docs for a component? Which component? 
+-->
 
-**Is there a general issue with the docs site?**
+### Is there a general issue with the docs site?
 
-**Is there an issue with the Expo snack app?**
+### Is there an issue with the Expo snack app?

.github/ISSUE_TEMPLATE/feature-request.md

@@ -7,10 +7,17 @@ assignees: ''
 
 ---
 
-**Which component?**
+### Which component?
+<!--
+Which component is the feature is for? 
+-->
 
-**What is the new feature?**
+### What is the new feature?
+<!--
 A clear and concise description of what the required feature
+-->
 
-**Code snippet**
+### Code snippet
+<!--
 How you would have use this feature? How the API will look like?
+-->

.github/ISSUE_TEMPLATE/question.md

@@ -7,7 +7,7 @@ assignees: ''
 
 ---
 
-## Ask us any question
+### Ask us any question
 
 <!--
 Having trouble with using RNUILIB? Curious about a feature? Wondering about are future plans? 

.github/ISSUE_TEMPLATE/typescript-issue.md

@@ -7,7 +7,12 @@ assignees: ''
 
 ---
 
-**Component**
+### Component
+<!--
 Which component has a missing or invalid typings? 
+-->
 
-**What's the issue?**
+### What's the issue?
+<!--
+Add relevant details 
+-->

demo/src/screens/MenuStructure.js

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

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -0,0 +1,49 @@
+import React, {useCallback} from 'react';
+import {View, Text, Incubator, Colors, Typography} from 'react-native-ui-lib';
+import _ from 'lodash';
+import {ItemProps} from 'src/incubator/WheelPicker/Item';
+
+// Months
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+];
+
+// Years
+const years = _.times(2020, i => i);
+
+export default () => {
+
+  const onChange = useCallback((index: number, item?: ItemProps) => {
+    console.log(item, index);
+  }, []);
+
+  return (
+    <View flex padding-page>
+      <Text h1>Wheel Picker</Text>
+      <View flex centerV centerH paddingT-page>
+        <Text h3>Months</Text>
+        <Incubator.WheelPicker
+          onChange={onChange}
+          activeTextColor={Colors.primary}
+          inactiveTextColor={Colors.grey20}
+          items={_.map(months, i => ({text: i, value: i}))}
+          textStyle={{...Typography.text60R}}
+        />
+
+        <Text h3 marginT-s5>Years</Text>
+        <Incubator.WheelPicker onChange={onChange} items={_.map(years, i => ({text: '' + i, value: i}))} />
+      </View>
+    </View>
+  );
+};

demo/src/screens/incubatorScreens/index.js

@@ -2,5 +2,9 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
-    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default)
+  );
+  registrar('unicorn.incubator.WheelPickerScreen', () =>
+    gestureHandlerRootHOC(require('./WheelPickerScreen').default)
+  );
 }

eslint-rules/lib/rules/no-direct-import.js

@@ -31,10 +31,10 @@ module.exports = {
       try {
         const origin = context.options[0].origin;
         const destination = context.options[0].destination;
-        const msg = `Do not import directly from '${origin}'. Please use '${destination}' (autofix available).`;
+        const message = `Do not import directly from '${origin}'. Please use '${destination}' (autofix available).`;
         context.report({
           node,
-          message: `${msg}`,
+          message,
           fix(fixer) {
             if (node && destination) {
               return fixer.replaceText(node.source, `'${destination}'`);
@@ -46,7 +46,7 @@ module.exports = {
       }
     }
 
-    function checkImportDeclaretion(node) {
+    function checkImportDeclaration(node) {
       const origin = context.options[0].origin;
       const source = node.source.value;
       if (source && origin && source === origin) {
@@ -55,7 +55,7 @@ module.exports = {
     }
 
     return {
-      ImportDeclaration: node => checkImportDeclaretion(node),
+      ImportDeclaration: checkImportDeclaration
     };
   },
 };

eslint-rules/tests/lib/rules/no-direct-import.js

@@ -10,20 +10,21 @@ RuleTester.setDefaultConfig({
 
 const ruleTester = new RuleTester();
 
-const valideExample = `import {Component} from 'another-module';`;
-const invalideExample = `import {Component} from 'some-module';`;
+const validExample = `import {Component} from 'another-module';`;
+const invalidExample = `import {Component} from 'some-module';`;
 
 ruleTester.run('no-direct-import', rule, {
   valid: [
     {
       options: ruleOptions,
-      code: valideExample,
+      code: validExample,
     },
   ],
   invalid: [
     {
       options: ruleOptions,
-      code: invalideExample,
+      code: invalidExample,
+      output: `import {Component} from 'another-module';`,
       errors: [
         { message: `Do not import directly from 'some-module'. Please use 'another-module' (autofix available).` },
       ],

generatedTypes/commons/UIComponent.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 export default class UIComponent<P = {}, S = {}, SS = any> extends React.PureComponent<P, S, SS> {
+    static defaultProps: any;
 }

generatedTypes/commons/modifiers.d.ts

@@ -93,7 +93,7 @@ export declare function extractModifierProps(props: Dictionary<any>): _.Dictiona
  * @deprecated switch to Modifiers#extractComponentProps
  */
 export declare function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]): Pick<Partial<Dictionary<any>>, number>;
-export declare function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps: string[]): Pick<Partial<Dictionary<any>>, number>;
+export declare function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps?: string[]): Pick<Partial<Dictionary<any>>, number>;
 export declare function getThemeProps(props?: any, context?: any): any;
 export declare function generateModifiersStyle(options: {
     color: boolean;

generatedTypes/components/checkbox/index.d.ts

@@ -17,6 +17,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
      * The Checkbox color
      */
     color?: string;
+    /**
+     * alternative Checkbox outline style
+     */
+    outline?: boolean;
     /**
      * The size of the checkbox. affect both width and height
      */

generatedTypes/components/chip/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleProp, ViewStyle, ViewProps, ImageStyle, ImageProps, TextStyle, ImageSourcePropType } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
 import { AvatarProps } from '../avatar';
 import { BadgeProps } from '../badge';
+import { ImageProps } from '../image';
 import { TouchableOpacityProps } from '../touchableOpacity';
 export declare type ChipProps = ViewProps & TouchableOpacityProps & {
     /**
@@ -58,7 +59,7 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
     /**
      * Additional icon props
      */
-    iconProps?: ImageProps;
+    iconProps?: Omit<ImageProps, 'source'>;
     /**
      * Icon style
      */
@@ -160,7 +161,7 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     /**
      * Additional icon props
      */
-    iconProps?: ImageProps | undefined;
+    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent"> | undefined;
     /**
      * Icon style
      */

generatedTypes/components/drawer/Swipeable.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { Animated } from 'react-native';
-export declare type PropType = {
+declare type Props = {
     children: any;
     friction: number;
     leftThreshold?: number;
@@ -42,7 +42,8 @@ declare type StateType = {
     rightOffset: number | typeof undefined;
     rowWidth: number | typeof undefined;
 };
-export default class Swipeable extends Component<PropType, StateType> {
+export declare type SwipeableProps = Props;
+export default class Swipeable extends Component<Props, StateType> {
     static displayName: string;
     static defaultProps: {
         friction: number;
@@ -51,7 +52,7 @@ export default class Swipeable extends Component<PropType, StateType> {
         fullLeftThreshold: number;
         fullRightThreshold: number;
     };
-    constructor(props: PropType);
+    constructor(props: Props);
     _handleDrag: (e: any) => void;
     getTransX: () => Animated.AnimatedInterpolation;
     getShowLeftAction: () => Animated.Value | Animated.AnimatedInterpolation;

generatedTypes/components/drawer/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent, RefObject } from 'react';
 import { Animated, ViewStyle, TextStyle } from 'react-native';
-import Swipeable, { PropType as SwipeableProps } from './Swipeable';
+import Swipeable, { SwipeableProps } from './Swipeable';
 interface ItemProps {
     width?: number;
     background?: string;
@@ -11,7 +11,7 @@ interface ItemProps {
     style?: ViewStyle;
     testID?: string;
 }
-interface DrawerProps {
+interface Props {
     /**
      * The drawer animation bounciness
      */
@@ -92,14 +92,32 @@ interface DrawerProps {
      * Style
      */
     style?: ViewStyle;
+    /**
+     * Callback for open action
+     */
+    onSwipeableWillOpen?: Function;
+    /**
+     * Callback for close action
+     */
+    onSwipeableWillClose?: Function;
+    /**
+     * Custom value of any type to pass on to the component and receive back in the action callbacks
+     */
+    customValue?: any;
+    /**
+     * Used as testing identifier
+     */
+    testID?: string;
 }
+export declare type DrawerProps = Props;
+export declare type DrawerItemProps = ItemProps;
 /**
  * @description: Drawer Component
  * @important: If your app works with RNN, your screen must be wrapped
  * with gestureHandlerRootHOC from 'react-native-gesture-handler'. see
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
  */
-declare class Drawer extends PureComponent<DrawerProps> {
+declare class Drawer extends PureComponent<Props> {
     static displayName: string;
     static defaultProps: {
         itemsTintColor: string;
@@ -137,7 +155,7 @@ declare class Drawer extends PureComponent<DrawerProps> {
     private renderAction;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<DrawerProps & {
+declare const _default: React.ComponentClass<Props & {
     useCustomTheme?: boolean | undefined;
 }, any> & typeof Drawer;
 export default _default;

generatedTypes/components/floatingButton/index.d.ts

@@ -29,6 +29,10 @@ export interface FloatingButtonProps {
      * Whether to show background overlay
      */
     hideBackgroundOverlay?: boolean;
+    /**
+     * Used as testing identifier
+     */
+    testID?: string;
 }
 declare const _default: React.ComponentClass<FloatingButtonProps & {
     useCustomTheme?: boolean | undefined;