@jpmorganchase/elemental-dev-portal 1.0.0 → 2.2.1

package/src/components/Search/Search.tsx

@@ -1,133 +0,0 @@
-import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import {
-  NodeTypeColors,
-  NodeTypeIconDefs,
-  withMosaicProvider,
-  withPersistenceBoundary,
-  withQueryClientProvider,
-  withStyles,
-} from '@stoplight/elements-core';
-import { Box, Flex, Icon, Input, ListBox, ListBoxItem, Modal, ModalProps } from '@stoplight/mosaic';
-import { flow } from 'lodash';
-import * as React from 'react';
-
-import { NodeSearchResult } from '../../types';
-
-export type SearchProps = {
-  isLoading?: boolean;
-  search?: string;
-  searchResults?: NodeSearchResult[];
-  onSearch: (search: string) => void;
-  onClick: (result: NodeSearchResult) => void;
-  isOpen?: boolean;
-  onClose: ModalProps['onClose'];
-};
-
-const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }: SearchProps) => {
-  const listBoxRef = React.useRef<HTMLDivElement>(null);
-
-  const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
-
-  const onKeyDown = React.useCallback(e => {
-    // Focus the search results on arrow down
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      listBoxRef.current?.focus();
-    }
-  }, []);
-
-  const onSelectionChange = React.useCallback(
-    keys => {
-      const selectedId = keys.values().next().value;
-      const selectedResult = searchResults?.find(
-        searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId,
-      );
-      if (selectedResult) {
-        onClick(selectedResult);
-      }
-    },
-    [searchResults, onClick],
-  );
-
-  return (
-    <Modal
-      renderHeader={() => (
-        <Input
-          appearance="minimal"
-          borderB
-          size="lg"
-          icon={<Box as={Icon} ml={1} icon={isLoading ? faSpinner : faSearch} spin={isLoading} />}
-          autoFocus
-          placeholder="Search..."
-          value={search}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-        />
-      )}
-      isOpen={!!isOpen}
-      onClose={onClose}
-    >
-      {searchResults && searchResults.length > 0 ? (
-        <ListBox
-          ref={listBoxRef}
-          aria-label="Search"
-          overflowY="auto"
-          h={80}
-          m={-5}
-          items={searchResults}
-          selectionMode="single"
-          onSelectionChange={onSelectionChange}
-        >
-          {(searchResult: NodeSearchResult) => {
-            return (
-              <ListBoxItem key={`${searchResult.id}-${searchResult.project_id}`} textValue={searchResult.title}>
-                <Box p={3} borderB>
-                  <Flex align="center">
-                    <Box
-                      as={Icon}
-                      w={4}
-                      icon={NodeTypeIconDefs[searchResult.type]}
-                      style={{ color: NodeTypeColors[searchResult.type] }}
-                    />
-
-                    <Box
-                      flex={1}
-                      fontSize="lg"
-                      dangerouslySetInnerHTML={{ __html: searchResult.highlighted.name ?? '' }}
-                      fontWeight="medium"
-                      textOverflow="overflow-ellipsis"
-                      mx={2}
-                    />
-
-                    <Box fontSize="sm" color="muted">
-                      {searchResult.project_name}
-                    </Box>
-                  </Flex>
-
-                  <Box
-                    dangerouslySetInnerHTML={{ __html: searchResult.highlighted.summary ?? '' }}
-                    color="muted"
-                    fontSize="sm"
-                    mt={1}
-                    ml={6}
-                  />
-                </Box>
-              </ListBoxItem>
-            );
-          }}
-        </ListBox>
-      ) : (
-        <Flex w="full" h={80} align="center" justify="center" m={-5}>
-          No search results
-        </Flex>
-      )}
-    </Modal>
-  );
-};
-
-export const Search = flow(
-  withStyles,
-  withPersistenceBoundary,
-  withMosaicProvider,
-  withQueryClientProvider,
-)(SearchImpl);

