Overhaul the current way Stoplight.io blog and blogposts are rendered

• Rely on first iteration of component catalogue to update all components involved with showing a blog post (hero, md file, related pages, etc.)
• Rework Netlify-dependent configuration so that all naming conventions are specified, standardized, and clear to anyone working in Admin portal (use more robust help text and correct assignment of required parameters to accomplish this)

User story.
As a developer, I can use @stoplight/elements without needing to compile the SCSS files myself.

Is your feature request related to a problem?
BigCommerce and PagerDuty are using these React components in their GatsbyJS sites. Prior to v5, we were compiling the SCSS files into a single CSS bundle that they are including in their build.

Describe the solution you'd like
Compile the SCSS files to CSS using node-sass or similar.

User story.

As a user, I can view the server variables defined by the http service, so that I can use the default value and enums when making requests.

Describe the solution you'd like

When looping over the http service's servers, we should also display all of the server variables with the description, default value, and enums.

For the UI, I suggest putting the server variables in a table underneath the server.

For example:

My Server - https://{subdomain}.example.com/{baseUrl}

this is the server's description

https://github.com/stoplightio/elements/blob/master/src/components/HttpService/index.tsx#L29-L36

Additional Context

• Needs stoplightio/http-spec#53

What's an IIFE? https://en.wikipedia.org/wiki/Immediately_invoked_function_expression

• update rollup config to include IIFE: https://rollupjs.org/guide/en/#core-functionality
• update build step to compile scss to css
• add small JS API for rendering Page and TableOfContents components via IIFE bundle
• docs

Sentry Issue: STUDIO-DESKTOP-20

Error: ResizeObserver loop limit exceeded
  at None (/docs-preview/gh/stoplightio/studio)

ResizeObserver is being in Elements by @rehooks/component-size: https://github.com/stoplightio/elements/blob/master/src/components/Docs.tsx#L4

Description

Here's a similar issue in a library that is also using ResizeObserver: souporserious/react-measure#104. They fixed the issue by canceling the animation frame when the component is unmounted: https://github.com/souporserious/react-measure/pull/118/files#diff-2e71677d1028fc71469e53aa449f42d5R41

Expected

To fix the issue, we likely need to fork the @rehooks/component-size repo, wrap the following lines in a requestAnimationFrame and cancel the animation when the component is unmounted:
https://github.com/rehooks/component-size/blob/master/index.js#L49-L52

Chore summary

There are some edge cases that are not being handled properly.

https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeToc.tsx#L16

Tasks

• Add a test case using the Studio repo

Describe the bug

When navigating between pages, you are left at the same scroll position rather than being scrolled back to the top of the page. This is because the Page component is using a ScrollContainer which has a special scrollToTop function we're not utilizing: https://github.com/xobotyi/react-scrollbars-custom#instance-methods

To Reproduce

1. Open Prism docs: https://stoplight.io/p/docs/gh/stoplightio/prism
2. Scroll to the bottom of the content
3. Click to another page in the sidebar
4. Notice you're still at the bottom of the page

Expected behavior

You should be scrolled to the top of the page on navigation

Screenshots

Additional context

Here's where the scroll container lives: https://github.com/stoplightio/elements/blob/master/src/components/Page.tsx#L138-L148

Suggest updating the ScrollContainerWrapper to grab the react-scrollbars-custom instance and call instance.scrollToTop() whenever the Page srn changes.

Could look something like this:

const ScrollContainerWrapper: React.FunctionComponent<{
  srn?: string;
  scrollInnerContainer?: boolean;
  shadows?: boolean;
}> = ({ srn, scrollInnerContainer, children, shadows = false }) => {
  const [scrollbarInstance, setScrollbarInstance] = React.useState();

  React.useEffect(() => {
    if (scrollbarInstance) {
      scrollbarInstance.scrollToTop();
    }
  }, [scrollbarInstance, srn]);

  if (!scrollInnerContainer) {
    return <>{children}</>;
  }

  return (
    <ScrollContainer
      ref={ref => {
        setScrollbarRef(ref);
      }}
      shadows={shadows}
    >
      {children}
    </ScrollContainer>
  );
};

User story.
As a user, I can pass a specific group to the Container components, so that the correct group's data is fetched.

Describe the solution you'd like

• Update the Container components to take an optional "group" property
• Update the data hooks to take an optional "group" argument
• Update the widgets to take an additional group property

