Changed sidebar.js and buildDocs.js script according to the new categ… (#2133)

* Changed sidebar.js and buildDocs.js script according to the new categories. Changed the .api.json files to the new structure

* Changed checkbox, radioButton, radioGroup, slider,switch catgories

* Changed chip, badge, modal, fader, pageCarousel, modalTopBar catgories

Author: adids1221

docuilib/sidebars.js

@@ -10,12 +10,20 @@
  */
 
 const componentsCategories = {
-  Basic: 'basic',
-  Form: 'form',
-  Overlays: 'overlays',
-  Layout: 'layoutsAndTemplates',
-  Keyboard: 'keyboard',
-  Incubator: 'incubator'
+  // foundation: 'Foundation',
+  // assets: 'Assets',
+  navigation: 'Navigation',
+  layout: 'Layout',
+  controls: 'Controls',
+  status: 'Status',
+  media: 'Media',
+  lists: 'Lists',
+  form: 'Form',
+  dateTime: 'Date & Time',
+  overlays: 'Overlays',
+  charts: 'Charts',
+  incubator: 'Incubator',
+  infra: 'Infra'
 };
 
 module.exports = {
@@ -50,15 +58,16 @@ module.exports = {
       type: 'category',
       label: 'Components',
       collapsible: false,
-      items: ['Basic', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
+      // items: ['Basic', 'Lists', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
+      items: Object.keys(componentsCategories).map(category => {
         return {
           type: 'category',
-          label: category,
+          label: componentsCategories[category],
           collapsed: false,
           items: [
             {
               type: 'autogenerated',
-              dirName: `components/${componentsCategories[category]}`
+              dirName: `components/${category}`
             }
           ]
         };

lib/components/Keyboard/KeyboardInput/keyboardAccessoryView.api.json

@@ -1,6 +1,6 @@
 {
   "name": "KeyboardAccessoryView",
-  "category": "keyboard",
+  "category": "infra",
   "description": "View that allows replacing the default keyboard with other components",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js",
   "images": [

lib/components/Keyboard/KeyboardInput/keyboardRegistry.api.json

@@ -1,6 +1,6 @@
 {
   "name": "KeyboardRegistry",
-  "category": "keyboard",
+  "category": "infra",
   "description": "used for registering keyboards and performing certain actions on the keyboards.",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js",
   "props": [

lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/keyboardTrackingView.api.json

@@ -1,6 +1,6 @@
 {
   "name": "KeyboardTrackingView",
-  "category": "keyboard",
+  "category": "infra",
   "description": "A UI component that enables 'keyboard tracking' for this view and it's sub-views.\nWould typically be used when you have a TextField or TextInput inside this view.",
   "note": "This view is useful only for iOS.",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js",

lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json

@@ -1,6 +1,6 @@
 {
   "name": "KeyboardAwareInsetsView",
-  "category": "keyboard",
+  "category": "infra",
   "description": "Used to add an inset when a keyboard is used and might hide part of the screen.",
   "note": "This view is useful only for iOS.",
   "extends": ["keyboard/KeyboardTrackingView"],

scripts/buildDocs.js

@@ -3,6 +3,7 @@ const childProcess = require('child_process');
 const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
+const VALID_CATEGORIES = ['foundation', 'assets', 'navigation', 'layout', 'controls', 'status', 'media', 'lists', 'form', 'dateTime', 'overlays', 'charts', 'incubator', 'infra'];
 
 const result = childProcess.execSync('find ./src ./lib/components -name "*api.json"');
 const apiFiles = result.toString().trim().split('\n');
@@ -25,6 +26,10 @@ components.forEach(component => {
   const isParentComponent = parentComponents.includes(componentName);
   const isIncubatorComponent = component.category === 'incubator';
 
+  if (!VALID_CATEGORIES.includes(component.category)) {
+    console.error(`${componentName} has invalid category "${component.category}"`);
+  }
+
   let content = '';
 
   /* Markdown Front Matter */
@@ -40,7 +45,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) {
@@ -66,8 +71,8 @@ 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';
@@ -95,10 +100,10 @@ components.forEach(component => {
   const dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
 
   if (!fs.existsSync(dirPath)) {
-    fs.mkdirSync(dirPath, {recursive: true});
+    fs.mkdirSync(dirPath, { recursive: true });
   }
 
-  fs.writeFileSync(`${dirPath}/${component.name}.md`, content, {encoding: 'utf8'});
+  fs.writeFileSync(`${dirPath}/${component.name}.md`, content, { encoding: 'utf8' });
 });
 
 function getComponentNameParts(componentName) {

src/components/actionBar/actionBar.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ActionBar",
-  "category": "basic",
+  "category": "controls",
   "description": "Quick actions bar, each action support Button component props",
   "extends": ["basic/View"],
   "modifiers": ["margin", "padding"],

src/components/animatedImage/animatedImage.api.json

@@ -1,6 +1,6 @@
 {
   "name": "AnimatedImage",
-  "category": "basic",
+  "category": "media",
   "description": "Image component that fades-in the image with animation once it's loaded",
   "extends": ["basic/Image"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AnimatedImageScreen.js",

src/components/animatedScanner/animatedScanner.api.json

@@ -1,6 +1,6 @@
 {
   "name": "AnimatedScanner",
-  "category": "basic",
+  "category": "media",
   "description": "description",
   "extends": ["Animated.View"],
   "extendsLink": ["https://reactnative.dev/docs/animated"],

src/components/avatar/avatar.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Avatar",
-  "category": "basic",
+  "category": "media",
   "description": "Avatar component for displaying user profile images",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true",

src/components/badge/badge.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Badge",
-  "category": "basic",
+  "category": "status",
   "description": "Round colored badge, typically used to show a number",
   "extends": ["basic/TouchableOpacity", "basic/View"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx",

src/components/button/button.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Button",
-  "category": "basic",
+  "category": "controls",
   "description": "Customizable button component that handles press events",
   "extends": ["basic/TouchableOpacity"],
   "modifiers": ["margin", "background"],

src/components/card/card.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Card",
-  "category": "basic",
+  "category": "layout",
   "description": "Customizable card component that handles press events",
   "extends": ["basic/TouchableOpacity"],
   "modifiers": ["margin", "padding"],

src/components/card/cardImage.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Card.Image",
-  "category": "basic",
+  "category": "layout",
   "description": "Inner component for the Card component (better be a direct child)",
   "extends": ["basic/Image"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",

src/components/card/cardSection.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Card.Section",
-  "category": "basic",
+  "category": "layout",
   "description": "Inner component for rendering content easily inside a Card component",
   "extends": ["basic/View"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",

src/components/carousel/carousel.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Carousel",
-  "category": "basic",
+  "category": "layout",
   "description": "Carousel for scrolling pages",
   "extends": ["ScrollView"],
   "extendsLink": ["https://reactnative.dev/docs/scrollview"],

src/components/checkbox/checkbox.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Checkbox",
-  "category": "form",
+  "category": "controls",
   "description": "Checkbox component for toggling boolean value related to some context",
   "extends": ["basic/TouchableOpacity"],
   "modifiers": ["margin", "background"],

src/components/chip/chip.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Chip",
-  "category": "basic",
+  "category": "controls",
   "description": "Chip component",
   "extends": ["TouchableOpacity", "View"],
   "extendsLink": [

src/components/connectionStatusBar/connectionStatusBar.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ConnectionStatusBar",
-  "category": "basic",
+  "category": "status",
   "description": "Top bar to show a 'no internet' connection status",
   "note": [
     "Run on real device for best results",

src/components/drawer/drawer.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Drawer",
-  "category": "basic",
+  "category": "lists",
   "description": "Drawer Component",
   "note": "If your app works with RNN, your screen must be wrapped with gestureHandlerRootHOC from 'react-native-gesture-handler'. see: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",

src/components/expandableSection/expandableSection.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ExpandableSection",
-  "category": "basic",
+  "category": "infra",
   "description": "Component to render expanded section below or above the SectionHeader",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx",
   "images": [

src/components/fader/fader.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Fader",
-  "category": "layoutsAndTemplates",
+  "category": "infra",
   "description": "A gradient fading overlay to render on top of overflowing content (like scroll component)",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FaderScreen.tsx",
   "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Fader/Fader.gif?raw=true"],

src/components/gridList/gridList.api.json

@@ -1,6 +1,6 @@
 {
   "name": "GridList",
-  "category": "layoutsAndTemplates",
+  "category": "lists",
   "description": "An auto-generated grid list that calculate item size according to given props",
   "extends": ["FlatList"],
   "extendsLink": ["https://reactnative.dev/docs/flatlist"],

src/components/gridListItem/gridListItem.api.json

@@ -1,6 +1,6 @@
 {
   "name": "GridListItem",
-  "category": "layoutsAndTemplates",
+  "category": "lists",
   "description": "A single grid view/list item component",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
   "props": [

src/components/gridView/gridView.api.json

@@ -1,6 +1,6 @@
 {
   "name": "GridView",
-  "category": "layoutsAndTemplates",
+  "category": "lists",
   "description": "An auto-generated grid view that calculate item size according to given props",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
   "props": [

src/components/icon/icon.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Icon",
-  "category": "basic",
+  "category": "media",
   "description": "Icon component",
   "extends": ["Image"],
   "extendsLink": ["https://reactnative.dev/docs/image"],

src/components/image/image.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Image",
-  "category": "basic",
+  "category": "media",
   "description": "Image wrapper with extra functionality like source transform and assets support",
   "extends": ["Image"],
   "extendsLink": ["https://reactnative.dev/docs/image"],

src/components/listItem/listItem.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ListItem",
-  "category": "basic",
+  "category": "lists",
   "description": "List item component to render inside a List component",
   "extends": ["TouchableOpacity"],
   "extendsLink": ["https://reactnative.dev/docs/touchableopacity"],

src/components/listItem/listItemPart.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ListItem.Part",
-  "category": "basic",
+  "category": "lists",
   "description": "A sub ListItem component for layout-ing inside a ListItem",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx",
   "images": ["https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif"],

src/components/loaderScreen/loaderScreen.api.json

@@ -1,6 +1,6 @@
 {
   "name": "LoaderScreen",
-  "category": "layoutsAndTemplates",
+  "category": "layout",
   "description": "Component that shows a full screen with an activity indicator",
   "extends": ["ActivityIndicator"],
   "extendsLink": ["https://reactnative.dev/docs/activityindicator"],

src/components/modal/api/modal.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Modal",
-  "category": "layoutsAndTemplates",
+  "category": "overlays",
   "description": "Component that present content on top of the invoking screen",
   "extends": ["Modal"],
   "extendsLink": ["https://reactnative.dev/docs/modal"],

src/components/modal/api/modalTopBar.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Modal.TopBar",
-  "category": "layoutsAndTemplates",
+  "category": "overlays",
   "description": "Modal.TopBar, inner component for configuring the Modal component's title, buttons and statusBar",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
   "images": ["https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif"],

src/components/overlay/overlay.api.json

@@ -1,6 +1,6 @@
 {
   "name": "Overlay",
-  "category": "basic",
+  "category": "infra",
   "description": "Overlay view with types",
   "extends": ["Image"],
   "extendsLink": ["https://reactnative.dev/docs/image"],

src/components/pageControl/pageControl.api.json

@@ -1,6 +1,6 @@
 {
   "name": "PageControl",
-  "category": "basic",
+  "category": "navigation",
   "description": "Page indicator, typically used in paged scroll-views",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
   "images": ["https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"],

src/components/progressBar/progressBar.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ProgressBar",
-  "category": "basic",
+  "category": "status",
   "description": "Progress bar",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx",
   "props": [

src/components/progressiveImage/progressiveImage.api.json

@@ -1,6 +1,6 @@
 {
   "name": "ProgressiveImage",
-  "category": "basic",
+  "category": "media",
   "description": "Image component that loads first a small thumbnail of the images, and fades-in the full-sized image with animation once it's loaded",
   "extends": ["basic/AnimatedImage"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js",

src/components/radioButton/radioButton.api.json

@@ -1,6 +1,6 @@
 {
   "name": "RadioButton",
-  "category": "form",
+  "category": "controls",
   "description": "A Radio Button component, should be wrapped with a RadioGroup",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
   "images": [

src/components/radioGroup/radioGroup.api.json

@@ -1,6 +1,6 @@
 {
   "name": "RadioGroup",
-  "category": "form",
+  "category": "controls",
   "description": "Wrap a group of Radio Buttons to automatically control their selection",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
   "images": [

src/components/skeletonView/skeletonView.api.json

@@ -1,6 +1,6 @@
 {
   "name": "SkeletonView",
-  "category": "layoutsAndTemplates",
+  "category": "status",
   "description": "Allows showing a temporary skeleton view while your real view is loading",
   "modifiers": ["margin"],
   "note": "Requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' libraries",