From 53f6a5bef88156713b86a190104e0f2c71f7ab2c Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 2 Nov 2023 12:17:12 +0100
Subject: [PATCH 1/3] migrate ReportActionsSkeletonView and
 SkeletonViewContentLoader directories to TypeScript

---
 ...etonViewLines.js => SkeletonViewLines.tsx} | 24 +++++++------------
 .../{index.js => index.tsx}                   | 21 ++++------------
 .../{index.native.js => index.native.tsx}     |  0
 .../{index.js => index.tsx}                   |  0
 4 files changed, 13 insertions(+), 32 deletions(-)
 rename src/components/ReportActionsSkeletonView/{SkeletonViewLines.js => SkeletonViewLines.tsx} (73%)
 rename src/components/ReportActionsSkeletonView/{index.js => index.tsx} (73%)
 rename src/components/SkeletonViewContentLoader/{index.native.js => index.native.tsx} (100%)
 rename src/components/SkeletonViewContentLoader/{index.js => index.tsx} (100%)

diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
similarity index 73%
rename from src/components/ReportActionsSkeletonView/SkeletonViewLines.js
rename to src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index 51ae4c1034a5..d5d6d777c5fe 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
@@ -6,21 +5,16 @@ import styles from '@styles/styles';
 import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    /** Number of rows to show in Skeleton UI block */
-    numberOfRows: PropTypes.number.isRequired,
-    shouldAnimate: PropTypes.bool,
+type SkeletonViewLinesProps = {
+    numberOfRows: 1 | 2 | 3;
+    shouldAnimate?: boolean;
 };
 
