Feat/snippets (#1823)

* Adding "snippet" key for uilib code snippet extension

* more snippet keys

* more snippets - tabcontroller and incubator

* docs site - adding code snippet from new "snippet" key

* Update scripts/build-docs.js

Co-authored-by: Ethan Sharabi <[email protected]>

* Update scripts/build-docs.js

Co-authored-by: Ethan Sharabi <[email protected]>

* Adding values to snippets

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Inbal-Tish

demo/src/screens/componentScreens/CardScannerScreen.js

@@ -56,7 +56,8 @@ export default class CardScannerScreen extends Component {
           <View paddingL-40 marginB-20>
             <AnimatedScanner
               backgroundColor={Colors.purple30}
-              progress={98} duration={1600}
+              progress={98}
+              duration={1600}
               containerStyle={{backgroundColor: Colors.violet50, height: 6}}
             />
           </View>

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,22 @@ 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 += `### Usage\n`;
+    content += '```\n';
+    content += component.snippet?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), '')).join('\n');
+    content += '\n```\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: 'Delete'$1, onPress: () => console.log('delete')$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={'Title'$1}",
+    " message={'Message goes here'$2}",
+    " cancelButtonIndex={3$3}",
+    " destructiveButtonIndex={0$4}",
+    " options={[",
+    "  {label: '$5', onPress: $6},",
+    "  {label: '$7', onPress: $8},",
+    "  {label: 'Cancel', onPress: () => console.log('cancel')$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: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg$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={55$1} duration={1600$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: 'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'$1}} label={IT$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={'999'$1} size={16$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={'Press'$1} size={Button.sizes.medium$2} backgroundColor={Colors.red30$3}/>"
   ]
 }

src/components/card/card.api.json

@@ -41,5 +41,10 @@
       "type": "CardSelectionOptions",
       "description": "Custom options for styling the selection indication"
     }
+  ],
+  "snippet": [
+    "<Card flex center onPress={() => console.log('pressed')}$1>",
+    " <Card.Image source={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}}/>$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={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg$1}} height={115$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={[{text: 'Card content here', text70: true, grey10: true}]$1}",
+    " contentStyle={{alignItems: 'center'}$2}",
+    "/>"
   ]
 }

src/components/carousel/carousel.api.json

@@ -92,5 +92,12 @@
       "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={() => console.log('page changed')$1}>",
+    " {_.map(items, item => (",
+    "  return this.renderItem(item, index);",
+    " ))}",
+    "</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={false$1} onValueChange={() => console.log('value changed’)$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={'Chip'$1} onPress={() => console.log('pressed’)$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={'Placeholder'$1}",
+    " chips={[{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}]$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={['transparent', Colors.green30, Colors.yellow30, Colors.red30]$1}",
+    " value={this.state.selectedColor$2}",
+    " onValueChange={() => console.log('value changed)$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={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]$1}",
+    " initialColor={Colors.green10$2}",
+    " value={this.state.color$3}",
+    " onDismiss={() => console.log('dismissed')$4}",
+    " onSubmit={() => console.log('submit')$5}",
+    " onValueChange={() => console.log('value changed')$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={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
   ]
 }

src/components/connectionStatusBar/connectionStatusBar.api.json

@@ -30,5 +30,8 @@
       "description": "Use absolute position for the component",
       "default": "true"
     }
+  ],
+  "snippet": [
+    "<ConnectionStatusBar onConnectionChange={() => console.log('connection changed')$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={'Select time'$1} placeholder={'Placeholder'$2} mode={'time'$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={this.state.visible$1}",
+    " onDismiss={() => console.log('dismissed')$2}",
+    " panDirection={PanningProvider.Directions.DOWN$3}",
+    ">",
+    " {<Text text60>Content</Text>}$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 rightItems:{[{text: 'Read', onPress: () => console.log('read pressed')}, {text: 'Delete', onPress: () => console.log('delete pressed')}]}$1>",
+    " <ListItem><Text grey10 text60 marginL-10>The item</Text></ListItem>$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={true$1}",
+    " expanded={false$2}",
+    " sectionHeader={<Text grey10 text60>The section header</Text>$3}",
+    " onPress={() => console.log('pressed')$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={this.state.visible$1} position={Fader.position.BOTTOM$2}/>"
   ]
 }

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={this.state.visible$1}",
+    " title={'Title'$2}",
+    " message={'Message goes here'$3}",
+    " getTarget={targets[this.state.currentTarget]$4}",
+    " confirmButtonProps={{label: 'Got It', onPress: () => console.log('confirmed')}$5}",
+    " onBackgroundPress={() => console.log('background pressed')$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={this.state.visible$1} button={button={{label: 'Approve', onPress: () => console.log('approved')}}$2}/>"
   ]
 }

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={index$1} title={'Title'$2} subtitle={'Subtitle'$3} description={'Description goes here'$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={[{title: 'item 1', onPress: () => console.log('item 1 pressed')}, {title: 'item 2', onPress: () => console.log('item 2 pressed')}, ]$1}",
+    " numColumns={2$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={this.state.visible$1} message={'Message goes here'$2} color={Colors.red30$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={{uri: 'https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/icons/delete.png'}$1} size={24$2} tintColor={Colors.grey40$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={{uri: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/assets/images/card-example.jpg}}/>"
   ]
 }

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={() => console.log('pressed)$1}>",
+    " <Text grey10 text60 marginL-10>The item</Text>$2",
+    "</ListItem>"
   ]
 }