Skip to content

Commit 9d6b357

Browse files
ethansharethanshar
authored
Add docs for t-z components (#1648)
* Add docs for t-z components * Add extendsLink to Text component API
1 parent 7b5d1ca commit 9d6b357

File tree

5 files changed

+134
-0
lines changed

5 files changed

+134
-0
lines changed

‎src/components/text/text.api.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "Text",
3+
"category": "basic",
4+
"description": "A wrapper for Text component with extra functionality like modifiers support",
5+
"extends": ["Text"],
6+
"extendsLink": ["https://reactnative.dev/docs/text"],
7+
"modifiers": ["margins", "color", "typography"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.js",
9+
"images": [
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Modifiers.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Transformation.png?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Highlights.png?raw=true"
11+
],
12+
"props": [
13+
{"name": "color", "type": "string", "description": "Color of the text"},
14+
{"name": "center", "type": "boolean", "description": "Whether to center the text (using textAlign)"},
15+
{"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
16+
{"name": "highlightString", "type": "string | string[]", "description": "Substring to highlight"},
17+
{"name": "highlightStyle", "type": "TextStyle", "description": "Custom highlight style for highlight string"},
18+
{"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}
19+
]
20+
}

‎src/components/touchableOpacity/touchableOpacity.api.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "TouchableOpacity",
3+
"category": "basic",
4+
"description": "A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor",
5+
"extends": ["TouchableOpacity"],
6+
"extendsLink": ["https://reactnative.dev/docs/touchableopacity"],
7+
"modifiers": ["margins", "paddings", "alignments", "background", "borderRadius"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
9+
"images": ["https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif"],
10+
"props": [
11+
{"name": "backgroundColor", "type": "string", "description": "Background color for TouchableOpacity"},
12+
{"name": "throttleTime", "type": "number", "description": "Throttle time in MS for onPress callback"},
13+
{"name": "throttleOptions", "type": "{leading: boolean; trailing: boolean}", "description": "Throttle options"},
14+
{
15+
"name": "activeBackgroundColor",
16+
"type": "string",
17+
"description": "Apply background color on TouchableOpacity when active (press is on)"
18+
},
19+
{
20+
"name": "useNative",
21+
"type": "boolean",
22+
"description": "Should use an enhanced native implementation with extra features"
23+
},
24+
{
25+
"name": "customValue",
26+
"type": "any",
27+
"description": "Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback"
28+
},
29+
{"name": "style", "type": "ViewStyle", "description": "Custom style"},
30+
{"name": "onPress", "type": "({customValue}) => void", "description": "On press callback"}
31+
]
32+
}

‎src/components/view/view.api.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "View",
3+
"category": "basic",
4+
"description": "An enhanced View component",
5+
"extends": ["View"],
6+
"extendsLink": ["https://reactnative.dev/docs/view"],
7+
"modifiers": ["margins", "paddings", "alignments", "background", "borderRadius"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ViewScreen.js",
9+
"images": [],
10+
"props": [
11+
{"name": "useSafeArea", "type": "boolean", "description": "If true, will render as SafeAreaView"},
12+
{"name": "animated", "type": "boolean", "description": "Use Animate.View as a container"},
13+
{
14+
"name": "reanimated",
15+
"type": "boolean",
16+
"description": "Use Animate.View (from react-native-reanimated) as a container"
17+
},
18+
{
19+
"name": "inaccessible",
20+
"type": "boolean",
21+
"description": "Turn off accessibility for this view and its nested children"
22+
},
23+
{"name": "renderDelay", "type": "number", "description": "Experimental: Pass time in ms to delay render"},
24+
{"name": "backgroundColor", "type": "string", "description": "Set background color"},
25+
{"name": "style", "type": "ViewStyle", "description": "Custom style"}
26+
]
27+
}

‎src/components/wizard/wizard.api.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "Wizard",
3+
"category": "layoutsAndTemplates",
4+
"description": "A wizard presents a series of steps in prescribed order. That the user needs to complete in order to accomplish a goal (e.g. purchase a product)",
5+
"note": "Use Wizard with nested Wizard.Step(s) to achieve the desired result.",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.tsx",
7+
"images": [
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true",
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
10+
],
11+
"props": [
12+
{"name": "activeIndex", "type": "number", "description": "The active step's index"},
13+
{
14+
"name": "activeConfig",
15+
"type": "WizardStepProps",
16+
"description": "The configuration of the active step (see Wizard.Step.propTypes)"
17+
},
18+
{
19+
"name": "onActiveIndexChanged",
20+
"type": "(index: number) => void",
21+
"description": "Callback that is called when the active step is changed (i.e. a step was clicked on). The new activeIndex will be the input of the callback"
22+
},
23+
{"name": "containerStyle", "type": "ViewStyle", "description": "Add or override style of the container"},
24+
{"name": "testID", "type": "string", "description": "The component test id"}
25+
]
26+
}

‎src/components/wizard/wizardStep.api.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "Wizard.Step",
3+
"category": "layoutsAndTemplates",
4+
"description": "A wizard presents a series of steps in prescribed order. That the user needs to complete in order to accomplish a goal (e.g. purchase a product)",
5+
"note": "Use Wizard with nested Wizard.Step(s) to achieve the desired result.",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.tsx",
7+
"images": [
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true",
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
10+
],
11+
"props": [
12+
{"name": "state", "type": "WizardStepStates", "description": "The state of the step (Wizard.States.X)"},
13+
{"name": "label", "type": "string", "description": "The label of the item"},
14+
{"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the label"},
15+
{"name": "connectorStyle", "type": "ViewStyle", "description": "Additional styles for the connector"},
16+
{"name": "color", "type": "string", "description": "Color of the step index (or of the icon, when provided)"},
17+
{"name": "circleColor", "type": "string", "description": "Color of the circle"},
18+
{"name": "circleSize", "type": "number", "description": "The step's circle size (diameter)"},
19+
{"name": "circleBackgroundColor", "type": "string", "description": "Circle's background color"},
20+
{"name": "icon", "type": "ImageProps", "description": "Icon to replace the (default) index"},
21+
{
22+
"name": "indexLabelStyle",
23+
"type": "TextStyle",
24+
"description": "Additional styles for the index's label (when icon is not provided)"
25+
},
26+
{"name": "enabled", "type": "boolean", "description": "Whether the step should be enabled"},
27+
{"name": "accessibilityInfo", "type": "string", "description": "Extra text to be read in accessibility mode"}
28+
]
29+
}

0 commit comments

Comments
 (0)