Infra/add more docs

generatedTypes/index.d.ts

@@ -27,7 +27,7 @@ export {
 export {default as ActionBar, ActionBarProps} from './src/components/actionBar';
 export {default as Avatar, AvatarProps} from './src/components/avatar';
 export {default as Badge, BadgeProps} from './src/components/badge';
-export {default as Card, CardProps, CardSectionProps} from './src/components/card';
+export {default as Card, CardProps, CardSectionProps, CardSelectionOptions} from './src/components/card';
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './src/components/connectionStatusBar';
 export {default as Constants} from './src/helpers/Constants';
 export {default as GradientSlider, GradientSliderProps} from './src/components/slider/GradientSlider';

generatedTypes/src/components/card/index.d.ts

@@ -4,6 +4,14 @@ import { ViewProps } from '../view';
 import { TouchableOpacityProps } from '../touchableOpacity';
 import CardImage from './CardImage';
 import CardSection, { CardSectionProps } from './CardSection';
+export interface CardSelectionOptions {
+    icon?: number;
+    iconColor?: string;
+    color?: string;
+    borderWidth?: number;
+    indicatorSize?: number;
+    hideIndicator?: boolean;
+}
 export { CardSectionProps };
 export declare type CardProps = ViewProps & TouchableOpacityProps & {
     /**
@@ -53,14 +61,7 @@ export declare type CardProps = ViewProps & TouchableOpacityProps & {
     /**
      * Custom options for styling the selection indication
      */
-    selectionOptions?: {
-        icon?: number;
-        iconColor?: string;
-        color?: string;
-        borderWidth?: number;
-        indicatorSize?: number;
-        hideIndicator?: boolean;
-    };
+    selectionOptions?: CardSelectionOptions;
 };
 declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps & {
     /**
@@ -110,14 +111,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * Custom options for styling the selection indication
      */
-    selectionOptions?: {
-        icon?: number | undefined;
-        iconColor?: string | undefined;
-        color?: string | undefined;
-        borderWidth?: number | undefined;
-        indicatorSize?: number | undefined;
-        hideIndicator?: boolean | undefined;
-    } | undefined;
+    selectionOptions?: CardSelectionOptions | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & {

src/components/button/api.json

@@ -1,7 +1,7 @@
 {
   "name": "Button",
   "category": "basic",
-  "description": "Customizable button component than handles press events",
+  "description": "Customizable button component that handles press events",
   "extends": ["TouchableOpacity"],
   "modifiers": ["margin", "background"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",

src/components/card/api.json

@@ -0,0 +1,39 @@
+{
+  "name": "Card",
+  "category": "basic",
+  "description": "Customizable card component that handles press events",
+  "extends": ["TouchableOpacity"],
+  "modifiers": ["margin", "padding"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_01.png?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_02.png?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_03.png?raw=true"
+  ],
+  "props": [
+    {"name": "width", "type": "number | string", "description": "Card custom width"},
+    {"name": "height", "type": "number | string", "description": "Card custom height"},
+    {"name": "row", "type": "boolean", "description": "Should inner card flow direction be horizontal"},
+    {
+      "name": "borderRadius",
+      "type": "number",
+      "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": "elevation", "type": "number", "description": "Elevation value (Android only)"},
+    {"name": "enableBlur", "type": "boolean", "description": "Enable blur effect (iOS only)"},
+    {
+      "name": "blurOptions",
+      "type": "object",
+      "description": "Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the card container"},
+    {"name": "selected", "type": "boolean", "description": "Adds visual indication that the card is selected"},
+    {
+      "name": "selectionOptions",
+      "type": "CardSelectionOptions",
+      "description": "Custom options for styling the selection indication"
+    }
+  ]
+}

src/components/card/index.tsx

@@ -28,6 +28,15 @@ const DEFAULT_SELECTION_PROPS = {
   hideIndicator: false
 };
 
+export interface CardSelectionOptions {
+  icon?: number;
+  iconColor?: string;
+  color?: string;
+  borderWidth?: number;
+  indicatorSize?: number;
+  hideIndicator?: boolean;
+}
+
 export {CardSectionProps};
 export type CardProps = ViewProps &
   TouchableOpacityProps & {
@@ -78,14 +87,7 @@ export type CardProps = ViewProps &
     /**
      * Custom options for styling the selection indication
      */
-    selectionOptions?: {
-      icon?: number;
-      iconColor?: string;
-      color?: string;
-      borderWidth?: number;
-      indicatorSize?: number;
-      hideIndicator?: boolean;
-    };
+    selectionOptions?: CardSelectionOptions;
   };
 
 type PropTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & CardProps;

src/components/carousel/api.json

@@ -0,0 +1,88 @@
+{
+  "name": "Carousel",
+  "category": "basic",
+  "description": "Carousel for scrolling pages",
+  "extends": ["ScrollView"],
+  "extendsLink": ["https://reactnative.dev/docs/scrollview"],
+  "modifiers": [],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx",
+  "images": [
+    "https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif",
+    "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": "pageWidth",
+      "type": "number",
+      "description": "The page width (all pages should have the same width). Does not work if passing 'loop' prop"
+    },
+    {"name": "pageHeight", "type": "number", "description": "The page height (all pages should have the same height)."},
+    {"name": "itemSpacings", "type": "number", "description": "The spacing between the pages"},
+    {
+      "name": "containerMarginHorizontal",
+      "type": "number",
+      "description": "Horizontal margin for the carousel container"
+    },
+    {
+      "name": "containerPaddingVertical",
+      "type": "number",
+      "description": "Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android)."
+    },
+    {
+      "name": "horizontal",
+      "type": "boolean",
+      "description": "Whether pages will be rendered horizontally or vertically"
+    },
+    {
+      "name": "loop",
+      "type": "boolean",
+      "description": "If true, will have infinite scroll (works only for horizontal carousel)"
+    },
+    {
+      "name": "onChangePage",
+      "type": "(pageIndex, oldPageIndex, info) => void",
+      "description": "Callback for page change event"
+    },
+    {
+      "name": "onScroll",
+      "type": "function",
+      "description": "Attach a callback for onScroll event of the internal ScrollView"
+    },
+    {
+      "name": "animated",
+      "type": "boolean",
+      "description": "Should the container be animated (send the animation style via containerStyle)"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "The carousel container style"},
+    {
+      "name": "pageControlPosition",
+      "type": "PageControlPosition",
+      "description": "The position of the PageControl component ['over', 'under'], otherwise it won't display"
+    },
+    {"name": "pageControlProps", "type": "PageControlProps", "description": "PageControl component props"},
+    {
+      "name": "showCounter",
+      "type": "boolean",
+      "description": "Whether to show a page counter (will not work with 'pageWidth' prop)"
+    },
+    {"name": "counterTextStyle", "type": "ViewStyle", "description": "The counter's text style"},
+    {
+      "name": "pagingEnabled",
+      "type": "boolean",
+      "description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)"
+    },
+    {"name": "allowAccessibleLayout", "type": "boolean", "description": "Whether to layout Carousel for accessibility"},
+    {"name": "autoplay", "type": "boolean", "description": "Enable to switch automatically between the pages"},
+    {
+      "name": "autoplayInterval",
+      "type": "number",
+      "description": "Time is ms to wait before switching to the next page (requires autoplay to be enabled)"
+    },
+    {
+      "name": "animatedScrollOffset",
+      "type": "Animated.ValueXY",
+      "description": "Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())"
+    }
+  ]
+}

src/components/checkbox/api.json

@@ -0,0 +1,38 @@
+{
+  "name": "Checkbox",
+  "category": "form",
+  "description": "Checkbox component for toggling boolean value related to some context",
+  "extends": ["TouchableOpacity"],
+  "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"],
+  "props": [
+    {
+      "name": "value",
+      "type": "boolean",
+      "description": "The Checkbox value. If true the switch will be turned on. Default value is false"
+    },
+    {"name": "onValueChange", "type": "(value) => void", "description": "Callback function for value change event"},
+    {"name": "disabled", "type": "boolean", "description": "Whether the checkbox should be disabled"},
+    {"name": "color", "type": "string", "description": "The Checkbox color"},
+    {"name": "outline", "type": "boolean", "description": "Alternative Checkbox outline style"},
+    {"name": "size", "type": "number", "description": "The Checkbox size, affect both width and height"},
+    {"name": "borderRadius", "type": "number", "description": "The Checkbox border radius"},
+    {
+      "name": "selectedIcon",
+      "type": "ImageRequireSource",
+      "description": "The icon asset to use for the selected indication"
+    },
+
+    {"name": "iconColor", "type": "string", "description": "The selected icon color"},
+    {"name": "label", "type": "string", "description": "Add a label to the Checkbox"},
+    {"name": "labelStyle", "type": "TextStyle", "description": "Pass to style the label"},
+    {"name": "labelProps", "type": "TextProps", "description": "Props to pass on to the label component"},
+    {"name": "style", "type": "ViewStyle", "description": "Custom styling for the Checkbox"},
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Custom styling for the checkbox and label container"
+    }
+  ]
+}

src/index.ts

@@ -24,7 +24,7 @@ export {default as ActionBar, ActionBarProps} from './components/actionBar';
 export {default as Avatar, AvatarProps} from './components/avatar';
 export {AvatarHelper} from './helpers';
 export {default as Badge, BadgeProps} from './components/badge';
-export {default as Card, CardProps, CardSectionProps} from './components/card';
+export {default as Card, CardProps, CardSectionProps, CardSelectionOptions} from './components/card';
 export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';
 export {default as Constants} from './helpers/Constants';
 export {default as HapticService, HapticType} from './services/HapticService';