feat: special treatment for top level rows (#135)

* feat: flatten top level objects

* feat: perfect caret alignment

Caret is now exactly in line with the left side of the component / the row above.

* feat: increase nesting offset

To match Figma design more closely

* feat: special handling for top level arrays

* fix: indentation

* fix: indentation

* fix: perfect caret alignment

* feat: top level schema picker

* fix: type error

* test: update snapshots

* fix: font sizes

* chore: update snapshots

* chore: remove unused TypeSelector.tsx

Co-authored-by: Mateusz Podlasin <[email protected]>

Author: Marcell Toth

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
+}