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",