feat: special treatment for top level rows

src/__fixtures__/arrays/of-complex-objects.json

@@ -0,0 +1,94 @@
+{
+  "type": [
+    "array"
+  ],
+  "items":{
+    "title": "User",
+    "type": "object",
+    "properties": {
+      "name": {
+        "type": "string",
+        "const": "Constant name",
+        "examples": ["Example name", "Different name"],
+        "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
+      },
+      "age": {
+        "type": "number",
+        "minimum": 10,
+        "maximum": 40,
+        "multipleOf": 10,
+        "default": 20,
+        "enum": [10, 20, 30, 40],
+        "readOnly": true
+      },
+      "completed_at": {
+        "type": "string",
+        "format": "date-time",
+        "writeOnly": true,
+        "pattern": "^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$"
+      },
+      "items": {
+        "type": ["null", "array"],
+        "items": {
+          "type": ["string", "number"]
+        },
+        "minItems": 1,
+        "maxItems": 4,
+        "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
+      },
+      "email": {
+        "type": "string",
+        "format": "email",
+        "examples": ["[email protected]", "[email protected]"],
+        "deprecated": true,
+        "default": "[email protected]",
+        "minLength": 2
+      },
+      "plan": {
+        "anyOf": [
+          {
+            "type": "object",
+            "properties": {
+              "foo": {
+                "type": "string"
+              },
+              "bar": {
+                "type": "string"
+              }
+            },
+            "deprecated": false,
+            "example": "hi",
+            "required": ["foo", "bar"]
+          },
+          {
+            "type": "array",
+            "items": {
+              "type": "integer"
+            }
+          }
+        ]
+      },
+      "permissions": {
+        "type": ["string", "object"],
+        "properties": {
+          "ids": {
+            "type": "array",
+            "items": {
+              "type": "integer"
+            }
+          }
+        }
+      },
+      "ref": {
+        "$ref": "#/properties/permissions"
+      }
+    },
+    "patternProperties": {
+      "^id_": { "type": "number" },
+      "foo": { "type": "integer" },
+      "_name$": { "type": "string" }
+    },
+    "required": ["name", "age", "completed_at"]
+  }
+
+}

src/__stories__/JsonSchemaViewer.tsx

@@ -16,6 +16,7 @@ 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');
 const oneOfWithArraySchema2 = require('../__fixtures__/combiners/oneof-within-array-item.json');
+const arrayOfComplexObjects = require('../__fixtures__/arrays/of-complex-objects.json');
 
 subscribeTheme({ mode: 'light' });
 
@@ -64,6 +65,13 @@ storiesOf('JsonSchemaViewer', module)
       />
     );
   })
+  .add('array of objects', () => (
+    <JsonSchemaViewer
+      schema={arrayOfComplexObjects as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 2)}
+      onGoToRef={action('onGoToRef')}
+    />
+  ))
   .add('stress-test schema', () => (
     <JsonSchemaViewer
       schema={stressSchema as JSONSchema4}

src/__stories__/_styles.scss

@@ -3,4 +3,10 @@
 
 .JsonSchemaViewer {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';}
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  border: 1px dotted #bbb; // to visualize component boundaries
+}
+
+#root > div > div > div {
+  background-color: #f8f8fb; // to visualize component boundaries
+}