Skip to content

Add docs for t-z components #1648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 9, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions src/components/text/text.api.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "Text",
"category": "basic",
"description": "A wrapper for Text component with extra functionality like modifiers support",
"extends": ["Text"],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consider adding extendsLink for react-native's Text

"extendsLink": ["https://reactnative.dev/docs/text"],
"modifiers": ["margins", "color", "typography"],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.js",
"images": [
"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"
],
"props": [
{"name": "color", "type": "string", "description": "Color of the text"},
{"name": "center", "type": "boolean", "description": "Whether to center the text (using textAlign)"},
{"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
{"name": "highlightString", "type": "string | string[]", "description": "Substring to highlight"},
{"name": "highlightStyle", "type": "TextStyle", "description": "Custom highlight style for highlight string"},
{"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}
]
}
32 changes: 32 additions & 0 deletions src/components/touchableOpacity/touchableOpacity.api.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "TouchableOpacity",
"category": "basic",
"description": "A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor",
"extends": ["TouchableOpacity"],
"extendsLink": ["https://reactnative.dev/docs/touchableopacity"],
"modifiers": ["margins", "paddings", "alignments", "background", "borderRadius"],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
"images": ["https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif"],
"props": [
{"name": "backgroundColor", "type": "string", "description": "Background color for TouchableOpacity"},
{"name": "throttleTime", "type": "number", "description": "Throttle time in MS for onPress callback"},
{"name": "throttleOptions", "type": "{leading: boolean; trailing: boolean}", "description": "Throttle options"},
{
"name": "activeBackgroundColor",
"type": "string",
"description": "Apply background color on TouchableOpacity when active (press is on)"
},
{
"name": "useNative",
"type": "boolean",
"description": "Should use an enhanced native implementation with extra features"
},
{
"name": "customValue",
"type": "any",
"description": "Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback"
},
{"name": "style", "type": "ViewStyle", "description": "Custom style"},
{"name": "onPress", "type": "({customValue}) => void", "description": "On press callback"}
]
}
27 changes: 27 additions & 0 deletions src/components/view/view.api.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "View",
"category": "basic",
"description": "An enhanced View component",
"extends": ["View"],
"extendsLink": ["https://reactnative.dev/docs/view"],
"modifiers": ["margins", "paddings", "alignments", "background", "borderRadius"],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ViewScreen.js",
"images": [],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can be removed

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kept images array empty so it will remind us to add images to this component

"props": [
{"name": "useSafeArea", "type": "boolean", "description": "If true, will render as SafeAreaView"},
{"name": "animated", "type": "boolean", "description": "Use Animate.View as a container"},
{
"name": "reanimated",
"type": "boolean",
"description": "Use Animate.View (from react-native-reanimated) as a container"
},
{
"name": "inaccessible",
"type": "boolean",
"description": "Turn off accessibility for this view and its nested children"
},
{"name": "renderDelay", "type": "number", "description": "Experimental: Pass time in ms to delay render"},
{"name": "backgroundColor", "type": "string", "description": "Set background color"},
{"name": "style", "type": "ViewStyle", "description": "Custom style"}
]
}
26 changes: 26 additions & 0 deletions src/components/wizard/wizard.api.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "Wizard",
"category": "layoutsAndTemplates",
"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)",
"note": "Use Wizard with nested Wizard.Step(s) to achieve the desired result.",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
],
"props": [
{"name": "activeIndex", "type": "number", "description": "The active step's index"},
{
"name": "activeConfig",
"type": "WizardStepProps",
"description": "The configuration of the active step (see Wizard.Step.propTypes)"
},
{
"name": "onActiveIndexChanged",
"type": "(index: number) => void",
"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"
},
{"name": "containerStyle", "type": "ViewStyle", "description": "Add or override style of the container"},
{"name": "testID", "type": "string", "description": "The component test id"}
]
}
29 changes: 29 additions & 0 deletions src/components/wizard/wizardStep.api.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "Wizard.Step",
"category": "layoutsAndTemplates",
"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)",
"note": "Use Wizard with nested Wizard.Step(s) to achieve the desired result.",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true"
],
"props": [
{"name": "state", "type": "WizardStepStates", "description": "The state of the step (Wizard.States.X)"},
{"name": "label", "type": "string", "description": "The label of the item"},
{"name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the label"},
{"name": "connectorStyle", "type": "ViewStyle", "description": "Additional styles for the connector"},
{"name": "color", "type": "string", "description": "Color of the step index (or of the icon, when provided)"},
{"name": "circleColor", "type": "string", "description": "Color of the circle"},
{"name": "circleSize", "type": "number", "description": "The step's circle size (diameter)"},
{"name": "circleBackgroundColor", "type": "string", "description": "Circle's background color"},
{"name": "icon", "type": "ImageProps", "description": "Icon to replace the (default) index"},
{
"name": "indexLabelStyle",
"type": "TextStyle",
"description": "Additional styles for the index's label (when icon is not provided)"
},
{"name": "enabled", "type": "boolean", "description": "Whether the step should be enabled"},
{"name": "accessibilityInfo", "type": "string", "description": "Extra text to be read in accessibility mode"}
]
}