@stoplight/elements-dev-portal 3.0.12-beta-0.1 → 3.0.13

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

@@ -1,68 +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,
-  isInResponsiveMode,
-}: {
-  projectId: string;
-  branchSlug?: string;
-  isInResponsiveMode?: boolean;
-}) => {
-  const { data } = useGetTableOfContents({ projectId, branchSlug });
-
-  return data ? (
-    <TableOfContents
-      isInResponsiveMode={isInResponsiveMode}
-      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' } },
-    isInResponsiveMode: { table: { category: 'Input' } },
-  },
-  args: {
-    projectId: 'cHJqOjYwNjYx',
-    branchSlug: '',
-    platformUrl: 'https://stoplight.io',
-    isInResponsiveMode: false,
-  },
-};
-
-export const Playground: Story<{
-  nodeSlug: string;
-  projectId: string;
-  branchSlug?: string;
-  isInResponsiveMode?: boolean;
-}> = args => <TableOfContentsWrapper {...args} />;
-
-Playground.storyName = 'Studio Demo';

package/src/components/TableOfContents/TableOfContents.tsx

@@ -1,54 +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;
-  isInResponsiveMode?: boolean;
-  onLinkClick?(): void;
-};
-
-export const TableOfContents = ({
-  tableOfContents,
-  activeId,
-  Link,
-  collapseTableOfContents = false,
-  externalScrollbar,
-  isInResponsiveMode = false,
-  onLinkClick,
-  ...boxProps
-}: TableOfContentsProps) => {
-  return (
-    <Flex bg={isInResponsiveMode ? 'canvas' : '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}
-          isInResponsiveMode={isInResponsiveMode}
-        />
-      </Flex>
-
-      {tableOfContents.hide_powered_by ? null : (
-        <PoweredByLink
-          source={activeId}
-          pathname={typeof window !== 'undefined' ? window.location.pathname : ''}
-          packageType="elements-dev-portal"
-        />
-      )}
-    </Flex>
-  );
-};

package/src/components/TableOfContents/index.tsx

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

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,269 +0,0 @@
-import {
-  type CustomLinkComponent,
-  findFirstNode,
-  ReactRouterMarkdownLink,
-  RouterTypeContext,
-  RoutingProps,
-  ScrollToHashElement,
-  SidebarLayout,
-  useRouter,
-  withStyles,
-} from '@stoplight/elements-core';
-import * as React from 'react';
-import {
-  Link,
-  Navigate,
-  Outlet,
-  Route,
-  Routes,
-  useInRouterContext,
-  useNavigate,
-  useOutletContext,
-  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;
-
-  /**
-   * Allows to the server information
-   * @default false
-   */
-  hideServerInfo?: boolean;
-
-  /**
-   * Allows to hide the security schemes
-   * @default false
-   */
-  hideSecurityInfo?: 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, collapseTableOfContents = false }) => {
-  const { branchSlug: encodedBranchSlug = '', '*': nodeSlug = '' } = useParams<{
-    branchSlug?: string;
-    '*': string;
-  }>();
-  const branchSlug = decodeURIComponent(encodedBranchSlug);
-  const navigate = useNavigate();
-
-  const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
-  const { data: branches } = useGetBranches({ projectId });
-  const {
-    data: node,
-    isLoading: isLoadingNode,
-    isError,
-    error: nodeError,
-  } = useGetNodeContent({
-    nodeSlug: nodeSlug ?? '',
-    projectId,
-    branchSlug,
-  });
-
-  const container = React.useRef<HTMLDivElement>(null);
-
-  if (!nodeSlug && isTocFetched && tableOfContents?.items) {
-    const firstNode = findFirstNode(tableOfContents.items);
-    if (firstNode) {
-      return <Navigate to={branchSlug ? `branches/${branchSlug}/${firstNode.slug}` : `${firstNode.slug}`} replace />;
-    }
-  }
-
-  const handleTocClick = () => {
-    if (container.current) {
-      container.current.scrollIntoView();
-    }
-  };
-
-  return (
-    <SidebarLayout
-      ref={container}
-      sidebar={
-        <>
-          {branches && branches.items.length > 1 ? (
-            <BranchSelector
-              branchSlug={branchSlug}
-              branches={branches.items}
-              onChange={branch => {
-                const encodedBranchSlug = encodeURIComponent(branch.slug);
-                navigate(branch.is_default ? `${nodeSlug}` : `branches/${encodedBranchSlug}/${nodeSlug}`);
-              }}
-            />
-          ) : null}
-          {tableOfContents ? (
-            <TableOfContents
-              activeId={node?.id || nodeSlug?.split('-')[0] || ''}
-              tableOfContents={tableOfContents}
-              Link={Link as CustomLinkComponent}
-              collapseTableOfContents={collapseTableOfContents}
-              onLinkClick={handleTocClick}
-            />
-          ) : null}
-        </>
-      }
-    >
-      <Outlet context={[isLoadingNode, isTocFetched, isError, nodeError, node]} />
-    </SidebarLayout>
-  );
-};
-
-const ProjectNode: React.FC<StoplightProjectProps> = ({
-  hideTryIt,
-  hideSecurityInfo,
-  hideServerInfo,
-  hideMocking,
-  hideExport,
-  tryItCredentialsPolicy,
-  tryItCorsProxy,
-}) => {
-  const { branchSlug: encodedBranchSlug = '', '*': nodeSlug = '' } = useParams<{ branchSlug?: string; '*': string }>();
-  const branchSlug = decodeURIComponent(encodedBranchSlug);
-  const [isLoadingNode, isTocFetched, isError, nodeError, node] = useOutletContext<any>();
-
-  if (isLoadingNode || !isTocFetched) {
-    return <Loading />;
-  }
-
-  if (isError) {
-    if (nodeError instanceof ResponseError) {
-      if (nodeError.code === 402) {
-        return <UpgradeToStarter />;
-      } else if (nodeError.code === 403) {
-        return <Forbidden />;
-      } else {
-        return <NotFound />;
-      }
-    } else {
-      return <NotFound />;
-    }
-  }
-
-  if (!node) {
-    return <NotFound />;
-  }
-
-  if (node?.slug && nodeSlug !== node.slug) {
-    // Handle redirect to node's slug
-    return <Navigate to={branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}`} replace />;
-  }
-
-  return (
-    <>
-      <ScrollToHashElement />
-      <NodeContent
-        node={node}
-        Link={ReactRouterMarkdownLink}
-        hideTryIt={hideTryIt}
-        hideMocking={hideMocking}
-        hideExport={hideExport}
-        hideSecurityInfo={hideSecurityInfo}
-        hideServerInfo={hideServerInfo}
-        tryItCredentialsPolicy={tryItCredentialsPolicy}
-        tryItCorsProxy={tryItCorsProxy}
-      />
-    </>
-  );
-};
-
-const StoplightProjectRouter = ({
-  platformUrl,
-  basePath = '/',
-  staticRouterPath = '',
-  router = 'hash',
-  ...props
-}: StoplightProjectProps) => {
-  const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
-  const outerRouter = useInRouterContext();
-
-  const InternalRoutes = () => (
-    <Routes>
-      <Route path="/" element={<StoplightProjectImpl {...props} />}>
-        <Route path="/branches/:branchSlug/*" element={<ProjectNode {...props} />} />
-        <Route path="/*" element={<ProjectNode {...props} />} />
-      </Route>
-    </Routes>
-  );
-
-  if (!outerRouter) {
-    return (
-      <DevPortalProvider platformUrl={platformUrl}>
-        <RouterTypeContext.Provider value={router}>
-          <Router {...routerProps} key={basePath}>
-            <InternalRoutes />
-          </Router>
-        </RouterTypeContext.Provider>
-      </DevPortalProvider>
-    );
-  }
-
-  return (
-    <DevPortalProvider platformUrl={platformUrl}>
-      <RouterTypeContext.Provider value={router}>
-        <InternalRoutes />
-      </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),
-        }),
-      },
-    );
-  });
-});

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

@@ -1,38 +0,0 @@
-import fetchMock from 'jest-fetch-mock';
-
-import { getNodes } from '../getNodes';
-
-describe('getNodes', () => {
-  beforeEach(() => {
-    fetchMock.resetMocks();
-    localStorage.clear();
-  });
-
-  describe('with a provided workspace identifier', () => {
-    it('should URI encode the parameters in the request URL', async () => {
-      fetchMock.mockResolvedValue(
-        new Response('{}', {
-          status: 200,
-          statusText: 'OK',
-          headers: [],
-        }),
-      );
-
-      await getNodes({
-        workspaceId: 'my?workspace',
-        projectIds: ['some/slash'],
-        branchSlug: 'test+branch',
-        search: 'a?special&search',
-      });
-
-      expect(fetchMock).toBeCalledWith(
-        'https://stoplight.io/api/v1/workspaces/my%3Fworkspace/nodes?project_ids[0]=some%2Fslash&search=a%3Fspecial%26search&branch=test%2Bbranch',
-        {
-          headers: expect.objectContaining({
-            'Stoplight-Elements-Version': expect.any(String),
-          }),
-        },
-      );
-    });
-  });
-});