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

package/src/components/TryIt/Body/RequestBody.tsx

@@ -1,71 +0,0 @@
-import { safeStringify } from '@stoplight/json';
-import { Button, Menu, MenuItems, Panel } from '@stoplight/mosaic';
-import { CodeEditor } from '@stoplight/mosaic-code-editor';
-import { INodeExample, INodeExternalExample } from '@stoplight/types';
-import * as React from 'react';
-
-interface RequestBodyProps {
-  examples: ReadonlyArray<INodeExample | INodeExternalExample>;
-  requestBody: string;
-  onChange: (newRequestBody: string) => void;
-}
-
-export const RequestBody: React.FC<RequestBodyProps> = ({ examples, requestBody, onChange }) => {
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar
-        rightComponent={
-          examples.length > 1 && <ExampleMenu examples={examples} requestBody={requestBody} onChange={onChange} />
-        }
-      >
-        Body
-      </Panel.Titlebar>
-      <Panel.Content className="TextRequestBody">
-        <CodeEditor
-          onChange={onChange}
-          language="json"
-          value={requestBody}
-          showLineNumbers
-          padding={0}
-          style={
-            // when not rendering in prose (markdown), reduce font size to be consistent with base UI
-            {
-              fontSize: 12,
-            }
-          }
-        />
-      </Panel.Content>
-    </Panel>
-  );
-};
-
-function ExampleMenu({ examples, requestBody, onChange }: RequestBodyProps) {
-  const handleClick = React.useCallback(
-    (example: INodeExample | INodeExternalExample) => {
-      onChange(safeStringify('value' in example ? example.value : example.externalValue, undefined, 2) ?? requestBody);
-    },
-    [onChange, requestBody],
-  );
-
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = examples.map(example => ({
-      id: `request-example-${example.key}`,
-      title: example.key,
-      onPress: () => handleClick(example),
-    }));
-
-    return items;
-  }, [examples, handleClick]);
-
-  return (
-    <Menu
-      aria-label="Examples"
-      items={menuItems}
-      renderTrigger={({ isOpen }) => (
-        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
-          Examples
-        </Button>
-      )}
-    />
-  );
-}

package/src/components/TryIt/Body/__tests__/BinaryBody.test.tsx

@@ -1,29 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { BinaryBody, BinaryBodyProps } from '../BinaryBody';
-
-describe('BinaryBody', () => {
-  it('renders file input when the form is application/octet-stream', () => {
-    const props: BinaryBodyProps = {
-      specification: {
-        id: '493afac014fa8',
-        mediaType: 'application/octet-stream',
-        encodings: [],
-        schema: {
-          type: 'string',
-          format: 'binary',
-          $schema: 'http://json-schema.org/draft-07/schema#',
-        },
-      },
-      values: {},
-      onChangeValues: () => {},
-    };
-
-    const { getByLabelText } = render(<BinaryBody {...props} />);
-
-    expect(getByLabelText('file')).toBeInTheDocument();
-  });
-});

package/src/components/TryIt/Body/__tests__/FormDataBody.test.tsx

