Skip to content

Commit

Permalink
feat: nodeHasChanged option + diff annotations (#204)
Browse files Browse the repository at this point in the history
  • Loading branch information
marbemac committed Sep 14, 2022
1 parent b41cd0c commit e86fbde
Show file tree
Hide file tree
Showing 14 changed files with 532 additions and 223 deletions.
11 changes: 6 additions & 5 deletions package.json
Expand Up @@ -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"
},
Expand All @@ -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"
},
Expand All @@ -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",
Expand Down
26 changes: 26 additions & 0 deletions 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" }
}
}
}
}
}
97 changes: 97 additions & 0 deletions 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": ["one@email.com", "two@email.com"],
"deprecated": true,
"default": "default@email.com",
"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" }
}
}
}
}
}
40 changes: 40 additions & 0 deletions 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 };

0 comments on commit e86fbde

Please sign in to comment.