[No QA] [TS Migration] Migrate 'ReportActionItemImages.stories.js', 'EReceiptThumbail.stories.js', 'EReceipt.stories.js' and 'SelectionList.stories.js' stories to TypeScript

src/components/EReceipt.tsx

@@ -105,3 +105,4 @@ export default withOnyx<EReceiptProps, EReceiptOnyxProps>({
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
     },
 })(EReceipt);
+export type {EReceiptProps, EReceiptOnyxProps};

src/components/EReceiptThumbnail.tsx

@@ -114,3 +114,4 @@ export default withOnyx<EReceiptThumbnailProps, EReceiptThumbnailOnyxProps>({
         key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
     },
 })(EReceiptThumbnail);
+export type {EReceiptThumbnailProps, EReceiptThumbnailOnyxProps};

src/components/ReportActionItem/ReportActionItemImages.tsx

@@ -109,3 +109,4 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
 ReportActionItemImages.displayName = 'ReportActionItemImages';
 
 export default ReportActionItemImages;
+export type {ReportActionItemImagesProps};

src/stories/EReceipt.stories.js → src/stories/EReceipt.stories.tsx

@@ -1,8 +1,16 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 /* eslint-disable rulesdir/prefer-actions-set-data */
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
+import type {NullishDeep} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
+import type {EReceiptOnyxProps, EReceiptProps} from '@components/EReceipt';
 import EReceipt from '@components/EReceipt';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Transaction} from '@src/types/onyx';