@@ -1,94 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import { FormDataBody, FormDataBodyProps } from '../FormDataBody';
-
-describe('FormDataBody', () => {
-  it('when the top level of the schema is oneOf', () => {
-    // Arrange
-    const props: FormDataBodyProps = {
-      specification: {
-        id: '493afac014fa8',
-        mediaType: 'application/x-www-form-urlencoded',
-        encodings: [],
-        schema: {
-          oneOf: [
-            {
-              title: 'Authenticate',
-              description: 'supply username and password for refresh and access tokens',
-              type: 'object',
-              properties: {
-                username: {
-                  type: 'string',
-                },
-                password: {
-                  type: 'string',
-                },
-              },
-            },
-            {
-              title: 'Access Token Refresh',
-              description: 'supply a refresh token for new refresh and access tokens',
-              type: 'object',
-              properties: {
-                refresh_token: {
-                  type: 'string',
-                },
-              },
-            },
-          ],
-          description: '',
-          title: 'Request Body Schemas',
-          $schema: 'http://json-schema.org/draft-07/schema#',
-        },
-      },
-      values: {},
-      isAllowedEmptyValues: {},
-      onChangeParameterAllow: () => {},
-      onChangeValues: () => {},
-    };
-
-    // Act
-    const { getByTestId } = render(<FormDataBody {...props} />);
-
-    // Assert
-    expect(getByTestId('oneof-menu')).toBeVisible();
-  });
-
-  it('when the top level of the schema has properties', () => {
-    // Arrange
-    const props: FormDataBodyProps = {
-      specification: {
-        id: '493afac014fa8',
-        mediaType: 'application/x-www-form-urlencoded',
-        encodings: [],
-        schema: {
-          title: 'Authenticate',
-          description: 'supply username and password for refresh and access tokens',
-          type: 'object',
-          properties: {
-            username: {
-              type: 'string',
-            },
-            password: {
-              type: 'string',
-            },
-          },
-          $schema: 'http://json-schema.org/draft-07/schema#',
-        },
-      },
-      values: {},
-      isAllowedEmptyValues: {},
-      onChangeParameterAllow: () => {},
-      onChangeValues: () => {},
-    };
-
-    // Act
-    const { queryByTestId } = render(<FormDataBody {...props} />);
-
-    // Assert
-    expect(queryByTestId('oneof-menu')).toBe(null);
-  });
-});

package/src/components/TryIt/Body/request-body-utils.ts

@@ -1,127 +0,0 @@
-import { IMediaTypeContent } from '@stoplight/types';
-import { isString, pickBy } from 'lodash';
-import * as React from 'react';
-
-import { fileToBase64 } from '../../../utils/fileToBase64';
-import {
-  initialParameterValues,
-  mapSchemaPropertiesToParameters,
-  parameterSupportsFileUpload,
-} from '../Parameters/parameter-utils';
-
-export type BodyParameterValues = Record<string, string | File>;
-export type ParameterOptional = Record<string, boolean>;
-
-export const isFormDataContent = (content: IMediaTypeContent) =>
-  isUrlEncodedContent(content) || isMultipartContent(content);
-
-function isUrlEncodedContent(content: IMediaTypeContent) {
-  return content.mediaType.toLowerCase() === 'application/x-www-form-urlencoded';
-}
-
-function isMultipartContent(content: IMediaTypeContent) {
-  return content.mediaType.toLowerCase() === 'multipart/form-data';
-}
-
-export const isBinaryContent = (content: IMediaTypeContent) => isApplicationOctetStream(content);
-
-function isApplicationOctetStream(content: IMediaTypeContent) {
-  return content.mediaType.toLowerCase() === 'application/octet-stream';
-}
-
-export async function createRequestBody(
-  mediaTypeContent: IMediaTypeContent | undefined,
-  bodyParameterValues: BodyParameterValues | undefined,
-) {
-  if (!mediaTypeContent) return undefined;
-
-  const creator = (await requestBodyCreators[mediaTypeContent.mediaType.toLowerCase()]) ?? createRawRequestBody;
-  return creator({ mediaTypeContent, bodyParameterValues, rawBodyValue: '' });
-}
-
-type RequestBodyCreator = (options: {
-  mediaTypeContent: IMediaTypeContent;
-  bodyParameterValues?: BodyParameterValues;
-  rawBodyValue?: string;
-}) => Promise<BodyInit>;
-
-const createUrlEncodedRequestBody: RequestBodyCreator = async ({ bodyParameterValues = {} }) => {
-  const filteredValues = pickBy(bodyParameterValues, isString);
-
-  return new URLSearchParams(filteredValues);
-};
-
-const createMultipartRequestBody: RequestBodyCreator = async ({ mediaTypeContent, bodyParameterValues = {} }) => {
-  const formData = new FormData();
-  for (const [key, value] of Object.entries(bodyParameterValues)) {
-    const schema = mediaTypeContent.schema?.properties?.[key];
-
-    if (typeof schema !== 'object') continue;
-
-    if (parameterSupportsFileUpload({ schema }) && schema.contentEncoding === 'base64' && value instanceof File) {
-      try {
-        formData.append(key, await fileToBase64(value));
-      } catch {
-        continue;
-      }
-    } else {
-      formData.append(key, value);
-    }
-  }
-  return formData;
-};
-
-const createRawRequestBody: RequestBodyCreator = async ({ rawBodyValue = '' }) => rawBodyValue;
-
-const requestBodyCreators: Record<string, RequestBodyCreator | undefined> = {
-  'application/x-www-form-urlencoded': createUrlEncodedRequestBody,
-  'multipart/form-data': createMultipartRequestBody,
-};
-
-export const useBodyParameterState = (mediaTypeContent: IMediaTypeContent | undefined) => {
-  const isFormDataBody = mediaTypeContent && isFormDataContent(mediaTypeContent);
-  const isBinaryBody = mediaTypeContent && isBinaryContent(mediaTypeContent);
-
-  const initialState = React.useMemo(() => {
-    if (!isFormDataBody || isBinaryBody) {
-      return {};
-    }
-    const properties = mediaTypeContent?.schema?.properties ?? {};
-    const required = mediaTypeContent?.schema?.required;
-    const parameters = mapSchemaPropertiesToParameters(properties, required);
-    return initialParameterValues(parameters);
-  }, [isFormDataBody, isBinaryBody, mediaTypeContent]);
-
-  const [bodyParameterValues, setBodyParameterValues] = React.useState<BodyParameterValues>(initialState);
-  const [isAllowedEmptyValue, setAllowedEmptyValue] = React.useState<ParameterOptional>({});
-
-  React.useEffect(() => {
-    setBodyParameterValues(initialState);
-  }, [initialState]);
-
-  if (isFormDataBody) {
-    return [
-      bodyParameterValues,
-      setBodyParameterValues,
-      isAllowedEmptyValue,
-      setAllowedEmptyValue,
-      { isFormDataBody: true, isBinaryBody: false, bodySpecification: mediaTypeContent! },
-    ] as const;
-  } else if (isBinaryBody) {
-    return [
-      bodyParameterValues,
-      setBodyParameterValues,
-      isAllowedEmptyValue,
-      setAllowedEmptyValue,
-      { isFormDataBody: false, isBinaryBody: true, bodySpecification: mediaTypeContent! },
-    ] as const;
-  } else {
-    return [
-      bodyParameterValues,
-      setBodyParameterValues,
-      isAllowedEmptyValue,
-      setAllowedEmptyValue,
-      { isFormDataBody: false, isBinaryBody: false, bodySpecification: undefined },
-    ] as const;
-  }
-};

