Docs/basic components (#3669)

* Add empty hero section to basic components

* Improve Picker snippet code

Author: ethanshar

src/components/picker/api/picker.api.json

@@ -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": {

src/components/text/text.api.json

@@ -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": [{}]
+    }
+  }
 }

src/components/touchableOpacity/touchableOpacity.api.json

@@ -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": [{}]
+    }
+  }
 }

src/components/view/view.api.json

@@ -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": [{}]
+    }
+  }
 }