Extract TableOfContents component to UI-Kit

[lottamus]

Chore summary

We're starting to use the TableOfContents component in more places than just Docs, so it makes sense for us to make it a bit more generic and move it to @stoplight/ui-kit. BUT we should keeps the parts of the TableOfContents components that deal with Project nodes in this repo (see below).

Tasks

• Move the ITableOfContents interface to ui-kit and remove the items prop:

export interface ITableOfContents {
- // List of items that will be computed into the tree structure
-  items?: IProjectNode[];

  contents: IContentsNode[];

  // Padding that will be used for (default: 10)
  padding?: string;
  className?: string;

  // Title of project
  title?: string;

  // Controls for the drawer functionality on mobile
  isOpen?: boolean;
  onClose?: () => void;

  // Mobile breakpoint, default (true) is 786px, false disables Drawer
  enableDrawer?: boolean | number;
}

• Copy the TableOfContents component to ui-kit and update it to use the interface described above:
  https://github.com/stoplightio/elements/blob/master/src/components/TableOfContents.tsx
• Update Element's TableOfContents component to be a light wrapper around the one you just moved into ui-kit: It should look something like this:

import { TableOfContents as UIKitTableOfContents } from '@stoplight/ui-kit';

export const TableOfContents: React.FunctionComponent<ITableOfContents> = ({
  items,
  srn,
  ...props,
}) => {
  const contents = useComputeToc(items, srn);
  return <TableOfContents contents={contents} {...props}  />
};

• On IContentsNode, replace the srn prop with isActive and add an optional href prop:

export interface IContentsNode {
  name: string;
  depth: number;
-  srn?: string;
+ isActive?: boolean;
+ href?: string;
  type?: 'divider' | 'group';
}

• Update useComputeToc to take "srn" as an optional second argument: https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeToc.tsx#L12

export function useComputeToc(nodes: IProjectNode[], srn?: string) {

• Update useComputeToc to add the isActive boolean to the node with the matching srn
  Here's an example: https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeToc.tsx#L68-L71

contents.push({
  name: node.name,
-  srn: node.srn,
+ isActive: srn === node.srn,
+ href: srn,
  depth: parts.length - 1,
});

Example: (note the addition of "href" and the "isActive" prop to the last Github)

<TableOfContentsComponent
  contents={[
    {
      name: "Personal",
      depth: 0,
      type: "divider",
    },
    {
      name: "My Projects",
      depth: 0,
      icon: "star",
      href: '/projects/username',
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
      href: '/projects/username/github',
    },
    {
      name: "Stoplight Next",
      depth: 0,
      icon: "gitlab",
      href: '/projects/username/stoplight-next',
    },
    {
      name: "SendGrid",
      depth: 0,
      type: "divider"
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
      href: '/projects/sendgrid/github',
    },
    {
      name: "Stoplight Next",
      depth: 0,
      icon: "gitlab",
      href: '/projects/sendgrid/stoplight-next',
    },
    {
      name: "XYZ Corp",
      depth: 0,
      type: "divider"
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
      isActive: true,
      href: '/projects/xyz-corp/github',
    }
  ]}
/>

Result: