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

package/src/components/TryIt/Response/Response.spec.tsx

@@ -1,174 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { Provider as MosaicProvider } from '@stoplight/mosaic';
-import { CodeViewer } from '@stoplight/mosaic-code-viewer';
-import { screen } from '@testing-library/dom';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { shallow } from 'enzyme';
-import * as React from 'react';
-
-import { ResponseCodeViewer } from './ReponseCodeViewer';
-import { getResponseType, ResponseState, TryItResponse } from './Response';
-
-describe('Response', () => {
-  window.URL.createObjectURL = jest.fn();
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('shows raw code view with large text', () => {
-    const body = JSON.stringify(
-      Object.fromEntries(new Array(10001).fill(0).map((_, i) => [`prop-${i + 1}`, i + 1])),
-      null,
-      4,
-    );
-    const container = shallow(<ResponseCodeViewer language="json" value={body} />);
-    expect(container.find(CodeViewer).prop('showAsRaw')).toBe(true);
-  });
-  it('shows highlighted code view with normal text', () => {
-    const body = JSON.stringify(
-      Object.fromEntries(new Array(250).fill(0).map((_, i) => [`prop-${i + 1}`, i + 1])),
-      null,
-      4,
-    );
-    const container = shallow(<ResponseCodeViewer language="json" value={body} />);
-    expect(container.find(CodeViewer).prop('showAsRaw')).not.toBe(true);
-  });
-  it('displays JSON response', async () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'application/json',
-      bodyText: '{"status":"200"}',
-    };
-    const { container } = render(<TryItResponse response={response} />);
-
-    expect(container).toHaveTextContent('{ "status": "200"}');
-  });
-
-  it('displays XML response', async () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'application/xml',
-      bodyText: '<root><node/></root>',
-    };
-    const { container } = render(<TryItResponse response={response} />);
-
-    expect(container).toHaveTextContent('<root> <node/></root>');
-  });
-
-  it('displays image response', async () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'image/jpeg',
-      blob: new Blob(),
-    };
-    render(<TryItResponse response={response} />);
-
-    const image = screen.getByRole('img', { name: 'response image' });
-
-    expect(image).toBeVisible();
-  });
-
-  it('displays JSON response formats correctly', () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'application/json',
-      bodyText: '{"status":"200"}',
-    };
-    render(
-      <MosaicProvider>
-        <TryItResponse response={response} />
-      </MosaicProvider>,
-    );
-
-    const button = screen.getByRole('button', { name: /body format/i });
-
-    userEvent.click(button);
-
-    const previewItem = screen.getByRole('menuitem', { name: 'Preview' });
-    const rawItem = screen.getByRole('menuitem', { name: 'Raw' });
-
-    expect(previewItem).toBeVisible();
-    expect(rawItem).toBeVisible();
-  });
-
-  it('displays XML response formats correctly', () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'application/xml',
-      bodyText: '<root><node/></root>',
-    };
-    render(
-      <MosaicProvider>
-        <TryItResponse response={response} />
-      </MosaicProvider>,
-    );
-
-    const button = screen.getByRole('button', { name: /body format/i });
-
-    userEvent.click(button);
-
-    const previewItem = screen.getByRole('menuitem', { name: 'Preview' });
-    const rawItem = screen.getByRole('menuitem', { name: 'Raw' });
-
-    expect(previewItem).toBeVisible();
-    expect(rawItem).toBeVisible();
-  });
-
-  it('does not display response format if there is only one', () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'text/plain',
-      bodyText: 'plain text',
-    };
-    render(
-      <MosaicProvider>
-        <TryItResponse response={response} />
-      </MosaicProvider>,
-    );
-
-    const button = screen.queryByRole('button', { name: /body format/i });
-
-    expect(button).not.toBeInTheDocument();
-  });
-
-  it('does not display "No supported" message if there is no body', () => {
-    const response: ResponseState = {
-      status: 200,
-      contentType: 'text/plain',
-      bodyText: '',
-    };
-    const { container } = render(<TryItResponse response={response} />);
-    expect(container).not.toHaveTextContent('No supported response body returned');
-  });
-
-  it.each([
-    ['application/json', 'json'],
-    [`application/json; charset='utf-8'`, 'json'],
-    ['application/example.com.kontakt+json;version=10;charset=UTF-8', 'json'],
-    ['application/foo-json', 'json'],
-    ['application/xml', 'xml'],
-    ['application/html', 'xml'],
-    ['text/xml', 'xml'],
-    ['text/html', 'xml'],
-    ['application/foo+xml', 'xml'],
-    ['text/plain', 'text'],
-    ['text/scv', 'text'],
-    ['text/foo', 'text'],
-    ['image/jpeg', 'image'],
-    ['image/gif', 'image'],
-    ['image/png', 'image'],
-    ['image/svg', 'image'],
-  ])('correctly maps %s mime type', (contentType, type) => {
-    const timerStart = Date.now();
-    const responseType = getResponseType(contentType);
-    const timerEnd = Date.now();
-
-    expect(responseType).toEqual(type);
-
-    // checking if regex is not too slow (https://github.com/stoplightio/platform-internal/issues/9446)
-    expect(timerEnd - timerStart).toBeLessThan(5000);
-  });
-});

