Skip to content

Commit 2dc77be

Browse files
lidord-wixlidord-wix
authored
Add api files (#1644)
* Add api files * pr fixes
1 parent b673b8d commit 2dc77be

File tree

8 files changed

+245
-0
lines changed

8 files changed

+245
-0
lines changed

‎src/components/gridListItem/gridListItem.api.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "GridListItem",
3+
"category": "layoutsAndTemplates",
4+
"description": "A single grid view/list item component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
6+
"props": [
7+
{"name": "imageProps", "type": "ImageProps", "description": "Image props object for rendering an image item"},
8+
{
9+
"name": "containerProps",
10+
"type": "Omit<TouchableOpacityProps | ViewProps, 'style'>",
11+
"description": "Props to pass on to the touchable container"
12+
},
13+
{
14+
"name": "renderCustomItem",
15+
"type": "() => React.ReactElement",
16+
"description": "Custom GridListItem to be rendered in the GridView",
17+
"required": ""
18+
},
19+
{"name": "itemSize", "type": "number | ImageSize", "description": "The item size"},
20+
{"name": "title", "type": "string | React.ReactElement", "description": "Title content text"},
21+
{"name": "titleTypography", "type": "string", "description": "Title content typography"},
22+
{"name": "titleColor", "type": "string", "description": "Title content color"},
23+
{"name": "titleLines", "type": "number", "description": "Title content number of lines"},
24+
{"name": "subtitle", "type": "string | React.ReactElement", "description": "Subtitle content text"},
25+
{"name": "subtitleTypography", "type": "string", "description": "Subtitle content typography"},
26+
{"name": "subtitleColor", "type": "string", "description": "Subtitle content color"},
27+
{"name": "subtitleLines", "type": "number", "description": "Subtitle content number of lines"},
28+
{"name": "description", "type": "string | React.ReactElement", "description": "Description content text"},
29+
{"name": "descriptionTypography", "type": "string", "description": "Description content typography"},
30+
{"name": "descriptionColor", "type": "string", "description": "Description content color"},
31+
{"name": "descriptionLines", "type": "number", "description": "Description content number of lines"},
32+
{
33+
"name": "overlayText",
34+
"type": "boolean",
35+
"description": "Renders the title, subtitle and description inside the item"
36+
},
37+
{
38+
"name": "overlayTextContainerStyle",
39+
"type": "ViewStyle",
40+
"description": "Custom container styling for inline text"
41+
},
42+
{"name": "alignToStart", "type": "boolean", "description": "Should content be align to start", "default": "center"},
43+
{"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"},
44+
{"name": "onPress", "type": "TouchableOpacityProps['onPress']", "description": "The item's action handler"},
45+
{
46+
"name": "renderOverlay",
47+
"type": "() => React.ReactElement",
48+
"description": "Renders an overlay on top of the image"
49+
},
50+
{"name": "testID", "type": "string", "description": "Test ID for component"}
51+
]
52+
}

‎src/components/gridView/gridView.api.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "GridView",
3+
"category": "layoutsAndTemplates",
4+
"description": "An auto-generated grid view that calculate item size according to given props",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
6+
"props": [
7+
{"name": "items", "type": "GridListItemProps[]", "description": "The list of items based on GridListItem props"},
8+
{
9+
"name": "viewWidth",
10+
"type": "number",
11+
"description": "pass the desired grid view width (will improve loading time)"
12+
},
13+
{"name": "numColumns", "type": "number", "description": "Number of items to show in a row"},
14+
{"name": "itemSpacing", "type": "number", "description": "Spacing between each item"},
15+
{"name": "lastItemLabel", "type": "string | number", "description": "overlay label for the last item"},
16+
{"name": "lastItemOverlayColor", "type": "string", "description": "color of overlay label for the last item"},
17+
{
18+
"name": "keepItemSize",
19+
"type": "boolean",
20+
"description": "whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically."
21+
}
22+
]
23+
}

