Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Mar 12, 2024
1 change: 1 addition & 0 deletions src/components/EReceipt.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,4 @@ export default withOnyx<EReceiptProps, EReceiptOnyxProps>({
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
},
})(EReceipt);
export type {EReceiptProps, EReceiptOnyxProps};
1 change: 1 addition & 0 deletions src/components/EReceiptThumbnail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,4 @@ export default withOnyx<EReceiptThumbnailProps, EReceiptThumbnailOnyxProps>({
key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
},
})(EReceiptThumbnail);
export type {EReceiptThumbnailProps, EReceiptThumbnailOnyxProps};
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,4 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report
ReportActionItemImages.displayName = 'ReportActionItemImages';

export default ReportActionItemImages;
export type {ReportActionItemImagesProps};
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
/* eslint-disable rulesdir/prefer-actions-set-data */
/* eslint-disable @typescript-eslint/naming-convention, rulesdir/prefer-actions-set-data */
import type {ComponentMeta, ComponentStory} from '@storybook/react';
import React from 'react';
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 CollectionDataSet from '@src/types/utils/CollectionDataSet';

type EReceiptStory = ComponentStory<typeof EReceipt>;

const transactionData = {
[`${ONYXKEYS.COLLECTION.TRANSACTION}FAKE_1`]: {
Expand Down Expand Up @@ -146,7 +151,7 @@ const transactionData = {
created: '2023-01-11 13:46:20',
hasEReceipt: true,
},
};
} as CollectionDataSet<typeof ONYXKEYS.COLLECTION.TRANSACTION>;

Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, transactionData);
Onyx.merge('cardList', {
Expand All @@ -159,92 +164,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',
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
};
Expand Down
Loading
Loading