feat: nodeHasChanged option + diff annotations (#204)

Author: marbemac

package.json

@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "@stoplight/markdown-viewer": "^5",
-    "@stoplight/mosaic": "^1",
-    "@stoplight/mosaic-code-viewer": "^1",
+    "@stoplight/mosaic": "^1.32",
+    "@stoplight/mosaic-code-viewer": "^1.32",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
@@ -50,6 +50,7 @@
     "@stoplight/react-error-boundary": "^2.0.0",
     "@types/json-schema": "^7.0.7",
     "classnames": "^2.2.6",
+    "fnv-plus": "^1.3.1",
     "jotai": "^1.4.5",
     "lodash": "^4.17.19"
   },
@@ -58,10 +59,10 @@
     "@size-limit/preset-big-lib": "^4.11.0",
     "@stoplight/eslint-config": "3.0.0",
     "@stoplight/markdown-viewer": "^5.3.3",
-    "@stoplight/mosaic": "^1.24.2",
-    "@stoplight/mosaic-code-viewer": "^1.24.2",
+    "@stoplight/mosaic": "^1.32.0",
+    "@stoplight/mosaic-code-viewer": "^1.32.0",
     "@stoplight/scripts": "9.2.0",
-    "@stoplight/types": "^12.3.0",
+    "@stoplight/types": "^13.7.0",
     "@storybook/addon-essentials": "^6.4.14",
     "@storybook/builder-webpack5": "^6.4.14",
     "@storybook/core": "6.4.14",

src/__fixtures__/diff/root-ref.json

@@ -0,0 +1,26 @@
+{
+  "title": "User",
+  "type": "object",
+  "x-stoplight": { "id": "root-id" },
+  "properties": {
+    "billing_address": {
+      "type": "string",
+      "title": "Billing Address",
+      "x-stoplight": { "id": "billing_address-id" },
+      "$ref": "#/$defs/Address"
+    }
+  },
+  "$defs": {
+    "Address": {
+      "type": "object",
+      "title": "Address",
+      "x-stoplight": { "id": "address-id" },
+      "properties": {
+        "street": {
+          "type": "string",
+          "x-stoplight": { "id": "address-street-id" }
+        }
+      }
+    }
+  }
+}

src/__fixtures__/diff/simple-example.json

@@ -0,0 +1,97 @@
+{
+  "title": "User",
+  "type": "object",
+  "x-stoplight": { "id": "root-id" },
+  "properties": {
+    "name": {
+      "type": "string",
+      "const": "Constant name",
+      "examples": ["Example name", "Different name"],
+      "x-stoplight": { "id": "name-id" }
+    },
+    "age": {
+      "type": "number",
+      "minimum": 10,
+      "maximum": 40,
+      "x-stoplight": { "id": "age-id" }
+    },
+    "completed_at": {
+      "type": "string",
+      "format": "date-time",
+      "x-stoplight": { "id": "completed_at-id" }
+    },
+    "list": {
+      "type": ["null", "array"],
+      "items": {
+        "type": ["string", "number"],
+        "x-stoplight": { "id": "list-items-id" }
+      },
+      "minItems": 1,
+      "maxItems": 4,
+      "x-stoplight": { "id": "list-id" }
+    },
+    "email": {
+      "type": "string",
+      "format": "email",
+      "examples": ["[email protected]", "[email protected]"],
+      "deprecated": true,
+      "default": "[email protected]",
+      "minLength": 2,
+      "x-stoplight": { "id": "email-id" }
+    },
+    "list-of-objects": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "x-stoplight": { "id": "list-of-objects-items-id" },
+        "properties": {
+          "id": {
+            "type": "string",
+            "x-stoplight": { "id": "list-of-objects-items-id-id" }
+          },
+          "friend": {
+            "type": "object",
+            "x-stoplight": { "id": "list-of-objects-items-friend-id" },
+            "properties": {
+              "id": {
+                "type": "string",
+                "x-stoplight": { "id": "list-of-objects-items-friend-id-id" }
+              },
+              "name": {
+                "type": "object",
+                "x-stoplight": { "id": "list-of-objects-items-friend-name-id" },
+                "properties": {
+                  "first": {
+                    "type": "string",
+                    "x-stoplight": { "id": "list-of-objects-items-friend-name-first-id" }
+                  },
+                  "last": {
+                    "type": "string",
+                    "x-stoplight": { "id": "list-of-objects-items-friend-name-last-id" }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      "minItems": 1,
+      "maxItems": 4,
+      "x-stoplight": { "id": "list-of-objects-id" }
+    },
+    "friend": {
+      "type": "object",
+      "x-stoplight": { "id": "friend-id" },
+      "properties": {
+        "id": {
+          "type": "string",
+          "x-stoplight": { "id": "friend-id-id" }
+        },
+        "name": {
+          "type": "string",
+          "x-stoplight": { "id": "friend-name-id" }
+        }
+      }
+    }
+  }
+}

src/__stories__/Diff.tsx

@@ -0,0 +1,40 @@
+import type { NodeHasChangedFn } from '@stoplight/types';
+import { Story } from '@storybook/react';
+import { JSONSchema4 } from 'json-schema';
+import React from 'react';
+
+import { JsonSchemaProps, JsonSchemaViewer } from '../components/JsonSchemaViewer';
+
+const defaultSchema = require('../__fixtures__/default-schema.json');
+const simpleExample = require('../__fixtures__/diff/simple-example.json');
+const rootRefExample = require('../__fixtures__/diff/root-ref.json');
+
+export default {
+  component: JsonSchemaViewer,
+  argTypes: {},
+};
+
+const changed: Record<string, ReturnType<NodeHasChangedFn>> = {
+  'age-id': { type: 'removed' },
+  'list-id': { type: 'modified', selfAffected: true },
+  'list-of-objects-id': { type: 'modified', isBreaking: true },
+  'list-of-objects-items-friend-id': { type: 'modified', isBreaking: true },
+  'list-of-objects-items-friend-name-id': { type: 'modified', selfAffected: true, isBreaking: true },
+  'list-of-objects-items-friend-name-last-id': { type: 'added', isBreaking: true },
+  'friend-id': { type: 'added', isBreaking: true },
+  'address-street-id': { type: 'added' },
+};
+const nodeHasChanged: NodeHasChangedFn = ({ nodeId }) => {
+  const change = changed[nodeId!];
+  return change || false;
+};
+
+const Template: Story<JsonSchemaProps> = ({ schema = defaultSchema as JSONSchema4, ...args }) => (
+  <JsonSchemaViewer schema={schema} {...args} nodeHasChanged={nodeHasChanged} />
+);
+
+export const SimpleAllOf = Template.bind({});
+SimpleAllOf.args = { schema: simpleExample as JSONSchema4 };
+
+export const RootRef = Template.bind({});
+RootRef.args = { schema: rootRefExample as JSONSchema4 };