Add api files

src/components/gridListItem/gridListItem.api.json

@@ -0,0 +1,52 @@
+{
+  "name": "GridListItem",
+  "category": "layoutsAndTemplates",
+  "description": "A single grid view/list item component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
+  "props": [
+    {"name": "imageProps", "type": "ImageProps", "description": "Image props object for rendering an image item"},
+    {
+      "name": "containerProps",
+      "type": "Omit<TouchableOpacityProps | ViewProps, 'style'>",
+      "description": "Props to pass on to the touchable container"
+    },
+    {
+      "name": "renderCustomItem",
+      "type": "() => React.ReactElement",
+      "description": "Custom GridListItem to be rendered in the GridView",
+      "required": ""
+    },
+    {"name": "itemSize", "type": "number | ImageSize", "description": "The item size"},
+    {"name": "title", "type": "string | React.ReactElement", "description": "Title content text"},
+    {"name": "titleTypography", "type": "string", "description": "Title content typography"},
+    {"name": "titleColor", "type": "string", "description": "Title content color"},
+    {"name": "titleLines", "type": "number", "description": "Title content number of lines"},
+    {"name": "subtitle", "type": "string | React.ReactElement", "description": "Subtitle content text"},
+    {"name": "subtitleTypography", "type": "string", "description": "Subtitle content typography"},
+    {"name": "subtitleColor", "type": "string", "description": "Subtitle content color"},
+    {"name": "subtitleLines", "type": "number", "description": "Subtitle content number of lines"},
+    {"name": "description", "type": "string | React.ReactElement", "description": "Description content text"},
+    {"name": "descriptionTypography", "type": "string", "description": "Description content typography"},
+    {"name": "descriptionColor", "type": "string", "description": "Description content color"},
+    {"name": "descriptionLines", "type": "number", "description": "Description content number of lines"},
+    {
+      "name": "overlayText",
+      "type": "boolean",
+      "description": "Renders the title, subtitle and description inside the item"
+    },
+    {
+      "name": "overlayTextContainerStyle",
+      "type": "ViewStyle",
+      "description": "Custom container styling for inline text"
+    },
+    {"name": "alignToStart", "type": "boolean", "description": "Should content be align to start", "default": "center"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"},
+    {"name": "onPress", "type": "TouchableOpacityProps['onPress']", "description": "The item's action handler"},
+    {
+      "name": "renderOverlay",
+      "type": "() => React.ReactElement",
+      "description": "Renders an overlay on top of the image"
+    },
+    {"name": "testID", "type": "string", "description": "Test ID for component"}
+  ]
+}

src/components/gridView/gridView.api.json

@@ -0,0 +1,23 @@
+{
+  "name": "GridView",
+  "category": "layoutsAndTemplates",
+  "description": "An auto-generated grid view that calculate item size according to given props",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
+  "props": [
+    {"name": "items", "type": "GridListItemProps[]", "description": "The list of items based on GridListItem props"},
+    {
+      "name": "viewWidth",
+      "type": "number",
+      "description": "pass the desired grid view width (will improve loading time)"
+    },
+    {"name": "numColumns", "type": "number", "description": "Number of items to show in a row"},
+    {"name": "itemSpacing", "type": "number", "description": "Spacing between each item"},
+    {"name": "lastItemLabel", "type": "string | number", "description": "overlay label for the last item"},
+    {"name": "lastItemOverlayColor", "type": "string", "description": "color of overlay label for the last item"},
+    {
+      "name": "keepItemSize",
+      "type": "boolean",
+      "description": "whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically."
+    }
+  ]
+}

src/components/hint/hint.api.json

@@ -0,0 +1,52 @@
+{
+  "name": "Hint",
+  "category": "overlays",
+  "description": "Hint component for displaying a tooltip over wrapped component",
+  "note": "You can either wrap a component or pass a specific targetFrame",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"],
+  "props": [
+    {"name": "visible", "type": "boolean", "description": "Control the visibility of the hint"},
+    {"name": "color", "type": "string", "description": "The hint background color"},
+    {"name": "message", "type": "string | ReactElement", "description": "The hint message"},
+    {"name": "messageStyle", "type": "TextStyle", "description": "The hint message custom style"},
+    {"name": "icon", "type": "ImageSourcePropType", "description": "Icon to show next to the hint's message"},
+    {"name": "iconStyle", "type": "ImageStyle", "description": "The icon's style"},
+    {
+      "name": "position",
+      "type": "TOP | BOTTOM",
+      "description": "The hint's position",
+      "default": "HintPositions.BOTTOM"
+    },
+    {
+      "name": "targetFrame",
+      "type": "{ x?: number, y?: number, width?: number, height?: number}",
+      "description": "Provide custom target position instead of wrapping a child"
+    },
+    {"name": "useSideTip", "type": "boolean", "description": "Show side tips instead of the middle tip"},
+    {"name": "borderRadius", "type": "number", "description": "The hint's border radius"},
+    {"name": "edgeMargins", "type": "number", "description": "Hint margins from screen edges"},
+    {"name": "offset", "type": "number", "description": "Hint offset from target"},
+    {"name": "onPress", "type": "() => void", "description": "Callback for Hint press"},
+    {
+      "name": "onBackgroundPress",
+      "type": "(event: GestureResponderEvent) => void",
+      "description": "Callback for the background press"
+    },
+    {
+      "name": "backdropColor",
+      "type": "string",
+      "description": "Color for background overlay (require onBackgroundPress)"
+    },
+    {"name": "containerWidth", "type": "number", "description": "The hint container width"},
+    {
+      "name": "customContent",
+      "type": "JSX.Element",
+      "description": "Custom content element to render inside the hint container"
+    },
+    {"name": "removePaddings", "type": "boolean", "description": "Remove all hint's paddings"},
+    {"name": "enableShadow", "type": "boolean", "description": "Enable shadow (for hint with white background only)"},
+    {"name": "testID", "type": "string", "description": "The hint's test identifier"},
+    {"name": "style", "type": "ViewStyle", "description": "Additional styling"}
+  ]
+}

src/components/icon/icon.api.json

@@ -0,0 +1,13 @@
+{
+  "name": "Icon",
+  "category": "basic",
+  "description": "Icon component",
+  "extends": ["Image"],
+  "extendsLink": ["https://reactnative.dev/docs/image"],
+  "modifiers": ["margin"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/IconScreen.tsx",
+  "props": [
+    {"name": "tintColor", "type": "string", "description": "The icon tint"},
+    {"name": "size", "type": "number", "description": "The icon size"}
+  ]
+}

src/components/image/image.api.json

@@ -0,0 +1,46 @@
+{
+  "name": "Image",
+  "category": "basic",
+  "description": "Image wrapper with extra functionality like source transform and assets support",
+  "extends": ["Image"],
+  "extendsLink": ["https://reactnative.dev/docs/image"],
+  "note": "please note that for SVG support you need to add both `react-native-svg` and `react-native-svg-transformer` and also configure them (see `metro.config.js`)",
+  "modifiers": ["margin"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ImageScreen.tsx",
+  "props": [
+    {
+      "name": "sourceTransformer",
+      "type": "(props: any) => ImageSourcePropType",
+      "description": "custom source transform handler for manipulating the image source (great for size control)"
+    },
+    {"name": "assetName", "type": "string", "description": "if provided image source will be driven from asset name"},
+    {"name": "assetGroup", "type": "string", "description": "the asset group, default is icons"},
+    {"name": "tintColor", "type": "string", "description": "the asset tint"},
+    {
+      "name": "supportRTL",
+      "type": "boolean",
+      "description": "whether the image should flip horizontally on RTL locals"
+    },
+    {
+      "name": "cover",
+      "type": "boolean",
+      "description": "Show image as a cover, full width, image (according to aspect ratio, default: 16:8)"
+    },
+    {"name": "aspectRatio", "type": "number", "description": "The aspect ratio for the image"},
+    {
+      "name": "overlayType",
+      "type": "VERTICAL | TOP | BOTTOM | SOLID",
+      "description": "The type of overlay to place on top of the image.",
+      "note": "the image MUST have proper size, see examples in: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx"
+    },
+    {
+      "name": "overlayIntensity",
+      "type": "LOW | MEDIUM | HIGH",
+      "description": "OverlayIntensityType",
+      "default": "Image.overlayIntensityType.LOW"
+    },
+    {"name": "overlayColor", "type": "string", "description": "Pass a custom color for the overlay"},
+    {"name": "customOverlayContent", "type": "JSX.Element", "description": "Render an overlay with custom content"},
+    {"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"}
+  ]
+}

src/components/listItem/listItem.api.json

@@ -0,0 +1,23 @@
+{
+  "name": "ListItem",
+  "category": "lists",
+  "description": "List item component to render inside a List component",
+  "extends": ["TouchableOpacity"],
+  "extendsLink": ["https://reactnative.dev/docs/touchableopacity"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx",
+  "images": ["https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif"],
+  "props": [
+    {"name": "height", "type": "ViewStyle['height']", "description": "the list item height"},
+    {"name": "onPress", "type": "() => void", "description": "action for when pressing the item"},
+    {"name": "onLongPress", "type": "() => void", "description": "action for when long pressing the item"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"},
+    {
+      "name": "containerElement",
+      "type": "React.ComponentType<ListItemProps | TouchableOpacityProps>",
+      "description": "The container element to wrap the ListItem"
+    },
+    {"name": "style", "type": "ViewStyle", "description": "The inner element style"},
+    {"name": "underlayColor", "type": "string", "description": "The inner element pressed backgroundColor"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/listItem/listItemPart.api.json

@@ -0,0 +1,15 @@
+{
+  "name": "ListItem.Part",
+  "category": "lists",
+  "description": "A sub ListItem component for layout-ing inside a ListItem",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx",
+  "images": ["https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif"],
+  "props": [
+    {"name": "left", "type": "boolean", "description": "this part content will be aligned to left"},
+    {"name": "middle", "type": "boolean", "description": "this part content will be aligned to spreaded"},
+    {"name": "right", "type": "boolean", "description": "this part content will be aligned to right"},
+    {"name": "row", "type": "boolean", "description": "this part content direction will be row", "default": "true"},
+    {"name": "column", "type": "boolean", "description": "this part content direction will be column"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "container style"}
+  ]
+}

src/components/loaderScreen/loaderScreen.api.json

@@ -0,0 +1,21 @@
+{
+  "name": "LoaderScreen",
+  "category": "layoutsAndTemplates",
+  "description": "Component that shows a full screen with an activity indicator",
+  "extends": ["ActivityIndicator"],
+  "extendsLink": ["https://reactnative.dev/docs/activityindicator"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.tsx",
+  "props": [
+    {"name": "loaderColor", "type": "string", "description": "Color of the loading indicator"},
+    {"name": "customLoader", "type": "React.ReactChild", "description": "Custom loader"},
+    {
+      "name": "backgroundColor",
+      "type": "string",
+      "description": "Color of the loader background (only when passing 'overlay')"
+    },
+    {"name": "message", "type": "string", "description": "loader message"},
+    {"name": "messageStyle", "type": "TextStyle", "description": "message style"},
+    {"name": "overlay", "type": "boolean", "description": "Show the screen as an absolute overlay"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"}
+  ]
+}