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

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

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

@@ -0,0 +1,96 @@
+/*
+ * 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

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

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

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

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

@@ -0,0 +1,67 @@
+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';