Fix issues with docs extend links for various components

generatedTypes/components/avatar/index.d.ts

@@ -140,9 +140,7 @@ export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'>
 export declare type AvatarPropTypes = AvatarProps;
 /**
  * @description: Avatar component for displaying user profile images
- * @extends: TouchableOpacity
- * @extendsnotes: (when passing onPress)
- * @extendsLink: docs/TouchableOpacity
+ * @extends: TouchableOpacity, Image
  * @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
  */

generatedTypes/components/carousel/index.d.ts

@@ -8,7 +8,7 @@ declare type DefaultProps = Partial<CarouselProps>;
  * @gif: https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif, https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx
  * @extends: ScrollView
- * @extendsLink: https://facebook.github.io/react-native/docs/scrollview
+ * @extendsLink: https://reactnative.dev/docs/scrollview
  * @notes: This is a screen width Component
  */
 declare class Carousel extends Component<CarouselProps, CarouselState> {

generatedTypes/components/featureHighlight/index.d.ts

@@ -108,8 +108,6 @@ interface State {
  * @notes: 1) FeatureHighlight component must be a direct child of the root view returned in render().; 2) If the element to be highlighted doesn't have a style attribute add 'style={{opacity: 1}}' so the Android OS can detect it.
  * @important: FeatureHighlight uses a native library. You MUST add and link the native library to both iOS and Android projects. For instruction please see
  * @importantLink: https://facebook.github.io/react-native/docs/linking-libraries-ios.html
- * @extends: HighlighterOverlayView
- * @extendsLink: docs/HighlighterOverlayView
  * @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
  */

generatedTypes/components/image/index.d.ts