package/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -1,54 +0,0 @@
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { useGetTableOfContents } from '../../hooks/useGetTableOfContents';
-import { TableOfContents } from './';
-
-// Wrapper to show how to use the node content hook
-const TableOfContentsWrapper = ({ projectId, branchSlug }: { projectId: string; branchSlug?: string }) => {
-  const { data } = useGetTableOfContents({ projectId, branchSlug });
-
-  return data ? (
-    <TableOfContents
-      activeId="b3A6MTE0"
-      tableOfContents={data}
-      Link={({ children, ...props }) => {
-        return (
-          <a
-            onClick={() => {
-              console.log('Link clicked!', props);
-            }}
-          >
-            {children}
-          </a>
-        );
-      }}
-      style={{
-        width: '300px',
-      }}
-    />
-  ) : (
-    <>Loading</>
-  );
-};
-
-export default {
-  title: 'Public/TableOfContents',
-  component: TableOfContentsWrapper,
-  argTypes: {
-    projectId: { table: { category: 'Input' } },
-    branchSlug: { table: { category: 'Input' } },
-    platformUrl: { table: { category: 'Input' } },
-  },
-  args: {
-    projectId: 'cHJqOjYwNjYx',
-    branchSlug: '',
-    platformUrl: 'https://stoplight.io',
-  },
-};
-
-export const Playground: Story<{ nodeSlug: string; projectId: string; branchSlug?: string }> = args => (
-  <TableOfContentsWrapper {...args} />
-);
-
-Playground.storyName = 'Studio Demo';

package/src/components/TableOfContents/TableOfContents.tsx

@@ -1,51 +0,0 @@
-import {
-  CustomLinkComponent,
-  PoweredByLink,
-  TableOfContents as ElementsTableOfContents,
-} from '@stoplight/elements-core';
-import { BoxProps, Flex } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { ProjectTableOfContents } from '../../types';
-
-export type TableOfContentsProps = BoxProps<'div'> & {
-  activeId: string;
-  tableOfContents: ProjectTableOfContents;
-  Link: CustomLinkComponent;
-  collapseTableOfContents?: boolean;
-  externalScrollbar?: boolean;
-  onLinkClick?(): void;
-};
-
-export const TableOfContents = ({
-  tableOfContents,
-  activeId,
-  Link,
-  collapseTableOfContents = false,
-  externalScrollbar,
-  onLinkClick,
-  ...boxProps
-}: TableOfContentsProps) => {
-  return (
-    <Flex bg="canvas-100" {...boxProps} flexDirection="col" maxH="full">
-      <Flex flexGrow flexShrink overflowY="auto">
-        <ElementsTableOfContents
-          tree={tableOfContents.items}
-          activeId={activeId}
-          Link={Link}
-          maxDepthOpenByDefault={collapseTableOfContents ? 0 : 1}
-          externalScrollbar={externalScrollbar}
-          onLinkClick={onLinkClick}
-        />
-      </Flex>
-
-      {tableOfContents.hide_powered_by ? null : (
-        <PoweredByLink
-          source={activeId}
-          pathname={typeof window !== 'undefined' ? window.location.pathname : ''}
-          packageType="elements-dev-portal"
-        />
-      )}
-    </Flex>
-  );
-};

package/src/components/UpgradeToStarter.tsx

@@ -1,22 +0,0 @@
-import { Box, Flex, Icon } from '@stoplight/mosaic';
-import React from 'react';
-
-export const UpgradeToStarter = () => (
-  <Flex
-    as="a"
-    href="https://stoplight.io/pricing/"
-    target="_blank"
-    rel="noreferrer noopener"
-    justify="center"
-    alignItems="center"
-    w="full"
-    minH="screen"
-    color="muted"
-    flexDirection="col"
-  >
-    <Icon icon={['fas', 'exclamation-triangle']} size="4x" />
-    <Box pt={3}>
-      Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.
-    </Box>
-  </Flex>
-);

package/src/consts.ts

