feat: integrate tree-list component [STU-123] (#14)

* feat: initial version

* fix: can have children

* style: even rows

* fix: typings + minor divider adjustment

* style: masking dialog

* feat: drop limitPropertyCount

* refactor: assign id

* feat: collapsing

* style: text-overflow

* fix: handle expanded prop

* chore: stress-test story

* fix: make top bar display and configurable

* fix: make jsv react to schema changes

* test: snapshots :P

* test: cover SchemaView

* chore: tslint --fix

Author: P0lip

.storybook/preview-head.html

@@ -3,4 +3,8 @@
     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;
+    }
 </style>

.storybook/theme.js

@@ -1,4 +1,6 @@
 import { createThemedModule } from '@stoplight/ui-kit';
+import { dark } from '../src/themes/dark';
+import { light } from '../src/themes/light';
 
 const { useTheme, ThemeProvider } = createThemedModule();
 
@@ -7,72 +9,6 @@ export { useTheme, ThemeProvider };
 export const themes = ['dark', 'light'];
 
 export const zones = {
-  'json-schema-viewer': ({ base }) =>
-    base === 'dark'
-      ? {
-          canvas: {
-            bg: '#111',
-            fg: '#fff',
-            error: 'red',
-            muted: 'rgba(255, 255, 255, 0.6)',
-          },
-
-          divider: {
-            bg: '#bababa',
-          },
-
-          row: {
-            hoverBg: '#333',
-            hoverFg: '#fff',
-            evenBg: '#232222',
-          },
-
-          types: {
-            object: '#83c1ff',
-            array: '#7dff75',
-            allOf: '#b89826',
-            oneOf: '#b89826',
-            anyOf: '#b89826',
-            null: '#ff7f50',
-            integer: '#e03b36',
-            number: '#e03b36',
-            boolean: '#ff69b4',
-            binary: '#8ccda3',
-            string: '#19c5a0',
-            $ref: '#a359e2',
-          },
-        }
-      : {
-          canvas: {
-            bg: '#fff',
-            fg: '#111',
-            error: 'red',
-            muted: 'rgba(0, 0, 0, 0.5)',
-          },
-
-          divider: {
-            bg: '#dae1e7',
-          },
-
-          row: {
-            hoverBg: '#e9e9e9',
-            hoverFg: '#111',
-            evenBg: '#f3f3f3',
-          },
-
-          types: {
-            object: '#00f',
-            array: '#008000',
-            allOf: '#B8860B',
-            oneOf: '#B8860B',
-            anyOf: '#B8860B',
-            null: '#ff7f50',
-            integer: '#a52a2a',
-            number: '#a52a2a',
-            boolean: '#ff69b4',
-            binary: '#66cdaa',
-            string: '#008080',
-            $ref: '#8a2be2',
-          },
-        },
+  'tree-list': ({ base }) => base === 'dark'  ? dark['tree-list'] : light['tree-list'],
+  'json-schema-viewer': ({ base }) => base === 'dark'  ? dark['json-schema-viewer'] : light['json-schema-viewer'],
 };

package.json

@@ -43,8 +43,10 @@
     "@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"
+    "lodash": "4.17.x",
+    "mobx": "^5.9.4"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^1.3.4",

src/JsonSchemaViewer.tsx

@@ -1,13 +1,17 @@
+import { TreeStore } from '@stoplight/tree-list';
 import { Omit } from '@stoplight/types';
+import { runInAction } from 'mobx';
 import * as React from 'react';
 import { ErrorMessage } from './components/common/ErrorMessage';
 import { MutedText } from './components/common/MutedText';
 import { ISchemaView, SchemaView } from './SchemaView';
 import { ThemeZone } from './theme';
 import { isSchemaViewerEmpty } from './utils/isSchemaViewerEmpty';
+import { renderSchema } from './utils/renderSchema';
 