-const defaultTypes = {
-    shouldAnimate: true,
-};
-
-function SkeletonViewLines(props) {
+function SkeletonViewLines({numberOfRows, shouldAnimate = true}: SkeletonViewLinesProps) {
     return (
         <SkeletonViewContentLoader
-            animate={props.shouldAnimate}
-            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
+            animate={shouldAnimate}
+            height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[numberOfRows]}
             backgroundColor={themeColors.skeletonLHNIn}
             foregroundColor={themeColors.skeletonLHNOut}
             style={styles.mr5}
@@ -42,7 +36,7 @@ function SkeletonViewLines(props) {
                 width="100%"
                 height="8"
             />
-            {props.numberOfRows > 1 && (
+            {numberOfRows > 1 && (
                 <Rect
                     x="72"
                     y="51"
@@ -50,7 +44,7 @@ function SkeletonViewLines(props) {
                     height="8"
                 />
             )}
-            {props.numberOfRows > 2 && (
+            {numberOfRows > 2 && (
                 <Rect
                     x="72"
                     y="71"
@@ -63,6 +57,4 @@ function SkeletonViewLines(props) {
 }
 
 SkeletonViewLines.displayName = 'SkeletonViewLines';
-SkeletonViewLines.propTypes = propTypes;
-SkeletonViewLines.defaultProps = defaultTypes;
 export default SkeletonViewLines;
diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.tsx
similarity index 73%
rename from src/components/ReportActionsSkeletonView/index.js
rename to src/components/ReportActionsSkeletonView/index.tsx
index 6087510a53b0..8d964eec2b89 100644
--- a/src/components/ReportActionsSkeletonView/index.js
+++ b/src/components/ReportActionsSkeletonView/index.tsx
@@ -1,25 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Dimensions, View} from 'react-native';
 import CONST from '@src/CONST';
 import SkeletonViewLines from './SkeletonViewLines';
 
-const propTypes = {
-    /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
-
-    /** Number of possible visible content items */
-    possibleVisibleContentItems: PropTypes.number,
-};
-
-const defaultProps = {
-    shouldAnimate: true,
-    possibleVisibleContentItems: 0,
+type ReportActionsSkeletonViewProps = {
+    shouldAnimate?: boolean;
+    possibleVisibleContentItems?: number;
 };
 
-function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems}) {
+function ReportActionsSkeletonView({shouldAnimate = true, possibleVisibleContentItems = 0}: ReportActionsSkeletonViewProps) {
     const contentItems = possibleVisibleContentItems || Math.ceil(Dimensions.get('window').height / CONST.CHAT_SKELETON_VIEW.AVERAGE_ROW_HEIGHT);
-    const skeletonViewLines = [];
+    const skeletonViewLines: React.ReactNode[] = [];
     for (let index = 0; index < contentItems; index++) {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
@@ -55,6 +46,4 @@ function ReportActionsSkeletonView({shouldAnimate, possibleVisibleContentItems})
 }
 
 ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
-ReportActionsSkeletonView.propTypes = propTypes;
-ReportActionsSkeletonView.defaultProps = defaultProps;
 export default ReportActionsSkeletonView;
diff --git a/src/components/SkeletonViewContentLoader/index.native.js b/src/components/SkeletonViewContentLoader/index.native.tsx
similarity index 100%
rename from src/components/SkeletonViewContentLoader/index.native.js
rename to src/components/SkeletonViewContentLoader/index.native.tsx
diff --git a/src/components/SkeletonViewContentLoader/index.js b/src/components/SkeletonViewContentLoader/index.tsx
similarity index 100%
rename from src/components/SkeletonViewContentLoader/index.js
rename to src/components/SkeletonViewContentLoader/index.tsx

From 5691b356dff885207fe10c82fb9219fe438cf191 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 2 Nov 2023 12:27:50 +0100
Subject: [PATCH 2/3] bring back comments

---
 src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx | 1 +
 src/components/ReportActionsSkeletonView/index.tsx             | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index d5d6d777c5fe..5a5d1011db38 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -6,6 +6,7 @@ import themeColors from '@styles/themes/default';
 import CONST from '@src/CONST';
 
 type SkeletonViewLinesProps = {
+    /** Number of rows to show in Skeleton UI block */
     numberOfRows: 1 | 2 | 3;
     shouldAnimate?: boolean;
 };
diff --git a/src/components/ReportActionsSkeletonView/index.tsx b/src/components/ReportActionsSkeletonView/index.tsx
index 8d964eec2b89..ccabf39a9c39 100644
--- a/src/components/ReportActionsSkeletonView/index.tsx
+++ b/src/components/ReportActionsSkeletonView/index.tsx
@@ -4,7 +4,10 @@ import CONST from '@src/CONST';
 import SkeletonViewLines from './SkeletonViewLines';
 
 type ReportActionsSkeletonViewProps = {
+    /** Whether to animate the skeleton view */
     shouldAnimate?: boolean;
+
+    /** Number of possible visible content items */
     possibleVisibleContentItems?: number;
 };
 

From 9573c52625cc68db8beb227f8a784ce8362ce030 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Mon, 6 Nov 2023 12:29:53 +0100
Subject: [PATCH 3/3] add type intersection

---
 .../SkeletonViewContentLoader/index.native.tsx           | 9 ++++++++-
 src/components/SkeletonViewContentLoader/index.tsx       | 9 ++++++++-
 src/components/SkeletonViewContentLoader/types.ts        | 6 ++++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SkeletonViewContentLoader/types.ts

diff --git a/src/components/SkeletonViewContentLoader/index.native.tsx b/src/components/SkeletonViewContentLoader/index.native.tsx
index bdcea964e52c..370eb2f669f1 100644
--- a/src/components/SkeletonViewContentLoader/index.native.tsx
+++ b/src/components/SkeletonViewContentLoader/index.native.tsx
@@ -1,3 +1,10 @@
+import React from 'react';
 import SkeletonViewContentLoader from 'react-content-loader/native';
+import SkeletonViewContentLoaderProps from './types';
 
-export default SkeletonViewContentLoader;
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/index.tsx b/src/components/SkeletonViewContentLoader/index.tsx
index 335611c6f5cb..105e677ad7c1 100644
--- a/src/components/SkeletonViewContentLoader/index.tsx
+++ b/src/components/SkeletonViewContentLoader/index.tsx
@@ -1,3 +1,10 @@
+import React from 'react';
 import SkeletonViewContentLoader from 'react-content-loader';
+import SkeletonViewContentLoaderProps from './types';
 
-export default SkeletonViewContentLoader;
+function ContentLoader(props: SkeletonViewContentLoaderProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SkeletonViewContentLoader {...props} />;
+}
+
+export default ContentLoader;
diff --git a/src/components/SkeletonViewContentLoader/types.ts b/src/components/SkeletonViewContentLoader/types.ts
new file mode 100644
index 000000000000..23f0a051e518
--- /dev/null
+++ b/src/components/SkeletonViewContentLoader/types.ts
@@ -0,0 +1,6 @@
+import {IContentLoaderProps} from 'react-content-loader';
+import {IContentLoaderProps as NativeIContentLoaderProps} from 'react-content-loader/native';
+
+type SkeletonViewContentLoaderProps = IContentLoaderProps & NativeIContentLoaderProps;
+
+export default SkeletonViewContentLoaderProps;