@stoplight/elements-core 9.0.16-beta-0.1 → 9.0.16-beta-0.2

package/src/components/TryIt/TryIt.stories.tsx

@@ -1,77 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import * as React from 'react';
-
-import { examplesRequestBody } from '../../__fixtures__/operations/examples-request-body';
-import { httpOperation as multipartOperation } from '../../__fixtures__/operations/multipart-formdata-post';
-import { httpOperation as putTodosOperation } from '../../__fixtures__/operations/put-todos';
-import { requestBody } from '../../__fixtures__/operations/request-body';
-import { duplicatedSecurityScheme } from '../../__fixtures__/operations/securedOperation';
-import { operation as simpleGetOperation } from '../../__fixtures__/operations/simple-get';
-import { httpOperation as urlEncodedOperation } from '../../__fixtures__/operations/urlencoded-post';
-import { httpOperation as urlEncodedOneOfOperation } from '../../__fixtures__/operations/urlencoded-post-oneof';
-import { operationWithUrlVariables } from '../../__fixtures__/operations/with-url-variables';
-import { TryIt, TryItProps } from './TryIt';
-
-export default {
-  title: 'Internal/TryIt Component',
-  component: TryIt,
-} as Meta<TryItProps>;
-
-const Template: Story<TryItProps> = args => <TryIt {...args} />;
-
-export const SimpleGET = Template.bind({});
-SimpleGET.args = {
-  httpOperation: simpleGetOperation,
-};
-
-export const WithParameters = Template.bind({});
-WithParameters.args = {
-  httpOperation: putTodosOperation,
-};
-
-export const WithVariables = Template.bind({});
-WithVariables.args = {
-  httpOperation: operationWithUrlVariables,
-};
-
-export const UrlEncoded = Template.bind({});
-UrlEncoded.args = {
-  httpOperation: urlEncodedOperation,
-};
-UrlEncoded.storyName = 'application/x-www-form-urlencoded';
-
-export const UrlEncodedOneOf = Template.bind({});
-UrlEncodedOneOf.args = {
-  httpOperation: urlEncodedOneOfOperation,
-};
-UrlEncodedOneOf.storyName = 'application/x-www-form-urlencoded with oneOf';
-
-export const Multipart = Template.bind({});
-Multipart.args = {
-  httpOperation: multipartOperation,
-};
-Multipart.storyName = 'multipart/form-data (with file upload)';
-
-export const RequestBodySchema = Template.bind({});
-RequestBodySchema.args = {
-  httpOperation: requestBody,
-};
-RequestBodySchema.storyName = 'Request Body From Schema';
-
-export const RequestBodyExamples = Template.bind({});
-RequestBodyExamples.args = {
-  httpOperation: examplesRequestBody,
-};
-RequestBodyExamples.storyName = 'Request Body from Examples';
-
-export const TryItAuth = Template.bind({});
-TryItAuth.args = {
-  httpOperation: putTodosOperation,
-};
-TryItAuth.storyName = 'TryIt Auth';
-
-export const TryItAuthDuplicated = Template.bind({});
-TryItAuthDuplicated.args = {
-  httpOperation: duplicatedSecurityScheme,
-};
-TryItAuthDuplicated.storyName = 'TryIt Auth (Duplicated Parameters)';

package/src/components/TryIt/TryIt.tsx

@@ -1,384 +0,0 @@
-import { Box, Button, HStack, Icon, ITextColorProps, Panel, useThemeIsDark } from '@stoplight/mosaic';
-import type { HttpMethod, IHttpEndpointOperation, IServer } from '@stoplight/types';
-import { Request as HarRequest } from 'har-format';
-import { useAtom } from 'jotai';
-import * as React from 'react';
-
-import { HttpMethodColors } from '../../constants';
-import { isHttpOperation, isHttpWebhookOperation } from '../../utils/guards';
-import { getServersToDisplay, getServerVariables } from '../../utils/http-spec/IServer';
-import { extractCodeSamples, RequestSamples } from '../RequestSamples';
-import { TryItAuth } from './Auth/Auth';
-import { usePersistedSecuritySchemeWithValues } from './Auth/authentication-utils';
-import { BinaryBody } from './Body/BinaryBody';
-import { FormDataBody } from './Body/FormDataBody';
-import { BodyParameterValues, useBodyParameterState } from './Body/request-body-utils';
-import { RequestBody } from './Body/RequestBody';
-import { useTextRequestBodyState } from './Body/useTextRequestBodyState';
-import { buildFetchRequest, buildHarRequest } from './build-request';
-import { chosenServerAtom } from './chosenServer';
-import { getMockData } from './Mocking/mocking-utils';
-import { MockingButton } from './Mocking/MockingButton';
-import { useMockingOptions } from './Mocking/useMockingOptions';
-import { OperationParameters } from './Parameters/OperationParameters';
-import { useRequestParameters } from './Parameters/useOperationParameters';
-import {
-  ErrorState,
-  getResponseType,
-  NetworkError,
-  ResponseError,
-  ResponseState,
-  TryItResponse,
-} from './Response/Response';
-import { ServersDropdown } from './Servers/ServersDropdown';
-import { ServerVariables } from './Servers/ServerVariables';
-import { useServerVariables } from './Servers/useServerVariables';
-
-export interface TryItProps {
-  httpOperation: IHttpEndpointOperation;
-
-  /**
-   * The base URL of the prism mock server to redirect traffic to.
-   *
-   * While non-prism based mocks may work to some limited extent, they might not understand the Prefer header as prism does.
-   *
-   * When a mockUrl is provided, a button to enable mocking via TryIt will be shown
-   */
-  mockUrl?: string;
-
-  /**
-   * Callback to retrieve the current request in a HAR format.
-   * Called whenever the request was changed in any way. Changing `httpOperation`, user entering parameter values, etc.
-   */
-  onRequestChange?: (currentRequest: HarRequest) => void;
-  requestBodyIndex?: number;
-  /**
-   * True when TryIt is embedded in Markdown doc
-   */
-  embeddedInMd?: boolean;
-
-  /**
-   * True when TryIt Panel should be hidden
-   */
-  hideTryItPanel?: boolean;
-
-  /**
-   * Fetch credentials policy for TryIt component
-   * For more information: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
-   * @default "omit"
-   */
-  tryItCredentialsPolicy?: 'omit' | 'include' | 'same-origin';
-  corsProxy?: string;
-}
-
-/**
- * Displays the TryIt component for a given IHttpOperation.
- * Relies on jotai, needs to be wrapped in a PersistenceContextProvider
- */
-
-const defaultServers: IServer[] = [];
-
-export const TryIt: React.FC<TryItProps> = ({
-  httpOperation,
-  mockUrl,
-  onRequestChange,
-  requestBodyIndex,
-  embeddedInMd = false,
-  hideTryItPanel = false,
-  tryItCredentialsPolicy,
-  corsProxy,
-}) => {
-  TryIt.displayName = 'TryIt';
-  const isDark = useThemeIsDark();
-
-  const [response, setResponse] = React.useState<ResponseState | ErrorState | undefined>();
-  const [requestData, setRequestData] = React.useState<HarRequest | undefined>();
-
-  const [loading, setLoading] = React.useState<boolean>(false);
-  const [validateParameters, setValidateParameters] = React.useState<boolean>(false);
-
-  const mediaTypeContent = httpOperation.request?.body?.contents?.[requestBodyIndex ?? 0];
-
-  const { allParameters, updateParameterValue, parameterValuesWithDefaults } = useRequestParameters(httpOperation);
-  const [mockingOptions, setMockingOptions] = useMockingOptions();
-
-  const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] =
-    useBodyParameterState(mediaTypeContent);
-
-  const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(
-    mediaTypeContent,
-    !isHttpWebhookOperation(httpOperation),
-  );
-
-  const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
-
-  const servers = React.useMemo(() => {
-    return getServersToDisplay(httpOperation.servers || defaultServers, mockUrl, false);
-  }, [httpOperation.servers, mockUrl]);
-  const firstServer = servers[0] || null;
-  const [chosenServer, setChosenServer] = useAtom(chosenServerAtom);
-  const serverVariables = getServerVariables(chosenServer);
-  const { serverVariables: serverVariableValues, updateServerVariableValue } = useServerVariables();
-  const isMockingEnabled = mockUrl && chosenServer?.url === mockUrl;
-
-  const hasRequiredButEmptyParameters = allParameters.some(
-    parameter => parameter.required && !parameterValuesWithDefaults[parameter.name],
-  );
-
-  const customCodeSamples = extractCodeSamples(httpOperation);
-
-  const getValues = () =>
-    Object.keys(bodyParameterValues)
-      .filter(param => !isAllowedEmptyValues[param] ?? true)
-      .reduce<BodyParameterValues>((previousValue, currentValue) => {
-        previousValue[currentValue] = bodyParameterValues[currentValue];
-        return previousValue;
-      }, {});
-
-  const getBinaryValue = () => bodyParameterValues.file;
-
-  React.useEffect(() => {
-    const currentUrl = chosenServer?.url;
-
-    // simple attempt to preserve / sync up active server if the URLs are the same between re-renders / navigation
-    const exists = currentUrl && servers.find(s => s.url === currentUrl);
-    if (!exists) {
-      setChosenServer(firstServer);
-    } else if (exists.id !== chosenServer.id) {
-      setChosenServer(exists);
-    }
-  }, [servers, firstServer, chosenServer, setChosenServer]);
-
-  React.useEffect(() => {
-    let isMounted = true;
-    if (isHttpOperation(httpOperation) && (onRequestChange || embeddedInMd)) {
-      buildHarRequest({
-        mediaTypeContent,
-        parameterValues: parameterValuesWithDefaults,
-        serverVariableValues,
-        httpOperation,
-        bodyInput: formDataState.isFormDataBody
-          ? getValues()
-          : formDataState.isBinaryBody
-          ? getBinaryValue()
-          : textRequestBody,
-        auth: operationAuthValue,
-        ...(isMockingEnabled && { mockData: getMockData(mockUrl, httpOperation, mockingOptions) }),
-        chosenServer,
-        corsProxy,
-      }).then(request => {
-        if (isMounted) {
-          if (onRequestChange) {
-            onRequestChange(request);
-          }
-          if (embeddedInMd) {
-            setRequestData(request);
-          }
-        }
-      });
-    }
-    return () => {
-      isMounted = false;
-    };
-    // disabling because we don't want to react on `onRequestChange` change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    httpOperation,
-    parameterValuesWithDefaults,
-    formDataState.isFormDataBody,
-    bodyParameterValues,
-    serverVariableValues,
-    isAllowedEmptyValues,
-    textRequestBody,
-    operationAuthValue,
-    mockingOptions,
-    chosenServer,
-    corsProxy,
-    embeddedInMd,
-  ]);
-
-  const handleSendRequest = async () => {
-    setValidateParameters(true);
-
-    if (hasRequiredButEmptyParameters || !isHttpOperation(httpOperation)) return;
-
-    try {
-      setLoading(true);
-      const mockData = isMockingEnabled ? getMockData(mockUrl, httpOperation, mockingOptions) : undefined;
-
-      const request = await buildFetchRequest({
-        parameterValues: parameterValuesWithDefaults,
-        serverVariableValues,
-        httpOperation,
-        mediaTypeContent,
-        bodyInput: formDataState.isFormDataBody
-          ? getValues()
-          : formDataState.isBinaryBody
-          ? getBinaryValue()
-          : textRequestBody,
-        mockData,
-        auth: operationAuthValue,
-        chosenServer,
-        credentials: tryItCredentialsPolicy,
-        corsProxy,
-      });
-      let response: Response | undefined;
-      try {
-        response = await fetch(...request);
-      } catch (e: any) {
-        setResponse({ error: new NetworkError(e.message) });
-      }
-      if (response) {
-        const contentType = response.headers.get('Content-Type');
-        const type = contentType ? getResponseType(contentType) : undefined;
-
-        const bodyText = type !== 'image' ? await response.text() : undefined;
-        const blob = type === 'image' ? await response.blob() : undefined;
-
-        setResponse(undefined); // setting undefined to handle rendering large responses
-        setResponse({
-          status: response.status,
-          bodyText,
-          blob,
-          contentType,
-        });
-      }
-    } catch (e: any) {
-      setResponse({ error: e });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const isOnlySendButton =
-    !httpOperation.security?.length && !allParameters.length && !formDataState.isFormDataBody && !mediaTypeContent;
-
-  const tryItPanelContents = (
-    <>
-      {httpOperation.security?.length ? (
-        <TryItAuth
-          operationSecuritySchemes={httpOperation.security}
-          operationAuthValue={operationAuthValue}
-          setOperationAuthValue={setOperationAuthValue}
-          setCurrentScheme={setCurrentScheme}
-        />
-      ) : null}
-
-      {isHttpOperation(httpOperation) && serverVariables.length > 0 && (
-        <ServerVariables
-          variables={serverVariables}
-          values={serverVariableValues}
-          onChangeValue={updateServerVariableValue}
-        />
-      )}
-
-      {allParameters.length > 0 && (
-        <OperationParameters
-          parameters={allParameters}
-          values={parameterValuesWithDefaults}
-          onChangeValue={updateParameterValue}
-          validate={validateParameters}
-        />
-      )}
-
-      <Box pb={1}>
-        {formDataState.isFormDataBody ? (
-          <FormDataBody
-            specification={formDataState.bodySpecification}
-            values={bodyParameterValues}
-            onChangeValues={setBodyParameterValues}
-            onChangeParameterAllow={setAllowedEmptyValues}
-            isAllowedEmptyValues={isAllowedEmptyValues}
-          />
-        ) : formDataState.isBinaryBody ? (
-          <BinaryBody
-            specification={formDataState.bodySpecification}
-            values={bodyParameterValues}
-            onChangeValues={setBodyParameterValues}
-          />
-        ) : mediaTypeContent ? (
-          <RequestBody
-            examples={mediaTypeContent.examples ?? []}
-            requestBody={textRequestBody}
-            onChange={setTextRequestBody}
-          />
-        ) : null}
-      </Box>
-
-      {isHttpOperation(httpOperation) ? (
-        <Panel.Content className="SendButtonHolder" pt={!isOnlySendButton && !embeddedInMd ? 0 : undefined}>
-          <HStack alignItems="center" spacing={2}>
-            <Button appearance="primary" loading={loading} disabled={loading} onPress={handleSendRequest} size="sm">
-              Send API Request
-            </Button>
-
-            {servers.length > 1 && <ServersDropdown servers={servers} />}
-
-            {isMockingEnabled && (
-              <MockingButton options={mockingOptions} onOptionsChange={setMockingOptions} operation={httpOperation} />
-            )}
-          </HStack>
-
-          {validateParameters && hasRequiredButEmptyParameters && (
-            <Box mt={4} color="danger-light" fontSize="sm">
-              <Icon icon={['fas', 'exclamation-triangle']} className="sl-mr-1" />
-              You didn't provide all of the required parameters!
-            </Box>
-          )}
-        </Panel.Content>
-      ) : null}
-    </>
-  );
-
-  let tryItPanelElem;
-
-  // when TryIt is embedded, we need to show extra context at the top about the method + path
-  if (embeddedInMd) {
-    let path: string;
-
-    if (isHttpOperation(httpOperation)) {
-      path = httpOperation.path;
-    } else if (isHttpWebhookOperation(httpOperation)) {
-      path = httpOperation.name;
-    } else {
-      throw new RangeError('unsupported type');
-    }
-
-    tryItPanelElem = (
-      <Panel isCollapsible={false} p={0} className="TryItPanel">
-        <Panel.Titlebar bg="canvas-300">
-          <Box
-            fontWeight="bold"
-            color={
-              !isDark ? (HttpMethodColors[httpOperation.method as HttpMethod] as ITextColorProps['color']) : undefined
-            }
-          >
-            {httpOperation.method.toUpperCase()}
-          </Box>
-          <Box fontWeight="medium" ml={2} textOverflow="truncate" overflowX="hidden">
-            {`${chosenServer?.url || ''}${path}`}
-          </Box>
-        </Panel.Titlebar>
-
-        {tryItPanelContents}
-      </Panel>
-    );
-  } else {
-    tryItPanelElem = (
-      <Box className="TryItPanel" bg="canvas-100">
-        {tryItPanelContents}
-      </Box>
-    );
-  }
-
-  return (
-    <Box rounded="lg" overflowY="hidden">
-      {hideTryItPanel ? null : tryItPanelElem}
-      {requestData && embeddedInMd && (
-        <RequestSamples request={requestData} customCodeSamples={customCodeSamples} embeddedInMd />
-      )}
-      {response && !('error' in response) && <TryItResponse response={response} />}
-      {response && 'error' in response && <ResponseError state={response} />}
-    </Box>
-  );
-};

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

@@ -1,143 +0,0 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import * as React from 'react';
-
-import { httpOperation as putTodosOperation } from '../../__fixtures__/operations/put-todos';
-import { operationWithUrlVariables } from '../../__fixtures__/operations/with-url-variables';
-import { withPersistenceBoundary } from '../../context/Persistence';
-import { withMosaicProvider } from '../../hoc/withMosaicProvider';
-import { chooseOption } from '../../utils/tests/chooseOption';
-import { TryItWithRequestSamples as RawComponent } from './TryItWithRequestSamples';
-
-const TryItWithRequestSamples = withMosaicProvider(withPersistenceBoundary(RawComponent));
-
-describe('TryItWithRequestSamples', () => {
-  it('displays RequestSamples and TryIt', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    expect(await screen.findByText('Request Sample: Shell / cURL')).toBeVisible();
-    expect(await screen.findByRole('button', { name: /Send API Request/i })).toBeVisible();
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent(/PUT/i);
-  });
-
-  it('RequestSamples hidden', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} hideSamples={true} />);
-
-    await waitFor(() => expect(screen.queryByText('Request Sample: Shell / cURL')).not.toBeInTheDocument());
-  });
-
-  it('TryIt hidden', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} hideTryIt={true} />);
-
-    await waitFor(() => expect(screen.queryByRole('button', { name: /Send API Request/i })).not.toBeInTheDocument());
-  });
-
-  it('reacts to parameter input', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const todoIdField = await screen.findByLabelText('todoId');
-    userEvent.type(todoIdField, '123456789');
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/todos\/123456789/));
-  });
-
-  it('reacts to mocking', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} mockUrl="https://mock-todos.stoplight.io" />);
-
-    const serversButton = screen.getByRole('button', { name: /server/i });
-    act(() => userEvent.click(serversButton));
-
-    // enable mocking
-    let enableItem = screen.getByRole('menuitemradio', { name: /mock server/i });
-    act(() => userEvent.click(enableItem));
-
-    // open mock dropdown
-    const mockButton = screen.getByRole('button', { name: /mock settings/i });
-    act(() => userEvent.click(mockButton));
-
-    // set response code
-    const responseCodeItem = screen.getByRole('menuitemcheckbox', { name: '200' });
-    act(() => userEvent.click(responseCodeItem));
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent(/https:\/\/mock-todos\.stoplight\.io/);
-    expect(codeViewer).toHaveTextContent(/Prefer: code=200/);
-  });
-
-  it('includes renders authentication data with suggested value initially', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/&API\+Key=123'/));
-
-    const apiKeyField = await screen.findByLabelText('API Key');
-    userEvent.type(apiKeyField, '123456789');
-
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/&API\+Key=123456789'/));
-
-    userEvent.clear(apiKeyField);
-    userEvent.type(apiKeyField, '23456789');
-
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/&API\+Key=23456789'/));
-
-    userEvent.clear(apiKeyField);
-
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/&API\+Key=123'/));
-  });
-
-  it('displays parameter name for empty path parameter', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    await waitFor(() => expect(codeViewer).toHaveTextContent(/todos\/{todoId}/));
-  });
-
-  it('displays base url correctly', async () => {
-    render(<TryItWithRequestSamples httpOperation={operationWithUrlVariables} />);
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent('ftp://default-namespace.stoplight.io/api/eu/todos');
-  });
-
-  it('by default displays 1st server url in request samples', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent('https://todos.stoplight.io');
-  });
-
-  it('changes request sample when changing server', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const serversButton = screen.getByRole('button', { name: /server/i });
-    act(() => userEvent.click(serversButton));
-
-    let enableItem = screen.getByRole('menuitemradio', { name: /development/i });
-    act(() => userEvent.click(enableItem));
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent('https://todos-dev.stoplight.io');
-  });
-
-  it('changes request sample when changing server variables', async () => {
-    render(<TryItWithRequestSamples httpOperation={putTodosOperation} />);
-
-    const serversButton = screen.getByRole('button', { name: /server/i });
-    userEvent.click(serversButton);
-
-    let enableItem = screen.getByRole('menuitemradio', { name: /pr/i });
-    userEvent.click(enableItem);
-
-    const protoField = screen.getByLabelText('proto');
-    chooseOption(protoField, 'https');
-
-    const prField = screen.getByLabelText('pr');
-    userEvent.type(prField, '123');
-
-    const codeViewer = await screen.findByLabelText(/curl/);
-    expect(codeViewer).toHaveTextContent('https://x-123.todos-pr.stoplight.io');
-  });
-});

