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

package/src/components/Layout/ResponsiveSidebarLayout.tsx

@@ -0,0 +1,175 @@
+import { Box, Flex, Heading } from '@stoplight/mosaic';
+import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+import { LogoProps } from '../../types';
+import { Logo } from '../Logo';
+import { PoweredByLink } from '../PoweredByLink';
+import type { CustomLinkComponent, TableOfContentsItem } from '../TableOfContents';
+import { TableOfContents } from '../TableOfContents';
+import { MobileTopNav } from './MobileTopNav';
+
+type ResponsiveSidebarLayoutProps = {
+  maxContentWidth?: number;
+  sidebarWidth?: number;
+  children?: React.ReactNode;
+  name: string;
+  logo?: string | LogoProps;
+  tree?: TableOfContentsItem[];
+  onTocClick?(): void;
+};
+
+const MAX_CONTENT_WIDTH = 1800;
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+
+export const ResponsiveSidebarLayout = React.forwardRef<HTMLDivElement, ResponsiveSidebarLayoutProps>(
+  (
+    { children, name, logo, tree, onTocClick, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH },
+    ref,
+  ) => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
+    const { pathname } = useLocation();
+
+    React.useEffect(() => {
+      // Scroll to top on page change
+      scrollRef.current?.scrollTo(0, 0);
+    }, [pathname]);
+
+    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
+
+    return (
+      <Flex ref={ref} className="sl-elements-api" pin h="full">
+        {!isResponsiveLayoutEnabled && (
+          <Flex
+            ref={sidebarRef}
+            onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
+            style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
+          >
+            <Flex
+              direction="col"
+              bg="canvas-100"
+              borderR
+              pt={8}
+              pos="sticky"
+              pinY
+              overflowY="auto"
+              style={{
+                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+                width: `${currentSidebarWidth}px`,
+                minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+              }}
+            >
+              <Sidebar
+                name={name}
+                logo={logo}
+                tree={tree!}
+                pathname={pathname}
+                onTocClick={onTocClick}
+                isInResponsiveMode={false}
+              />
+            </Flex>
+            <Flex
+              justifySelf="end"
+              flexGrow={0}
+              flexShrink={0}
+              resize="x"
+              onMouseDown={startResizing}
+              style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
+            />
+          </Flex>
+        )}
+
+        <Box ref={scrollRef} bg="canvas" px={!isResponsiveLayoutEnabled ? 24 : 6} flex={1} w="full" overflowY="auto">
+          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
+            {children}
+          </Box>
+        </Box>
+
+        {isResponsiveLayoutEnabled && (
+          <MobileTopNav onTocClick={onTocClick!} name={name} logo={logo} tree={tree!} pathname={pathname} />
+        )}
+      </Flex>
+    );
+  },
+);
+
+type SidebarRef = React.Ref<HTMLDivElement>;
+type SidebarWidth = number;
+type StartResizingFn = () => void;
+
+export const Sidebar = ({
+  name,
+  logo,
+  tree,
+  pathname,
+  onTocClick,
+  isInResponsiveMode,
+}: {
+  name: string;
+  logo?: string | LogoProps;
+  tree: TableOfContentsItem[];
+  pathname: string;
+  onTocClick?(): void;
+  isInResponsiveMode: boolean;
+}) => {
+  return (
+    <>
+      <Flex ml={4} mb={5} alignItems="center">
+        {typeof logo === 'string' ? (
+          <Logo logo={{ url: logo, altText: 'logo' }} />
+        ) : (
+          typeof logo === 'object' && <Logo logo={logo} />
+        )}
+        <Heading size={4}>{name}</Heading>
+      </Flex>
+      <Flex flexGrow flexShrink overflowY="auto" direction="col">
+        <TableOfContents
+          tree={tree}
+          activeId={pathname}
+          Link={Link as CustomLinkComponent}
+          onLinkClick={onTocClick}
+          isInResponsiveMode={isInResponsiveMode}
+        />
+      </Flex>
+      <PoweredByLink source={name} pathname={pathname} packageType="elements" />
+    </>
+  );
+};
+
+function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
+  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+
+  const startResizing = React.useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = React.useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = React.useCallback(
+    mouseMoveEvent => {
+      if (isResizing) {
+        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
+        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+      }
+    },
+    [isResizing],
+  );
+
+  React.useEffect(() => {
+    window?.addEventListener('mousemove', resize);
+    window?.addEventListener('mouseup', stopResizing, { passive: true });
+    return () => {
+      window?.removeEventListener('mousemove', resize);
+      window?.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resize, stopResizing]);
+
+  return [sidebarRef, currentSidebarWidth, startResizing];
+}

