Merge pull request Expensify#37753 from VickyStash/ts-migration/g12-s…

…tories [TS migration] Migrate 'Tooltip.stories.js', 'TextInput.stories.js', 'Picker.stories.js', 'MagicCodeInput.stories.js' and 'InlineSystemMessage.stories.js' stories
kmbcook · Mar 8, 2024 · 63dee4e · 63dee4e
2 parents 2cf6077 + 422db60
commit 63dee4e
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 60 deletions.
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
@@ -33,3 +33,5 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
 InlineSystemMessage.displayName = 'InlineSystemMessage';
 
 export default InlineSystemMessage;
+
+export type {InlineSystemMessageProps};
diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx
@@ -430,4 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
-export type {AutoCompleteVariant, MagicCodeInputHandle};
+export type {AutoCompleteVariant, MagicCodeInputHandle, MagicCodeInputProps};
diff --git a/src/stories/InlineSystemMessage.stories.js → src/stories/InlineSystemMessage.stories.tsx b/src/stories/InlineSystemMessage.stories.js → src/stories/InlineSystemMessage.stories.tsx
@@ -1,24 +1,28 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import InlineSystemMessage from '@components/InlineSystemMessage';
+import type {InlineSystemMessageProps} from '@components/InlineSystemMessage';
+
+type InlineSystemMessageStory = ComponentStory<typeof InlineSystemMessage>;
 
 /**
  * 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 InlineSystemMessage> = {
     title: 'Components/InlineSystemMessage',
     component: InlineSystemMessage,
 };
 
-function Template(args) {
+function Template(props: InlineSystemMessageProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InlineSystemMessage {...args} />;
+    return <InlineSystemMessage {...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: InlineSystemMessageStory = Template.bind({});
 Default.args = {
     message: 'This is an error message',
 };

diff --git a/src/stories/MagicCodeInput.stories.js → src/stories/MagicCodeInput.stories.tsx b/src/stories/MagicCodeInput.stories.js → src/stories/MagicCodeInput.stories.tsx
@@ -1,42 +1,44 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import MagicCodeInput from '@components/MagicCodeInput';
+import type {MagicCodeInputProps} from '@components/MagicCodeInput';
+
+type MagicCodeInputStory = ComponentStory<typeof MagicCodeInput>;
 
 /**
  * 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 MagicCodeInput> = {
     title: 'Components/MagicCodeInput',
     component: MagicCodeInput,
 };
 
-function Template(args) {
+function Template(props: MagicCodeInputProps) {
     const [value, setValue] = useState('');
     return (
         <MagicCodeInput
             value={value}
             onChangeText={setValue}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
         />
     );
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
-const AutoFocus = Template.bind({});
+const AutoFocus: MagicCodeInputStory = Template.bind({});
 AutoFocus.args = {
-    label: 'Auto-focused magic code input',
     name: 'AutoFocus',
     autoFocus: true,
     autoComplete: 'one-time-code',
 };
 
-const SubmitOnComplete = Template.bind({});
+const SubmitOnComplete: MagicCodeInputStory = Template.bind({});
 SubmitOnComplete.args = {
-    label: 'Submits when the magic code input is complete',
     name: 'SubmitOnComplete',
     autoComplete: 'one-time-code',
     shouldSubmitOnComplete: true,

diff --git a/src/stories/Picker.stories.js → src/stories/Picker.stories.tsx b/src/stories/Picker.stories.js → src/stories/Picker.stories.tsx
@@ -1,36 +1,40 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import Picker from '@components/Picker';
+import type {BasePickerProps} from '@components/Picker/types';
+
+type PickerStory = ComponentStory<typeof Picker<string>>;
+
+type TemplateProps = Omit<BasePickerProps<string>, 'onInputChange'>;
 
 /**
  * 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 Picker> = {
     title: 'Components/Picker',
     component: Picker,
 };
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-function Template(args) {
+function Template(props: TemplateProps) {
     const [value, setValue] = useState('');
     return (
         <Picker
             value={value}
             onInputChange={(e) => setValue(e)}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...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: PickerStory = Template.bind({});
 Default.args = {
     label: 'Default picker',
-    name: 'Default',
     hintText: 'Default hint text',
     items: [
         {
@@ -44,10 +48,9 @@ Default.args = {
     ],
 };
 
-const PickerWithValue = Template.bind({});
+const PickerWithValue: PickerStory = Template.bind({});
 PickerWithValue.args = {
     label: 'Picker with defined value',
-    name: 'Picker with defined value',
     value: 'apple',
     hintText: 'Picker with hint text',
     items: [
@@ -62,10 +65,9 @@ PickerWithValue.args = {
     ],
 };
 
-const ErrorStory = Template.bind({});
+const ErrorStory: PickerStory = Template.bind({});
 ErrorStory.args = {
     label: 'Picker with error',
-    name: 'PickerWithError',
     hintText: 'Picker hint text',
     errorText: 'This field has an error.',
     items: [
@@ -80,10 +82,9 @@ ErrorStory.args = {
     ],
 };
 
-const Disabled = Template.bind({});
+const Disabled: PickerStory = Template.bind({});
 Disabled.args = {
     label: 'Picker disabled',
-    name: 'Disabled',
     value: 'orange',
     isDisabled: true,
     hintText: 'Picker hint text',

diff --git a/src/stories/TextInput.stories.js → src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.js → src/stories/TextInput.stories.tsx
@@ -1,87 +1,91 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
 import TextInput from '@components/TextInput';
+import type {BaseTextInputProps} from '@components/TextInput/BaseTextInput/types';
+
+type TextInputStory = ComponentStory<typeof TextInput>;
 
 /**
  * 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 TextInput> = {
     title: 'Components/TextInput',
     component: TextInput,
 };
 
-function Template(args) {
+function Template(props: BaseTextInputProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <TextInput {...args} />;
+    return <TextInput {...props} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
-const AutoFocus = Template.bind({});
+const AutoFocus: TextInputStory = Template.bind({});
 AutoFocus.args = {
     label: 'Auto-focused text input',
     name: 'AutoFocus',
     autoFocus: true,
 };
 
-const DefaultInput = Template.bind({});
+const DefaultInput: TextInputStory = Template.bind({});
 DefaultInput.args = {
     label: 'Default text input',
     name: 'Default',
 };
 
-const DefaultValueInput = Template.bind({});
+const DefaultValueInput: TextInputStory = Template.bind({});
 DefaultValueInput.args = {
     label: 'Default value input',
     name: 'DefaultValue',
     defaultValue: 'My default value',
 };
 
-const ErrorInput = Template.bind({});
+const ErrorInput: TextInputStory = Template.bind({});
 ErrorInput.args = {
     label: 'Error input',
     name: 'InputWithError',
     errorText: "Oops! Looks like there's an error",
 };
 
-const ForceActiveLabel = Template.bind({});
+const ForceActiveLabel: TextInputStory = Template.bind({});
 ForceActiveLabel.args = {
     label: 'Force active label',
     placeholder: 'My placeholder text',
     forceActiveLabel: true,
 };
 
-const PlaceholderInput = Template.bind({});
+const PlaceholderInput: TextInputStory = Template.bind({});
 PlaceholderInput.args = {
     label: 'Placeholder input',
     name: 'Placeholder',
     placeholder: 'My placeholder text',
 };
 
-const PrefixedInput = Template.bind({});
+const PrefixedInput: TextInputStory = Template.bind({});
 PrefixedInput.args = {
     label: 'Prefixed input',
     name: 'Prefixed',
     placeholder: 'My placeholder text',
     prefixCharacter: '@',
 };
 
-const MaxLengthInput = Template.bind({});
+const MaxLengthInput: TextInputStory = Template.bind({});
 MaxLengthInput.args = {
     label: 'MaxLength input',
     name: 'MaxLength',
     placeholder: 'My placeholder text',
     maxLength: 50,
 };
 
-function HintAndErrorInput(args) {
+function HintAndErrorInput(props: BaseTextInputProps) {
     const [error, setError] = useState('');
     return (
         <TextInput
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
             onChangeText={(value) => {
                 if (value && value.toLowerCase() === 'oops!') {
                     setError("Oops! Looks like there's an error");
@@ -101,23 +105,23 @@ HintAndErrorInput.args = {
 };
 
 // To use autoGrow we need to control the TextInput's value
-function AutoGrowSupportInput(args) {
-    const [value, setValue] = useState(args.value || '');
+function AutoGrowSupportInput(props: BaseTextInputProps) {
+    const [value, setValue] = useState(props.value ?? '');
     React.useEffect(() => {
-        setValue(args.value || '');
-    }, [args.value]);
+        setValue(props.value ?? '');
+    }, [props.value]);
 
     return (
         <TextInput
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
             onChangeText={setValue}
             value={value}
         />
     );
 }
 
-const AutoGrowInput = AutoGrowSupportInput.bind({});
+const AutoGrowInput: TextInputStory = AutoGrowSupportInput.bind({});
 AutoGrowInput.args = {
     label: 'Autogrow input',
     name: 'AutoGrow',
@@ -132,7 +136,7 @@ AutoGrowInput.args = {
     value: '',
 };
 
-const AutoGrowHeightInput = AutoGrowSupportInput.bind({});
+const AutoGrowHeightInput: TextInputStory = AutoGrowSupportInput.bind({});
 AutoGrowHeightInput.args = {
     label: 'Autogrowheight input',
     name: 'AutoGrowHeight',

diff --git a/src/stories/Tooltip.stories.js → src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.js → src/stories/Tooltip.stories.tsx
@@ -1,27 +1,29 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import Tooltip from '@components/Tooltip';
+import type {TooltipExtendedProps} from '@components/Tooltip/types';
+
+type TooltipStory = ComponentStory<typeof Tooltip>;
 
 /**
  * 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 Tooltip> = {
     title: 'Components/Tooltip',
     component: Tooltip,
 };
 
-function Template(args) {
+function Template(props: TooltipExtendedProps) {
     return (
-        <div
-            style={{
-                width: 100,
-            }}
-        >
+        <div style={{width: 100}}>
             <Tooltip
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...args}
-                maxWidth={args.maxWidth || undefined}
+                {...props}
+                // Disable nullish coalescing to handle cases when maxWidth is 0
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                maxWidth={props.maxWidth || undefined}
             >
                 <div
                     style={{
@@ -42,7 +44,7 @@ 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: TooltipStory = Template.bind({});
 Default.args = {
     text: 'Tooltip',
     numberOfLines: 1,
@@ -63,12 +65,7 @@ function RenderContent() {
     );
 
     return (
-        <div
-            style={{
-                width: 100,
-            }}
-        >
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <div style={{width: 100}}>
             <Tooltip renderTooltipContent={renderTooltipContent}>
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <div
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,3 +33,5 @@ function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
		InlineSystemMessage.displayName = 'InlineSystemMessage';

		export default InlineSystemMessage;

		export type {InlineSystemMessageProps};