Skip to content

Commit f83b9a0

Browse files
infra: create api.json files for components missing documentation
Co-Authored-By: [email protected] <[email protected]>
1 parent b126d64 commit f83b9a0

File tree

13 files changed

+559
-0
lines changed

13 files changed

+559
-0
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "KeyboardAwareScrollView",
3+
"category": "form",
4+
"description": "A wrapper component which handles the ScrollView insets properly when the keyboard is shown and hides the content, scrolling content above the keybaord.",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/KeyboardAwareScrollViewScreen.js",
6+
"props": [
7+
{
8+
"name": "getTextInputRefs",
9+
"type": "function",
10+
"description": "Function that returns an array of TextInput refs"
11+
},
12+
{
13+
"name": "onScroll",
14+
"type": "function",
15+
"description": "Callback for scroll events"
16+
},
17+
{
18+
"name": "startScrolledToBottom",
19+
"type": "boolean",
20+
"description": "Whether to start scrolled to bottom"
21+
},
22+
{
23+
"name": "scrollToBottomOnKBShow",
24+
"type": "boolean",
25+
"description": "Whether to scroll to bottom when keyboard shows"
26+
},
27+
{
28+
"name": "scrollToInputAdditionalOffset",
29+
"type": "number",
30+
"description": "Additional offset when scrolling to input"
31+
}
32+
],
33+
"snippet": [
34+
"<KeyboardAwareScrollView>",
35+
" <View>",
36+
" <TextField placeholder=\"Input with scrolling\" />",
37+
" </View>",
38+
"</KeyboardAwareScrollView>"
39+
]
40+
}
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "BaseInput",
3+
"category": "form",
4+
"description": "Base component for text inputs with validation support",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js",
6+
"props": [
7+
{
8+
"name": "color",
9+
"type": "string",
10+
"description": "Text color"
11+
},
12+
{
13+
"name": "containerStyle",
14+
"type": "ViewStyle",
15+
"description": "Text input container style"
16+
},
17+
{
18+
"name": "validate",
19+
"type": "string | function | array",
20+
"description": "Validator type or custom validator function"
21+
},
22+
{
23+
"name": "markRequired",
24+
"type": "boolean",
25+
"description": "Whether to mark required field with an asterisk"
26+
},
27+
{
28+
"name": "errorMessage",
29+
"type": "string | array",
30+
"description": "The message to be displayed when the validation fails"
31+
},
32+
{
33+
"name": "validateOnStart",
34+
"type": "boolean",
35+
"description": "Whether to run the validation on mount"
36+
},
37+
{
38+
"name": "validateOnChange",
39+
"type": "boolean",
40+
"description": "Whether to run the validation on text changed"
41+
},
42+
{
43+
"name": "validateOnBlur",
44+
"type": "boolean",
45+
"description": "Whether to run the validation on blur"
46+
},
47+
{
48+
"name": "onChangeValidity",
49+
"type": "function",
50+
"description": "Callback for validity change"
51+
}
52+
],
53+
"snippet": [
54+
"<BaseInput",
55+
" validate=\"required\"",
56+
" errorMessage=\"This field is required\"",
57+
" validateOnBlur",
58+
"/>"
59+
]
60+
}
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "FadedScrollView",
3+
"category": "lists",
4+
"description": "ScrollView component with fading edges effect",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FadedScrollViewScreen.js",
6+
"props": [
7+
{
8+
"name": "showStartFader",
9+
"type": "boolean",
10+
"description": "Show a fader at the start of the scroll"
11+
},
12+
{
13+
"name": "startFaderProps",
14+
"type": "object",
15+
"description": "Additional props for the start fader"
16+
},
17+
{
18+
"name": "showEndFader",
19+
"type": "boolean",
20+
"description": "Show a fader at the end of the scroll"
21+
},
22+
{
23+
"name": "endFaderProps",
24+
"type": "object",
25+
"description": "Additional props for the end fader"
26+
},
27+
{
28+
"name": "useGesture",
29+
"type": "boolean",
30+
"description": "Use the react-native-gesture-handler version, useful when using react-native-reanimated"
31+
}
32+
],
33+
"snippet": [
34+
"<FadedScrollView",
35+
" showStartFader",
36+
" showEndFader",
37+
">",
38+
" <View>",
39+
" <Text>Content goes here</Text>",
40+
" </View>",
41+
"</FadedScrollView>"
42+
]
43+
}

