Merge pull request #37818 from VickyStash/ts-migration/g13-stories

[TS migration] Migrate 'Checkbox.stories.js', 'FormAlertWithSubmitButton.stories.js', 'Header.stories.js' and 'HeaderWithBackButton.stories.js' stories to TypeScript

src/components/Checkbox.tsx

@@ -127,3 +127,5 @@ function Checkbox(
 Checkbox.displayName = 'Checkbox';
 
 export default forwardRef(Checkbox);
+
+export type {CheckboxProps};

src/components/FormAlertWithSubmitButton.tsx

@@ -120,3 +120,5 @@ function FormAlertWithSubmitButton({
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
 export default FormAlertWithSubmitButton;
+
+export type {FormAlertWithSubmitButtonProps};

src/components/Header.tsx

@@ -55,3 +55,5 @@ function Header({title = '', subtitle = '', textStyles = [], shouldShowEnvironme
 Header.displayName = 'Header';
 
 export default Header;
+
+export type {HeaderProps};

src/stories/Checkbox.stories.js → src/stories/Checkbox.stories.tsx

@@ -1,28 +1,33 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import Checkbox from '@components/Checkbox';
+import type {CheckboxProps} from '@components/Checkbox';
+
+type CheckboxStory = ComponentStory<typeof Checkbox>;
 
 /**
  * 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
  */
-export default {
+const story: ComponentMeta<typeof Checkbox> = {
     title: 'Components/Checkbox',
     component: Checkbox,
 };
 
-function Template(args) {
+function Template(props: CheckboxProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Checkbox {...args} />;
+    return <Checkbox {...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: CheckboxStory = Template.bind({});
 Default.args = {
     onPress: () => {},
     isChecked: true,
     accessibilityLabel: '',
 };
 
+export default story;
 export {Default};

src/stories/FormAlertWithSubmitButton.stories.js → src/stories/FormAlertWithSubmitButton.stories.tsx

@@ -1,33 +1,34 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import type {FormAlertWithSubmitButtonProps} from '@components/FormAlertWithSubmitButton';
+
+type FormAlertWithSubmitButtonStory = ComponentStory<typeof FormAlertWithSubmitButton>;
 
 /**
  * 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 FormAlertWithSubmitButton> = {
     title: 'Components/FormAlertWithSubmitButton',
     component: FormAlertWithSubmitButton,
 };
 
-function Template(args) {
+function Template(props: FormAlertWithSubmitButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <FormAlertWithSubmitButton {...args} />;
+    return <FormAlertWithSubmitButton {...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 HtmlError = Template.bind({});
+const Default: FormAlertWithSubmitButtonStory = Template.bind({});
+const HtmlError: FormAlertWithSubmitButtonStory = Template.bind({});
 
-const defaultArgs = {
+const defaultArgs: FormAlertWithSubmitButtonStory['args'] = {
     isAlertVisible: true,
     onSubmit: () => {},
     buttonText: 'Submit',
-    network: {
-        isOffline: true,
-    },
 };
 
 Default.args = defaultArgs;

src/stories/Header.stories.js → src/stories/Header.stories.tsx

@@ -1,24 +1,28 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
+import type {HeaderProps} from '@components/Header';
 import Header from '@components/Header';
 
+type HeaderStory = ComponentStory<typeof Header>;
+
 /**
  * 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 Header> = {
     title: 'Components/Header',
     component: Header,
 };
 
-function Template(args) {
+function Template(props: HeaderProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Header {...args} />;
+    return <Header {...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: HeaderStory = Template.bind({});
 Default.args = {
     title: 'Chats',
     shouldShowEnvironmentBadge: true,

src/stories/HeaderWithBackButton.stories.js → src/stories/HeaderWithBackButton.stories.tsx

@@ -1,29 +1,33 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/types';
 import withNavigationFallback from '@components/withNavigationFallback';
 
 const HeaderWithBackButtonWithNavigation = withNavigationFallback(HeaderWithBackButton);
 
+type HeaderWithBackButtonStory = ComponentStory<typeof HeaderWithBackButtonWithNavigation>;
+
 /**
  * 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 HeaderWithBackButtonWithNavigation> = {
     title: 'Components/HeaderWithBackButton',
     component: HeaderWithBackButtonWithNavigation,
 };
 
-function Template(args) {
+function Template(props: HeaderWithBackButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <HeaderWithBackButtonWithNavigation {...args} />;
+    return <HeaderWithBackButtonWithNavigation {...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 Attachment = Template.bind({});
-const Profile = Template.bind({});
+const Default: HeaderWithBackButtonStory = Template.bind({});
+const Attachment: HeaderWithBackButtonStory = Template.bind({});
+const Profile: HeaderWithBackButtonStory = Template.bind({});
 Default.args = {
     title: 'Settings',
 };