@jpmorganchase/elemental-dev-portal 1.0.0 → 2.2.1

package/src/components/BranchSelector/BranchSelector.spec.tsx

@@ -1,63 +0,0 @@
-import { Provider as MosaicProvider } from '@stoplight/mosaic';
-import { screen } from '@testing-library/dom';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import * as React from 'react';
-
-import { BranchSelector } from './BranchSelector';
-
-export const branches = [
-  {
-    id: 0,
-    slug: 'main',
-    is_default: true,
-    is_published: false,
-    projectId: 123,
-    name: 'main-name',
-  },
-  {
-    id: 1,
-    slug: 'beta',
-    is_default: false,
-    is_published: false,
-    projectId: 123,
-  },
-  {
-    id: 2,
-    slug: 'feature-branch',
-    is_default: false,
-    is_published: false,
-    projectId: 123,
-  },
-];
-
-const BranchSelectorWrapper: React.FC = () => {
-  const [branchSlug, setBranchSlug] = React.useState('main');
-
-  return (
-    <MosaicProvider>
-      <BranchSelector branchSlug={branchSlug} branches={branches} onChange={branch => setBranchSlug(branch.slug)} />
-    </MosaicProvider>
-  );
-};
-
-function getBranchSelector() {
-  return screen.getByRole('button');
-}
-
-describe('Branch selector', () => {
-  it('shows the default branch by default', () => {
-    render(<BranchSelectorWrapper />);
-
-    expect(getBranchSelector()).toHaveTextContent('main-name');
-  });
-
-  it('selects a branch', () => {
-    render(<BranchSelectorWrapper />);
-
-    userEvent.click(getBranchSelector());
-    userEvent.click(screen.getByRole('menuitemradio', { name: 'beta' }));
-
-    expect(getBranchSelector()).toHaveTextContent('beta');
-  });
-});

package/src/components/BranchSelector/BranchSelector.stories.tsx

@@ -1,41 +0,0 @@
-import { Box } from '@stoplight/mosaic';
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { useGetBranches } from '../../hooks/useGetBranches';
-import { BranchSelector } from './';
-
-// Wrapper to show how to use the node content hook
-const BranchSelectorWrapper = ({ projectId }: { projectId: string }) => {
-  const [branchSlug, setBranchSlug] = React.useState('master');
-  const { data } = useGetBranches({ projectId });
-
-  if (data) {
-    return (
-      <Box mt={10} w={40}>
-        <BranchSelector branchSlug={branchSlug} branches={data} onChange={branch => setBranchSlug(branch.slug)} />
-      </Box>
-    );
-  }
-
-  return <Box>Loading</Box>;
-};
-
-export default {
-  title: 'Public/BranchSelector',
-  component: BranchSelectorWrapper,
-  argTypes: {
-    projectId: { table: { category: 'Input' } },
-    platformUrl: { table: { category: 'Input' } },
-  },
-  args: {
-    projectId: 'cHJqOjYwNjYx',
-    platformUrl: 'https://stoplight.io',
-  },
-};
-
-export const Playground: Story<{ nodeSlug: string; projectId: string; branchSlug?: string }> = args => (
-  <BranchSelectorWrapper {...args} />
-);
-
-Playground.storyName = 'Studio Demo';

package/src/components/BranchSelector/BranchSelector.tsx

@@ -1,50 +0,0 @@
-import { FieldButton, Menu } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { Branch } from '../../types';
-
-export type BranchSelectorProps = {
-  branchSlug: string;
-  branches: Branch[];
-  onChange: (branch: Branch) => void;
-};
-
-export const BranchSelector = ({ branchSlug, branches, onChange }: BranchSelectorProps) => {
-  const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
-  const handleChange = React.useCallback(
-    (selectedSlug: React.ReactText) => {
-      const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
-      if (selectedBranch) {
-        onChange(selectedBranch);
-      }
-    },
-    [onChange, branches],
-  );
-
-  return (
-    <Menu
-      aria-label="Versions"
-      placement="bottom left"
-      closeOnPress
-      matchTriggerWidth
-      renderTrigger={({ isOpen }) => (
-        <FieldButton w="full" icon="layer-group" px={4} h="md" active={isOpen} borderR={0} roundedR="none">
-          {currentBranch?.name || currentBranch?.slug || 'Choose a version'}
-        </FieldButton>
-      )}
-      items={[
-        {
-          type: 'option_group',
-          title: 'Versions',
-          onChange: handleChange,
-          value: currentBranch?.slug || '',
-          children: branches.map(branch => ({
-            label: branch.name || branch.slug,
-            value: branch.slug,
-            meta: branch.is_default ? 'Default' : undefined,
-          })),
-        },
-      ]}
-    />
-  );
-};