‎src/components/hint/hint.api.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "Hint",
3+
"category": "overlays",
4+
"description": "Hint component for displaying a tooltip over wrapped component",
5+
"note": "You can either wrap a component or pass a specific targetFrame",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx",
7+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"],
8+
"props": [
9+
{"name": "visible", "type": "boolean", "description": "Control the visibility of the hint"},
10+
{"name": "color", "type": "string", "description": "The hint background color"},
11+
{"name": "message", "type": "string | ReactElement", "description": "The hint message"},
12+
{"name": "messageStyle", "type": "TextStyle", "description": "The hint message custom style"},
13+
{"name": "icon", "type": "ImageSourcePropType", "description": "Icon to show next to the hint's message"},
14+
{"name": "iconStyle", "type": "ImageStyle", "description": "The icon's style"},
15+
{
16+
"name": "position",
17+
"type": "TOP | BOTTOM",
18+
"description": "The hint's position",
19+
"default": "HintPositions.BOTTOM"
20+
},
21+
{
22+
"name": "targetFrame",
23+
"type": "{ x?: number, y?: number, width?: number, height?: number}",
24+
"description": "Provide custom target position instead of wrapping a child"
25+
},
26+
{"name": "useSideTip", "type": "boolean", "description": "Show side tips instead of the middle tip"},
27+
{"name": "borderRadius", "type": "number", "description": "The hint's border radius"},
28+
{"name": "edgeMargins", "type": "number", "description": "Hint margins from screen edges"},
29+
{"name": "offset", "type": "number", "description": "Hint offset from target"},
30+
{"name": "onPress", "type": "() => void", "description": "Callback for Hint press"},
31+
{
32+
"name": "onBackgroundPress",
33+
"type": "(event: GestureResponderEvent) => void",
34+
"description": "Callback for the background press"
35+
},
36+
{
37+
"name": "backdropColor",
38+
"type": "string",
39+
"description": "Color for background overlay (require onBackgroundPress)"
40+
},
41+
{"name": "containerWidth", "type": "number", "description": "The hint container width"},
42+
{
43+
"name": "customContent",
44+
"type": "JSX.Element",
45+
"description": "Custom content element to render inside the hint container"
46+
},
47+
{"name": "removePaddings", "type": "boolean", "description": "Remove all hint's paddings"},
48+
{"name": "enableShadow", "type": "boolean", "description": "Enable shadow (for hint with white background only)"},
49+
{"name": "testID", "type": "string", "description": "The hint's test identifier"},
50+
{"name": "style", "type": "ViewStyle", "description": "Additional styling"}
51+
]
52+
}

‎src/components/icon/icon.api.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "Icon",
3+
"category": "basic",
4+
"description": "Icon component",
5+
"extends": ["Image"],
6+
"extendsLink": ["https://reactnative.dev/docs/image"],
7+
"modifiers": ["margin"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/IconScreen.tsx",
9+
"props": [
10+
{"name": "tintColor", "type": "string", "description": "The icon tint"},
11+
{"name": "size", "type": "number", "description": "The icon size"}
12+
]
13+
}