package/src/components/TryIt/Body/useTextRequestBodyState.ts

@@ -1,27 +0,0 @@
-import { IMediaTypeContent } from '@stoplight/types';
-import * as React from 'react';
-
-import { useGenerateExampleFromMediaTypeContent } from '../../../utils/exampleGeneration/exampleGeneration';
-
-/**
- * Manages the state of the request body text editor.
- *
- * A wrapper for `React.useState`, but handles creating the initial value, and resetting when the content definition changes.
- */
-
-export const useTextRequestBodyState = (
-  mediaTypeContent: IMediaTypeContent | undefined,
-  skipReadOnly: boolean,
-): [string, React.Dispatch<React.SetStateAction<string>>] => {
-  const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
-    skipReadOnly,
-  });
-
-  const [textRequestBody, setTextRequestBody] = React.useState<string>(initialRequestBody);
-
-  React.useEffect(() => {
-    setTextRequestBody(initialRequestBody);
-  }, [initialRequestBody]);
-
-  return [textRequestBody, setTextRequestBody];
-};

package/src/components/TryIt/Mocking/MockingButton.tsx

@@ -1,98 +0,0 @@
-import { Box, FieldButton, Menu, MenuActionItem, MenuItems, MenuItemWithSubmenu } from '@stoplight/mosaic';
-import { IHttpOperation, IHttpOperationResponse } from '@stoplight/types';
-import { uniq } from 'lodash';
-import * as React from 'react';
-
-import { MockingOptions } from './mocking-utils';
-
-interface MockingButtonProps {
-  operation: IHttpOperation;
-  options: MockingOptions;
-  onOptionsChange: (data: MockingOptions) => void;
-}
-
-export const MockingButton: React.FC<MockingButtonProps> = ({
-  operation,
-  options: { code, example, dynamic },
-  onOptionsChange,
-}) => {
-  const operationResponses = operation.responses;
-
-  const setMockingOptions = React.useCallback(
-    ({ code, example, dynamic }: Omit<MockingOptions, 'isEnabled'>) => {
-      onOptionsChange({ code, example, dynamic });
-    },
-    [onOptionsChange],
-  );
-
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = operationResponses
-      ?.filter(operationResponse => Number.isInteger(parseFloat(operationResponse.code)))
-      ?.map(generateOperationResponseMenu);
-
-    function generateOperationResponseMenu(operationResponse: IHttpOperationResponse) {
-      const menuId = `response-${operationResponse.code}`;
-      const isActive = operationResponse.code === code;
-      const exampleKeys = uniq(operationResponse.contents?.flatMap(c => c.examples || []).map(example => example.key));
-
-      const exampleChildren: MenuActionItem[] = exampleKeys?.map(exampleKey => ({
-        id: `${menuId}-example-${exampleKey}`,
-        title: exampleKey,
-        isChecked: isActive && exampleKey === example,
-        onPress: () => {
-          setMockingOptions({ code: operationResponse.code, example: exampleKey });
-        },
-      }));
-
-      const generationModeItems: MenuActionItem[] = [
-        {
-          id: `${menuId}-gen-static`,
-          title: 'Statically Generated',
-          isChecked: isActive && dynamic === false,
-          onPress: () => {
-            setMockingOptions({ code: operationResponse.code, dynamic: false });
-          },
-        },
-        {
-          id: `${menuId}-gen-dynamic`,
-          title: 'Dynamically Generated',
-          isChecked: isActive && dynamic === true,
-          onPress: () => {
-            setMockingOptions({ code: operationResponse.code, dynamic: true });
-          },
-        },
-      ];
-
-      const menuItem: MenuItemWithSubmenu = {
-        id: menuId,
-        isChecked: isActive,
-        title: operationResponse.code,
-        onPress: () => {
-          setMockingOptions({ code: operationResponse.code, dynamic: false });
-        },
-        children: [
-          { type: 'group', children: generationModeItems },
-          { type: 'group', title: 'Examples', children: exampleChildren },
-        ],
-      };
-
-      return menuItem;
-    }
-
-    return items;
-  }, [code, dynamic, example, operationResponses, setMockingOptions]);
-
-  return (
-    <Box>
-      <Menu
-        aria-label="Mock settings"
-        items={menuItems}
-        renderTrigger={({ isOpen }) => (
-          <FieldButton active={isOpen} size="sm">
-            Mock Settings
-          </FieldButton>
-        )}
-      />
-    </Box>
-  );
-};

