@stoplight/elements-core 9.0.12-beta-0.1 → 9.0.13

package/src/components/MarkdownViewer/CustomComponents/ResolvedImage.tsx

@@ -1,86 +0,0 @@
-import { CustomComponentMapping } from '@stoplight/markdown-viewer';
-import { dirname, resolve } from '@stoplight/path';
-import React from 'react';
-import URI from 'urijs';
-
-import { BundledBranchNode, IntegrationKind } from '../../../types';
-
-export const createResolvedImageComponent = (branchNode: BundledBranchNode) => {
-  const ResolvedImage: CustomComponentMapping['img'] = ({ title, alt, src }) => {
-    return <img src={resolveImageUrlHandler(src || '', branchNode)} title={title} alt={alt} />;
-  };
-  return React.memo(ResolvedImage);
-};
-
-const resolveImageUrlHandler = (url: string, branchNode: BundledBranchNode) => {
-  // don't touch absolute urls no matter which service we're using
-  if (URI(url).is('absolute')) {
-    return url;
-  }
-
-  const orgSlug = branchNode.externalOrgSlug;
-  const projectSlug = branchNode.externalSlug;
-  const branchSlug = branchNode.branchSlug;
-  const uri = branchNode.uri;
-
-  if (!orgSlug || !projectSlug || !branchNode.workspaceIntegration.kind) {
-    return url;
-  }
-
-  const resolvedUri = resolve(dirname(uri || ''), url);
-
-  let imageUri;
-  switch (branchNode.workspaceIntegration.kind) {
-    case IntegrationKind.AzureDevopsServer:
-      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
-      imageUri
-        .segmentCoded([...imageUri.segmentCoded(), orgSlug, '_apis', 'git', 'repositories', projectSlug, 'items'])
-        .query({
-          scopePath: resolvedUri,
-          'api-version': '4.1',
-          $format: 'OctetStream',
-        });
-      break;
-
-    case IntegrationKind.BitbucketServer:
-      // need to remove the api path
-      imageUri = new URI((branchNode.workspaceIntegration.apiUrl || '').replace(/\/rest\/api\/[0-9.]+/, ''));
-      imageUri.segmentCoded([...imageUri.segmentCoded(), 'projects', orgSlug, 'repos', projectSlug || '', 'browse']);
-      imageUri.segment([...imageUri.segment(), resolvedUri]).query({ raw: '' });
-      break;
-
-    case IntegrationKind.BitbucketCloud:
-      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
-      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', branchSlug]);
-      imageUri.segment([...imageUri.segment(), resolvedUri]);
-      break;
-
-    case IntegrationKind.Github:
-      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
-      imageUri.hostname(`raw.${imageUri.hostname()}`);
-      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, branchSlug]);
-      imageUri.segment([...imageUri.segment(), resolvedUri]);
-      // if image is svg sanitize true
-      if (RegExp(/\.svg$/).test(imageUri.path())) {
-        imageUri.setQuery({ sanitize: true });
-      }
-      break;
-
-    case IntegrationKind.Gitlab:
-      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
-      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', branchSlug]);
-      imageUri.segment([...imageUri.segment(), resolvedUri]);
-      break;
-
-    case IntegrationKind.Gitea:
-      imageUri = new URI(branchNode.workspaceIntegration.hostUrl || '');
-      imageUri.segmentCoded([...imageUri.segmentCoded(), orgSlug, projectSlug, 'raw', 'branch', branchSlug]);
-      imageUri.segment([...imageUri.segment(), resolvedUri]);
-      break;
-
-    default:
-      imageUri = new URI(resolvedUri);
-  }
-
-  return imageUri.normalize().valueOf();
-};

package/src/components/MarkdownViewer/CustomComponents/ScrollToHashElement.tsx