package/src/components/Layout/SidebarLayout.tsx

@@ -0,0 +1,107 @@
+import { Box, Flex } from '@stoplight/mosaic';
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+type SidebarLayoutProps = {
+  sidebar: React.ReactNode;
+  maxContentWidth?: number;
+  sidebarWidth?: number;
+  children?: React.ReactNode;
+};
+
+const MAX_CONTENT_WIDTH = 1800;
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+
+export const SidebarLayout = React.forwardRef<HTMLDivElement, SidebarLayoutProps>(
+  ({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
+    const scrollRef = React.useRef<HTMLDivElement | null>(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
+    const { pathname } = useLocation();
+
+    React.useEffect(() => {
+      // Scroll to top on page change
+      scrollRef.current?.scrollTo(0, 0);
+    }, [pathname]);
+
+    return (
+      <Flex ref={ref} className="sl-elements-api" pin h="full">
+        <Flex
+          ref={sidebarRef}
+          onMouseDown={(e: React.MouseEvent<HTMLElement>) => e.preventDefault()}
+          style={{ maxWidth: `${SIDEBAR_MAX_WIDTH}px` }}
+        >
+          <Flex
+            direction="col"
+            bg="canvas-100"
+            borderR
+            pt={8}
+            pos="sticky"
+            pinY
+            overflowY="auto"
+            style={{
+              paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
+              width: `${currentSidebarWidth}px`,
+              minWidth: `${SIDEBAR_MIN_WIDTH}px`,
+            }}
+          >
+            {sidebar}
+          </Flex>
+          <Flex
+            justifySelf="end"
+            flexGrow={0}
+            flexShrink={0}
+            resize="x"
+            onMouseDown={startResizing}
+            style={{ width: '1em', flexBasis: '6px', cursor: 'ew-resize' }}
+          />
+        </Flex>
+
+        <Box ref={scrollRef} bg="canvas" px={24} flex={1} w="full" overflowY="auto">
+          <Box style={{ maxWidth: `${maxContentWidth - currentSidebarWidth}px` }} py={16}>
+            {children}
+          </Box>
+        </Box>
+      </Flex>
+    );
+  },
+);
+
+type SidebarRef = React.Ref<HTMLDivElement>;
+type SidebarWidth = number;
+type StartResizingFn = () => void;
+
+function useResizer(sidebarWidth: number): [SidebarRef, SidebarWidth, StartResizingFn] {
+  const sidebarRef = React.useRef<HTMLDivElement | null>(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+
+  const startResizing = React.useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = React.useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = React.useCallback(
+    mouseMoveEvent => {
+      if (isResizing) {
+        const value = mouseMoveEvent.clientX - sidebarRef.current!.getBoundingClientRect().left;
+        setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+      }
+    },
+    [isResizing],
+  );
+
+  React.useEffect(() => {
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResizing, { passive: true });
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resize, stopResizing]);
+
+  return [sidebarRef, currentSidebarWidth, startResizing];
+}

package/src/components/LinkHeading.tsx

@@ -0,0 +1,21 @@
+import { LinkHeading as MosaicLinkHeading, LinkHeadingProps } from '@stoplight/mosaic';
+import * as React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { RouterTypeContext, useRouterType } from '../context/RouterType';
+
+export const LinkHeading = React.memo<LinkHeadingProps>(function LinkHeading(props) {
+  const isUsingRouter = !!useRouterType();
+  const Comp = isUsingRouter ? CustomLinkHeading : MosaicLinkHeading;
+
+  return <Comp {...props} />;
+});
+
+const CustomLinkHeading = React.memo<LinkHeadingProps>(function LinkHeading({ id: _id, ...props }) {
+  const { pathname } = useLocation();
+  const routerKind = React.useContext(RouterTypeContext);
+  const route = pathname.split('#')[0];
+  const id = routerKind === 'hash' ? `${route}#${_id}` : _id;
+
+  return <MosaicLinkHeading id={id} {...props} />;
+});

package/src/components/LoadMore.tsx

@@ -0,0 +1,20 @@
+import { Button, Flex, Text } from '@stoplight/mosaic';
+import * as React from 'react';
+
+interface LoadMoreProps {
+  loading: boolean;
+  onClick: () => void;
+}
+
+export const LoadMore: React.FC<LoadMoreProps> = ({ loading, onClick }) => {
+  return (
+    <Flex flexDirection="col" justifyContent="center" alignItems="center" style={{ height: '400px' }}>
+      <Button aria-label="load-example" onPress={onClick} appearance="minimal" loading={loading} disabled={loading}>
+        {loading ? 'Loading...' : 'Load examples'}
+      </Button>
+      <Text fontSize="base" textAlign="center">
+        Large examples are not rendered by default.
+      </Text>
+    </Flex>
+  );
+};

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,9 @@
+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/Logo.tsx

@@ -0,0 +1,25 @@
+import { Box } from '@stoplight/mosaic';
+import * as React from 'react';
+
+import { LogoProps } from '../types';
+
+export const Logo: React.FC<{ logo: LogoProps }> = ({ logo }) => {
+  return (
+    <Box
+      display="inline"
+      mr={3}
+      rounded="lg"
+      overflowY="hidden"
+      overflowX="hidden"
+      style={{ backgroundColor: logo.backgroundColor ?? 'transparent' }}
+    >
+      {logo.href ? (
+        <a href={logo.href} target="_blank" rel="noopener noreferrer">
+          <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
+        </a>
+      ) : (
+        <img src={logo.url} height="30px" width="30px" alt={logo.altText} />
+      )}
+    </Box>
+  );
+};

package/src/components/MarkdownViewer/CustomComponents/CodeComponent.spec.ts

@@ -0,0 +1,90 @@
+import { HttpParamStyles, IHttpRequest } from '@stoplight/types';
+
+import { parseHttpRequest } from './CodeComponent';
+
+describe('parseHttpRequest', () => {
+  it('parses HttpRequest with relative url', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'get',
+      url: '/todos',
+      baseUrl: 'http://test',
+      query: {},
+      headers: {},
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toEqual({
+      id: '?http-operation-id?',
+      method: 'get',
+      path: '/todos',
+      servers: [{ id: '?http-server-/todos?', url: 'http://test' }],
+      request: {
+        headers: [],
+        query: [],
+      },
+      responses: [],
+    });
+  });
+
+  it('parses HttpRequest with absolute url', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'get',
+      url: 'http://test/todos',
+      baseUrl: '',
+      query: {},
+      headers: {},
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toEqual({
+      id: '?http-operation-id?',
+      method: 'get',
+      path: '/todos',
+      servers: [{ id: '?http-server-http://test/todos?', url: 'http://test' }],
+      request: {
+        headers: [],
+        query: [],
+      },
+      responses: [],
+    });
+  });
+
+  it('parses HttpRequest parameters', () => {
+    const request: IHttpRequest = {
+      id: '?http-request?',
+      method: 'post',
+      url: '/todos/{id}',
+      baseUrl: 'http://test',
+      query: {
+        limit: ['10'],
+        skip: [],
+      },
+      headers: {
+        apikey: '123',
+      },
+      body: '{}',
+    };
+
+    const httpOperation = parseHttpRequest(request);
+
+    expect(httpOperation).toMatchObject({
+      id: '?http-operation-id?',
+      method: 'post',
+      path: '/todos/{id}',
+      servers: [{ url: 'http://test' }],
+      request: {
+        query: [
+          { name: 'limit', style: HttpParamStyles.Form, schema: { default: '10' }, required: true },
+          { name: 'skip', style: HttpParamStyles.Form, schema: {}, required: false },
+        ],
+        headers: [{ name: 'apikey', style: HttpParamStyles.Simple, schema: { default: '123' }, required: true }],
+        path: [{ name: 'id', style: HttpParamStyles.Simple, required: true }],
+        body: { contents: [{ mediaType: 'application/json', schema: { default: '{}' } }] },
+      },
+    });
+  });
+});

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

