Skip to content

Commit 3e9dd59

Browse files
Inbal-Tishlidord-wix
Inbal-Tish
and
lidord-wix
authored
b+c components - api docs (#1650)
* Badge * Chip, defaults * ChipsInput * New components and fixes * Update src/components/connectionStatusBar/connectionStatusBar.api.json Co-authored-by: Lidor Dafna <[email protected]> * pr comments * replace notes key with note Co-authored-by: Lidor Dafna <[email protected]>
1 parent ac5dd07 commit 3e9dd59

File tree

13 files changed

+386
-6
lines changed

13 files changed

+386
-6
lines changed

‎src/components/badge/badge.api.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "Badge",
3+
"category": "basic",
4+
"description": "Round colored badge, typically used to show a number",
5+
"extends": ["TouchableOpacity", "View"],
6+
"extendsLink": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
8+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"
9+
],
10+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx",
11+
"images": ["https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png"],
12+
"props": [
13+
{"name": "size", "type": "number", "description": "Badge's size"},
14+
{
15+
"name": "label",
16+
"type": "string",
17+
"description": "Text to show inside the badge",
18+
"note": "Passing a label (undefined) will present a pimple badge"
19+
},
20+
{"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the badge label"},
21+
{"name": "onPress", "type": "(props: any) => void", "description": "Called when the badge is pressed"},
22+
{
23+
"name": "hitSlop",
24+
"type": "ViewProps['hitSlop']",
25+
"description": "Defines how far a touch event can start away from the badge"
26+
},
27+
{"name": "backgroundColor", "type": "string", "description": "Background color"},
28+
{"name": "borderWidth", "type": "number", "description": "Width of border around the badge"},
29+
{"name": "borderRadius", "type": "number", "description": "Radius of border around the badge"},
30+
{"name": "borderColor", "type": "ImageStyle['borderColor']", "description": "Color of border around the badge"},
31+
{
32+
"name": "labelFormatterLimit",
33+
"type": "LabelFormatterValues",
34+
"description": "Receives a number from 1 to 4, representing the label's max digit length",
35+
"note": "Beyond the max number for that digit length, a '+' will show at the end. \nIf set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. \nExample: labelLengthFormatter={2}, label={124}, label will present '99+'"
36+
},
37+
{"name": "icon", "type": "ImageSourcePropType", "description": "Renders an icon badge"},
38+
{"name": "iconStyle", "type": "ImageStyle", "description": "Additional styling to badge icon"},
39+
{"name": "iconProps", "type": "ImageProps", "description": "Additional props passed to icon"},
40+
{"name": "customElement", "type": "JSX.Element", "description": "Custom element to render instead of an icon"},
41+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"}
42+
]
43+
}