@@ -57,7 +57,7 @@ declare type State = {
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
- * @extendsLink: https://facebook.github.io/react-native/docs/image.html
+ * @extendsLink: https://reactnative.dev/docs/image
  * @notes: please note that for SVG support you need to add both
  * `react-native-svg` and `react-native-svg-transformer`,
  * and also configure them (see `metro.config.js`)

generatedTypes/components/modal/index.d.ts

@@ -32,7 +32,7 @@ export interface ModalProps extends RNModalProps {
 /**
  * @description: Component that present content on top of the invoking screen
  * @extends: Modal
- * @extendsLink: https://facebook.github.io/react-native/docs/modal.html
+ * @extendsLink: https://reactnative.dev/docs/modal
  * @gif: https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx
  */

generatedTypes/components/overlay/index.d.ts

@@ -24,7 +24,7 @@ export declare type OverlayTypes = {
 /**
  * @description: Overlay view with types (default, top, bottom, solid)
  * @extends: Image
- * @extendsLink: https://facebook.github.io/react-native/docs/image
+ * @extendsLink: https://reactnative.dev/docs/image
  */
 declare class Overlay extends PureComponent<OverlayTypes> {
     static displayName: string;

generatedTypes/components/text/index.d.ts

@@ -34,7 +34,7 @@ declare type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps &
 /**
  * @description: A wrapper for Text component with extra functionality like modifiers support
  * @extends: Text
- * @extendsLink: https://facebook.github.io/react-native/docs/text.html
+ * @extendsLink: https://reactnative.dev/docs/text
  * @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

src/components/avatar/index.tsx

@@ -174,9 +174,7 @@ export type AvatarPropTypes = AvatarProps; //TODO: remove after ComponentPropTyp
 
 /**
  * @description: Avatar component for displaying user profile images
- * @extends: TouchableOpacity
- * @extendsnotes: (when passing onPress)
- * @extendsLink: docs/TouchableOpacity
+ * @extends: TouchableOpacity, Image
  * @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
  */

src/components/button/ButtonTypes.tsx

@@ -159,7 +159,6 @@ export const DEFAULT_PROPS = {
 /**
  * @description: Basic button component
  * @extends: TouchableOpacity
- * @extendsLink: docs/TouchableOpacity
  * @modifiers: margin, background
  * @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

src/components/card/index.tsx

@@ -106,8 +106,6 @@ type State = {
 /**
  * @description: Card component
  * @extends: TouchableOpacity
- * @extendsnotes: (Touchable when passing onPress)
- * @extendsLink: docs/TouchableOpacity
  * @modifiers: margin, padding
  * @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

src/components/carousel/index.tsx

@@ -18,7 +18,7 @@ type DefaultProps = Partial<CarouselProps>
  * @gif: https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif, https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx
  * @extends: ScrollView
- * @extendsLink: https://facebook.github.io/react-native/docs/scrollview
+ * @extendsLink: https://reactnative.dev/docs/scrollview
  * @notes: This is a screen width Component
  */
 class Carousel extends Component<CarouselProps, CarouselState> {

src/components/checkbox/index.tsx

@@ -93,7 +93,6 @@ interface CheckboxState {
 /**
  * @description: Checkbox component for toggling boolean value related to some context
  * @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
  */

src/components/chip/index.tsx

@@ -135,7 +135,6 @@ const DEFAULT_SIZE = 26;
 /**
  * @description: Chip component
  * @extends: TouchableOpacity
- * @extendsLink: docs/TouchableOpacity
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipScreen.tsx
  * @image: https://user-images.githubusercontent.com/1780255/119636022-e9743180-be1c-11eb-8f02-22eeab6558cd.png
  */

src/components/colorPicker/ColorSwatch.tsx

@@ -46,8 +46,6 @@ export const SWATCH_SIZE = DEFAULT_SIZE;
 /**
  * @description: A color swatch component
  * @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> {

src/components/featureHighlight/index.tsx

@@ -146,8 +146,6 @@ interface State {
  * @notes: 1) FeatureHighlight component must be a direct child of the root view returned in render().; 2) If the element to be highlighted doesn't have a style attribute add 'style={{opacity: 1}}' so the Android OS can detect it.
  * @important: FeatureHighlight uses a native library. You MUST add and link the native library to both iOS and Android projects. For instruction please see
  * @importantLink: https://facebook.github.io/react-native/docs/linking-libraries-ios.html
- * @extends: HighlighterOverlayView
- * @extendsLink: docs/HighlighterOverlayView
  * @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
  */

src/components/image/index.tsx

@@ -77,7 +77,7 @@ type State = {
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
- * @extendsLink: https://facebook.github.io/react-native/docs/image.html
+ * @extendsLink: https://reactnative.dev/docs/image
  * @notes: please note that for SVG support you need to add both
  * `react-native-svg` and `react-native-svg-transformer`,
  * and also configure them (see `metro.config.js`)

src/components/listItem/index.js

@@ -10,7 +10,6 @@ import ListItemPart from './ListItemPart';
 /**
  * @description: List item component to render inside a List component
  * @extends: TouchableOpacity
- * @extendsLink: docs/TouchableOpacity
  * @gif: https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.js
  */

src/components/modal/index.tsx

@@ -41,7 +41,7 @@ export interface ModalProps extends RNModalProps {
 /**
  * @description: Component that present content on top of the invoking screen
  * @extends: Modal
- * @extendsLink: https://facebook.github.io/react-native/docs/modal.html
+ * @extendsLink: https://reactnative.dev/docs/modal
  * @gif: https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx
  */

src/components/overlay/index.tsx

@@ -32,7 +32,7 @@ export type OverlayTypes = {
 /**
  * @description: Overlay view with types (default, top, bottom, solid)
  * @extends: Image
- * @extendsLink: https://facebook.github.io/react-native/docs/image
+ * @extendsLink: https://reactnative.dev/docs/image
  */
 class Overlay extends PureComponent<OverlayTypes> {
   static displayName = 'Overlay';

src/components/picker/PickerItem.js

@@ -16,7 +16,6 @@ import PickerContext from './PickerContext';
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
  * @extends: TouchableOpacity
- * @extendsLink: docs/TouchableOpacity
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
  */
 const PickerItem = props => {

src/components/tabBar/TabBarItem.tsx

@@ -97,7 +97,7 @@ interface State {
  * @description: TabBar.Item, inner component of TabBar for configuring the tabs
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.tsx
  * @extends: TouchableOpacity
- * @extendsLink: https://facebook.github.io/react-native/docs/touchableopacity
+ * @extendsLink: https://reactnative.dev/docs/touchableopacity
  */
 class TabBarItem extends PureComponent<TabBarItemProps, State> {
   static displayName = 'TabBar.Item';

src/components/text/index.tsx

@@ -47,7 +47,7 @@ type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & TextPro
 /**
  * @description: A wrapper for Text component with extra functionality like modifiers support
  * @extends: Text
- * @extendsLink: https://facebook.github.io/react-native/docs/text.html
+ * @extendsLink: https://reactnative.dev/docs/text
  * @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

src/components/textField/index.js

@@ -47,7 +47,7 @@ const FLOATING_PLACEHOLDER_SCALE = 0.875;
  * @description: A wrapper for TextInput component with extra functionality like floating placeholder and validations (This is an uncontrolled component)
  * @modifiers: Typography
  * @extends: TextInput
- * @extendsLink: https://facebook.github.io/react-native/docs/textinput
+ * @extendsLink: https://reactnative.dev/docs/textinput
  * @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js
  */

src/components/touchableOpacity/index.tsx

@@ -53,9 +53,9 @@ type Props = BaseComponentInjectedProps &
 
 /**
  * @description: A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor
- * @extends: TouchableOpacity
  * @modifiers: margins, paddings, alignments, background, borderRadius
- * @extendsLink: https://facebook.github.io/react-native/docs/touchableopacity.html
+ * @extends: TouchableOpacity
+ * @extendsLink: https://reactnative.dev/docs/touchableopacity
  * @gif: https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx
  */

src/components/view/index.tsx

@@ -57,7 +57,7 @@ interface ViewState {
 /**
  * @description: An enhanced View component
  * @extends: View
- * @extendsLink: https://facebook.github.io/react-native/docs/view.html
+ * @extendsLink: https://reactnative.dev/docs/view
  * @modifiers: margins, paddings, alignments, background, borderRadius
  */
 class View extends PureComponent<PropsTypes, ViewState> {

uilib-docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uilib-docs",
   "description": "uilib docs template",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "author": "Ethan Sharabi <[email protected]>",
   "main": "index.js",
   "dependencies": {

uilib-docs/src/pages/sections/IntroSection.jsx

@@ -16,7 +16,7 @@ export default () => {
         </p>
         <div className="git-stars">
           <img src={goldStar} alt="gold star" />
-          <span className="star-count">3.3k</span>
+          <span className="star-count">3.4k</span>
         </div>
 
         <div className="buttons">

uilib-docs/src/templates/component.js

@@ -48,19 +48,17 @@ export default class ComponentTemplate extends Component {
     return _.map(extendedComponents, (component, index) => {
       const isLast = index === _.size(extendedComponents) - 1;
       const text = `${component}${!isLast ? ', ' : ''}`;
-      const extendedComponent = _.find(allComponents, c => c.node.displayName.trim() === component.trim());
-      const path = !extendedComponent && componentInfo.extendsLink ? componentInfo.extendsLink : `/docs/${component}`;
+      const path = componentInfo.extendsLink ? componentInfo.extendsLink : `/docs/${component}`;
 
       return (
         <span className="inline" key={component}>
-          {extendedComponent && componentInfo.extendsLink ? (
-            <a href={componentInfo.extendsLink} rel="noopener noreferrer" target="_blank">
+          {componentInfo.extendsLink ? (
+            <a href={path} rel="noopener noreferrer" target="_blank">
               {text}
             </a>
           ) : (
             <Link to={path}>{text}</Link>
           )}
-          {componentInfo.extendsnotes}
           <br />
         </span>
       );