@stoplight/elements-core 9.0.11 → 9.0.12-beta-0.2

package/src/components/TableOfContents/TableOfContents.tsx

@@ -0,0 +1,406 @@
+import { Box, Flex, Icon, ITextColorProps } from '@stoplight/mosaic';
+import { HttpMethod, NodeType } from '@stoplight/types';
+import * as React from 'react';
+
+import { useFirstRender } from '../../hooks/useFirstRender';
+import { resolveRelativeLink } from '../../utils/string';
+import { VersionBadge } from '../Docs/HttpOperation/Badges';
+import {
+  NODE_GROUP_ICON,
+  NODE_GROUP_ICON_COLOR,
+  NODE_META_COLOR,
+  NODE_TYPE_ICON_COLOR,
+  NODE_TYPE_META_ICON,
+  NODE_TYPE_TITLE_ICON,
+} from './constants';
+import {
+  CustomLinkComponent,
+  TableOfContentsDivider,
+  TableOfContentsGroup,
+  TableOfContentsGroupItem,
+  TableOfContentsNode,
+  TableOfContentsNodeGroup,
+  TableOfContentsProps,
+} from './types';
+import {
+  getHtmlIdFromItemId,
+  hasActiveItem,
+  isDivider,
+  isExternalLink,
+  isGroup,
+  isGroupOpenByDefault,
+  isNode,
+  isNodeGroup,
+} from './utils';
+
+const ActiveIdContext = React.createContext<string | undefined>(undefined);
+const LinkContext = React.createContext<CustomLinkComponent | undefined>(undefined);
+LinkContext.displayName = 'LinkContext';
+
+export const TableOfContents = React.memo<TableOfContentsProps>(
+  ({
+    tree,
+    activeId,
+    Link,
+    maxDepthOpenByDefault,
+    externalScrollbar = false,
+    isInResponsiveMode = false,
+    onLinkClick,
+  }) => {
+    const container = React.useRef<HTMLDivElement>(null);
+    const child = React.useRef<HTMLDivElement>(null);
+    const firstRender = useFirstRender();
+
+    React.useEffect(() => {
+      // setTimeout to handle scrollTo after groups expand to display active GroupItem
+      setTimeout(() => {
+        // First render should center, all others just scroll into view
+        const scrollPosition = firstRender ? 'center' : 'nearest';
+        const tocHasScrollbar =
+          externalScrollbar ||
+          (container.current && child.current && container.current.offsetHeight < child.current.offsetHeight);
+
+        if (activeId && typeof window !== 'undefined' && tocHasScrollbar) {
+          const elem = window.document.getElementById(getHtmlIdFromItemId(activeId));
+          if (elem && 'scrollIntoView' in elem) {
+            elem.scrollIntoView({ block: scrollPosition });
+          }
+        }
+      }, 0);
+
+      // Only run when activeId changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeId]);
+
+    return (
+      <Box ref={container} w="full" bg={isInResponsiveMode ? 'canvas' : 'canvas-100'} overflowY="auto">
+        <Box ref={child} my={3}>
+          <LinkContext.Provider value={Link}>
+            <ActiveIdContext.Provider value={activeId}>
+              {tree.map((item, key) => {
+                if (isDivider(item)) {
+                  return <Divider key={key} item={item} isInResponsiveMode={isInResponsiveMode} />;
+                }
+
+                return (
+                  <GroupItem
+                    key={key}
+                    item={item}
+                    depth={0}
+                    maxDepthOpenByDefault={maxDepthOpenByDefault}
+                    onLinkClick={onLinkClick}
+                    isInResponsiveMode={isInResponsiveMode}
+                  />
+                );
+              })}
+            </ActiveIdContext.Provider>
+          </LinkContext.Provider>
+        </Box>
+      </Box>
+    );
+  },
+);
+TableOfContents.displayName = 'TableOfContents';
+
+const Divider = React.memo<{
+  item: TableOfContentsDivider;
+  isInResponsiveMode?: boolean;
+}>(({ item, isInResponsiveMode = false }) => {
+  return (
+    <Box
+      pl={4}
+      mb={2}
+      mt={6}
+      textTransform="uppercase"
+      fontSize={isInResponsiveMode ? 'lg' : 'sm'}
+      lineHeight="relaxed"
+      letterSpacing="wide"
+      fontWeight="bold"
+    >
+      {item.title}
+    </Box>
+  );
+});
+Divider.displayName = 'Divider';
+
+const GroupItem = React.memo<{
+  depth: number;
+  item: TableOfContentsGroupItem;
+  isInResponsiveMode?: boolean;
+  maxDepthOpenByDefault?: number;
+  onLinkClick?(): void;
+}>(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
+  if (isExternalLink(item)) {
+    return (
+      <Box as="a" href={item.url} target="_blank" rel="noopener noreferrer" display="block">
+        <Item
+          isInResponsiveMode={isInResponsiveMode}
+          depth={depth}
+          title={item.title}
+          meta={<Box as={Icon} icon={['fas', 'external-link']} />}
+        />
+      </Box>
+    );
+  } else if (isGroup(item) || isNodeGroup(item)) {
+    return (
+      <Group
+        depth={depth}
+        item={item}
+        maxDepthOpenByDefault={maxDepthOpenByDefault}
+        onLinkClick={onLinkClick}
+        isInResponsiveMode={isInResponsiveMode}
+      />
+    );
+  } else if (isNode(item)) {
+    return (
+      <Node
+        depth={depth}
+        isInResponsiveMode={isInResponsiveMode}
+        item={item}
+        onLinkClick={onLinkClick}
+        meta={
+          item.meta ? (
+            <Box
+              color={NODE_META_COLOR[item.meta as HttpMethod] as ITextColorProps['color']}
+              textTransform="uppercase"
+              fontWeight="medium"
+            >
+              {item.meta}
+            </Box>
+          ) : (
+            NODE_TYPE_META_ICON[item.type] && (
+              <Flex alignItems="center">
+                {item.version && <Version value={item.version} />}
+                {item.type !== 'model' && (
+                  <Box
+                    as={Icon}
+                    color={NODE_TYPE_ICON_COLOR[item.type as NodeType] as ITextColorProps['color']}
+                    icon={NODE_TYPE_META_ICON[item.type]}
+                  />
+                )}
+              </Flex>
+            )
+          )
+        }
+      />
+    );
+  }
+
+  return null;
+});
+GroupItem.displayName = 'GroupItem';
+
+const Group = React.memo<{
+  depth: number;
+  item: TableOfContentsGroup | TableOfContentsNodeGroup;
+  maxDepthOpenByDefault?: number;
+  isInResponsiveMode?: boolean;
+  onLinkClick?(): void;
+}>(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => {} }) => {
+  const activeId = React.useContext(ActiveIdContext);
+  const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
+  const hasActive = !!activeId && hasActiveItem(item.items, activeId);
+
+  // If maxDepthOpenByDefault changes, we want to update all the isOpen states (used in live preview mode)
+  React.useEffect(() => {
+    const openByDefault = isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault);
+    if (isOpen !== openByDefault) {
+      setIsOpen(openByDefault);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [depth, maxDepthOpenByDefault]);
+
+  // Expand group when it has the active item
+  React.useEffect(() => {
+    if (hasActive) {
+      setIsOpen(true);
+    }
+  }, [hasActive]);
+
+  const handleClick = (e: React.MouseEvent, forceOpen?: boolean) => {
+    setIsOpen(forceOpen ? true : !isOpen);
+  };
+
+  const meta = (
+    <Flex alignItems="center">
+      {isNodeGroup(item) && item.version && <Version value={item.version} />}
+      <Box
+        as={Icon}
+        icon={['fas', isOpen ? 'chevron-down' : 'chevron-right']}
+        color="muted"
+        fixedWidth
+        onClick={(e: React.MouseEvent) => {
+          // Don't propagate event when clicking icon
+          e.stopPropagation();
+          e.preventDefault();
+          handleClick(e);
+        }}
+      />
+    </Flex>
+  );
+
+  // Show the Group as active when group has active item and is closed
+  const showAsActive = hasActive && !isOpen;
+  let elem;
+  if (isNodeGroup(item)) {
+    elem = (
+      <Node
+        depth={depth}
+        item={item}
+        meta={meta}
+        showAsActive={showAsActive}
+        onClick={handleClick}
+        onLinkClick={onLinkClick}
+        isInResponsiveMode={isInResponsiveMode}
+      />
+    );
+  } else {
+    elem = (
+      <Item
+        isInResponsiveMode={isInResponsiveMode}
+        title={item.title}
+        meta={meta}
+        onClick={handleClick}
+        depth={depth}
+        isActive={showAsActive}
+        icon={
+          item.itemsType &&
+          NODE_GROUP_ICON[item.itemsType] && (
+            <Box as={Icon} color={NODE_GROUP_ICON_COLOR[item.itemsType]} icon={NODE_GROUP_ICON[item.itemsType]} />
+          )
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      {elem}
+
+      {isOpen &&
+        item.items.map((groupItem, key) => {
+          return (
+            <GroupItem
+              key={key}
+              item={groupItem}
+              depth={depth + 1}
+              onLinkClick={onLinkClick}
+              isInResponsiveMode={isInResponsiveMode}
+            />
+          );
+        })}
+    </>
+  );
+});
+Group.displayName = 'Group';
+
+const Item = React.memo<{
+  depth: number;
+  title: string;
+  isActive?: boolean;
+  id?: string;
+  icon?: React.ReactElement<typeof Icon>;
+  meta?: React.ReactNode;
+  isInResponsiveMode?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+}>(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
+  return (
+    <Flex
+      id={id}
+      bg={{
+        default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
+        hover: isActive ? undefined : 'canvas-200',
+      }}
+      cursor="pointer"
+      // @ts-expect-error
+      pl={4 + depth * 4}
+      pr={4}
+      h={isInResponsiveMode ? 'lg' : 'md'}
+      align="center"
+      userSelect="none"
+      onClick={onClick}
+      title={title}
+    >
+      {icon}
+
+      <Box
+        alignItems="center"
+        flex={1}
+        mr={meta ? 1.5 : undefined}
+        ml={icon && 1.5}
+        textOverflow="truncate"
+        fontSize={isInResponsiveMode ? 'lg' : 'base'}
+      >
+        {title}
+      </Box>
+
+      <Flex alignItems="center" fontSize={isInResponsiveMode ? 'base' : 'xs'}>
+        {meta}
+      </Flex>
+    </Flex>
+  );
+});
+Item.displayName = 'Item';
+
+const Node = React.memo<{
+  item: TableOfContentsNode | TableOfContentsNodeGroup;
+  depth: number;
+  meta?: React.ReactNode;
+  showAsActive?: boolean;
+  isInResponsiveMode?: boolean;
+  onClick?: (e: React.MouseEvent, forceOpen?: boolean) => void;
+  onLinkClick?(): void;
+}>(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => {} }) => {
+  const activeId = React.useContext(ActiveIdContext);
+  const isActive = activeId === item.slug || activeId === item.id;
+  const LinkComponent = React.useContext(LinkContext);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isActive) {
+      // Don't trigger link click when we're active
+      e.stopPropagation();
+      e.preventDefault();
+    } else {
+      onLinkClick();
+    }
+
+    // Force open when clicking inactive group
+    if (onClick) {
+      onClick(e, isActive ? undefined : true);
+    }
+  };
+
+  return (
+    <Box
+      as={LinkComponent}
+      to={resolveRelativeLink(item.slug)}
+      display="block"
+      textDecoration="no-underline"
+      className="ElementsTableOfContentsItem"
+    >
+      <Item
+        id={getHtmlIdFromItemId(item.slug || item.id)}
+        isActive={isActive || showAsActive}
+        depth={depth}
+        title={item.title}
+        icon={
+          NODE_TYPE_TITLE_ICON[item.type] && (
+            <Box as={Icon} color={NODE_TYPE_ICON_COLOR[item.type]} icon={NODE_TYPE_TITLE_ICON[item.type]} />
+          )
+        }
+        meta={meta}
+        isInResponsiveMode={isInResponsiveMode}
+        onClick={handleClick}
+      />
+    </Box>
+  );
+});
+Node.displayName = 'Node';
+
+const Version: React.FC<{ value: string }> = ({ value }) => {
+  return (
+    <Box mr={2}>
+      <VersionBadge value={value} backgroundColor="#909DAB" />
+    </Box>
+  );
+};