package/src/components/TryIt/Mocking/mocking-utils.ts

@@ -1,56 +0,0 @@
-import { IHttpOperation } from '@stoplight/types';
-import { compact, uniq } from 'lodash';
-
-import { formatMultiValueHeader } from '../../../utils/headers';
-
-export type MockingOptions = { code?: string; example?: string; dynamic?: boolean };
-type PreferHeaderProps = { code?: string; example?: string; dynamic?: boolean };
-
-export type MockData = {
-  url: string;
-  header?: Record<'Prefer', string>;
-};
-
-export function getMockData(
-  url: string | undefined,
-  httpOperation: IHttpOperation,
-  { code, dynamic, example }: MockingOptions,
-): MockData | undefined {
-  return url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
-}
-
-export function buildPreferHeader(
-  { code, example, dynamic }: PreferHeaderProps,
-  httpOperation: IHttpOperation,
-): Record<'Prefer', string> | undefined {
-  if (!code) {
-    return undefined;
-  }
-  const isCodeSupported = supportsResponseCode(httpOperation, code);
-  const isExampleSupported = isCodeSupported && supportsExample(httpOperation, code, example);
-
-  const args: Array<readonly [string, string] | string> = compact([
-    code && isCodeSupported ? ['code', code] : undefined,
-    dynamic ? ['dynamic', String(dynamic)] : undefined,
-    example && isExampleSupported ? ['example', example] : undefined,
-  ]);
-  const headerValue = formatMultiValueHeader(...args);
-
-  return {
-    Prefer: headerValue,
-  };
-}
-
-function supportsResponseCode(httpOperation: IHttpOperation, code?: string) {
-  return httpOperation.responses?.find(response => response.code === code) !== undefined;
-}
-
-function supportsExample(httpOperation: IHttpOperation, code?: string, exampleKey?: string) {
-  if (!exampleKey) return false;
-
-  const response = httpOperation.responses?.find(response => response.code === code);
-  if (!response) return false;
-
-  const exampleKeys = uniq(response.contents?.flatMap(c => c.examples || []).map(example => example.key));
-  return exampleKeys.includes(exampleKey);
-}

