From a4da500430ba07e16323c7ea0dae77e1cc5502c6 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Thu, 26 Oct 2023 15:23:32 +0200
Subject: [PATCH 1/3] migrate CurrentUserPersonalDetailsSkeletonView to
 TypeScript

---
 .../{index.js => index.tsx}                   | 37 ++++++++-----------
 1 file changed, 16 insertions(+), 21 deletions(-)
 rename src/components/CurrentUserPersonalDetailsSkeletonView/{index.js => index.tsx} (71%)

diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
similarity index 71%
rename from src/components/CurrentUserPersonalDetailsSkeletonView/index.js
rename to src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index cc305a628820..a77348ee6c57 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import {Circle, Rect} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
 import {View} from 'react-native';
 import * as StyleUtils from '../../styles/StyleUtils';
 import CONST from '../../CONST';
@@ -10,29 +9,27 @@ import themeColors from '../../styles/themes/default';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
 
-const propTypes = {
+type CurrentUserPersonalDetailsSkeletonViewProps = {
     /** Whether to animate the skeleton view */
-    shouldAnimate: PropTypes.bool,
+    shouldAnimate?: boolean;
 
     /** The size of the avatar */
-    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    avatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Background color of the skeleton view */
-    backgroundColor: PropTypes.string,
+    backgroundColor?: string;
 
     /** Foreground color of the skeleton view */
-    foregroundColor: PropTypes.string,
+    foregroundColor?: string;
 };
 
-const defaultProps = {
-    shouldAnimate: true,
-    avatarSize: CONST.AVATAR_SIZE.LARGE,
-    backgroundColor: themeColors.highlightBG,
-    foregroundColor: themeColors.border,
-};
-
-function CurrentUserPersonalDetailsSkeletonView(props) {
-    const avatarPlaceholderSize = StyleUtils.getAvatarSize(props.avatarSize);
+function CurrentUserPersonalDetailsSkeletonView({
+    shouldAnimate = true,
+    avatarSize = CONST.AVATAR_SIZE.LARGE,
+    backgroundColor = themeColors.highlightBG,
+    foregroundColor = themeColors.border,
+}: CurrentUserPersonalDetailsSkeletonViewProps) {
+    const avatarPlaceholderSize = StyleUtils.getAvatarSize(avatarSize);
     const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
     const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
     const headlineSize = variables.fontSizeXLarge;
@@ -41,9 +38,9 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
     return (
         <View style={styles.avatarSectionWrapperSkeleton}>
             <SkeletonViewContentLoader
-                animate={props.shouldAnimate}
-                backgroundColor={props.backgroundColor}
-                foregroundColor={props.foregroundColor}
+                animate={shouldAnimate}
+                backgroundColor={backgroundColor}
+                foregroundColor={foregroundColor}
                 height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
             >
                 <Circle
@@ -69,6 +66,4 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
 }
 
 CurrentUserPersonalDetailsSkeletonView.displayName = 'CurrentUserPersonalDetailsSkeletonView';
-CurrentUserPersonalDetailsSkeletonView.propTypes = propTypes;
-CurrentUserPersonalDetailsSkeletonView.defaultProps = defaultProps;
 export default CurrentUserPersonalDetailsSkeletonView;

From 2dcb8bb940b3e35d2a5210e4a0dd83953d62deb2 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Tue, 31 Oct 2023 14:14:37 +0100
Subject: [PATCH 2/3] fix linting

---
 src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index f7b5639aafbb..5094c826dd50 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import SkeletonViewContentLoader from 'react-content-loader/native';
+import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
-import {View} from 'react-native';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';

From 3bd396236cc84129b0157b32ca7e17bbbcbe6ca1 Mon Sep 17 00:00:00 2001
From: Julian Kobrynski <julian.kobrynski@callstack.com>
Date: Tue, 7 Nov 2023 09:23:20 +0100
Subject: [PATCH 3/3] fix web import

---
 src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index 5094c826dd50..3a87702b48e4 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';