From 6c01da2551e2a53f443f0bad6fafbef1aadbff79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CTamara?= <“tamara@alumni.sabanciuniv.edu”>
Date: Wed, 18 Jan 2023 10:40:07 +0300
Subject: [PATCH 1/3] fix(tab):generic id type added to TabItem

---
 src/tab/Tab.tsx                       | 30 +++++++++++++--------------
 src/tab/header/item/TabHeaderItem.tsx |  2 +-
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx
index 7ced92e6..ad0075b6 100644
--- a/src/tab/Tab.tsx
+++ b/src/tab/Tab.tsx
@@ -6,15 +6,15 @@ import classNames from "classnames";
 import TabHeaderItem from "./header/item/TabHeaderItem";
 import List from "../list/List";
 
-export type TabItem = {
-  id: string;
+export type TabItem<ID = string | number> = {
+  id: ID;
   content: React.ReactNode;
   icon?: React.ReactNode;
   isDisabled?: boolean;
 };
 
-interface UncontrolledTabProps {
-  items: TabItem[];
+interface UncontrolledTabProps<ID> {
+  items: TabItem<ID>[];
   children: React.ReactNode[];
   testid?: string;
   initialActiveTabIndex?: number;
@@ -26,16 +26,16 @@ interface UncontrolledTabProps {
 // and initialActiveTabIndex should be undefined
 type ControlledTabProps =
   | {
-      activeTabIndex: number;
-      onTabChange: (index: number) => void;
-      initialActiveTabIndex?: number;
-    }
+    activeTabIndex: number;
+    onTabChange: (index: number) => void;
+    initialActiveTabIndex?: number;
+  }
   | {
-      activeTabIndex?: number;
-      onTabChange?: (index: number) => void;
-    };
+    activeTabIndex?: number;
+    onTabChange?: (index: number) => void;
+  };
 
-export type TabProps = ControlledTabProps & UncontrolledTabProps;
+export type TabProps = ControlledTabProps & UncontrolledTabProps<string | number>;
 
 function Tab({
   testid,
@@ -70,9 +70,9 @@ function Tab({
       <div className={"tab__body"} data-testid={`${testid}.body`}>
         {
           children[
-            activeTabIndexFromProps === undefined
-              ? activeTabIndex
-              : activeTabIndexFromProps
+          activeTabIndexFromProps === undefined
+            ? activeTabIndex
+            : activeTabIndexFromProps
           ]
         }
       </div>
diff --git a/src/tab/header/item/TabHeaderItem.tsx b/src/tab/header/item/TabHeaderItem.tsx
index 6cdc0e80..4f65ea9d 100644
--- a/src/tab/header/item/TabHeaderItem.tsx
+++ b/src/tab/header/item/TabHeaderItem.tsx
@@ -7,7 +7,7 @@ import {TabItem} from "../../Tab";
 import ListItem from "../../../list/item/ListItem";
 
 type TabHeaderItemProps = {
-  tab: TabItem;
+  tab: TabItem<string | number>;
   onClick: (index: number) => void;
   isActive: boolean;
   index: number;

From 6895e2e7e1060e17711cde5d0fba602c9cc5ddb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CTamara?= <“tamara@alumni.sabanciuniv.edu”>
Date: Thu, 2 Feb 2023 10:55:42 +0300
Subject: [PATCH 2/3] fix(tab-stories): initial state and set state type errors
 fixed

---
 stories/12-Tab.stories.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/stories/12-Tab.stories.tsx b/stories/12-Tab.stories.tsx
index 4c9a7d62..5969e6a9 100644
--- a/stories/12-Tab.stories.tsx
+++ b/stories/12-Tab.stories.tsx
@@ -36,7 +36,7 @@ storiesOf("Tab", module).add("Tab", () => (
 
     <br />
     <br />
-    <StateProvider initialState={0}>
+    <StateProvider initialState={{index: 0}}>
       {(state, setState) => (
         <div>
           <p>
@@ -45,21 +45,21 @@ storiesOf("Tab", module).add("Tab", () => (
 
           <div style={{display: "flex"}}>
             <Button
-              onClick={() => setState(Math.max(0, (state - 1) % 2))}
-              isDisabled={state === 0}>
+              onClick={() => setState({index: Math.max(0, (state.index - 1) % 2)})}
+              isDisabled={state.index === 0}>
               Previous Tab
             </Button>
-            <Button onClick={() => setState((state + 1) % 2)} isDisabled={state === 1}>
+            <Button onClick={() => setState({index: (state.index + 1) % 2})} isDisabled={state.index === 1}>
               Next Tab
             </Button>
           </div>
 
           <Tab
             items={tabItems}
-            activeTabIndex={state}
+            activeTabIndex={state.index}
             onTabChange={(index) => {
               console.log("tab changed to index: ", index);
-              setState(index);
+              setState({index: index});
             }}>
             {[<div key={0}>{"Home tab"}</div>, <div key={1}>{"Following tab"}</div>]}
           </Tab>

From 455944128067f52227c1eed86bea4fc0e1303c11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CTamara?= <“tamara@alumni.sabanciuniv.edu”>
Date: Thu, 2 Feb 2023 11:37:44 +0300
Subject: [PATCH 3/3] fix(tab):geeneric id type modified

---
 src/tab/Tab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tab/Tab.tsx b/src/tab/Tab.tsx
index ad0075b6..c580f926 100644
--- a/src/tab/Tab.tsx
+++ b/src/tab/Tab.tsx
@@ -6,14 +6,14 @@ import classNames from "classnames";
 import TabHeaderItem from "./header/item/TabHeaderItem";
 import List from "../list/List";
 
-export type TabItem<ID = string | number> = {
+export type TabItem<ID extends string | number = string | number> = {
   id: ID;
   content: React.ReactNode;
   icon?: React.ReactNode;
   isDisabled?: boolean;
 };
 
-interface UncontrolledTabProps<ID> {
+interface UncontrolledTabProps<ID extends string | number = string | number> {
   items: TabItem<ID>[];
   children: React.ReactNode[];
   testid?: string;