Feat/snippets

scripts/build-docs.js

@@ -1,6 +1,6 @@
+const _ = require('lodash');
 const childProcess = require('child_process');
 const fs = require('fs');
-const _ = require('lodash');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 
@@ -43,7 +43,7 @@ components.forEach(component => {
   /* General */
   content += `${component.description}  \n`;
   content += `[(code example)](${component.example})\n`;
-
+  
   if (component.extends) {
     let extendsText = component.extends?.join(', ');
     if (component.extendsLink) {
@@ -70,13 +70,25 @@ components.forEach(component => {
   }
 
   /* Images */
-  content += `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
+  content += 
+  `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
   component.images?.forEach(image => {
     content += `<img style={{maxHeight: '420px'}} src={'${image}'}/>`;
     content += '\n\n';
   });
   content += '</div>\n\n';
 
+  /* Snippet */
+  if (component.snippet) {
+    content += `### Code Snippet\n`;
+    content += '```\n';
+    component.snippet?.forEach(item => {
+      const line = _.replace(item, new RegExp(/\$[1-9]/, 'g'), '');
+      content += `${line}\n`;
+    });
+    content += '```\n';
+  }
+
   /* Props */
   content += `## API\n`;
   _.sortBy(component.props, p => p.name)?.forEach(prop => {

src/components/actionBar/actionBar.api.json

@@ -24,5 +24,14 @@
       "default": "true"
     },
     {"name": "style", "type": "ViewStyle", "description": "Component's style"}
+  ],
+  "snippet": [
+    "<ActionBar",
+    "  actions={[",
+    "    {label: $1, onPress: $2},",
+    "    {label: $3, onPress: $4},",
+    "    {label: $5, onPress: $6}",
+    "  ]}",
+    "/>"
   ]
 }

src/components/actionSheet/actionSheet.api.json

@@ -71,5 +71,18 @@
       "description": "In iOS, use safe area, in case component attached to the bottom"
     },
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<ActionSheet",
+    " title={$1}",
+    " message={$2}",
+    " cancelButtonIndex={$3}",
+    " destructiveButtonIndex={$4}",
+    " options={[",
+    "  {label: '$5', onPress: $6},",
+    "  {label: '$7', onPress: $8},",
+    "  {label: 'Cancel', onPress: $9}",
+    " ]}",
+    "/>"
   ]
 }

src/components/animatedImage/animatedImage.api.json

@@ -15,5 +15,8 @@
     },
     {"name": "loader", "type": "JSX.element", "description": "A component to render while the image is loading"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"}
+  ],
+  "snippet": [
+    "<AnimatedImage source={{uri: $1}}/>"
   ]
 }

src/components/animatedScanner/animatedScanner.api.json

@@ -19,5 +19,8 @@
     {"name": "onBreakpoint", "type": "({progress, isDone}) => void", "description": "Breakpoint callback"},
     {"name": "hideScannerLine", "type": "boolean", "description": "Whether to hide the scanner line"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"}
+  ],
+  "snippet": [
+    "<AnimatedScanner progress={$1} duration={$2}/>"
   ]
 }

src/components/avatar/avatar.api.json

@@ -85,5 +85,8 @@
     {"name": "size", "type": " number", "description": "Custom size for the Avatar", "default": "50"},
     {"name": "onPress", "type": "(props: any) => void", "description": "Press handler"},
     {"name": "testID", "type": "string", "description": "Test identifier"}
+  ],
+  "snippet": [
+    "<Avatar source={{uri: $1}} label={$2}/>"
   ]
 }

src/components/badge/badge.api.json

@@ -39,5 +39,8 @@
     {"name": "iconProps", "type": "ImageProps", "description": "Additional props passed to icon"},
     {"name": "customElement", "type": "JSX.Element", "description": "Custom element to render instead of an icon"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container"}
+  ],
+  "snippet": [
+    "<Badge label={$1} size={$2}/>"
   ]
 }

src/components/button/button.api.json

@@ -66,5 +66,8 @@
       "type": "ButtonAnimationDirection",
       "description": "the direction of the animation ('left' and 'right' will effect the button's own alignment)"
     }
+  ],
+  "snippet": [
+    "<Button label={$1} size={$2} backgroundColor={$3}/>"
   ]
 }

src/components/card/card.api.json

@@ -41,5 +41,10 @@
       "type": "CardSelectionOptions",
       "description": "Custom options for styling the selection indication"
     }