package/src/components/TryIt/TryItWithRequestSamples.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import * as React from 'react';
-
-import { httpOperation as putTodosOperation } from '../../__fixtures__/operations/put-todos';
-import { operationWithUrlVariables } from '../../__fixtures__/operations/with-url-variables';
-import { TryItWithRequestSamples, TryItWithRequestSamplesProps } from './TryItWithRequestSamples';
-
-export default {
-  title: 'Internal/TryItWithRequestSamples',
-  component: TryItWithRequestSamples,
-} as Meta<TryItWithRequestSamplesProps>;
-
-const Template: Story<TryItWithRequestSamplesProps> = args => <TryItWithRequestSamples {...args} />;
-
-export const WithParameters = Template.bind({});
-WithParameters.args = {
-  httpOperation: putTodosOperation,
-};
-WithParameters.storyName = 'With Parameters';
-
-export const WithVariables = Template.bind({});
-WithVariables.args = {
-  httpOperation: operationWithUrlVariables,
-};
-WithVariables.storyName = 'With Server Variables';
-
-export const WithoutTryItPanel = Template.bind({});
-WithoutTryItPanel.args = {
-  hideTryIt: true,
-  httpOperation: operationWithUrlVariables,
-};
-WithoutTryItPanel.storyName = 'Without Try It Panel';

