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

package/src/components/TableOfContents/TableOfContents.tsx

@@ -1,406 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

package/src/components/TableOfContents/types.ts

@@ -1,51 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>
-  );
-};