V2

.storybook/config.js

@@ -1 +1,3 @@
-import '@stoplight/storybook-config/config';
+import "@stoplight/storybook-config/config";
+
+import "../src/__stories__/_styles.scss";

.storybook/preview-head.html

@@ -1,10 +1,14 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+<!--NEED TO SET BODY FONT SIZE TO UI-KIT BASE SINCE WE USE REMS -->
 <style>
-    html {
-        font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    }
-    html, body {
-        padding: 0;
-        margin: 0;
-    }
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+
+    font-size: 14px;
+  }
+
+  #root {
+    height: 100%;
+  }
 </style>

.storybook/webpack.config.js

@@ -3,7 +3,5 @@ const defaultConfig = require('@stoplight/storybook-config/webpack.config');
 module.exports = (baseConfig, env, config) => {
   config = defaultConfig(baseConfig, env, config);
 
-  // ... further customize if needed
-
   return config;
 };

README.md

@@ -12,7 +12,7 @@ A JSON Schema viewer React component
 - Full JSON Schema Draft 4 support, including `oneOf` and `anyOf` combiner properties
 - Renders complicated nested objects to any depth
 - Renders validation properties and markdown descriptions
-- Capable of linking resolved $refs
+- Capable of linking resolved \$refs
 - Theme-able
 - Collapsible
 
@@ -28,12 +28,18 @@ yarn add @stoplight/json-schema-viewer
 ### Usage
 
 ```jsx
-import { JsonSchemaViewer, ThemeProvider } from "@stoplight/json-schema-viewer";
-import { dark } from "@stoplight/json-schema-viewer/themes";
-
-<ThemeProvider theme={dark}>
-  <JsonSchemaViewer dereferencedSchema={dereferencedSchema} schema={schema} />
-</ThemeProvider>
+// index.jsx
+import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";
+
+<JsonSchemaViewer
+  name="Todos Model"
+  dereferencedSchema={schemaWithoutRefs}
+  schema={schemaWithRefs}
+  expanded={true}
+  hideTopBar={false}
+  emptyText="No schema defined"
+  defaultExpandedDepth={0}
+/>;
 ```
 
 More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).

jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  preset: '@stoplight/scripts',
-  testEnvironment: 'jsdom',
-  setupTestFrameworkScriptFile: './setupTests.ts',
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  preset: "@stoplight/scripts",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["./setupTests.ts"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
   moduleNameMapper: {
-    '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
-  },
+    "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
+  }
 };

package.json

@@ -23,48 +23,64 @@
     "build": "sl-scripts build",
     "build.docs": "build-storybook -c .storybook -o docs-auto",
     "commit": "git-cz",
-    "lint": "sl-scripts lint",
+    "lint": "tslint -c tslint.json 'src/**/*.ts?'",
     "lint.fix": "yarn lint --fix",
     "release": "sl-scripts release",
     "release.docs": "sl-scripts release:docs",
     "release.dryRun": "sl-scripts release --dry-run --debug",
     "storybook": "start-storybook -p 9001",