package/src/components/TableOfContents/constants.ts

@@ -0,0 +1,45 @@
+import { faBullseye, faCloud, faCube, faCubes, faEnvelope, faEnvelopesBulk } from '@fortawesome/free-solid-svg-icons';
+import { IIconProps, ITextColorProps } from '@stoplight/mosaic';
+import { HttpMethod } from '@stoplight/types';
+
+// Icons appear left of the node title
+export const NODE_TYPE_TITLE_ICON: Readonly<{ [nodeType: string]: IIconProps['icon'] }> = {
+  http_service: faCloud,
+  http_operation: faBullseye,
+  http_webhook: faEnvelope,
+  model: faCube,
+};
+
+export const NODE_GROUP_ICON: Readonly<{ [itemType: string]: IIconProps['icon'] }> = {
+  http_webhook: faEnvelopesBulk,
+  model: faCubes,
+};
+
+// Icons appear in the right meta
+export const NODE_TYPE_META_ICON: Readonly<{ [nodeType: string]: IIconProps['icon'] }> = {
+  webhook: faEnvelope,
+  model: faCube,
+};
+
+export const NODE_TYPE_ICON_COLOR: Readonly<{ [nodeType: string]: ITextColorProps['color'] }> = {
+  model: 'warning',
+  http_service: '#D812EA' as ITextColorProps['color'],
+  http_operation: '#9747FF' as ITextColorProps['color'],
+  http_webhook: 'primary',
+};
+
+export const NODE_GROUP_ICON_COLOR: Readonly<{ [nodeType: string]: ITextColorProps['color'] }> = {
+  http_webhook: 'primary',
+  model: 'warning',
+};
+
+export const NODE_META_COLOR: Readonly<Record<HttpMethod, string>> = {
+  get: 'success',
+  post: 'primary',
+  put: 'warning',
+  patch: 'warning',
+  delete: 'danger',
+  head: '#9061F9',
+  options: '#0D5AA7',
+  trace: '#0D0B28',
+};

