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

package/src/constants.ts

@@ -1,176 +0,0 @@
-import {
-  faBookOpen,
-  faCloud,
-  faCrosshairs,
-  faCube,
-  faDatabase,
-  faEnvelope,
-  faImage,
-  faQuestionCircle,
-  IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-import { IntentVals } from '@stoplight/mosaic';
-import { Dictionary, HttpMethod, HttpSecurityScheme, NodeType } from '@stoplight/types';
-
-export const NodeTypeColors: Readonly<Dictionary<string, NodeType>> = {
-  http_operation: '#6a6acb',
-  http_webhook: 'primary',
-  http_service: '#e056fd',
-  article: '#399da6',
-  model: '#ef932b',
-  http_server: '',
-  generic: '',
-  unknown: '',
-  table_of_contents: '',
-  spectral_ruleset: '',
-  styleguide: '',
-  image: '',
-  http_callback: '',
-  stoplight_override: '',
-  stoplight_resolutions: '',
-};
-
-export const NodeTypePrettyName: Readonly<Dictionary<string, NodeType>> = {
-  http_operation: 'Endpoint',
-  http_webhook: 'Webhook',
-  http_service: 'API',
-  article: 'Article',
-  model: 'Model',
-  http_server: 'Server',
-  generic: '',
-  unknown: '',
-  table_of_contents: '',
-  spectral_ruleset: '',
-  styleguide: '',
-  image: '',
-  http_callback: '',
-  stoplight_override: '',
-  stoplight_resolutions: '',
-};
-
-export const NodeTypeIconDefs: Readonly<Dictionary<IconDefinition, NodeType>> = {
-  http_operation: faCrosshairs,
-  http_webhook: faEnvelope,
-  http_service: faCloud,
-  article: faBookOpen,
-  model: faCube,
-  http_server: faDatabase,
-  unknown: faQuestionCircle,
-  generic: faQuestionCircle,
-  table_of_contents: faQuestionCircle,
-  spectral_ruleset: faQuestionCircle,
-  styleguide: faQuestionCircle,
-  image: faImage,
-  http_callback: faQuestionCircle,
-  stoplight_override: faQuestionCircle,
-  stoplight_resolutions: faQuestionCircle,
-};
-
-export const HttpSecuritySchemeColors: Readonly<Partial<Record<HttpSecurityScheme['type'], string>>> = {
-  apiKey: 'green',
-  http: 'orange',
-  oauth2: 'red',
-  openIdConnect: 'blue',
-  mutualTLS: 'blue',
-};
-
-export const HttpMethodColors: Readonly<Record<HttpMethod, string>> = {
-  get: 'success',
-  post: 'primary',
-  put: 'warning',
-  patch: 'warning',
-  delete: 'danger',
-  head: '#9061F9',
-  options: '#0D5AA7',
-  trace: '#0D0B28',
-};
-
-export const HttpCodeColor: Readonly<Record<number, string>> = {
-  0: 'red',
-  1: 'gray',
-  2: 'green',
-  3: 'yellow',
-  4: 'orange',
-  5: 'red',
-};
-
-/**
- *  Map of HTTP codes to their common description
- */
-export const HttpCodeDescriptions: Readonly<Record<number, string>> = {
-  100: 'Continue',
-  101: 'Switching Protocols',
-  200: 'OK',
-  201: 'Created',
-  202: 'Accepted',
-  203: 'Non-Authoritative Information',
-  204: 'No Content',
-  205: 'Reset Content',
-  206: 'Partial Content',
-  422: 'Unprocessable Entity',
-  226: 'IM Used',
-  300: 'Multiple Choices',
-  301: 'Moved Permanently',
-  302: 'Found',
-  303: 'See Other',
-  304: 'Not Modified',
-  305: 'Use Proxy',
-  306: '(Unused)',
-  307: 'Temporary Redirect',
-  308: 'Permanent Redirect (experiemental)',
-  400: 'Bad Request',
-  401: 'Unauthorized',
-  402: 'Payment Required',
-  403: 'Forbidden',
-  404: 'Not Found',
-  405: 'Method Not Allowed',
-  406: 'Not Acceptable',
-  407: 'Proxy Authentication Required',
-  408: 'Request Timeout',
-  409: 'Conflict',
-  410: 'Gone',
-  411: 'Length Required',
-  412: 'Precondition Failed',
-  413: 'Request Entity Too Large',
-  414: 'Request-URI Too Long',
-  415: 'Unsupported Media Type',
-  416: 'Requested Range Not Satisfiable',
-  417: 'Expectation Failed',
-  418: "I'm a teapot (RFC 2324)",
-  420: 'Enhance Your Calm (Twitter)',
-  426: 'Upgrade Required',
-  428: 'Precondition Required',
-  429: 'Too Many Requests',
-  431: 'Request Header Fields Too Large',
-  444: 'No Response (Nginx)',
-  449: 'Retry With (Microsoft)',
-  450: 'Blocked by Windows Parental Controls (Microsoft)',
-  451: 'Unavailable For Legal Reasons',
-  499: 'Client Closed Request (Nginx)',
-  500: 'Internal Server Error',
-  501: 'Not Implemented',
-  502: 'Bad Gateway',
-  503: 'Service Unavailable',
-  504: 'Gateway Timeout',
-  505: 'HTTP Version Not Supported',
-  506: 'Variant Also Negotiates (Experimental)',
-  507: 'Insufficient Storage (WebDAV)',
-  508: 'Loop Detected (WebDAV)',
-  509: 'Bandwidth Limit Exceeded (Apache)',
-  510: 'Not Extended',
-  511: 'Network Authentication Required',
-  598: 'Network read timeout error',
-  599: 'Network connect timeout error',
-};
-
-export const badgeDefaultBackgroundColor = '#293742';
-export const badgeDefaultColor = '#FFFFFF';
-
-export const CodeToIntentMap: Readonly<Record<number, IntentVals>> = {
-  2: 'success',
-  4: 'warning',
-  5: 'danger',
-};
-
-export const OptionalSecurityMessage =
-  'Requiring authorization is optional.  A user can access data without authorization or with authorization, if provided.';

package/src/containers/MockingProvider.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-export const MockingContext = createNamedContext<{
-  mockUrl?: string;
-  hideMocking?: boolean;
-}>('MockingContext', { mockUrl: undefined, hideMocking: undefined });
-
-export const MockingProvider: React.FC<{
-  mockUrl?: string;
-  hideMocking?: boolean;
-}> = ({ mockUrl, hideMocking, children }) => {
-  const info = {
-    mockUrl,
-    hideMocking: hideMocking || !mockUrl, // Mocking is hidden if no mock url is provided or if is forced hidden
-  };
-  return <MockingContext.Provider value={info}>{children}</MockingContext.Provider>;
-};
-
-function createNamedContext<T>(name: string, defaultValue: T): React.Context<T> {
-  const context = React.createContext(defaultValue);
-  context.displayName = name;
-  return context;
-}

package/src/context/InlineRefResolver.spec.tsx

@@ -1,183 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import * as React from 'react';
-
-import type { ReferenceInfo } from '../utils/ref-resolving/ReferenceResolver';
-import {
-  InlineRefResolverProvider,
-  useDocument,
-  useInlineRefResolver,
-  useResolvedObject,
-  useSchemaInlineRefResolver,
-} from './InlineRefResolver';
-
-describe('InlineRefResolver', () => {
-  describe('useDocument hook', () => {
-    it('does not return document if it is not a proper object', () => {
-      const document = 'This is not an object, so should not be returned from useDocument hook';
-
-      const wrapper: React.FC<{ document: unknown }> = ({ children, document }) => (
-        <InlineRefResolverProvider document={document}>{children}</InlineRefResolverProvider>
-      );
-      const { result } = renderHook(() => useDocument(), { wrapper, initialProps: { document } });
-
-      expect(result.current).toBeUndefined();
-    });
-  });
-
-  describe('useInlineRefResolver hook', () => {
-    it('returns the same function on every rerender', () => {
-      const document = { some: 'document object' };
-
-      const wrapper: React.FC<{ document: object }> = ({ children, document }) => (
-        <InlineRefResolverProvider document={document}>{children}</InlineRefResolverProvider>
-      );
-      const { result, rerender } = renderHook(() => useInlineRefResolver(), { wrapper, initialProps: { document } });
-
-      const firstReturnedFunction = result.current;
-
-      rerender({ document });
-
-      const secondReturnedFunction = result.current;
-
-      expect(firstReturnedFunction?.resolver).toBe(secondReturnedFunction?.resolver);
-    });
-  });
-
-  describe('useResolvedObject hook', () => {
-    it('returns the same proxy, given the same object', () => {
-      const wrapper: React.FC = ({ children }) => <InlineRefResolverProvider>{children}</InlineRefResolverProvider>;
-      const objectToResolve = { some: 'object' };
-      const { result, rerender } = renderHook(() => useResolvedObject(objectToResolve), { wrapper });
-
-      const firstReturnedObject = result.current;
-
-      rerender();
-
-      const secondReturnedObject = result.current;
-
-      expect(firstReturnedObject).toBe(secondReturnedObject);
-    });
-  });
-
-  describe('useSchemaInlineRefResolver', () => {
-    const wrapper: React.FC<{ document: Record<string, unknown> }> = ({ children, document }) => (
-      <InlineRefResolverProvider document={document}>{children}</InlineRefResolverProvider>
-    );
-
-    let document: Record<string, unknown>;
-
-    beforeEach(() => {
-      document = {
-        openapi: '3.0.0',
-        paths: {
-          '/user': {
-            post: {
-              requestBody: {
-                content: {
-                  'application/json': {
-                    schema: {
-                      type: 'object',
-                      properties: {
-                        user: {
-                          $ref: '#/components/schemas/User',
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-        components: {
-          schemas: {
-            User: {
-              type: 'object',
-              nullable: true,
-              properties: {
-                id: {
-                  type: 'integer',
-                  nullable: true,
-                },
-                stars: {
-                  type: 'number',
-                  format: 'int32',
-                },
-              },
-            },
-          },
-        },
-      };
-    });
-
-    it('translates resolved schema', () => {
-      const { result } = renderHook(() => useSchemaInlineRefResolver(), { wrapper, initialProps: { document } });
-
-      const resolved = result.current[0](
-        {
-          source: null,
-          pointer: '#/components/schemas/User',
-        },
-        [],
-        {
-          type: 'object',
-          properties: {
-            user: {
-              $ref: '#/components/schemas/User',
-            },
-          },
-          $schema: 'http://json-schema.org/draft-07/schema#',
-          'x-stoplight': {
-            id: 'd3bf5ceb7dd53',
-          },
-        },
-      );
-
-      expect(resolved).toEqual({
-        type: ['object', 'null'],
-        properties: {
-          id: {
-            type: ['integer', 'null'],
-          },
-          stars: {
-            type: 'number',
-            format: 'int32',
-            maximum: 2147483647,
-            minimum: -2147483648,
-            'x-stoplight': {
-              explicitProperties: ['type', 'format'],
-            },
-          },
-        },
-      });
-    });
-
-    it('retains the result', () => {
-      const refInfo: ReferenceInfo = {
-        source: null,
-        pointer: '#/components/schemas/User',
-      };
-      const currentObject = {
-        type: 'object',
-        properties: {
-          user: {
-            $ref: '#/components/schemas/User',
-          },
-        },
-        $schema: 'http://json-schema.org/draft-07/schema#',
-        'x-stoplight': {
-          id: 'd3bf5ceb7dd53',
-        },
-      };
-
-      const renderedHook = renderHook(() => useSchemaInlineRefResolver(), { wrapper, initialProps: { document } });
-      const renderedHook2 = renderHook(() => useSchemaInlineRefResolver(), { wrapper, initialProps: { document } });
-
-      const resolved = renderedHook.result.current[0]({ ...refInfo }, [], JSON.parse(JSON.stringify(currentObject)));
-
-      expect(renderedHook2.result.current[0]({ ...refInfo }, [], JSON.parse(JSON.stringify(currentObject)))).toBe(
-        resolved,
-      );
-    });
-  });
-});

package/src/context/InlineRefResolver.tsx

@@ -1,94 +0,0 @@
-import { convertToJsonSchema } from '@stoplight/http-spec/oas';
-import { isPlainObject } from '@stoplight/json';
-import type { Dictionary } from '@stoplight/types';
-import * as React from 'react';
-import { useContext } from 'react';
-
-import { defaultResolver, ReferenceResolver } from '../utils/ref-resolving/ReferenceResolver';
-import { createResolvedObject } from '../utils/ref-resolving/resolvedObject';
-
-const translatedObjectSymbol = Symbol('TranslatedObject');
-
-type InlineRefResolverContext = {
-  resolver: ReferenceResolver | undefined;
-  maxRefDepth: number | undefined;
-};
-
-const InlineRefResolverContext = React.createContext<InlineRefResolverContext | undefined>(undefined);
-InlineRefResolverContext.displayName = 'InlineRefResolverContext';
-
-const DocumentContext = React.createContext<object | undefined>(undefined);
-DocumentContext.displayName = 'DocumentContext';
-
-type InlineRefResolverProviderProps = {
-  document?: unknown;
-  resolver?: ReferenceResolver;
-  maxRefDepth?: number;
-};
-
-/**
- * Populates `InlineRefResolverContext` with either a standard inline ref resolver based on `document`, or a custom resolver function provided by the caller.
- */
-export const InlineRefResolverProvider: React.FC<InlineRefResolverProviderProps> = ({
-  children,
-  document: maybeDocument,
-  resolver,
-  maxRefDepth,
-}) => {
-  const document = isPlainObject(maybeDocument) ? maybeDocument : undefined;
-
-  const computedResolver = React.useMemo(
-    () => resolver || (document !== undefined ? defaultResolver(document) : undefined),
-    [document, resolver],
-  );
-
-  return (
-    <InlineRefResolverContext.Provider value={{ resolver: computedResolver, maxRefDepth }}>
-      <DocumentContext.Provider value={document}>{children}</DocumentContext.Provider>
-    </InlineRefResolverContext.Provider>
-  );
-};
-
-export const useInlineRefResolver = () => useContext(InlineRefResolverContext);
-
-export const useDocument = () => useContext(DocumentContext);
-
-export const useResolvedObject = (currentObject: object): object => {
-  const document = useDocument();
-  const { resolver } = useInlineRefResolver() ?? {};
-
-  return React.useMemo(
-    () => createResolvedObject(currentObject, { contextObject: document as object, resolver }),
-    [currentObject, document, resolver],
-  );
-};
-
-export const useSchemaInlineRefResolver = (): [ReferenceResolver, number | undefined] => {
-  const document = useDocument();
-  const { resolver, maxRefDepth } = useInlineRefResolver() ?? {};
-
-  const referenceResolver = React.useCallback<ReferenceResolver>(
-    (...args) => {
-      const resolved = resolver?.(...args);
-      if (!isPlainObject(resolved)) {
-        return resolved;
-      }
-
-      if (translatedObjectSymbol in resolved) {
-        return (resolved as { [translatedObjectSymbol]: unknown })[translatedObjectSymbol];
-      }
-
-      const converted = convertToJsonSchema((document ?? {}) as Dictionary<unknown>, resolved);
-      Reflect.defineProperty(resolved, translatedObjectSymbol, {
-        configurable: true,
-        value: converted,
-      });
-
-      delete converted.$schema;
-      return converted;
-    },
-    [document, resolver],
-  );
-
-  return [referenceResolver, maxRefDepth];
-};

package/src/context/Options.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import type { DocsProps } from '../components/Docs';
-
-const DEFAULT_CONTEXT: ElementsOptionsContextProps = {};
-
-export type ElementsOptionsContextProps = Pick<DocsProps, 'nodeHasChanged' | 'renderExtensionAddon'>;
-
-export const ElementsOptionsContext = React.createContext<ElementsOptionsContextProps>(DEFAULT_CONTEXT);
-
-export const useOptionsCtx = () => {
-  return React.useContext(ElementsOptionsContext) || DEFAULT_CONTEXT;
-};
-
-export type ProviderProps = Partial<ElementsOptionsContextProps> & {
-  children: React.ReactNode;
-};
-
-export function ElementsOptionsProvider({ children, nodeHasChanged, renderExtensionAddon }: ProviderProps) {
-  return (
-    <ElementsOptionsContext.Provider
-      value={Object.assign({}, DEFAULT_CONTEXT, { nodeHasChanged, renderExtensionAddon })}
-    >
-      {children}
-    </ElementsOptionsContext.Provider>
-  );
-}

package/src/context/Persistence.tsx

@@ -1,24 +0,0 @@
-import { Provider as JotaiProvider } from 'jotai';
-import * as React from 'react';
-
-import { getDisplayName } from '../hoc/utils';
-
-/**
- * Provides a context for storing jotai atom values.
- */
-export const PersistenceContextProvider = JotaiProvider;
-
-/**
- * HOC that Wraps `WrappedComponent` in a `PersistenceContextProvider`.
- */
-export function withPersistenceBoundary<T>(WrappedComponent: React.ComponentType<T>) {
-  const WithPersistenceBoundary: React.FC<T> = props => {
-    return (
-      <PersistenceContextProvider>
-        <WrappedComponent {...props} />
-      </PersistenceContextProvider>
-    );
-  };
-  WithPersistenceBoundary.displayName = `withPersistenceBoundary(${getDisplayName(WrappedComponent)})`;
-  return WithPersistenceBoundary;
-}

package/src/context/RouterType.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import type { RouterType } from '../types';
-
-export const RouterTypeContext = React.createContext<RouterType | null>(null);
-
-export const useRouterType = () => {
-  return React.useContext(RouterTypeContext);
-};

package/src/core.css

@@ -1,97 +0,0 @@
-.sl-elements {
-  font-size: 13px;
-}
-
-.sl-elements .svg-inline--fa {
-  display: inline-block;
-}
-
-/* Docs */
-
-.sl-elements .DocsSkeleton {
-  animation: 500ms linear infinite alternate skeleton-glow;
-  background: rgba(206, 217, 224, 0.2);
-  background-clip: padding-box !important;
-  border-color: rgba(206, 217, 224, 0.2) !important;
-  border-radius: 2px;
-  box-shadow: none !important;
-  color: transparent !important;
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-}
-
-.sl-elements .Model {
-  --fs-code: 12px;
-}
-
-/* Table of Contents */
-
-.sl-elements .ElementsTableOfContentsItem:hover {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* TryIt */
-
-.sl-elements .ParameterGrid {
-  display: grid;
-  grid-template-columns: fit-content(120px) 20px auto;
-  row-gap: 3px;
-  align-items: center;
-  padding-bottom: 0;
-  margin-bottom: 16px;
-}
-
-.sl-elements .TryItPanel > :nth-child(2) {
-  /* This, along with the padding:0 margin: 16s above causes margin collapse to guarantee correct spacing around the panels & send button */
-  overflow: auto;
-}
-
-.sl-elements .OperationParametersContent {
-  max-height: 162px; /* 4.5 lines plus padding */
-}
-
-.sl-elements .Checkbox {
-  max-width: 15px;
-  padding-right: 3px;
-}
-
-.sl-elements .TextForCheckBox {
-  padding-top: 6px;
-  padding-left: 9px;
-}
-
-.sl-elements .TextRequestBody {
-  max-height: 200px;
-  overflow-y: auto;
-  padding-bottom: 0;
-  margin-bottom: 16px;
-}
-
-/* HttpOperation */
-
-.sl-elements .HttpOperation .JsonSchemaViewer .sl-markdown-viewer p {
-  font-size: 12px;
-  line-height: 1.5em;
-}
-
-.sl-elements .HttpOperation__Parameters .sl-markdown-viewer p {
-  font-size: 12px;
-  line-height: 1.5em;
-}
-
-.sl-elements .Model .JsonSchemaViewer .sl-markdown-viewer p {
-  font-size: 12px;
-  line-height: 1.5em;
-}
-
-.sl-elements .HttpOperation div[role=tablist] {
-  /* Enables horizontal scrolling for response tabs */
-  overflow-x: auto;
-}
-
-.sl-elements .HttpService .ServerInfo .sl-panel__titlebar div {
-  height: 100%;
-  min-height: 36px;
-}

package/src/hoc/utils.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export function getDisplayName<T>(WrappedComponent: React.ComponentType<T>) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-}

package/src/hoc/withMosaicProvider.spec.tsx

@@ -1,48 +0,0 @@
-import { Provider as MosaicProvider, useMosaicContext } from '@stoplight/mosaic';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { withMosaicProvider } from './withMosaicProvider';
-
-describe('withMosaicProvider()', () => {
-  it('should re-use mosaic context if already present in tree, rather than creating a new provider', () => {
-    let mosaicContextFromParent: ReturnType<typeof useMosaicContext> | undefined;
-    let mosaicContextFromProvider: ReturnType<typeof useMosaicContext> | undefined;
-
-    const Page = withMosaicProvider(() => {
-      mosaicContextFromProvider = useMosaicContext();
-      return null;
-    });
-
-    const Parent = () => {
-      mosaicContextFromParent = useMosaicContext();
-
-      return <Page />;
-    };
-
-    render(
-      <MosaicProvider>
-        <Parent />
-      </MosaicProvider>,
-    );
-
-    expect(mosaicContextFromProvider).toBe(mosaicContextFromParent);
-  });
-
-  it('should create new mosaic context if not already present in tree', () => {
-    let mosaicContextFromProvider: ReturnType<typeof useMosaicContext> | undefined;
-
-    const Page = withMosaicProvider(() => {
-      mosaicContextFromProvider = useMosaicContext();
-      return null;
-    });
-
-    const Parent = () => {
-      return <Page />;
-    };
-
-    render(<Parent />);
-
-    expect(mosaicContextFromProvider).toHaveProperty('providerId');
-  });
-});