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

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

@@ -1,82 +0,0 @@
-import { Box, NodeAnnotation, Panel, PanelProps, Text } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import React from 'react';
-
-import { OptionalSecurityMessage } from '../../../constants';
-import { useOptionsCtx } from '../../../context/Options';
-import { getReadableSecurityNames, getSecurityGroupId, shouldAddKey } from '../../../utils/oas/security';
-import { PanelContent } from '../Security/PanelContent';
-
-interface SecuritySchemesProps {
-  secSchemes: HttpSecurityScheme[][];
-  defaultScheme?: string;
-  defaultCollapsed?: boolean;
-  parentId: string;
-}
-
-export const SecuritySchemes: React.FC<SecuritySchemesProps> = ({
-  secSchemes,
-  defaultScheme,
-  defaultCollapsed = false,
-  parentId,
-}) => {
-  const includeOptional = secSchemes.length > 1 && secSchemes.some(schemes => schemes.length === 0);
-  const { nodeHasChanged } = useOptionsCtx();
-
-  return (
-    <Panel rounded isCollapsible={defaultCollapsed} data-test="security-row">
-      <Panel.Titlebar bg="canvas-300">
-        <Box as="span" role="heading">
-          Security
-        </Box>
-      </Panel.Titlebar>
-      <Panel.Content p={0}>
-        {includeOptional && <OptionalMessage />}
-        {secSchemes
-          .filter(scheme => scheme.length > 0) // Remove the None scheme from listed display
-          .map((schemes, i) => {
-            const secGroupId = getSecurityGroupId(parentId, i);
-            return (
-              <Box key={secGroupId} data-test="http-service-security-row">
-                <NodeAnnotation change={nodeHasChanged?.({ nodeId: secGroupId })} />
-                <SecurityScheme
-                  schemes={schemes}
-                  defaultIsOpen={defaultScheme ? schemes.length === 1 && schemes[0].key === defaultScheme : i === 0}
-                  isCollapsible={secSchemes.length > 1}
-                  showSchemeKey={shouldAddKey(schemes, secSchemes)}
-                />
-              </Box>
-            );
-          })}
-      </Panel.Content>
-    </Panel>
-  );
-};
-
-const SecurityScheme: React.FC<
-  {
-    schemes: HttpSecurityScheme[];
-    showSchemeKey?: boolean;
-  } & Pick<PanelProps, 'defaultIsOpen' | 'isCollapsible'>
-> = ({ schemes, defaultIsOpen, isCollapsible, showSchemeKey }) => {
-  return (
-    <Panel defaultIsOpen={defaultIsOpen} isCollapsible={isCollapsible} pos="relative">
-      <Panel.Titlebar>
-        <Box as="span" role="heading">
-          {getReadableSecurityNames(schemes, showSchemeKey)}
-        </Box>
-      </Panel.Titlebar>
-      <Panel.Content>
-        <PanelContent schemes={schemes} />
-      </Panel.Content>
-    </Panel>
-  );
-};
-
-const OptionalMessage: React.FC = () => {
-  return (
-    <Box p={2} pl={6} border>
-      <Text fontSize="base">{OptionalSecurityMessage}</Text>
-    </Box>
-  );
-};

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