+  ],
+  "snippet": [
+    "<Card $1>",
+    " $2",
+    "</Card>"
   ]
 }

src/components/card/cardImage.api.json

@@ -13,5 +13,8 @@
       "type": "string[]",
       "description": "The Image position which determines the appropriate flex-ness of the image and border radius (for Android) this prop derived automatically from Card parent component if it rendered as a direct child of the Card component"
     }
+  ],
+  "snippet": [
+    "<Card.Image source={$1} height={$2}/>"
   ]
 }

src/components/card/cardSection.api.json

@@ -30,5 +30,11 @@
     },
     {"name": "imageStyle", "type": "ImageStyle", "description": "The style for the background image"},
     {"name": "imageProps", "type": "ImageProps", "description": "Other image props that will be passed to the image"}
+  ],
+  "snippet": [
+    "<Card.Section",
+    " content={$1}",
+    " contentStyle={$2}",
+    "/>"
   ]
 }

src/components/carousel/carousel.api.json

@@ -92,5 +92,10 @@
       "type": "Animated.ValueXY",
       "description": "Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())"
     }
+  ],
+  "snippet": [
+    "<Carousel onChangePage={$1}>",
+    " $2",
+    "</Carousel>"
   ]
 }

src/components/checkbox/checkbox.api.json

@@ -35,5 +35,8 @@
       "type": "ViewStyle",
       "description": "Custom styling for the checkbox and label container"
     }
+  ],
+  "snippet": [
+    "<Checkbox value={$1} onValueChange={$2}/>"
   ]
 }

src/components/chip/chip.api.json

@@ -51,5 +51,8 @@
     {"name": "dismissIconStyle", "type": "ImageStyle", "description": "Dismiss style"},
     {"name": "dismissContainerStyle", "type": "ImageStyle", "description": "Dismiss container style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<Chip label={$1} onPress={$2}/>"
   ]
 }

src/components/chipsInput/chipsInput.api.json

@@ -73,5 +73,11 @@
     {"name": "value", "type": "any", "description": "The input's value"},
     {"name": "selectionColor", "type": "string | number", "description": "The color for the selection state"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"}
+  ],
+  "snippet": [
+    "<ChipsInput",
+    " placeholder={$1}",
+    " chips={$2}",
+    "/>"
   ]
 }

src/components/colorPalette/ColorPalette.api.json

@@ -39,5 +39,12 @@
     {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<ColorPalette",
+    " colors={$1}",
+    " value={$2}",
+    " onValueChange={$3}",
+    "/>"
   ]
 }

src/components/colorPicker/colorPicker.api.json

@@ -33,5 +33,15 @@
     },
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<ColorPicker",
+    " colors={$1}",
+    " initialColor={$2}",
+    " value={$3}",
+    " onDismiss={$4}",
+    " onSubmit={$5}",
+    " onValueChange={$6}",
+    "/>"
   ]
 }

src/components/colorSwatch/colorSwatch.api.json

@@ -20,5 +20,8 @@
     {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<ColorSwatch color={$1} selected={$2} onPress={$3}/>"
   ]
 }

src/components/connectionStatusBar/connectionStatusBar.api.json

@@ -30,5 +30,8 @@
       "description": "Use absolute position for the component",
       "default": "true"
     }
+  ],
+  "snippet": [
+    "<ConnectionStatusBar onConnectionChange={$1}/>"
   ]
 }

src/components/dateTimePicker/dateTimePicker.api.json

@@ -61,5 +61,8 @@
       "type": "LIGHT | DARK",
       "description": "Override system theme variant (dark or light mode) used by the date picker"
     }
+  ],
+  "snippet": [
+    "<DateTimePicker title={$1} placeholder={$2} mode={$3}/>"
   ]
 }

src/components/dialog/dialog.api.json

@@ -47,5 +47,14 @@
     },
     {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<Dialog", 
+    " visible={$1}",
+    " onDismiss={$2}",
+    " panDirection={$3}",
+    ">",
+    " $4",
+    "</Dialog>"
   ]
 }

src/components/drawer/drawer.api.json

@@ -57,5 +57,10 @@
     },
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<Drawer $1>",
+    " $2",
+    "</Drawer>"
   ]
 }

src/components/expandableSection/expandableSection.api.json

@@ -12,5 +12,13 @@
     {"name": "expanded", "type": "boolean", "description": "Should the ExpandableSection be expanded"},
     {"name": "top", "type": "boolean", "description": "Should it open above the 'sectionHeader'"},
     {"name": "onPress", "type": "() => void", "description": "Called when pressing the header of the ExpandableSection"}
