feat: accept JSON Schema Draft 6 & Draft 7

package.json

@@ -43,9 +43,10 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@stoplight/json": "^3.10.0",
-    "@stoplight/json-schema-tree": "^1.1.3",
+    "@stoplight/json-schema-tree": "^2.0.0",
     "@stoplight/mosaic": "1.0.0-beta.46",
     "@stoplight/react-error-boundary": "^1.0.0",
+    "@types/json-schema": "^7.0.7",
     "classnames": "^2.2.6",
     "lodash": "^4.17.19"
   },
@@ -61,7 +62,6 @@
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.18",
-    "@types/json-schema": "^7.0.6",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.7.2",
     "@types/react": "16.9.2",

src/__stories__/JsonSchemaViewer.tsx

@@ -2,10 +2,9 @@ import { Button, Flex, InvertTheme, subscribeTheme } from '@stoplight/mosaic';
 import { action } from '@storybook/addon-actions';
 import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
-import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
-import { JsonSchemaViewer, RowAddonRenderer } from '../';
+import { JSONSchema, JsonSchemaViewer, RowAddonRenderer } from '../';
 import { Wrapper } from './utils/Wrapper';
 
 const allOfSchema = require('../__fixtures__/combiners/allOfs/base.json');
@@ -25,7 +24,7 @@ storiesOf('JsonSchemaViewer', module)
   .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
   .add('default', () => (
     <JsonSchemaViewer
-      schema={schema as JSONSchema4}
+      schema={schema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
       viewMode={select(
         'viewMode',
@@ -59,7 +58,7 @@ storiesOf('JsonSchemaViewer', module)
 
     return (
       <JsonSchemaViewer
-        schema={object('schema', schema as JSONSchema4)}
+        schema={object('schema', schema as JSONSchema)}
         onGoToRef={action('onGoToRef')}
         renderRowAddon={customRowAddonRenderer}
       />
@@ -74,28 +73,28 @@ storiesOf('JsonSchemaViewer', module)
   ))
   .add('stress-test schema', () => (
     <JsonSchemaViewer
-      schema={stressSchema as JSONSchema4}
+      schema={stressSchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('allOf-schema', () => (
     <JsonSchemaViewer
-      schema={allOfSchema as JSONSchema4}
+      schema={allOfSchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('anyOf-array-schema', () => (
     <JsonSchemaViewer
-      schema={oneOfWithArraySchema as JSONSchema4}
+      schema={oneOfWithArraySchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('anyOf-array-schema2', () => (
     <JsonSchemaViewer
-      schema={oneOfWithArraySchema2 as JSONSchema4}
+      schema={oneOfWithArraySchema2 as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
@@ -151,7 +150,7 @@ storiesOf('JsonSchemaViewer', module)
       <InvertTheme>
         <div style={{ height: '100vh' }}>
           <JsonSchemaViewer
-            schema={schema as JSONSchema4}
+            schema={schema as JSONSchema}
             defaultExpandedDepth={number('defaultExpandedDepth', 2)}
             onGoToRef={action('onGoToRef')}
           />
@@ -161,21 +160,21 @@ storiesOf('JsonSchemaViewer', module)
   })
   .add('refs/normal', () => (
     <JsonSchemaViewer
-      schema={refSchema as JSONSchema4}
+      schema={refSchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('refs/nullish', () => (
     <JsonSchemaViewer
-      schema={nullRefSchema as JSONSchema4}
+      schema={nullRefSchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('refs/broken', () => (
     <JsonSchemaViewer
-      schema={brokenRefArraySchema as JSONSchema4}
+      schema={brokenRefArraySchema as JSONSchema}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />

src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1067,15 +1067,15 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
                     </div>
                   </div>
                 </div>
+                <div>
+                  <span>Allowed value:</span>
+                  <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Constant name\\"</span>
+                </div>
                 <div>
                   <span>Example values:</span>
                   <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Example name\\"</span>
                   <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Different name\\"</span>
                 </div>
-                <div>
-                  <span>Allowed value:</span>
-                  <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Constant name\\"</span>
-                </div>
               </div>
               <div></div>
             </div>
@@ -2816,15 +2816,15 @@ exports[`HTML Output should match default-schema.json 1`] = `
                   </div>
                 </div>
               </div>
+              <div>
+                <span>Allowed value:</span>
+                <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Constant name\\"</span>
+              </div>
               <div>
                 <span>Example values:</span>
                 <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Example name\\"</span>
                 <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Different name\\"</span>
               </div>
-              <div>
-                <span>Allowed value:</span>
-                <span style=\\"background-color: rgb(237, 242, 247)\\">\\"Constant name\\"</span>
-              </div>
             </div>
             <div></div>
           </div>
@@ -3671,7 +3671,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
                               </div>
                             </div>
                           </div>
-                          <div><span style=\\"background-color: rgb(237, 242, 247)\\">example</span></div>
+                          <div><span style=\\"background-color: rgb(237, 242, 247)\\">examples</span></div>
                         </div>
                         <div></div>
                       </div>

src/__tests__/index.spec.tsx

@@ -3,12 +3,11 @@ import 'jest-enzyme';
 import { mount, ReactWrapper } from 'enzyme';
 import * as fastGlob from 'fast-glob';
 import * as fs from 'fs';
-import { JSONSchema4 } from 'json-schema';
 import * as path from 'path';
 import * as React from 'react';
 
 import { JsonSchemaViewer } from '../components';
-import { ViewMode } from '../types';
+import { JSONSchema, ViewMode } from '../types';
 import { dumpDom } from './utils/dumpDom';
 
 describe('HTML Output', () => {
@@ -24,7 +23,7 @@ describe('HTML Output', () => {
   });
 
   describe.each(['anyOf', 'oneOf'])('given %s combiner placed next to allOf', combiner => {
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
     beforeEach(() => {
       schema = {
@@ -84,7 +83,7 @@ describe('HTML Output', () => {
   });
 
   it('given array with oneOf containing items, should merge it correctly', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       oneOf: [
         {
           items: {
@@ -104,7 +103,7 @@ describe('HTML Output', () => {
   });
 
   it.each<ViewMode>(['standalone', 'read', 'write'])('given %s mode, should populate proper nodes', mode => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       type: ['string', 'object'],
       properties: {
         id: {
@@ -124,7 +123,7 @@ describe('HTML Output', () => {
   });
 
   it('given multiple object and string type, should process properties', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       type: ['string', 'object'],
       properties: {
         ids: {
@@ -140,7 +139,7 @@ describe('HTML Output', () => {
   });
 
   it('given complex type that includes array and complex array subtype, should not ignore subtype', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       type: 'object',
       properties: {
         items: {
@@ -158,7 +157,7 @@ describe('HTML Output', () => {
   });
 
   it('given visible $ref node, should try to inject the title immediately', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       type: 'object',
       properties: {
         foo: {
@@ -202,7 +201,7 @@ describe('Expanded depth', () => {
   });
 
   describe('merged array with object', () => {
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
     beforeEach(() => {
       schema = {
@@ -358,7 +357,7 @@ describe('Expanded depth', () => {
   });
 
   describe('merged array with object #2', () => {
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
     beforeEach(() => {
       schema = {
@@ -578,7 +577,7 @@ describe('Expanded depth', () => {
   });
 
   describe('nested object', () => {
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
     beforeEach(() => {
       schema = {
@@ -694,7 +693,7 @@ describe('Expanded depth', () => {
 
 describe('$ref resolving', () => {
   it('should render caret for schema with top-level $ref pointing at complex type', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       $ref: '#/definitions/foo',
       definitions: {
         foo: {
@@ -725,7 +724,7 @@ describe('$ref resolving', () => {
   });
 
   it('should render caret for top-level array with $ref items', () => {
-    const schema: JSONSchema4 = {
+    const schema: JSONSchema = {
       type: 'array',
       items: {
         $ref: '#/foo',

src/components/JsonSchemaViewer.tsx

@@ -2,15 +2,15 @@ import { isRegularNode, SchemaTree as JsonSchemaTree, SchemaTreeRefDereferenceFn
 import { Box, Provider as MosaicProvider } from '@stoplight/mosaic';
 import { ErrorBoundaryForwardedProps, FallbackProps, withErrorBoundary } from '@stoplight/react-error-boundary';
 import cn from 'classnames';
-import type { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
 import { JSVOptions, JSVOptionsContextProvider } from '../contexts';
+import type { JSONSchema } from '../types';
 import { TopLevelSchemaRow } from './SchemaRow';
 import { ChildStack } from './shared/ChildStack';
 
 export type JsonSchemaProps = Partial<JSVOptions> & {
-  schema: JSONSchema4;
+  schema: JSONSchema;
   emptyText?: string;
   className?: string;
   resolveRef?: SchemaTreeRefDereferenceFn;

src/components/__tests__/SchemaRow.spec.tsx

@@ -3,17 +3,17 @@ import 'jest-enzyme';
 import { RootNode } from '@stoplight/json-schema-tree';
 import { Icon } from '@stoplight/mosaic';
 import { mount } from 'enzyme';
-import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
+import { JSONSchema } from '../../types';
 import { SchemaRow } from '../SchemaRow';
 import { buildTree, findNodeWithPath } from '../shared/__tests__/utils';
 import { Properties } from '../shared/Properties';
 
 describe('SchemaRow component', () => {
   describe('resolving error', () => {
     let tree: RootNode;
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
     beforeEach(() => {
       schema = {
@@ -50,9 +50,9 @@ describe('SchemaRow component', () => {
   });
 
   describe('required property', () => {
-    let schema: JSONSchema4;
+    let schema: JSONSchema;
 
-    function isRequired(schema: JSONSchema4, nodePath: readonly string[], value: boolean) {
+    function isRequired(schema: JSONSchema, nodePath: readonly string[], value: boolean) {
       const tree = buildTree(schema);
 
       const schemaNode = findNodeWithPath(tree, nodePath);

src/components/shared/ChildStack.tsx

@@ -1,4 +1,4 @@
-import { SchemaNode } from '@stoplight/json-schema-tree';
+import type { SchemaNode } from '@stoplight/json-schema-tree';
 import * as React from 'react';
 
 import { NESTING_OFFSET } from '../../consts';

src/components/shared/Validations.tsx

@@ -25,7 +25,7 @@ export const numberValidationNames = [
   'exclusiveMaximum',
 ];
 
-const exampleValidationNames = ['examples', 'example', 'x-example'];
+const exampleValidationNames = ['examples'];
 
 const excludedValidations = ['exclusiveMinimum', 'exclusiveMaximum', 'readOnly', 'writeOnly'];
 
@@ -58,11 +58,8 @@ const createValidationsFormatter = (name: string, options?: { exact?: boolean; n
 };
 
 const validationFormatters: Record<string, (value: unknown) => ValidationFormat | null> = {
-  ['const']: createValidationsFormatter('Allowed'),
   enum: createValidationsFormatter('Allowed'),
   examples: createValidationsFormatter('Example'),
-  example: createValidationsFormatter('Example'),
-  ['x-example']: createValidationsFormatter('Example'),
   multipleOf: createValidationsFormatter('Multiple of', { exact: true }),
   pattern: createValidationsFormatter('Match pattern', { exact: true, nowrap: true }),
   default: createValidationsFormatter('Default'),
@@ -208,8 +205,6 @@ export function getValidationsFromSchema(schemaNode: RegularNode) {
       ? {
           ...(schemaNode.annotations.default ? { default: schemaNode.annotations.default } : null),
           ...(schemaNode.annotations.examples ? { examples: schemaNode.annotations.examples } : null),
-          ...(schemaNode.annotations.const ? { const: schemaNode.annotations.const } : null),
-          ...(schemaNode.annotations['x-example'] ? { ['x-example']: schemaNode.annotations['x-example'] } : null),
         }
       : null),
     ...getFilteredValidations(schemaNode),

src/components/shared/__tests__/Format.spec.tsx

@@ -1,15 +1,15 @@
 import 'jest-enzyme';
 
 import { mount } from 'enzyme';
-import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 
+import { JSONSchema } from '../../../types';
 import { SchemaRow } from '../../SchemaRow';
 import { Format } from '../Format';
 import { buildTree, findNodeWithPath } from './utils';
 
 describe('Format component', () => {
-  const schema: JSONSchema4 = require('../../../__fixtures__/formats-schema.json');
+  const schema: JSONSchema = require('../../../__fixtures__/formats-schema.json');
   let tree = buildTree(schema);
 
   it('should render next to a single type', () => {