From dda162b435d167a5ffdfb29838abfba318149913 Mon Sep 17 00:00:00 2001
From: Marcin Swornowski <32240132+Swor71@users.noreply.github.com>
Date: Fri, 26 Jan 2024 15:51:34 +0100
Subject: [PATCH] feat: migrated interactiveStepSubHeader stroy to ts (#12)

---
 src/components/InteractiveStepSubHeader.tsx   |  2 ++
 ...s => InteractiveStepSubHeader.stories.tsx} | 19 ++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 rename src/stories/{InteractiveStepSubHeader.stories.js => InteractiveStepSubHeader.stories.tsx} (68%)

diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx
index bcc30b2af2fe..537d5e6251be 100644
--- a/src/components/InteractiveStepSubHeader.tsx
+++ b/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);
diff --git a/src/stories/InteractiveStepSubHeader.stories.js b/src/stories/InteractiveStepSubHeader.stories.tsx
similarity index 68%
rename from src/stories/InteractiveStepSubHeader.stories.js
rename to src/stories/InteractiveStepSubHeader.stories.tsx
index 64ee76edb5d7..5cb0ae980c6b 100644
--- a/src/stories/InteractiveStepSubHeader.stories.js
+++ b/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,17 +15,18 @@ 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
@@ -31,21 +34,23 @@ function BaseInteractiveStepSubHeader(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: () => {},
 };