‎src/components/image/image.api.json

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "Image",
3+
"category": "basic",
4+
"description": "Image wrapper with extra functionality like source transform and assets support",
5+
"extends": ["Image"],
6+
"extendsLink": ["https://reactnative.dev/docs/image"],
7+
"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`)",
8+
"modifiers": ["margin"],
9+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ImageScreen.tsx",
10+
"props": [
11+
{
12+
"name": "sourceTransformer",
13+
"type": "(props: any) => ImageSourcePropType",
14+
"description": "custom source transform handler for manipulating the image source (great for size control)"
15+
},
16+
{"name": "assetName", "type": "string", "description": "if provided image source will be driven from asset name"},
17+
{"name": "assetGroup", "type": "string", "description": "the asset group, default is icons"},
18+
{"name": "tintColor", "type": "string", "description": "the asset tint"},
19+
{
20+
"name": "supportRTL",
21+
"type": "boolean",
22+
"description": "whether the image should flip horizontally on RTL locals"
23+
},
24+
{
25+
"name": "cover",
26+
"type": "boolean",
27+
"description": "Show image as a cover, full width, image (according to aspect ratio, default: 16:8)"
28+
},
29+
{"name": "aspectRatio", "type": "number", "description": "The aspect ratio for the image"},
30+
{
31+
"name": "overlayType",
32+
"type": "VERTICAL | TOP | BOTTOM | SOLID",
33+
"description": "The type of overlay to place on top of the image.",
34+
"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"
35+
},
36+
{
37+
"name": "overlayIntensity",
38+
"type": "LOW | MEDIUM | HIGH",
39+
"description": "OverlayIntensityType",
40+
"default": "Image.overlayIntensityType.LOW"
41+
},
42+
{"name": "overlayColor", "type": "string", "description": "Pass a custom color for the overlay"},
43+
{"name": "customOverlayContent", "type": "JSX.Element", "description": "Render an overlay with custom content"},
44+
{"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"}
45+
]
46+
}

‎src/components/listItem/listItem.api.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "ListItem",
3+
"category": "lists",
4+
"description": "List item component to render inside a List component",
5+
"extends": ["TouchableOpacity"],
6+
"extendsLink": ["https://reactnative.dev/docs/touchableopacity"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx",
8+
"images": ["https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif"],
9+
"props": [
10+
{"name": "height", "type": "ViewStyle['height']", "description": "the list item height"},
11+
{"name": "onPress", "type": "() => void", "description": "action for when pressing the item"},
12+
{"name": "onLongPress", "type": "() => void", "description": "action for when long pressing the item"},
13+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"},
14+
{
15+
"name": "containerElement",
16+
"type": "React.ComponentType<ListItemProps | TouchableOpacityProps>",
17+
"description": "The container element to wrap the ListItem"
18+
},
19+
{"name": "style", "type": "ViewStyle", "description": "The inner element style"},
20+
{"name": "underlayColor", "type": "string", "description": "The inner element pressed backgroundColor"},
21+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
22+
]
23+
}

‎src/components/listItem/listItemPart.api.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "ListItem.Part",
3+
"category": "lists",
4+
"description": "A sub ListItem component for layout-ing inside a ListItem",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx",
6+
"images": ["https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif"],
7+
"props": [
8+
{"name": "left", "type": "boolean", "description": "this part content will be aligned to left"},
9+
{"name": "middle", "type": "boolean", "description": "this part content will be aligned to spreaded"},
10+
{"name": "right", "type": "boolean", "description": "this part content will be aligned to right"},
11+
{"name": "row", "type": "boolean", "description": "this part content direction will be row", "default": "true"},
12+
{"name": "column", "type": "boolean", "description": "this part content direction will be column"},
13+
{"name": "containerStyle", "type": "ViewStyle", "description": "container style"}
14+
]
15+
}

‎src/components/loaderScreen/loaderScreen.api.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "LoaderScreen",
3+
"category": "layoutsAndTemplates",
4+
"description": "Component that shows a full screen with an activity indicator",
5+
"extends": ["ActivityIndicator"],
6+
"extendsLink": ["https://reactnative.dev/docs/activityindicator"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.tsx",
8+
"props": [
9+
{"name": "loaderColor", "type": "string", "description": "Color of the loading indicator"},
10+
{"name": "customLoader", "type": "React.ReactChild", "description": "Custom loader"},
11+
{
12+
"name": "backgroundColor",
13+
"type": "string",
14+
"description": "Color of the loader background (only when passing 'overlay')"
15+
},
16+
{"name": "message", "type": "string", "description": "loader message"},
17+
{"name": "messageStyle", "type": "TextStyle", "description": "message style"},
18+
{"name": "overlay", "type": "boolean", "description": "Show the screen as an absolute overlay"},
19+
{"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"}
20+
]
21+
}

0 commit comments

Comments
 (0)