@stoplight/elements 7.16.6 → 8.0.0

package/index.mjs

@@ -1,4 +1,4 @@
-import { isHttpOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, Logo, TableOfContents, PoweredByLink, SidebarLayout, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
+import { isHttpOperation, isHttpWebhookOperation, isHttpService, HttpMethodColors, DeprecatedBadge, ParsedDocs, TryItWithRequestSamples, Docs, SidebarLayout, Logo, TableOfContents, PoweredByLink, slugify, withRouter, withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider, useParsedValue, useBundleRefsIntoDocument, NonIdealState, InlineRefResolverProvider } from '@stoplight/elements-core';
 import { Box, Flex, Icon, Tabs, TabList, Tab, TabPanels, TabPanel, Heading } from '@stoplight/mosaic';
 import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
@@ -9,6 +9,7 @@ import { useQuery } from 'react-query';
 import { useLocation, Redirect, Link } from 'react-router-dom';
 import { safeStringify } from '@stoplight/yaml';
 import saver from 'file-saver';
+import { OPERATION_CONFIG, WEBHOOK_CONFIG } from '@stoplight/http-spec/oas';
 import { transformOas2Service, transformOas2Operation } from '@stoplight/http-spec/oas2';
 import { transformOas3Service, transformOas3Operation } from '@stoplight/http-spec/oas3';
 import { encodePointerFragment, pointerToPath } from '@stoplight/json';
@@ -16,13 +17,12 @@ import get from 'lodash/get.js';
 import isObject from 'lodash/isObject.js';
 import last from 'lodash/last.js';
 
-const computeTagGroups = (serviceNode) => {
+function computeTagGroups(serviceNode, nodeType) {
     const groupsByTagId = {};
     const ungrouped = [];
     const lowerCaseServiceTags = serviceNode.tags.map(tn => tn.toLowerCase());
-    for (const node of serviceNode.children) {
-        if (node.type !== NodeType.HttpOperation)
-            continue;
+    const groupableNodes = serviceNode.children.filter(n => n.type === nodeType);
+    for (const node of groupableNodes) {
         const tagName = node.tags[0];
         if (tagName) {
             const tagId = tagName.toLowerCase();
@@ -58,7 +58,7 @@ const computeTagGroups = (serviceNode) => {
     })
         .map(([, tagGroup]) => tagGroup);
     return { groups: orderedTagGroups, ungrouped };
-};
+}
 const defaultComputerAPITreeConfig = {
     hideSchemas: false,
     hideInternal: false,
@@ -73,12 +73,52 @@ const computeAPITree = (serviceNode, config = {}) => {
         type: 'overview',
         meta: '',
     });
-    const operationNodes = serviceNode.children.filter(node => node.type === NodeType.HttpOperation);
-    if (operationNodes.length) {
+    const hasOperationNodes = serviceNode.children.some(node => node.type === NodeType.HttpOperation);
+    if (hasOperationNodes) {
         tree.push({
             title: 'Endpoints',
         });
-        const { groups, ungrouped } = computeTagGroups(serviceNode);
+        const { groups, ungrouped } = computeTagGroups(serviceNode, NodeType.HttpOperation);
+        ungrouped.forEach(operationNode => {
+            if (mergedConfig.hideInternal && operationNode.data.internal) {
+                return;
+            }
+            tree.push({
+                id: operationNode.uri,
+                slug: operationNode.uri,
+                title: operationNode.name,
+                type: operationNode.type,
+                meta: operationNode.data.method,
+            });
+        });
+        groups.forEach(group => {
+            const items = group.items.flatMap(operationNode => {
+                if (mergedConfig.hideInternal && operationNode.data.internal) {
+                    return [];
+                }
+                return {
+                    id: operationNode.uri,
+                    slug: operationNode.uri,
+                    title: operationNode.name,
+                    type: operationNode.type,
+                    meta: operationNode.data.method,
+                };
+            });
+            if (items.length > 0) {
+                tree.push({
+                    title: group.title,
+                    items,
+                    itemsType: 'http_operation',
+                });
+            }
+        });
+    }
+    const hasWebhookNodes = serviceNode.children.some(node => node.type === NodeType.HttpWebhook);
+    if (hasWebhookNodes) {
+        tree.push({
+            title: 'Webhooks',
+        });
+        const { groups, ungrouped } = computeTagGroups(serviceNode, NodeType.HttpWebhook);
         ungrouped.forEach(operationNode => {
             if (mergedConfig.hideInternal && operationNode.data.internal) {
                 return;
@@ -108,13 +148,14 @@ const computeAPITree = (serviceNode, config = {}) => {
                 tree.push({
                     title: group.title,
                     items,
+                    itemsType: 'http_webhook',
                 });
             }
         });
     }
     let schemaNodes = serviceNode.children.filter(node => node.type === NodeType.Model);
     if (mergedConfig.hideInternal) {
-        schemaNodes = schemaNodes.filter(node => !node.data['x-internal']);
+        schemaNodes = schemaNodes.filter(n => !isInternal(n));
     }
     if (!mergedConfig.hideSchemas && schemaNodes.length) {
         tree.push({
@@ -148,7 +189,7 @@ const findFirstNodeSlug = (tree) => {
 };
 const isInternal = (node) => {
     const data = node.data;
-    if (isHttpOperation(data)) {
+    if (isHttpOperation(data) || isHttpWebhookOperation(data)) {
         return !!data.internal;
     }
     if (isHttpService(data)) {
@@ -158,7 +199,12 @@ const isInternal = (node) => {
 };
 
 const itemMatchesHash = (hash, item) => {
-    return hash.substr(1) === `${item.data.path}-${item.data.method}`;
+    if (item.type === NodeType.HttpOperation) {
+        return hash.substr(1) === `${item.data.path}-${item.data.method}`;
+    }
+    else {
+        return hash.substr(1) === `${item.data.name}-${item.data.method}`;
+    }
 };
 const TryItContext = React.createContext({
     hideTryIt: false,
@@ -176,14 +222,19 @@ const LocationContext = React.createContext({
 });
 LocationContext.displayName = 'LocationContext';
 const APIWithStackedLayout = ({ serviceNode, hideTryIt, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, showPoweredByLink = true, location, }) => {
-    const { groups } = computeTagGroups(serviceNode);
+    const { groups: operationGroups } = computeTagGroups(serviceNode, NodeType.HttpOperation);
+    const { groups: webhookGroups } = computeTagGroups(serviceNode, NodeType.HttpWebhook);
     return (React.createElement(LocationContext.Provider, { value: { location } },
         React.createElement(TryItContext.Provider, { value: { hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy } },
             React.createElement(Flex, { w: "full", flexDirection: "col", m: "auto", className: "sl-max-w-4xl" },
                 React.createElement(Box, { w: "full", borderB: true },
                     React.createElement(Docs, { className: "sl-mx-auto", nodeData: serviceNode.data, nodeTitle: serviceNode.name, nodeType: NodeType.HttpService, location: location, layoutOptions: { showPoweredByLink, hideExport }, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy })),
-                groups.map(group => (React.createElement(Group, { key: group.title, group: group })))))));
+                operationGroups.length > 0 && webhookGroups.length > 0 ? React.createElement(Heading, { size: 2 }, "Endpoints") : null,
+                operationGroups.map(group => (React.createElement(Group, { key: group.title, group: group }))),
+                webhookGroups.length > 0 ? React.createElement(Heading, { size: 2 }, "Webhooks") : null,
+                webhookGroups.map(group => (React.createElement(Group, { key: group.title, group: group })))))));
 };
+APIWithStackedLayout.displayName = 'APIWithStackedLayout';
 const Group = React.memo(({ group }) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     const scrollRef = React.useRef(null);
@@ -210,6 +261,7 @@ const Group = React.memo(({ group }) => {
             return React.createElement(Item, { key: item.uri, item: item });
         }))));
 });
+Group.displayName = 'Group';
 const Item = React.memo(({ item }) => {
     const { location } = React.useContext(LocationContext);
     const { hash } = location;
@@ -231,7 +283,7 @@ const Item = React.memo(({ item }) => {
     return (React.createElement(Box, { ref: scrollRef, w: "full", my: 2, border: true, borderColor: { default: isExpanded ? 'light' : 'transparent', hover: 'light' }, bg: { default: isExpanded ? 'code' : 'transparent', hover: 'code' } },
         React.createElement(Flex, { mx: "auto", alignItems: "center", cursor: "pointer", fontSize: "lg", p: 2, onClick: onClick, color: "current" },
             React.createElement(Box, { w: 24, textTransform: "uppercase", textAlign: "center", fontWeight: "semibold", border: true, rounded: true, px: 2, bg: "canvas", className: cn(`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`) }, item.data.method || 'UNKNOWN'),
-            React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.data.path),
+            React.createElement(Box, { flex: 1, fontWeight: "medium", wordBreak: "all" }, item.type === NodeType.HttpOperation ? item.data.path : item.name),
             isDeprecated && React.createElement(DeprecatedBadge, null)),
         React.createElement(Collapse, { isOpen: isExpanded },
             React.createElement(Box, { flex: 1, p: 2, fontWeight: "medium", mx: "auto", fontSize: "xl" }, item.name),
@@ -245,11 +297,13 @@ const Item = React.memo(({ item }) => {
                     React.createElement(TabPanel, null,
                         React.createElement(TryItWithRequestSamples, { httpOperation: item.data, tryItCredentialsPolicy: tryItCredentialsPolicy, corsProxy: corsProxy }))))))));
 });
+Item.displayName = 'Item';
 const Collapse = ({ isOpen, children }) => {
     if (!isOpen)
         return null;
     return React.createElement(Box, null, children);
-};
+};
+Collapse.displayName = 'Collapse';
 
 const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideInternal, hideExport, exportProps, tryItCredentialsPolicy, tryItCorsProxy, }) => {
     const container = React.useRef(null);
@@ -268,26 +322,32 @@ const APIWithSidebarLayout = ({ serviceNode, logo, hideTryIt, hideSchemas, hideI
     if (hideInternal && node && isInternal(node)) {
         return React.createElement(Redirect, { to: "/" });
     }
+    const sidebar = (React.createElement(Sidebar, { serviceNode: serviceNode, logo: logo, container: container, pathname: pathname, tree: tree }));
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
+};
+const Sidebar = ({ serviceNode, logo, container, pathname, tree }) => {
     const handleTocClick = () => {
         if (container.current) {
             container.current.scrollIntoView();
         }
     };
-    const sidebar = (React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(Flex, { ml: 4, mb: 5, alignItems: "center" },
             logo ? (React.createElement(Logo, { logo: { url: logo, altText: 'logo' } })) : (serviceNode.data.logo && React.createElement(Logo, { logo: serviceNode.data.logo })),
             React.createElement(Heading, { size: 4 }, serviceNode.name)),
         React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto", direction: "col" },
             React.createElement(TableOfContents, { tree: tree, activeId: pathname, Link: Link, onLinkClick: handleTocClick })),
         React.createElement(PoweredByLink, { source: serviceNode.name, pathname: pathname, packageType: "elements" })));
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: sidebar }, node && (React.createElement(ParsedDocs, { key: pathname, uri: pathname, node: node, nodeTitle: node.name, layoutOptions: layoutOptions, location: location, exportProps: exportProps, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }))));
-};
+};
+Sidebar.displayName = 'Sidebar';
 
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Paths"] = "paths";
     NodeTypes["Path"] = "path";
     NodeTypes["Operation"] = "operation";