package/src/components/DevPortalProvider/index.tsx

@@ -1,19 +0,0 @@
-import { withMosaicProvider, withPersistenceBoundary, withQueryClientProvider } from '@stoplight/elements-core';
-import * as React from 'react';
-
-export type DevPortalProviderProps = {
-  platformUrl?: string;
-  platformAuthToken?: string;
-};
-
-export const PlatformContext = React.createContext<DevPortalProviderProps>({ platformUrl: 'https://stoplight.io' });
-
-const PlatformProvider: React.FC<DevPortalProviderProps> = ({
-  platformUrl = 'https://stoplight.io',
-  platformAuthToken,
-  children,
-}) => {
-  return <PlatformContext.Provider value={{ platformUrl, platformAuthToken }}>{children}</PlatformContext.Provider>;
-};
-
-export const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));

package/src/components/Forbidden.tsx

@@ -1,11 +0,0 @@
-import { Box, Flex, Heading, VStack } from '@stoplight/mosaic';
-import React from 'react';
-
-export const Forbidden = () => (
-  <Flex align="center" justify="center" flexGrow>
-    <VStack spacing={4} align="center">
-      <Heading size={1}>Forbidden</Heading>
-      <Box as="p">You don't have permission to access this resource</Box>
-    </VStack>
-  </Flex>
-);

package/src/components/Loading.tsx

@@ -1,9 +0,0 @@
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import { Flex, Icon } from '@stoplight/mosaic';
-import React from 'react';
-
-export const Loading = () => (
-  <Flex justify="center" alignItems="center" w="full" minH="screen" color="muted">
-    <Icon icon={faCircleNotch} size="3x" spin />
-  </Flex>
-);

package/src/components/NodeContent/NodeContent.spec.tsx

@@ -1,54 +0,0 @@
-import { CustomLinkComponent } from '@stoplight/elements-core';
-import { render, screen } from '@testing-library/react';
-import * as React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-
-import nodeContent from '../../__fixtures__/node-content.json';
-import { NodeContent } from './NodeContent';
-
-const DummyLink: CustomLinkComponent = ({ children, ...propsRest }) => {
-  return <a {...propsRest}>{children}</a>;
-};
-
-describe(NodeContent.name, () => {
-  it('renders correctly', async () => {
-    const { unmount } = render(
-      <MemoryRouter>
-        <NodeContent node={nodeContent} Link={DummyLink} />
-      </MemoryRouter>,
-    );
-
-    expect(screen.getByRole('heading', { name: /create todo/i })).toBeInTheDocument();
-    expect(
-      await screen.findByText(
-        'Markdown is supported in descriptions. Add information here for users to get accustomed to endpoints',
-      ),
-    ).toBeInTheDocument();
-
-    unmount();
-  });
-
-  it('shows TryIt by default', () => {
-    const { unmount } = render(
-      <MemoryRouter>
-        <NodeContent node={nodeContent} Link={DummyLink} />
-      </MemoryRouter>,
-    );
-
-    expect(screen.getByText(/send api request/i)).toBeInTheDocument();
-
-    unmount();
-  });
-
-  it('can hide TryIt', () => {
-    const { unmount } = render(
-      <MemoryRouter>
-        <NodeContent node={nodeContent} Link={DummyLink} hideTryIt />
-      </MemoryRouter>,
-    );
-
-    expect(screen.queryByText(/send api request/i)).not.toBeInTheDocument();
-
-    unmount();
-  });
-});

package/src/components/NodeContent/NodeContent.stories.tsx

@@ -1,60 +0,0 @@
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { useGetNodeContent } from '../../hooks/useGetNodeContent';
-import { NodeContent } from './';
-
-// Wrapper to show how to use the node content hook
-const NodeContentWrapper = ({
-  nodeSlug,
-  projectId,
-  branchSlug,
-}: {
-  nodeSlug: string;
-  projectId: string;
-  branchSlug?: string;
-}) => {
-  const { data } = useGetNodeContent({ nodeSlug, projectId, branchSlug });
-
-  return data ? (
-    <NodeContent
-      node={data}
-      Link={({ children, ...props }) => {
-        return (
-          <a
-            onClick={() => {
-              console.log('Link clicked!', props);
-            }}
-          >
-            {children}
-          </a>
-        );
-      }}
-    />
-  ) : (
-    <>Loading</>
-  );
-};
-
-export default {
-  title: 'Public/NodeContent',
-  component: NodeContentWrapper,
-  argTypes: {
-    nodeSlug: { table: { category: 'Input' } },
-    projectId: { table: { category: 'Input' } },
-    branchSlug: { table: { category: 'Input' } },
-    platformUrl: { table: { category: 'Input' } },
-  },
-  args: {
-    nodeSlug: 'b3A6Mzg5NDM2-create-todo',
-    projectId: 'cHJqOjYwNjYx',
-    branchSlug: '',
-    platformUrl: 'https://stoplight.io',
-  },
-};
-
-export const Playground: Story<{ nodeSlug: string; projectId: string; branchSlug?: string }> = args => (
-  <NodeContentWrapper {...args} />
-);
-
-Playground.storyName = 'Create Todo';

