Adding prop types to components and updating styleguidist

package.json

@@ -28,7 +28,8 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-i18next-extract": "^0.6.1",
     "babel-plugin-macros": "^2.5.1",
-    "babel-plugin-react-native-web": "^0.8.9",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-react-native-web": "^0.14.10",
     "babel-preset-env": "^7.0.0-beta.3",
     "babel-register": "^7.0.0-beta.3",
     "cross-env": "^5.1.4",
@@ -45,7 +46,7 @@
     "react-native": "~0.55.2",
     "react-native-scripts": "1.14.0",
     "react-native-web": "^0.11.4",
-    "react-styleguidist": "^8.0.6",
+    "react-styleguidist": "^11.1.5",
     "react-test-renderer": "16.3.1",
     "webpack": "^4.17.1"
   },

src/Context/Feed.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { Platform } from 'react-native';
+
 import immutable from 'immutable';
 import URL from 'url-parse';
 import _ from 'lodash';

src/Context/StreamApp.js

@@ -1,7 +1,6 @@
-//
-
 import * as React from 'react';
 import { connect } from 'getstream';
+import PropTypes from 'prop-types';
 
 import StreamAnalytics from 'stream-analytics';
 
@@ -180,3 +179,16 @@ export function withTranslationContext(OriginalComponent) {
 
   return ContextAwareComponent;
 }
+
+export const TranslationContextPropTypes = {
+  /**
+   * Translator function
+   * @ref https://getstream.github.io/react-native-activity-feed/#internationalisation-i18n
+   */
+  t: PropTypes.func,
+  /**
+   * Date time parser for date stamps.
+   * @ref https://getstream.github.io/react-native-activity-feed/#internationalisation-i18n
+   */
+  tDateTimeParser: PropTypes.func,
+};

src/components/Activity.js

@@ -1,5 +1,7 @@
 //
 import * as React from 'react';