User story.
As a users, I can see a dropdown containing all the versions of the current node, so that I can navigate between them.

Describe the solution you'd like

We allow users to create multiple versions of a given node via a version number in the file path.

For example, imagine you have the following two files:

/error.v1.yaml
/error.v2.yaml

The analyzer will create a single "node" with two versions. The result will look something like:

{
  baseUri: "/error.yaml",
  version: "2",
  versions: [
    {
        uri: "error.v2.yaml",
        version: "2",
    },
    {
        uri: "error.v1.yaml",
        version: "1",
    },
  ]
}

Describe the solution you'd like

Similar to what we do in Platform Explorer's NodeReadView component, let's copy the following code over to Docs and render it in the PageHeader component. Once the code has been moved over to the PageHeader, we can remove it from the Explorer's NodeReadView.

• Docs Page Header:

  elements/src/components/Page/Header.tsx

  Line 26 in 380fc5f

  <div className={className}>

• Relevant Explorer code: https://github.com/stoplightio/platform-internal/blob/develop/packages/frontend/components/Explorer/NodeReadView.tsx#L222-L231

Keep in mind you won't be able to copy over the version selector's "onChange" handler since it will be different in Docs. We will likely need some way to pass an onChangeSrn handler into the Provider component OR maybe we can use the useComponents() hook to get the link component?.

• Update getEdgesFromRefMap to take activeNodeId:

function getEdgesFromRefMap(nodeId: string, activeNodeId: string; refMap: IGraphNodeData['refMap']): IVisGraphEdge[]

• Only show edge labels for the active node: https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeVisGraph.tsx#L80
• Only show the first property in the edge map and display the rest as a number such as property + 5
• Add title property to each edge. The title should list all of the edge map labels
• Add color to the edges for the active node: https://visjs.github.io/vis-network/docs/network/edges.html
• Only display nodes that have at least one edge: https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeVisGraph.tsx#L33

To Reproduce

1. Open the Request Maker -> with operation story
2. Navigate to the Headers tab
3. Click the name column in an empty row.
4. Type asd.
5. Hit ENTER or click the set custom... option.
6. Navigate to the Body tab and back.

Expected behavior
The asd header still in the list.

Actual behavior
The name asd is gone, there is only an empty row.

Describe the bug

We have logic in place to redirect your to the first node if you land on the root of the docs. We should update this logic to also redirect you if you land on "/": https://github.com/stoplightio/elements/blob/master/src/containers/Hub.tsx#L29-L37

To Reproduce

1. Open http://stoplight.io/p/docs/gh/stoplightio/studio-demo/
2. Notice the slash at the end of the URL
3. Notice you land on a "not found" page

Expected behavior

1. Open https://stoplight.io/p/docs/gh/stoplightio/studio-demo
2. Notice there's no slash at the end of the URL
3. Notice you land on the first node

This is the expected behavior when the "uri" property is both empty or "/"

v6

Architecture

Everything must be wrapped in the <Provider /> container. It provides the rest of the components with important information such as:

• Stoplight API host
• current workspace, project, branch and uri
• current node data

All data fetching should happen within the Container components which feed data into the Components for rendering. This allows users to simply render the Container components without needing to make any API requests. Alternatively if they are making the API calls themselves (link in Platform), they can pass that information directly into the Components for rendering.

Containers

React components that communicate with the Stoplight API and feed data into the dumb components for rendering

/src/containers/Changelog
/src/containers/Dependencies
/src/containers/Docs
/src/containers/Provider
/src/containers/RequestMaker
/src/containers/Search
/src/containers/TableOfContents

Components

Dumb components that receive data and render

/src/components/Changelog
/src/components/Content
/src/components/Dependencies/Inbound
/src/components/Dependencies/Outbound
/src/components/Docs/Article
/src/components/Docs/HttpOperation
/src/components/Docs/HttpService
/src/components/Docs/Model
/src/components/RequestMaker
/src/components/Search
/src/components/Tab
/src/components/TableOfContents

Layout

<Provider 
  workspace="bigcommerce.stoplight.io" 
  project="dev-docs" 
  uri="reference/bigcommerce_subscribers_api.oas2.yml"
>
  <div className='flex'>
    <TableOfContents filter={{ startsWith: "reference" }} />

    <Content className='flex-1'>
      <Tab title="Docs">
        <Docs />
      </Tab>

      <Tab title="Try It" filter={{ type: "http_operation" }}>
        <RequestMaker />
      </Tab>

      <Tab title="Dependencies" filter={{ type: "model" }}>
        <Dependencies />
      </Tab>

      <Tab title="Changelog" >
        <Changelog />
      </Tab>
    </Content>
  </div>