package/src/components/TryIt/Response/Response.tsx

@@ -1,172 +0,0 @@
-import { safeParse, safeStringify } from '@stoplight/json';
-import { Box, Button, Flex, Icon, Image, Link, Menu, MenuItems, Panel } from '@stoplight/mosaic';
-import { capitalize } from 'lodash';
-import * as React from 'react';
-import formatXml from 'xml-formatter';
-
-import { HttpCodeDescriptions } from '../../../constants';
-import { getHttpCodeColor } from '../../../utils/http';
-import { ResponseCodeViewer } from './ReponseCodeViewer';
-
-export interface ResponseState {
-  status: number;
-  bodyText?: string;
-  contentType: string | null;
-  blob?: Blob;
-}
-
-export interface ErrorState {
-  error: Error;
-}
-
-type ContentType = 'image' | 'json' | 'xml' | 'text';
-type BodyFormat = 'preview' | 'raw';
-
-const bodyFormatMap: Record<ContentType, BodyFormat[]> = {
-  image: ['preview'],
-  json: ['preview', 'raw'],
-  xml: ['preview', 'raw'],
-  text: ['raw'],
-};
-
-const regex: Record<ContentType, RegExp> = {
-  image: /image\/(.?)*(jpeg|gif|png|svg)/,
-  json: /application\/(.?)*json/,
-  xml: /(text|application)\/(.?)*(xml|html)/,
-  text: /text\/.*/,
-};
-
-export function getResponseType(contentType: string) {
-  return Object.keys(regex).find(type => {
-    const reg = regex[type as ContentType];
-    return reg.test(contentType);
-  }) as ContentType | undefined;
-}
-
-function parseBody(body: string, type: ContentType) {
-  switch (type) {
-    case 'json':
-      return safeStringify(safeParse(body), undefined, 2) || body;
-    case 'xml':
-      try {
-        return formatXml(body);
-      } catch {
-        return body;
-      }
-    default:
-      return body;
-  }
-}
-
-export const TryItResponse: React.FC<{ response: ResponseState }> = ({ response }) => {
-  const contentType = response.contentType;
-  const responseType = contentType ? getResponseType(contentType) : undefined;
-  const bodyFormats = responseType ? bodyFormatMap[responseType] : [];
-
-  const [bodyFormat, setBodyFormat] = React.useState<BodyFormat | undefined>(
-    bodyFormats.length ? bodyFormats[0] : undefined,
-  );
-
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar
-        rightComponent={
-          bodyFormat &&
-          bodyFormats.length > 1 && <ResponseMenu types={bodyFormats} type={bodyFormat} onChange={setBodyFormat} />
-        }
-      >
-        Response
-      </Panel.Titlebar>
-      <Panel.Content>
-        <div>
-          <div className={`sl-mb-3 sl-text-${getHttpCodeColor(response.status)}`}>
-            {`${response.status} ${HttpCodeDescriptions[response.status] ?? ''}`}
-          </div>
-          {response.bodyText && responseType && ['json', 'xml', 'text'].includes(responseType) ? (
-            <ResponseCodeViewer
-              language="json"
-              value={
-                responseType && bodyFormat === 'preview'
-                  ? parseBody(response.bodyText, responseType)
-                  : response.bodyText
-              }
-            />
-          ) : response.blob && responseType === 'image' ? (
-            <Flex justifyContent="center">
-              <Image src={URL.createObjectURL(response.blob)} alt="response image" />
-            </Flex>
-          ) : !response.bodyText ? null : (
-            <p>
-              <Box as={Icon} icon={['fas', 'exclamation-circle']} mr={2} />
-              No supported response body returned
-            </p>
-          )}
-        </div>
-      </Panel.Content>
-    </Panel>
-  );
-};
-
-const ResponseMenu: React.FC<{
-  types: BodyFormat[];
-  type: BodyFormat;
-  onChange: (type: BodyFormat) => void;
-}> = ({ types, type, onChange }) => {
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = types.map(type => ({
-      id: type,
-      title: capitalize(type),
-      onPress: () => onChange(type),
-    }));
-
-    return items;
-  }, [types, onChange]);
-
-  return (
-    <Menu
-      aria-label="Body Format"
-      items={menuItems}
-      renderTrigger={({ isOpen }) => (
-        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
-          {capitalize(type)}
-        </Button>
-      )}
-    />
-  );
-};
-
-export const ResponseError: React.FC<{ state: ErrorState }> = ({ state: { error } }) => (
-  <Panel defaultIsOpen>
-    <Panel.Titlebar>Error</Panel.Titlebar>
-    <Panel.Content>{isNetworkError(error) ? <NetworkErrorMessage /> : <p>{error.message}</p>}</Panel.Content>
-  </Panel>
-);
-
-const NetworkErrorMessage = () => (
-  <>
-    <p className="sl-pb-2">
-      <strong>Network Error occurred.</strong>
-    </p>
-
-    <p className="sl-pb-2">1. Double check that your computer is connected to the internet.</p>
-
-    <p className="sl-pb-2">2. Make sure the API is actually running and available under the specified URL.</p>
-
-    <p>
-      3. If you've checked all of the above and still experiencing issues, check if the API supports{' '}
-      <Link
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
-        fontWeight="semibold"
-      >
-        CORS
-      </Link>
-      .
-    </p>
-  </>
-);
-
-export class NetworkError extends Error {}
-
-const isNetworkError = (error: Error) => error instanceof NetworkError;