package/src/components/TableOfContents/index.ts

@@ -0,0 +1,2 @@
+export * from './TableOfContents';
+export * from './types';

package/src/components/TableOfContents/types.ts

@@ -0,0 +1,51 @@
+export type TableOfContentsProps = {
+  tree: TableOfContentsItem[];
+  activeId: string;
+  Link: CustomLinkComponent;
+  maxDepthOpenByDefault?: number;
+  externalScrollbar?: boolean;
+  isInResponsiveMode?: boolean;
+  onLinkClick?(): void;
+};
+
+export type CustomLinkComponent = React.ComponentType<{
+  to: string;
+  className?: string;
+  children: React.ReactNode;
+}>;
+
+export type TableOfContentsItem = TableOfContentsDivider | TableOfContentsGroupItem;
+
+export type TableOfContentsDivider = {
+  title: string;
+};
+
+export type TableOfContentsGroupItem =
+  | TableOfContentsGroup
+  | TableOfContentsNodeGroup
+  | TableOfContentsNode
+  | TableOfContentsExternalLink;
+
+export type TableOfContentsGroup = {
+  title: string;
+  items: TableOfContentsGroupItem[];
+  itemsType?: 'article' | 'http_operation' | 'http_webhook' | 'model';
+};
+
+export type TableOfContentsExternalLink = {
+  title: string;
+  url: string;
+};
+
+export type TableOfContentsNode<
+  T = 'http_service' | 'http_operation' | 'http_webhook' | 'model' | 'article' | 'overview',
+> = {
+  id: string;
+  slug: string;
+  title: string;
+  type: T;
+  meta: string;
+  version?: string;
+};
+
+export type TableOfContentsNodeGroup = TableOfContentsNode<'http_service'> & TableOfContentsGroup;

