@stoplight/elements-core 9.0.12-beta-0.2 → 9.0.12-beta-0.4

package/src/components/TryIt/build-request.spec.ts

@@ -1,213 +0,0 @@
-import { IHttpOperation } from '@stoplight/types';
-
-import { operation as minimalOperation } from '../../__fixtures__/operations/operation-minimal';
-import httpOperation from '../../__fixtures__/operations/operation-parameters';
-import { getAcceptedMimeTypes, getQueryParams } from './build-request';
-
-describe('Build Request', () => {
-  describe('Query params', () => {
-    it('Handles operation without query params', () => {
-      const params = getQueryParams({ httpOperation: minimalOperation, parameterValues: {} });
-
-      expect(params).toStrictEqual([]);
-    });
-
-    it('Handles parameters without values', () => {
-      const params = getQueryParams({ httpOperation, parameterValues: { value: '' } });
-
-      expect(params).toStrictEqual([]);
-    });
-
-    it('Handles invalid JSON values', () => {
-      expect(() => {
-        getQueryParams({ httpOperation, parameterValues: { nested: '{' } });
-      }).toThrowError('JSON object expected');
-
-      expect(() => {
-        getQueryParams({ httpOperation, parameterValues: { nested: '123' } });
-      }).toThrowError('JSON object expected');
-
-      expect(() => {
-        getQueryParams({ httpOperation, parameterValues: { items: '[' } });
-      }).toThrowError('JSON array expected');
-
-      expect(() => {
-        getQueryParams({ httpOperation, parameterValues: { items: '123' } });
-      }).toThrowError('JSON array expected');
-    });
-
-    it('Supports form and deepObject style', () => {
-      const params = getQueryParams({
-        httpOperation,
-        parameterValues: {
-          value: '1',
-          items: '["first","second"]',
-          items_not_exploded: '["first","second"]',
-          default_style_items: '["first","second"]',
-          nested: '{"key":"value"}',
-          nested_not_exploded: '{"key":"value"}',
-          deep_object: '{"key":"value", "number": 2}',
-        },
-      });
-
-      expect(params).toStrictEqual([
-        { name: 'value', value: '1' },
-        { name: 'items', value: 'first' },
-        { name: 'items', value: 'second' },
-        { name: 'items_not_exploded', value: 'first,second' },
-        { name: 'default_style_items', value: 'first' },
-        { name: 'default_style_items', value: 'second' },
-        { name: 'key', value: 'value' },
-        { name: 'nested_not_exploded', value: 'key,value' },
-        { name: 'deep_object[key]', value: 'value' },
-        { name: 'deep_object[number]', value: '2' },
-      ]);
-    });
-
-    it('Supports spaceDelimited style', () => {
-      const params = getQueryParams({
-        httpOperation,
-        parameterValues: { items_spaces: '["first","second"]', items_spaces_not_exploded: '["first","second"]' },
-      });
-
-      expect(params).toStrictEqual([
-        { name: 'items_spaces', value: 'first' },
-        { name: 'items_spaces', value: 'second' },
-        { name: 'items_spaces_not_exploded', value: 'first second' },
-      ]);
-    });
-
-    it('Supports pipeDelimited style', () => {
-      const params = getQueryParams({
-        httpOperation,
-        parameterValues: { items_pipes: '["first","second"]', items_pipes_not_exploded: '["first","second"]' },
-      });
-
-      expect(params).toStrictEqual([
-        { name: 'items_pipes', value: 'first' },
-        { name: 'items_pipes', value: 'second' },
-        { name: 'items_pipes_not_exploded', value: 'first|second' },
-      ]);
-    });
-
-    it('Splits string arrays by a respective delimiter', () => {
-      const params = getQueryParams({
-        httpOperation,
-        parameterValues: {
-          items: '"first,second"',
-          items_spaces: '"first second"',
-          items_pipes: '"first|second"',
-        },
-      });
-
-      expect(params).toStrictEqual([
-        { name: 'items', value: 'first' },
-        { name: 'items', value: 'second' },
-        { name: 'items_spaces', value: 'first' },
-        { name: 'items_spaces', value: 'second' },
-        { name: 'items_pipes', value: 'first' },
-        { name: 'items_pipes', value: 'second' },
-      ]);
-    });
-  });
-
-  describe('getAcceptedMimeTypes', () => {
-    const operationSingleResponse: IHttpOperation = {
-      id: 'adsf',
-      method: 'GET',
-      path: '/a/path',
-      responses: [
-        {
-          id: 'responseA',
-          code: '200',
-          contents: [
-            {
-              id: 'adsf',
-              mediaType: 'application/json',
-            },
-            {
-              id: 'dfvs',
-              mediaType: 'application/json',
-            },
-            {
-              id: 'aaaa',
-              mediaType: 'multipart/form-data',
-            },
-          ],
-        },
-      ],
-    };
-
-    const operationMultipleResponses: IHttpOperation = {
-      id: 'sfdf',
-      method: 'POST',
-      path: '/a/nother/path',
-      responses: [
-        {
-          id: 'responseA',
-          code: '200',
-          contents: [
-            {
-              id: 'adsf',
-              mediaType: 'application/json',
-            },
-            {
-              id: 'dfvs',
-              mediaType: 'application/json',
-            },
-          ],
-        },
-        {
-          id: 'responseB',
-          code: '200',
-          contents: [
-            {
-              id: 'adsf',
-              mediaType: 'application/json',
-            },
-            {
-              id: 'dfvs',
-              mediaType: 'multipart/form-data',
-            },
-          ],
-        },
-        {
-          id: 'responseC',
-          code: '200',
-          contents: [
-            {
-              id: 'dfvs',
-              mediaType: 'multipart/form-data',
-            },
-          ],
-        },
-        {
-          id: 'responseB',
-          code: '200',
-          contents: [
-            {
-              id: 'adsf',
-              mediaType: 'text/json',
-            },
-            {
-              id: 'dfvs',
-              mediaType: 'multipart/form-data',
-            },
-          ],
-        },
-      ],
-    };
-
-    it('Handles a single response with duplicates', () => {
-      expect(getAcceptedMimeTypes(operationSingleResponse)).toStrictEqual(['application/json', 'multipart/form-data']);
-    });
-
-    it('Handles multiple responses and dedups appropriately', () => {
-      expect(getAcceptedMimeTypes(operationMultipleResponses)).toStrictEqual([
-        'application/json',
-        'multipart/form-data',
-        'text/json',
-      ]);
-    });
-  });
-});

