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

package/src/components/Layout/ResponsiveSidebarLayout.tsx

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

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

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

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

@@ -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/Logo.tsx

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

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

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

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

@@ -1,27 +0,0 @@
-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>
-  );
-};