@@ -1,32 +0,0 @@
-const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
-
-export const devPortalCacheKeys = {
-  all: [ROOT_CACHE_KEY] as const,
-
-  projects: () => [ROOT_CACHE_KEY, 'projects'] as const,
-  project: (projectId: string) => [...devPortalCacheKeys.projects(), projectId] as const,
-  projectsList: () => [...devPortalCacheKeys.projects(), 'list'] as const,
-  projectDetails: (projectId: string) => [...devPortalCacheKeys.project(projectId), 'details'] as const,
-
-  branches: (projectId: string) => [...devPortalCacheKeys.project(projectId), 'branches'] as const,
-  branch: (projectId: string, branch: string) => [...devPortalCacheKeys.branches(projectId), branch] as const,
-  branchesList: (projectId: string) => [...devPortalCacheKeys.branches(projectId), 'list'] as const,
-  branchDetails: (projectId: string, branch: string) =>
-    [...devPortalCacheKeys.branch(projectId, branch), 'details'] as const,
-  branchTOC: (projectId: string, branch: string) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'] as const,
-
-  branchNodes: (projectId: string, branch: string) =>
-    [...devPortalCacheKeys.branch(projectId, branch), 'nodes'] as const,
-  branchNode: (projectId: string, branch: string, node: string) =>
-    [...devPortalCacheKeys.branchNodes(projectId, branch), node] as const,
-  branchNodesList: (projectId: string, branch: string) =>
-    [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'] as const,
-  branchNodeDetails: (projectId: string, branch: string, node: string) =>
-    [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'] as const,
-
-  search: () => [...devPortalCacheKeys.all, 'search'],
-  searchNodes: (filters: { projectIds?: string[]; branchSlug?: string; workspaceId?: string; search?: string }) => [
-    ...devPortalCacheKeys.search(),
-    filters,
-  ],
-};

package/src/containers/StoplightProject.spec.tsx

@@ -1,78 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render, screen } from '@testing-library/react';
-import fetchMock from 'jest-fetch-mock';
-import * as React from 'react';
-
-import branches from '../__fixtures__/branches.json';
-import nodeContent from '../__fixtures__/node-content.json';
-import tableOfContents from '../__fixtures__/table-of-contents.json';
-import { StoplightProject } from './StoplightProject';
-
-describe('Stoplight Project', () => {
-  beforeEach(() => {
-    fetchMock.mockResponse(request => {
-      if (request.url.match(/\/api\/v1\/projects\/[a-zA-Z0-9_.-]+\/table-of-contents/i)) {
-        return Promise.resolve({
-          body: JSON.stringify(tableOfContents),
-          status: 200,
-          statusText: 'OK',
-          headers: [],
-        });
-      } else if (request.url.match(/\/api\/v1\/projects\/[a-zA-Z0-9_.-]+\/nodes/i)) {
-        return Promise.resolve({
-          body: JSON.stringify(nodeContent),
-          status: 200,
-          statusText: 'OK',
-          headers: [],
-        });
-      } else if (request.url.match(/\/api\/v1\/projects\/[a-zA-Z0-9_.-]+\/branches/i)) {
-        return Promise.resolve({
-          body: JSON.stringify(branches),
-          status: 200,
-          statusText: 'OK',
-          headers: [],
-        });
-      } else {
-        return Promise.resolve({ status: 404, statusText: 'Not Found', headers: [], body: '' });
-      }
-    });
-    fetchMock.enableMocks();
-  });
-
-  afterEach(() => {
-    fetchMock.disableMocks();
-  });
-
-  it('loads correctly using memory router', async () => {
-    render(<StoplightProject router="memory" projectId="cHJqOjYwNjYx" platformUrl="https://stoplight.io" />);
-
-    expect(
-      await screen.findByText(
-        'Markdown is supported in descriptions. Add information here for users to get accustomed to endpoints',
-        {},
-        { timeout: 10000 },
-      ),
-    ).toBeInTheDocument();
-  });
-
-  it('loads correctly using static router', async () => {
-    render(
-      <StoplightProject
-        router="static"
-        projectId="cHJqOjYwNjYx"
-        basePath=""
-        staticRouterPath="/b3A6Mzg5NDM2-create-todo"
-        platformUrl="https://stoplight.io"
-      />,
-    );
-
-    expect(
-      await screen.findByText(
-        'Markdown is supported in descriptions. Add information here for users to get accustomed to endpoints',
-        {},
-        { timeout: 10000 },
-      ),
-    ).toBeInTheDocument();
-  });
-});

package/src/containers/StoplightProject.stories.tsx

@@ -1,28 +0,0 @@
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { StoplightProject, StoplightProjectProps } from './StoplightProject';
-
-export default {
-  title: 'Public/StoplightProject',
-  component: StoplightProject,
-  argTypes: {
-    projectId: { table: { category: 'Input' } },
-    hideTryIt: { table: { category: 'Input' } },
-    hideMocking: { table: { category: 'Input' } },
-    basePath: { table: { category: 'Routing' } },
-    router: { table: { category: 'Routing' } },
-    platformUrl: { table: { category: 'Advanced' } },
-  },
-  args: {
-    router: 'memory',
-    platformUrl: 'https://stoplight.io',
-  },
-};
-
-export const Playground: Story<StoplightProjectProps> = args => <StoplightProject {...args} />;
-Playground.storyName = 'Studio Demo';
-Playground.args = {
-  projectId: 'cHJqOjYwNjYx',
-  platformUrl: 'https://stoplight.io',
-};

package/src/containers/StoplightProject.tsx

@@ -1,213 +0,0 @@
-import {
-  findFirstNode,
-  ReactRouterMarkdownLink,
-  RouterTypeContext,
-  RoutingProps,
-  SidebarLayout,
-  useRouter,
-  withStyles,
-} from '@stoplight/elements-core';
-import * as React from 'react';
-import { Link, Redirect, Route, useHistory, useParams } from 'react-router-dom';
-
-import { BranchSelector } from '../components/BranchSelector';
-import { DevPortalProvider } from '../components/DevPortalProvider';
-import { Forbidden } from '../components/Forbidden';
-import { Loading } from '../components/Loading';
-import { NodeContent } from '../components/NodeContent';
-import { NotFound } from '../components/NotFound';
-import { TableOfContents } from '../components/TableOfContents';
-import { UpgradeToStarter } from '../components/UpgradeToStarter';
-import { ResponseError } from '../handlers/getNodeContent';
-import { useGetBranches } from '../hooks/useGetBranches';
-import { useGetNodeContent } from '../hooks/useGetNodeContent';
-import { useGetTableOfContents } from '../hooks/useGetTableOfContents';
-
-export interface StoplightProjectProps extends RoutingProps {
-  /**
-   * The ID of the Stoplight Project.
-   * @example "d2s6NDE1NTU"
-   */
-  projectId: string;
-  /**
-   * If your company runs an on-premise deployment of Stoplight,
-   * set this prop to point the StoplightProject component at the URL of that instance.
-   */
-  platformUrl?: string;
-
-  /**
-   * Allows to hide TryIt component
-   */
-  hideTryIt?: boolean;
-
-  /**
-   * Allows to hide mocking button
-   */
-  hideMocking?: boolean;
-
-  /**
-   * Allows to hide export button
-   * @default false
-   */
-  hideExport?: boolean;
-
-  /**
-   * If set to true, all table of contents panels will be collapsed.
-   * @default false
-   */
-  collapseTableOfContents?: boolean;
-
-  /**
-   * Fetch credentials policy for TryIt component
-   * For more information: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
-   * @default "omit"
-   */
-
-  tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
-
-  /**
-   * URL of a CORS proxy that will be used to send requests in TryIt.
-   * Provided url will be prepended to an URL of an actual request.
-   * @default false
-   */
-  tryItCorsProxy?: string;
-}
-
-const StoplightProjectImpl: React.FC<StoplightProjectProps> = ({
-  projectId,
-  hideTryIt,
-  hideMocking,
-  hideExport,
-  collapseTableOfContents = false,
-  tryItCredentialsPolicy,
-  tryItCorsProxy,
-}) => {
-  const { branchSlug = '', nodeSlug = '' } = useParams<{ branchSlug?: string; nodeSlug: string }>();
-  const history = useHistory();
-
-  const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
-  const { data: branches } = useGetBranches({ projectId });
-  const {
-    data: node,
-    isLoading: isLoadingNode,
-    isError,
-    error: nodeError,
-  } = useGetNodeContent({
-    nodeSlug,
-    projectId,
-    branchSlug,
-  });
-  const container = React.useRef<HTMLDivElement>(null);
-
-  if (!nodeSlug && isTocFetched && tableOfContents?.items) {
-    const firstNode = findFirstNode(tableOfContents.items);
-    if (firstNode) {
-      return <Redirect to={branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}`} />;
-    }
-  }
-
-  let elem: JSX.Element;
-  if (isLoadingNode || !isTocFetched) {
-    elem = <Loading />;
-  } else if (isError) {
-    if (nodeError instanceof ResponseError) {
-      if (nodeError.code === 402) {
-        elem = <UpgradeToStarter />;
-      } else if (nodeError.code === 403) {
-        elem = <Forbidden />;
-      } else {
-        elem = <NotFound />;
-      }
-    } else {
-      elem = <NotFound />;
-    }
-  } else if (!node) {
-    elem = <NotFound />;
-  } else if (node?.slug && nodeSlug !== node.slug) {
-    // Handle redirect to node's slug
-    return <Redirect to={branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}`} />;
-  } else {
-    elem = (
-      <NodeContent
-        node={node}
-        Link={ReactRouterMarkdownLink}
-        hideTryIt={hideTryIt}
-        hideMocking={hideMocking}
-        hideExport={hideExport}
-        tryItCredentialsPolicy={tryItCredentialsPolicy}
-        tryItCorsProxy={tryItCorsProxy}
-      />
-    );
-  }
-
-  const handleTocClick = () => {
-    if (container.current) {
-      container.current.scrollIntoView();
-    }
-  };
-
-  return (
-    <SidebarLayout
-      ref={container}
-      sidebar={
-        <>
-          {branches && branches.length > 1 ? (
-            <BranchSelector
-              branchSlug={branchSlug}
-              branches={branches}
-              onChange={branch =>
-                history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${branch.slug}/${nodeSlug}`)
-              }
-            />
-          ) : null}
-          {tableOfContents ? (
-            <TableOfContents
-              activeId={node?.id || nodeSlug?.split('-')[0] || ''}
-              tableOfContents={tableOfContents}
-              Link={Link}
-              collapseTableOfContents={collapseTableOfContents}
-              onLinkClick={handleTocClick}
-            />
-          ) : null}
-        </>
-      }
-    >
-      {elem}
-    </SidebarLayout>
-  );
-};
-
-const StoplightProjectRouter = ({
-  platformUrl,
-  basePath = '/',
-  staticRouterPath = '',
-  router = 'history',
-  ...props
-}: StoplightProjectProps) => {
-  const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
-
-  return (
-    <DevPortalProvider platformUrl={platformUrl}>
-      <RouterTypeContext.Provider value={router}>
-        <Router {...routerProps} key={basePath}>
-          <Route path="/branches/:branchSlug/:nodeSlug" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
-
-          <Route path="/:nodeSlug" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
-
-          <Route path="/" exact>
-            <StoplightProjectImpl {...props} />
-          </Route>
-        </Router>
-      </RouterTypeContext.Provider>
-    </DevPortalProvider>
-  );
-};
-
-/**
- * The StoplightProject component displays a traditional documentation UI for an existing Stoplight Project.
- */
-export const StoplightProject = withStyles(StoplightProjectRouter);

package/src/handlers/__tests__/getBranches.test.ts

@@ -1,30 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-
-import { getBranches } from '../getBranches';
-
-describe('getBranches', () => {
-  beforeEach(() => {
-    fetchMock.resetMocks();
-    localStorage.clear();
-  });
-
-  it('should URI encode the parameters in the request URL', async () => {
-    fetchMock.mockResolvedValue(
-      new Response('{}', {
-        status: 200,
-        statusText: 'OK',
-        headers: [],
-      }),
-    );
-
-    await getBranches({
-      projectId: 'some/slash',
-    });
-
-    expect(fetchMock).toBeCalledWith('https://stoplight.io/api/v1/projects/some%2Fslash/branches', {
-      headers: expect.objectContaining({
-        'Stoplight-Elements-Version': expect.any(String),
-      }),
-    });
-  });
-});

package/src/handlers/__tests__/getNodeContent.test.ts

@@ -1,35 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-
-import { getNodeContent } from '../getNodeContent';
-
-describe('getNodeContent', () => {
-  beforeEach(() => {
-    fetchMock.resetMocks();
-    localStorage.clear();
-  });
-
-  it('should URI encode the parameters in the request URL', async () => {
-    fetchMock.mockResolvedValue(
-      new Response('{}', {
-        status: 200,
-        statusText: 'OK',
-        headers: [],
-      }),
-    );
-
-    await getNodeContent({
-      nodeSlug: 'node&slug',
-      projectId: 'some/slash',
-      branchSlug: 'test+branch',
-    });
-
-    expect(fetchMock).toBeCalledWith(
-      'https://stoplight.io/api/v1/projects/some%2Fslash/nodes/node%26slug?branch=test%2Bbranch',
-      {
-        headers: expect.objectContaining({
-          'Stoplight-Elements-Version': expect.any(String),
-        }),
-      },
-    );
-  });
-});