Merge pull request #29866 from software-mansion-labs/ts-migration/tes…

…t-tool-row-component

[No QA][TS migration] Migrate 'TestToolRow.js' & 'Text' components to TypeScript

src/components/TestToolRow.js → src/components/TestToolRow.tsx

@@ -1,29 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import styles from '../styles/styles';
 import Text from './Text';
 
-const propTypes = {
+type TestToolRowProps = {
     /** Title of control */
-    title: PropTypes.string.isRequired,
+    title: string;
 
     /** Control component jsx */
-    children: PropTypes.node.isRequired,
+    children: React.ReactNode;
 };
 
-function TestToolRow(props) {
+function TestToolRow({title, children}: TestToolRowProps) {
     return (
         <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
             <View style={styles.flex2}>
-                <Text>{props.title}</Text>
+                <Text>{title}</Text>
             </View>
-            <View style={[styles.flex1, styles.alignItemsEnd]}>{props.children}</View>
+            <View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
         </View>
     );
 }
 
-TestToolRow.propTypes = propTypes;
 TestToolRow.displayName = 'TestToolRow';
 
 export default TestToolRow;

src/components/Text.js → src/components/Text.tsx

@@ -1,54 +1,46 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
+import React, {ForwardedRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Text as RNText} from 'react-native';
+import type {TextStyle} from 'react-native';
 import fontFamily from '../styles/fontFamily';
 import themeColors from '../styles/themes/default';
 import variables from '../styles/variables';
 
-const propTypes = {
+type TextProps = {
     /** The color of the text */
-    color: PropTypes.string,
+    color?: string;
 
     /** The size of the text */
-    fontSize: PropTypes.number,
+    fontSize?: number;
 
     /** The alignment of the text */
-    textAlign: PropTypes.string,
+    textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify';
 
     /** Any children to display */
-    children: PropTypes.node,
+    children: React.ReactNode;
 
     /** The family of the font to use */
-    family: PropTypes.string,
+    family?: keyof typeof fontFamily;
 
     /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
-};
-const defaultProps = {
-    color: themeColors.text,
-    fontSize: variables.fontSizeNormal,
-    family: 'EXP_NEUE',
-    textAlign: 'left',
-    children: null,
-    style: {},
+    style?: TextStyle | TextStyle[];
 };
 
-const Text = React.forwardRef(({color, fontSize, textAlign, children, family, style, ...props}, ref) => {
+function Text(
+    {color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps,
+    ref: ForwardedRef<RNText>,
+) {
     // If the style prop is an array of styles, we need to mix them all together
-    const mergedStyles = !_.isArray(style)
+    const mergedStyles = !Array.isArray(style)
         ? style
-        : _.reduce(
-              style,
+        : style.reduce(
               (finalStyles, s) => ({
                   ...finalStyles,
                   ...s,
               }),
               {},
           );
-    const componentStyle = {
+    const componentStyle: TextStyle = {
         color,
         fontSize,
         textAlign,
@@ -71,10 +63,8 @@ const Text = React.forwardRef(({color, fontSize, textAlign, children, family, st
             {children}
         </RNText>
     );
-});
+}
 
-Text.propTypes = propTypes;
-Text.defaultProps = defaultProps;
 Text.displayName = 'Text';
 
-export default Text;
+export default React.forwardRef(Text);