infra: create api.json files for components missing documentation

src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.api.json

@@ -0,0 +1,40 @@
+{
+  "name": "KeyboardAwareScrollView",
+  "category": "form",
+  "description": "A wrapper component which handles the ScrollView insets properly when the keyboard is shown and hides the content, scrolling content above the keybaord.",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/KeyboardAwareScrollViewScreen.js",
+  "props": [
+    {
+      "name": "getTextInputRefs",
+      "type": "function",
+      "description": "Function that returns an array of TextInput refs"
+    },
+    {
+      "name": "onScroll",
+      "type": "function",
+      "description": "Callback for scroll events"
+    },
+    {
+      "name": "startScrolledToBottom",
+      "type": "boolean",
+      "description": "Whether to start scrolled to bottom"
+    },
+    {
+      "name": "scrollToBottomOnKBShow",
+      "type": "boolean",
+      "description": "Whether to scroll to bottom when keyboard shows"
+    },
+    {
+      "name": "scrollToInputAdditionalOffset",
+      "type": "number",
+      "description": "Additional offset when scrolling to input"
+    }
+  ],
+  "snippet": [
+    "<KeyboardAwareScrollView>",
+    "  <View>",
+    "    <TextField placeholder=\"Input with scrolling\" />",
+    "  </View>",
+    "</KeyboardAwareScrollView>"
+  ]
+}

src/components/modal/modal.api.json

@@ -0,0 +1,54 @@
+{
+  "name": "Modal",
+  "category": "overlays",
+  "description": "Component that present content on top of the invoking screen",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
+  "props": [
+    {
+      "name": "enableModalBlur",
+      "type": "boolean",
+      "description": "Blurs the modal background when transparent (iOS only)"
+    },
+    {
+      "name": "blurView",
+      "type": "JSX.Element",
+      "description": "A custom view to use as a BlueView instead of the default one"
+    },
+    {
+      "name": "onBackgroundPress",
+      "type": "function",
+      "description": "Allow dismissing a modal when clicking on its background"
+    },
+    {
+      "name": "overlayBackgroundColor",
+      "type": "string",
+      "description": "The background color of the overlay"
+    },
+    {
+      "name": "useGestureHandlerRootView",
+      "type": "boolean",
+      "description": "Should add a GestureHandlerRootView"
+    },
+    {
+      "name": "useKeyboardAvoidingView",
+      "type": "boolean",
+      "description": "Should add a KeyboardAvoidingView (iOS only)"
+    },
+    {
+      "name": "keyboardAvoidingViewProps",
+      "type": "object",
+      "description": "Send additional props to the KeyboardAvoidingView (iOS only)"
+    }
+  ],
+  "snippet": [
+    "<Modal",
+    "  visible={visible}",
+    "  onBackgroundPress={() => setVisible(false)}",
+    "  overlayBackgroundColor=\"rgba(0, 0, 0, 0.7)\"",
+    ">",
+    "  <View>",
+    "    <Text>Modal Content</Text>",
+    "  </View>",
+    "</Modal>"
+  ]
+}

src/components/scrollBar/scrollBar.api.json

@@ -0,0 +1,67 @@
+{
+  "name": "ScrollBar",
+  "category": "layouts",
+  "description": "Scrollable container with animated gradient overlay for horizontal scroll",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ScrollBarScreen.js",
+  "props": [
+    {
+      "name": "useList",
+      "type": "boolean",
+      "description": "Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well"
+    },
+    {
+      "name": "containerView",
+      "type": "React.ComponentClass",
+      "description": "The element to use as a container, instead of a View"
+    },
+    {
+      "name": "containerProps",
+      "type": "object",
+      "description": "The props to pass the container"
+    },
+    {
+      "name": "height",
+      "type": "number",
+      "description": "The component's height"
+    },
+    {
+      "name": "gradientHeight",
+      "type": "number",
+      "description": "The gradient's height, defaults to the component's height"
+    },
+    {
+      "name": "gradientWidth",
+      "type": "number",
+      "description": "The gradient's width"
+    },
+    {
+      "name": "gradientMargins",
+      "type": "number",
+      "description": "The gradient's margins for the edge"
+    },
+    {
+      "name": "gradientColor",
+      "type": "string",
+      "description": "The gradient's tint color"
+    },
+    {
+      "name": "gradientImage",
+      "type": "ImageSourcePropType",
+      "description": "The gradient's image, instead of the default image"
+    },
+    {
+      "name": "focusIndex",
+      "type": "number",
+      "description": "The index to currently focus on"
+    }
+  ],
+  "snippet": [
+    "<ScrollBar>",
+    "  {_.times(5, index => (",
+    "    <View key={index} style={{width: 100}}>",
+    "      <Text>Item {index + 1}</Text>",
+    "    </View>",
+    "  ))}",
+    "</ScrollBar>"
+  ]
+}