package/src/components/TableOfContents/utils.ts

@@ -0,0 +1,84 @@
+import {
+  TableOfContentsDivider,
+  TableOfContentsExternalLink,
+  TableOfContentsGroup,
+  TableOfContentsGroupItem,
+  TableOfContentsItem,
+  TableOfContentsNode,
+  TableOfContentsNodeGroup,
+} from './types';
+
+export function getHtmlIdFromItemId(id: string) {
+  return `sl-toc-${id}`;
+}
+
+export function isGroupOpenByDefault(
+  depth: number,
+  item: TableOfContentsGroup | TableOfContentsNodeGroup,
+  activeId?: string,
+  maxDepthOpenByDefault: number = 0,
+) {
+  return (
+    depth < maxDepthOpenByDefault ||
+    (activeId &&
+      (('slug' in item && activeId === item.slug) ||
+        ('id' in item && activeId === item.id) ||
+        hasActiveItem(item.items, activeId)))
+  );
+}
+
+// Recursively checks for the active item
+export function hasActiveItem(items: TableOfContentsGroupItem[], activeId: string): boolean {
+  return items.some(item => {
+    if ('slug' in item && activeId === item.slug) {
+      return true;
+    }
+
+    if ('id' in item && activeId === item.id) {
+      return true;
+    }
+
+    if ('items' in item) {
+      return hasActiveItem(item.items, activeId);
+    }
+
+    return false;
+  });
+}
+
+// Recursively finds the first node
+export function findFirstNode(items: TableOfContentsItem[]): TableOfContentsNode | TableOfContentsNodeGroup | void {
+  for (const item of items) {
+    // ignore nodes with empty slug
+    if ((isNode(item) || isNodeGroup(item)) && item.slug) {
+      return item;
+    }
+
+    if (isGroup(item) || isNodeGroup(item)) {
+      const firstNode = findFirstNode(item.items);
+      if (firstNode) {
+        return firstNode;
+      }
+    }
+
+    continue;
+  }
+
+  return;
+}
+
+export function isDivider(item: TableOfContentsItem): item is TableOfContentsDivider {
+  return Object.keys(item).length === 1 && 'title' in item;
+}
+export function isGroup(item: TableOfContentsItem): item is TableOfContentsGroup {
+  return Object.keys(item).length >= 2 && 'title' in item && 'items' in item;
+}
+export function isNodeGroup(item: TableOfContentsItem): item is TableOfContentsNodeGroup {
+  return 'title' in item && 'items' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
+}
+export function isNode(item: TableOfContentsItem): item is TableOfContentsNode {
+  return 'title' in item && 'slug' in item && 'id' in item && 'meta' in item && 'type' in item;
+}
+export function isExternalLink(item: TableOfContentsItem): item is TableOfContentsExternalLink {
+  return Object.keys(item).length === 2 && 'title' in item && 'url' in item;
+}

package/src/components/TryIt/Auth/APIKeyAuth.tsx

@@ -0,0 +1,19 @@
+import { Panel } from '@stoplight/mosaic';
+import { IApiKeySecurityScheme } from '@stoplight/types';
+import * as React from 'react';
+
+import { AuthTokenInput } from './AuthTokenInput';
+
+interface APIKeyAuthProps {
+  scheme: IApiKeySecurityScheme;
+  onChange: (apiKey: string) => void;
+  value: string;
+}
+
+export const APIKeyAuth: React.FC<APIKeyAuthProps> = ({ scheme, onChange, value }) => {
+  return (
+    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
+      <AuthTokenInput type="apiKey" name={scheme.name} value={value} onChange={onChange} />
+    </Panel.Content>
+  );
+};