Fix TS errors that started after @tyes/react v18 (#2001)

* Fix TS errors that started after @tyes/react v18

* Remove fake classes for old docs

Author: ethanshar

package.json

@@ -67,7 +67,6 @@
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
-    "@types/react": "^17.0.44",
     "@types/react-native": "0.66.4",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",

src/components/actionSheet/index.tsx

@@ -163,7 +163,6 @@ class ActionSheet extends Component<ActionSheetProps> {
         key={index}
         testID={option.testID}
         onPress={() => this.onOptionPress(index)}
-        // @ts-expect-error
         activeBackgroundColor={Colors.grey80}
       >
         <View row paddingL-16 flex centerV>

src/components/avatar/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {PureComponent} from 'react';
+import React, {PropsWithChildren, PureComponent} from 'react';
 import {
   StyleSheet,
   ImageSourcePropType,
@@ -49,7 +49,7 @@ export type AutoColorsProps = {
   defaultColor?: string;
 };
 
-export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & {
+export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & PropsWithChildren<{
   /**
    * Adds fade in animation when Avatar image loads
    */
@@ -153,7 +153,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & {
    * Used as a testing identifier
    */
   testID?: string;
-};
+}>;
 
 /**
  * @description: Avatar component for displaying user profile images

src/components/chip/index.tsx

@@ -165,7 +165,7 @@ const Chip = ({
   ...others
 }: ChipProps) => {
 
-  const renderIcon = useCallback((iconPosition) => {
+  const renderIcon = useCallback((iconPosition: 'left' | 'right') => {
     const isLeftIcon = iconPosition === 'left';
 
     return (

src/components/dialog/OverlayFadingBackground.tsx

@@ -27,7 +27,7 @@ const OverlayFadingBackground = ({
     propsOnFadeDone?.();
   }, [propsOnFadeDone]);
 
-  const animateFading = useCallback((toValue) => {
+  const animateFading = useCallback((toValue: number) => {
     isAnimating.current = true;
     Animated.timing(fadeAnimation, {
       toValue,

src/components/dialog/index.tsx

@@ -82,6 +82,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
    * Used as a testing identifier
    */
   testID?: string;
+  children?: React.ReactNode;
 }
 
 interface DialogState {

src/components/drawer/index.tsx

@@ -13,7 +13,7 @@ import {LogService} from '../../services';
 const DEFAULT_BG = Colors.primary;
 const DEFAULT_BOUNCINESS = 0;
 
-interface ItemProps {
+interface DrawerItemProps {
   width?: number;
   background?: string;
   text?: string;
@@ -25,7 +25,7 @@ interface ItemProps {
   customElement?: ReactNode;
 }
 
-interface Props {
+interface DrawerProps {
   /**
    * The drawer animation bounciness
    */
@@ -37,11 +37,11 @@ interface Props {
   /**
    * The bottom layer's items to appear when opened from the right
    */
-  rightItems?: ItemProps[];
+  rightItems?: DrawerItemProps[];
   /**
    * The bottom layer's item to appear when opened from the left (a single item)
    */
-  leftItem?: ItemProps;
+  leftItem?: DrawerItemProps;
   /**
    * Set a different minimum width
    */
@@ -126,19 +126,17 @@ interface Props {
    * Used as testing identifier
    */
   testID?: string;
+  children?: React.ReactNode;
 }
 
-export type DrawerProps = Props;
-export 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
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true
  */
-class Drawer extends PureComponent<Props> {
+class Drawer extends PureComponent<DrawerProps> {
   static displayName = 'Drawer';
 
   static defaultProps = {
@@ -171,7 +169,7 @@ class Drawer extends PureComponent<Props> {
     return this.getActionsContainerStyle(Constants.isRTL ? [leftItem] : rightItems);
   });
 
-  private getActionsContainerStyle(items: ItemProps[]) {
+  private getActionsContainerStyle(items: DrawerItemProps[]) {
     return {backgroundColor: _.get(_.first(items), 'background', DEFAULT_BG)};
   }
 
@@ -203,7 +201,7 @@ class Drawer extends PureComponent<Props> {
 
   /** Events */
 
-  private onActionPress = (item: ItemProps) => {
+  private onActionPress = (item: DrawerItemProps) => {
     if (!item.keepOpen) {
       this.closeDrawer();
     }
@@ -296,7 +294,7 @@ class Drawer extends PureComponent<Props> {
     return this.renderActions(rightItems, progress /* , dragX */);
   };
 
-  private renderActions(items: ItemProps[] | undefined, progress: Animated.Value /* , dragX: Animated.Value */) {
+  private renderActions(items: DrawerItemProps[] | undefined, progress: Animated.Value /* , dragX: Animated.Value */) {
     if (items) {
       return (
         // @ts-ignore
@@ -333,6 +331,7 @@ class Drawer extends PureComponent<Props> {
     });
 
     return (
+      // @ts-expect-error related to missing children type started on react 18
       <RectButton
         key={index}
         testID={item.testID}
@@ -417,6 +416,7 @@ class Drawer extends PureComponent<Props> {
   }
 }
 
+export {DrawerProps, DrawerItemProps};
 export default asBaseComponent<DrawerProps, typeof Drawer>(Drawer);
 
 const styles = StyleSheet.create({

src/components/gridList/index.tsx

@@ -30,7 +30,7 @@ function GridList<T = any>(props: GridListProps<T>) {
     return [{paddingHorizontal: listPadding}, contentContainerStyle];
   }, [listPadding, contentContainerStyle]);
 
-  const _renderItem = useCallback((...args) => {
+  const _renderItem = useCallback((...args: any[]) => {
     // @ts-expect-error
     return <View style={itemContainerStyle}>{renderItem?.(...args)}</View>;
   },

src/components/gridListItem/index.tsx

@@ -101,6 +101,7 @@ export interface GridListItemProps {
    * Test ID for component
    */
   testID?: string;
+  children?: React.ReactNode;
 }
 
 interface RenderContentType {

src/components/hint/index.tsx

@@ -144,6 +144,7 @@ export interface HintProps {
    * Additional styling
    */
   style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
 }
 
 interface HintState {

src/components/listItem/ListItemPart.tsx

@@ -4,6 +4,10 @@ import {asBaseComponent} from '../../commons/new';
 import View from '../view';
 import {ListItemPartProps} from './types';
 
+/**
+ * @description: ListItem.Part, a sub ListItem component for layout-ing inside a ListItem
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx
+ */
 class ListItemPart extends Component<ListItemPartProps> {
   static displayName = 'ListItem.Part';
 

src/components/listItem/index.tsx

@@ -11,6 +11,12 @@ type ListItemState = {
   pressed: boolean;
 };
 
+/**
+ * @description: List item component to render inside a List component
+ * @extends: 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.tsx
+ */
 class ListItem extends Component<ListItemProps, ListItemState> {
   static displayName = 'ListItem';
 
@@ -54,6 +60,7 @@ class ListItem extends Component<ListItemProps, ListItemState> {
 
   renderCustomContainer = (Container: React.ComponentType) => {
     const {...others} = this.props;
+    // @ts-expect-error
     return <Container {...others}>{this.renderChildren()}</Container>;
   };
 

src/components/listItem/types.tsx

@@ -1,41 +1,42 @@
-import {PureComponent} from 'react';
+import {PropsWithChildren} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
-export type ListItemProps = {
-  /**
-   * the list item height
-   */
-  height?: ViewStyle['height'];
-  /**
-   * action for when pressing the item
-   */
-  onPress?: () => void;
-  /**
-   * action for when long pressing the item
-   */
-  onLongPress?: () => void;
-  /**
-   * Additional styles for the top container
-   */
-  containerStyle?: ViewStyle;
-  /**
-   * The container element to wrap the ListItem
-   */
-  containerElement?: React.ComponentType<ListItemProps | TouchableOpacityProps>;
-  /**
-   * The inner element style
-   */
-  style?: ViewStyle;
-  /**
-   * The inner element pressed backgroundColor
-   */
-  underlayColor?: string;
+export type ListItemProps = TouchableOpacityProps &
+  PropsWithChildren<{
+    /**
+     * the list item height
+     */
+    height?: ViewStyle['height'];
+    /**
+     * action for when pressing the item
+     */
+    onPress?: () => void;
+    /**
+     * action for when long pressing the item
+     */
+    onLongPress?: () => void;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * The container element to wrap the ListItem
+     */
+    containerElement?: React.ComponentType<ListItemProps | TouchableOpacityProps>;
+    /**
+     * The inner element style
+     */
+    style?: ViewStyle;
+    /**
+     * The inner element pressed backgroundColor
+     */
+    underlayColor?: string;
 
-  testID?: string;
-};
+    testID?: string;
+  }>;
 
-export type ListItemPartProps = {
+export type ListItemPartProps = PropsWithChildren<{
   /**
    * this part content will be aligned to left
    */
@@ -60,33 +61,4 @@ export type ListItemPartProps = {
    * container style
    */
   containerStyle?: StyleProp<ViewStyle>;
-};
-
-/**
- * @description: List item component to render inside a List component
- * @extends: 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.tsx
- */
-// @ts-ignore
-class FakeListItemForDocs extends PureComponent<ListItemProps> { // eslint-disable-line
-  static displayName = 'ListItem';
-
-  render() {
-    return null;
-  }
-}
-
-
-/**
- * @description: ListItem.Part, a sub ListItem component for layout-ing inside a ListItem
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx
- */
-// @ts-ignore
-class FakeListItemPartForDocs extends PureComponent<ListItemPartProps> { // eslint-disable-line
-    static displayName = 'ListItemPart';
-  
-    render() {
-      return null;
-    }
-}
+}>;

src/components/panningViews/panDismissibleView.tsx

@@ -54,6 +54,7 @@ export interface PanDismissibleViewProps {
    * since it looks better and most cases.
    */
   allowDiagonalDismiss?: boolean;
+  children?: React.ReactNode;
 }
 
 const DEFAULT_DIRECTIONS = [