package/src/components/TryIt/build-request.ts

@@ -1,357 +0,0 @@
-import { Dictionary, HttpParamStyles, IHttpOperation, IMediaTypeContent, IServer } from '@stoplight/types';
-import { Request as HarRequest } from 'har-format';
-
-import { getServerUrlWithVariableValues, resolveUrl } from '../../utils/http-spec/IServer';
-import {
-  filterOutAuthorizationParams,
-  HttpSecuritySchemeWithValues,
-  isApiKeySecurityScheme,
-  isBasicSecurityScheme,
-  isBearerSecurityScheme,
-  isDigestSecurityScheme,
-  isOAuth2SecurityScheme,
-} from './Auth/authentication-utils';
-import { BodyParameterValues, createRequestBody } from './Body/request-body-utils';
-import { MockData } from './Mocking/mocking-utils';
-
-type NameAndValue = {
-  name: string;
-  value: string;
-};
-
-const nameAndValueObjectToPair = ({ name, value }: NameAndValue): [string, string] => [name, value];
-
-interface BuildRequestInput {
-  httpOperation: IHttpOperation;
-  mediaTypeContent: IMediaTypeContent | undefined;
-  parameterValues: Dictionary<string, string>;
-  serverVariableValues: Dictionary<string, string>;
-  bodyInput?: BodyParameterValues | string | File;
-  mockData?: MockData;
-  auth?: HttpSecuritySchemeWithValues[];
-  chosenServer?: IServer | null;
-  credentials?: 'omit' | 'include' | 'same-origin';
-  corsProxy?: string;
-}
-
-const getServerUrl = ({
-  chosenServer,
-  httpOperation,
-  mockData,
-  corsProxy,
-  serverVariableValues,
-}: Pick<BuildRequestInput, 'httpOperation' | 'chosenServer' | 'mockData' | 'corsProxy' | 'serverVariableValues'>) => {
-  const server = chosenServer || httpOperation.servers?.[0];
-  const chosenServerUrl = server && getServerUrlWithVariableValues(server, serverVariableValues);
-  const serverUrl = resolveUrl(mockData?.url || chosenServerUrl || window.location.origin);
-
-  if (corsProxy && !mockData) {
-    return `${corsProxy}${serverUrl}`;
-  }
-
-  return serverUrl;
-};
-
-const delimiter = {
-  [HttpParamStyles.Form]: ',',
-  [HttpParamStyles.SpaceDelimited]: ' ',
-  [HttpParamStyles.PipeDelimited]: '|',
-};
-
-export const getQueryParams = ({
-  httpOperation,
-  parameterValues,
-}: Pick<BuildRequestInput, 'httpOperation'> & Pick<BuildRequestInput, 'parameterValues'>) => {
-  const query = httpOperation.request?.query;
-  if (!query) return [];
-
-  return query.reduce<{ name: string; value: string }[]>((acc, param) => {
-    const value = parameterValues[param.name] ?? '';
-    if (value.length === 0) return acc;
-
-    const explode = param.explode ?? true;
-
-    if (param.schema?.type === 'object' && value) {
-      let nested: Dictionary<string, string>;
-      try {
-        nested = JSON.parse(value);
-        if (!(typeof nested === 'object' && nested !== null)) throw Error();
-      } catch (e) {
-        throw new Error(`Cannot use param value "${value}". JSON object expected.`);
-      }
-
-      if (param.style === 'form') {
-        if (explode) {
-          acc.push(...Object.entries(nested).map(([name, value]) => ({ name, value: value.toString() })));
-        } else {
-          acc.push({
-            name: param.name,
-            value: Object.entries(nested)
-              .map(entry => entry.join(','))
-              .join(','),
-          });
-        }
-      } else if (param.style === 'deepObject') {
-        acc.push(
-          ...Object.entries(nested).map(([name, value]) => ({
-            name: `${param.name}[${name}]`,
-            value: value.toString(),
-          })),
-        );
-      } else {
-        acc.push({ name: param.name, value });
-      }
-    } else if (param.schema?.type === 'array' && value) {
-      let nested: string[];
-      try {
-        const parsed = JSON.parse(value);
-        if (typeof parsed === 'string') {
-          nested = parsed.split(delimiter[param.style as keyof typeof delimiter]);
-        } else if (Array.isArray(parsed)) {
-          nested = parsed;
-        } else {
-          throw Error();
-        }
-      } catch (e) {
-        throw new Error(`Cannot use param value "${value}". JSON array expected.`);
-      }
-
-      if (explode) {
-        acc.push(...nested.map(value => ({ name: param.name, value: value.toString() })));
-      } else {
-        acc.push({
-          name: param.name,
-          value: nested.join(delimiter[param.style as keyof typeof delimiter] ?? delimiter[HttpParamStyles.Form]),
-        });
-      }
-    } else {
-      acc.push({ name: param.name, value });
-    }
-
-    return acc;
-  }, []);
-};
-
-export async function buildFetchRequest({
-  httpOperation,
-  mediaTypeContent,
-  bodyInput,
-  parameterValues,
-  serverVariableValues,
-  mockData,
-  auth,
-  chosenServer,
-  credentials = 'omit',
-  corsProxy,
-}: BuildRequestInput): Promise<Parameters<typeof fetch>> {
-  const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
-
-  const shouldIncludeBody =
-    ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
-
-  const queryParams = getQueryParams({ httpOperation, parameterValues });
-
-  const rawHeaders = filterOutAuthorizationParams(httpOperation.request?.headers ?? [], httpOperation.security)
-    .map(header => ({ name: header.name, value: parameterValues[header.name] ?? '' }))
-    .filter(({ value }) => value.length > 0);
-
-  const [queryParamsWithAuth, headersWithAuth] = runAuthRequestEhancements(auth, queryParams, rawHeaders);
-
-  const expandedPath = uriExpand(httpOperation.path, parameterValues);
-
-  // urlObject is concatenated this way to avoid /user and /user/ endpoint edge cases
-  const urlObject = new URL(serverUrl + expandedPath);
-  urlObject.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
-
-  const body =
-    typeof bodyInput === 'object' && !(bodyInput instanceof File)
-      ? await createRequestBody(mediaTypeContent, bodyInput)
-      : bodyInput;
-
-  const acceptedMimeTypes = getAcceptedMimeTypes(httpOperation);
-  const headers = {
-    ...(acceptedMimeTypes.length > 0 && { Accept: acceptedMimeTypes.join(', ') }),
-    // do not include multipart/form-data - browser handles its content type and boundary
-    ...(mediaTypeContent?.mediaType !== 'multipart/form-data' &&
-      shouldIncludeBody && {
-        'Content-Type': mediaTypeContent?.mediaType ?? 'application/json',
-      }),
-    ...Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair)),
-    ...mockData?.header,
-  };
-
-  return [
-    urlObject.href,
-    {
-      credentials,
-      method: httpOperation.method.toUpperCase(),
-      headers,
-      body: shouldIncludeBody ? body : undefined,
-    },
-  ];
-}
-
-const runAuthRequestEhancements = (
-  auths: HttpSecuritySchemeWithValues[] | undefined,
-  queryParams: NameAndValue[],
-  headers: NameAndValue[],
-): [NameAndValue[], NameAndValue[]] => {
-  if (!auths) return [queryParams, headers];
-
-  const newQueryParams = [...queryParams];
-  const newHeaders = [...headers];
-  auths.forEach(auth => {
-    if (isApiKeySecurityScheme(auth.scheme)) {
-      if (auth.scheme.in === 'query') {
-        newQueryParams.push({
-          name: auth.scheme.name,
-          value: auth.authValue || '123',
-        });
-      }
-
-      if (auth.scheme.in === 'header') {
-        newHeaders.push({
-          name: auth.scheme.name,
-          value: auth.authValue || '123',
-        });
-      }
-    }
-
-    if (isOAuth2SecurityScheme(auth.scheme)) {
-      newHeaders.push({
-        name: 'Authorization',
-        value: auth.authValue || 'Bearer 123',
-      });
-    }
-
-    if (isBearerSecurityScheme(auth.scheme)) {
-      newHeaders.push({
-        name: 'Authorization',
-        value: `Bearer ${auth.authValue || '123'}`,
-      });
-    }
-
-    if (isDigestSecurityScheme(auth.scheme)) {
-      newHeaders.push({
-        name: 'Authorization',
-        value: auth.authValue?.replace(/\s\s+/g, ' ').trim() || '123',
-      });
-    }
-
-    if (isBasicSecurityScheme(auth.scheme)) {
-      newHeaders.push({
-        name: 'Authorization',
-        value: `Basic ${auth.authValue || '123'}`,
-      });
-    }
-  });
-
-  return [newQueryParams, newHeaders];
-};
-
-export async function buildHarRequest({
-  httpOperation,
-  bodyInput,
-  parameterValues,
-  serverVariableValues,
-  mediaTypeContent,
-  auth,
-  mockData,
-  chosenServer,
-  corsProxy,
-}: BuildRequestInput): Promise<HarRequest> {
-  const serverUrl = getServerUrl({ httpOperation, mockData, chosenServer, corsProxy, serverVariableValues });
-
-  const mimeType = mediaTypeContent?.mediaType ?? 'application/json';
-  const shouldIncludeBody =
-    ['PUT', 'POST', 'PATCH'].includes(httpOperation.method.toUpperCase()) && bodyInput !== undefined;
-
-  const queryParams = getQueryParams({ httpOperation, parameterValues });
-
-  const headerParams =
-    httpOperation.request?.headers?.map(header => ({ name: header.name, value: parameterValues[header.name] ?? '' })) ??
-    [];
-
-  if (mockData?.header) {
-    headerParams.push({ name: 'Prefer', value: mockData.header.Prefer });
-  }
-
-  if (shouldIncludeBody) {
-    headerParams.push({ name: 'Content-Type', value: mimeType });
-  }
-
-  const acceptedMimeTypes = getAcceptedMimeTypes(httpOperation);
-  if (acceptedMimeTypes.length > 0) {
-    headerParams.push({ name: 'Accept', value: acceptedMimeTypes.join(', ') });
-  }
-
-  const [queryParamsWithAuth, headerParamsWithAuth] = runAuthRequestEhancements(auth, queryParams, headerParams);
-  const expandedPath = uriExpand(httpOperation.path, parameterValues);
-  const urlObject = new URL(serverUrl + expandedPath);
-
-  let postData: HarRequest['postData'] = undefined;
-  if (shouldIncludeBody && typeof bodyInput === 'string') {
-    postData = { mimeType, text: bodyInput };
-  }
-
-  if (shouldIncludeBody) {
-    if (typeof bodyInput === 'object') {
-      if (mimeType === 'application/octet-stream' && bodyInput instanceof File) {
-        postData = {
-          mimeType,
-          text: `@${bodyInput.name}`,
-        };
-      } else {
-        postData = {
-          mimeType,
-          params: Object.entries(bodyInput).map(([name, value]) => {
-            if (value instanceof File) {
-              return {
-                name,
-                fileName: value.name,
-                contentType: value.type,
-              };
-            }
-            return {
-              name,
-              value,
-            };
-          }),
-        };
-      }
-    }
-  }
-
-  return {
-    method: httpOperation.method.toUpperCase(),
-    url: urlObject.href,
-    httpVersion: 'HTTP/1.1',
-    cookies: [],
-    headers: headerParamsWithAuth,
-    queryString: queryParamsWithAuth,
-    postData: postData,
-    headersSize: -1,
-    bodySize: -1,
-  };
-}
-
-function uriExpand(uri: string, data: Dictionary<string, string>) {
-  if (!data) {
-    return uri;
-  }
-  return uri.replace(/{([^#?]+?)}/g, (match, value) => {
-    return data[value] || match;
-  });
-}
-
-export function getAcceptedMimeTypes(httpOperation: IHttpOperation): string[] {
-  return Array.from(
-    new Set(
-      httpOperation.responses.flatMap(response =>
-        response === undefined || response.contents === undefined
-          ? []
-          : response.contents.map(contentType => contentType.mediaType),
-      ),
-    ),
-  );
-}

package/src/components/TryIt/chosenServer.ts

@@ -1,5 +0,0 @@
-import type { IServer } from '@stoplight/types';
-import { atom } from 'jotai';
-
-// track null separately from undefined so that we can tell if the server has been set (undefined indicates it has not been "processed" yet)
-export const chosenServerAtom = atom<IServer | null | undefined>(undefined);

package/src/components/TryIt/index.ts

@@ -1,3 +0,0 @@
-export { chosenServerAtom } from './chosenServer';
-export * from './TryIt';
-export * from './TryItWithRequestSamples';

package/src/components/__tests__/LinkHeading.spec.tsx

@@ -1,125 +0,0 @@
-/**
- * @jest-environment jest-environment-jsdom-global
- */
-
-import '@testing-library/jest-dom';
-
-import { jest } from '@jest/globals';
-import { render } from '@testing-library/react';
-import * as React from 'react';
-import { BrowserRouter, HashRouter } from 'react-router-dom';
-
-import { RouterTypeContext } from '../../context/RouterType';
-import { LinkHeading } from '../LinkHeading';
-
-declare const jsdom: { reconfigure(opts: { url: string }): void };
-
-describe('LinkHeading', () => {
-  const scroll = jest.fn();
-  const scrollIntoView = HTMLElement.prototype.scrollIntoView;
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-    HTMLElement.prototype.scrollIntoView = scroll;
-  });
-
-  afterEach(() => {
-    scroll.mockRestore();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-    HTMLElement.prototype.scrollIntoView = scrollIntoView;
-  });
-
-  describe('given browser router', () => {
-    beforeEach(() => {
-      jsdom.reconfigure({ url: 'https://elements-demo.stoplight.io/route' });
-    });
-
-    it('should not append id to the route', () => {
-      location.hash = 'heading';
-
-      const { baseElement } = render(
-        <RouterTypeContext.Provider value="history">
-          <BrowserRouter>
-            <LinkHeading id="heading" size={1}>
-              Hello
-            </LinkHeading>
-          </BrowserRouter>
-        </RouterTypeContext.Provider>,
-      );
-
-      expect(baseElement.querySelector('a')).toHaveProperty('href', 'https://elements-demo.stoplight.io/route#heading');
-    });
-
-    it('should scroll into view', () => {
-      location.hash = 'heading';
-
-      render(
-        <RouterTypeContext.Provider value="history">
-          <BrowserRouter>
-            <LinkHeading id="heading" size={1}>
-              Hello
-            </LinkHeading>
-          </BrowserRouter>
-        </RouterTypeContext.Provider>,
-      );
-
-      jest.advanceTimersByTime(300);
-      expect(scroll).toBeCalledWith({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    });
-  });
-
-  describe('given hash router', () => {
-    beforeEach(() => {
-      jsdom.reconfigure({ url: 'https://elements-demo.stoplight.io' });
-    });
-
-    afterEach(() => {
-      window.location.hash = '';
-    });
-
-    it('should append id to the route', () => {
-      window.location.hash = '/route#test';
-
-      const { baseElement } = render(
-        <RouterTypeContext.Provider value="hash">
-          <HashRouter>
-            <LinkHeading id="heading" size={1}>
-              Hello
-            </LinkHeading>
-          </HashRouter>
-        </RouterTypeContext.Provider>,
-      );
-
-      expect(baseElement.querySelector('a')).toHaveProperty(
-        'href',
-        'https://elements-demo.stoplight.io/#/route#heading',
-      );
-    });
-
-    it('should scroll into view', () => {
-      window.location.hash = '/route#test';
-
-      render(
-        <RouterTypeContext.Provider value="hash">
-          <HashRouter>
-            <LinkHeading id="test" size={1}>
-              Hello
-            </LinkHeading>
-          </HashRouter>
-        </RouterTypeContext.Provider>,
-      );
-
-      jest.advanceTimersByTime(300);
-      expect(scroll).toBeCalledWith({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    });
-  });
-});