package/src/components/TryIt/Response/hooks/useLineCount.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export const useLineCount = ({ example }: { example: string }) =>
-  React.useMemo(() => {
-    const lines = /\r?\n/g;
-    return (example.match(lines) || []).length;
-  }, [example]);

package/src/components/TryIt/Servers/ServerVariables.tsx

@@ -1,33 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { ServerVariable } from '../../../utils/http-spec/IServer';
-import { VariableEditor } from './VariableEditor';
-
-interface ServerVariablesProps<P extends keyof any = string> {
-  variables: readonly ServerVariable[];
-  values: Record<P, string>;
-  onChangeValue: (op: 'set' | 'unset', variableName: P, newValue: string) => void;
-}
-
-export const ServerVariables: React.FC<ServerVariablesProps> = ({ variables, values, onChangeValue }) => {
-  return (
-    <Panel defaultIsOpen data-test="server-vars-try-it">
-      <Panel.Titlebar>Server Variables</Panel.Titlebar>
-      <Panel.Content className="sl-overflow-y-auto ParameterGrid ServerVariablesContent">
-        {variables.map(variable => (
-          <VariableEditor
-            key={variable.name}
-            data-test="server-vars-try-it-row"
-            variable={variable}
-            value={values[variable.name]}
-            onChange={value => {
-              const actualValue = String(value);
-              onChangeValue(variable.enum || actualValue !== '' ? 'set' : 'unset', variable.name, actualValue);
-            }}
-          />
-        ))}
-      </Panel.Content>
-    </Panel>
-  );
-};

