feat: Display endpoint method and icons for schema and API (#195)

* feat: toc group item and icons

* fix: collapsing nested items

* fix: storybook icons

* chore: update fixture

* chore: more margin

* chore: cleanup

Author: Jakub Jankowski

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<!-- .storybook/preview-head.html -->
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

src/TableOfContents/index.tsx

@@ -19,6 +19,8 @@ export type TableOfContentsItem = {
   icon?: FAIconProp;
   activeIcon?: FAIconProp;
   iconColor?: string;
+  iconPosition?: 'left' | 'right';
+  textIcon?: string;
   isLoading?: boolean;
   isDisabled?: boolean;
   showSkeleton?: boolean;
@@ -107,13 +109,24 @@ function TableOfContentsInner<T extends TableOfContentsItem = TableOfContentsIte
 
   // an array of functions. Invoking the N-th function toggles the expanded flag on the N-th content item
   const toggleExpandedFunctions = React.useMemo(() => {
-    return range(contents.length).map(i => () =>
-      setExpanded(current => ({
-        ...current,
-        [i]: !current[i],
-      })),
-    );
-  }, [contents.length]);
+    return range(contents.length).map(i => () => {
+      setExpanded(current => {
+        let childrenToCollapse = {};
+        if (current[i]) {
+          const item = contents[i];
+          const children = findDescendantIndices(item.depth ?? 0, i, contents.slice(i + 1));
+          childrenToCollapse = Object.fromEntries(children.map(i => [i, false]));
+        }
+
+        return {
+          ...current,
+          [i]: !current[i],
+          ...childrenToCollapse,
+        };
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contents, contents.length]);
 
   // expand ancestors of active items by default
   React.useEffect(() => {
@@ -203,6 +216,7 @@ export function TableOfContents<T extends TableOfContentsItem = TableOfContentsI
 
 function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggleExpanded }: RowComponentProps<T>) {
   const isGroup = item.type === 'group';
+  const isGroupItem = isGroup && isTableOfContentsLink(item);
   const isChild = item.type !== 'group' && (item.depth ?? 0) > 0;
   const isDivider = item.type === 'divider';
   const showSkeleton = item.showSkeleton;
@@ -239,7 +253,7 @@ function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggl
           return;
         }
 
-        if (!isGroup) return;
+        if (!isGroup || isGroupItem) return;
 
         e.preventDefault();
         toggleExpanded();
@@ -290,6 +304,27 @@ function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggl
     />
   ) : null;
 
+  const iconElem = icon ? (
+    <FAIcon
+      className={cn('fa-fw', {
+        'mr-3': item.iconPosition !== 'right',
+        'mx-1': item.iconPosition === 'right',
+        'text-blue-6': isSelected,
+        [`text-${item.iconColor}`]: item.iconColor,
+        'bp3-skeleton': item.showSkeleton,
+      })}
+      icon={icon}
+    />
+  ) : item.textIcon ? (
+    <div
+      className={cn('text-right rounded px-1 text-xs uppercase', {
+        [`text-${item.iconColor}`]: item.iconColor,
+      })}
+    >
+      {item.textIcon}
+    </div>
+  ) : null;
+
   return (
     <div
       onClick={onClick}
@@ -299,12 +334,7 @@ function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggl
     >
       <div className={cn('-ml-px', innerClassName, { 'opacity-75': isDisabled })}>
         <div className="flex flex-row items-center">
-          {icon && (
-            <FAIcon
-              className={cn('mr-3 fa-fw', { 'text-blue-6': isSelected, 'bp3-skeleton': item.showSkeleton })}
-              icon={icon}
-            />
-          )}
+          {item.iconPosition !== 'right' && iconElem}
 
           <span className={cn('TableOfContentsItem__name flex-1 truncate', { 'bp3-skeleton': item.showSkeleton })}>
             {item.name}
@@ -313,11 +343,11 @@ function DefaultRowImpl<T extends TableOfContentsItem>({ item, isExpanded, toggl
           {item.meta && <span className="text-sm text-left text-gray font-medium">{item.meta}</span>}
           {loadingElem}
           {actionElem}
+          {item.iconPosition === 'right' && iconElem}
           {isGroup && (
-            <FAIcon
-              className="TableOfContentsItem__icon"
-              icon={['far', isExpanded ? 'chevron-down' : 'chevron-right']}
-            />
+            <div onClick={isGroupItem ? toggleExpanded : undefined} className="px-2">
+              <FAIcon className="TableOfContentsItem__icon" icon={isExpanded ? 'chevron-down' : 'chevron-right'} />
+            </div>
           )}
         </div>
         {item.footer}
@@ -354,6 +384,23 @@ function findAncestorIndices(currentDepth: number, precedingContents: TableOfCon
   ];
 }
 
+function findDescendantIndices(
+  currentDepth: number,
+  currentIndex: number,
+  succeedingContents: TableOfContentsItem[],
+): number[] {
+  const children: number[] = [];
+  for (let index = 0; index < succeedingContents.length; index++) {
+    if ((succeedingContents[index].depth ?? 0) <= currentDepth) {
+      break;
+    } else {
+      children.push(currentIndex + index);
+    }
+  }
+
+  return children;
+}
+
 function isExternalLink(item: TableOfContentsItem): boolean {
   return isTableOfContentsLink(item) && item.to !== void 0 && /^(http|#|mailto)/.test(item.to);
 }

src/__fixtures__/table-of-contents/tree.ts

@@ -0,0 +1,55 @@
+import { ITableOfContentsLink } from '../../TableOfContents';
+
+export const tree: ITableOfContentsLink[] = [
+  {
+    name: 'Tree',
+    depth: 0,
+    type: 'divider',
+  },
+  {
+    name: 'Group with link',
+    depth: 0,
+    type: 'group',
+    to: '/path',
+    icon: 'cloud',
+  },
+  {
+    name: 'Nested Item with text icon',
+    depth: 1,
+    type: 'item',
+    textIcon: 'ONE',
+    iconColor: 'red',
+    iconPosition: 'right',
+  },
+  {
+    name: 'Nested Group',
+    depth: 1,
+    type: 'group',
+  },
+  {
+    name: 'Nested Group',
+    depth: 2,
+    type: 'group',
+  },
+  {
+    name: 'Nested Item',
+    depth: 3,
+    type: 'item',
+    textIcon: 'TWO',
+    iconColor: 'blue',
+    iconPosition: 'right',
+  },
+  {
+    name: 'Nested Group',
+    depth: 1,
+    type: 'group',
+  },
+  {
+    name: 'Nested Item',
+    depth: 2,
+    type: 'item',
+    textIcon: 'THREE',
+    iconColor: 'green',
+    iconPosition: 'left',
+  },
+];

src/__stories__/TableOfContents/index.tsx

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
 import { studioContents } from '../../__fixtures__/table-of-contents/studio';
+import { tree } from '../../__fixtures__/table-of-contents/tree';
 import { DefaultRow, ITableOfContentsLink, RowComponentType, TableOfContents } from '../../TableOfContents';
 
 const styles = {
@@ -29,6 +30,13 @@ storiesOf('TableOfContents', module)
       </div>
     );
   })
+  .add('nested tree', () => {
+    return (
+      <div style={styles}>
+        <TableOfContents className="h-full" contents={tree} />
+      </div>
+    );
+  })
   .add('mobile', () => {
     return <MobileStory />;
   });