+  ],
+  "snippet": [
+    "<ExpandableSection",
+    " top={$1}",
+    " expanded={$2}",
+    " sectionHeader={$3}",
+    " onPress={$4}",
+    ">"
   ]
 }

src/components/fader/fader.api.json

@@ -19,5 +19,8 @@
       "description": "Change the tint color of the fade view",
       "default": "Colors.white"
     }
+  ],
+  "snippet": [
+    "<Fader visible={$1} position={$2} tintColor={$3}/>"
   ]
 }

src/components/featureHighlight/featureHighlight.api.json

@@ -67,5 +67,15 @@
     },
     {"name": "pageControlProps", "type": "PageControlProps", "description": "PageControl component's props"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<FeatureHighlight",
+    " visible={$1}",
+    " title={$2}",
+    " message={$3}",
+    " getTarget={$4}",
+    " confirmButtonProps={$5}",
+    " onBackgroundPress={$6}",
+    "/>"
   ]
 }

src/components/floatingButton/floatingButton.api.json

@@ -25,5 +25,8 @@
       "description": "The test id for e2e tests",
       "note": "<TestID> - the floatingButton container\n<TestID>.button - the floatingButton main button\n<TestID>.secondaryButton - the floatingButton secondaryButton"
     }
+  ],
+  "snippet": [
+    "<FloatingButton visible={$1} button={$2} secondaryButton={$3}/>"
   ]
 }

src/components/gridListItem/gridListItem.api.json

@@ -48,5 +48,8 @@
       "description": "Renders an overlay on top of the image"
     },
     {"name": "testID", "type": "string", "description": "Test ID for component"}
+  ],
+  "snippet": [
+    "<GridListItem key={$1} title={$2} subtitle={$3} description={$4}/>"
   ]
 }

src/components/gridView/gridView.api.json

@@ -24,5 +24,12 @@
       "type": "(item: GridListItemProps) => React.ReactElement",
       "description": "Pass to render a custom item"
     }
+  ],
+  "snippet": [
+    "<GridView",
+    " items={$1}",
+    " numColumns={$2}",
+    " lastItemLabel={$3}",
+    "/>"
   ]
 }

src/components/hint/hint.api.json

@@ -48,5 +48,8 @@
     {"name": "enableShadow", "type": "boolean", "description": "Enable shadow (for hint with white background only)"},
     {"name": "testID", "type": "string", "description": "The hint's test identifier"},
     {"name": "style", "type": "ViewStyle", "description": "Additional styling"}
+  ],
+  "snippet": [
+    "<Hint visible={$1} message={$2} color={$3}/>"
   ]
 }

src/components/icon/icon.api.json

@@ -12,5 +12,8 @@
     {"name": "tintColor", "type": "string", "description": "The icon tint"},
     {"name": "size", "type": "number", "description": "The icon size"},
     {"name": "supportRTL", "type": "boolean", "description": "whether the image should flip horizontally on RTL locals"}
+  ],
+  "snippet": [
+    "<Icon source={$1} size={$2} tintColor={$3}/>"
   ]
 }

src/components/image/image.api.json

@@ -42,5 +42,8 @@
     {"name": "overlayColor", "type": "string", "description": "Pass a custom color for the overlay"},
     {"name": "customOverlayContent", "type": "JSX.Element", "description": "Render an overlay with custom content"},
     {"name": "errorSource", "type": "ImageSourcePropType", "description": "Default image source in case of an error"}
+  ],
+  "snippet": [
+    "<Image source={$1}/>"
   ]
 }

src/components/listItem/listItem.api.json

@@ -19,5 +19,10 @@
     {"name": "style", "type": "ViewStyle", "description": "The inner element style"},
     {"name": "underlayColor", "type": "string", "description": "The inner element pressed backgroundColor"},
     {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+  ],
+  "snippet": [
+    "<ListItem onPress={$1}>",
+    " $2",
+    "</ListItem>"
   ]
 }

src/components/listItem/listItemPart.api.json

@@ -11,5 +11,10 @@
     {"name": "row", "type": "boolean", "description": "this part content direction will be row", "default": "true"},
     {"name": "column", "type": "boolean", "description": "this part content direction will be column"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "container style"}
+  ],
+  "snippet": [
+    "<ListItem.Part $1>",
+    " $2",
+    "</ListItem.Part>"
   ]
 }