diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx index bef4c21289d5..4cf7aeb4433e 100644 --- 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 index 93febc4fd3c0..deff56a534ee 100644 --- 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 b/src/stories/InlineSystemMessage.stories.tsx similarity index 59% rename from src/stories/InlineSystemMessage.stories.js rename to src/stories/InlineSystemMessage.stories.tsx index b7fe21c8b10e..5c00a41ac479 100644 --- a/src/stories/InlineSystemMessage.stories.js +++ b/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; /** * 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 = { title: 'Components/InlineSystemMessage', component: InlineSystemMessage, }; -function Template(args) { +function Template(props: InlineSystemMessageProps) { // eslint-disable-next-line react/jsx-props-no-spreading - return ; + return ; } // 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 b/src/stories/MagicCodeInput.stories.tsx similarity index 70% rename from src/stories/MagicCodeInput.stories.js rename to src/stories/MagicCodeInput.stories.tsx index 14b234996ce1..bb86c1685593 100644 --- a/src/stories/MagicCodeInput.stories.js +++ b/src/stories/MagicCodeInput.stories.tsx @@ -1,24 +1,28 @@ +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; /** * 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 = { title: 'Components/MagicCodeInput', component: MagicCodeInput, }; -function Template(args) { +function Template(props: MagicCodeInputProps) { const [value, setValue] = useState(''); return ( ); } @@ -26,17 +30,15 @@ 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 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 b/src/stories/Picker.stories.tsx similarity index 77% rename from src/stories/Picker.stories.js rename to src/stories/Picker.stories.tsx index b42cfed8f471..a277db387f79 100644 --- a/src/stories/Picker.stories.js +++ b/src/stories/Picker.stories.tsx @@ -1,25 +1,30 @@ +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>; + +type TemplateProps = Omit, '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 = { 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 ( setValue(e)} // eslint-disable-next-line react/jsx-props-no-spreading - {...args} + {...props} /> ); } @@ -27,10 +32,9 @@ 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: 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 b/src/stories/TextInput.stories.tsx similarity index 72% rename from src/stories/TextInput.stories.js rename to src/stories/TextInput.stories.tsx index dd2fcced68b0..b8e647949c0f 100644 --- a/src/stories/TextInput.stories.js +++ b/src/stories/TextInput.stories.tsx @@ -1,66 +1,70 @@ +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; /** * 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 = { title: 'Components/TextInput', component: TextInput, }; -function Template(args) { +function Template(props: BaseTextInputProps) { // eslint-disable-next-line react/jsx-props-no-spreading - return ; + return ; } // 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', @@ -68,7 +72,7 @@ PrefixedInput.args = { prefixCharacter: '@', }; -const MaxLengthInput = Template.bind({}); +const MaxLengthInput: TextInputStory = Template.bind({}); MaxLengthInput.args = { label: 'MaxLength input', name: 'MaxLength', @@ -76,12 +80,12 @@ MaxLengthInput.args = { maxLength: 50, }; -function HintAndErrorInput(args) { +function HintAndErrorInput(props: BaseTextInputProps) { const [error, setError] = useState(''); return ( { 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 ( ); } -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 b/src/stories/Tooltip.stories.tsx similarity index 76% rename from src/stories/Tooltip.stories.js rename to src/stories/Tooltip.stories.tsx index 900cd6dedd76..c9caf7bc6496 100644 --- a/src/stories/Tooltip.stories.js +++ b/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; /** * 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 = { title: 'Components/Tooltip', component: Tooltip, }; -function Template(args) { +function Template(props: TooltipExtendedProps) { return ( -
+
- {/* eslint-disable-next-line react/jsx-props-no-spreading */} +
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}