@@ -1,96 +0,0 @@
-/*
- * This is copied from https://github.com/ncoughlin/scroll-to-hash-element/blob/main/src/index.tsx
- * Unfortunately this package does not contain typescript definitions, so we can not use it directly.
- */
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-interface ScrollToHashElementProps {
-  /** On first run do we jump or scroll? */
-  initialBehavior?: ScrollBehavior;
-  behavior?: ScrollBehavior;
-  inline?: ScrollLogicalPosition;
-  block?: ScrollLogicalPosition;
-}
-
-export const ScrollToHashElement = ({
-  behavior = 'auto',
-  initialBehavior = 'auto',
-  inline = 'nearest',
-  block = 'start',
-}: ScrollToHashElementProps): null => {
-  const [hash, setHash] = useState(window.location.hash);
-  const [count, setCount] = useState(0);
-  const originalListeners = useRef<{ [key: string]: Function }>({});
-
-  // We need to know if this is the first run. If it is, we can do an instant jump, no scrolling.
-  const [firstRun, setFirstRun] = useState(true);
-  useEffect(() => setFirstRun(false), []);
-
-  useEffect(() => {
-    const handleLocationChange = () => {
-      setHash(window.location.hash);
-
-      // We increment count just so the layout effect will run if the hash is the same.
-      // Otherwise the user might click a hashlink a second time and it won't go anywhere.
-      setCount((count: number) => count + 1);
-    };
-
-    const onPopState = () => {
-      window.dispatchEvent(new Event('locationchange'));
-    };
-
-    const addWindowListeners = () => {
-      originalListeners.current.pushState = window.history.pushState;
-      originalListeners.current.replaceState = window.history.replaceState;
-
-      window.history.pushState = function (...args: any) {
-        const result = originalListeners.current.pushState.apply(this, args);
-        window.dispatchEvent(new Event('pushstate'));
-        window.dispatchEvent(new Event('locationchange'));
-        return result;
-      };
-
-      window.history.replaceState = function (...args: any) {
-        const result = originalListeners.current.replaceState.apply(this, args);
-        window.dispatchEvent(new Event('replacestate'));
-        window.dispatchEvent(new Event('locationchange'));
-        return result;
-      };
-
-      window.addEventListener('popstate', onPopState);
-      window.addEventListener('locationchange', handleLocationChange);
-    };
-
-    // Cleanup the event listeners on component unmount
-    const removeWindowListeners = () => {
-      window.history.pushState = originalListeners.current.pushState as typeof window.history.pushState;
-      window.history.replaceState = originalListeners.current.replaceState as typeof window.history.replaceState;
-      window.removeEventListener('popstate', onPopState);
-      window.removeEventListener('locationchange', handleLocationChange);
-    };
-
-    addWindowListeners();
-    return removeWindowListeners;
-  }, []);
-
-  useLayoutEffect(() => {
-    const removeHashCharacter = (str: string) => {
-      return str.slice(1);
-    };
-
-    if (hash) {
-      const element = document.getElementById(removeHashCharacter(hash));
-
-      if (element) {
-        element.scrollIntoView({
-          behavior: firstRun ? initialBehavior : behavior,
-          inline: inline,
-          block: block,
-        });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hash, count, firstRun]);
-
-  return null;
-};

package/src/components/MarkdownViewer/MarkdownViewer.spec.tsx

@@ -1,170 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { NodeType } from '@stoplight/types';
-import { render, screen } from '@testing-library/react';
-import * as React from 'react';
-
-import { schemaWithRefs } from '../../__fixtures__/articles/schema-with-refs';
-import { withPersistenceBoundary } from '../../context/Persistence';
-import { IntegrationKind } from '../../types';
-import { MarkdownViewer } from '.';
-import { CodeComponent } from './CustomComponents/CodeComponent';
-import { MarkdownComponentsProvider } from './CustomComponents/Provider';
-import { createResolvedImageComponent } from './CustomComponents/ResolvedImage';
-
-describe('MarkdownViewer', () => {
-  describe('with ResolvedImage', () => {
-    const common = {
-      id: 54234624,
-      data: 'some data',
-      type: NodeType.Article,
-      name: 'Some Article',
-      uri: '/docs/some-article.md',
-      summary: 'some summary',
-      branchSlug: 'master',
-      workspaceIntegration: {
-        kind: IntegrationKind.Github,
-        apiUrl: 'https://api.github.com',
-        hostUrl: 'https://github.com',
-      },
-      externalOrgSlug: 'organisation',
-      externalSlug: 'project',
-    };
-
-    it.each([
-      [
-        IntegrationKind.Github,
-        {
-          ...common,
-          workspaceIntegration: {
-            kind: IntegrationKind.Github,
-            apiUrl: 'https://api.github.com',
-            hostUrl: 'https://github.com',
-          },
-        },
-        'https://raw.github.com/organisation/project/master/common/images/icon48.png',
-      ],
-
-      [
-        IntegrationKind.Gitlab,
-        {
-          ...common,
-          workspaceIntegration: {
-            kind: IntegrationKind.Gitlab,
-            apiUrl: 'https://api.gitlab.com',
-            hostUrl: 'https://gitlab.com',
-          },
-        },
-        'https://gitlab.com/organisation/project/raw/master/common/images/icon48.png',
-      ],
-
-      [
-        IntegrationKind.Gitea,
-        {
-          ...common,
-          workspaceIntegration: {
-            kind: IntegrationKind.Gitea,
-            apiUrl: 'https://api.gitea.com',
-            hostUrl: 'https://gitea.com',
-          },
-        },
-        'https://gitea.com/organisation/project/raw/branch/master/common/images/icon48.png',
-      ],
-
-      [
-        IntegrationKind.BitbucketServer,
-        {
-          ...common,
-          workspaceIntegration: {
-            kind: IntegrationKind.BitbucketServer,
-            apiUrl: 'https://api.bitbucket.com',
-            hostUrl: 'https://bitbucket.com',
-          },
-        },
-        'https://api.bitbucket.com/projects/organisation/repos/project/browse/common/images/icon48.png?raw=',
-      ],
-
-      [
-        IntegrationKind.BitbucketCloud,
-        {
-          ...common,
-          workspaceIntegration: {
-            kind: IntegrationKind.BitbucketCloud,
-            apiUrl: 'https://api.bitbucket.com',
-            hostUrl: 'https://bitbucket.com',
-          },
-        },
-        'https://bitbucket.com/organisation/project/raw/master/common/images/icon48.png',
-      ],
-    ])('resolves relative image url for integration with %s', (_, branchNode, expectedUrl) => {
-      render(
-        <MarkdownComponentsProvider value={{ img: createResolvedImageComponent(branchNode) }}>
-          <MarkdownViewer markdown={`![alt text](../../common/images/icon48.png "Logo Title Text 1")`} />
-        </MarkdownComponentsProvider>,
-      );
-
-      const image = screen.getByTitle('Logo Title Text 1');
-
-      expect(image).toHaveAttribute('src', expectedUrl);
-    });
-  });
-
-  describe('CodeComponent', () => {
-    it('Should render TryIt correctly', () => {
-      const MarkdownViewerWithTryIt = withPersistenceBoundary(MarkdownViewer);
-      const markdown = `### Raw Http Request
-
-<!-- type: http -->
-
-\`\`\`json
-{
-  "method": "get",
-  "url": "/gifs/search",
-  "baseUrl": "http://api.giphy.com/v1",
-  "headers": {},
-  "query": {
-    "api_key": ["dc6zaTOxFJmzC"],
-    "limit": [],
-    "q": ["cats"]
-  }
-}
-\`\`\`
-`;
-
-      const { unmount } = render(
-        <MarkdownComponentsProvider value={{ code: CodeComponent }}>
-          <MarkdownViewerWithTryIt markdown={markdown} />
-        </MarkdownComponentsProvider>,
-      );
-
-      expect(screen.getByText('http://api.giphy.com/v1/gifs/search')).toBeInTheDocument();
-
-      // has default
-      expect(screen.getByText('api_key*')).toBeInTheDocument();
-      expect(screen.getByLabelText('api_key')).toHaveProperty('value', 'dc6zaTOxFJmzC');
-
-      expect(screen.getByText('q*')).toBeInTheDocument();
-      expect(screen.getByLabelText('q')).toHaveProperty('value', 'cats');
-
-      // no default
-      expect(screen.getByText('limit')).toBeInTheDocument();
-      expect(screen.getByLabelText('limit')).toHaveProperty('value', '');
-
-      unmount();
-    });
-
-    it('Should resolve refs in schema', () => {
-      const MarkdownViewerWithTryIt = withPersistenceBoundary(MarkdownViewer);
-
-      const { unmount } = render(
-        <MarkdownComponentsProvider value={{ code: CodeComponent }}>
-          <MarkdownViewerWithTryIt markdown={schemaWithRefs} />
-        </MarkdownComponentsProvider>,
-      );
-
-      expect(screen.getByText(/Inner referenced object/)).toBeInTheDocument();
-
-      unmount();
-    });
-  });
-});

package/src/components/MarkdownViewer/index.tsx

@@ -1,10 +0,0 @@
-import { IMarkdownViewerProps, MarkdownViewer as MarkdownViewerComponent } from '@stoplight/markdown-viewer';
-import * as React from 'react';
-
-/**
- * This wrapper is no longer needed and can be removed in the future.
- */
-export const MarkdownViewer = (props: IMarkdownViewerProps) => {
-  return <MarkdownViewerComponent {...props} />;
-};
-MarkdownViewer.displayName = 'MarkdownViewer';

package/src/components/NonIdealState.tsx

@@ -1,20 +0,0 @@
-import { Box, Flex, Heading, Icon, IIconProps, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-type NonIdealStateProps = {
-  description?: React.ReactNode;
-  icon?: IIconProps['icon'];
-  title?: React.ReactNode;
-};
-
-export const NonIdealState: React.FC<NonIdealStateProps> = ({ description, icon, title }) => {
-  return (
-    <Flex flexDirection="col" alignItems="center" justifyContent="center" textAlign="center" w="full" h="full">
-      <Box as={Icon} icon={icon || ['fas', 'exclamation-triangle']} color="light" fontSize="6xl" mb={4} />
-      <Heading size={4} mb={4}>
-        {title}
-      </Heading>
-      <Text>{description}</Text>
-    </Flex>
-  );
-};

package/src/components/PoweredByLink.tsx

@@ -1,30 +0,0 @@
-import { faBolt } from '@fortawesome/free-solid-svg-icons';
-import { Box, Flex, Icon } from '@stoplight/mosaic';
-import * as React from 'react';
-
-export const PoweredByLink: React.FC<{
-  source: string;
-  pathname: string;
-  packageType: 'elements' | 'elements-dev-portal';
-  layout?: 'sidebar' | 'stacked';
-}> = ({ source, pathname, packageType, layout = 'sidebar' }) => {
-  return (
-    <Flex
-      as="a"
-      align="center"
-      borderT={layout === 'stacked' ? undefined : true}
-      px={layout === 'stacked' ? 1 : 4}
-      py={3}
-      justify={layout === 'stacked' ? 'end' : undefined}
-      href={`https://stoplight.io/?utm_source=${packageType}&utm_medium=${source}&utm_campaign=powered_by&utm_content=${pathname}`}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <Box as={Icon} icon={faBolt} mr={1} className="fa-fw" style={{ color: 'rgba(144, 97, 249, 1)' }} />
-
-      <Box>
-        powered by&nbsp;<strong>Stoplight</strong>
-      </Box>
-    </Flex>
-  );
-};

package/src/components/RequestSamples/RequestSamples.stories.tsx

@@ -1,67 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import * as React from 'react';
-
-import { RequestSamples, RequestSamplesProps } from './RequestSamples';
-
-export default {
-  title: 'Internal/RequestSamples',
-  component: RequestSamples,
-} as Meta<RequestSamplesProps>;
-
-const Template: Story<RequestSamplesProps> = args => <RequestSamples {...args} />;
-
-export const HoistedStory = Template.bind({});
-
-HoistedStory.args = {
-  request: {
-    url: 'https://google.com',
-    method: 'post',
-    bodySize: -1,
-    cookies: [],
-    headers: [],
-    headersSize: -1,
-    httpVersion: '1.1',
-    queryString: [],
-  },
-};
-HoistedStory.storyName = 'RequestSamples';
-
-export const RequestSampleWithCustomCodes = Template.bind({});
-
-RequestSampleWithCustomCodes.args = {
-  customCodeSamples: [
-    {
-      lang: 'shell',
-      label: 'cURL',
-      lib: 'curl',
-      source: 'echo "Hello, World from cURL!"',
-    },
-    {
-      lang: 'shell',
-      label: 'Wget',
-      lib: 'wget',
-      source: 'echo "Hello, World from Wget!"',
-    },
-    {
-      lang: 'go',
-      label: 'Go',
-      source: 'Some go sample',
-    },
-    {
-      lang: 'rust',
-      label: 'Rust',
-      source: 'Hello rustations!',
-    },
-  ],
-  request: {
-    url: 'https://google.com',
-    method: 'post',
-    bodySize: -1,
-    cookies: [],
-    headers: [],
-    headersSize: -1,
-    httpVersion: '1.1',
-    queryString: [],
-  },
-};
-RequestSampleWithCustomCodes.storyName = 'RequestSampleWithCustomCodes';