+import PropTypes from 'prop-types';
+
 import {
   View,
   Text,
@@ -23,6 +25,46 @@ import { smartRender } from '../utils';
  * @example ./examples/Activity.md
  */
 export default class Activity extends React.Component {
+  static propTypes = {
+    Header: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+    Content: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+    Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+    // The component that displays the url preview
+    Card: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+    onPress: PropTypes.func,
+    onPressAvatar: PropTypes.func,
+    /**
+     *
+     * @param {*} text
+     * @param {*} activity
+     */
+    onPressMention: PropTypes.func,
+    /**
+     *
+     * @param {*} text
+     * @param {*} activity
+     */
+    onPressHashtag: PropTypes.func,
+    sub: PropTypes.string,
+    icon: PropTypes.string,
+    // @todo: Fix it
+    activity: PropTypes.object,
+    /** Width of an image that's displayed, by default this is
+     * the width of the screen */
+    imageWidth: PropTypes.number,
+    /** Styling of the component */
+    styles: PropTypes.object,
+    /**
+     * Handle errors in the render method in a custom way, by
+     * default this component logs the error in the console
+     *
+     * @param {*} error
+     * @param {*} info
+     * @param {*} props
+     */
+    componentDidCatch: PropTypes.func,
+  };
+
   static defaultProps = {
     Card,
   };

src/components/Avatar.js

@@ -1,6 +1,7 @@
 //
 import React from 'react';
 import { View, Image } from 'react-native';
+import PropTypes from 'prop-types';
 
 import UploadImage from './UploadImage';
 import { StreamApp } from '../Context';
@@ -11,6 +12,25 @@ import { buildStylesheet } from '../styles';
  * @example ./examples/Avatar.md
  */
 export default class Avatar extends React.Component {
+  static propTypes = {
+    /** The image source or a getter fn */
+    source: PropTypes.oneOfType([
+      PropTypes.string,
+      /**
+       * @param activeUser User object
+       * @return string
+       */
+      PropTypes.func,
+    ]),
+    size: PropTypes.number,
+    editButton: PropTypes.bool,
+    noShadow: PropTypes.bool,
+    notRound: PropTypes.bool,
+
+    onUploadButtonPress: PropTypes.func,
+    styles: PropTypes.object,
+  };
+
   render() {
     const { source, ...props } = this.props;
     if (typeof source === 'function') {

src/components/BackButton.js

@@ -1,13 +1,21 @@
 //
 import React from 'react';
 import { Image, TouchableOpacity } from 'react-native';
+import PropTypes from 'prop-types';
+
 import { buildStylesheet } from '../styles';
 
 /**
  * Back button
  * @example ./examples/BackButton.md
  */
 export default class BackButton extends React.Component {
+  static propTypes = {
+    styles: PropTypes.object,
+    blue: PropTypes.bool,
+    pressed: PropTypes.func,
+  };
+
   render() {
     const styles = buildStylesheet('backButton', this.props.styles);
     const { blue, pressed } = this.props;

src/components/Card.js

@@ -1,6 +1,8 @@
 //
 import React from 'react';
 import { View, Text, Image, TouchableOpacity, Linking } from 'react-native';
+import PropTypes from 'prop-types';
+
 import { buildStylesheet } from '../styles';
 
 import _ from 'lodash';
@@ -35,4 +37,13 @@ const Card = (props) => {
   );
 };
 
+Card.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+  url: PropTypes.string,
+  styles: PropTypes.object,
+  pressed: PropTypes.func,
+};
+
 export default Card;

src/components/CommentBox.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import { View, TextInput } from 'react-native';
 import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
+import PropTypes from 'prop-types';
 
 import Avatar from './Avatar';
 
@@ -78,4 +79,39 @@ class CommentBox extends React.Component {
   }
 }
 
+CommentBox.propTypes = {
+  /** Callback function called when the text is submitted, by default it adds a
+   * comment reaction to the provided activity */
+  onSubmit: PropTypes.func,
+  /** Height in pixels for the whole component */
+  height: PropTypes.number,
+  /** Props used to render the Avatar component */
+  avatarProps: PropTypes.object,
+  /** Skips the Avatar component when provided */
+  noAvatar: PropTypes.bool,
+  /** Style changes to default */
+  styles: PropTypes.object,
+  /** activity */
+  // @todo: Fix it
+  activity: PropTypes.object,
+  /**
+   * event callback handler fired when the enter button is pressed
+   * @param {*} string
+   * @param {*} ActivityData
+   * @param {*} any
+   */
+  onAddReaction: PropTypes.func,
+  /** Removes KeyboardAccessory. When disabling this keep in mind that the
+   * input won't move with the keyboard anymore. */
+  noKeyboardAccessory: PropTypes.bool,
+  /** Custom verticalOffset for the KeyboardAccessory if for some reason the
+   * component is positioned wrongly when the keyboard opens. If the item is
+   * positioned too high this should be a negative number, if it's positioned
+   * too low it should be positive. One known case where this happens is when
+   * using react-navigation with `tabBarPosition: 'bottom'`.  */
+  verticalOffset: PropTypes.number,
+  /** Any props the React Native TextInput accepts */
+  textInputProps: PropTypes.object,
+};
+
 export default withTranslationContext(CommentBox);

src/components/CommentItem.js

@@ -1,6 +1,8 @@
 //
 import React from 'react';
 import { View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
 import { humanizeTimestamp, smartRender } from '../utils';
 import Avatar from './Avatar';
 import { buildStylesheet } from '../styles';
@@ -43,4 +45,29 @@ class CommentItem extends React.Component {
   }
 }
 
+CommentItem.propTypes = {
+  /** The comment that should be displayed */
+  comment: PropTypes.shape({
+    user: PropTypes.object,
+    data: PropTypes.shape({
+      name: PropTypes.string,
+    }),
+    created_at: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.instanceOf(Date),
+    ]),
+  }),
+  /**
+   * UI component which should be displayed in the Footer of the component, such as a like button */
+  Footer: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+  /** Styling of the component */
+  styles: PropTypes.object,
+  /**
+   * Handle errors in the render method in a custom way, by default this component logs the error in the console
+   * @param {*} error Error object
+   * @param {*} info object
+   * @param {*} props object
+   */
+  componentDidCatch: PropTypes.func,
+};
 export default withTranslationContext(CommentItem);

src/components/CommentList.js

@@ -1,5 +1,6 @@
 //
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import SectionHeader from './SectionHeader';
 import CommentItem from './CommentItem';
@@ -55,3 +56,29 @@ export default class CommentList extends React.PureComponent {
     );
   }
 }
+
+CommentList.propTypes = {
+  /** The ID of the activity for which these comments are */
+  activityId: PropTypes.string,
+  /** The component that should render the comment */
+  CommentItem: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+  /** Only needed for reposted activities where you want to show the comments
+   * of the original activity, not of the repost */
+  activityPath: PropTypes.arrayOf(PropTypes.string),
+  /** UI The component that should render the reaction */
+  LoadMoreButton: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
+  /** If the CommentList should paginate when scrolling, by default it shows a
+   * "Load more" button  */
+  infiniteScroll: PropTypes.bool,
+  /** Show and load reactions starting with the oldest reaction first, instead
+   * of the default where reactions are displayed and loaded most recent first.
+   * */
+  /** Any props the react native FlatList accepts */
+  flatListProps: PropTypes.object,
+  /** Show and load reactions starting with the oldest reaction first, instead
+   * of the default where reactions are displayed and loaded most recent first.
+   * */
+  oldestToNewest: PropTypes.bool,
+  /** Reverse the order the reactions are displayed in. */
+  reverseOrder: PropTypes.bool,
+};