package/src/components/TryIt/Servers/ServersDropdown.tsx

@@ -1,53 +0,0 @@
-import { faServer } from '@fortawesome/free-solid-svg-icons';
-import { FieldButton, Menu, MenuItem } from '@stoplight/mosaic';
-import type { IServer } from '@stoplight/types';
-import { useAtom } from 'jotai';
-import * as React from 'react';
-
-import { getServerUrlWithVariableValues } from '../../../utils/http-spec/IServer';
-import { chosenServerAtom } from '../chosenServer';
-import { useServerVariables } from './useServerVariables';
-
-export type ServersDropdownProps = {
-  servers: IServer[];
-};
-
-export const ServersDropdown = ({ servers }: ServersDropdownProps) => {
-  const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
-  const { serverVariables } = useServerVariables();
-
-  const serverItems: MenuItem[] = [
-    {
-      type: 'option_group',
-      title: 'Servers',
-      value: chosenServer?.url || '',
-      onChange: url => {
-        const server = servers.find(server => server.url === url);
-        setChosenServer(server);
-      },
-      children: [
-        ...servers.map((server, i) => ({
-          id: server.url,
-          title: server.description,
-          description: getServerUrlWithVariableValues(server, serverVariables),
-          value: server.url,
-        })),
-      ],
-    },
-  ];
-
-  return (
-    <Menu
-      aria-label="Server"
-      items={serverItems}
-      closeOnPress
-      renderTrigger={({ isOpen }) => (
-        <FieldButton icon={faServer} size="sm" active={isOpen}>
-          {chosenServer?.description || 'Server'}
-        </FieldButton>
-      )}
-    />
-  );
-};
-
-ServersDropdown.displayName = 'ServersDropdown';

package/src/components/TryIt/Servers/VariableEditor.tsx

@@ -1,51 +0,0 @@
-import { Flex, Input, Select, SelectProps, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-import { useUniqueId } from '../../../hooks/useUniqueId';
-import { ServerVariable } from '../../../utils/http-spec/IServer';
-
-interface VariableProps {
-  variable: ServerVariable;
-  value?: string;
-  onChange: SelectProps['onChange'];
-  validate?: boolean;
-}
-
-export const VariableEditor: React.FC<VariableProps> = ({ variable, value, onChange }) => {
-  const inputId = useUniqueId(`id_${variable.name}_`);
-
-  return (
-    <>
-      <Text as="label" aria-hidden="true" data-testid="param-label" htmlFor={inputId} fontSize="base">
-        {variable.name}
-      </Text>
-      <Text mx={3}>:</Text>
-      <div>
-        {variable.enum ? (
-          <Select
-            flex={1}
-            aria-label={variable.name}
-            options={variable.enum.map(s => ({ value: s }))}
-            value={value || variable.default}
-            onChange={onChange}
-          />
-        ) : (
-          <Flex flex={1}>
-            <Input
-              id={inputId}
-              aria-label={variable.name}
-              appearance={'minimal'}
-              flex={1}
-              placeholder={variable.default}
-              type="text"
-              required
-              intent={'default'}
-              value={value || ''}
-              onChange={e => onChange && onChange(e.currentTarget.value)}
-            />
-          </Flex>
-        )}
-      </div>
-    </>
-  );
-};

package/src/components/TryIt/Servers/useServerVariables.ts

@@ -1,19 +0,0 @@
-import { atom, useAtom } from 'jotai';
-
-const persistedServerVariableValuesAtom = atom({});
-export const useServerVariables = () => {
-  const [serverVariables, setPersistedServerVariableValues] = useAtom(persistedServerVariableValuesAtom);
-
-  const updateServerVariableValue = (op: 'set' | 'unset', name: string, value: string) => {
-    const newServerVariables: { [key: string]: string } = { ...serverVariables };
-    if (op === 'unset') {
-      delete newServerVariables[name];
-    } else {
-      newServerVariables[name] = value;
-    }
-
-    setPersistedServerVariableValues(newServerVariables);
-  };
-
-  return { serverVariables, updateServerVariableValue };
-};