Skip to content

Docs/basic components #3669

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
Apr 2, 2025
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
33 changes: 25 additions & 8 deletions src/components/picker/api/picker.api.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,31 @@
{"name": "customLoaderElement", "type": "ReactNode", "description": "Custom loader element"}
],
"snippet": [
"<Picker",
" value={2$1}",
" placeholder={'Placeholder'$2}",
" onChange={() => console.log('changed')$3}",
" trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>}",
" items={[{label: 'Item 1', value: 1}, {label: 'Item 2', value: 2},{label: 'Item 3', value: 3}]}",
">",
"</Picker>"
"function Example(props) {",
" const [value, setValue] = useState(undefined);",
"",
" const FILTERS = [",
" {value: 1, label: 'All'},",
" {value: 2, label: 'Accessories'},",
" {value: 3, label: 'Outwear'},",
" {value: 4, label: 'Footwear'},",
" {value: 5, label: 'Swimwear'},",
" {value: 6, label: 'Tops'}",
" ];",
"",
" return (",
" <View flex padding-s5>",
" <Picker",
" value={value}",
" preset='outline'",
" placeholder={'Select filter'}",
" label={'filter'}",
" onChange={setValue}",
" items={FILTERS}",
" />",
" </View>",
" );",
"}"
],
"docs": {
"hero": {
Expand Down
19 changes: 18 additions & 1 deletion src/components/text/text.api.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,22 @@
{"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
{"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}
],
"snippet": ["<Text text30$1>Text goes here$2</Text>"]
"snippet": [
"<View flex center gap-s2>",
"<Text text30$1>Text30</Text>",
"<Text text40 red30>Red</Text>",
"<Text text60 uppercase>uppercase</Text>",
"<Text text60 underline>underline</Text>",
"<Text text70 highlightString='be' highlightStyle={{color: Colors.$textPrimary, fontWeight: 'bold'}}>To be, or not to be</Text>",
"</View>"
],
"docs": {
"hero": {
"title": "Text",
"description": "An enhanced version of React Native's Text component providing additional features and modifiers support",
"type": "hero",
"layout": "horizontal",
"content": [{}]
}
}
}
17 changes: 14 additions & 3 deletions src/components/touchableOpacity/touchableOpacity.api.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,19 @@
}
],
"snippet": [
"<View flex center>",
"<TouchableOpacity onPress={() => console.log('pressed')$1}>",
" <Text text40>Click Me!</Text>",
"</TouchableOpacity>"
]
" <Text text40>Touchable</Text>",
"</TouchableOpacity>",
"</View>"
],
"docs": {
"hero": {
"title": "TouchableOpacity",
"description": "An enhanced version of React Native's TouchableOpacity component providing additional features and modifiers support",
"type": "hero",
"layout": "horizontal",
"content": [{}]
}
}
}
27 changes: 18 additions & 9 deletions src/components/view/view.api.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,22 @@
{"name": "style", "type": "ViewStyle", "description": "Custom style"}
],
"snippet": [
"<View row gap-s5 centerV>",
" <View style={{width: 200, height: 200}} bg-purple40 centerH>",
" <View style={{width: 60, height: 60}} bg-green20/>",
" </View>",
" <View style={{width: 150, height: 150}} bg-orange30 bottom right>",
" <View style={{width: 50, height: 50}} bg-yellow40 br100 margin-s2/>",
" </View>",
"</View>"
]
"<View row gap-s5 centerV>",
" <View style={{width: 200, height: 200}} bg-purple40 centerH>",
" <View style={{width: 60, height: 60}} bg-green20/>",
" </View>",
" <View style={{width: 150, height: 150}} bg-orange30 bottom right>",
" <View style={{width: 50, height: 50}} bg-yellow40 br100 margin-s2/>",
" </View>",
"</View>"
],
"docs": {
"hero": {
"title": "View",
"description": "An enhanced version of React Native's View component providing additional features and modifiers support",
"type": "hero",
"layout": "horizontal",
"content": [{}]
}
}
}