@@ -1,196 +0,0 @@
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
-import { Box, Icon, InvertTheme, NodeAnnotation, Panel, Text, Tooltip, useClipboard, VStack } from '@stoplight/mosaic';
-import type { INodeVariable, IServer } from '@stoplight/types';
-import { JSONSchema7 } from 'json-schema';
-import { isEmpty, isNil, omitBy } from 'lodash';
-import * as React from 'react';
-
-import { MockingContext } from '../../../containers/MockingProvider';
-import { useOptionsCtx } from '../../../context/Options';
-import { isProperUrl } from '../../../utils/guards';
-import { getServersToDisplay } from '../../../utils/http-spec/IServer';
-
-interface ServerInfoProps {
-  servers: IServer[];
-  mockUrl?: string;
-}
-
-export const ServerInfo: React.FC<ServerInfoProps> = ({ servers, mockUrl }) => {
-  const mocking = React.useContext(MockingContext);
-  const showMocking = !mocking.hideMocking && mockUrl && isProperUrl(mockUrl);
-  const $mockUrl = showMocking ? mockUrl || mocking.mockUrl : undefined;
-
-  const serversToDisplay = React.useMemo(() => getServersToDisplay(servers, $mockUrl, false), [servers, $mockUrl]);
-
-  const firstServerVariableIndex = React.useMemo(
-    () => serversToDisplay.findIndex(server => !isEmpty(server.variables)),
-    [serversToDisplay],
-  );
-
-  if (!showMocking && serversToDisplay.length === 0) {
-    return null;
-  }
-
-  return (
-    <InvertTheme>
-      <Panel rounded isCollapsible={false} className="BaseURLContent" w="full" data-test="servers">
-        <Panel.Titlebar whitespace="nowrap">API Base URL</Panel.Titlebar>
-        <Panel.Content w="full" className="sl-flex sl-flex-col">
-          <VStack spacing={1} divider>
-            {serversToDisplay.map((server, index) => (
-              <ServerUrl
-                {...server}
-                defaultIsOpen={index === firstServerVariableIndex}
-                hasAnyServerVariables={firstServerVariableIndex !== -1}
-                key={server.id}
-              />
-            ))}
-          </VStack>
-        </Panel.Content>
-      </Panel>
-    </InvertTheme>
-  );
-};
-
-const ServerUrl: React.FC<IServer & { hasAnyServerVariables: boolean; defaultIsOpen: boolean }> = ({
-  id,
-  description,
-  url,
-  variables,
-  hasAnyServerVariables,
-  defaultIsOpen,
-}) => {
-  const { nodeHasChanged } = useOptionsCtx();
-  const { onCopy, hasCopied } = useClipboard(url);
-  const urlFragments = useSplitUrl(url);
-  const hasChanged = nodeHasChanged?.({ nodeId: id });
-  const variablesSchema = useVariablesJSONSchema(variables);
-  const titlePaddingLeft = hasAnyServerVariables && !variablesSchema ? 4 : 0;
-
-  const handleCopyClick = React.useCallback<React.MouseEventHandler>(
-    e => {
-      e.stopPropagation();
-      onCopy();
-    },
-    [onCopy],
-  );
-
-  return (
-    <Panel
-      isCollapsible={!!variablesSchema}
-      defaultIsOpen={defaultIsOpen}
-      w="full"
-      className="ServerInfo"
-      data-test="server-row"
-    >
-      <Panel.Titlebar whitespace="nowrap">
-        <Text pl={titlePaddingLeft} pr={2} fontWeight="bold">
-          {description}:
-        </Text>
-
-        <Tooltip
-          placement="right"
-          renderTrigger={() => (
-            <Text aria-label={description} whitespace="normal" py={2} style={{ wordBreak: 'break-word' }}>
-              {urlFragments.map(({ kind, value }, i) => (
-                <Text key={i} fontWeight={kind === 'variable' ? 'semibold' : 'normal'}>
-                  {value}
-                </Text>
-              ))}
-            </Text>
-          )}
-        >
-          {!hasCopied && (
-            <Box p={1} onClick={handleCopyClick} cursor="pointer">
-              Copy Server URL <Icon className="sl-ml-1" icon={['fas', 'copy']} />
-            </Box>
-          )}
-          {hasCopied && (
-            <Box p={1}>
-              Copied Server URL <Icon className="sl-ml-1" icon={['fas', 'check']} />
-            </Box>
-          )}
-        </Tooltip>
-
-        <NodeAnnotation change={hasChanged} additionalLeftOffset={16} />
-      </Panel.Titlebar>
-      {variablesSchema && (
-        <Panel.Content w="full">
-          <Box pl={4}>
-            <JsonSchemaViewer schema={variablesSchema} />
-          </Box>
-        </Panel.Content>
-      )}
-    </Panel>
-  );
-};
-
-function useVariablesJSONSchema(variables: Record<string, INodeVariable> | undefined): JSONSchema7 | undefined {
-  return React.useMemo(() => {
-    if (isEmpty(variables)) return;
-
-    const propertiesPairs = Object.entries(variables).map(([name, variable]) => [
-      name,
-      {
-        type: 'string',
-        ...omitBy(
-          // this is to ensure the consistent order in case http-spec changes it etc.
-          {
-            description: variable.description,
-            enum: variable.enum,
-            default: variable.default,
-          },
-          isNil,
-        ),
-      },
-    ]);
-
-    return {
-      type: 'object',
-      properties: Object.fromEntries(propertiesPairs),
-    };
-  }, [variables]);
-}
-
-export function useSplitUrl(url: string) {
-  return React.useMemo(() => {
-    const curly = /[{}]/g;
-    const fragments: { kind: 'variable' | 'static'; value: string }[] = [];
-
-    let startOffset = 0;
-    let curPos = 0;
-    let match;
-
-    while ((match = curly.exec(url))) {
-      if (match[0] === '{' || startOffset + 1 === match.index) {
-        startOffset = match.index;
-        continue;
-      }
-
-      if (startOffset !== curPos) {
-        fragments.push({
-          kind: 'static',
-          value: url.slice(curPos, startOffset),
-        });
-      }
-
-      const variable = url.slice(startOffset, match.index + 1);
-
-      fragments.push({
-        kind: 'variable',
-        value: variable,
-      });
-
-      curPos = startOffset + variable.length;
-    }
-
-    if (curPos < url.length) {
-      fragments.push({
-        kind: 'static',
-        value: url.slice(curPos),
-      });
-    }
-
-    return fragments;
-  }, [url]);
-}

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

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

package/src/components/Docs/Model/Model.spec.tsx

@@ -1,241 +0,0 @@
-import { Provider as MosaicProvider } from '@stoplight/mosaic';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { JSONSchema7 } from 'json-schema';
-import * as React from 'react';
-
-import { ElementsOptionsProvider } from '../../../context/Options';
-import * as exampleGenerationUtils from '../../../utils/exampleGeneration/exampleGeneration';
-import { chooseOption } from '../../../utils/tests/chooseOption';
-import { renderExtensionRenderer } from '../story-renderer-helper';
-import { Model } from './Model';
-
-const generatedExample = '{\n"iamtoobig": "string",\n"name": "string",\n"id": "number",\n"email": "string", \n}';
-const exampleSchema: JSONSchema7 = {
-  type: 'object',
-  description: 'example schema description',
-  properties: {
-    propA: {
-      type: 'string',
-      enum: ['valueA'],
-      // @ts-ignore
-      'x-enum-descriptions': {
-        valueA: 'description of valueA',
-      },
-    },
-  },
-};
-
-const exampleStringSchema: JSONSchema7 = {
-  type: 'string',
-  description: 'example schema description that should only show once :)',
-};
-
-describe('Model', () => {
-  it('displays examples', async () => {
-    const { container } = render(<Model data={exampleSchema} />);
-
-    expect(screen.getByRole('heading', { name: /example/i })).toBeInTheDocument();
-    expect(container).toHaveTextContent('"propA": "valueA"');
-  });
-
-  it('does not show examples with more lines than supported, by default', async () => {
-    jest.spyOn(exampleGenerationUtils, 'exceedsSize').mockImplementation((example: string, size: number = 2) => {
-      return example.split(/\r\n|\r|\n/).length > size;
-    });
-    jest
-      .spyOn(exampleGenerationUtils, 'generateExamplesFromJsonSchema')
-      .mockReturnValue([{ label: '', data: generatedExample }]);
-
-    render(<Model data={exampleSchema} />);
-
-    await screen.findByText('Large examples are not rendered by default.');
-    jest.restoreAllMocks();
-  });
-
-  it('shows examples bigger than supported after clicking "Load Examples" button', async () => {
-    jest.spyOn(exampleGenerationUtils, 'exceedsSize').mockImplementation((example: string, size: number = 2) => {
-      return example.split(/\r\n|\r|\n/).length > size;
-    });
-    jest
-      .spyOn(exampleGenerationUtils, 'generateExamplesFromJsonSchema')
-      .mockReturnValue([{ label: '', data: generatedExample }]);
-
-    render(<Model data={exampleSchema} />);
-
-    const button = screen.getByRole('button', { name: 'load-example' });
-    userEvent.click(button);
-
-    expect(await screen.findByText('"iamtoobig"')).toBeInTheDocument();
-    jest.restoreAllMocks();
-  });
-
-  it('uses examples defined in the schema', async () => {
-    const examples = {
-      ...exampleSchema,
-      examples: [
-        {
-          propA: 'first',
-        },
-        {
-          propA: 'second',
-        },
-      ],
-    };
-    const { container } = render(
-      <MosaicProvider>
-        <Model data={examples} />
-      </MosaicProvider>,
-    );
-
-    const menuTrigger = screen.getByLabelText('Example');
-    expect(menuTrigger).toHaveTextContent('Example: default');
-    expect(container).toHaveTextContent('"propA": "first"');
-
-    chooseOption(menuTrigger, 'example-1');
-    expect(container).toHaveTextContent('"propA": "second"');
-  });
-
-  it('uses x-examples defined in the schema', async () => {
-    const examples = {
-      ...exampleSchema,
-      'x-examples': {
-        firstTitle: {
-          value: {
-            propA: 'first',
-          },
-        },
-        secondTitle: {
-          value: {
-            propA: 'second',
-          },
-        },
-      },
-    };
-    const { container } = render(
-      <MosaicProvider>
-        <Model data={examples} />
-      </MosaicProvider>,
-    );
-
-    const menuTrigger = screen.getByLabelText('Example');
-    expect(menuTrigger).toHaveTextContent('Example: firstTitle');
-    expect(container).toHaveTextContent('"propA": "first"');
-
-    chooseOption(menuTrigger, 'secondTitle');
-    expect(container).toHaveTextContent('"propA": "second"');
-  });
-
-  it('displays description at top of doc for objects', async () => {
-    render(<Model data={exampleSchema} />);
-    const description = screen.queryAllByText('example schema description');
-    const textboxDescription = screen.getByRole('textbox');
-
-    expect(description).toHaveLength(1);
-    expect(textboxDescription).toHaveTextContent('example schema description');
-  });
-
-  it('does not display description at top of doc for non-objects', async () => {
-    render(<Model data={exampleStringSchema} />);
-    const description = screen.queryByRole('textbox');
-
-    expect(description).not.toBeInTheDocument();
-  });
-
-  describe('export button', () => {
-    it('should render correctly', () => {
-      const wrapper = render(
-        <MosaicProvider>
-          <Model
-            data={exampleSchema}
-            exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
-          />
-          ,
-        </MosaicProvider>,
-      );
-
-      const exportButton = wrapper.getByRole('button', { name: 'Export' });
-      expect(exportButton).toBeInTheDocument();
-
-      userEvent.click(exportButton);
-      expect(wrapper.getByRole('menuitem', { name: 'Original' })).toBeInTheDocument();
-      expect(wrapper.getByRole('menuitem', { name: 'Bundled References' })).toBeInTheDocument();
-    });
-
-    it('should not render if hideExport is true', () => {
-      const wrapper = render(
-        <MosaicProvider>
-          <Model
-            data={exampleSchema}
-            exportProps={{ original: { onPress: jest.fn() }, bundled: { onPress: jest.fn() } }}
-            layoutOptions={{ hideExport: true }}
-          />
-        </MosaicProvider>,
-      );
-
-      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
-      expect(exportButton).not.toBeInTheDocument();
-    });
-
-    it('should not render if no exportProps are present', () => {
-      const wrapper = render(
-        <MosaicProvider>
-          <Model data={exampleSchema} />
-        </MosaicProvider>,
-      );
-
-      const exportButton = wrapper.queryByRole('button', { name: 'Export' });
-      expect(exportButton).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Vendor Extensions', () => {
-    it('should call rendorExtensionAddon', async () => {
-      const vendorExtensionRenderer = jest.fn();
-      const { unmount } = render(
-        <ElementsOptionsProvider renderExtensionAddon={vendorExtensionRenderer}>
-          <Model data={exampleSchema} />
-        </ElementsOptionsProvider>,
-      );
-
-      expect(vendorExtensionRenderer).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          nestingLevel: 1,
-          vendorExtensions: {
-            'x-enum-descriptions': expect.objectContaining({ valueA: 'description of valueA' }),
-          },
-        }),
-      );
-
-      unmount();
-    });
-
-    it('should display vendor extensions', async () => {
-      const vendorExtensionRenderer = jest.fn().mockImplementation(props => {
-        return renderExtensionRenderer(props);
-      });
-
-      const { unmount } = render(
-        <ElementsOptionsProvider renderExtensionAddon={vendorExtensionRenderer}>
-          <Model
-            data={exampleSchema}
-            layoutOptions={{
-              hideTryItPanel: true,
-              hideSecurityInfo: true,
-              hideServerInfo: true,
-              hideExport: true,
-              hideTryIt: true,
-            }}
-          />
-        </ElementsOptionsProvider>,
-      );
-
-      expect(screen.queryByRole('columnheader', { name: /Enum value/i })).toBeInTheDocument();
-      expect(screen.queryByRole('columnheader', { name: /Description/i })).toBeInTheDocument();
-
-      expect(screen.queryByText('description of valueA')).toBeInTheDocument();
-
-      unmount();
-    });
-  });
-});

package/src/components/Docs/Model/Model.stories.tsx

@@ -1,16 +0,0 @@
-import { JSONSchema7 } from 'json-schema';
-
-import model from '../../../__fixtures__/schemas/contact.json';
-import { createStoriesForDocsComponent } from '../story-helper';
-import { renderExtensionRenderer } from '../story-renderer-helper';
-import { Model } from './Model';
-
-const { meta, createHoistedStory } = createStoriesForDocsComponent(Model);
-
-export default meta;
-
-export const Story = createHoistedStory({
-  data: model as JSONSchema7,
-  renderExtensionAddon: renderExtensionRenderer,
-  layoutOptions: { compact: 600 },
-});