Add docs to TabController

src/components/tabController/apis/pageCarousel.api.json

@@ -0,0 +1,9 @@
+{
+  "name": "TabController.PageCarousel",
+  "category": "layoutsAndTemplates",
+  "description": "TabController's PageCarousel component",
+  "note": "You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel",
+  "extends": ["ScrollView"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
+  "images": []
+}

src/components/tabController/apis/tabBar.api.json

@@ -0,0 +1,28 @@
+{
+  "name": "TabController.TabBar",
+  "category": "layoutsAndTemplates",
+  "description": "TabController's TabBar component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
+  "images": [],
+  "props": [
+    {"name": "height", "type": "number", "description": "Tab Bar height", "default": "48"},
+    {"name": "enableShadow", "type": "boolean", "description": "Show Tab Bar bottom shadow"},
+    {"name": "shadowStyle", "type": "ViewStyle", "description": "Custom shadow style"},
+    {"name": "indicatorStyle", "type": "ViewStyle", "description": "Custom style for the selected indicator"},
+    {"name": "labelStyle", "type": "TextStyle", "description": "Custom label style"},
+    {"name": "selectedLabelStyle", "type": "TextStyle", "description": "Custom selected label style"},
+    {"name": "labelColor", "type": "string", "description": "The default label color"},
+    {"name": "selectedLabelColor", "type": "string", "description": "The selected label color"},
+    {"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
+    {"name": "iconColor", "type": "string", "description": "Icon tint color"},
+    {"name": "selectedIconColor", "type": "string", "description": "Icon selected tint color"},
+    {"name": "activeBackgroundColor", "type": "string", "description": "Apply background color on press for tab item"},
+    {"name": "backgroundColor", "type": "string", "description": "The TabBar background Color", "default": "Colors.white"},
+    {"name": "containerWidth", "type": "number", "description": "The TabBar container width"},
+    {"name": "centerSelected", "type": "boolean", "description": "Pass to center selected item"},
+    {"name": "spreadItems", "type": "boolean", "description": "Whether the tabBar should be spread", "default": "true"},
+    {"name": "indicatorInsets", "type": "number", "description": "The indicator insets", "default": "Spacings.s4"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the container"},
+    {"name": "testID", "type": "string", "description": "The component test id"}
+  ]
+}

src/components/tabController/apis/tabBarItem.api.json

@@ -0,0 +1,32 @@
+{
+  "name": "TabController.TabBarItem",
+  "category": "layoutsAndTemplates",
+  "description": "TabController's TabBarItem component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
+  "images": [],
+  "props": [
+    {"name": "label", "type": "string", "description": "Label of the tab"},
+    {"name": "labelStyle;", "type": "TextStyle", "description": "Custom label style"},
+    {"name": "selectedLabelStyle", "type": "TextStyle", "description": "Custom selected label style"},
+    {"name": "labelColor", "type": "string", "description": "The default label color", "default": "Colors.black"},
+    {"name": "selectedLabelColor", "type": "string", "description": "The selected label color", "default": "Colors.primary"},
+    {"name": "icon", "type": "number", "description": "Icon of the tab"},
+    {"name": "iconColor", "type": "string", "description": "Icon tint color"},
+    {"name": "selectedIconColor", "type": "string", "description": "Icon selected tint color"},
+    {"name": "badge", "type": "BadgeProps", "description": "Badge component props to display next the item label"},
+    {"name": "leadingAccessory", "type": "ReactElement", "description": "Pass to render a leading element"},
+    {"name": "trailingAccessory", "type": "ReactElement", "description": "Pass to render a trailing element"},
+    {"name": "width", "type": "number", "description": "A fixed width for the item"},
+    {"name": "ignore", "type": "boolean", "description": "Ignore tab presses"},
+    {"name": "onPress", "type": "(index: number) => void", "description": "Callback for when pressing a tab"},
+    {"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
+    {"name": "activeOpacity", "type": "number", "description": "The active opacity when pressing a tab"},
+    {
+      "name": "activeBackgroundColor",
+      "type": "string",
+      "description": " Apply background color on press for TouchableOpacity"
+    },
+    {"name": "style", "type": "ViewStyle", "description": "Pass custom style"},
+    {"name": "testID", "type": "string", "description": "Used as a testing identifier"}
+  ]
+}

src/components/tabController/apis/tabController.api.json

@@ -0,0 +1,25 @@
+{
+  "name": "TabController",
+  "category": "layoutsAndTemplates",
+  "description": "A performant solution for a tab controller with lazy load mechanism",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
+  "note": "This component is based on react-native-gesture-handler.\nOn Android, when using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC",
+  "images": [],
+  "props": [
+    {"name": "items", "type": "TabControllerItemProps[]", "description": "The list of tab bar items"},
+    {"name": "initialIndex", "type": "number", "description": "Initial selected index", "default": "0"},
+    {"name": "selectedIndex", "type": "number", "description": "The current selected index", "deprecated": true},
+    {
+      "name": "onChangeIndex",
+      "type": "(index: number, prevIndex: number | null) => void",
+      "description": "Callback for when index has change (will not be called on ignored items)"
+    },
+    {
+      "name": "asCarousel",
+      "type": "boolean",
+      "description": "When using TabController.PageCarousel this should be turned on",
+      "default": "false"
+    },
+    {"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
+  ]
+}

src/components/tabController/apis/tabPage.api.json

@@ -0,0 +1,22 @@
+{
+  "name": "TabController.TabPage",
+  "category": "layoutsAndTemplates",
+  "description": "TabController's TabPage component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
+  "images": [],
+  "props": [
+    {"name": "index", "type": "number", "description": "The index of the the TabPage"},
+    {"name": "lazy", "type": "boolean", "description": "Whether this page should be loaded lazily"},
+    {
+      "name": "lazyLoadTime",
+      "type": "number",
+      "description": "How long to wait till lazy load complete (good for showing loader screens)"
+    },
+    {
+      "name": "renderLoading",
+      "type": "() => JSX.Element",
+      "description": "Render a custom loading page when lazy loading"
+    },
+    {"name": "testID", "type": "string", "description": "The component test id"}
+  ]
+}