src/components/inputs/inputs.api.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "Inputs",
3+
"category": "form",
4+
"description": "Collection of input components",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js",
6+
"props": [],
7+
"snippet": [
8+
"import {Inputs} from 'react-native-ui-lib';",
9+
"",
10+
"// Access specific input components",
11+
"const {TextField, MaskedInput, TextArea} = Inputs;"
12+
]
13+
}

src/components/modal/modal.api.json

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "Modal",
3+
"category": "overlays",
4+
"description": "Component that present content on top of the invoking screen",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
6+
"props": [
7+
{
8+
"name": "enableModalBlur",
9+
"type": "boolean",
10+
"description": "Blurs the modal background when transparent (iOS only)"
11+
},
12+
{
13+
"name": "blurView",
14+
"type": "JSX.Element",
15+
"description": "A custom view to use as a BlueView instead of the default one"
16+
},
17+
{
18+
"name": "onBackgroundPress",
19+
"type": "function",
20+
"description": "Allow dismissing a modal when clicking on its background"
21+
},
22+
{
23+
"name": "overlayBackgroundColor",
24+
"type": "string",
25+
"description": "The background color of the overlay"
26+
},
27+
{
28+
"name": "useGestureHandlerRootView",
29+
"type": "boolean",
30+
"description": "Should add a GestureHandlerRootView"
31+
},
32+
{
33+
"name": "useKeyboardAvoidingView",
34+
"type": "boolean",
35+
"description": "Should add a KeyboardAvoidingView (iOS only)"
36+
},
37+
{
38+
"name": "keyboardAvoidingViewProps",
39+
"type": "object",
40+
"description": "Send additional props to the KeyboardAvoidingView (iOS only)"
41+
}
42+
],
43+
"snippet": [
44+
"<Modal",
45+
" visible={visible}",
46+
" onBackgroundPress={() => setVisible(false)}",
47+
" overlayBackgroundColor=\"rgba(0, 0, 0, 0.7)\"",
48+
">",
49+
" <View>",
50+
" <Text>Modal Content</Text>",
51+
" </View>",
52+
"</Modal>"
53+
]
54+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "PanningProvider",
3+
"category": "interaction",
4+
"description": "Wraps the panResponderView and panListenerView to provide a shared context",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanResponderScreen.tsx",
6+
"props": [],
7+
"snippet": [
8+
"<PanningProvider>",
9+
" <PanListenerView>",
10+
" <PanResponderView>",
11+
" <View>",
12+
" <Text>Content to pan</Text>",
13+
" </View>",
14+
" </PanResponderView>",
15+
" </PanListenerView>",
16+
"</PanningProvider>"
17+
]
18+
}