</Provider>

Theming

isEnabled for header parameters (well for all the parameters) being optional is very weird. It's either true or false and users shall always explicitly set it.

Originally posted by @XVincentX in #258

From customer (ticket here):

The other issue I'm seeing is that the TableOfContents disappears on mobile devices. I thought this was maybe my site doing this magically but the entire element is removed from the page when the width hits the mobile media width. Not sure what is happening there.

Is this a known issue?

There are way too many components that render request-makers.

To make things worse, HttpRequest has the same TryIt displayName, so it can be really hard to know which one we're using at the moment.

Their props are similar but somewhat different.

You can get the consumes/produces from http operation's request/response mediatypes: https://github.com/stoplightio/types/blob/master/src/http-spec.ts#L130

Here is an example of where they could go OR we could simply list them above the schema:

Chore summary

Soon our customers will need documentation for the components in this repo. We can utilize Storybook to help too

Tasks

• Get storybook rendering in GitHub Pages again
• Clean it up so it is presentable to customers

User story.
As a docs reader, I can view the outbound dependencies for the current model.

Is your feature request related to a problem?
Customers want to be able to see how their model is connected to other models in their Org.

Describe the solution you'd like
When viewing a model, there should be another tab called "Dependencies" that shows a tree of outbound dependencies.

Additional context
You should be able to enable/disable the Dependencies tab by passing in a prop to the <Page /> component.

This issue is limited to outbound dependencies though in the future we will likely add inbound dependencies and add this tab for operations, articles, etc.

If I go to the headers tab and I write an header — when I tab I expect to go to the value text box — instead it goes on a different place and it kind of destroys the flow.

It works ok in the Query tab

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:

Describe the bug

Page TOC should highlight the item matching the current location hash

To Reproduce

1. Navigate to https://dojo-int.stoplight-dev.com/p/docs/gh/stoplightio/studio/docs/Design-and-Modeling/http-endpoints.md#avoid-cluttered-apis
2. Notice the Page TOC doesn't have anything highlighted

Expected behavior

In the above example, "Avoid Cluttered APIs" should be highlighted like so:

Description

When a user goes into fullscreen, they have a lot more space and will often zoom out to fit all the nodes in their screen. When they exit fullscreen, they are left zoomed out super far and are required to zoom back in. This is similar to the issue described here: https://github.com/stoplightio/platform-internal/issues/121#issuecomment-562262430

Reproduce

1. Open the Dependency storybook: https://stoplightio.github.io/elements/?path=/story/components-page--model
2. Zoom in and hit fullscreen
3. Notice when in fullscreen you're still zoomed in super far

Expected
When toggling fullscreen, the graph should be reset to fit the graph.

Implementation Notes
We use the following two libraries to build the graph:

• vis-network: the graph implementation
• react-graph-vis: a React wrapper around vis-network

vis-network has a function called fit() that redraws the graph to fit the screen that we can call whenever we toggle fullscreen. In order to access the vis-network, we need to pass a callback function to the getNetwork prop in react-graph-vis and set the returned value to a mutable ref using React's useRef hook.

1. Start by installing the vis-network types package. This will help with the typescript typings:

yarn add -D @types/vis

2. Import the Network typings at the top of the file Dependencies component so we can access the typings: https://github.com/stoplightio/elements/blob/master/src/components/Dependencies/index.tsx#L4

import { Network } from 'vis';

3. Retrieve the mutable ref by using React's useRef hook at the top of the Dependencies component: https://github.com/stoplightio/elements/blob/master/src/components/Dependencies/index.tsx#L72

const visNetwork = React.useRef<Network>();

4. Pass a callback function into the getNetwork property in the react-graph-vis component so that we can set the vis-network class on our mutable ref: https://github.com/stoplightio/elements/blob/master/src/components/Dependencies/index.tsx#L147-L160

      <Graph
        id={node.srn.replace(/[^a-zA-Z]+/g, '-')}
        graph={visGraph}
        events={{
          click: onClickNode,
          stabilizationProgress: (data: any) => {
            setIsStable(data.iterations);
          },
          stabilized: (data: any) => {
            setIsLoading(false);
          },
        }}
        getNetwork={(network: Network) => {
          visNetwork.current = network;
        }}
        options={visGraphOptions}
      />

