feat: add skipTopLevelDescription option (#206)

Author: marbemac

src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -659,7 +659,40 @@ exports[`HTML Output given write mode, should populate proper nodes 1`] = `
 "
 `;
 
-exports[`HTML Output should render top-level description on allOf 1`] = `
+exports[`HTML Output top level descriptions should not render top-level description when skipTopLevelDescription=true 1`] = `
+"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
+  <div data-overlay-container=\\"true\\">
+    <div class=\\"JsonSchemaViewer\\">
+      <div></div>
+      <div data-level=\\"0\\">
+        <div data-id=\\"862ab7c3a6663\\">
+          <div>
+            <div>
+              <div>
+                <div>foo</div>
+                <span>string</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div data-id=\\"3d3ab69efb5e7\\">
+          <div>
+            <div>
+              <div>
+                <div>baz</div>
+                <span>string</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+"
+`;
+
+exports[`HTML Output top level descriptions should render top-level description on allOf 1`] = `
 "<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
   <div data-overlay-container=\\"true\\">
     <div class=\\"JsonSchemaViewer\\">

src/__tests__/index.spec.tsx

@@ -165,7 +165,7 @@ describe('HTML Output', () => {
     expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchSnapshot();
   });
 
-  it('should render top-level description on allOf', () => {
+  describe('top level descriptions', () => {
     const schema: JSONSchema4 = {
       description: 'This is a description that should be rendered',
       allOf: [
@@ -188,7 +188,15 @@ describe('HTML Output', () => {
       ],
     };
 
-    expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchSnapshot();
+    it('should render top-level description on allOf', () => {
+      expect(dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} />)).toMatchSnapshot();
+    });
+
+    it('should not render top-level description when skipTopLevelDescription=true', () => {
+      expect(
+        dumpDom(<JsonSchemaViewer schema={schema} defaultExpandedDepth={Infinity} skipTopLevelDescription />),
+      ).toMatchSnapshot();
+    });
   });
 });
 

src/components/JsonSchemaViewer.tsx

@@ -26,6 +26,7 @@ export type JsonSchemaProps = Partial<JSVOptions> & {
   onTreePopulated?: (props: { rootNode: RootNode; nodeCount: number }) => void;
   maxHeight?: number;
   parentCrumbs?: string[];
+  skipTopLevelDescription?: boolean;
 };
 
 const JsonSchemaViewerComponent = ({
@@ -37,6 +38,7 @@ const JsonSchemaViewerComponent = ({
   renderRootTreeLines,
   disableCrumbs,
   nodeHasChanged,
+  skipTopLevelDescription,
   ...rest
 }: JsonSchemaProps & ErrorBoundaryForwardedProps) => {
   const options = React.useMemo(
@@ -66,7 +68,7 @@ const JsonSchemaViewerComponent = ({
     <MosaicProvider>
       <JSVOptionsContextProvider value={options}>
         <Provider>
-          <JsonSchemaViewerInner viewMode={viewMode} {...rest} />
+          <JsonSchemaViewerInner viewMode={viewMode} skipTopLevelDescription={skipTopLevelDescription} {...rest} />
         </Provider>
       </JSVOptionsContextProvider>
     </MosaicProvider>
@@ -82,9 +84,18 @@ const JsonSchemaViewerInner = ({
   onTreePopulated,
   maxHeight,
   parentCrumbs,
+  skipTopLevelDescription,
 }: Pick<
   JsonSchemaProps,
-  'schema' | 'viewMode' | 'className' | 'resolveRef' | 'emptyText' | 'onTreePopulated' | 'maxHeight' | 'parentCrumbs'
+  | 'schema'
+  | 'viewMode'
+  | 'className'
+  | 'resolveRef'
+  | 'emptyText'
+  | 'onTreePopulated'
+  | 'maxHeight'
+  | 'parentCrumbs'
+  | 'skipTopLevelDescription'
 >) => {
   const setHoveredNode = useUpdateAtom(hoveredNodeAtom);
   const onMouseLeave = React.useCallback(() => {
@@ -153,7 +164,7 @@ const JsonSchemaViewerInner = ({
       style={{ maxHeight }}
     >
       <PathCrumbs parentCrumbs={parentCrumbs} />
-      <TopLevelSchemaRow schemaNode={jsonSchemaTreeRoot.children[0]} />
+      <TopLevelSchemaRow schemaNode={jsonSchemaTreeRoot.children[0]} skipDescription={skipTopLevelDescription} />
     </Box>
   );
 };

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -13,7 +13,10 @@ import { getInternalSchemaError } from '../shared/Validations';
 import { SchemaRow, SchemaRowProps } from './SchemaRow';
 import { useChoices } from './useChoices';
 
-export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNode'>) => {
+export const TopLevelSchemaRow = ({
+  schemaNode,
+  skipDescription,
+}: Pick<SchemaRowProps, 'schemaNode'> & { skipDescription?: boolean }) => {
   const { selectedChoice, setSelectedChoice, choices } = useChoices(schemaNode);
   const childNodes = React.useMemo(() => calculateChildrenToShow(selectedChoice.type), [selectedChoice.type]);
   const nestingLevel = 0;
@@ -27,7 +30,7 @@ export const TopLevelSchemaRow = ({ schemaNode }: Pick<SchemaRowProps, 'schemaNo
     return (
       <>
         <ScrollCheck />
-        <Description value={schemaNode.annotations.description} />
+        {!skipDescription ? <Description value={schemaNode.annotations.description} /> : null}
         <ChildStack
           schemaNode={schemaNode}
           childNodes={childNodes}