b+c components - api docs

src/components/badge/badge.api.json

@@ -0,0 +1,43 @@
+{
+  "name": "Badge",
+  "category": "basic",
+  "description": "Round colored badge, typically used to show a number",
+  "extends": ["TouchableOpacity", "View"],
+  "extendsLink": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
+    "https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"
+  ],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx",
+  "images": ["https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png"],
+  "props": [
+    {"name": "size", "type": "number", "description": "Badge's size"},
+    {
+      "name": "label",
+      "type": "string",
+      "description": "Text to show inside the badge",
+      "note": "Passing a label (undefined) will present a pimple badge"
+    },
+    {"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the badge label"},
+    {"name": "onPress", "type": "(props: any) => void", "description": "Called when the badge is pressed"},
+    {
+      "name": "hitSlop",
+      "type": "ViewProps['hitSlop']",
+      "description": "Defines how far a touch event can start away from the badge"
+    },
+    {"name": "backgroundColor", "type": "string", "description": "Background color"},
+    {"name": "borderWidth", "type": "number", "description": "Width of border around the badge"},
+    {"name": "borderRadius", "type": "number", "description": "Radius of border around the badge"},
+    {"name": "borderColor", "type": "ImageStyle['borderColor']", "description": "Color of border around the badge"},
+    {
+      "name": "labelFormatterLimit",
+      "type": "LabelFormatterValues",
+      "description": "Receives a number from 1 to 4, representing the label's max digit length",
+      "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+'"
+    },
+    {"name": "icon", "type": "ImageSourcePropType", "description": "Renders an icon badge"},
+    {"name": "iconStyle", "type": "ImageStyle", "description": "Additional styling to badge icon"},
+    {"name": "iconProps", "type": "ImageProps", "description": "Additional props passed to icon"},
+    {"name": "customElement", "type": "JSX.Element", "description": "Custom element to render instead of an icon"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"}
+  ]
+}

src/components/button/api.json → src/components/button/button.api.json