package/src/components/TryIt/Mocking/useMockingOptions.ts

@@ -1,6 +0,0 @@
-import { atom, useAtom } from 'jotai';
-
-import { MockingOptions } from './mocking-utils';
-
-const mockingOptionsAtom = atom<MockingOptions>({});
-export const useMockingOptions = () => useAtom(mockingOptionsAtom);

package/src/components/TryIt/Parameters/FileUploadParameterEditors.tsx

@@ -1,62 +0,0 @@
-import { Flex, Icon, Input, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { useUniqueId } from '../../../hooks/useUniqueId';
-import { ParameterSpec } from './parameter-utils';
-
-interface FileUploadParameterEditorProps {
-  parameter: ParameterSpec;
-  value?: File;
-  onChange: (parameterValue: File | undefined) => void;
-}
-
-export const FileUploadParameterEditor: React.FC<FileUploadParameterEditorProps> = ({ parameter, value, onChange }) => {
-  const parameterDisplayName = `${parameter.name}${parameter.required ? '*' : ''}`;
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.currentTarget.files?.[0];
-    if (file === undefined) return;
-
-    onChange(file);
-  };
-
-  const clearFile = () => {
-    onChange(undefined);
-  };
-
-  const parameterInputId = useUniqueId(`id_${parameter.name}_`);
-  const fileUploadInputId = `${parameterInputId}-file-input`;
-
-  return (
-    <>
-      <label aria-hidden="true" data-testid="param-label" htmlFor={parameterInputId}>
-        {parameterDisplayName}
-      </label>
-      <Text mx={3}>:</Text>
-      <Flex flex={1} alignItems="center">
-        <Input
-          id={parameterInputId}
-          style={{ paddingLeft: 15 }}
-          aria-label={parameter.name}
-          appearance="minimal"
-          flex={1}
-          placeholder="pick a file"
-          type="text"
-          required
-          value={value?.name ?? ''}
-          disabled
-        />
-        {value && (
-          <button className="sl-mr-3 sl-p-2" aria-label="Remove file" onClick={clearFile}>
-            <Icon icon="times" />
-          </button>
-        )}
-        <div>
-          <label role="button" htmlFor={fileUploadInputId}>
-            Upload
-          </label>
-          <input onChange={handleFileChange} type="file" hidden id={fileUploadInputId} />
-        </div>
-      </Flex>
-    </>
-  );
-};

package/src/components/TryIt/Parameters/OperationParameters.tsx

@@ -1,39 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { ParameterSpec } from './parameter-utils';
-import { ParameterEditor } from './ParameterEditor';
-
-interface OperationParametersProps<P extends keyof any = string> {
-  parameters: readonly ParameterSpec[];
-  values: Record<P, string>;
-  onChangeValue: (parameterName: P, newValue: string) => void;
-  validate?: boolean;
-}
-
-export const OperationParameters: React.FC<OperationParametersProps> = ({
-  parameters,
-  values,
-  onChangeValue,
-  validate,
-}) => {
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar>Parameters</Panel.Titlebar>
-      <Panel.Content className="sl-overflow-y-auto ParameterGrid OperationParametersContent">
-        {parameters.map(parameter => (
-          <ParameterEditor
-            key={parameter.name}
-            parameter={parameter}
-            value={values[parameter.name]}
-            onChange={value => onChangeValue(parameter.name, String(value))}
-            validate={validate}
-            isOptional={false}
-            canChangeOptional={false}
-            onChangeOptional={() => {}}
-          />
-        ))}
-      </Panel.Content>
-    </Panel>
-  );
-};