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

package/src/components/RequestSamples/RequestSamples.tsx

@@ -1,246 +0,0 @@
-import { Box, Button, CopyButton, Menu, MenuItems, Panel } from '@stoplight/mosaic';
-import { CodeViewer } from '@stoplight/mosaic-code-viewer';
-import { Dictionary } from '@stoplight/types';
-import { Request } from 'har-format';
-import { atom, useAtom } from 'jotai';
-import { cloneDeep, find, findKey } from 'lodash';
-import React, { memo, useEffect, useMemo, useState } from 'react';
-
-import { persistAtom } from '../../utils/jotai/persistAtom';
-import { convertRequestToSample } from './convertRequestToSample';
-import { CodeSample } from './extractCodeSamples';
-import {
-  LanguageConfig,
-  LibraryConfig,
-  requestSampleConfigs,
-  SupportedLanguage,
-  SupportedLibrary,
-} from './requestSampleConfigs';
-
-export interface RequestSamplesProps {
-  /**
-   * The HTTP request to generate code for.
-   */
-  request: Request;
-  /**
-   * The list of code examples to override the generated ones.
-   */
-  customCodeSamples?: CodeSample[];
-  /**
-   * True when embedded in TryIt
-   */
-  embeddedInMd?: boolean;
-}
-
-type SampleCode = {
-  displayText: string;
-  sampleCode?: string;
-};
-
-type LibraryConfigWithCode = LibraryConfig & SampleCode;
-
-type LanguageConfigWithCode = LanguageConfig &
-  SampleCode & {
-    libraries: Dictionary<LibraryConfigWithCode, SupportedLibrary>;
-  };
-
-const selectedLanguageAtom = persistAtom<string>('RequestSamples_selectedLanguage', atom('shell'));
-const selectedLibraryAtom = persistAtom<string>('RequestSamples_selectedLibrary', atom('curl'));
-
-const fallbackText = 'Unable to generate code example';
-
-/**
- * Generates program code that makes the HTTP call specified by `request`.
- *
- * The programming language can be selected by the user and is remembered across instances and remounts.
- */
-export const RequestSamples = memo<RequestSamplesProps>(({ request, embeddedInMd = false, customCodeSamples = [] }) => {
-  const [selectedLanguage, setSelectedLanguage] = useAtom(selectedLanguageAtom);
-  const [selectedLibrary, setSelectedLibrary] = useAtom(selectedLibraryAtom);
-
-  // combines the predefined samples with the custom ones
-  const allRequestSamples = useMemo(() => {
-    const requestSamples = cloneDeep(requestSampleConfigs as Dictionary<LanguageConfigWithCode, SupportedLanguage>);
-
-    Object.entries(requestSamples).forEach(([languageKey, value]) => {
-      value.displayText = languageKey;
-
-      Object.entries((value.libraries ??= {})).forEach(([libKey, value]) => {
-        value.displayText = `${languageKey} / ${libKey}`;
-      });
-    });
-
-    for (const customCodeSample of customCodeSamples) {
-      const existingLanguageSampleKey = findKey(requestSamples, {
-        httpSnippetLanguage: customCodeSample.lang.toLowerCase(),
-      });
-      const existingLanguageSample = requestSamples[existingLanguageSampleKey!];
-
-      if (!existingLanguageSample) {
-        const newLanguageSample: LanguageConfigWithCode = {
-          displayText: customCodeSample.lang,
-          mosaicCodeViewerLanguage: customCodeSample.lang as any, // TODO: no type guards to prevent this
-          httpSnippetLanguage: customCodeSample.lang,
-          libraries: {},
-        };
-
-        if (customCodeSample.lib) {
-          newLanguageSample.libraries[customCodeSample.lib] = {
-            displayText: `${customCodeSample.lang} / ${customCodeSample.lib}`,
-            httpSnippetLibrary: customCodeSample.lib,
-            sampleCode: customCodeSample.source,
-          };
-        } else {
-          newLanguageSample.sampleCode = customCodeSample.source;
-        }
-
-        requestSamples[customCodeSample.label] = newLanguageSample;
-      } else {
-        existingLanguageSample.libraries ??= {};
-
-        if (customCodeSample.lib) {
-          const existingLibrarySampleKey = findKey(existingLanguageSample.libraries, {
-            httpSnippetLibrary: customCodeSample.lib,
-          });
-          const existingLibrarySample = existingLanguageSample.libraries[existingLibrarySampleKey!];
-
-          if (!existingLibrarySample) {
-            const newLibrarySample: LibraryConfigWithCode = {
-              displayText: `${existingLanguageSample} / ${customCodeSample.lib}`,
-              httpSnippetLibrary: customCodeSample.lib,
-              sampleCode: customCodeSample.source,
-            };
-
-            existingLanguageSample.libraries[customCodeSample.lib] = newLibrarySample;
-          } else {
-            existingLibrarySample.displayText = `${existingLanguageSampleKey} / ${existingLibrarySampleKey}`;
-            existingLibrarySample.sampleCode = customCodeSample.source;
-          }
-        } else {
-          existingLanguageSample.sampleCode = customCodeSample.source;
-        }
-      }
-    }
-
-    return requestSamples;
-  }, [customCodeSamples]);
-
-  // Computes the menu items and gets the selected config
-  const [menuItems, selectedSampleConfig] = useMemo(() => {
-    const items: MenuItems = Object.entries(allRequestSamples).map(([languageLabel, languageConfig]) => {
-      const hasLibraries = Object.keys(languageConfig.libraries ?? {}).length > 0;
-      return {
-        id: languageLabel,
-        title: languageLabel,
-        isChecked: selectedLanguage === languageConfig.httpSnippetLanguage,
-        closeOnPress: !hasLibraries,
-        onPress: hasLibraries
-          ? undefined
-          : () => {
-              setSelectedLanguage(languageConfig.httpSnippetLanguage);
-              setSelectedLibrary('');
-            },
-        children: hasLibraries
-          ? Object.entries(languageConfig.libraries).map(([libraryLabel, libraryConfig]) => ({
-              id: `${languageLabel}-${libraryLabel}`,
-              title: libraryLabel,
-              isChecked:
-                selectedLanguage === languageConfig.httpSnippetLanguage &&
-                selectedLibrary === libraryConfig.httpSnippetLibrary,
-              onPress: () => {
-                setSelectedLanguage(languageConfig.httpSnippetLanguage);
-                setSelectedLibrary(libraryConfig.httpSnippetLibrary);
-              },
-            }))
-          : undefined,
-      };
-    });
-
-    const selectedLanguageSample = find(allRequestSamples, { httpSnippetLanguage: selectedLanguage });
-    const selectedLibrarySample = find(selectedLanguageSample?.libraries ?? {}, {
-      httpSnippetLibrary: selectedLibrary,
-    });
-
-    return [
-      items,
-      {
-        ...selectedLibrarySample,
-        ...selectedLanguageSample,
-        displayText: selectedLibrarySample?.displayText ?? selectedLanguageSample?.displayText,
-      },
-    ];
-  }, [allRequestSamples, selectedLanguage, selectedLibrary, setSelectedLanguage, setSelectedLibrary]);
-
-  const [requestSample, setRequestSample] = useState<string | null>(null);
-  useEffect(() => {
-    let isStale = false;
-
-    if (selectedSampleConfig) {
-      if (selectedSampleConfig.sampleCode) {
-        setRequestSample(selectedSampleConfig.sampleCode);
-      } else {
-        convertRequestToSample(
-          selectedSampleConfig.httpSnippetLanguage!,
-          selectedSampleConfig.httpSnippetLibrary!,
-          request,
-        )
-          .then(example => {
-            if (!isStale) {
-              setRequestSample(example);
-            }
-          })
-          .catch(() => {
-            if (!isStale) {
-              setRequestSample(fallbackText);
-            }
-          });
-      }
-    } else {
-      setRequestSample(fallbackText);
-    }
-
-    return () => {
-      isStale = true;
-    };
-  }, [request, selectedSampleConfig]);
-
-  return (
-    <Panel rounded={embeddedInMd ? undefined : true} isCollapsible={embeddedInMd}>
-      <Panel.Titlebar rightComponent={<CopyButton size="sm" copyValue={requestSample || ''} />}>
-        <Box ml={-2}>
-          <Menu
-            aria-label="Request Sample Language"
-            closeOnPress
-            items={menuItems}
-            renderTrigger={({ isOpen }) => (
-              <Button size="sm" iconRight="chevron-down" appearance="minimal" active={isOpen}>
-                Request Sample: {selectedSampleConfig.displayText}
-              </Button>
-            )}
-          />
-        </Box>
-      </Panel.Titlebar>
-
-      <Panel.Content p={0}>
-        {requestSample !== null && (
-          <CodeViewer
-            aria-label={requestSample}
-            noCopyButton
-            maxHeight="400px"
-            language={selectedSampleConfig?.mosaicCodeViewerLanguage}
-            value={requestSample}
-            style={
-              embeddedInMd
-                ? undefined
-                : // when not rendering in prose (markdown), reduce font size to be consistent with base UI
-                  {
-                    // @ts-expect-error react css typings do not allow for css variables...
-                    '--fs-code': 12,
-                  }
-            }
-          />
-        )}
-      </Panel.Content>
-    </Panel>
-  );
-});