package/src/components/NodeContent/NodeContent.tsx

@@ -1,171 +0,0 @@
-import {
-  CustomLinkComponent,
-  Docs,
-  DocsProps,
-  MarkdownComponentsProvider,
-  MockingProvider,
-  ReferenceResolver,
-} from '@stoplight/elements-core';
-import { CustomComponentMapping } from '@stoplight/markdown-viewer';
-import { dirname, resolve } from '@stoplight/path';
-import { NodeType } from '@stoplight/types';
-import * as React from 'react';
-
-import { Node } from '../../types';
-
-// Props shared with elements-core Docs component
-type DocsBaseProps = Pick<DocsProps, 'tryItCorsProxy' | 'tryItCredentialsPolicy' | 'nodeHasChanged'>;
-type DocsLayoutProps = Pick<
-  Required<DocsProps>['layoutOptions'],
-  'compact' | 'hideTryIt' | 'hideTryItPanel' | 'hideExport'
->;
-
-export type NodeContentProps = {
-  node: Node;
-  Link: CustomLinkComponent;
-
-  /**
-   * Allows to hide mocking button
-   */
-  hideMocking?: boolean;
-
-  /**
-   * Support for custom reference resolver
-   */
-  refResolver?: ReferenceResolver;
-
-  onExportRequest?: (type: 'original' | 'bundled') => void;
-} & DocsBaseProps &
-  DocsLayoutProps;
-
-export const NodeContent = ({
-  node,
-  Link,
-  hideMocking,
-  refResolver,
-
-  // Docs base props
-  tryItCorsProxy,
-  tryItCredentialsPolicy,
-  nodeHasChanged,
-
-  // Docs layout props
-  compact,
-  hideTryIt,
-  hideTryItPanel,
-
-  // Exporting
-  hideExport,
-  onExportRequest,
-}: NodeContentProps) => {
-  return (
-    <NodeLinkContext.Provider value={[node, Link]}>
-      <MarkdownComponentsProvider value={{ a: LinkComponent }}>
-        <MockingProvider mockUrl={node.links.mock_url} hideMocking={hideMocking}>
-          <Docs
-            nodeType={node.type as NodeType}
-            nodeData={node.data}
-            nodeTitle={node.title}
-            layoutOptions={{
-              compact,
-              hideTryIt: hideTryIt,
-              hideTryItPanel: hideTryItPanel,
-              hideExport:
-                hideExport ||
-                (node.links.export_url ?? node.links.export_original_file_url ?? node.links.export_bundled_file_url) ===
-                  undefined,
-            }}
-            useNodeForRefResolving
-            refResolver={refResolver}
-            tryItCorsProxy={tryItCorsProxy}
-            exportProps={
-              [NodeType.HttpService, NodeType.Model].includes(node.type as NodeType)
-                ? {
-                    original: onExportRequest
-                      ? { onPress: () => onExportRequest('original') }
-                      : { href: node.links.export_original_file_url ?? node.links.export_url },
-                    bundled: onExportRequest
-                      ? { onPress: () => onExportRequest('bundled') }
-                      : { href: node.links.export_bundled_file_url ?? getBundledUrl(node.links.export_url) },
-                  }
-                : undefined
-            }
-            tryItCredentialsPolicy={tryItCredentialsPolicy}
-            nodeHasChanged={nodeHasChanged}
-          />
-        </MockingProvider>
-      </MarkdownComponentsProvider>
-    </NodeLinkContext.Provider>
-  );
-};
-
-const NodeLinkContext = React.createContext<[Node, CustomLinkComponent] | undefined>(undefined);
-
-const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-const LinkComponent: CustomComponentMapping['a'] = ({ children, href, title }) => {
-  const ctx = React.useContext(NodeLinkContext);
-
-  if (href && externalRegex.test(href)) {
-    // Open external URL in a new tab
-    return (
-      <a href={href} target="_blank" rel="noreferrer" title={title ? title : undefined}>
-        {children}
-      </a>
-    );
-  }
-
-  if (href && ctx) {
-    const [node, Link] = ctx;
-    // Resolve relative file URI with
-    const { fileUri } = getNodeUriParts(node.uri);
-    const { fileUri: hrefFileUri } = getNodeUriParts(href);
-
-    let resolvedUri;
-    if (hrefFileUri) {
-      // if the href is targeting another file, resolve it against the dir path of current file
-      resolvedUri = resolve(dirname(fileUri), href);
-    } else {
-      // If the href does not include a file, resolve it relative to the current file
-      resolvedUri = resolve(fileUri, href);
-    }
-
-    const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
-    const decodedUrl = decodeURIComponent(href);
-    const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
-    const edge = node.outbound_edges.find(
-      edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor,
-    );
-
-    if (edge) {
-      return <Link to={`${edge.slug}${hash ? `#${hash}` : ''}`}>{children}</Link>;
-    }
-  }
-
-  return <a href={href}>{children}</a>;
-};
-
-function getBundledUrl(url: string | undefined) {
-  if (url === undefined) return undefined;
-  const bundledUrl = new URL(url);
-  const searchParams = new URLSearchParams(bundledUrl.search);
-  searchParams.append('deref', 'optimizedBundle');
-  bundledUrl.search = searchParams.toString();
-  return bundledUrl.toString();
-}
-
-// Extract out just the file portion of the node URI
-// This handles cases such as links to http_operation node uris, which include both the file + encoded pointer, e.g.
-//
-// /reference/openapi.json/paths/~1v2~1contact~1last_change/post#heading-anchor
-// fileUri = /reference/openapi.json
-// pointer = /paths/~1v2~1contact~1last_change/post#heading-anchor
-export const getNodeUriParts = (uri: string): { fileUri: string; pointer: string } => {
-  const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
-  if (parts.length === 1) {
-    return { fileUri: '', pointer: parts[0] || '' };
-  }
-
-  const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
-
-  return { fileUri, pointer: parts[2] || '' };
-};

package/src/components/NotFound.tsx

@@ -1,11 +0,0 @@
-import { Box, Flex, Heading, VStack } from '@stoplight/mosaic';
-import React from 'react';
-
-export const NotFound = () => (
-  <Flex align="center" justify="center" flexGrow>
-    <VStack spacing={4} align="center">
-      <Heading size={1}>Not Found</Heading>
-      <Box as="p">Could not find what you are looking for</Box>
-    </VStack>
-  </Flex>
-);

package/src/components/Search/Search.stories.tsx

@@ -1,73 +0,0 @@
-import { Input, useModalState } from '@stoplight/mosaic';
-import { Story } from '@storybook/react';
-import * as React from 'react';
-
-import { useGetNodes } from '../../hooks/useGetNodes';
-import { useGetWorkspace } from '../../hooks/useGetWorkspace';
-import { NodeSearchResult } from '../../types';
-import { Search } from './';
-
-type SearchWrapperProps = { projectIds: string[]; workspaceId: string };
-// Wrapper to show how to use the node content hook
-const SearchWrapper = ({ projectIds, workspaceId }: SearchWrapperProps) => {
-  const { isOpen, open, close } = useModalState();
-  const [search, setSearch] = React.useState('');
-  const { data, isFetching } = useGetNodes({
-    search,
-    projectIds,
-    workspaceId,
-  });
-
-  const { data: workspace } = useGetWorkspace({
-    projectIds,
-  });
-
-  const handleClose = () => {
-    close();
-    setSearch('');
-  };
-
-  const handleClick = (searchResult: NodeSearchResult) => {
-    console.log('Search clicked', searchResult);
-    window.open(
-      `https://${workspace?.workspace.slug}.stoplight.io/docs/${searchResult.project_slug}${searchResult.uri}`,
-      '_blank',
-    );
-
-    handleClose();
-  };
-
-  return (
-    <>
-      <Input placeholder="Search..." onClick={open} />
-      <Search
-        isLoading={isFetching}
-        search={search}
-        searchResults={data}
-        onSearch={setSearch}
-        isOpen={isOpen}
-        onClose={handleClose}
-        onClick={handleClick}
-      />
-    </>
-  );
-};
-
-export default {
-  title: 'Public/Search',
-  component: SearchWrapper,
-  argTypes: {
-    workspaceId: { table: { category: 'Input' } },
-    projectIds: { table: { category: 'Input' } },
-    platformUrl: { table: { category: 'Input' } },
-  },
-  args: {
-    projectIds: ['cHJqOjYwNjYx'],
-    workspaceId: 'd2s6NDE1NTU',
-    platformUrl: 'https://stoplight.io',
-  },
-};
-
-export const Playground: Story<SearchWrapperProps> = args => <SearchWrapper {...args} />;
-
-Playground.storyName = 'Studio Demo';