+
+type EReceiptStory = ComponentStory<typeof EReceipt>;
 
 const transactionData = {
     [`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_1`]: {
@@ -146,7 +154,7 @@ const transactionData = {
         created: '2023-01-11 13:46:20',
         hasEReceipt: true,
     },
-};
+} as Record<`${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`, NullishDeep<Transaction>>;
 
 Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, transactionData);
 Onyx.merge('cardList', {
@@ -159,92 +167,92 @@ Onyx.merge('cardList', {
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof EReceipt> = {
     title: 'Components/EReceipt',
     component: EReceipt,
 };
 
-function Template(args) {
+function Template(props: Omit<EReceiptProps, keyof EReceiptOnyxProps>) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <EReceipt {...args} />;
+    return <EReceipt {...props} />;
 }
 
-const Default = Template.bind({});
+const Default: EReceiptStory = Template.bind({});
 Default.args = {
     transactionID: 'FAKE_1',
 };
 
-const Airlines = Template.bind({});
+const Airlines: EReceiptStory = Template.bind({});
 Airlines.args = {
     transactionID: 'FAKE_2',
 };
 
-const Commuter = Template.bind({});
+const Commuter: EReceiptStory = Template.bind({});
 Commuter.args = {
     transactionID: 'FAKE_3',
 };
 
-const Gas = Template.bind({});
+const Gas: EReceiptStory = Template.bind({});
 Gas.args = {
     transactionID: 'FAKE_4',
 };
 
-const Goods = Template.bind({});
+const Goods: EReceiptStory = Template.bind({});
 Goods.args = {
     transactionID: 'FAKE_5',
 };
 
-const Groceries = Template.bind({});
+const Groceries: EReceiptStory = Template.bind({});
 Groceries.args = {
     transactionID: 'FAKE_6',
 };
 
-const Hotel = Template.bind({});
+const Hotel: EReceiptStory = Template.bind({});
 Hotel.args = {
     transactionID: 'FAKE_7',
 };
 
-const Mail = Template.bind({});
+const Mail: EReceiptStory = Template.bind({});
 Mail.args = {
     transactionID: 'FAKE_8',
 };
 
-const Meals = Template.bind({});
+const Meals: EReceiptStory = Template.bind({});
 Meals.args = {
     transactionID: 'FAKE_9',
 };
 
-const Rental = Template.bind({});
+const Rental: EReceiptStory = Template.bind({});
 Rental.args = {
     transactionID: 'FAKE_10',
 };
 
-const Services = Template.bind({});
+const Services: EReceiptStory = Template.bind({});
 Services.args = {
     transactionID: 'FAKE_11',
 };
 
-const Taxi = Template.bind({});
+const Taxi: EReceiptStory = Template.bind({});
 Taxi.args = {
     transactionID: 'FAKE_12',
 };
 
-const Miscellaneous = Template.bind({});
+const Miscellaneous: EReceiptStory = Template.bind({});
 Miscellaneous.args = {
     transactionID: 'FAKE_13',
 };
 
-const Utilities = Template.bind({});
+const Utilities: EReceiptStory = Template.bind({});
 Utilities.args = {
     transactionID: 'FAKE_14',
 };
 
-const invalidMCC = Template.bind({});
+const invalidMCC: EReceiptStory = Template.bind({});
 invalidMCC.args = {
     transactionID: 'FAKE_15',
 };
 
-const veryLong = Template.bind({});
+const veryLong: EReceiptStory = Template.bind({});
 veryLong.args = {
     transactionID: 'FAKE_16',
 };

src/stories/EReceiptThumbail.stories.js → src/stories/EReceiptThumbail.stories.tsx

@@ -1,130 +1,134 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import {View} from 'react-native';
+import type {EReceiptThumbnailOnyxProps, EReceiptThumbnailProps} from '@components/EReceiptThumbnail';
 import EReceiptThumbnail from '@components/EReceiptThumbnail';
 
+type EReceiptThumbnailStory = ComponentStory<typeof EReceiptThumbnail>;
+
 /**
  * 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 EReceiptThumbnail> = {
     title: 'Components/EReceiptThumbnail',
     component: EReceiptThumbnail,
 };
 
-function Template(args) {
+function Template(props: Omit<EReceiptThumbnailProps, keyof EReceiptThumbnailOnyxProps>) {
     return (
         <View style={{display: 'flex', flexDirection: 'column', gap: 12}}>
             <View>
                 <EReceiptThumbnail
-                    {...args}
+                    {...props}
                     iconSize="large"
                 />
             </View>
 
             <View style={{height: 116, width: 89, borderRadius: 0, overflow: 'hidden'}}>
                 <EReceiptThumbnail
-                    {...args}
+                    {...props}
                     iconSize="small"
                 />
             </View>
 
             <View style={{height: 140, width: 143, borderRadius: 16, overflow: 'hidden'}}>
                 <EReceiptThumbnail
-                    {...args}
+                    {...props}
                     iconSize="medium"
                 />
             </View>
 
             <View style={{height: 140, width: 283, borderRadius: 16, overflow: 'hidden'}}>
                 <EReceiptThumbnail
-                    {...args}
+                    {...props}
                     iconSize="medium"
                 />
             </View>
 
             <View style={{height: 175, width: 335, borderRadius: 16, overflow: 'hidden'}}>
                 <EReceiptThumbnail
-                    {...args}
+                    {...props}
                     iconSize="large"
                 />
             </View>
         </View>
     );
 }
 
-const Default = Template.bind({});
+const Default: EReceiptThumbnailStory = Template.bind({});
 Default.args = {
     transactionID: 'FAKE_1',
 };
 
-const Airlines = Template.bind({});
+const Airlines: EReceiptThumbnailStory = Template.bind({});
 Airlines.args = {
     transactionID: 'FAKE_2',
 };
 
-const Commuter = Template.bind({});
+const Commuter: EReceiptThumbnailStory = Template.bind({});
 Commuter.args = {
     transactionID: 'FAKE_3',
 };
 
-const Gas = Template.bind({});
+const Gas: EReceiptThumbnailStory = Template.bind({});
 Gas.args = {
     transactionID: 'FAKE_4',
 };
 
-const Goods = Template.bind({});
+const Goods: EReceiptThumbnailStory = Template.bind({});
 Goods.args = {
     transactionID: 'FAKE_5',
 };
 
-const Groceries = Template.bind({});
+const Groceries: EReceiptThumbnailStory = Template.bind({});
 Groceries.args = {
     transactionID: 'FAKE_6',
 };
 
-const Hotel = Template.bind({});
+const Hotel: EReceiptThumbnailStory = Template.bind({});
 Hotel.args = {
     transactionID: 'FAKE_7',
 };
 
-const Mail = Template.bind({});
+const Mail: EReceiptThumbnailStory = Template.bind({});
 Mail.args = {
     transactionID: 'FAKE_8',
 };
 
-const Meals = Template.bind({});
+const Meals: EReceiptThumbnailStory = Template.bind({});
 Meals.args = {
     transactionID: 'FAKE_9',
 };
 
-const Rental = Template.bind({});
+const Rental: EReceiptThumbnailStory = Template.bind({});
 Rental.args = {
     transactionID: 'FAKE_10',
 };
 
-const Services = Template.bind({});
+const Services: EReceiptThumbnailStory = Template.bind({});
 Services.args = {
     transactionID: 'FAKE_11',
 };
 
-const Taxi = Template.bind({});
+const Taxi: EReceiptThumbnailStory = Template.bind({});
 Taxi.args = {
     transactionID: 'FAKE_12',
 };
 
-const Miscellaneous = Template.bind({});
+const Miscellaneous: EReceiptThumbnailStory = Template.bind({});
 Miscellaneous.args = {
     transactionID: 'FAKE_13',
 };
 
-const Utilities = Template.bind({});
+const Utilities: EReceiptThumbnailStory = Template.bind({});
 Utilities.args = {
     transactionID: 'FAKE_14',
 };
 
-const invalidMCC = Template.bind({});
+const invalidMCC: EReceiptThumbnailStory = Template.bind({});
 invalidMCC.args = {
     transactionID: 'FAKE_15',
 };