-    "test": "sl-scripts test",
+    "test": "jest",
     "test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
     "test.update": "yarn test --updateSnapshot",
     "test.watch": "yarn test --watch"
   },
   "peerDependencies": {
-    "@stoplight/ui-kit": ">=1.49",
-    "react": ">=16.7.0-alpha.1",
-    "react-dom": ">=16.7.0-alpha.1"
+    "@stoplight/markdown-viewer": "3.x.x",
+    "@stoplight/tree-list": "4.x.x",
+    "@stoplight/ui-kit": "2.x.x",
+    "lodash": "4.x.x",
+    "mobx": "5.x.x",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@fortawesome/free-solid-svg-icons": "5.6.x",
     "@stoplight/json": "1.9.x",
-    "@stoplight/tree-list": "^3.6.0",
-    "@types/json-schema": "^7.0.3",
-    "lodash": "4.17.x",
-    "mobx": "^5.9.4",
-    "json-schema-merge-allof": "^0.6.0"
+    "classnames": "^2.2.6",
+    "json-schema-merge-allof": "^0.6.0",
+    "mobx-react-lite": "^1.3.1",
+    "pluralize": "^7.0.0",
+    "react-error-boundary": "^1.2.5"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^1.3.4",
-    "@stoplight/scripts": "4.1.0",
-    "@stoplight/storybook-config": "1.4.0",
+    "@stoplight/markdown-viewer": "^3.0.0",
+    "@stoplight/scripts": "5.1.0",
+    "@stoplight/storybook-config": "^2.0.2",
+    "@stoplight/tree-list": "^4.0.0",
     "@stoplight/types": "4.1.0",
-    "@stoplight/ui-kit": "1.49.3",
+    "@stoplight/ui-kit": "^2.0.0",
+    "@types/classnames": "^2.2.7",
     "@types/enzyme": "3.9.1",
+    "@types/jest": "^24.0.12",
+    "@types/json-schema": "^7.0.3",
+    "@types/node": "^11.13.8",
+    "@types/pluralize": "^0.0.29",
     "@types/react": "16.8.12",
     "@types/react-dom": "16.8.3",
+    "copyfiles": "^2.1.0",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.12.1",
     "enzyme-to-json": "3.x.x",
+    "jest": "^24.7.1",
     "jest-enzyme": "7.0.2",
+    "lodash": "^4.17.11",
+    "mobx": "^5.9.4",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "typescript": "3.4.2"
+    "ts-jest": "^24.0.2",
+    "tslint": "^5.16.0",
+    "tslint-config-stoplight": "^1.2.0",
+    "typescript": "3.4.5"
   },
   "lint-staged": {
     "*.{ts,tsx}$": [

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';
@@ -12,17 +12,20 @@ import * as schema from '../__fixtures__/default-schema.json';
 import * as schemaWithRefs from '../__fixtures__/ref/original.json';
 import * as dereferencedSchema from '../__fixtures__/ref/resolved.json';
 import * as stressSchema from '../__fixtures__/stress-schema.json';
+import { Wrapper } from './utils/Wrapper';
 
 storiesOf('JsonSchemaViewer', module)
   .addDecorator(withKnobs)
   .add('default', () => (
-    <JsonSchemaViewer
-      name={text('name', 'my schema')}
-      schema={schema as JSONSchema4}
-      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      expanded={boolean('expanded', false)}
-      hideTopBar={boolean('hideTopBar', false)}
-    />
+    <Wrapper>
+      <JsonSchemaViewer
+        name={text('name', 'my schema')}
+        schema={schema as JSONSchema4}
+        defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+        expanded={boolean('expanded', false)}
+        hideTopBar={boolean('hideTopBar', false)}
+      />
+    </Wrapper>
   ))
   .add('with dereferenced schema', () => {
     const store = new Store<{ selected: string[] }>({
@@ -31,51 +34,61 @@ storiesOf('JsonSchemaViewer', module)
 
     return (
       <State store={store}>
-        <JsonSchemaViewer
-          name={text('name', 'name')}
-          schema={schemaWithRefs as JSONSchema4}
-          dereferencedSchema={dereferencedSchema as JSONSchema4}
-          defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-          expanded={boolean('expanded', true)}
-          hideTopBar={boolean('hideTopBar', false)}
-        />
+        <Wrapper>
+          <JsonSchemaViewer
+            name={text('name', 'name')}
+            schema={schemaWithRefs as JSONSchema4}
+            dereferencedSchema={dereferencedSchema as JSONSchema4}
+            defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+            expanded={boolean('expanded', true)}
+            hideTopBar={boolean('hideTopBar', false)}
+          />
+        </Wrapper>
       </State>
     );
   })
   .add('custom schema', () => (
-    <JsonSchemaViewer
-      name={text('name', 'my schema')}
-      schema={object('schema', {})}
-      expanded={boolean('expanded', true)}
-      hideTopBar={boolean('hideTopBar', false)}
-    />
+    <Wrapper>
+      <JsonSchemaViewer
+        name={text('name', 'my schema')}
+        schema={object('schema', {})}
+        expanded={boolean('expanded', true)}
+        hideTopBar={boolean('hideTopBar', false)}
+      />
+    </Wrapper>
   ))
   .add('stress-test schema', () => (
-    <JsonSchemaViewer
-      name={text('name', 'my stress schema')}
-      schema={stressSchema as JSONSchema4}
-      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      expanded={boolean('expanded', false)}
-      hideTopBar={boolean('hideTopBar', false)}
-    />
+    <Wrapper>
+      <JsonSchemaViewer
+        name={text('name', 'my stress schema')}
+        schema={stressSchema as JSONSchema4}
+        defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+        expanded={boolean('expanded', false)}
+        hideTopBar={boolean('hideTopBar', false)}
+      />
+    </Wrapper>
   ))
   .add('allOf-schema', () => (
-    <JsonSchemaViewer
-      schema={allOfSchema as JSONSchema4}
-      dereferencedSchema={allOfSchemaResolved as JSONSchema4}
-      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      expanded={boolean('expanded', false)}
-      hideTopBar={boolean('hideTopBar', false)}
-    />
+    <Wrapper>
+      <JsonSchemaViewer
+        schema={allOfSchema as JSONSchema4}
+        dereferencedSchema={allOfSchemaResolved as JSONSchema4}
+        defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+        expanded={boolean('expanded', false)}
+        hideTopBar={boolean('hideTopBar', false)}
+      />
+    </Wrapper>
   ))
   .add('error boundary', () => (
-    <JsonSchemaViewer
-      name={text('name', 'throw me an error!')}
-      // @ts-ignore
-      schema={null}
-      onError={(error: any) => console.log('You can hook into the onError handler too!', error)}
-      expanded={boolean('expanded', false)}
-      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      hideTopBar={boolean('hideTopBar', false)}
-    />
+    <Wrapper>
+      <JsonSchemaViewer
+        name={text('name', 'throw me an error!')}
+        // @ts-ignore
+        schema={null}
+        onError={(error: any) => console.log('You can hook into the onError handler too!', error)}
+        expanded={boolean('expanded', false)}
+        defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+        hideTopBar={boolean('hideTopBar', false)}
+      />
+    </Wrapper>
   ));

src/__stories__/_styles.scss

@@ -0,0 +1,2 @@
+@import "~@stoplight/tree-list/styles/_tree-list.scss";
+@import "~@stoplight/ui-kit/styles/_ui-kit.scss";

src/__stories__/utils/Wrapper.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const Wrapper: React.FunctionComponent<React.HTMLAttributes<HTMLElement>> = ({ children, ...props }) => {
+  return (
+    <div style={{ margin: '200px auto', width: '80vw' }}>
+      <div
+        // @ts-ignore
+        style={{
+          width: '100%',
+          position: 'relative',
+          height: '600px',
+          padding: 20,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};