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

package/src/constants.ts

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

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

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

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

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

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

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

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

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

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