chore: convert jsv

src/__fixtures__/ref/original.ts

@@ -0,0 +1,31 @@
+import { JSONSchema4 } from 'json-schema';
+
+export const schemaWithRefs: JSONSchema4 = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  definitions: {
+    address: {
+      type: 'object',
+      properties: {
+        street_address: {
+          type: 'string',
+        },
+        city: {
+          type: 'string',
+        },
+        state: {
+          type: 'string',
+        },
+      },
+      required: ['street_address', 'city', 'state'],
+    },
+  },
+  type: 'object',
+  properties: {
+    billing_address: {
+      $ref: '#/definitions/address',
+    },
+    shipping_address: {
+      $ref: '#/definitions/address',
+    },
+  },
+};

src/__fixtures__/ref/resolved.ts

@@ -0,0 +1,55 @@
+import { JSONSchema4 } from 'json-schema';
+
+export const dereferencedSchema: JSONSchema4 = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  definitions: {
+    address: {
+      type: 'object',
+      properties: {
+        street_address: {
+          type: 'string',
+        },
+        city: {
+          type: 'string',
+        },
+        state: {
+          type: 'string',
+        },
+      },
+      required: ['street_address', 'city', 'state'],
+    },
+  },
+  type: 'object',
+  properties: {
+    billing_address: {
+      type: 'object',
+      properties: {
+        street_address: {
+          type: 'string',
+        },
+        city: {
+          type: 'string',
+        },
+        state: {
+          type: 'string',
+        },
+      },
+      required: ['street_address', 'city', 'state'],
+    },
+    shipping_address: {
+      type: 'object',
+      properties: {
+        street_address: {
+          type: 'string',
+        },
+        city: {
+          type: 'string',
+        },
+        state: {
+          type: 'string',
+        },
+      },
+      required: ['street_address', 'city', 'state'],
+    },
+  },
+};

src/__stories__/JsonSchemaViewer.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { State, Store } from '@sambego/storybook-state';
 import { boolean, number, object, text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
-import { JsonSchemaViewer } from '../components/JsonSchemaViewer';
+import { JsonSchemaViewer } from '../components';
 
 import { JSONSchema4 } from 'json-schema';
 import * as allOfSchemaResolved from '../__fixtures__/allOf/allOf-resolved.json';

src/components/Divider.tsx

@@ -1,17 +1,10 @@
-import { Box, Flex, IFlex } from '@stoplight/ui-kit';
 import * as React from 'react';
-import { IJsonSchemaViewerTheme, useTheme } from '../theme';
-import { MutedText } from './common/MutedText';
-
-export const Divider: React.FunctionComponent<IFlex> = ({ children, ...props }) => {
-  const theme = useTheme() as IJsonSchemaViewerTheme;
 
+export const Divider: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
   return (
-    <Flex alignItems="center" position="absolute" top="-16px" left="0" height="10px" {...props}>
-      <MutedText fontSize=".8rem" textTransform="uppercase" fontWeight={700} pr={7}>
-        {children}
-      </MutedText>
-      <Box backgroundColor={theme.divider.bg} height="2px" flex="1 1 0%" />
-    </Flex>
+    <div className="flex items-center w-full h-2 absolute" style={{ top: -16, left: -16 }} {...props}>
+      <div className="uppercase font-bold text-darken-7 pr-2">{children}</div>
+      <div className="flex-1 bg-darken-5" style={{ height: 2 }} />
+    </div>
   );
 };

src/components/JsonSchemaViewer.tsx

@@ -2,10 +2,8 @@ import { TreeStore } from '@stoplight/tree-list';
 import { Omit } from '@stoplight/types';
 import { runInAction } from 'mobx';
 import * as React from 'react';
-import { ThemeZone } from '../theme';
+
 import { isSchemaViewerEmpty, renderSchema } from '../utils';
-import { ErrorMessage } from './common/ErrorMessage';
-import { MutedText } from './common/MutedText';
 import { ISchemaTree, SchemaTree } from './SchemaTree';
 
 export interface IJsonSchemaViewer extends Omit<ISchemaTree, 'emptyText' | 'treeStore'> {
@@ -73,26 +71,14 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
     } = this;
 
     if (error) {
-      return (
-        <ThemeZone name="json-schema-viewer">
-          <ErrorMessage>{error}</ErrorMessage>
-        </ThemeZone>
-      );
+      return <div>{error}</div>;
     }
 
     // an empty array or object is still a valid response, schema is ONLY really empty when a combiner type has no information
     if (isSchemaViewerEmpty(schema)) {
-      return (
-        <ThemeZone name="json-schema-viewer">
-          <MutedText>{emptyText}</MutedText>
-        </ThemeZone>
-      );
+      return <div>{emptyText}</div>;
     }
 
-    return (
-      <ThemeZone name="json-schema-viewer">
-        <SchemaTree expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
-      </ThemeZone>
-    );
+    return <SchemaTree expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />;
   }
 }

src/components/MaskedSchema.tsx

@@ -1,15 +1,15 @@
 import { Dialog } from '@stoplight/ui-kit';
 import * as React from 'react';
-import { IJsonSchemaViewer, JsonSchemaViewer } from './JsonSchemaViewer';
+import { IJsonSchemaViewer, JsonSchemaViewer } from './';
 
 export interface IMaskedSchema extends IJsonSchemaViewer {
   onClose(): void;
 }
 
 export const MaskedSchema: React.FunctionComponent<IMaskedSchema> = ({ onClose, ...props }) => {
   return (
-    <Dialog show onClickOutside={onClose} width="50vh" height="50vh" position="relative">
-      <JsonSchemaViewer {...props} canSelect />
+    <Dialog isOpen={true} onClose={onClose}>
+      <JsonSchemaViewer {...props} style={{ height: 500 }} canSelect />
     </Dialog>
   );
 };