link all components links to images and gifs (#1341)

* link all components links to images and gifs

* Add generated types

Author: ethanshar

demo/showcase/ChipsInput/ChipsInput.mov

@@ -143,7 +143,7 @@ export declare type AvatarPropTypes = AvatarProps;
  * @extends: TouchableOpacity
  * @extendsnotes: (when passing onPress)
  * @extendsLink: docs/TouchableOpacity
- * @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_2.png?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx
  */
 declare class Avatar extends PureComponent<AvatarProps> {

generatedTypes/components/avatar/index.d.ts

@@ -120,6 +120,7 @@ export declare type DrawerItemProps = ItemProps;
  * @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
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true
  */
 declare class Drawer extends PureComponent<Props> {
     static displayName: string;

generatedTypes/components/drawer/index.d.ts

@@ -23,8 +23,8 @@ export declare type ExpandableSectionProps = {
 };
 /**
  * @description: ExpandableSection component to render expanded section below or above the sectionHeader
- * @gif: https://media.giphy.com/media/uCGZ92nZPdBOmF1H1z/giphy.gif, https://media.giphy.com/media/0VIh41mkSl8omS49oD/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true
  */
 declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
 export default ExpandableSection;

generatedTypes/components/expandableSection/index.d.ts

@@ -35,6 +35,7 @@ export declare type FaderProps = Pick<ImageProps, 'supportRTL'> & {
 /**
  * @description: A gradient fading overlay to render on top of overflowing content (like scroll component)
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FaderScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Fader/Fader.gif?raw=true
  */
 declare function Fader(props: FaderProps): JSX.Element;
 declare namespace Fader {

generatedTypes/components/fader/index.d.ts

@@ -108,6 +108,7 @@ interface HintState {
  * @description: Hint component for displaying a tooltip over wrapped component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.js
  * @notes: You can either wrap a component or pass a specific targetFrame
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true
  */
 declare class Hint extends Component<HintProps, HintState> {
     static displayName: string;

generatedTypes/components/hint/index.d.ts

@@ -18,7 +18,10 @@ interface RadioGroupState {
 }
 declare type Props = RadioGroupProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
 /**
- * Wrap a group of Radio Buttons to automatically control their selection
+ * @description: Wrap a group of Radio Buttons to automatically control their selection
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js
  */
 declare class RadioGroup extends PureComponent<Props, RadioGroupState> {
     static displayName: string;

generatedTypes/components/radioButton/RadioGroup.d.ts

@@ -47,6 +47,7 @@ interface StateProps {
  * @notes: This component is based on react-native-gesture-handler
  * @important: On Android, if using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/PageCarousel.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/TabController/CenterSelected.gif?raw=true
  */
 declare class TabController extends Component<TabControllerProps, StateProps> {
     static displayName: string;

generatedTypes/components/tabController/index.d.ts

@@ -37,6 +37,7 @@ declare type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps &
  * @extendsLink: https://facebook.github.io/react-native/docs/text.html
  * @modifiers: margins, color, typography
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.js
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Modifiers.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Transformation.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Highlights.png?raw=true
  */
 declare class Text extends PureComponent<PropsTypes> {
     static displayName: string;

generatedTypes/components/text/index.d.ts

@@ -28,6 +28,7 @@ const IOS_SCROLL_BEHAVIORS = IsIOS
 /**
  * @description: View that allows replacing the default keyboard with other components
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
  */
 class KeyboardAccessoryView extends Component {
   static propTypes = {

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.js

@@ -177,7 +177,7 @@ export type AvatarPropTypes = AvatarProps; //TODO: remove after ComponentPropTyp
  * @extends: TouchableOpacity
  * @extendsnotes: (when passing onPress)
  * @extendsLink: docs/TouchableOpacity
- * @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_2.png?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx
  */
 class Avatar extends PureComponent<AvatarProps> {

src/components/avatar/index.tsx

@@ -161,8 +161,8 @@ export const DEFAULT_PROPS = {
  * @extends: TouchableOpacity
  * @extendsLink: docs/TouchableOpacity
  * @modifiers: margin, background
- * @image: https://user-images.githubusercontent.com/1780255/119218638-173e3b00-baea-11eb-8e66-f5a23714871c.png, https://user-images.githubusercontent.com/1780255/119218639-173e3b00-baea-11eb-8b75-b6dde4e922c8.png, https://user-images.githubusercontent.com/1780255/119218636-16a5a480-baea-11eb-8501-33eebfe1f3e2.png, https://user-images.githubusercontent.com/1780255/119218637-16a5a480-baea-11eb-99d0-3620f2160ec5.png, https://user-images.githubusercontent.com/1780255/119218634-160d0e00-baea-11eb-8538-e78005cb3fa5.png, https://user-images.githubusercontent.com/1780255/119221003-d9471400-baf5-11eb-9066-0aabbe8d9022.png
- * @gif: https://user-images.githubusercontent.com/1780255/119218630-11e0f080-baea-11eb-8e32-4470195cc42f.gif
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Sizes.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Typographies.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Outlines.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Corners.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Custom.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Inspirations.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Round.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Full.png?raw=true
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Animated.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx
  */
 // @ts-ignore 

src/components/button/ButtonTypes.tsx

@@ -109,7 +109,8 @@ type State = {
  * @extendsnotes: (Touchable when passing onPress)
  * @extendsLink: docs/TouchableOpacity
  * @modifiers: margin, padding
- * @gif: https://media.giphy.com/media/l0HU9SKWmv0VTOYMM/giphy.gif
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_01.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_02.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_03.png?raw=true
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Card_Selecteable.gif, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_activeScale.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx
  * @notes: 'enableBlur' prop requires installing the '@react-native-community/blur' native library
  */

src/components/card/index.tsx

@@ -95,6 +95,7 @@ interface CheckboxState {
  * @extends: TouchableOpacity
  * @extendsLink: docs/TouchableOpacity
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true
  */
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';

src/components/checkbox/index.tsx

@@ -21,7 +21,7 @@ const GUTTER_SPACING = 8;
 /**
  * @description: Tags input component (chips)
  * @modifiers: Typography
- * @gif: https://camo.githubusercontent.com/9c2671024f60566b980638ea01b517f6fb509d0b/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f336f45686e374a79685431566658746963452f67697068792e676966
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ChipsInput/ChipsInput.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.js
  * @extends: TextField
  * @extendsLink: https://github.com/wix/react-native-ui-lib/blob/master/src/components/inputs/TextField.js

src/components/chipsInput/index.js

@@ -75,6 +75,7 @@ const DEFAULT_NUMBER_OF_ROWS = 3;
  * @description: A color palette component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.js
  * @notes: This is a screen width component
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true
  */
 class ColorPalette extends PureComponent<Props, State> {
   static displayName = 'ColorPalette';

src/components/colorPicker/ColorPalette.tsx

@@ -48,6 +48,7 @@ export const SWATCH_SIZE = DEFAULT_SIZE;
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.js
  * @extends: Animated.View
  * @extendsLink: https://facebook.github.io/react-native/docs/animated
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true
  */
 class ColorSwatch extends PureComponent<Props> {
   static displayName = 'ColorSwatch';

src/components/colorPicker/ColorSwatch.tsx

@@ -59,6 +59,7 @@ const ACCESSIBILITY_LABELS = {
  * @description: A color picker component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.js
  * @notes: This is a screen width component
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPicker/ColorPicker.gif?raw=true
  */
 class ColorPicker extends PureComponent<Props> {
   static displayName = 'ColorPicker';

src/components/colorPicker/index.tsx

@@ -26,6 +26,7 @@ const MODES = {
  * @important: DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects.
  * @extends: TextField, react-native-community/datetimepicker
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
 /*eslint-enable*/
 

src/components/dateTimePicker/index.js

@@ -102,7 +102,7 @@ const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.dark10, 0.6);
  * (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)
  * @modifiers: alignment
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js
- * @gif: https://media.giphy.com/media/9S58XdLCoUiLzAc1b1/giphy.gif
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true
  */
 class Dialog extends Component<DialogProps, DialogState> {
   static displayName = 'Dialog';

src/components/dialog/index.tsx

@@ -136,6 +136,7 @@ export type DrawerItemProps = ItemProps;
  * @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
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true
  */
 class Drawer extends PureComponent<Props> {
   static displayName = 'Drawer';

src/components/drawer/index.tsx

@@ -28,8 +28,8 @@ export type ExpandableSectionProps = {
 
 /**
  * @description: ExpandableSection component to render expanded section below or above the sectionHeader
- * @gif: https://media.giphy.com/media/uCGZ92nZPdBOmF1H1z/giphy.gif, https://media.giphy.com/media/0VIh41mkSl8omS49oD/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true
  */
 
 function ExpandableSection(props: ExpandableSectionProps) {

src/components/expandableSection/index.tsx

@@ -43,6 +43,7 @@ const DEFAULT_FADE_SIZE = 50;
 /**
  * @description: A gradient fading overlay to render on top of overflowing content (like scroll component)
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FaderScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Fader/Fader.gif?raw=true
  */
 function Fader(props: FaderProps) {
   const getFadeSize = useCallback(() => {

src/components/fader/index.tsx

@@ -31,7 +31,7 @@ const contentViewHeight = Constants.isAndroid ? 268 : 282;
  * @importantLink: https://facebook.github.io/react-native/docs/linking-libraries-ios.html
  * @extends: HighlighterOverlayView
  * @extendsLink: docs/HighlighterOverlayView
- * @gif: https://media.giphy.com/media/3ohs4D5irZm5GojsDS/giphy.gif, https://media.giphy.com/media/3oxQNaDQckPZI78rWo/giphy.gif
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FeatureHighlight/FeatureHighlight.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FeatureHighlightScreen.js
  */
 /*eslint-enable*/

src/components/featureHighlight/index.js

@@ -50,6 +50,7 @@ const gradientImage = () => require('./gradient.png');
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
  * @extends: Button
  * @extendsLink: https://github.com/wix/react-native-ui-lib/blob/master/src/components/button/index.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
  */
 class FloatingButton extends PureComponent<FloatingButtonProps> {
   static displayName = 'FloatingButton';

src/components/floatingButton/index.tsx

@@ -147,6 +147,7 @@ interface HintState {
  * @description: Hint component for displaying a tooltip over wrapped component
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.js
  * @notes: You can either wrap a component or pass a specific targetFrame
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true
  */
 class Hint extends Component<HintProps, HintState> {
   static displayName = 'Hint';

src/components/hint/index.tsx

@@ -95,6 +95,7 @@ interface State {
  * @description: PanDismissibleView component created to making listening to swipe and drag events easier,
  * @notes: Has to be used as a child of a PanningProvider that also has a PanListenerView.
  *         The PanListenerView is the one that sends the drag\swipe events.
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanDismissibleView/PanDismissibleView.gif?raw=true
  */
 class PanDismissibleView extends PureComponent<Props, State> {
   static displayName = 'PanDismissibleView';

src/components/panningViews/panDismissibleView.tsx

@@ -95,6 +95,7 @@ const DEFAULT_SWIPE_VELOCITY = 1.8;
 /**
  * @description: PanListenerView component created to making listening to swipe and drag events easier
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanListenerScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanListenerView/PanListenerView.gif?raw=true
  */
 class PanListenerView extends PureComponent<Props> {
   static displayName = 'PanListenerView';

src/components/panningViews/panListenerView.tsx

@@ -35,6 +35,7 @@ interface Props extends PanResponderViewProps {
  * @notes: Has to be used as a child of a PanningProvider that also has a PanListenerView.
  *         The PanListenerView is the one that sends the drag\swipe events.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanResponderScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanResponderView/PanResponderView.gif?raw=true
  */
 class PanResponderView extends PureComponent<Props> {
   static displayName = 'PanResponderView';

src/components/panningViews/panResponderView.tsx

@@ -31,7 +31,7 @@ const ItemType = PropTypes.oneOfType([
 
 /**
  * @description: Picker Component, support single or multiple selection, blurModel and nativePicker
- * @gif: https://media.giphy.com/media/3o751SiuZZiByET2lq/giphy.gif, https://media.giphy.com/media/TgMQnyw5grJIDohzvx/giphy.gif, https://media.giphy.com/media/5hsdmVptBRskZKn787/giphy.gif
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
  * @notes: 'useNativePicker' prop requires installing the '@react-native-picker/picker' native library
  */