-export interface IJsonSchemaViewer extends Omit<ISchemaView, 'emptyText'> {
+export interface IJsonSchemaViewer extends Omit<ISchemaView, 'emptyText' | 'treeStore'> {
   emptyText?: string;
+  defaultExpandedDepth?: number;
 }
 
 export interface IJsonSchemaViewerState {
@@ -19,23 +23,51 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
     error: null,
   };
 
+  protected treeStore: TreeStore;
+
+  constructor(props: IJsonSchemaViewer) {
+    super(props);
+
+    this.treeStore = new TreeStore({
+      defaultExpandedDepth: this.expandedDepth,
+      nodes: Array.from(renderSchema(props.schema, props.dereferencedSchema)),
+    });
+  }
+
   // there is no error hook yet, see https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks
   public static getDerivedStateFromError(error: Error): { error: IJsonSchemaViewerState['error'] } {
     return { error: `Error rendering schema. ${error.message}` };
   }
 
+  protected get expandedDepth(): number {
+    if (this.props.expanded) {
+      return 2 ** 31 - 3; // tree-list kind of equivalent of expanded: all
+    }
+
+    if (this.props.defaultExpandedDepth !== undefined) {
+      return this.props.defaultExpandedDepth;
+    }
+
+    return 1;
+  }
+
+  public componentDidUpdate(prevProps: Readonly<IJsonSchemaViewer>) {
+    if (this.treeStore.defaultExpandedDepth !== this.expandedDepth) {
+      runInAction(() => {
+        this.treeStore.defaultExpandedDepth = this.expandedDepth;
+      });
+    }
+
+    if (prevProps.schema !== this.props.schema || prevProps.dereferencedSchema !== this.props.dereferencedSchema) {
+      runInAction(() => {
+        this.treeStore.nodes = Array.from(renderSchema(this.props.schema, this.props.dereferencedSchema));
+      });
+    }
+  }
+
   public render() {
     const {
-      props: {
-        emptyText = 'No schema defined',
-        name,
-        schema,
-        schemas,
-        limitPropertyCount,
-        expanded,
-        defaultExpandedDepth,
-        ...props
-      },
+      props: { emptyText = 'No schema defined', name, schema, schemas, expanded, defaultExpandedDepth, ...props },
       state: { error },
     } = this;
 
@@ -58,15 +90,7 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
 
     return (
       <ThemeZone name="json-schema-viewer">
-        <SchemaView
-          emptyText={emptyText}
-          defaultExpandedDepth={defaultExpandedDepth}
-          expanded={expanded}
-          limitPropertyCount={limitPropertyCount}
-          name={name}
-          schema={schema}
-          {...props}
-        />
+        <SchemaView expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />
       </ThemeZone>
     );
   }

src/SchemaView.tsx

@@ -1,107 +1,92 @@
-import { Dictionary, Omit } from '@stoplight/types';
-import { Box, Button, IBox } from '@stoplight/ui-kit';
+import { TreeList, TreeListMouseEventHandler, TreeStore } from '@stoplight/tree-list';
+import { Omit } from '@stoplight/types';
+import { Box, IBox, ThemeZone } from '@stoplight/ui-kit';
 import { JSONSchema4 } from 'json-schema';
-import _get = require('lodash/get');
+import _isEmpty = require('lodash/isEmpty');
 import * as React from 'react';
-import { MutedText } from './components/common/MutedText';
 import { MaskedSchema } from './components/MaskedSchema';
 import { IProperty, Property } from './components/Property';
 import { TopBar } from './components/TopBar';
 import { useMetadata } from './hooks/useMetadata';
-import { useProperties } from './hooks/useProperties';
+import { IJsonSchemaViewer } from './JsonSchemaViewer';
 import { useTheme } from './theme';
-import { IMasking } from './types';
-import { isExpanded } from './utils/isExpanded';
-import { pathToString } from './utils/pathToString';
+import { IMasking, SchemaNodeWithMeta } from './types';
+import { lookupRef } from './utils/lookupRef';
+
+const canDrag = () => false;
 
 export interface ISchemaView extends Omit<IBox, 'onSelect'>, IMasking {
   name?: string;
-  defaultExpandedDepth?: number;
   dereferencedSchema?: JSONSchema4;
   schema: JSONSchema4;
-  limitPropertyCount?: number;
   expanded?: boolean;
-  emptyText: string;
+  hideTopBar?: boolean;
+  treeStore: TreeStore;
 }
 
 export const SchemaView: React.FunctionComponent<ISchemaView> = props => {
   const {
-    defaultExpandedDepth = 1,
     emptyText,
     expanded = false,
-    limitPropertyCount,
     schema,
     dereferencedSchema,
+    hideTopBar,
     selected,
     canSelect,
     onSelect,
     name,
+    treeStore,
     ...rest
   } = props;
 
-  const theme = useTheme();
-  const [showExtra, setShowExtra] = React.useState<boolean>(false);
+  const theme = useTheme() as IJsonSchemaViewer;
   const [maskedSchema, setMaskedSchema] = React.useState<JSONSchema4 | null>(null);
-  const [expandedRows, setExpandedRows] = React.useState<Dictionary<boolean>>({ all: expanded });
-  const { properties, isOverflow } = useProperties(schema, dereferencedSchema, {
-    expandedRows,
-    defaultExpandedDepth,
-    ...(!showExtra && { limitPropertyCount }),
-    ...(canSelect && selected && { selected }),
-  });
+
   const metadata = useMetadata(schema);
 
-  const toggleExpandRow = React.useCallback<IProperty['onClick']>(
+  const handleMaskEdit = React.useCallback<IProperty['onMaskEdit']>(
     node => {
-      if (node.path.length > 0) {
-        setExpandedRows({
-          ...expandedRows,
-          [pathToString(node)]: !isExpanded(node, defaultExpandedDepth, expandedRows),
-        });
-      }
+      setMaskedSchema(lookupRef(node.path, dereferencedSchema));
     },
-    [expandedRows, defaultExpandedDepth]
+    [dereferencedSchema]
   );
 
-  const toggleShowExtra = React.useCallback<React.MouseEventHandler<HTMLElement>>(
-    () => {
-      setShowExtra(!showExtra);
+  const handleNodeClick = React.useCallback<TreeListMouseEventHandler>(
+    (e, node) => {
+      treeStore.toggleExpand(node);
     },
-    [showExtra]
+    [treeStore]
   );
 
-  const handleMaskEdit = React.useCallback<IProperty['onMaskEdit']>(node => {
-    setMaskedSchema(_get(dereferencedSchema, node.path));
-  }, []);
-
   const handleMaskedSchemaClose = React.useCallback(() => {
     setMaskedSchema(null);
   }, []);
 
-  if (properties.length === 0) {
-    return <MutedText>{emptyText}</MutedText>;
-  }
+  const shouldRenderTopBar = !hideTopBar && (name || !_isEmpty(metadata));
+
+  const itemData = {
+    onSelect,
+    onMaskEdit: handleMaskEdit,
+    selected,
+    canSelect,
+  };
 
   return (
     <Box backgroundColor={theme.canvas.bg} color={theme.canvas.fg} {...rest}>
       {maskedSchema && (
         <MaskedSchema onClose={handleMaskedSchemaClose} onSelect={onSelect} selected={selected} schema={maskedSchema} />
       )}
-      <TopBar name={name} metadata={metadata} />
-      {properties.map((node, i) => (
-        <Property
-          key={i}
-          node={node}
-          onClick={toggleExpandRow}
-          onSelect={onSelect}
-          onMaskEdit={handleMaskEdit}
-          selected={selected}
-          canSelect={canSelect}
+      {shouldRenderTopBar && <TopBar name={name} metadata={metadata} />}
+      <ThemeZone name="tree-list">
+        <TreeList
+          top={shouldRenderTopBar ? '40px' : 0}
+          rowHeight={40}
+          canDrag={canDrag}
+          store={treeStore}
+          onNodeClick={handleNodeClick}
+          rowRenderer={node => <Property node={node.metadata as SchemaNodeWithMeta} {...itemData} />}
         />
-      ))}
-      {showExtra || isOverflow ? (
-        <Button onClick={toggleShowExtra}>{showExtra ? 'collapse' : `...show more properties`}</Button>
-      ) : null}
+      </ThemeZone>
     </Box>
   );
 };