@jpmorganchase/elemental 1.0.0 → 3.0.1

package/src/components/API/APIWithSidebarLayout.tsx

@@ -1,111 +0,0 @@
-import {
-  ExportButtonProps,
-  Logo,
-  ParsedDocs,
-  PoweredByLink,
-  SidebarLayout,
-  TableOfContents,
-} from '@stoplight/elements-core';
-import { Flex, Heading } from '@stoplight/mosaic';
-import { NodeType } from '@stoplight/types';
-import * as React from 'react';
-import { Link, Redirect, useLocation } from 'react-router-dom';
-
-import { ServiceNode } from '../../utils/oas/types';
-import { computeAPITree, findFirstNodeSlug, isInternal } from './utils';
-
-type SidebarLayoutProps = {
-  serviceNode: ServiceNode;
-  logo?: string;
-  hideTryIt?: boolean;
-  hideSchemas?: boolean;
-  hideInternal?: boolean;
-  hideExport?: boolean;
-  exportProps?: ExportButtonProps;
-  tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
-  tryItCorsProxy?: string;
-  tryItOutDefaultServer?: string;
-};
-
-export const APIWithSidebarLayout: React.FC<SidebarLayoutProps> = ({
-  serviceNode,
-  logo,
-  hideTryIt,
-  hideSchemas,
-  hideInternal,
-  hideExport,
-  exportProps,
-  tryItCredentialsPolicy,
-  tryItCorsProxy,
-  tryItOutDefaultServer,
-}) => {
-  const container = React.useRef<HTMLDivElement>(null);
-  const tree = React.useMemo(
-    () => computeAPITree(serviceNode, { hideSchemas, hideInternal }),
-    [serviceNode, hideSchemas, hideInternal],
-  );
-  const location = useLocation();
-  const { pathname } = location;
-  const isRootPath = !pathname || pathname === '/';
-  const node = isRootPath ? serviceNode : serviceNode.children.find(child => child.uri === pathname);
-
-  const layoutOptions = React.useMemo(
-    () => ({ hideTryIt: hideTryIt, hideExport: hideExport || node?.type !== NodeType.HttpService }),
-    [hideTryIt, hideExport, node],
-  );
-
-  if (!node) {
-    // Redirect to the first child if node doesn't exist
-    const firstSlug = findFirstNodeSlug(tree);
-
-    if (firstSlug) {
-      return <Redirect to={firstSlug} />;
-    }
-  }
-
-  if (hideInternal && node && isInternal(node)) {
-    return <Redirect to="/" />;
-  }
-
-  const handleTocClick = () => {
-    if (container.current) {
-      container.current.scrollIntoView();
-    }
-  };
-
-  const sidebar = (
-    <>
-      <Flex ml={4} mb={5} alignItems="center">
-        {logo ? (
-          <Logo logo={{ url: logo, altText: 'logo' }} />
-        ) : (
-          serviceNode.data.logo && <Logo logo={serviceNode.data.logo} />
-        )}
-        <Heading size={4}>{serviceNode.name}</Heading>
-      </Flex>
-      <Flex flexGrow flexShrink overflowY="auto" direction="col">
-        <TableOfContents tree={tree} activeId={pathname} Link={Link} onLinkClick={handleTocClick} />
-      </Flex>
-      <PoweredByLink source={serviceNode.name} pathname={pathname} packageType="elements" />
-    </>
-  );
-
-  return (
-    <SidebarLayout ref={container} sidebar={sidebar}>
-      {node && (
-        <ParsedDocs
-          key={pathname}
-          uri={pathname}
-          node={node}
-          nodeTitle={node.name}
-          layoutOptions={layoutOptions}
-          location={location}
-          exportProps={exportProps}
-          tryItCredentialsPolicy={tryItCredentialsPolicy}
-          tryItCorsProxy={tryItCorsProxy}
-          tryItOutDefaultServer={tryItOutDefaultServer}
-        />
-      )}
-    </SidebarLayout>
-  );
-};

package/src/components/API/APIWithStackedLayout.tsx

