feat: new JSV design (#103)

* feat: new design

* feat: move to mosaic

* fix: simplify vlidations and address review

* fix: scrolling and divider

* fix: dark mode

* fix: tests

* fix: icon typing

* fix: linting

* test: update

* chore: cleanup

* feat: use interactive mode

Author: Jakub Jankowski

package.json

@@ -42,11 +42,14 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-tree": "^1.0.0",
+    "@stoplight/mosaic": "^1.0.0-beta.22",
     "@stoplight/react-error-boundary": "^1.0.0",
     "@stoplight/tree-list": "^5.0.3",
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "lodash": "^4.17.19"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^3.1.1",
@@ -61,6 +64,7 @@
     "@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",
     "@types/react-dom": "16.9.0",

setupTests.ts

@@ -1,6 +1,8 @@
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
+jest.mock('react-virtualized-auto-sizer', () => ({ children }: any) => children({ height: 600, width: 600 }));
+
 Enzyme.configure({ adapter: new Adapter() });
 
 jest.mock('react');

src/__stories__/JsonSchemaViewer.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Icon } from '@stoplight/ui-kit';
+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';
@@ -12,6 +12,8 @@ const allOfSchema = require('../__fixtures__/combiners/allOfs/base.json');
 const schema = require('../__fixtures__/default-schema.json');
 const stressSchema = require('../__fixtures__/stress-schema.json');
 
+subscribeTheme({ mode: 'light' });
+
 storiesOf('JsonSchemaViewer', module)
   .addDecorator(withKnobs)
   .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
@@ -47,10 +49,10 @@ storiesOf('JsonSchemaViewer', module)
       return (
         <>
           <SchemaRow treeListNode={node} rowOptions={rowOptions} />
-          <div className="flex h-full items-center">
-            <Button className="pl-1 mr-1" small minimal icon={<Icon color="grey" iconSize={12} icon="issue" />} />
-            <Checkbox className="mb-0" />
-          </div>
+          <Flex h="full" alignItems="center">
+            <Button pl={1} mr={1} size="sm" appearance="minimal" icon="issue" />
+            <input type="checkbox" />
+          </Flex>
         </>
       );
     };
@@ -149,14 +151,18 @@ storiesOf('JsonSchemaViewer', module)
       mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
-  .add('dark', () => (
-    <div style={{ height: '100vh' }} className="bp3-dark bg-gray-8">
-      <JsonSchemaViewer
-        schema={schema as JSONSchema4}
-        defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-        expanded={boolean('expanded', false)}
-        onGoToRef={action('onGoToRef')}
-        mergeAllOf={boolean('mergeAllOf', true)}
-      />
-    </div>
-  ));
+  .add('dark', () => {
+    return (
+      <InvertTheme>
+        <div style={{ height: '100vh' }}>
+          <JsonSchemaViewer
+            schema={schema as JSONSchema4}
+            defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+            expanded={boolean('expanded', false)}
+            onGoToRef={action('onGoToRef')}
+            mergeAllOf={boolean('mergeAllOf', true)}
+          />
+        </div>
+      </InvertTheme>
+    );
+  });

src/__stories__/_styles.scss

@@ -1,5 +1,7 @@
 @import "~@stoplight/tree-list/styles/_tree-list.scss";
 @import "~@stoplight/ui-kit/styles/_ui-kit.scss";
+@import "~@stoplight/mosaic/styles.css";
+@import "~@stoplight/mosaic/themes/default.css";
 
 .JsonSchemaViewer {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif,