feat: remove top bar (#96)

BREAKING CHANGE: top bar has been removed

Author: P0lip

package.json

@@ -47,8 +47,7 @@
     "@stoplight/react-error-boundary": "^1.0.0",
     "@stoplight/tree-list": "^5.0.3",
     "classnames": "^2.2.6",
-    "lodash": "^4.17.15",
-    "mobx-react-lite": "^1.4.1"
+    "lodash": "^4.17.15"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",

src/__stories__/JsonSchemaViewer.tsx

@@ -1,6 +1,6 @@
 import { Button, Checkbox, Icon } from '@stoplight/ui-kit';
 import { action } from '@storybook/addon-actions';
-import { boolean, number, object, select, text, withKnobs } from '@storybook/addon-knobs';
+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';
@@ -17,11 +17,9 @@ storiesOf('JsonSchemaViewer', module)
   .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
   .add('default', () => (
     <JsonSchemaViewer
-      name={text('name', 'my schema')}
       schema={schema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 0)}
       expanded={boolean('expanded', true)}
-      hideTopBar={boolean('hideTopBar', false)}
       shouldResolveEagerly={boolean('shouldResolveEagerly', false)}
       onGoToRef={action('onGoToRef')}
       viewMode={select(
@@ -37,10 +35,8 @@ storiesOf('JsonSchemaViewer', module)
   ))
   .add('custom schema', () => (
     <JsonSchemaViewer
-      name={text('name', 'my schema')}
       schema={object('schema', {})}
       expanded={boolean('expanded', true)}
-      hideTopBar={boolean('hideTopBar', false)}
       onGoToRef={action('onGoToRef')}
       maxRows={number('maxRows', 5)}
       mergeAllOf={boolean('mergeAllOf', true)}
@@ -62,10 +58,8 @@ storiesOf('JsonSchemaViewer', module)
 
     return (
       <JsonSchemaViewer
-        name={text('name', 'my schema')}
         schema={object('schema', schema as JSONSchema4)}
         expanded={boolean('expanded', true)}
-        hideTopBar={boolean('hideTopBar', false)}
         onGoToRef={action('onGoToRef')}
         maxRows={number('maxRows', 5)}
         mergeAllOf={boolean('mergeAllOf', true)}
@@ -77,23 +71,19 @@ storiesOf('JsonSchemaViewer', module)
     <>
       <div style={{ height: 345 }}>
         <JsonSchemaViewer
-          name={text('name', 'my stress schema')}
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           expanded={boolean('expanded', false)}
-          hideTopBar={boolean('hideTopBar', false)}
           onGoToRef={action('onGoToRef')}
           maxRows={number('maxRows', 10)}
           mergeAllOf={boolean('mergeAllOf', true)}
         />
       </div>
       <div style={{ height: 345 }}>
         <JsonSchemaViewer
-          name={text('name', 'my stress schema 2')}
           schema={stressSchema as JSONSchema4}
           defaultExpandedDepth={number('defaultExpandedDepth', 2)}
           expanded={boolean('expanded', false)}
-          hideTopBar={boolean('hideTopBar', false)}
           onGoToRef={action('onGoToRef')}
           maxRows={number('maxRows', 10)}
           mergeAllOf={boolean('mergeAllOf', true)}
@@ -106,14 +96,12 @@ storiesOf('JsonSchemaViewer', module)
       schema={allOfSchemaResolved as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
       expanded={boolean('expanded', false)}
-      hideTopBar={boolean('hideTopBar', false)}
       mergeAllOf={boolean('mergeAllOf', true)}
       onGoToRef={action('onGoToRef')}
     />
   ))
   .add('error boundary', () => (
     <JsonSchemaViewer
-      name={text('name', 'throw me an error!')}
       // @ts-ignore
       schema={select(
         'schema',
@@ -125,7 +113,6 @@ storiesOf('JsonSchemaViewer', module)
       )}
       expanded={boolean('expanded', false)}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      hideTopBar={boolean('hideTopBar', false)}
       onGoToRef={action('onGoToRef')}
       mergeAllOf={boolean('mergeAllOf', true)}
     />
@@ -159,19 +146,16 @@ storiesOf('JsonSchemaViewer', module)
       }}
       expanded={boolean('expanded', false)}
       defaultExpandedDepth={number('defaultExpandedDepth', 2)}
-      hideTopBar={boolean('hideTopBar', false)}
       onGoToRef={action('onGoToRef')}
       mergeAllOf={boolean('mergeAllOf', true)}
     />
   ))
   .add('dark', () => (
     <div style={{ height: '100vh' }} className="bp3-dark bg-gray-8">
       <JsonSchemaViewer
-        name={text('name', 'my stress schema')}
         schema={schema as JSONSchema4}
         defaultExpandedDepth={number('defaultExpandedDepth', 2)}
         expanded={boolean('expanded', false)}
-        hideTopBar={boolean('hideTopBar', false)}
         onGoToRef={action('onGoToRef')}
         mergeAllOf={boolean('mergeAllOf', true)}
       />

src/components/JsonSchemaViewer.tsx

@@ -12,13 +12,10 @@ import { SchemaTree as SchemaTreeComponent } from './SchemaTree';
 
 export interface IJsonSchemaViewer {
   schema: JSONSchema4;
-  style?: object;
   emptyText?: string;
   defaultExpandedDepth?: number;
   expanded?: boolean;
   className?: string;
-  name?: string;
-  hideTopBar?: boolean;
   maxRows?: number;
   onGoToRef?: GoToRefHandler;
   mergeAllOf?: boolean;
@@ -113,7 +110,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
 
   public render() {
     const {
-      props: { emptyText = 'No schema defined', name, schema, expanded, defaultExpandedDepth, className, ...props },
+      props: { emptyText = 'No schema defined', schema, expanded, defaultExpandedDepth, className, ...props },
     } = this;
 
     // an empty array or object is still a valid response, schema is ONLY really empty when a combiner type has no information
@@ -124,7 +121,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
     return (
       <div className={cn(className, 'JsonSchemaViewer flex flex-col relative')}>
         <ViewModeContext.Provider value={this.props.viewMode ?? 'standalone'}>
-          <SchemaTreeComponent expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
+          <SchemaTreeComponent expanded={expanded} schema={schema} treeStore={this.treeStore} {...props} />
         </ViewModeContext.Provider>
       </div>
     );

src/components/SchemaTree.tsx

@@ -1,6 +1,5 @@
-import { TreeList, TreeListEvents, TreeStore } from '@stoplight/tree-list';
+import { isParentNode, TreeList, TreeListEvents, TreeStore } from '@stoplight/tree-list';
 import { JSONSchema4 } from 'json-schema';
-import { observer } from 'mobx-react-lite';
 import * as React from 'react';
 
 import { GoToRefHandler, RowRenderer } from '../types';
@@ -9,22 +8,18 @@ import { SchemaRow } from './SchemaRow';
 export interface ISchemaTree {
   treeStore: TreeStore;
   schema: JSONSchema4;
-  name?: string;
-  hideTopBar?: boolean;
   expanded?: boolean;
   maxRows?: number;
   onGoToRef?: GoToRefHandler;
   rowRenderer?: RowRenderer;
 }
 
-const canDrag = () => false;
-
-export const SchemaTree = observer<ISchemaTree>(props => {
-  const { hideTopBar, name, treeStore, maxRows, onGoToRef, rowRenderer: customRowRenderer } = props;
+export const SchemaTree: React.FC<ISchemaTree> = props => {
+  const { treeStore, maxRows, onGoToRef, rowRenderer: customRowRenderer } = props;
 
   React.useEffect(() => {
     treeStore.events.on(TreeListEvents.NodeClick, (e, node) => {
-      if ('children' in node) {
+      if (isParentNode(node)) {
         treeStore.toggleExpand(node);
       }
     });
@@ -46,21 +41,13 @@ export const SchemaTree = observer<ISchemaTree>(props => {
   );
 
   return (
-    <>
-      {name && !hideTopBar && (
-        <div className="flex items-center text-sm px-2 font-semibold" style={{ height: 30 }}>
-          {name}
-        </div>
-      )}
-
-      <TreeList
-        striped
-        maxRows={maxRows !== undefined ? maxRows + 0.5 : maxRows}
-        store={treeStore}
-        rowRenderer={rowRenderer}
-        canDrag={canDrag}
-      />
-    </>
+    <TreeList
+      draggable={false}
+      striped
+      maxRows={maxRows !== undefined ? maxRows + 0.5 : maxRows}
+      store={treeStore}
+      rowRenderer={rowRenderer}
+    />
   );
-});
+};
 SchemaTree.displayName = 'JsonSchemaViewer.SchemaTree';

src/components/__tests__/SchemaTree.spec.tsx

@@ -8,9 +8,6 @@ import * as React from 'react';
 import { useMetadata } from '../../hooks/useMetadata';
 import { SchemaTree } from '../index';
 
-jest.mock('mobx-react-lite', () => ({
-  observer: (children: any) => children,
-}));
 jest.mock('../../hooks/useMetadata');
 
 const schema: JSONSchema4 = {
@@ -64,8 +61,7 @@ describe('SchemaTree component', () => {
     it('should be not draggable', () => {
       const treeList = shallow(<SchemaTree schema={schema} treeStore={store} />).find(TreeList);
 
-      expect(treeList.prop('canDrag')).toHaveLength(0);
-      expect(treeList.prop('canDrag')!({} as any)).toBe(false);
+      expect(treeList.prop('draggable')).toBe(false);
     });
   });
 });

yarn.lock

@@ -10966,7 +10966,7 @@ [email protected], mkdirp@^1.0.4:
   dependencies:
     minimist "0.0.8"
 
-mobx-react-lite@^1.4.1, mobx-react-lite@^1.5.2:
+mobx-react-lite@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-1.5.2.tgz#c4395b0568b9cb16f07669d8869cc4efa1b8656d"
   integrity sha512-PyZmARqqWtpuQaAoHF5pKX7h6TKNLwq6vtovm4zZvG6sEbMRHHSqioGXSeQbpRmG8Kw8uln3q/W1yMO5IfL5Sg==