src/components/sharedTransition/SharedArea.js

@@ -13,7 +13,7 @@ const interpolate = interpolateNode || _interpolate;
 
 // TODO: 2.17 breaks Android (at list the screen, the image is not shown) - move to incubator?
 class SharedArea extends Component {
-  displayName = 'IGNORE';
+  displayName = 'SharedTransition.Area';
   static propTypes = {
     /**
      * render details screen

src/components/sharedTransition/SourceElement.js

@@ -5,7 +5,7 @@ import TouchableOpacity from '../touchableOpacity';
 import ShareTransitionContext from './ShareTransitionContext';
 
 class SourceElement extends Component {
-  displayName = 'IGNORE';
+  displayName = 'SharedTransition.Source';
   static propTypes = {
     /**
      * Data to share between shared element and placeholder

src/components/sharedTransition/TargetElement.js

@@ -4,7 +4,7 @@ import TouchableOpacity from '../touchableOpacity';
 import ShareTransitionContext from './ShareTransitionContext';
 
 class TargetElement extends Component {
-  displayName = 'IGNORE';
+  displayName = 'SharedTransition.Target';
   state = {};
 
   componentDidMount() {

src/components/sharedTransition/area.api.json

@@ -0,0 +1,24 @@
+{
+  "name": "SharedTransition.Area",
+  "category": "interaction",
+  "description": "A component that provides a shared element transition area for source and target elements",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SharedTransitionScreen.js",
+  "props": [
+    {
+      "name": "renderDetails",
+      "type": "elementType",
+      "description": "Render details screen"
+    }
+  ],
+  "snippet": [
+    "<SharedTransition.Area",
+    "  renderDetails={data => (",
+    "    <View>",
+    "      <Text>Details for {data.title}</Text>",
+    "    </View>",
+    "  )}",
+    ">",
+    "  {/* Place SharedTransition.Source components here */}",
+    "</SharedTransition.Area>"
+  ]
+}

src/components/sharedTransition/source.api.json

@@ -0,0 +1,18 @@
+{
+  "name": "SharedTransition.Source",
+  "category": "interaction",
+  "description": "A component that defines the source element for a shared transition",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SharedTransitionScreen.js",
+  "props": [
+    {
+      "name": "data",
+      "type": "object",
+      "description": "Data to share between shared element and placeholder"
+    }
+  ],
+  "snippet": [
+    "<SharedTransition.Source data={item}>",
+    "  <Image source={item.image} />",
+    "</SharedTransition.Source>"
+  ]
+}

src/components/sharedTransition/target.api.json

@@ -0,0 +1,12 @@
+{
+  "name": "SharedTransition.Target",
+  "category": "interaction",
+  "description": "A component that defines the target element for a shared transition",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SharedTransitionScreen.js",
+  "props": [],
+  "snippet": [
+    "<SharedTransition.Target>",
+    "  <Image source={item.image} style={{width: '100%', height: 300}} />",
+    "</SharedTransition.Target>"
+  ]
+}

src/components/textArea/textArea.api.json

