feat(docs): group pages to sections

packages/docs/components/navigation/components-navigation.json

@@ -1 +1 @@
-["Ansible","AppInfo","AsyncInventory","Battery","Breadcrumbs","BulkSelect","Checkbox","ConditionalFilter","ConnectedBreadcrumbs","CriticalBattery","CriticalIcon","CullingInformation","DarkContext","DateFormat","DefaultErrorMessage","DetailWrapper","DownloadButton","EmptyTable","ErrorState","FilterChips","FilterDropdown","FilterInput","Group","helper","HighBattery","icon-404","Input","InsightsLabel","InvalidObject","InventoryDetail","InventoryDetailHead","InventoryTable","LabeledInput","LongTextTooltip","LowBattery","Maintenance","MediumBattery","NotAuthorized","NullBattery","PageHeader","PageHeaderTitle","Pagination","PaginationMenu","PaginationNav","PaginationNext","PrimaryToolbar","Radio","Reboot","rowWrapper","Section","Shield","SimpleTableFilter","Skeleton","SkeletonTable","SortBy","Spinner","TabLayout","TableToolbar","TableWithFilter","TagCount","TagModal","TagWithDialog","Text","Truncate","Unavailable","Wizard"]
+[{"group":"Ansible","items":["Ansible"]},{"group":"Battery","items":["Battery","CriticalBattery","HighBattery","LowBattery","MediumBattery","NullBattery"]},{"group":"Breadcrumbs","items":["Breadcrumbs","ConnectedBreadcrumbs"]},{"group":"BulkSelect","items":["BulkSelect"]},{"group":"ConditionalFilter","items":["CheckboxFilter","ConditionalFilter","GroupFilter","RadioFilter","TextFilter"]},{"group":"CullingInfo","items":["CullingInformation"]},{"group":"Dark","items":["DarkContext"]},{"group":"DateFormat","items":["DateFormat","helper"]},{"group":"DownloadButton","items":["DownloadButton"]},{"group":"EmptyTable","items":["EmptyTable"]},{"group":"ErrorState","items":["DefaultErrorMessage","ErrorState"]},{"group":"FilterChips","items":["FilterChips"]},{"group":"Filters","items":["FilterDropdown","FilterInput"]},{"group":"Input","items":["Input","LabeledInput"]},{"group":"InsightsLabel","items":["CriticalIcon","InsightsLabel"]},{"group":"InvalidObject","items":["icon-404","InvalidObject"]},{"group":"Inventory","items":["AppInfo","AsyncInventory","DetailWrapper","InventoryDetail","InventoryDetailHead","InventoryTable","TagWithDialog"]},{"group":"LongTextTooltip","items":["LongTextTooltip"]},{"group":"Maintenance","items":["Maintenance"]},{"group":"NotAuthorized","items":["NotAuthorized"]},{"group":"PageHeader","items":["PageHeader","PageHeaderTitle"]},{"group":"Pagination","items":["Pagination","PaginationMenu","PaginationNav","PaginationNext"]},{"group":"PrimaryToolbar","items":["PrimaryToolbar","SortBy"]},{"group":"Reboot","items":["Reboot"]},{"group":"Section","items":["Section"]},{"group":"Shield","items":["Shield"]},{"group":"SimpleTableFilter","items":["SimpleTableFilter"]},{"group":"Skeleton","items":["Skeleton"]},{"group":"SkeletonTable","items":["SkeletonTable"]},{"group":"Spinner","items":["Spinner"]},{"group":"TabLayout","items":["TabLayout"]},{"group":"TableToolbar","items":["TableToolbar"]},{"group":"TagCount","items":["TagCount"]},{"group":"TagModal","items":["TableWithFilter","TagModal"]},{"group":"TreeTable","items":["rowWrapper"]},{"group":"Truncate","items":["Truncate"]},{"group":"Unavailable","items":["Unavailable"]},{"group":"Wizard","items":["Wizard"]}]

packages/docs/components/navigation/index.js

@@ -1,7 +1,7 @@
 import data from './components-navigation.json';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavGroup, NavItem, NavList } from '@patternfly/react-core';
 import classnames from 'classnames';
 
 const Navigation = () => {
@@ -10,25 +10,30 @@ const Navigation = () => {
         <Nav ouiaId="docs-nav">
             <NavList>
                 <NavExpandable ouiaId="components" id="components" title="Components" isExpanded={pathname.includes('/components')}>
-                    {data.map(name => (
-                        <NavItem
-                            id={`/components/${name}`}
-                            to={`/components/${name}`}
-                            ouiaId={`/components/${name}`}
-                            key={name}
-                            component={({ children, ...props }) => (
-                                <Link {...props}>
-                                    <a className={classnames('pf-c-nav__link', {
-                                        // eslint-disable-next-line react/prop-types
-                                        'pf-m-current': props.href === pathname
-                                    })}>
-                                        {children}
-                                    </a>
-                                </Link>
-                            )}
-                        >
-                            {name}
-                        </NavItem>))}
+                    {data.map(({ group, items }) => (
+                        <NavGroup key={group} title={group}>
+                            {items.map(name => (
+                                <NavItem
+                                    id={`/components/${name}`}
+                                    to={`/components/${name}`}
+                                    ouiaId={`/components/${name}`}
+                                    key={name}
+                                    component={({ children, ...props }) => (
+                                        <Link {...props}>
+                                            <a className={classnames('pf-c-nav__link', {
+                                            // eslint-disable-next-line react/prop-types
+                                                'pf-m-current': props.href === pathname
+                                            })}>
+                                                {children}
+                                            </a>
+                                        </Link>
+                                    )}
+                                >
+                                    {name}
+                                </NavItem>
+                            ))}
+                        </NavGroup>
+                    ))}
                 </NavExpandable>
             </NavList>
         </Nav>

packages/docs/docs-generator.js

@@ -190,13 +190,32 @@ ${extensiveProps.map((data) => {
     return fse.writeFile(`${componentsDest}/${name}.md`, content);
 }
 
+function generateComponentsNavigation(components) {
+    const nav = Object.keys(components).reduce((nav, path) => {
+        let fragments = path.split('/');
+        const navName = fragments.pop().replace('.js', '');
+        const groupName = fragments.pop();
+        return {
+            ...nav,
+            [groupName]: [
+                ...nav[groupName] || [],
+                navName
+            ]
+        };
+    }, {});
+    return Object.entries(nav).map(([ key, value ]) => ({
+        group: key,
+        items: value.sort((a, b) => a.localeCompare(b))
+    })).sort((a, b) => a.group.localeCompare(b.group));
+}
+
 async function traverseComponents() {
     const components = fse.readJSONSync(path.resolve(__dirname, COMPONENTS_JSON));
     const foo = Object.entries(components);
     const cmds = foo.map(([ name, API ]) => {
         return generateMD(name, API);
     });
-    const componentsNav = Object.keys(components).map(key => key.split('/').pop().replace('.js', '')).sort((a, b) => a.localeCompare(b));
+    const componentsNav = generateComponentsNavigation(components);
     fse.writeJsonSync(`${navDest}/components-navigation.json`, componentsNav);
     return Promise.all(cmds);
 }