style: final touches

Author: P0lip

.storybook/theme.js

@@ -27,18 +27,18 @@ export const zones = {
       },
 
       types: {
-        object: '#00f',
-        array: '#008000',
-        allOff: '#B8860B',
-        oneOf: '#B8860B',
-        anyOf: '#B8860B',
+        object: '#83c1ff',
+        array: '#7dff75',
+        allOff: '#b89826',
+        oneOf: '#b89826',
+        anyOf: '#b89826',
         null: '#ff7f50',
-        integer: '#a52a2a',
-        number: '#a52a2a',
+        integer: '#e03b36',
+        number: '#e03b36',
         boolean: '#ff69b4',
-        binary: '#66cdaa',
-        string: '#008080',
-        $ref: '#8a2be2',
+        binary: '#8ccda3',
+        string: '#19c5a0',
+        $ref: '#a359e2',
       }
     } : {
       canvas: {
@@ -58,7 +58,6 @@ export const zones = {
         evenBg: '#e4e4e4',
       },
 
-
       types: {
         object: '#00f',
         array: '#008000',

src/PropValidations.tsx

@@ -3,6 +3,7 @@ import { ISchema } from '@stoplight/types';
 import * as React from 'react';
 import { isCombiner } from './util/isCombiner';
 import { pickValidations } from './util/pickValidations';
+import { MutedText } from './common/MutedText';
 
 export const PropValidations: React.FunctionComponent<{ prop: ISchema }> = ({ prop }) => {
   if (!isCombiner(prop)) {
@@ -22,15 +23,15 @@ export const PropValidations: React.FunctionComponent<{ prop: ISchema }> = ({ pr
           if (type === 'boolean') {
             return (
               <div key={k}>
-                <b>{k}:</b> {v.toString()}
+                <MutedText as="b">{k}:</MutedText> {v.toString()}
               </div>
             );
           }
 
           if (type !== 'object') {
             return (
               <div key={k}>
-                <b>{k}:</b> {v}
+                <MutedText as="b">{k}:</MutedText> {v}
               </div>
             );
           }

src/__stories__/JsonSchemaViewer.tsx

@@ -9,18 +9,18 @@ import * as nestedSchema from './__fixtures__/nested-schema.json';
 
 storiesOf('JsonSchemaViewer', module)
   .addDecorator(withKnobs)
-  .add('with text', () => (
+  .add('default', () => (
     <JsonSchemaViewer
       css={{ fontFamily: 'monospace' }}
       name={text('name', 'name')}
       schemas={object('schemas', {})}
-      schema={object('schema', schema)}
+      schema={schema}
       limitPropertyCount={number('limitPropertyCount', 20)}
       hideRoot={boolean('hideRoot', false)}
       expanded={boolean('expanded', true)}
     />
   ))
-  .add('with nested properties', () => (
+  .add('custom schema', () => (
     <JsonSchemaViewer
       css={{ fontFamily: 'monospace' }}
       name={text('name', 'name')}

src/__stories__/__fixtures__/default-schema.json

@@ -11,14 +11,20 @@
       "minimum": 0,
       "maximum": 150
     },
-    "completed_at": {},
+    "completed_at": {
+      "type": "string",
+      "format": "date-time"
+    },
     "items": {
       "type": [
-        "string",
+        "null",
         "array"
       ],
       "items": {
-        "type": "string"
+        "type": [
+          "string",
+          "number"
+        ]
       }
     },
     "email": {
@@ -50,6 +56,23 @@
           }
         }
       ]
+    },
+    "permissions": {
+      "type": [
+        "string",
+        "object"
+      ],
+      "properties": {
+        "ids": {
+          "type": "array",
+          "items": {
+            "type": "integer"
+          }
+        }
+      }
+    },
+    "ref": {
+      "$ref": "#/definitions/error-response"
     }
   },
   "required": [

src/common/Row.tsx

@@ -32,6 +32,7 @@ export const rowStyles = ({ level }: IRowProps) => {
     },
     css`
       user-select none;
+      line-height: 1rem;
 
       &:nth-of-type(even) {
         background-color ${theme.row.evenBg};

src/renderers/renderAllOf.tsx

@@ -11,7 +11,6 @@ export interface IRenderAllProps extends ICommonProps {
 export const renderAllOf = ({
   schemas,
   level,
-  parentName,
   rowElems,
   props,
   toggleExpandRow,

src/renderers/renderProp.tsx

@@ -149,15 +149,15 @@ export const renderProp = ({
 
   if (required || vt) {
     requiredElem = (
-      <div>
+      <Box fontSize="0.75rem">
         {showVt ? <MutedText as="span">{vt}</MutedText> : null}
         {showVt && required ? <MutedText as="span"> + </MutedText> : null}
         {required ? (
           <Box as="span" fontWeight={700}>
             required
           </Box>
         ) : null}
-      </div>
+      </Box>
     );
   }
 
@@ -192,11 +192,15 @@ export const renderProp = ({
             {!isEmpty(typeElems) && <div>{typeElems}</div>}
           </Flex>
 
-          {!isEmpty(prop.description) ? <MutedText fontSize=".875rem">{prop.description}</MutedText> : null}
+          {!isEmpty(prop.description) ? (
+            <MutedText pt={1} fontSize=".875rem">
+              {prop.description}
+            </MutedText>
+          ) : null}
         </Box>
 
         {requiredElem || showInheritedFrom || expanded ? (
-          <Box maxWidth="30rem" textAlign="right" fontSize=".875rem" pr={3}>
+          <Box maxWidth="30rem" textAlign="right" fontSize=".75rem" pr={3}>
             {requiredElem}
 
             {showInheritedFrom ? <MutedText>{`$ref:${prop.__inheritedFrom.name}`}</MutedText> : null}