@@ -0,0 +1,14 @@
+{
+  "name": "TextArea",
+  "category": "form",
+  "description": "A wrapper for Text Field component to create enclosed text area",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js",
+  "props": [],
+  "snippet": [
+    "<TextArea",
+    "  placeholder=\"Write something here...\"",
+    "  value={text}",
+    "  onChangeText={setText}",
+    "/>"
+  ]
+}

src/incubator/expandableOverlay/expandableOverlay.api.json

@@ -0,0 +1,63 @@
+{
+  "name": "ExpandableOverlay",
+  "category": "incubator",
+  "description": "A component that presents content on top of the invoking screen using an overlay",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx",
+  "props": [
+    {
+      "name": "expandableContent",
+      "type": "React.ReactElement",
+      "description": "The content to render inside the expandable modal/dialog"
+    },
+    {
+      "name": "useDialog",
+      "type": "boolean",
+      "description": "Whether to use a dialog as expandable container (by default the container will be a full screen modal)"
+    },
+    {
+      "name": "modalProps",
+      "type": "ModalProps",
+      "description": "The props to pass to the modal expandable container"
+    },
+    {
+      "name": "showTopBar",
+      "type": "boolean",
+      "description": "Whether to render a modal top bar (relevant only for modal)"
+    },
+    {
+      "name": "topBarProps",
+      "type": "ModalTopBarProps",
+      "description": "The modal top bar props to pass on"
+    },
+    {
+      "name": "renderCustomOverlay",
+      "type": "function",
+      "description": "A custom overlay to render instead of Modal or Dialog components"
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disabled opening expandable overlay"
+    },
+    {
+      "name": "dialogProps",
+      "type": "object",
+      "description": "The props to pass to the dialog expandable container (when useDialog is true)"
+    },
+    {
+      "name": "migrateDialog",
+      "type": "boolean",
+      "description": "Whether to use the new Dialog implementation"
+    }
+  ],
+  "snippet": [
+    "<ExpandableOverlay",
+    "  expandableContent={<View><Text>Expandable Content</Text></View>}",
+    "  useDialog",
+    "  showTopBar",
+    "  topBarProps={{title: 'Title'}}",
+    ">",
+    "  <Text>Press to open overlay</Text>",
+    "</ExpandableOverlay>"
+  ]
+}

src/incubator/panView/panView.api.json

@@ -0,0 +1,56 @@
+{
+  "name": "PanView",
+  "category": "incubator",
+  "description": "A component that detects pan gestures and animates accordingly",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/PanViewScreen.tsx",
+  "props": [
+    {
+      "name": "directions",
+      "type": "PanViewDirections[]",
+      "description": "The directions of the allowed pan (default is all). Types: UP, DOWN, LEFT and RIGHT (using PanView.directions.###)",
+      "default": "DEFAULT_DIRECTIONS"
+    },
+    {
+      "name": "dismissible",
+      "type": "boolean",
+      "description": "Dismiss the view if over the threshold (translation or velocity)"
+    },
+    {
+      "name": "animateToOrigin",
+      "type": "boolean",
+      "description": "Animate to start if not dismissed"
+    },
+    {
+      "name": "onDismiss",
+      "type": "function",
+      "description": "Callback to the dismiss animation end"
+    },
+    {
+      "name": "directionLock",
+      "type": "boolean",
+      "description": "Should the direction of dragging be locked once a drag has started"
+    },
+    {
+      "name": "threshold",
+      "type": "PanViewDismissThreshold",
+      "description": "Object to adjust the dismiss threshold limits (eg {x, y, velocity})"
+    },
+    {
+      "name": "containerStyle",
+      "type": "StyleProp<ViewStyle>",
+      "description": "Add a style to the container"
+    }
+  ],
+  "snippet": [
+    "<PanView",
+    "  directions={[PanView.directions.LEFT, PanView.directions.RIGHT]}",
+    "  dismissible",
+    "  animateToOrigin",
+    "  onDismiss={() => console.log('dismissed')}",
+    ">",
+    "  <View>",
+    "    <Text>Swipe me</Text>",
+    "  </View>",
+    "</PanView>"
+  ]
+}