d+e components - api docs

src/components/dateTimePicker/dateTimePicker.api.json

@@ -0,0 +1,65 @@
+{
+  "name": "DateTimePicker",
+  "category": "form",
+  "description": "Date and Time Picker Component that wraps RNDateTimePicker for date and time modes. See: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker",
+  "note": "DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects",
+  "extends": ["TextField"],
+  "extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/textField/index.tsx"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true"
+  ],
+  "props": [
+    {
+      "name": "mode",
+      "type": "DATE | TIME",
+      "description": "The type of picker to display ('date' or 'time')",
+      "default": "MODES.DATE"
+    },
+    {
+      "name": "value",
+      "type": "Date",
+      "description": "The initial value to set the picker to",
+      "note": "Defaults to device's date and time"
+    },
+    {"name": "onChange", "type": "() => Date", "description": "Called when the date/time change"},
+    {"name": "minimumDate", "type": "Date", "description": "The minimum date or time value to use"},
+    {"name": "maximumDate", "type": "Date", "description": "The maximum date or time value to use"},
+    {"name": "dateFormat", "type": "string", "description": "The date format for the text display"},
+    {"name": "dateFormatter", "type": "() => Date", "description": "A callback function to format date"},
+    {"name": "timeFormat", "type": "string", "description": "The time format for the text display"},
+    {"name": "timeFormatter", "type": "() => Date", "description": "A callback function to format time"},
+    {
+      "name": "locale",
+      "type": "string",
+      "description": "Allows changing of the locale of the component",
+      "note": "iOS only"
+    },
+    {
+      "name": "is24Hour",
+      "type": "boolean",
+      "description": "Allows changing of the time picker to a 24 hour format",
+      "note": "Android only"
+    },
+    {
+      "name": "minuteInterval",
+      "type": "number",
+      "description": "The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30",
+      "note": "iOS only"
+    },
+    {
+      "name": "timeZoneOffsetInMinutes",
+      "type": "number",
+      "description": "Allows changing of the timeZone of the date picker. By default it uses the device's time zone",
+      "note": "iOS only"
+    },
+    {"name": "dialogProps", "type": "DialogProps", "description": "Props to pass the Dialog component"},
+    {"name": "headerStyle", "type": "ViewStyle", "description": "Style to apply to the iOS dialog header"},
+    {"name": "renderInput", "type": "JSX.Element", "description": "Render custom input"},
+    {
+      "name": "themeVariant",
+      "type": "LIGHT | DARK",
+      "description": "Override system theme variant (dark or light mode) used by the date picker"
+    }
+  ]
+}

src/components/dialog/dialog.api.json

@@ -0,0 +1,51 @@
+{
+  "name": "Dialog",
+  "category": "overlays",
+  "description": "Component for displaying custom content inside a popup dialog",
+  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
+  "modifiers": ["alignment"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
+  "props": [
+    {"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
+    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
+    {
+      "name": "overlayBackgroundColor",
+      "type": "string",
+      "description": "The color of the overlay background",
+      "default": "Colors.rgba(Colors.grey10, 0.6)"
+    },
+    {"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
+    {"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
+    {
+      "name": "panDirection",
+      "type": "UP | DOWN | LEFT | RIGHT",
+      "description": "The direction of the allowed pan",
+      "default": "PanningProvider.Directions.DOWN"
+    },
+    {"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
+    {
+      "name": "onDialogDismissed",
+      "type": "(props: any) => void",
+      "description": "Called once the dialog has been dismissed completely"
+    },
+    {
+      "name": "renderPannableHeader",
+      "type": "(props: any) => JSX.Element",
+      "description": "For scrollable content (the children of the dialog)",
+      "note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
+    },
+    {
+      "name": "pannableHeaderProps",
+      "type": "any",
+      "description": "The props that will be passed to the pannable header"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "In iOS, use safe area, in case component attached to the bottom"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/drawer/drawer.api.json

@@ -0,0 +1,61 @@
+{
+  "name": "Drawer",
+  "category": "lists",
+  "description": "Drawer Component",
+  "notes": "If your app works with RNN, your screen must be wrapped with gestureHandlerRootHOC from 'react-native-gesture-handler'. see: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"],
+  "props": [
+    {
+      "name": "rightItems",
+      "type": "ItemProps[]",
+      "description": "The bottom layer's items to appear when opened from the right"
+    },
+    {
+      "name": "leftItem",
+      "type": "ItemProps",
+      "description": "The bottom layer's item to appear when opened from the left (a single item)"
+    },
+    {"name": "bounciness", "type": "number", "description": "The drawer animation bounciness"},
+    {"name": "itemsMinWidth", "type": "number", "description": "Set a different minimum width"},
+    {
+      "name": "itemsTintColor",
+      "type": "string",
+      "description": "The color for the text and icon tint of the items",
+      "default": "Colors.white"
+    },
+    {"name": "itemsIconSize", "type": "number", "description": "The items' icon size", "default": "24"},
+    {"name": "itemsTextStyle", "type": "TextStyle", "description": "The items' text style"},
+    {"name": "useNativeAnimations", "type": "boolean", "description": "Perform the animation in natively"},
+    {"name": "fullSwipeLeft", "type": "boolean", "description": "Whether to allow a full left swipe"},
+    {"name": "fullLeftThreshold", "type": "number", "description": "Threshold for a left full swipe (0-1)"},
+    {"name": "onFullSwipeLeft", "type": "() => void", "description": "Callback for left item full swipe"},
+    {"name": "onWillFullSwipeLeft", "type": "() => void", "description": "Callback for just before left item full swipe"},
+    {"name": "onToggleSwipeLeft", "type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}", "description": "Callback for left item toggle swipe"},
+    {
+      "name": "leftToggleHapticTrigger",
+      "type": "() => void",
+      "description": "Haptic trigger callback to use onToggleSwipeLeft",
+      "deprecated": true
+    },
+    {"name": "fullSwipeRight", "type": "boolean", "description": "Whether to allow a full right swipe"},
+    {"name": "fullRightThreshold", "type": "number", "description": "Threshold for a right full swipe (0-1)"},
+    {"name": "onFullSwipeRight", "type": "() => void", "description": "Callback for right item full swipe"},
+    {
+      "name": "onWillFullSwipeRight",
+      "type": "() => void",
+      "description": "Callback for just before right item full swipe"
+    },
+    {"name": "disableHaptic", "type": "boolean", "description": "Whether to disable the haptic"},
+    {"name": "onDragStart", "type": "() => any", "description": "Called when drag gesture starts"},
+    {"name": "onSwipeableWillOpen", "type": "() => void", "description": "Callback for open action"},
+    {"name": "onSwipeableWillClose", "type": "() => void", "description": "Callback for close action"},
+    {
+      "name": "customValue",
+      "type": "any",
+      "description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
+    },
+    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ]
+}

src/components/expandableSection/expandableSection.api.json

@@ -0,0 +1,16 @@
+{
+  "name": "ExpandableSection",
+  "category": "basic",
+  "description": "Component to render expanded section below or above the SectionHeader",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true"
+  ],
+  "props": [
+    {"name": "sectionHeader", "type": "JSX.Element", "description": "Header element"},
+    {"name": "children", "type": "React.ReactNode", "description": "The expandable's children"},
+    {"name": "expanded", "type": "boolean", "description": "Should the ExpandableSection be expanded"},
+    {"name": "top", "type": "boolean", "description": "Should it open above the 'sectionHeader'"},
+    {"name": "onPress", "type": "() => void", "description": "Called when pressing the header of the ExpandableSection"}
+  ]
+}