Fix/docs add native components and various fixes (#909)

* Docs - add native components

* Docs - remove components from docs (IGNORE)

* Add display name for WheelPicker.Item

* Chip - do not use React.FC since it breaks the docs

Author: M-i-k-e-l

lib/components/HighlighterOverlayView.js

@@ -93,4 +93,6 @@ HighlighterOverlayView.propTypes = {
   innerPadding: PropTypes.number,
 };
 
+HighlighterOverlayView.displayName = 'IGNORE';
+
 export default HighlighterOverlayView;

lib/components/Keyboard/KeyboardInput/CustomKeyboardView.android.js

@@ -8,6 +8,7 @@ import CustomKeyboardViewBase from './CustomKeyboardViewBase';
 const CustomKeyboardViewNativeAndroid = requireNativeComponent('CustomKeyboardViewNativeTemp');
 
 export default class CustomKeyboardView extends CustomKeyboardViewBase {
+  static displayName = 'IGNORE';
   static propTypes = {
     initialProps: PropTypes.object,
     component: PropTypes.string,

lib/components/Keyboard/KeyboardInput/CustomKeyboardView.ios.js

@@ -4,6 +4,7 @@ import KeyboardRegistry from './KeyboardRegistry';
 import CustomKeyboardViewBase from './CustomKeyboardViewBase';
 
 export default class CustomKeyboardView extends CustomKeyboardViewBase {
+  static displayName = 'IGNORE';
   static propTypes = {
     /**
      * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)

lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView.android.js

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 
 class KeyboardTrackingView extends PureComponent {
+  static displayName = 'IGNORE';
   render() {
     return <View {...this.props}/>;
   }

lib/components/WheelPicker/WheelPickerItem.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react'; //eslint-disable-line
 import PropTypes from 'prop-types';
 
 export default class WheelPickerItem extends Component {
+  static displayName = 'WheelPicker.Item';
   // eslint-disable-line react/no-multi-comp
   static propTypes = {
     /**

src/components/KeyboardAwareScrollView/KeyboardAwareListView.js

@@ -4,7 +4,7 @@ import {ScrollView} from 'react-native';
 import KeyboardAwareBase from './KeyboardAwareBase';
 
 export default class KeyboardAwareListView extends KeyboardAwareBase {
-  static displayName = 'KeyboardAwareListView';
+  static displayName = 'IGNORE';
 
   static propTypes = {
     onScroll: PropTypes.func

src/components/chip/index.tsx

@@ -123,7 +123,7 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
  * @extendslink: docs/TouchableOpacity
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipScreen.tsx
  */
-const Chip: React.FC<ChipPropTypes> = ({
+const Chip = ({
   avatarProps,
   backgroundColor,
   badgeProps,
@@ -146,10 +146,10 @@ const Chip: React.FC<ChipPropTypes> = ({
   useSizeAsMinimum,
   testID,
   ...others
-}) => {
+}: ChipPropTypes) => {
 
   const renderIcon = useCallback((iconPosition) => {
-    const isLeftIcon = iconPosition === 'left'
+    const isLeftIcon = iconPosition === 'left';
 
     return (
       <Image

src/components/dialog/OverlayFadingBackground.tsx

@@ -8,7 +8,7 @@ interface Props {
   overlayBackgroundColor: string;
 }
 
-export default ({
+const OverlayFadingBackground = ({
   dialogVisibility,
   modalVisibility,
   overlayBackgroundColor
@@ -44,3 +44,7 @@ export default ({
 
   return <View absF animated style={style} pointerEvents="none"/>;
 };
+
+OverlayFadingBackground.displayName = 'IGNORE';
+
+export default OverlayFadingBackground;

src/components/drawer/Swipeable.tsx

@@ -67,6 +67,7 @@ type StateType = {
 };
 
 export default class Swipeable extends Component<PropType, StateType> {
+  static displayName = 'IGNORE';
   static defaultProps = {
     friction: 1,
     overshootFriction: 1,

src/components/picker/NativePicker.js

@@ -8,6 +8,7 @@ import TouchableOpacity from '../touchableOpacity';
 import {Colors} from '../../style';
 
 class NativePicker extends BaseComponent {
+  static displayName = 'IGNORE';
   state = {
     selectedValue: this.props.value,
     items: this.extractPickerItems(this.props),

src/components/picker/PickerDialog.android.js

@@ -11,6 +11,7 @@ import {Colors, BorderRadiuses} from '../../style';
 import {WheelPicker} from '../../nativeComponents';
 
 class PickerDialog extends BaseComponent {
+  static displayName = 'IGNORE';
   static propTypes = {
     selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     onValueChange: PropTypes.func,

src/components/picker/PickerDialog.ios.js

@@ -11,6 +11,7 @@ import {Colors} from '../../style';
 import {WheelPicker} from '../../nativeComponents';
 
 class PickerDialog extends BaseComponent {
+  static displayName = 'IGNORE';
   static propTypes = {
     selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     onValueChange: PropTypes.func,

src/components/scrollBar/ScrollBarGradient.js

@@ -61,4 +61,6 @@ const ScrollBarGradient = ({
   );
 };
 
+ScrollBarGradient.displayName = 'IGNORE';
+
 export default ScrollBarGradient;

src/components/scrollBar/index.js

@@ -254,5 +254,6 @@ const Item = ({children, index, onLayout}) => {
   );
 };
 
+Item.displayName = 'IGNORE';
 ScrollBar.Item = Item;
 export default forwardRef(ScrollBar);

src/components/slider/context/SliderGroup.js

@@ -7,6 +7,7 @@ import View from '../../view';
 
 
 export default class SliderGroup extends Component {
+  static displayName = 'IGNORE';
   static propTypes = {
     color: PropTypes.string,
     onValueChange: PropTypes.func

uilib-docs/configurations/plugins.js

@@ -34,6 +34,16 @@ const componentsDocgenPlugin = [
   }
 ];
 
+const nativeComponentsDocgenPlugin = [
+  'gatsby-transformer-react-docgen',
+  {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      path: `${__dirname}/../../lib/components/`
+    }
+  }
+];
+
 const imagesPlugin = [
   {
     resolve: `gatsby-source-filesystem`,
@@ -59,6 +69,7 @@ module.exports = {
   manifestPlugin,
   markdownPagesPlugin,
   componentsDocgenPlugin,
+  nativeComponentsDocgenPlugin,
   imagesPlugin,
   layoutPlugin
 };

uilib-docs/gatsby-config.js

@@ -1,4 +1,4 @@
-const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, imagesPlugin, layoutPlugin} = require('./configurations/plugins');
+const {manifestPlugin, markdownPagesPlugin, componentsDocgenPlugin, nativeComponentsDocgenPlugin, imagesPlugin, layoutPlugin} = require('./configurations/plugins');
 
 module.exports = {
   pathPrefix: '/react-native-ui-lib',
@@ -12,6 +12,7 @@ module.exports = {
     `gatsby-plugin-sass`,
     ...markdownPagesPlugin,
     ...componentsDocgenPlugin,
+    ...nativeComponentsDocgenPlugin,
     ...imagesPlugin,
     ...manifestPlugin,
     ...layoutPlugin