[TS migration] Migrate 'Composer.stories.js', 'DragAndDrop.stories.js', 'Form.stories.js' and 'RadioButtonWithLabel.stories.js' stories to TypeScript

src/components/DragAndDrop/Provider/types.ts

@@ -8,7 +8,7 @@ type DragAndDropProviderProps = {
     isDisabled?: boolean;
 
     /** Indicate that users are dragging file or not */
-    setIsDraggingOver: (value: boolean) => void;
+    setIsDraggingOver?: (value: boolean) => void;
 };
 
 type SetOnDropHandlerCallback = (event: DragEvent) => void;

src/stories/Composer.stories.js → src/stories/Composer.stories.tsx

@@ -1,16 +1,16 @@
+import type {ComponentMeta} from '@storybook/react';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {useState} from 'react';
 import {Image, View} from 'react-native';
 import Composer from '@components/Composer';
+import type {ComposerProps} from '@components/Composer/types';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useStyleUtils from '@hooks/useStyleUtils';
 // eslint-disable-next-line no-restricted-imports
-import {defaultStyles} from '@styles/index';
-// eslint-disable-next-line no-restricted-imports
 import {defaultTheme} from '@styles/theme';
-import CONST from '@src/CONST';
+import {defaultStyles} from '@src/styles';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
 
@@ -19,43 +19,40 @@ const ComposerWithNavigation = withNavigationFallback(Composer);
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof ComposerWithNavigation> = {
     title: 'Components/Composer',
     component: ComposerWithNavigation,
 };
 
 const parser = new ExpensiMark();
 
-function Default(args) {
+function Default(props: ComposerProps) {
     const StyleUtils = useStyleUtils();
-    const [pastedFile, setPastedFile] = useState(null);
-    const [comment, setComment] = useState(args.defaultValue);
-    const renderedHTML = parser.replace(comment);
+    const [pastedFile, setPastedFile] = useState<File | null>(null);
+    const [comment, setComment] = useState(props.defaultValue);
+    const renderedHTML = parser.replace(comment ?? '');
 
     return (
         <View>
             <View style={[defaultStyles.border, defaultStyles.p4]}>
                 <ComposerWithNavigation
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...args}
+                    {...props}
                     multiline
                     onChangeText={setComment}
                     onPasteFile={setPastedFile}
                     style={[defaultStyles.textInputCompose, defaultStyles.w100, defaultStyles.verticalAlignTop]}
                 />
             </View>
             <View style={[defaultStyles.flexRow, defaultStyles.mv5, defaultStyles.flexWrap, defaultStyles.w100]}>
-                <View
-                    style={[defaultStyles.border, defaultStyles.noLeftBorderRadius, defaultStyles.noRightBorderRadius, defaultStyles.p5, defaultStyles.flex1]}
-                    id={CONST.REPORT.DROP_NATIVE_ID}
-                >
+                <View style={[defaultStyles.border, defaultStyles.noLeftBorderRadius, defaultStyles.noRightBorderRadius, defaultStyles.p5, defaultStyles.flex1]}>
                     <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
                     <Text>{comment}</Text>
                 </View>
                 <View style={[defaultStyles.p5, defaultStyles.borderBottom, defaultStyles.borderRight, defaultStyles.borderTop, defaultStyles.flex1]}>
                     <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Rendered Comment</Text>
-                    {Boolean(renderedHTML) && <RenderHTML html={renderedHTML} />}
-                    {Boolean(pastedFile) && (
+                    {!!renderedHTML && <RenderHTML html={renderedHTML} />}
+                    {!!pastedFile && (
                         <View style={defaultStyles.mv3}>
                             <Image
                                 source={{uri: URL.createObjectURL(pastedFile)}}

src/stories/DragAndDrop.stories.js → src/stories/DragAndDrop.stories.tsx

@@ -1,24 +1,24 @@
-import lodashGet from 'lodash/get';
+import type {ComponentMeta} from '@storybook/react';
 import React, {useState} from 'react';
 import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
-// eslint-disable-next-line no-restricted-imports
-import {defaultStyles} from '@styles/index';
+import {defaultStyles} from '@src/styles';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof DragAndDropConsumer> = {
     title: 'Components/DragAndDrop',
     component: DragAndDropConsumer,
 };
 
 function Default() {
     const [fileURL, setFileURL] = useState('');
+
     return (
         <View
             style={[
@@ -46,11 +46,11 @@ function Default() {
                     )}
                 </View>
                 <DragAndDropConsumer
-                    onDrop={(e) => {
-                        const file = lodashGet(e, ['dataTransfer', 'files', 0]);
-                        if (file && file.type.includes('image')) {
+                    onDrop={(event) => {
+                        const file = event.dataTransfer?.files?.[0];
+                        if (file?.type.includes('image')) {
                             const reader = new FileReader();
-                            reader.addEventListener('load', () => setFileURL(reader.result));
+                            reader.addEventListener('load', () => setFileURL(reader.result as string));
                             reader.readAsDataURL(file);
                         }
                     }}

src/styles/utils/index.ts

@@ -453,7 +453,7 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu
     return {};
 }
 
-function getWidthAndHeightStyle(width: number, height?: number): ViewStyle {
+function getWidthAndHeightStyle(width: number, height?: number): Pick<ViewStyle, 'height' | 'width'> {
     return {
         width,
         height: height ?? width,