+    NodeTypes["Webhooks"] = "webhooks";
+    NodeTypes["Webhook"] = "webhook";
     NodeTypes["Components"] = "components";
     NodeTypes["Models"] = "models";
     NodeTypes["Model"] = "model";
@@ -339,6 +399,22 @@ const oas3SourceMap = [
             },
         ],
     },
+    {
+        match: 'webhooks',
+        type: NodeTypes.Webhooks,
+        children: [
+            {
+                notMatch: '^x-',
+                type: NodeTypes.Webhook,
+                children: [
+                    {
+                        match: 'get|post|put|delete|options|head|patch|trace',
+                        type: NodeTypes.Webhook,
+                    },
+                ],
+            },
+        ],
+    },
     {
         match: 'components',
         type: NodeTypes.Components,
@@ -393,7 +469,7 @@ function computeServiceNode(document, map, transformService, transformOperation)
     return serviceNode;
 }
 function computeChildNodes(document, data, map, transformer, parentUri = '') {
-    var _a;
+    var _a, _b;
     const nodes = [];
     if (!isObject(data))
         return nodes;
@@ -406,7 +482,12 @@ function computeChildNodes(document, data, map, transformer, parentUri = '') {
             if (match.type === NodeTypes.Operation && jsonPath.length === 3) {
                 const path = String(jsonPath[1]);
                 const method = String(jsonPath[2]);
-                const operationDocument = transformer({ document, path, method });
+                const operationDocument = transformer({
+                    document,
+                    name: path,
+                    method,
+                    config: OPERATION_CONFIG,
+                });
                 let parsedUri;
                 const encodedPath = String(encodePointerFragment(path));
                 if (operationDocument.iid) {
@@ -423,6 +504,31 @@ function computeChildNodes(document, data, map, transformer, parentUri = '') {
                     tags: ((_a = operationDocument.tags) === null || _a === void 0 ? void 0 : _a.map(tag => tag.name)) || [],
                 });
             }
+            else if (match.type === NodeTypes.Webhook && jsonPath.length === 3) {
+                const name = String(jsonPath[1]);
+                const method = String(jsonPath[2]);
+                const webhookDocument = transformer({
+                    document,
+                    name,
+                    method,
+                    config: WEBHOOK_CONFIG,
+                });
+                let parsedUri;
+                const encodedPath = String(encodePointerFragment(name));
+                if (webhookDocument.iid) {
+                    parsedUri = `/webhooks/${webhookDocument.iid}`;
+                }
+                else {
+                    parsedUri = uri.replace(encodedPath, slugify(name));
+                }
+                nodes.push({
+                    type: NodeType.HttpWebhook,
+                    uri: parsedUri,
+                    data: webhookDocument,
+                    name: webhookDocument.summary || webhookDocument.name,
+                    tags: ((_b = webhookDocument.tags) === null || _b === void 0 ? void 0 : _b.map(tag => tag.name)) || [],
+                });
+            }
             else if (match.type === NodeTypes.Model) {
                 const schemaDocument = get(document, jsonPath);
                 const parsedUri = uri.replace(OAS_MODEL_REGEXP, 'schemas/');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "7.16.6",
+  "version": "8.0.0",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "main": "./index.js",
@@ -26,11 +26,11 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@stoplight/elements-core": "~7.16.6",
-    "@stoplight/http-spec": "^6.0.0",
+    "@stoplight/elements-core": "~8.0.0",
+    "@stoplight/http-spec": "^7.0.1",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.46.1",
-    "@stoplight/types": "^14.0.0",
+    "@stoplight/types": "^14.1.1",
     "@stoplight/yaml": "^4.2.3",
     "classnames": "^2.2.6",
     "file-saver": "^2.0.5",

package/utils/oas/types.d.ts

@@ -1,9 +1,11 @@
-import { IHttpOperation, IHttpService, NodeType } from '@stoplight/types';
+import { IHttpOperation, IHttpService, IHttpWebhookOperation, NodeType } from '@stoplight/types';
 import { JSONSchema7 } from 'json-schema';
 export declare enum NodeTypes {
     Paths = "paths",
     Path = "path",
     Operation = "operation",
+    Webhooks = "webhooks",
+    Webhook = "webhook",
     Components = "components",
     Models = "models",
     Model = "model"
@@ -24,7 +26,8 @@ declare type Node<T, D> = {
 export declare type ServiceNode = Node<NodeType.HttpService, IHttpService> & {
     children: ServiceChildNode[];
 };
-export declare type ServiceChildNode = OperationNode | SchemaNode;
+export declare type ServiceChildNode = OperationNode | WebhookNode | SchemaNode;
 export declare type OperationNode = Node<NodeType.HttpOperation, IHttpOperation>;
+export declare type WebhookNode = Node<NodeType.HttpWebhook, IHttpWebhookOperation>;
 export declare type SchemaNode = Node<NodeType.Model, JSONSchema7>;
 export {};