@stoplight/elements-core 9.0.16-beta-0.3 → 9.0.17

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

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

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

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

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

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

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