@@ -3,6 +3,7 @@
   "category": "basic",
   "description": "Customizable button component that handles press events",
   "extends": ["TouchableOpacity"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
   "modifiers": ["margin", "background"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",
   "images": [

src/components/card/api.json → src/components/card/card.api.json

@@ -3,6 +3,7 @@
   "category": "basic",
   "description": "Customizable card component that handles press events",
   "extends": ["TouchableOpacity"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
   "modifiers": ["margin", "padding"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
   "images": [
@@ -20,7 +21,12 @@
       "description": "Card border radius (will be passed to inner Card.Image component)"
     },
     {"name": "onPress", "type": "function", "description": "Callback function for card press event"},
-    {"name": "enableShadow", "type": "boolean", "description": "Whether the card should have shadow or not"},
+    {
+      "name": "enableShadow",
+      "type": "boolean",
+      "description": "Whether the card should have shadow or not",
+      "default": "true"
+    },
     {"name": "elevation", "type": "number", "description": "Elevation value (Android only)"},
     {"name": "enableBlur", "type": "boolean", "description": "Enable blur effect (iOS only)"},
     {

src/components/card/cardImage.api.json

@@ -0,0 +1,17 @@
+{
+  "name": "Card.Image",
+  "category": "basic",
+  "description": "Inner component for the Card component (better be a direct child)",
+  "extends": ["Image"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/image/index.tsx"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
+  "props": [
+    {"name": "width", "type": "number", "description": "Width"},
+    {"name": "height", "type": "number", "description": "Height"},
+    {
+      "name": "position",
+      "type": "string[]",
+      "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"
+    }
+  ]
+}

src/components/card/cardSection.api.json

@@ -0,0 +1,34 @@
+{
+  "name": "Card.Section",
+  "category": "basic",
+  "description": "Inner component for rendering content easily inside a Card component",
+  "extends": ["View"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
+  "props": [
+    {
+      "name": "content",
+      "type": "ContentType[]",
+      "description": "Text content. Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}"
+    },
+    {"name": "contentStyle", "type": "ViewStyle", "description": "Component's container style"},
+    {"name": "backgroundColor", "type": "string", "description": "Background color"},
+    {
+      "name": "leadingIcon",
+      "type": "ImageProps",
+      "description": "Image props for a leading icon to render before the text"
+    },
+    {
+      "name": "trailingIcon",
+      "type": "ImageProps",
+      "description": "Image props for a trailing icon to render after the text"
+    },
+    {
+      "name": "imageSource",
+      "type": "ImageSourcePropType",
+      "description": "Will be used for the background when provided"
+    },
+    {"name": "imageStyle", "type": "ImageStyle", "description": "The style for the background image"},
+    {"name": "imageProps", "type": "ImageProps", "description": "Other image props that will be passed to the image"}
+  ]
+}

src/components/carousel/api.json → src/components/carousel/carousel.api.json

@@ -11,7 +11,7 @@
     "https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif"
   ],
   "props": [
-    {"name": "initialPage", "type": "number", "description": "The initial page to start at"},
+    {"name": "initialPage", "type": "number", "description": "The initial page to start at", "default": "0"},
     {
       "name": "pageWidth",
       "type": "number",
@@ -32,7 +32,8 @@
     {
       "name": "horizontal",
       "type": "boolean",
-      "description": "Whether pages will be rendered horizontally or vertically"
+      "description": "Whether pages will be rendered horizontally or vertically",
+      "default": "true"
     },
     {
       "name": "loop",
@@ -70,14 +71,21 @@
     {
       "name": "pagingEnabled",
       "type": "boolean",
-      "description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)"
+      "description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)",
+      "default": "true"
     },
     {"name": "allowAccessibleLayout", "type": "boolean", "description": "Whether to layout Carousel for accessibility"},
-    {"name": "autoplay", "type": "boolean", "description": "Enable to switch automatically between the pages"},
+    {
+      "name": "autoplay",
+      "type": "boolean",
+      "description": "Enable to switch automatically between the pages",
+      "default": "false"
+    },
     {
       "name": "autoplayInterval",
       "type": "number",
-      "description": "Time is ms to wait before switching to the next page (requires autoplay to be enabled)"
+      "description": "Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled)",
+      "default": "4000"
     },
     {
       "name": "animatedScrollOffset",

src/components/checkbox/api.json → src/components/checkbox/checkbox.api.json

@@ -3,6 +3,7 @@
   "category": "form",
   "description": "Checkbox component for toggling boolean value related to some context",
   "extends": ["TouchableOpacity"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx"],
   "modifiers": ["margin", "background"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
   "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"],

src/components/chip/chip.api.json

@@ -0,0 +1,55 @@
+{
+  "name": "Chip",
+  "category": "basic",
+  "description": "Chip component",
+  "extends": ["TouchableOpacity", "View"],
+  "extendsLink": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
+    "https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"
+  ],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipScreen.tsx",
+  "images": ["https://user-images.githubusercontent.com/1780255/119636022-e9743180-be1c-11eb-8f02-22eeab6558cd.png"],
+  "props": [
+    {
+      "name": "size",
+      "type": "number | {width: number, height: number}",
+      "description": "Chip's size. Number or a width and height object"
+    },
+    {"name": "onPress", "type": "(props: any) => void", "description": "On Chip press callback"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
+    {"name": "backgroundColor", "type": "string", "description": "Background color"},
+    {"name": "borderRadius", "type": "number", "description": "Border radius"},
+    {
+      "name": "useSizeAsMinimum",
+      "type": "boolean",
+      "description": "Uses size as minWidth and minHeight",
+      "default": "true"
+    },
+    {
+      "name": "resetSpacings",
+      "type": "boolean",
+      "description": "Disables all internal elements default spacings. Helps reach a custom design"
+    },
+    {"name": "label", "type": "string", "description": "Main Chip text"},
+    {"name": "labelStyle", "type": "TextStyle", "description": "Label's style"},
+    {"name": "badgeProps", "type": "BadgeProps", "description": "Badge props object"},
+    {"name": "useCounter", "type": "boolean", "description": "Display badge as counter (no background)"},
+    {"name": "avatarProps", "type": "AvatarProps", "description": "Avatar props object"},
+    {"name": "iconProps", "type": "Omit<ImageProps, 'source'>", "description": "Additional icon props"},
+    {"name": "iconStyle", "type": "ImageStyle", "description": "Icon style"},
+    {"name": "iconSource", "type": "ImageSourcePropType", "description": "Left icon's source"},
+    {"name": "rightIconSource", "type": "ImageSourcePropType", "description": "Right icon's source"},
+    {"name": "leftElement", "type": "JSX.Element", "description": "Left custom element"},
+    {"name": "rightElement", "type": "JSX.Element", "description": "Right custom element"},
+    {
+      "name": "onDismiss",
+      "type": "(props: any) => void",
+      "description": "Adds a dismiss button and serves as its callback"
+    },
+    {"name": "dismissColor", "type": "string", "description": "Dismiss color"},
+    {"name": "dismissIcon", "type": "ImageSourcePropType", "description": "Dismiss asset"},
+    {"name": "dismissIconStyle", "type": "ImageStyle", "description": "Dismiss style"},
+    {"name": "dismissContainerStyle", "type": "ImageStyle", "description": "Dismiss container style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/chipsInput/chipsInput.api.json

@@ -0,0 +1,77 @@
+{
+  "name": "ChipsInput",
+  "category": "form",
+  "description": "Chips input component",
+  "extends": ["TextField"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/textField/index.tsx"],
+  "modifiers": ["typography"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.js",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ChipsInput/ChipsInput.gif?raw=true"],
+  "props": [
+    {
+      "name": "tags",
+      "type": "ChipType[]",
+      "description": "use chips instead. List of tags. can be string boolean or custom object when implementing getLabel",
+      "deprecated": true
+    },
+    {
+      "name": "chips",
+      "type": "ChipsInputChipProps[]",
+      "description": "List of tags. can be string boolean or custom object when implementing getLabel"
+    },
+    {"name": "defaultChipProps", "type": "ChipsInputChipProps", "description": "Style your chips"},
+    {
+      "name": "getLabel",
+      "type": "(tag: ChipType) => any",
+      "description": "Callback for extracting the label out of the tag item"
+    },
+    {
+      "name": "renderTag",
+      "type": "(tag: ChipType, index: number, shouldMarkTag: boolean, label: string) => React.ReactElement",
+      "description": "use chips instead. Callback for custom rendering tag item",
+      "deprecated": true
+    },
+    {"name": "onChangeTags", "type": "() => void", "description": "Callback for 'onChangeTags' event"},
+    {
+      "name": "onCreateTag",
+      "type": "(value: any) => void",
+      "description": "Use chips instead. callback for creating new tag out of input value (good for composing tag object)",
+      "deprecated": true
+    },
+    {
+      "name": "onTagPress",
+      "type": "(index: number, toRemove?: number) => void",
+      "description": "use chips instead. callback for when pressing a tag in the following format (tagIndex, markedTagIndex) => {...}",
+      "deprecated": true
+    },
+    {
+      "name": "validationErrorMessage",
+      "type": "string",
+      "description": "Validation message error appears when tag isn't validate"
+    },
+    {"name": "disableTagRemoval", "type": "boolean", "description": "If true, tags *removal* UX won't be available"},
+    {
+      "name": "disableTagAdding",
+      "type": "boolean",
+      "description": "If true, tags *adding* UX (i.e. by 'submitting' the input text) won't be available"
+    },
+    {"name": "tagStyle", "type": "ViewStyle", "description": "Custom styling for the tag item"},
+    {"name": "inputStyle", "type": "RNTextInputProps['style']", "description": "Custom styling for the text input"},
+    {"name": "hideUnderline", "type": "boolean", "description": "Should hide input underline"},
+    {"name": "maxLength", "type": "number", "description": "Maximum numbers of chips"},
+    {
+      "name": "scrollViewProps",
+      "type": "ScrollViewProps",
+      "description": "Chips with 'maxHeigh' is inside a ScrollView"
+    },
+    {"name": "maxHeight", "type": "number", "description": "Chips inside a ScrollView"},
+    {
+      "name": "leftElement",
+      "type": "JSX.Element | JSX.Element[]",
+      "description": "Custom element before the chips, for example 'search' icon, 'To:' label etc'"
+    },
+    {"name": "value", "type": "any", "description": "The input's value"},
+    {"name": "selectionColor", "type": "string | number", "description": "The color for the selection state"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"}
+  ]
+}

src/components/colorPicker/ColorPalette.api.json

@@ -0,0 +1,43 @@
+{
+  "name": "ColorPalette",
+  "category": "form",
+  "description": "A component for displaying a color palette",
+  "note": "This is a screen width component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
+  ],
+  "props": [
+    {"name": "colors", "type": "string[]", "description": "Array of colors to render in the palette"},
+    {"name": "value", "type": "string", "description": "The value of the selected swatch"},
+    {
+      "name": "usePagination",
+      "type": "boolean",
+      "description": "Whether to use pagination when number of colors exceeds the number of rows",
+      "default": "true"
+    },
+    {
+      "name": "loop",
+      "type": "boolean",
+      "description": "Whether the colors pagination scrolls in a loop",
+      "default": "true"
+    },
+    {"name": "numberOfRows", "type": "number", "description": "The number of color rows from 2 to 5", "default": "3"},
+    {
+      "name": "animatedIndex",
+      "type": "number",
+      "description": "The index of the item to animate at first render",
+      "note": "Default is last"
+    },
+    {
+      "name": "onValueChange",
+      "type": "(value: string, options: object) => void",
+      "description": "Invoked once when value changes by selecting one of the swatches in the palette"
+    },
+    {"name": "swatchStyle", "type": "ViewStyle", "description": "Style to pass all the ColorSwatches in the palette"},
+    {"name": "containerWidth", "type": "number", "description": "The container margins"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
+    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/colorPicker/colorPicker.api.json

@@ -0,0 +1,37 @@
+{
+  "name": "ColorPicker",
+  "category": "form",
+  "description": "A picker component for color selection",
+  "note": "This is a screen width component",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPicker/ColorPicker.gif?raw=true"
+  ],
+  "props": [
+    {
+      "name": "colors",
+      "type": "string[]",
+      "description": "Array of colors for the picker's color palette (hex values)"
+    },
+    {"name": "value", "type": "string", "description": "The value of the selected swatch"},
+    {
+      "name": "animatedIndex",
+      "type": "number",
+      "description": "The index of the item to animate at first render",
+      "note": "Default is last"
+    },
+    {
+      "name": "onValueChange",
+      "type": "(value: string, options: object) => void",
+      "description": "Callback for the picker's color palette change"
+    },
+    {
+      "name": "accessibilityLabels",
+      "type": "{\n  addButton?: string,\n  dismissButton?: string,\n  doneButton?: string,\n  input?: string}",
+      "description": "Accessibility labels as an object of strings",
+      "default": "{\n  addButton: 'add custom color using hex code',\n  dismissButton: 'dismiss',\n  doneButton: 'done',\n  input: 'custom hex color code'\n}"
+    },
+    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}