feat: display format next to type (#84)

* feat: display format next to type

* fix: fixed linting issues

* feat: refactored 'Format'

moved Format to Validations
added formats-schema fixture
added unit tests

* fix: add empty line

* fix: review comments

* fix: lint issue

* feat: remove 'format' from common validation types

refactor Validations component

* fix: linting issues

* Update src/components/shared/Validations.tsx

* feat: refactor 'format' validation

* fix: changed attribute name

* fix: rever change in getValidations

* fix: changed prop nodeSchema to schema

Co-authored-by: Jakub Rożek <jakub@stoplight.io>

Author: mmiask

src/__fixtures__/formats-schema.json

@@ -0,0 +1,41 @@
+{
+  "title": "model-with-formats",
+  "type": "object",
+  "properties": {
+    "date-of-birth": {
+      "type": [
+        "number",
+        "string",
+        "array"
+      ],
+      "format": "date-time",
+      "items": {}
+    },
+    "name": {
+      "type": "string"
+    },
+    "id": {
+      "type": "number",
+      "format": "float"
+    },
+    "notype": {
+        "format": "date-time"
+    },
+    "permissions": {
+      "type": [
+        "string",
+        "object"
+      ],
+      "format": "password",
+      "properties": {
+        "ids": {
+          "type": "array",
+          "items": {
+            "type": "integer",
+            "format": "int32"
+          }
+        }
+      }
+    }
+  }
+}

src/components/SchemaRow.tsx

@@ -7,7 +7,7 @@ import { getNodeMetadata, getSchemaNodeMetadata } from '../tree/metadata';
 import { GoToRefHandler, SchemaKind, SchemaTreeListNode } from '../types';
 import { getPrimaryType } from '../utils/getPrimaryType';
 import { hasRefItems, isArrayNodeWithItems, isRefNode } from '../utils/guards';
-import { Caret, Description, Divider, Property, Validations } from './shared';
+import { Caret, Description, Divider, Format, Property, Validations } from './shared';
 
 export interface ISchemaRow {
   className?: string;
@@ -90,6 +90,7 @@ export const SchemaPropertyRow: typeof SchemaRow = ({ node, onGoToRef, rowOption
 
       <div className="flex-1 flex truncate">
         <Property node={node} onGoToRef={onGoToRef} />
+        {metadata.schema.type && typeof metadata.schema.format === 'string' && <Format schema={metadata.schema} />}
         {description && <Description value={description} />}
       </div>
 

src/components/__tests__/Validations.spec.tsx

@@ -1,25 +1,29 @@
+import { TreeState } from '@stoplight/tree-list';
 import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
 import { shallow } from 'enzyme';
 import 'jest-enzyme';
+import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
+import { SchemaTree } from '../../tree';
 
 import { getValidations } from '../../utils/getValidations';
-import { Validations } from '../shared/Validations';
+import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
+import { Format, Validations } from '../shared/Validations';
 
 describe('Validations component', () => {
   describe('when property is deprecated', () => {
     let validations: Dictionary<unknown>;
 
     beforeEach(() => {
-      validations = getValidations({ 'x-deprecated': true, type: 'string', format: 'email', minLength: 2 });
+      validations = getValidations({ 'x-deprecated': true, type: 'string', minLength: 2, default: 'foo' });
     });
 
     test('should exclude deprecated from general validations', () => {
       const wrapper = shallow(<Validations required={false} validations={validations} />).find(Popover);
 
+      expect(shallow(wrapper.prop('content') as React.ReactElement)).toHaveText('default:"foo"minLength:2');
       expect(shallow(wrapper.prop('target') as React.ReactElement)).toHaveText('+2');
-      expect(shallow(wrapper.prop('content') as React.ReactElement)).toHaveText('format:"email"minLength:2');
     });
 
     test('should render deprecated box next to popover', () => {
@@ -29,3 +33,49 @@ describe('Validations component', () => {
     });
   });
 });
+
+describe('Format', () => {
+  let tree: SchemaTree;
+
+  beforeEach(() => {
+    const schema: JSONSchema4 = require('../../__fixtures__/formats-schema.json');
+
+    tree = new SchemaTree(schema, new TreeState(), {
+      expandedDepth: Infinity,
+      mergeAllOf: false,
+      resolveRef: void 0,
+      shouldResolveEagerly: false,
+      onPopulate: void 0,
+    });
+
+    tree.populate();
+  });
+
+  test('should render next to a single type with and inherit its color', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(3)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow()
+      .find(Format)
+      .shallow();
+
+    expect(wrapper).toHaveProp('className', 'ml-2 text-red-7 dark:text-red-6');
+  });
+
+  test('should render next to an array of types in default (black) color', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(1)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow()
+      .find(Format)
+      .shallow();
+
+    expect(wrapper).toHaveProp('className', 'ml-2');
+  });
+
+  test('should not render when the type(s) is/are missing', () => {
+    const wrapper = shallow(<SchemaRow node={tree.itemAt(4)!} rowOptions={{}} />)
+      .find(SchemaPropertyRow)
+      .shallow();
+
+    expect(wrapper).not.toContain(Format);
+  });
+});

src/components/shared/Validations.tsx

@@ -1,17 +1,24 @@
 import { safeStringify } from '@stoplight/json';
 import { Dictionary } from '@stoplight/types';
 import { Popover } from '@stoplight/ui-kit';
+import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
 import { ViewModeContext } from '../JsonSchemaViewer';
+import { PropertyTypeColors } from './Types';
 
 export interface IValidations {
   required: boolean;
-  validations: (Dictionary<unknown> | {}) & { deprecated?: boolean; readOnly?: unknown; writeOnly?: unknown };
+  validations: (Dictionary<unknown> | {}) & {
+    deprecated?: boolean;
+    readOnly?: unknown;
+    writeOnly?: unknown;
+    format?: unknown;
+  };
 }
 
 export const Validations: React.FunctionComponent<IValidations> = ({
   required,
-  validations: { deprecated, readOnly, writeOnly, ...validations },
+  validations: { deprecated, readOnly, writeOnly, format, ...validations },
 }) => {
   const viewMode = React.useContext(ViewModeContext);
   const validationCount = Object.keys(validations).length;
@@ -85,3 +92,15 @@ export const Validations: React.FunctionComponent<IValidations> = ({
     </>
   );
 };
+
+export const Format: React.FunctionComponent<{ schema: JSONSchema4 }> = ({ schema }) => {
+  return (
+    <div
+      {...(typeof schema.type === 'string' && schema.type in PropertyTypeColors
+        ? { className: `ml-2 ${PropertyTypeColors[schema.type as string]}` }
+        : { className: 'ml-2' })}
+    >
+      {`<${schema.format}>`}
+    </div>
+  );
+};