src/components/picker/picker.api.json

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "Picker",
3+
"category": "form",
4+
"description": "Picker component for selecting a value from a list of options",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.tsx",
6+
"props": [
7+
{
8+
"name": "mode",
9+
"type": "enum",
10+
"description": "Picker mode (SINGLE, MULTI)"
11+
},
12+
{
13+
"name": "fieldType",
14+
"type": "enum",
15+
"description": "Field display type (form, filter, settings)"
16+
},
17+
{
18+
"name": "selectionLimit",
19+
"type": "number",
20+
"description": "Max number of selected items (for MULTI mode)"
21+
},
22+
{
23+
"name": "showSearch",
24+
"type": "boolean",
25+
"description": "Whether to show the search input"
26+
},
27+
{
28+
"name": "searchPlaceholder",
29+
"type": "string",
30+
"description": "Placeholder text for the search input"
31+
},
32+
{
33+
"name": "useWheelPicker",
34+
"type": "boolean",
35+
"description": "Whether to use wheel picker"
36+
},
37+
{
38+
"name": "useDialog",
39+
"type": "boolean",
40+
"description": "Whether to use dialog for the picker"
41+
},
42+
{
43+
"name": "value",
44+
"type": "any",
45+
"description": "Selected value(s)"
46+
},
47+
{
48+
"name": "onChange",
49+
"type": "function",
50+
"description": "Callback for value change"
51+
}
52+
],
53+
"snippet": [
54+
"<Picker",
55+
" placeholder=\"Select option\"",
56+
" value={selectedValue}",
57+
" onChange={value => setSelectedValue(value)}",
58+
">",
59+
" <Picker.Item value=\"option1\" label=\"Option 1\" />",
60+
" <Picker.Item value=\"option2\" label=\"Option 2\" />",
61+
"</Picker>"
62+
]
63+
}
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "ScrollBar",
3+
"category": "lists",
4+
"description": "Scrollable container with animated gradient overlay for horizontal scroll",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ScrollBarScreen.js",
6+
"props": [
7+
{
8+
"name": "useList",
9+
"type": "boolean",
10+
"description": "Whether to use a FlatList. NOTE: you must pass 'data' and 'renderItem' props as well"
11+
},
12+
{
13+
"name": "containerView",
14+
"type": "React.ComponentClass",
15+
"description": "The element to use as a container, instead of a View"
16+
},
17+
{
18+
"name": "containerProps",
19+
"type": "object",
20+
"description": "The props to pass the container"
21+
},
22+
{
23+
"name": "height",
24+
"type": "number",
25+
"description": "The component's height"
26+
},
27+
{
28+
"name": "gradientHeight",
29+
"type": "number",
30+
"description": "The gradient's height, defaults to the component's height"
31+
},
32+
{
33+
"name": "gradientWidth",
34+
"type": "number",
35+
"description": "The gradient's width"
36+
},
37+
{
38+
"name": "gradientMargins",
39+
"type": "number",
40+
"description": "The gradient's margins for the edge"
41+
},
42+
{
43+
"name": "gradientColor",
44+
"type": "string",
45+
"description": "The gradient's tint color"
46+
},
47+
{
48+
"name": "gradientImage",
49+
"type": "ImageSourcePropType",
50+
"description": "The gradient's image, instead of the default image"
51+
},
52+
{
53+
"name": "focusIndex",
54+
"type": "number",
55+
"description": "The index to currently focus on"
56+
}
57+
],
58+
"snippet": [
59+
"<ScrollBar>",
60+
" <View>",
61+
" <Text>Item 1</Text>",
62+
" </View>",
63+
" <View>",
64+
" <Text>Item 2</Text>",
65+
" </View>",
66+
"</ScrollBar>"
67+
]
68+
}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "SharedTransition",
3+
"category": "interaction",
4+
"description": "Component for creating shared element transitions between screens",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SharedTransitionScreen.js",
6+
"props": [],
7+
"snippet": [
8+
"// Source screen",
9+
"<SharedTransition.Area>",
10+
" <SharedTransition.Source data={item}>",
11+
" <Image source={item.image} />",
12+
" </SharedTransition.Source>",
13+
"</SharedTransition.Area>",
14+
"",
15+
"// Target screen",
16+
"<SharedTransition.Area renderDetails={renderDetails}>",
17+
" <SharedTransition.Target>",
18+
" <Image source={item.image} />",
19+
" </SharedTransition.Target>",
20+
"</SharedTransition.Area>"
21+
]
22+
}

0 commit comments

Comments
 (0)