@stoplight/elements-core 9.0.11 → 9.0.12-beta-0.1

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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,384 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,42 @@
+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>
+  );
+};