‎src/components/button/api.json renamed to ‎src/components/button/button.api.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"category": "basic",
44
"description": "Customizable button component that handles press events",
55
"extends": ["TouchableOpacity"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
67
"modifiers": ["margin", "background"],
78
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",
89
"images": [

‎src/components/card/api.json renamed to ‎src/components/card/card.api.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"category": "basic",
44
"description": "Customizable card component that handles press events",
55
"extends": ["TouchableOpacity"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
67
"modifiers": ["margin", "padding"],
78
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
89
"images": [
@@ -20,7 +21,12 @@
2021
"description": "Card border radius (will be passed to inner Card.Image component)"
2122
},
2223
{"name": "onPress", "type": "function", "description": "Callback function for card press event"},
23-
{"name": "enableShadow", "type": "boolean", "description": "Whether the card should have shadow or not"},
24+
{
25+
"name": "enableShadow",
26+
"type": "boolean",
27+
"description": "Whether the card should have shadow or not",
28+
"default": "true"
29+
},
2430
{"name": "elevation", "type": "number", "description": "Elevation value (Android only)"},
2531
{"name": "enableBlur", "type": "boolean", "description": "Enable blur effect (iOS only)"},
2632
{

‎src/components/card/cardImage.api.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "Card.Image",
3+
"category": "basic",
4+
"description": "Inner component for the Card component (better be a direct child)",
5+
"extends": ["Image"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/image/index.tsx"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
8+
"props": [
9+
{"name": "width", "type": "number", "description": "Width"},
10+
{"name": "height", "type": "number", "description": "Height"},
11+
{
12+
"name": "position",
13+
"type": "string[]",
14+
"description": "The Image position which determines the appropriate flex-ness of the image and border radius (for Android) this prop derived automatically from Card parent component if it rendered as a direct child of the Card component"
15+
}
16+
]
17+
}

‎src/components/card/cardSection.api.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "Card.Section",
3+
"category": "basic",
4+
"description": "Inner component for rendering content easily inside a Card component",
5+
"extends": ["View"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
8+
"props": [
9+
{
10+
"name": "content",
11+
"type": "ContentType[]",
12+
"description": "Text content. Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}"
13+
},
14+
{"name": "contentStyle", "type": "ViewStyle", "description": "Component's container style"},
15+
{"name": "backgroundColor", "type": "string", "description": "Background color"},
16+
{
17+
"name": "leadingIcon",
18+
"type": "ImageProps",
19+
"description": "Image props for a leading icon to render before the text"
20+
},
21+
{
22+
"name": "trailingIcon",
23+
"type": "ImageProps",
24+
"description": "Image props for a trailing icon to render after the text"
25+
},
26+
{
27+
"name": "imageSource",
28+
"type": "ImageSourcePropType",
29+
"description": "Will be used for the background when provided"
30+
},
31+
{"name": "imageStyle", "type": "ImageStyle", "description": "The style for the background image"},
32+
{"name": "imageProps", "type": "ImageProps", "description": "Other image props that will be passed to the image"}
33+
]
34+
}

‎src/components/carousel/api.json renamed to ‎src/components/carousel/carousel.api.json

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif"
1212
],
1313
"props": [
14-
{"name": "initialPage", "type": "number", "description": "The initial page to start at"},
14+
{"name": "initialPage", "type": "number", "description": "The initial page to start at", "default": "0"},
1515
{
1616
"name": "pageWidth",
1717
"type": "number",
@@ -32,7 +32,8 @@
3232
{
3333
"name": "horizontal",
3434
"type": "boolean",
35-
"description": "Whether pages will be rendered horizontally or vertically"
35+
"description": "Whether pages will be rendered horizontally or vertically",
36+
"default": "true"
3637
},
3738
{
3839
"name": "loop",
@@ -70,14 +71,21 @@
7071
{
7172
"name": "pagingEnabled",
7273
"type": "boolean",
73-
"description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)"
74+
"description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)",
75+
"default": "true"
7476
},
7577
{"name": "allowAccessibleLayout", "type": "boolean", "description": "Whether to layout Carousel for accessibility"},
76-
{"name": "autoplay", "type": "boolean", "description": "Enable to switch automatically between the pages"},
78+
{
79+
"name": "autoplay",
80+
"type": "boolean",
81+
"description": "Enable to switch automatically between the pages",
82+
"default": "false"
83+
},
7784
{
7885
"name": "autoplayInterval",
7986
"type": "number",
80-
"description": "Time is ms to wait before switching to the next page (requires autoplay to be enabled)"
87+
"description": "Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled)",
88+
"default": "4000"
8189
},
8290
{
8391
"name": "animatedScrollOffset",

‎src/components/checkbox/api.json renamed to ‎src/components/checkbox/checkbox.api.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"category": "form",
44
"description": "Checkbox component for toggling boolean value related to some context",
55
"extends": ["TouchableOpacity"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
67
"modifiers": ["margin", "background"],
78
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
89
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"],

‎src/components/chip/chip.api.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "Chip",
3+
"category": "basic",
4+
"description": "Chip component",
5+
"extends": ["TouchableOpacity", "View"],
6+
"extendsLink": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
8+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"
9+
],
10+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipScreen.tsx",
11+
"images": ["https://user-images.githubusercontent.com/1780255/119636022-e9743180-be1c-11eb-8f02-22eeab6558cd.png"],
12+
"props": [
13+
{
14+
"name": "size",
15+
"type": "number | {width: number, height: number}",
16+
"description": "Chip's size. Number or a width and height object"
17+
},
18+
{"name": "onPress", "type": "(props: any) => void", "description": "On Chip press callback"},
19+
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
20+
{"name": "backgroundColor", "type": "string", "description": "Background color"},
21+
{"name": "borderRadius", "type": "number", "description": "Border radius"},
22+
{
23+
"name": "useSizeAsMinimum",
24+
"type": "boolean",
25+
"description": "Uses size as minWidth and minHeight",
26+
"default": "true"
27+
},
28+
{
29+
"name": "resetSpacings",
30+
"type": "boolean",
31+
"description": "Disables all internal elements default spacings. Helps reach a custom design"
32+
},
33+
{"name": "label", "type": "string", "description": "Main Chip text"},
34+
{"name": "labelStyle", "type": "TextStyle", "description": "Label's style"},
35+
{"name": "badgeProps", "type": "BadgeProps", "description": "Badge props object"},
36+
{"name": "useCounter", "type": "boolean", "description": "Display badge as counter (no background)"},
37+
{"name": "avatarProps", "type": "AvatarProps", "description": "Avatar props object"},
38+
{"name": "iconProps", "type": "Omit<ImageProps, 'source'>", "description": "Additional icon props"},
39+
{"name": "iconStyle", "type": "ImageStyle", "description": "Icon style"},
40+
{"name": "iconSource", "type": "ImageSourcePropType", "description": "Left icon's source"},
41+
{"name": "rightIconSource", "type": "ImageSourcePropType", "description": "Right icon's source"},
42+
{"name": "leftElement", "type": "JSX.Element", "description": "Left custom element"},
43+
{"name": "rightElement", "type": "JSX.Element", "description": "Right custom element"},
44+
{
45+
"name": "onDismiss",
46+
"type": "(props: any) => void",
47+
"description": "Adds a dismiss button and serves as its callback"
48+
},
49+
{"name": "dismissColor", "type": "string", "description": "Dismiss color"},
50+
{"name": "dismissIcon", "type": "ImageSourcePropType", "description": "Dismiss asset"},
51+
{"name": "dismissIconStyle", "type": "ImageStyle", "description": "Dismiss style"},
52+
{"name": "dismissContainerStyle", "type": "ImageStyle", "description": "Dismiss container style"},
53+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
54+
]
55+
}

‎src/components/chipsInput/chipsInput.api.json

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "ChipsInput",
3+
"category": "form",
4+
"description": "Chips input component",
5+
"extends": ["TextField"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/textField/index.tsx"],
7+
"modifiers": ["typography"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.js",
9+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ChipsInput/ChipsInput.gif?raw=true"],
10+
"props": [
11+
{
12+
"name": "tags",
13+
"type": "ChipType[]",
14+
"description": "use chips instead. List of tags. can be string boolean or custom object when implementing getLabel",
15+
"deprecated": true
16+
},
17+
{
18+
"name": "chips",
19+
"type": "ChipsInputChipProps[]",
20+
"description": "List of tags. can be string boolean or custom object when implementing getLabel"
21+
},
22+
{"name": "defaultChipProps", "type": "ChipsInputChipProps", "description": "Style your chips"},
23+
{
24+
"name": "getLabel",
25+
"type": "(tag: ChipType) => any",
26+
"description": "Callback for extracting the label out of the tag item"
27+
},
28+
{
29+
"name": "renderTag",
30+
"type": "(tag: ChipType, index: number, shouldMarkTag: boolean, label: string) => React.ReactElement",
31+
"description": "use chips instead. Callback for custom rendering tag item",
32+
"deprecated": true
33+
},
34+
{"name": "onChangeTags", "type": "() => void", "description": "Callback for 'onChangeTags' event"},
35+
{
36+
"name": "onCreateTag",
37+
"type": "(value: any) => void",
38+
"description": "Use chips instead. callback for creating new tag out of input value (good for composing tag object)",
39+
"deprecated": true
40+
},
41+
{
42+
"name": "onTagPress",
43+
"type": "(index: number, toRemove?: number) => void",
44+
"description": "use chips instead. callback for when pressing a tag in the following format (tagIndex, markedTagIndex) => {...}",
45+
"deprecated": true
46+
},
47+
{
48+
"name": "validationErrorMessage",
49+
"type": "string",
50+
"description": "Validation message error appears when tag isn't validate"
51+
},
52+
{"name": "disableTagRemoval", "type": "boolean", "description": "If true, tags *removal* UX won't be available"},
53+
{
54+
"name": "disableTagAdding",
55+
"type": "boolean",
56+
"description": "If true, tags *adding* UX (i.e. by 'submitting' the input text) won't be available"
57+
},
58+
{"name": "tagStyle", "type": "ViewStyle", "description": "Custom styling for the tag item"},
59+
{"name": "inputStyle", "type": "RNTextInputProps['style']", "description": "Custom styling for the text input"},
60+
{"name": "hideUnderline", "type": "boolean", "description": "Should hide input underline"},
61+
{"name": "maxLength", "type": "number", "description": "Maximum numbers of chips"},
62+
{
63+
"name": "scrollViewProps",
64+
"type": "ScrollViewProps",
65+
"description": "Chips with 'maxHeigh' is inside a ScrollView"
66+
},
67+
{"name": "maxHeight", "type": "number", "description": "Chips inside a ScrollView"},
68+
{
69+
"name": "leftElement",
70+
"type": "JSX.Element | JSX.Element[]",
71+
"description": "Custom element before the chips, for example 'search' icon, 'To:' label etc'"
72+
},
73+
{"name": "value", "type": "any", "description": "The input's value"},
74+
{"name": "selectionColor", "type": "string | number", "description": "The color for the selection state"},
75+
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"}
76+
]
77+
}

‎src/components/colorPicker/ColorPalette.api.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "ColorPalette",
3+
"category": "form",
4+
"description": "A component for displaying a color palette",
5+
"note": "This is a screen width component",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
7+
"images": [
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
9+
],
10+
"props": [
11+
{"name": "colors", "type": "string[]", "description": "Array of colors to render in the palette"},
12+
{"name": "value", "type": "string", "description": "The value of the selected swatch"},
13+
{
14+
"name": "usePagination",
15+
"type": "boolean",
16+
"description": "Whether to use pagination when number of colors exceeds the number of rows",
17+
"default": "true"
18+
},
19+
{
20+
"name": "loop",
21+
"type": "boolean",
22+
"description": "Whether the colors pagination scrolls in a loop",
23+
"default": "true"
24+
},
25+
{"name": "numberOfRows", "type": "number", "description": "The number of color rows from 2 to 5", "default": "3"},
26+
{
27+
"name": "animatedIndex",
28+
"type": "number",
29+
"description": "The index of the item to animate at first render",
30+
"note": "Default is last"
31+
},
32+
{
33+
"name": "onValueChange",
34+
"type": "(value: string, options: object) => void",
35+
"description": "Invoked once when value changes by selecting one of the swatches in the palette"
36+
},
37+
{"name": "swatchStyle", "type": "ViewStyle", "description": "Style to pass all the ColorSwatches in the palette"},
38+
{"name": "containerWidth", "type": "number", "description": "The container margins"},
39+
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
40+
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
41+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
42+
]
43+
}

‎src/components/colorPicker/colorPicker.api.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "ColorPicker",
3+
"category": "form",
4+
"description": "A picker component for color selection",
5+
"note": "This is a screen width component",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
7+
"images": [
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPicker/ColorPicker.gif?raw=true"
9+
],
10+
"props": [
11+
{
12+
"name": "colors",
13+
"type": "string[]",
14+
"description": "Array of colors for the picker's color palette (hex values)"
15+
},
16+
{"name": "value", "type": "string", "description": "The value of the selected swatch"},
17+
{
18+
"name": "animatedIndex",
19+
"type": "number",
20+
"description": "The index of the item to animate at first render",
21+
"note": "Default is last"
22+
},
23+
{
24+
"name": "onValueChange",
25+
"type": "(value: string, options: object) => void",
26+
"description": "Callback for the picker's color palette change"
27+
},
28+
{
29+
"name": "accessibilityLabels",
30+
"type": "{\n addButton?: string,\n dismissButton?: string,\n doneButton?: string,\n input?: string}",
31+
"description": "Accessibility labels as an object of strings",
32+
"default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
33+
},
34+
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
35+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
36+
]
37+
}

0 commit comments

Comments
 (0)