@@ -1,220 +0,0 @@
-import {
-  DeprecatedBadge,
-  Docs,
-  ExportButtonProps,
-  HttpMethodColors,
-  ParsedDocs,
-  TryItWithRequestSamples,
-} from '@stoplight/elements-core';
-import { Box, Flex, Icon, Tab, TabList, TabPanel, TabPanels, Tabs } from '@stoplight/mosaic';
-import { NodeType } from '@stoplight/types';
-import cn from 'classnames';
-import * as React from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { OperationNode, ServiceNode } from '../../utils/oas/types';
-import { computeTagGroups, TagGroup } from './utils';
-
-type TryItCredentialsPolicy = 'omit' | 'include' | 'same-origin';
-
-type StackedLayoutProps = {
-  serviceNode: ServiceNode;
-  hideTryIt?: boolean;
-  hideExport?: boolean;
-  exportProps?: ExportButtonProps;
-  tryItCredentialsPolicy?: TryItCredentialsPolicy;
-  tryItCorsProxy?: string;
-  tryItOutDefaultServer?: string;
-};
-
-const itemMatchesHash = (hash: string, item: OperationNode) => {
-  return hash.substr(1) === `${item.name}-${item.data.method}`;
-};
-
-const TryItContext = React.createContext<{
-  hideTryIt?: boolean;
-  tryItCredentialsPolicy?: TryItCredentialsPolicy;
-  corsProxy?: string;
-}>({
-  hideTryIt: false,
-  tryItCredentialsPolicy: 'omit',
-});
-TryItContext.displayName = 'TryItContext';
-
-export const APIWithStackedLayout: React.FC<StackedLayoutProps> = ({
-  serviceNode,
-  hideTryIt,
-  hideExport,
-  exportProps,
-  tryItCredentialsPolicy,
-  tryItCorsProxy,
-  tryItOutDefaultServer,
-}) => {
-  const location = useLocation();
-  const { groups } = computeTagGroups(serviceNode);
-
-  return (
-    <TryItContext.Provider value={{ hideTryIt, tryItCredentialsPolicy, corsProxy: tryItCorsProxy }}>
-      <Flex w="full" flexDirection="col" m="auto" className="sl-max-w-4xl">
-        <Box w="full" borderB>
-          <Docs
-            className="sl-mx-auto"
-            nodeData={serviceNode.data}
-            nodeTitle={serviceNode.name}
-            nodeType={NodeType.HttpService}
-            location={location}
-            layoutOptions={{ showPoweredByLink: true, hideExport }}
-            exportProps={exportProps}
-            tryItCredentialsPolicy={tryItCredentialsPolicy}
-            tryItOutDefaultServer={tryItOutDefaultServer}
-          />
-        </Box>
-
-        {groups.map(group => (
-          <Group key={group.title} group={group} />
-        ))}
-      </Flex>
-    </TryItContext.Provider>
-  );
-};
-
-const Group = React.memo<{ group: TagGroup }>(({ group }) => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const { hash } = useLocation();
-  const scrollRef = React.useRef<HTMLDivElement | null>(null);
-  const urlHashMatches = hash.substr(1) === group.title;
-
-  const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
-
-  const shouldExpand = React.useMemo(() => {
-    return urlHashMatches || group.items.some(item => itemMatchesHash(hash, item));
-  }, [group, hash, urlHashMatches]);
-
-  React.useEffect(() => {
-    if (shouldExpand) {
-      setIsExpanded(true);
-      if (urlHashMatches && scrollRef?.current?.offsetTop) {
-        // scroll only if group is active
-        window.scrollTo(0, scrollRef.current.offsetTop);
-      }
-    }
-  }, [shouldExpand, urlHashMatches, group, hash]);
-
-  return (
-    <Box>
-      <Flex
-        ref={scrollRef}
-        onClick={onClick}
-        mx="auto"
-        justifyContent="between"
-        alignItems="center"
-        borderB
-        px={2}
-        py={4}
-        cursor="pointer"
-        color={{ default: 'current', hover: 'muted' }}
-      >
-        <Box fontSize="lg" fontWeight="medium">
-          {group.title}
-        </Box>
-        <Icon className="sl-mr-2" icon={isExpanded ? 'chevron-down' : 'chevron-right'} size="sm" />
-      </Flex>
-
-      <Collapse isOpen={isExpanded}>
-        {group.items.map(item => {
-          return <Item key={item.uri} item={item} />;
-        })}
-      </Collapse>
-    </Box>
-  );
-});
-
-const Item = React.memo<{ item: OperationNode }>(({ item }) => {
-  const location = useLocation();
-  const { hash } = location;
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const scrollRef = React.useRef<HTMLDivElement | null>(null);
-  const color = HttpMethodColors[item.data.method] || 'gray';
-  const isDeprecated = !!item.data.deprecated;
-  const { hideTryIt, tryItCredentialsPolicy, corsProxy } = React.useContext(TryItContext);
-
-  const onClick = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
-
-  React.useEffect(() => {
-    if (itemMatchesHash(hash, item)) {
-      setIsExpanded(true);
-      if (scrollRef?.current?.offsetTop) {
-        window.scrollTo(0, scrollRef.current.offsetTop);
-      }
-    }
-  }, [hash, item]);
-
-  return (
-    <Box
-      ref={scrollRef}
-      w="full"
-      my={2}
-      border
-      borderColor={{ default: isExpanded ? 'light' : 'transparent', hover: 'light' }}
-      bg={{ default: isExpanded ? 'code' : 'transparent', hover: 'code' }}
-    >
-      <Flex mx="auto" alignItems="center" cursor="pointer" fontSize="lg" p={2} onClick={onClick} color="current">
-        <Box
-          w={24}
-          textTransform="uppercase"
-          textAlign="center"
-          fontWeight="semibold"
-          border
-          rounded
-          px={2}
-          bg="canvas"
-          className={cn(`sl-mr-5 sl-text-base`, `sl-text-${color}`, `sl-border-${color}`)}
-        >
-          {item.data.method || 'UNKNOWN'}
-        </Box>
-
-        <Box flex={1} fontWeight="medium" wordBreak="all">
-          {item.name}
-        </Box>
-        {isDeprecated && <DeprecatedBadge />}
-      </Flex>
-
-      <Collapse isOpen={isExpanded}>
-        {hideTryIt ? (
-          <Box as={ParsedDocs} layoutOptions={{ noHeading: true, hideTryItPanel: true }} node={item} p={4} />
-        ) : (
-          <Tabs appearance="line">
-            <TabList>
-              <Tab>Docs</Tab>
-              <Tab>TryIt</Tab>
-            </TabList>
-
-            <TabPanels>
-              <TabPanel>
-                <ParsedDocs
-                  className="sl-px-4"
-                  node={item}
-                  location={location}
-                  layoutOptions={{ noHeading: true, hideTryItPanel: true }}
-                />
-              </TabPanel>
-              <TabPanel>
-                <TryItWithRequestSamples
-                  httpOperation={item.data}
-                  tryItCredentialsPolicy={tryItCredentialsPolicy}
-                  corsProxy={corsProxy}
-                />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        )}
-      </Collapse>
-    </Box>
-  );
-});
-
-const Collapse: React.FC<{ isOpen: boolean }> = ({ isOpen, children }) => {
-  if (!isOpen) return null;
-
-  return <Box>{children}</Box>;
-};