package/src/components/TryIt/TryItWithRequestSamples.tsx

@@ -1,42 +0,0 @@
-import { Box, InvertTheme, VStack } from '@stoplight/mosaic';
-import { Request as HarRequest } from 'har-format';
-import * as React from 'react';
-
-import { extractCodeSamples, RequestSamples } from '../RequestSamples';
-import { ResponseExamples, ResponseExamplesProps } from '../ResponseExamples/ResponseExamples';
-import { TryIt, TryItProps } from './TryIt';
-
-export type TryItWithRequestSamplesProps = Omit<TryItProps, 'onRequestChange'> &
-  ResponseExamplesProps & { hideTryIt?: boolean; hideTryItPanel?: boolean; hideSamples?: boolean };
-
-export const TryItWithRequestSamples: React.FC<TryItWithRequestSamplesProps> = ({
-  hideTryIt,
-  hideTryItPanel,
-  hideSamples,
-  ...props
-}) => {
-  const [requestData, setRequestData] = React.useState<HarRequest | undefined>();
-
-  const customCodeSamples = extractCodeSamples(props.httpOperation);
-
-  return (
-    <VStack spacing={6}>
-      {!hideTryIt ? (
-        <InvertTheme>
-          <Box>
-            <TryIt {...props} hideTryItPanel={hideTryItPanel} onRequestChange={setRequestData} />
-          </Box>
-        </InvertTheme>
-      ) : (
-        // The TryIt is responsible for generating the Request Data so it should always be rendered
-        <>
-          <TryIt {...props} hideTryItPanel={hideTryIt} onRequestChange={setRequestData} />
-        </>
-      )}
-
-      {requestData && !hideSamples && <RequestSamples request={requestData} customCodeSamples={customCodeSamples} />}
-
-      <ResponseExamples {...props} />
-    </VStack>
-  );
-};