5. Whenever the fullscreen toggle is clicked, call vis-network's fit() function to re-size the graph: https://github.com/stoplightio/elements/blob/master/src/components/Dependencies/index.tsx#L138-L144

        <Button
          minimal
          small
          active
          icon={<Icon icon={isFullScreen ? 'minimize' : 'fullscreen'} iconSize={10} />}
          onClick={() => {
            setIsFullScreen(!isFullScreen);

            if (visNetwork.current) {
              visNetwork.current.fit();
            }
          }}
        />

6. Test it out to make sure it works! You should be able to zoom in really far. Then clicking the fullscreen toggle should reset your graph to fit the screen.

In https://github.com/stoplightio/app-gen3/issues/399 we want to be able to use the Page component but its currently missing support for adding buttons.

Suggest updating the Page component to look something like this:

export interface IPage extends IErrorBoundary {
  type: NodeType;
  data: any;

  name?: string;
  srn?: string;
  version?: string;
  versions?: string[];

  headerRight?: React.FunctionComponent

  padding?: string;
  className?: string;
  shadows?: boolean;
  scrollInnerContainer?: boolean;
}

We will also need to support adding these buttons via the Page container too:

Chore summary

Review the breaking changes from stoplightio/types#50 and update the relevant locations

Tasks

• Update @stoplight/types to the latest 11.x release and any required changes
• Update studio-internal when the change from this PR is merged
• Update app-gen3 when the change from this PR is merged

User story.
As an API developer, it would be helpful to be able to see examples from the model view in Explorer Read Panel, Studio Read Panel, Published Docs, and Docs Preview.

Solution

Update @stoplight/elements to include tabs for each example for a Model. You can use the markdown builder to add the tabs via markdown here: https://github.com/stoplightio/elements/blob/master/src/components/Docs.tsx#L43-L56

Suggest using markdown tabs and adding "Schema" as the first tab then a tab for each example.

Here's the relevant code to update: https://github.com/stoplightio/elements/blob/master/src/components/Docs.tsx#L49