package/src/components/RequestSamples/__tests__/RequestSamples.test.tsx

@@ -1,131 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { screen } from '@testing-library/dom';
-import { cleanup, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import * as React from 'react';
-import { TextDecoder, TextEncoder } from 'util';
-
-import { withPersistenceBoundary } from '../../../context/Persistence';
-import { withMosaicProvider } from '../../../hoc/withMosaicProvider';
-import { RequestSamples as RequestSamplesWithoutPersistence } from '../RequestSamples';
-
-const RequestSamples = withMosaicProvider(withPersistenceBoundary(RequestSamplesWithoutPersistence));
-
-const sampleRequest = {
-  method: 'POST',
-  url: 'https://google.com',
-  httpVersion: 'HTTP/1.1',
-  headers: [
-    {
-      name: 'Cache-Control',
-      value: 'max-age=0',
-    },
-  ],
-  queryString: [],
-  cookies: [],
-  postData: {
-    mimeType: 'multipart/form-data',
-    params: [
-      {
-        name: 'file',
-        fileName: 'example.jpeg',
-        contentType: 'image.jpeg',
-      },
-    ],
-  },
-  headersSize: 678,
-  bodySize: -1,
-};
-
-globalThis.TextEncoder = TextEncoder;
-// @ts-ignore
-globalThis.TextDecoder = TextDecoder;
-
-describe('RequestSend', () => {
-  beforeEach(() => {
-    localStorage.clear();
-  });
-
-  it('Displays basic CURL request', async () => {
-    const { container } = render(<RequestSamples request={sampleRequest} />);
-
-    await waitFor(() => expect(container).toHaveTextContent('curl'));
-    expect(container).toHaveTextContent('POST');
-    expect(container).toHaveTextContent('https://google.com');
-    expect(container).toHaveTextContent('max-age=0');
-  });
-
-  it('Allows language switching', async () => {
-    const { container } = render(<RequestSamples request={sampleRequest} />);
-    await chooseLanguage('JavaScript', 'Axios');
-
-    await waitFor(() => expect(container).toHaveTextContent('axios'));
-    expect(container).toHaveTextContent('POST');
-    expect(container).toHaveTextContent('https://google.com');
-    expect(container).toHaveTextContent('max-age=0');
-  });
-
-  it('preserves language and library between renders', async () => {
-    render(<RequestSamples request={sampleRequest} />);
-    await chooseLanguage('JavaScript', 'Axios');
-
-    cleanup();
-
-    const { container } = render(<RequestSamples request={sampleRequest} />);
-    const langSelector = getLanguageSelectorButton();
-    expect(langSelector).toHaveTextContent(/axios/i);
-    await waitFor(() => expect(container).toHaveTextContent('axios'));
-  });
-
-  it('allows to change lang/lib after rerender', async () => {
-    render(<RequestSamples request={sampleRequest} />);
-    await chooseLanguage('JavaScript', 'Axios');
-
-    cleanup();
-
-    render(<RequestSamples request={sampleRequest} />);
-    const langSelector = getLanguageSelectorButton();
-    await chooseLanguage('JavaScript', 'Fetch');
-
-    expect(langSelector).toHaveTextContent(/javascript/i);
-    expect(langSelector).toHaveTextContent(/fetch/i);
-  });
-
-  it('switches to language with no library', async () => {
-    const { container } = render(<RequestSamples request={sampleRequest} />);
-    const langSelector = getLanguageSelectorButton();
-    await chooseLanguage('Obj-C');
-
-    expect(langSelector).toHaveTextContent(/obj-c/i);
-    await waitFor(() => expect(container).toHaveTextContent('#import <Foundation/Foundation.h>'));
-  });
-
-  it('adds multipart form data to js/fetch request', async () => {
-    const { container } = render(<RequestSamples request={sampleRequest} />);
-    const langSelector = getLanguageSelectorButton();
-    await chooseLanguage('JavaScript', 'Fetch');
-
-    expect(langSelector).toHaveTextContent(/javascript/i);
-    expect(langSelector).toHaveTextContent(/fetch/i);
-    await waitFor(() => expect(container).toHaveTextContent('options.body = form;'));
-  });
-});
-
-function getLanguageSelectorButton() {
-  return screen.getByRole('button', { name: /Request Sample/i });
-}
-
-async function chooseLanguage(language: string, library?: string) {
-  const langSelector = getLanguageSelectorButton();
-  userEvent.click(langSelector);
-
-  const menuItem = await screen.findByRole('menuitemcheckbox', { name: language });
-  if (!library) {
-    userEvent.click(menuItem);
-  } else {
-    userEvent.hover(menuItem);
-    const subMenuItem = await screen.findByRole('menuitemcheckbox', { name: library });
-    userEvent.click(subMenuItem);
-  }
-}