refactor: simplify JSV (#109)

* refactor: rebuild JSV vol 1

* feat: don't expand mirrored nodes by default

* feat: implement array flattening

* chore: cleanup

* feat: max-width

* feat: broken $ref handling

* chore: remove unnecessary context usage

* fix: visual nesting problem

* chore: simplify SchemaRow

* fix: default expanded level

* chore: remove nesting level context

* fix: padding

* chore: get rid of tree-list

* feat: add oneOf story

* chore: remove maxRows

* chore: clean up FallbackComponent

* chore: one less context

* feat: onGoToRef support

* fix: don't make props required

* test: remove mergeAllOf from stories

* chore: undo unintended fixture modification

* feat: add row addon feature (formerly rowRenderer)

* test: update snapshots

* test: update some

* test: fix SchemaRow tests

* test: update Format tests

* test: update Property tests

* test: remove expansion checks

To be added back with RTL

* chore: lint

* chore: no ui-kit styles in storybook

Author: Marcell Toth

jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/__mocks__/styleMock.js'
   },
-  testMatch: ['<rootDir>/src/**/__tests__/*.(ts|js)?(x)'],
+  testMatch: ['<rootDir>/src/**/__tests__/*.(spec|test).(ts|js)?(x)'],
   transform: {
     '\\.tsx?$': 'ts-jest'
   },

package.json

@@ -37,7 +37,6 @@
   "peerDependencies": {
     "@stoplight/markdown-viewer": "^4",
     "@stoplight/ui-kit": "^3",
-    "mobx": "^5",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
@@ -47,7 +46,6 @@
     "@stoplight/json-schema-tree": "^1.1.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",
     "lodash": "^4.17.19"
   },
@@ -87,7 +85,6 @@
     "fast-glob": "^3.2.4",
     "jest": "^26.6.2",
     "jest-enzyme": "^7.1.2",
-    "mobx": "^5.13.0",
     "prettier": "^2.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

src/__stories__/JsonSchemaViewer.tsx

@@ -1,16 +1,20 @@
 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 { 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, RowRenderer, SchemaRow } from '../';
+import { JsonSchemaViewer, RowAddonRenderer } from '../';
 import { Wrapper } from './utils/Wrapper';
 
 const allOfSchema = require('../__fixtures__/combiners/allOfs/base.json');
 const schema = require('../__fixtures__/default-schema.json');
 const stressSchema = require('../__fixtures__/stress-schema.json');
+const refSchema = require('../__fixtures__/references/base.json');
+const nullRefSchema = require('../__fixtures__/references/nullish.json');
+const brokenRefArraySchema = require('../__fixtures__/arrays/of-refs.json');
+const oneOfWithArraySchema = require('../__fixtures__/combiners/oneof-with-array-type.json');
 
 subscribeTheme({ mode: 'light' });
 
@@ -21,7 +25,6 @@ storiesOf('JsonSchemaViewer', module)
     <JsonSchemaViewer
       schema={schema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
-      onGoToRef={action('onGoToRef')}
       viewMode={select(
         'viewMode',
         {
@@ -31,58 +34,48 @@ storiesOf('JsonSchemaViewer', module)
         },
         'standalone',
       )}
+      onGoToRef={action('onGoToRef')}
     />
   ))
   .add('custom schema', () => (
     <JsonSchemaViewer
       schema={object('schema', {})}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
       onGoToRef={action('onGoToRef')}
-      maxRows={number('maxRows', 5)}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
-  .add('custom row renderer', () => {
-    const customRowRenderer: RowRenderer = (node, rowOptions) => {
+  .add('custom row addon', () => {
+    const customRowAddonRenderer: RowAddonRenderer = () => {
       return (
-        <>
-          <SchemaRow treeListNode={node} rowOptions={rowOptions} />
-          <Flex h="full" alignItems="center">
-            <Button pl={1} mr={1} size="sm" appearance="minimal" icon="issue" />
-            <input type="checkbox" />
-          </Flex>
-        </>
+        <Flex h="full" alignItems="center">
+          <Button pl={1} mr={1} size="sm" appearance="minimal" icon="issue" />
+          <input type="checkbox" />
+        </Flex>
       );
     };
 
     return (
       <JsonSchemaViewer
         schema={object('schema', schema as JSONSchema4)}
         onGoToRef={action('onGoToRef')}
-        maxRows={number('maxRows', 5)}
-        mergeAllOf={boolean('mergeAllOf', true)}
-        rowRenderer={customRowRenderer}
+        renderRowAddon={customRowAddonRenderer}
       />
     );
   })
   .add('stress-test schema', () => (
     <>
-      <div style={{ height: 345 }}>
+      <div style={{ height: 345, overflowY: 'scroll' }}>
         <JsonSchemaViewer
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           onGoToRef={action('onGoToRef')}
-          maxRows={number('maxRows', 10)}
-          mergeAllOf={boolean('mergeAllOf', true)}
         />
       </div>
-      <div style={{ height: 345 }}>
+      <div style={{ height: 345, overflowY: 'scroll' }}>
         <JsonSchemaViewer
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           onGoToRef={action('onGoToRef')}
-          maxRows={number('maxRows', 10)}
-          mergeAllOf={boolean('mergeAllOf', true)}
         />
       </div>
     </>
@@ -91,7 +84,13 @@ storiesOf('JsonSchemaViewer', module)
     <JsonSchemaViewer
       schema={allOfSchema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      mergeAllOf={boolean('mergeAllOf', true)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('anyOf-array-schema', () => (
+    <JsonSchemaViewer
+      schema={oneOfWithArraySchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
     />
   ))
@@ -108,7 +107,6 @@ storiesOf('JsonSchemaViewer', module)
       )}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
   .add('invalid types property pretty error message', () => (
@@ -140,7 +138,6 @@ storiesOf('JsonSchemaViewer', module)
       }}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       onGoToRef={action('onGoToRef')}
-      mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
   .add('dark', () => {
@@ -151,9 +148,29 @@ storiesOf('JsonSchemaViewer', module)
             schema={schema as JSONSchema4}
             defaultExpandedDepth={number('defaultExpandedDepth', 2)}
             onGoToRef={action('onGoToRef')}
-            mergeAllOf={boolean('mergeAllOf', true)}
           />
         </div>
       </InvertTheme>
     );
-  });
+  })
+  .add('refs/normal', () => (
+    <JsonSchemaViewer
+      schema={refSchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('refs/nullish', () => (
+    <JsonSchemaViewer
+      schema={nullRefSchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
+  .add('refs/broken', () => (
+    <JsonSchemaViewer
+      schema={brokenRefArraySchema as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ));

src/__stories__/_styles.scss

@@ -1,5 +1,3 @@
-@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";