feat(docs): bring new JSV into Elements

packages/elements/package.json

@@ -49,7 +49,7 @@
     "@stoplight/http-spec": "^3.1.1",
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-viewer": "^3.0.0",
+    "@stoplight/json-schema-viewer": "^4.0.0-beta.7",
     "@stoplight/markdown": "^2.10.0",
     "@stoplight/markdown-viewer": "^4.3.3",
     "@stoplight/mosaic": "1.0.0-beta.33",

packages/elements/src/components/Docs/HttpOperation/Body.tsx

@@ -1,12 +1,12 @@
-import { Select } from '@stoplight/mosaic';
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import { Box, Select } from '@stoplight/mosaic';
 import { IHttpOperationRequestBody } from '@stoplight/types';
+import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
 import { isJSONSchema } from '../../../utils/guards';
 import { MarkdownViewer } from '../../MarkdownViewer';
-import { SchemaViewer } from '../../SchemaViewer';
 import { SubSectionPanel } from '../Sections';
-import { getExamplesObject } from './utils';
 
 export interface BodyProps {
   body: IHttpOperationRequestBody;
@@ -25,7 +25,6 @@ export const Body = ({ body: { contents = [], description }, onChange }: BodyPro
   if (contents.length === 0 && !description) return null;
 
   const schema = contents[chosenContent]?.schema;
-  const examples = getExamplesObject(contents[chosenContent]?.examples || []);
 
   return (
     <SubSectionPanel
@@ -42,7 +41,11 @@ export const Body = ({ body: { contents = [], description }, onChange }: BodyPro
     >
       {description && <MarkdownViewer className="mb-6" markdown={description} />}
 
-      {isJSONSchema(schema) && <SchemaViewer className="mt-6" schema={schema} examples={examples} viewMode="write" />}
+      {isJSONSchema(schema) && (
+        <Box ml={-9}>
+          <JsonSchemaViewer schema={schema as JSONSchema4} viewMode="write" />
+        </Box>
+      )}
     </SubSectionPanel>
   );
 };

packages/elements/src/components/Docs/HttpOperation/HttpOperation.spec.tsx

@@ -1,4 +1,4 @@
-import { HttpParamStyles } from '@stoplight/types';
+import { HttpParamStyles, IHttpOperation } from '@stoplight/types';
 import { screen } from '@testing-library/dom';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -12,12 +12,6 @@ import { HttpOperation as HttpOperationWithoutPersistence } from './index';
 
 const HttpOperation = withPersistenceBoundary(HttpOperationWithoutPersistence);
 
-jest.mock('@stoplight/json-schema-viewer', () => ({
-  __esModule: true,
-  PropertyTypeColors: {},
-  JsonSchemaViewer: () => <div>This is JsonSchemaViewer</div>,
-}));
-
 describe('HttpOperation', () => {
   describe('Header', () => {
     it('should display "Deprecated" badge for deprecated http operation', () => {
@@ -65,7 +59,7 @@ describe('HttpOperation', () => {
 
   describe('Query Parameters', () => {
     it('should render correct validations', async () => {
-      const data = {
+      const data: IHttpOperation = {
         id: 'get',
         method: 'get',
         path: '/path',
@@ -76,14 +70,14 @@ describe('HttpOperation', () => {
               name: 'parameter name',
               description: 'a parameter description',
               schema: {
-                type: 'string' as const,
+                type: 'string',
               },
               allowEmptyValue: true,
               allowReserved: true,
               deprecated: true,
               explode: true,
               required: true,
-              style: HttpParamStyles.Form as const,
+              style: HttpParamStyles.Form,
               examples: [
                 {
                   value: 'example value',
@@ -109,7 +103,7 @@ describe('HttpOperation', () => {
     });
 
     it('should not render default styles', () => {
-      const operationData = {
+      const operationData: IHttpOperation = {
         id: 'get',
         method: 'get',
         path: '/path',
@@ -119,16 +113,16 @@ describe('HttpOperation', () => {
             {
               name: 'default style param',
               schema: {
-                type: 'string' as const,
+                type: 'string',
               },
-              style: HttpParamStyles.Form as const,
+              style: HttpParamStyles.Form,
             },
             {
               name: 'different style param',
               schema: {
-                type: 'string' as const,
+                type: 'string',
               },
-              style: HttpParamStyles.SpaceDelimited as const,
+              style: HttpParamStyles.SpaceDelimited,
             },
           ],
         },
@@ -145,7 +139,7 @@ describe('HttpOperation', () => {
 
   describe('Header Parameters', () => {
     it('should render panel when there are header parameters', () => {
-      const data = {
+      const data: IHttpOperation = {
         id: 'get',
         method: 'get',
         path: '/path',
@@ -156,12 +150,12 @@ describe('HttpOperation', () => {
               name: 'parameter name',
               description: 'a parameter description',
               schema: {
-                type: 'string' as const,
+                type: 'string',
               },
               deprecated: true,
               explode: true,
               required: true,
-              style: HttpParamStyles.Simple as const,
+              style: HttpParamStyles.Simple,
               examples: [
                 {
                   key: 'example',
@@ -205,7 +199,7 @@ describe('HttpOperation', () => {
 
   describe('Path Parameters', () => {
     it('should render correct validations', async () => {
-      const data = {
+      const data: IHttpOperation = {
         id: 'get',
         method: 'get',
         path: '/path',
@@ -217,12 +211,12 @@ describe('HttpOperation', () => {
               name: 'parameter name',
               description: 'a parameter description',
               schema: {
-                type: 'string' as const,
+                type: 'string',
               },
               deprecated: true,
               explode: true,
               required: true,
-              style: HttpParamStyles.Simple as const,
+              style: HttpParamStyles.Simple,
               examples: [
                 {
                   key: 'example',
@@ -266,13 +260,24 @@ describe('HttpOperation', () => {
   });
 
   describe('Request Body', () => {
-    const httpOperationWithRequestBodyContents = {
+    const httpOperationWithRequestBodyContents: IHttpOperation = {
       path: '/',
       id: 'some_id',
       method: 'get',
       request: {
         body: {
-          contents: [{ mediaType: 'application/json', schema: {} }, { mediaType: 'application/xml' }],
+          contents: [
+            {
+              mediaType: 'application/json',
+              schema: {
+                type: 'object',
+                properties: {
+                  some_property: { type: 'string' },
+                },
+              },
+            },
+            { mediaType: 'application/xml' },
+          ],
         },
       },
       responses: [
@@ -342,7 +347,7 @@ describe('HttpOperation', () => {
       const body = screen.getByRole('heading', { name: 'Body' });
       userEvent.click(body);
 
-      expect(await screen.findByText('This is JsonSchemaViewer')).toBeInTheDocument();
+      expect(await screen.findByText('some_property')).toBeInTheDocument();
     });
 
     it('request body selection in Docs should update TryIt', async () => {
@@ -368,20 +373,31 @@ describe('HttpOperation', () => {
   });
 
   describe('Response', () => {
-    const httpOperationWithResponseBodyContents = {
+    const httpOperationWithResponseBodyContents: IHttpOperation = {
       path: '/',
       id: 'some_id',
       method: 'get',
       responses: [
         {
           code: '200',
           description: 'Hello world!',
-          contents: [{ mediaType: 'application/json', schema: {} }, { mediaType: 'application/xml' }],
+          contents: [
+            {
+              mediaType: 'application/json',
+              schema: {
+                type: 'object',
+                properties: {
+                  some_property: { type: 'string' },
+                },
+              },
+            },
+            { mediaType: 'application/xml' },
+          ],
         },
       ],
     };
 
-    const httpOperationWithoutResponseBodyContents = {
+    const httpOperationWithoutResponseBodyContents: IHttpOperation = {
       path: '/',
       id: 'some_id',
       method: 'get',
@@ -431,7 +447,14 @@ describe('HttpOperation', () => {
       const body = screen.getByRole('heading', { name: 'Body' });
       userEvent.click(body);
 
-      expect(await screen.findByText('This is JsonSchemaViewer')).toBeInTheDocument();
+      const property = await screen.findByText('some_property');
+      expect(property).toBeInTheDocument();
+
+      const select = screen.getByLabelText('Choose Response Body Content Type');
+
+      userEvent.selectOptions(select, 'application/xml');
+
+      expect(screen.queryByText('some_property')).not.toBeInTheDocument();
     });
   });
 });

packages/elements/src/components/Docs/HttpOperation/Parameters.tsx

@@ -1,4 +1,3 @@
-import { PropertyTypeColors } from '@stoplight/json-schema-viewer';
 import { VStack } from '@stoplight/mosaic';
 import { Dictionary, HttpParamStyles, IHttpParam, Primitive } from '@stoplight/types';
 import { Tag } from '@stoplight/ui-kit';
@@ -50,7 +49,7 @@ export const Parameters: React.FunctionComponent<ParametersProps> = ({ parameter
 
   return (
     <VStack spacing={4} divider>
-      {sortBy(parameters, ['required', 'name']).map((parameter, index) => {
+      {sortBy(parameters, ['required', 'name']).map(parameter => {
         const resolvedSchema =
           parameter.schema?.$ref && resolveRef
             ? resolveRef({ pointer: parameter.schema.$ref, source: null }, null, {})
@@ -107,7 +106,7 @@ export const Parameter: React.FunctionComponent<IParameterProps> = ({ parameter,
     <div className="HttpOperation__Parameters">
       <div className="flex items-center">
         <div className="font-medium font-mono">{parameter.name}</div>
-        <div className={cn('ml-2 text-sm', PropertyTypeColors[type])}>{format ? `${type}<${format}>` : type}</div>
+        <div className={'ml-2 text-sm'}>{format ? `${type}<${format}>` : type}</div>
         {parameterType !== 'path' && (
           <div
             className={cn('ml-2 text-sm', {

packages/elements/src/components/Docs/HttpOperation/Responses.tsx

@@ -1,13 +1,14 @@
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
 import { Box, Select, Tab, TabList, TabPanel, Tabs, Text } from '@stoplight/mosaic';
 import { IHttpOperationResponse } from '@stoplight/types';
+import { JSONSchema4 } from 'json-schema';
 import { sortBy, uniqBy } from 'lodash';
 import * as React from 'react';
 
+import { useInlineRefResolver } from '../../../context/InlineRefResolver';
 import { MarkdownViewer } from '../../MarkdownViewer';
-import { SchemaViewer } from '../../SchemaViewer';
 import { SectionTitle, SubSectionPanel } from '../Sections';
 import { Parameters } from './Parameters';
-import { getExamplesObject } from './utils';
 
 export const HttpCodeColor = {
   1: 'gray',
@@ -73,10 +74,10 @@ export const Response = ({
   onMediaTypeChange,
 }: ResponseProps) => {
   const [chosenContent, setChosenContent] = React.useState(0);
+  const refResolver = useInlineRefResolver();
 
   const responseContent = contents[chosenContent];
   const schema = responseContent?.schema;
-  const examples = getExamplesObject(responseContent?.examples || []);
 
   React.useEffect(() => {
     responseContent && onMediaTypeChange(responseContent.mediaType);
@@ -104,7 +105,11 @@ export const Response = ({
             />
           }
         >
-          {schema && <SchemaViewer schema={schema} examples={examples} viewMode="read" forceShowTabs />}
+          {schema && (
+            <Box ml={-9}>
+              <JsonSchemaViewer schema={schema as JSONSchema4} resolveRef={refResolver} viewMode="read" />
+            </Box>
+          )}
         </SubSectionPanel>
       )}
     </Box>

packages/elements/src/components/Docs/HttpOperation/utils.ts

@@ -1,17 +1,5 @@
-import { INodeExample, INodeExternalExample } from '@stoplight/types';
 import { isObject } from 'lodash';
 
-export function getExamplesObject(examples: Array<INodeExample | INodeExternalExample>) {
-  return examples.reduce((collection, item) => {
-    const value = 'externalValue' in item ? item.externalValue : item.value;
-    if (value) {
-      collection[item.key] = value;
-    }
-
-    return collection;
-  }, {});
-}
-
 export function getExamplesFromSchema(data: unknown) {
   // `examples` are available in JSON Schema v6 and v7. For v4 we can use `x-examples`.
   // `example` is not supported by any version but we can use `x-example` extension.

packages/elements/src/components/Docs/Model/Model.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import * as React from 'react';
 
 import { JSONSchema } from '../../../types';
-import { SchemaViewer } from '../../SchemaViewer';
+import { SchemaAndExamples } from '../../SchemaAndExamples';
 import { IDocsComponentProps } from '..';
 import { getExamplesFromSchema } from '../HttpOperation/utils';
 
@@ -15,7 +15,7 @@ const ModelComponent: React.FC<ModelProps> = ({ data, className, headless }) =>
     <div className={cn('Model MarkdownViewer', className)}>
       {!headless && data.title !== void 0 && <h1 className={Classes.HEADING}>{data.title}</h1>}
 
-      <SchemaViewer schema={data} description={data.description} examples={getExamplesFromSchema(data)} maxRows={50} />
+      <SchemaAndExamples schema={data} description={data.description} examples={getExamplesFromSchema(data)} />
     </div>
   );
 };

packages/elements/src/components/MarkdownViewer/CustomComponents/CodeWithSchemaViewer.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { useParsedValue } from '../../../hooks/useParsedValue';
 import { isJSONSchema } from '../../../utils/guards';
 import { getExamplesFromSchema } from '../../Docs/HttpOperation/utils';
-import { SchemaViewer } from '../../SchemaViewer';
+import { SchemaAndExamples } from '../../SchemaAndExamples';
 
 export const CodeWithSchemaViewer = (props: IComponentMappingProps<ICode<ICodeAnnotations>>) => {
   const {
@@ -22,7 +22,11 @@ export const CodeWithSchemaViewer = (props: IComponentMappingProps<ICode<ICodeAn
     }
 
     return (
-      <SchemaViewer title={annotations?.title} schema={parsedValue} examples={getExamplesFromSchema(parsedValue)} />
+      <SchemaAndExamples
+        title={annotations?.title}
+        schema={parsedValue}
+        examples={getExamplesFromSchema(parsedValue)}
+      />
     );
   }