This one is super-annoying for any non-novice user (which - I'm assuming - 99% of our users are).

To reproduce

1. Launch the Storybook, navigate to components / Request Maker / with operation.
2. Go to Headers
3. Start typing "acc" into a new line's "name" cell. (as if you were trying to create an "Accept" header.
4. Verify that the "Accept" suggestion is highlighted in the popup.
5. Hit Tab to accept it.

Expected outcome

The suggestion gets accepted -> The name field gets populated with the word "Accept" and the popup disappears.

Actual outcome

The focus gets redirected to the next field in line, the value field, without accepting the suggestion, leaving "acc" in the name field. This is unexpected.

Chore summary

We have a custom hook for managing request data: https://github.com/stoplightio/elements/blob/master/src/hooks/useRequest.tsx. It works fine, but it would be nice to not worry about having to maintaining it.

I found this repo the other day which looks promising but still need to investigate if it will fit all of our needs: https://github.com/zeit/swr

Tasks

• Checkout the docs for @zeit/swr: https://github.com/zeit/swr
• Try using that library instead of our custom useRequest hook: https://github.com/stoplightio/elements/blob/master/src/hooks/useRequest.tsx

Additional context

• Needs to support making paginated requests to the /project.nodes endpoint
• Needs to support client side caching of request/response data

Issue

Because of my extensive .NET background, I was interested in what happens if I select C# in the CodeGenerator inside RequestMaker.

Unfortunately, it's bad. Not 100% useless, but maybe 95%.

1. It does not actually generate pure .NET core, but code for RestSharp, a library that most people don't use. (The built-in HttpClient class is pretty good for most use cases.)
2. It generates synchronous IO code, which has been heavily discouraged for the last ~5 years.

Proposal

Having a(n async) RestSharp option is not bad, but we definitely want a HttpClient code generator if we'd like this tool to be useful for C# developers.

And I believe the code generator is a very important feature of our RM component, so this is something to be fixed.

Problem

Now there is a problem. Kong's httpsnippet already has an open PR, that is supposed to fix this, and generate - not 100% optimal, but correct - C# code: Kong/httpsnippet#149

But that repo seems to have been abandoned, or at least not maintained well. I would really like to work on fixing this - I still like .NET 😎 - but now what do I do?

User story.

As a user reading the docs, I want to see visual cues for menu items, so that I can quickly identify them.

Is your feature request related to a problem?

Currently our sidebar does not render any additional metadata for things like operations. It's not consistent with the Studio sidebar and it's making it harder to identify operations.

This is how it looks now

Describe the solution you'd like

Render metadata next to the sidebar items:

• method label (get post etc)
• or icon (model icon, api icon etc)

Additional context

Can look similar to this:

Chore summary

TSLint is deprecated so let's switch over to ESLint

Tasks

• Follow the instructions to install Stoplight's ESLint config: https://github.com/stoplightio/eslint-config
• Remove all TSLint dependencies
• Fix any ESLint errors

Additional context

• Here's the PR where Studio switched to ESLint which can be used for reference: https://github.com/stoplightio/studio-internal/pull/1479

Describe the bug
When I click "Send" for anything in our API in "Try it" studio crashes with segfault.

To Reproduce
Happens even with the smallest version of our API: api.zip. Host is internal deployment (we don't have external facing hosts)
I suspect SSL validation: even though we use HTTPS, for test environments we need to disable SSL validation in clients.

For Petstore example "Try it" works fine.

logs:

➜ ./stoplight-studio-linux-x86_64_f5650f59acd0a03c6efb7de930c1f9b8.AppImage 
(electron) 'getName function' is deprecated and will be removed. Please use 'name property' instead.
(electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false".  It will change to be "true" in Electron 9.  For more information please check https://github.com/electron/electron/issues/18397
00:28:19.385 › Checking for update
00:28:19.432 › Generated new staging user ID: 55d69007-36a2-51b7-9bb0-3d77f797199b
00:28:20.750 › Update for version 1.10.2 is not available (latest version: 1.10.2, downgrade is allowed).
Segmentation fault (core dumped)

`/var/log/syslog/

Mar 22 00:28:42 aviskase-xps15 kernel: [24293.586531] stoplight-studi[22637]: segfault at 8 ip 0000563bc7977b4d sp 00007ffdb0437ca0 error 4 in stoplight-studio[563bc7970000+53ce000]

Environment (remove any that are not applicable):

• Studio version: 1.10.2
• OS: Ubuntu 19.10

User story.
As a user, I can tweak the request before trying it out.

Is your feature request related to a problem?

Describe the solution you'd like

The improved Try It Out component should allow changing:

• security scheme
• toggle mock on/off
• change base url (?)
• modify params (?)
• allow adding headers

Additional context

We should shrink the page toc into an icon + popover on smaller screens.

Check out https://docs.gitbook.com/getting-started/starting-a-project-on-gitbook

Large:

Small:

Customer using the elements library ran into the following issue when integrating recently:

But also, elements depends on json-ref-readers and prism-http both of which are using node's fs library, which obviously isn't served in the browser. To get around this I had to mock out the fs library so that it is returned as "empty". I did this in my webpack config.

Is this something that we should fix at the library level?

cc @lottamus

Describe the bug

Long parameter names are being cut off

To Reproduce

1. Create an operation that has a query/header parameter with a really long name

Expected behavior

The parameter name is the most important part. Let's use a table or something so the parameter name column is always the perfect width

https://github.com/stoplightio/elements/blob/master/src/components/HttpOperation/Parameters.tsx#L17

Screenshots

@marcelltoth @XVincentX I think this looks good for now though I don't think the error/warning message needs to be italic. Does it look bad if they're normal font?

I'm still leaning towards a flat list UI similar to what we're doing with the Spectral lint results. We could show the errors/warnings on the specific property lines within the code view too. We can do this later on when Studio supports "request" files though.

We should also consolidate the background colors of the "apply changes" UI in Studio with the validations background. https://github.com/stoplightio/platform-internal/blob/474c91635f611b8de60197f696824f9acad36e7a/packages/studio/src/components/ReadPanel/MarkdownComponents.tsx#L226-L238

Originally posted by @lottamus in #271 (comment)

In app-gen3 we've added support for rendering the table of contents component on mobile screens. We should pull this functionality into the TableOfContents component so it can be used in the JS widgets and by customers such as BigCommerce who are using the React components.

https://github.com/stoplightio/app-gen3/blob/0893a6107da3c6a23d6bd874183abd49779cb1ba/components/Docs/Project.tsx#L120

• When mobile is detected, return TableOfContents wrapped in a Drawer
• Drawer can be opened/controlled via a prop that is passed into the TableOfContents component. This is useful so the end user can control opening/closing the sidebar via another component such as a button in the header
• Add support for passing a title/header to be displayed at the top of the drawer

@XVincentX

@marcelltoth Speaking about headers:

if there are none, the tabs goes down and won't stay aligned with the other items

User story.
As a {user_type}, I can do {some_user_action}, so that I can {some_user_value}.

Is your feature request related to a problem?
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

User story.

As a developer using @stoplight/elements, I can use the <Search /> component, so that I can provide search to my docs.

Describe the solution you'd like

• Extract the Search Drawer from platform-internal: https://github.com/stoplightio/platform-internal/blob/e8129e6bc2ad9c3b3c121c78147d95a9493f3075/packages/frontend/components/Docs/Search.tsx#L19
• src/containers/Search.tsx should be a data container that handles fetching the nodes list from the API and passes it to the Search component
• src/components/Search.tsx should be a dumb component that receives a nodes list and renders it

Additional context

Search Container should have the following interface for props:

interface ISearchContainerProps {
  value: string;
  isOpen: boolean;
  onClose?: () => void;
  onReset?: () => void;
  srn?: string;
  group?: string;
  pinned?: boolean;
}

interface ISearchComponentProps {
  value: string;
  nodes: string;
  isOpen: boolean;
  onClose?: () => void;
  onReset?: () => void;
}

Currently our TableOfContents component doesn't support icons. We should support passing an icon mapping to the Provider and/or adding an icon directly to the contents items:

Example:

<TableOfContentsComponent
  contents={[
    {
      name: "Personal",
      depth: 0,
      type: "divider",
    },
    {
      name: "My Projects",
      depth: 0,
      icon: "star",
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
    },
    {
      name: "Stoplight Next",
      depth: 0,
      icon: "gitlab",
    },
    {
      name: "SendGrid",
      depth: 0,
      type: "divider"
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
    },
    {
      name: "Stoplight Next",
      depth: 0,
      icon: "gitlab",
    },
    {
      name: "XYZ Corp",
      depth: 0,
      type: "divider"
    },
    {
      name: "GitHub",
      depth: 0,
      icon: "github",
    }
  ]}
/>

Result:

Tasks

• Add an icons prop to IProvider that is a dictionary of NodeType to IconName: https://github.com/stoplightio/elements/blob/master/src/containers/Provider.tsx#L8

export interface IProvider {
  host?: string;
  token?: string;
  components?: IComponentMapping;
  icons?: Dictionary<IconName, NodeType>;
}

• Add an "IconsContext" to the provider component that defaults to an empty object: https://github.com/stoplightio/elements/blob/master/src/containers/Provider.tsx#L14
• Render the IconsContext.Provider with the other providers and pass it the icons prop from the Provider component: https://github.com/stoplightio/elements/blob/master/src/containers/Provider.tsx#L30-L34
• Add an optional icon prop to IContentsNode: https://github.com/stoplightio/elements/blob/master/src/types.ts#L33-L38

export interface IContentsNode {
  name: string;
  depth: number;
  srn?: string;
  type?: 'divider' | 'group';
  icon?: IconName;
}

• In the useComputeToc hook, get the icons from const icons = React.useContext(IconsContext) then when adding a node to the contents check to see if there's an icon: https://github.com/stoplightio/elements/blob/master/src/hooks/useComputeToc.tsx#L25
  Example:

contents.push({
  name: "Example",
  depth: 0,
  type: 'group',
  icon: icons[node.type]
});

• Pass the icon into the TableOfContentsItem component: https://github.com/stoplightio/elements/blob/master/src/components/TableOfContents.tsx#L99
• If an icon exists, render it to the left of the item's name: https://github.com/stoplightio/elements/blob/master/src/components/TableOfContents.tsx#L180

Proposal

When tweaking the different Prism options the Request Maker should automatically adjust the value of the Prefer header so library-based and hosted-instance-based mocking works the same.

Design considerations:

• Derived state should be avoided. I would make the header the primary "source of truth", and prismConfig would become a computed value. The switches would just call an action that changes the header.
• There is a small functional gap in the configurability of prism through HTTP. Right now there are some properties that are not configurable per-request, and this will not be addressed by the Prefer header PR. These are: Validate Request, Validate Response, Check Security. I assume these will need to be exposed through Prefer header settings, don't they?

References

• The "specs" for the Prefer header can be found here: stoplightio/prism#966
• Prefer header implementation PR: stoplightio/prism#984