Merge pull request Expensify#37816 from software-mansion-labs/ts/g15-…

…stories

[No QA][TS Migration] Migrate 'OptionRow.stories.js', 'MenuItem.stories.js', 'CheckboxWithLabel.stories.js' , 'SubscriptAvatar.stories.js', 'PopoverMenu.stories.js'  stories

src/components/CheckboxWithLabel.tsx

@@ -108,3 +108,5 @@ function CheckboxWithLabel(
 CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
 export default React.forwardRef(CheckboxWithLabel);
+
+export type {CheckboxWithLabelProps};

src/components/OptionRow.tsx

@@ -340,3 +340,5 @@ export default React.memo(
         prevProps.option.pendingAction === nextProps.option.pendingAction &&
         prevProps.option.customIcon === nextProps.option.customIcon,
 );
+
+export type {OptionRowProps};

src/components/PopoverMenu.tsx

@@ -215,4 +215,4 @@ function PopoverMenu({
 PopoverMenu.displayName = 'PopoverMenu';
 
 export default React.memo(PopoverMenu);
-export type {PopoverMenuItem};
+export type {PopoverMenuItem, PopoverMenuProps};

src/stories/CheckboxWithLabel.stories.js → src/stories/CheckboxWithLabel.stories.tsx

@@ -1,29 +1,33 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
+import type {CheckboxWithLabelProps} from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
 // eslint-disable-next-line no-restricted-imports
 import {defaultStyles} from '@styles/index';
 
+type CheckboxWithLabelStory = ComponentStory<typeof CheckboxWithLabel>;
+
 /**
  * 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 CheckboxWithLabel> = {
     title: 'Components/CheckboxWithLabel',
     component: CheckboxWithLabel,
 };
 
-function Template(args) {
+function Template(props: CheckboxWithLabelProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <CheckboxWithLabel {...args} />;
+    return <CheckboxWithLabel {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const WithLabelComponent = Template.bind({});
-const WithErrors = Template.bind({});
+const Default: CheckboxWithLabelStory = Template.bind({});
+const WithLabelComponent: CheckboxWithLabelStory = Template.bind({});
+const WithErrors: CheckboxWithLabelStory = Template.bind({});
 Default.args = {
     isChecked: true,
     label: 'Plain text label',
@@ -44,7 +48,6 @@ WithLabelComponent.args = {
 
 WithErrors.args = {
     isChecked: false,
-    hasError: true,
     errorText: 'Please accept Terms before continuing.',
     onInputChange: () => {},
     label: 'I accept the Terms & Conditions',

src/stories/MenuItem.stories.js → src/stories/MenuItem.stories.tsx

@@ -1,34 +1,38 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import Chase from '@assets/images/bankicons/chase.svg';
 import MenuItem from '@components/MenuItem';
+import type {MenuItemProps} from '@components/MenuItem';
 import variables from '@styles/variables';
 
+type MenuItemStory = ComponentStory<typeof MenuItem>;
+
 /**
  * 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 MenuItem> = {
     title: 'Components/MenuItem',
     component: MenuItem,
 };
 
-function Template(args) {
+function Template(props: MenuItemProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <MenuItem {...args} />;
+    return <MenuItem {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: MenuItemStory = Template.bind({});
 Default.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
     iconHeight: variables.iconSizeExtraLarge,
     iconWidth: variables.iconSizeExtraLarge,
 };
 
-const Description = Template.bind({});
+const Description: MenuItemStory = Template.bind({});
 Description.args = {
     title: 'Alberta Bobbeth Charleson',
     description: 'Account ending in 1111',
@@ -37,7 +41,7 @@ Description.args = {
     iconWidth: variables.iconSizeExtraLarge,
 };
 
-const RightIcon = Template.bind({});
+const RightIcon: MenuItemStory = Template.bind({});
 RightIcon.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -46,7 +50,7 @@ RightIcon.args = {
     shouldShowRightIcon: true,
 };
 
-const RightIconAndDescription = Template.bind({});
+const RightIconAndDescription: MenuItemStory = Template.bind({});
 RightIconAndDescription.args = {
     title: 'Alberta Bobbeth Charleson',
     description: 'Account ending in 1111',
@@ -56,7 +60,7 @@ RightIconAndDescription.args = {
     shouldShowRightIcon: true,
 };
 
-const RightIconAndDescriptionWithLabel = Template.bind({});
+const RightIconAndDescriptionWithLabel: MenuItemStory = Template.bind({});
 RightIconAndDescriptionWithLabel.args = {
     label: 'Account number',
     title: 'Alberta Bobbeth Charleson',
@@ -67,7 +71,7 @@ RightIconAndDescriptionWithLabel.args = {
     shouldShowRightIcon: true,
 };
 
-const Selected = Template.bind({});
+const Selected: MenuItemStory = Template.bind({});
 Selected.args = {
     title: 'Alberta Bobbeth Charleson',
     description: 'Account ending in 1111',
@@ -78,7 +82,7 @@ Selected.args = {
     isSelected: true,
 };
 
-const BadgeText = Template.bind({});
+const BadgeText: MenuItemStory = Template.bind({});
 BadgeText.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -88,7 +92,7 @@ BadgeText.args = {
     badgeText: '$0.00',
 };
 
-const Focused = Template.bind({});
+const Focused: MenuItemStory = Template.bind({});
 Focused.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -98,7 +102,7 @@ Focused.args = {
     focused: true,
 };
 
-const Disabled = Template.bind({});
+const Disabled: MenuItemStory = Template.bind({});
 Disabled.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -108,17 +112,17 @@ Disabled.args = {
     disabled: true,
 };
 
-const BrickRoadIndicatorSuccess = Template.bind({});
-BrickRoadIndicatorSuccess.args = {
+const BrickRoadIndicatorInfo: MenuItemStory = Template.bind({});
+BrickRoadIndicatorInfo.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
     iconHeight: variables.iconSizeExtraLarge,
     iconWidth: variables.iconSizeExtraLarge,
     shouldShowRightIcon: true,
-    brickRoadIndicator: 'success',
+    brickRoadIndicator: 'info',
 };
 
-const BrickRoadIndicatorFailure = Template.bind({});
+const BrickRoadIndicatorFailure: MenuItemStory = Template.bind({});
 BrickRoadIndicatorFailure.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -128,7 +132,7 @@ BrickRoadIndicatorFailure.args = {
     brickRoadIndicator: 'error',
 };
 
-const ErrorMessage = Template.bind({});
+const ErrorMessage: MenuItemStory = Template.bind({});
 ErrorMessage.args = {
     title: 'Alberta Bobbeth Charleson',
     icon: Chase,
@@ -149,7 +153,7 @@ export {
     BadgeText,
     Focused,
     Disabled,
-    BrickRoadIndicatorSuccess,
+    BrickRoadIndicatorInfo,
     BrickRoadIndicatorFailure,
     RightIconAndDescriptionWithLabel,
     ErrorMessage,

src/stories/OptionRow.stories.js → src/stories/OptionRow.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OnyxProvider from '@components/OnyxProvider';
 import OptionRow from '@components/OptionRow';
+import type {OptionRowProps} from '@components/OptionRow';
 
 /* eslint-disable react/jsx-props-no-spreading */
 
@@ -42,10 +43,10 @@ export default {
     },
 };
 
-function Template(args) {
+function Template(props: OptionRowProps) {
     return (
         <OnyxProvider>
-            <OptionRow {...args} />
+            <OptionRow {...props} />
         </OnyxProvider>
     );
 }

src/stories/PopoverMenu.stories.js → src/stories/PopoverMenu.stories.tsx

@@ -1,36 +1,40 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import PopoverMenu from '@components/PopoverMenu';
+import type {PopoverMenuProps} from '@components/PopoverMenu';
 // eslint-disable-next-line no-restricted-imports
 import themeColors from '@styles/theme/themes/dark';
 
+type PopoverMenuStory = ComponentStory<typeof PopoverMenu>;
+
 /**
  * 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 PopoverMenu> = {
     title: 'Components/PopoverMenu',
     component: PopoverMenu,
 };
 
-function Template(args) {
+function Template(props: PopoverMenuProps) {
     const [isVisible, setIsVisible] = React.useState(false);
     const toggleVisibility = () => setIsVisible(!isVisible);
     return (
         <>
             <MenuItem
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...args.menuItem}
+                title="Add payment Methods"
+                icon={Expensicons.Plus}
                 onPress={toggleVisibility}
                 wrapperStyle={isVisible ? [{backgroundColor: themeColors.border}] : []}
             />
             <SafeAreaProvider>
                 <PopoverMenu
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...args.popoverMenu}
+                    {...props}
                     isVisible={isVisible}
                     onClose={toggleVisibility}
                     onItemSelected={toggleVisibility}
@@ -54,17 +58,11 @@ function Template(args) {
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: PopoverMenuStory = Template.bind({});
 Default.args = {
-    popoverMenu: {
-        anchorPosition: {
-            top: 80,
-            left: 20,
-        },
-    },
-    menuItem: {
-        title: 'Add payment Methods',
-        icon: Expensicons.Plus,
+    anchorPosition: {
+        vertical: 80,
+        horizontal: 20,
     },
 };
 

src/stories/SubscriptAvatar.stories.js → src/stories/SubscriptAvatar.stories.tsx

@@ -1,9 +1,13 @@
+import type {ComponentStory} from '@storybook/react';
 import React from 'react';
 import * as defaultAvatars from '@components/Icon/DefaultAvatars';
 import * as Expensicons from '@components/Icon/Expensicons';
 import SubscriptAvatar from '@components/SubscriptAvatar';
+import type {SubscriptAvatarProps} from '@components/SubscriptAvatar';
 import CONST from '@src/CONST';
 
+type SubscriptAvatarStory = ComponentStory<typeof SubscriptAvatar>;
+
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
@@ -23,27 +27,27 @@ export default {
     },
 };
 
-function Template(args) {
+function Template(props: SubscriptAvatarProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <SubscriptAvatar {...args} />;
+    return <SubscriptAvatar {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: SubscriptAvatarStory = Template.bind({});
 
-const AvatarURLStory = Template.bind({});
+const AvatarURLStory: SubscriptAvatarStory = Template.bind({});
 AvatarURLStory.args = {
     mainAvatar: {source: defaultAvatars.Avatar1, name: '', type: CONST.ICON_TYPE_AVATAR},
     secondaryAvatar: {source: defaultAvatars.Avatar3, name: '', type: CONST.ICON_TYPE_AVATAR},
 };
 
-const SubscriptIcon = Template.bind({});
+const SubscriptIcon: SubscriptAvatarStory = Template.bind({});
 SubscriptIcon.args = {
     subscriptIcon: {source: Expensicons.DownArrow, width: 8, height: 8},
 };
 
-const WorkspaceSubscriptIcon = Template.bind({});
+const WorkspaceSubscriptIcon: SubscriptAvatarStory = Template.bind({});
 WorkspaceSubscriptIcon.args = {
     mainAvatar: {source: defaultAvatars.Avatar1, name: '', type: CONST.ICON_TYPE_WORKSPACE},
     subscriptIcon: {source: Expensicons.DownArrow, width: 8, height: 8},