Infra/component prop types migration

demo/src/screens/componentScreens/CardsScreen.tsx

@@ -6,7 +6,7 @@ import {
   Colors,
   View,
   Card,
-  CardPropTypes,
+  CardProps,
   Button,
   Text,
   Image
@@ -152,7 +152,7 @@ export default class CardsScreen extends Component<
     );
   };
 
-  renderCoupon = (cardProps: CardPropTypes) => {
+  renderCoupon = (cardProps: CardProps) => {
     return (
       <Card
         {...cardProps}
@@ -192,7 +192,7 @@ export default class CardsScreen extends Component<
     );
   };
 
-  renderComplexImage = (cardProps: CardPropTypes, image: React.ReactNode) => {
+  renderComplexImage = (cardProps: CardProps, image: React.ReactNode) => {
     return (
       <Card
         {...cardProps}
@@ -282,7 +282,7 @@ export default class CardsScreen extends Component<
     );
   };
 
-  renderBackgroundCard = (cardProps: CardPropTypes, body: React.ReactNode) => {
+  renderBackgroundCard = (cardProps: CardProps, body: React.ReactNode) => {
     return (
       <Card flex center height={80} {...cardProps}>
         {body}

src/components/actionBar/index.tsx

@@ -1,10 +1,11 @@
+import _ from 'lodash';
 import React, { Component } from 'react';
 import {StyleSheet, ViewStyle} from 'react-native';
-import _ from 'lodash';
+import {Colors, Shadows} from '../../style';
 import {asBaseComponent} from '../../commons/new';
 import View from '../view';
-import Button, {ButtonPropTypes} from '../button';
-import {Colors, Shadows} from '../../style';
+import Button, {ButtonProps} from '../button';
+
 
 /**
  * @description: Quick actions bar, each action support Button component props
@@ -25,7 +26,7 @@ export type ActionBarProps = {
     /**
      * actions for the action bar
      */
-    actions: ButtonPropTypes[];
+    actions: ButtonProps[];
     /**
      * should action be equally centered
      */
@@ -58,7 +59,7 @@ class ActionBar extends Component<ActionBarProps> {
   }
 
   styles = createStyles(this.props);
-  
+
   getAlignment(actionIndex: number) {
     const {actions, centered} = this.props;
     const first = actionIndex === 0;

src/components/avatar/index.tsx

@@ -34,7 +34,7 @@ export enum BadgePosition {
 
 const DEFAULT_BADGE_SIZE = 'pimpleBig';
 
-export type AvatarPropTypes = {
+export type AvatarProps = {
   /**
    * Adds fade in animation when Avatar image loads
    */
@@ -128,6 +128,7 @@ export type AvatarPropTypes = {
    */
   testID?: string;
 };
+export type AvatarPropTypes = AvatarProps; //TODO: remove after ComponentPropTypes deprecation;
 
 /**
  * @description: Avatar component for displaying user profile images
@@ -137,11 +138,11 @@ export type AvatarPropTypes = {
  * @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.js
  */
-class Avatar extends PureComponent<AvatarPropTypes> {
+class Avatar extends PureComponent<AvatarProps> {
 
   styles: ReturnType<typeof createStyles>;
 
-  constructor(props: AvatarPropTypes) {
+  constructor(props: AvatarProps) {
     super(props);
 
     this.styles = createStyles(props);
@@ -356,7 +357,7 @@ class Avatar extends PureComponent<AvatarPropTypes> {
   }
 }
 
-function createStyles(props: AvatarPropTypes) {
+function createStyles(props: AvatarProps) {
   const {labelColor} = props;
   const styles = StyleSheet.create({
     initialsContainerWithInset: {
@@ -381,4 +382,4 @@ function createStyles(props: AvatarPropTypes) {
 
 export {Avatar}; // For tests
 
-export default asBaseComponent<AvatarPropTypes, typeof Avatar>(forwardRef(Avatar))
+export default asBaseComponent<AvatarProps, typeof Avatar>(forwardRef(Avatar))

src/components/button/index.tsx

@@ -16,7 +16,7 @@ import {Constants} from '../../helpers';
 import {Colors, Typography, BorderRadiuses} from '../../style';
 import {extractColorValue, extractTypographyValue} from '../../commons/modifiers';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
-import Text, {TextPropTypes} from '../text';
+import Text, {TextProps} from '../text';
 import Image from '../image';
 
 export enum ButtonSize {
@@ -32,7 +32,7 @@ export enum AnimationDirection {
   right = 'right'
 }
 
-export type ButtonPropTypes = TouchableOpacityProps &
+export type ButtonProps = TouchableOpacityProps &
   TypographyModifiers &
   ColorsModifiers &
   BackgroundColorModifier &
@@ -112,7 +112,7 @@ export type ButtonPropTypes = TouchableOpacityProps &
     /**
      * Props that will be passed to the button's Text label.
      */
-    labelProps?: TextPropTypes;
+    labelProps?: TextProps;
     /**
      * should the button act as a coast to coast button (no border radius)
      */
@@ -148,6 +148,7 @@ export type ButtonPropTypes = TouchableOpacityProps &
      */
     animateTo?: AnimationDirection;
   };
+export type ButtonPropTypes = ButtonProps; //TODO: remove after ComponentPropTypes deprecation;
 
 export type ButtonState = {
   size?: number;
@@ -176,7 +177,7 @@ const MIN_WIDTH = {
 const DEFAULT_SIZE = ButtonSize.large;
 const DISABLED_COLOR = Colors.dark60;
 
-type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
+type Props = ButtonProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
 
 /**
  * @description: Basic button component
@@ -572,4 +573,4 @@ function createStyles() {
 
 export {Button}; // For tests
 
-export default asBaseComponent<ButtonPropTypes, typeof Button>(forwardRef<Props>(Button));
+export default asBaseComponent<ButtonProps, typeof Button>(forwardRef<Props>(Button));

src/components/card/CardSection.tsx

@@ -3,15 +3,15 @@ import React, {PureComponent} from 'react';
 import {StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType, StyleProp} from 'react-native';
 import {LogService} from '../../services';
 import {asBaseComponent} from '../../commons/new';
-import View, {ViewPropTypes} from '../view';
-import Text, {TextPropTypes} from '../text';
+import View, {ViewProps} from '../view';
+import Text, {TextProps} from '../text';
 import Image, {ImageProps} from '../image';
 import asCardChild, {asCardChildProps} from './asCardChild';
 
 
-type ContentType = TextPropTypes & {text?: string};
+type ContentType = TextProps & {text?: string};
 
-export type CardSectionProps = ViewPropTypes & {
+export type CardSectionProps = ViewProps & {
   /**
    * Text content for the CardSection.
    * Example: content={[{text: 'You’re Invited!', text70: true, dark10: true}]}

src/components/card/index.tsx

@@ -11,7 +11,7 @@ import {
   BaseComponentInjectedProps,
   ForwardRefInjectedProps
 } from '../../commons/new';
-import View, {ViewPropTypes} from '../view';
+import View, {ViewProps} from '../view';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Image from '../image';
 import CardImage from './CardImage';
@@ -32,7 +32,7 @@ const DEFAULT_SELECTION_PROPS = {
 };
 
 export {CardSectionProps};
-export type CardPropTypes = ViewPropTypes &
+export type CardProps = ViewProps &
   TouchableOpacityProps & {
     /**
      * card custom width
@@ -90,10 +90,11 @@ export type CardPropTypes = ViewPropTypes &
       hideIndicator?: boolean;
     };
   };
+export type CardPropTypes = CardProps; //TODO: remove after ComponentPropTypes deprecation;
 
 type PropTypes = BaseComponentInjectedProps &
   ForwardRefInjectedProps &
-  CardPropTypes;
+  CardProps;
 
 type State = {
   animatedSelected: Animated.Value;
@@ -322,7 +323,7 @@ function createStyles({
   height,
   borderRadius,
   selectionOptions
-}: CardPropTypes) {
+}: CardProps) {
   const selectionOptionsWithDefaults = {
     ...DEFAULT_SELECTION_PROPS,
     ...selectionOptions
@@ -375,7 +376,7 @@ Card.Image = CardImage;
 Card.Section = CardSection;
 
 export default asBaseComponent<
-  CardPropTypes,
+  CardProps,
   {
     Image: typeof CardImage;
     Section: typeof CardSection;

src/components/checkbox/index.tsx

@@ -23,7 +23,7 @@ const DEFAULT_COLOR = Colors.blue30;
 const DEFAULT_ICON_COLOR = Colors.white;
 const DEFAULT_DISABLED_COLOR = Colors.grey50;
 
-export interface CheckboxPropTypes extends TouchableOpacityProps {
+export interface CheckboxProps extends TouchableOpacityProps {
   /**
    * The value of the Checkbox. If true the switch will be turned on. Default value is false.
    */
@@ -72,8 +72,8 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
    * Additional styling for checkbox and label container
    */
   containerStyle?: StyleProp<ViewStyle>;
-
 }
+export type CheckboxPropTypes = CheckboxProps; //TODO: remove after ComponentPropTypes deprecation;
 
 interface CheckboxState {
   isChecked: Animated.Value;
@@ -86,7 +86,7 @@ interface CheckboxState {
  * @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx
  */
-class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
+class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
 
   styles: {
@@ -107,7 +107,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
     ];
   };
 
-  constructor(props: CheckboxPropTypes) {
+  constructor(props: CheckboxProps) {
     super(props);
 
     this.state = {
@@ -129,7 +129,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
     };
   }
 
-  componentDidUpdate(prevProps: CheckboxPropTypes) {
+  componentDidUpdate(prevProps: CheckboxProps) {
     const {value} = this.props;
     if (prevProps.value !== value) {
       this.animateCheckbox(value);
@@ -148,7 +148,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
     };
   }
 
-  animateCheckbox(value: CheckboxPropTypes['value']) {
+  animateCheckbox(value: CheckboxProps['value']) {
     const {isChecked} = this.state;
 
     Animated.timing(isChecked, {
@@ -223,7 +223,7 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
   }
 }
 
-function createStyles(props: CheckboxPropTypes) {
+function createStyles(props: CheckboxProps) {
   const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
 
   return StyleSheet.create({
@@ -247,4 +247,4 @@ function createStyles(props: CheckboxPropTypes) {
   });
 }
 
-export default asBaseComponent<CheckboxPropTypes>(Checkbox);
+export default asBaseComponent<CheckboxProps>(Checkbox);

src/components/chip/index.tsx

@@ -6,15 +6,16 @@ import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
 import {BorderRadiuses, Spacings} from '../../style';
 // @ts-ignore
-import Avatar, {AvatarPropTypes} from '../avatar';
+import Avatar, {AvatarProps} from '../avatar';
 // @ts-ignore
 import Badge, {BadgeProps, BADGE_SIZES} from '../badge';
 import Image from '../image';
 import Text from '../text';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 
-export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
+
+export type ChipProps = ViewProps & TouchableOpacityProps & {
   //GENERAL
   /**
    * Chip's size. Number or a width and height object.
@@ -69,7 +70,7 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
   /**
    * Avatar props object
    */
-  avatarProps?: AvatarPropTypes;
+  avatarProps?: AvatarProps;
 
   //ICON GENERAL
   /**
@@ -115,6 +116,7 @@ export type ChipPropTypes = ViewProps & TouchableOpacityProps & {
    */
   dismissContainerStyle?: StyleProp<ImageStyle>;
 }
+export type ChipPropTypes = ChipProps; //TODO: remove after ComponentPropTypes deprecation;
 
 /**
  * @description: Chip component
@@ -145,7 +147,7 @@ const Chip = ({
   useSizeAsMinimum,
   testID,
   ...others
-}: ChipPropTypes) => {
+}: ChipProps) => {
 
   const renderIcon = useCallback((iconPosition) => {
     const isLeftIcon = iconPosition === 'left';
@@ -329,4 +331,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default asBaseComponent<ChipPropTypes>(Chip);
+export default asBaseComponent<ChipProps>(Chip);

src/components/floatingButton/index.tsx

@@ -5,7 +5,7 @@ import {Constants} from '../../helpers';
 import {asBaseComponent} from '../../commons/new';
 import {Colors, Spacings} from '../../style';
 import View from '../view';
-import Button, {ButtonPropTypes} from '../button';
+import Button, {ButtonProps} from '../button';
 import Image from '../image';
 
 export interface FloatingButtonProps {
@@ -16,11 +16,11 @@ export interface FloatingButtonProps {
   /**
    * Button element (all Button's component's props)
    */
-  button?: PropsWithChildren<ButtonPropTypes>;
+  button?: PropsWithChildren<ButtonProps>;
   /**
    * Secondary button element (all Button's component's props)
    */
-  secondaryButton?: PropsWithChildren<ButtonPropTypes>;
+  secondaryButton?: PropsWithChildren<ButtonProps>;
   /**
    * The bottom margin of the button, or secondary button if passed
    */
@@ -56,7 +56,7 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
 
   initialVisibility?: boolean;
   firstLoad: boolean;
-  
+
   constructor(props: FloatingButtonProps) {
     super(props);