feat: migrated interactiveStepSubHeader stroy to ts (#12)

src/components/InteractiveStepSubHeader.tsx

@@ -105,4 +105,6 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
 
 InteractiveStepSubHeader.displayName = 'InteractiveStepSubHeader';
 
+export type {InteractiveStepSubHeaderProps, InteractiveStepSubHeaderHandle};
+
 export default forwardRef(InteractiveStepSubHeader);

src/stories/InteractiveStepSubHeader.stories.js → src/stories/InteractiveStepSubHeader.stories.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, {useRef} from 'react';
+import type {ForwardedRef} from 'react';
 import {Button, View} from 'react-native';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
+import type {InteractiveStepSubHeaderHandle, InteractiveStepSubHeaderProps} from '@components/InteractiveStepSubHeader';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -13,39 +15,42 @@ const story = {
     component: InteractiveStepSubHeader,
 };
 
-function Template(args) {
+type StoryType = typeof Template & {args?: Partial<InteractiveStepSubHeaderProps>};
+
+function Template(args: InteractiveStepSubHeaderProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <InteractiveStepSubHeader {...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({});
+function BaseInteractiveStepSubHeader(props: InteractiveStepSubHeaderProps) {
+    const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
 
-function BaseInteractiveStepSubHeader(props) {
-    const ref = useRef(null);
     return (
         <View>
             <InteractiveStepSubHeader
                 {...props}
                 ref={ref}
             />
             <Button
-                onPress={() => ref.current.moveNext()}
+                onPress={() => ref.current?.moveNext()}
                 title="Next"
             />
         </View>
     );
 }
 
+const Default: StoryType = Template.bind({});
 Default.args = {
     stepNames: ['Initial', 'Step 1', 'Step 2', 'Step 3'],
-    startStep: 1,
+    startStepIndex: 1,
     onStepSelected: () => {},
 };
+
 BaseInteractiveStepSubHeader.args = {
     stepNames: ['Initial', 'Step 1', 'Step 2', 'Step 3', 'Confirmation'],
-    startStep: 0,
+    startStepIndex: 0,
     onStepSelected: () => {},
 };