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

package/src/components/Docs/HttpOperation/Responses.tsx

@@ -0,0 +1,247 @@
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Icon,
+  IntentVals,
+  ListBox,
+  ListBoxItem,
+  Modal,
+  NodeAnnotation,
+  Select,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  useModalState,
+  VStack,
+} from '@stoplight/mosaic';
+import { IHttpOperationResponse } from '@stoplight/types';
+import { sortBy, uniqBy } from 'lodash';
+import * as React from 'react';
+
+import { useSchemaInlineRefResolver } from '../../../context/InlineRefResolver';
+import { useOptionsCtx } from '../../../context/Options';
+import { getOriginalObject } from '../../../utils/ref-resolving/resolvedObject';
+import { MarkdownViewer } from '../../MarkdownViewer';
+import { SectionSubtitle, SectionTitle } from '../Sections';
+import { Parameters } from './Parameters';
+
+interface ResponseProps {
+  response: IHttpOperationResponse;
+  onMediaTypeChange?: (mediaType: string) => void;
+}
+
+interface ResponsesProps {
+  responses: IHttpOperationResponse[];
+  onMediaTypeChange?: (mediaType: string) => void;
+  onStatusCodeChange?: (statusCode: string) => void;
+  isCompact?: boolean;
+}
+
+export const Responses = ({
+  responses: unsortedResponses,
+  onStatusCodeChange,
+  onMediaTypeChange,
+  isCompact,
+}: ResponsesProps) => {
+  const responses = sortBy(
+    uniqBy(unsortedResponses, r => r.code),
+    r => r.code,
+  );
+
+  const [activeResponseId, setActiveResponseId] = React.useState(responses[0]?.code ?? '');
+  const { isOpen, open, close } = useModalState();
+
+  const onSelectionChange = React.useCallback(
+    keys => {
+      const selectedId = keys.values().next().value;
+      const selectedResponse = responses?.find(response => response.id === selectedId);
+      if (selectedResponse) {
+        setActiveResponseId(selectedResponse.code);
+        close();
+      }
+    },
+    [responses, setActiveResponseId, close],
+  );
+
+  React.useEffect(() => {
+    onStatusCodeChange?.(activeResponseId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeResponseId]);
+
+  if (!responses.length) return null;
+
+  const response = responses.find(r => r.code === activeResponseId) || responses[0];
+
+  const compactResponses = (
+    <>
+      <Button
+        aria-label="response-codes"
+        onPress={open}
+        iconRight={<Icon icon="chevron-down" color="var(--color-border-button)" />}
+        style={{
+          color: `var(--color-${codeToIntentVal(activeResponseId)})`,
+        }}
+        appearance="minimal"
+      >
+        {activeResponseId}
+      </Button>
+
+      <Modal
+        title="Response Code"
+        isOpen={isOpen}
+        onClose={close}
+        size="sm"
+        footer={
+          <HStack justifyContent="end">
+            <Button onPress={close} intent="default" appearance="primary">
+              Close
+            </Button>
+          </HStack>
+        }
+      >
+        <ListBox
+          aria-label="Response Code"
+          overflowY="auto"
+          m={-5}
+          items={responses}
+          selectionMode="single"
+          onSelectionChange={onSelectionChange}
+        >
+          {(response: IHttpOperationResponse) => (
+            <ListBoxItem key={response.id}>
+              <Box data-test={response.code} p={3} bg={{ hover: 'primary-tint' }}>
+                <Flex w="2xl" align="center" justify="end">
+                  {response.code === activeResponseId && <Box as={Icon} icon="check" />}
+                  <Text ml={3} fontWeight="medium">
+                    {response.code}
+                  </Text>
+                </Flex>
+              </Box>
+            </ListBoxItem>
+          )}
+        </ListBox>
+      </Modal>
+    </>
+  );
+
+  const tabResponses = (
+    <TabList density="compact">
+      {responses.map(({ code }) => (
+        <Tab key={code} id={code} intent={codeToIntentVal(code)}>
+          {code}
+        </Tab>
+      ))}
+    </TabList>
+  );
+
+  return (
+    <VStack spacing={8} as={Tabs} selectedId={activeResponseId} onChange={setActiveResponseId} appearance="pill">
+      <SectionTitle title="Responses" isCompact={isCompact}>
+        {isCompact ? compactResponses : tabResponses}
+      </SectionTitle>
+
+      {isCompact ? (
+        <Response response={response} onMediaTypeChange={onMediaTypeChange} />
+      ) : (
+        <TabPanels p={0}>
+          {responses.map(response => (
+            <TabPanel key={response.code} id={response.code}>
+              <Response response={response} onMediaTypeChange={onMediaTypeChange} />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      )}
+    </VStack>
+  );
+};
+Responses.displayName = 'HttpOperation.Responses';
+
+const Response = ({ response, onMediaTypeChange }: ResponseProps) => {
+  const { contents = [], headers = [], description } = response;
+  const [chosenContent, setChosenContent] = React.useState(0);
+  const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
+  const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
+
+  const responseContent = contents[chosenContent];
+  const schema = responseContent?.schema;
+
+  React.useEffect(() => {
+    responseContent && onMediaTypeChange?.(responseContent.mediaType);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [responseContent]);
+
+  const descriptionChanged = nodeHasChanged?.({ nodeId: response.id, attr: 'description' });
+
+  return (
+    <VStack spacing={8} pt={8}>
+      {description && (
+        <Box pos="relative">
+          <MarkdownViewer markdown={description} />
+          <NodeAnnotation change={descriptionChanged} />
+        </Box>
+      )}
+
+      {headers.length > 0 && (
+        <VStack spacing={5}>
+          <SectionSubtitle title="Headers" id="response-headers" />
+          <Parameters parameterType="header" parameters={headers} />
+        </VStack>
+      )}
+
+      {contents.length > 0 && (
+        <>
+          <SectionSubtitle title="Body" id="response-body">
+            <Flex flex={1} justify="end">
+              <Select
+                aria-label="Response Body Content Type"
+                value={String(chosenContent)}
+                onChange={value => setChosenContent(parseInt(String(value), 10))}
+                options={contents.map((content, index) => ({ label: content.mediaType, value: index }))}
+                size="sm"
+              />
+            </Flex>
+          </SectionSubtitle>
+
+          {schema && (
+            <JsonSchemaViewer
+              schema={getOriginalObject(schema)}
+              resolveRef={refResolver}
+              maxRefDepth={maxRefDepth}
+              viewMode="read"
+              parentCrumbs={['responses', response.code]}
+              renderRootTreeLines
+              nodeHasChanged={nodeHasChanged}
+              renderExtensionAddon={renderExtensionAddon}
+            />
+          )}
+        </>
+      )}
+    </VStack>
+  );
+};
+Response.displayName = 'HttpOperation.Response';
+
+const codeToIntentVal = (code: string): IntentVals => {
+  //Implement check here for invalid codes to avoid issues related to charAt() function
+  if (typeof code !== 'string' || code.trim() === '') {
+    return 'default';
+  }
+  const firstChar = code.charAt(0);
+
+  switch (firstChar) {
+    case '2':
+      return 'success';
+    case '4':
+      return 'warning';
+    case '5':
+      return 'danger';
+    default:
+      return 'default';
+  }
+};

package/src/components/Docs/HttpOperation/index.ts

@@ -0,0 +1 @@
+export * from './HttpOperation';

package/src/components/Docs/HttpService/AdditionalInfo.stories.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AdditionalInfo } from './AdditionalInfo';
+
+const meta: Meta<typeof AdditionalInfo> = {
+  title: `Internal/Docs/AdditionalInfo`,
+  component: AdditionalInfo,
+};
+
+export default meta;
+type Story = StoryObj<typeof AdditionalInfo>;
+
+// Story when only the license URL is provided
+export const LicenseWithOnlyURL: Story = {
+  name: 'License with only URL',
+  args: {
+    id: 'id',
+    license: {
+      name: 'MIT License',
+      url: 'https://mit.edu/license.html',
+    },
+  },
+};
+
+// Story when only the license identifier is provided
+export const LicenseWithOnlyIdentifier: Story = {
+  name: 'License with only Identifier',
+  args: {
+    id: 'id',
+    license: {
+      name: 'MIT License',
+      identifier: `MIT`,
+    },
+  },
+};
+
+// Story when both the license URL and identifier are provided (URL should take precedence)
+export const LicenseWithURLAndIdentifier: Story = {
+  name: 'License with URL and Identifier (URL takes precedence)',
+  args: {
+    id: 'id',
+    license: {
+      name: 'MIT License',
+      identifier: 'MIT',
+      url: 'https://mit.edu/license.html',
+    },
+  },
+};

package/src/components/Docs/HttpService/AdditionalInfo.tsx

@@ -0,0 +1,61 @@
+import { NodeAnnotation, Panel } from '@stoplight/mosaic';
+import { IHttpService } from '@stoplight/types';
+import React from 'react';
+
+import { useOptionsCtx } from '../../../context/Options';
+import { MarkdownViewer } from '../../MarkdownViewer';
+
+interface AdditionalInfoProps {
+  id: string;
+  termsOfService?: string;
+  contact?: IHttpService['contact'];
+  license?: IHttpService['license'];
+}
+
+export const AdditionalInfo: React.FC<AdditionalInfoProps> = ({ id, termsOfService, contact, license }) => {
+  const { nodeHasChanged } = useOptionsCtx();
+  const hasChanged = nodeHasChanged?.({ nodeId: id, attr: ['termsOfService', 'contact', 'license'] });
+
+  const contactLink =
+    contact?.name && contact?.url
+      ? `[Contact ${contact.name}](${contact.url})`
+      : contact?.email
+      ? `[Contact ${contact.name || contact.email}](mailto:${contact.email})`
+      : '';
+
+  //use spdx to look up url for license identifier if available
+  // The licenseUrl is determined based on the mutual exclusivity of the `url` and `identifier` fields.
+  // If a `license.url` is provided, it takes precedence over the `license.identifier`.
+  // This is because the OpenAPI specification defines `url` and `identifier` as mutually exclusive fields,
+  // meaning you should use either one or the other, but not both. If both are provided, the `url` should be used.
+  // See: https://spec.openapis.org/oas/latest.html#license-object
+  const licenseUrl = license?.url
+    ? license?.url
+    : license?.identifier
+    ? `https://spdx.org/licenses/${license?.identifier}.html`
+    : undefined;
+
+  const licenseLink =
+    license?.name && licenseUrl
+      ? `[${license.name}](${licenseUrl})`
+      : license?.identifier && licenseUrl
+      ? `[${license?.identifier}](${licenseUrl})`
+      : '';
+  const tosLink = termsOfService ? `[Terms of Service](${termsOfService})` : '';
+
+  return contactLink || licenseLink || tosLink ? (
+    <Panel rounded isCollapsible={false} pos="relative">
+      <Panel.Titlebar bg="canvas-300">
+        <span role="heading">Additional Information</span>
+      </Panel.Titlebar>
+
+      <Panel.Content p={0}>
+        <Panel.Content>
+          <MarkdownViewer style={{ fontSize: 12 }} markdown={`${contactLink}\n \n${licenseLink}\n \n ${tosLink}`} />
+        </Panel.Content>
+      </Panel.Content>
+
+      <NodeAnnotation change={hasChanged} />
+    </Panel>
+  ) : null;
+};

package/src/components/Docs/HttpService/ExportButton.tsx

@@ -0,0 +1,35 @@
+import { Box, Button, Menu, MenuActionItem, MenuItems } from '@stoplight/mosaic';
+import * as React from 'react';
+
+type ExportMenuProps = Pick<MenuActionItem, 'href' | 'onPress'>;
+
+export interface ExportButtonProps {
+  original: ExportMenuProps;
+  bundled: ExportMenuProps;
+}
+
+export const ExportButton: React.FC<ExportButtonProps> = ({ original, bundled }) => {
+  const menuItems = React.useMemo(() => {
+    const items: MenuItems = [
+      { id: 'original', title: 'Original', ...original },
+      { id: 'bundled', title: 'Bundled References', ...bundled },
+    ];
+
+    return items;
+  }, [original, bundled]);
+
+  return (
+    <Box>
+      <Menu
+        aria-label="Export"
+        items={menuItems}
+        placement="bottom right"
+        renderTrigger={({ isOpen }) => (
+          <Button iconRight="chevron-down" appearance="default" ml={2} active={isOpen} size="sm">
+            Export
+          </Button>
+        )}
+      />
+    </Box>
+  );
+};