@jpmorganchase/elemental 1.0.0

package/src/components/API/APIWithSidebarLayout.tsx

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

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