@@ -0,0 +1,164 @@
+/* eslint-disable prettier/prettier */
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import { DefaultSMDComponents } from '@stoplight/markdown-viewer';
+import { Box, Flex, Icon } from '@stoplight/mosaic';
+import { HttpParamStyles, IHttpOperation, IHttpRequest, NodeType } from '@stoplight/types';
+import { isPlainObject, isString } from 'lodash';
+import React from 'react';
+import URI from 'urijs';
+
+import { NodeTypeColors, NodeTypeIconDefs } from '../../../constants';
+import {
+  InlineRefResolverProvider,
+  useInlineRefResolver,
+  useSchemaInlineRefResolver,
+} from '../../../context/InlineRefResolver';
+import { useOptionsCtx } from '../../../context/Options';
+import { PersistenceContextProvider } from '../../../context/Persistence';
+import { useParsedValue } from '../../../hooks/useParsedValue';
+import { JSONSchema } from '../../../types';
+import { isHttpOperation, isJSONSchema } from '../../../utils/guards';
+import { getOriginalObject } from '../../../utils/ref-resolving/resolvedObject';
+import { TryIt } from '../../TryIt';
+import { CustomComponentMapping } from './Provider';
+
+type PartialHttpRequest = Pick<IHttpRequest, 'method' | 'url'> & Partial<IHttpRequest>;
+
+function isPartialHttpRequest(maybeHttpRequest: unknown): maybeHttpRequest is PartialHttpRequest {
+  return (
+    isPlainObject(maybeHttpRequest) &&
+    isString((maybeHttpRequest as PartialHttpRequest).method) &&
+    isString((maybeHttpRequest as PartialHttpRequest).url)
+  );
+}
+
+interface ISchemaAndDescriptionProps {
+  schema: JSONSchema;
+  title?: string;
+}
+
+const SchemaAndDescription = ({ title: titleProp, schema }: ISchemaAndDescriptionProps) => {
+  const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
+  const { renderExtensionAddon } = useOptionsCtx();
+
+  const title = titleProp ?? schema.title;
+  return (
+    <Box py={2}>
+      {title && (
+        <Flex alignItems="center" p={2}>
+          <Icon icon={NodeTypeIconDefs[NodeType.Model]} color={NodeTypeColors[NodeType.Model]} />
+          <Box color="muted" px={2}>
+            {title}
+          </Box>
+        </Flex>
+      )}
+
+      <JsonSchemaViewer
+        resolveRef={resolveRef}
+        maxRefDepth={maxRefDepth}
+        schema={getOriginalObject(schema)}
+        renderExtensionAddon={renderExtensionAddon}
+      />
+    </Box>
+  );
+};
+
+export { DefaultSMDComponents };
+
+export const CodeComponent: CustomComponentMapping['code'] = props => {
+  const { title, jsonSchema, http, resolved, children } = props;
+
+  const resolver = useInlineRefResolver();
+
+  const value = resolved || String(Array.isArray(children) ? children[0] : children);
+  const parsedValue = useParsedValue(value);
+
+  if (jsonSchema) {
+    if (!isJSONSchema(parsedValue)) {
+      return null;
+    }
+
+    return (
+      <InlineRefResolverProvider
+        document={parsedValue}
+        resolver={resolver?.resolver}
+        maxRefDepth={resolver?.maxRefDepth}
+      >
+        <SchemaAndDescription title={title} schema={parsedValue} />
+      </InlineRefResolverProvider>
+    );
+  }
+
+  if (http) {
+    if (!isPlainObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+      return null;
+    }
+
+    return (
+      <PersistenceContextProvider>
+        <TryIt
+          httpOperation={isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue)}
+          embeddedInMd
+        />
+      </PersistenceContextProvider>
+    );
+  }
+
+  const DefaultCode = DefaultSMDComponents.code!;
+  return <DefaultCode {...props} />;
+};
+
+export function parseHttpRequest(data: PartialHttpRequest): IHttpOperation {
+  const uri = URI(data.url);
+  const pathParam = data.url.match(/[^{\}]+(?=})/g);
+  return {
+    id: '?http-operation-id?',
+    method: data.method,
+    path: uri.is('absolute') ? uri.path() : data.url,
+    servers: [{ id: `?http-server-${uri.href()}?`, url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+    request: {
+      query: Object.entries(data.query || {}).map(([key, value]) => {
+        const defaultVal = Array.isArray(value) ? value[0] : value;
+        return {
+          id: `?http-query-${key}-id?`,
+          name: key,
+          style: HttpParamStyles.Form,
+          schema: { default: defaultVal },
+          required: isHttpRequestParamRequired(defaultVal),
+        };
+      }),
+      headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+        id: `?http-header-${key}-id?`,
+        name: key,
+        style: HttpParamStyles.Simple,
+        schema: { default: value },
+        required: isHttpRequestParamRequired(value),
+      })),
+      path: pathParam?.map(name => ({
+        id: `?http-param-${name}-id?`,
+        name,
+        style: HttpParamStyles.Simple,
+        required: true,
+      })),
+      ...(data.body
+        ? {
+            body: {
+              id: '?http-request-body?',
+              contents: [
+                {
+                  id: '?http-request-body-media?',
+                  mediaType: 'application/json',
+                  schema: { default: data.body },
+                },
+              ],
+            },
+          }
+        : null),
+    },
+    responses: [],
+  };
+}
+
+function isHttpRequestParamRequired(value: unknown) {
+  return typeof value !== 'undefined';
+}

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

@@ -0,0 +1,20 @@
+import {
+  CustomComponentMapping as MDVCustomComponentMapping,
+  MarkdownViewerProvider,
+} from '@stoplight/markdown-viewer';
+import * as React from 'react';
+
+import { CodeComponent } from './CodeComponent';
+
+export type CustomComponentMapping = MDVCustomComponentMapping;
+
+interface MarkdownComponentsProviderProps {
+  value: Partial<CustomComponentMapping> | undefined;
+}
+
+/**
+ * Provides components to markdown-viewer.
+ */
+export const MarkdownComponentsProvider: React.FC<MarkdownComponentsProviderProps> = ({ value, children }) => {
+  return <MarkdownViewerProvider components={{ code: CodeComponent!, ...value }}>{children}</MarkdownViewerProvider>;
+};

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

@@ -0,0 +1,27 @@
+import type { LinkProps } from '@stoplight/mosaic';
+import React from 'react';
+
+const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
+
+export const ReactRouterMarkdownLink = ({
+  title,
+  to,
+  href: _href,
+  children,
+}: Omit<LinkProps, 'target' | 'rel'> & { to?: string }) => {
+  const href = to || _href;
+
+  const isExternal = href !== undefined && externalRegex.test(href);
+  if (isExternal) {
+    return (
+      <a target="_blank" rel="noreferrer noopener" href={href} title={title}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a href={href as string} title={title}>
+      {children}
+    </a>
+  );
+};