style: fix types

Author: P0lip

.storybook/theme.js

@@ -23,7 +23,22 @@ export const zones = {
       row: {
         hoverBg: '#999',
         hoverFg: '#222',
-        evenBg: '#333',
+        evenBg: '#232222',
+      },
+
+      types: {
+        object: '#00f',
+        array: '#008000',
+        allOff: '#B8860B',
+        oneOf: '#B8860B',
+        anyOf: '#B8860B',
+        null: '#ff7f50',
+        integer: '#a52a2a',
+        number: '#a52a2a',
+        boolean: '#ff69b4',
+        binary: '#66cdaa',
+        string: '#008080',
+        $ref: '#8a2be2',
       }
     } : {
       canvas: {
@@ -42,5 +57,21 @@ export const zones = {
         hoverFg: '#111',
         evenBg: '#e4e4e4',
       },
+
+
+      types: {
+        object: '#00f',
+        array: '#008000',
+        allOff: '#B8860B',
+        oneOf: '#B8860B',
+        anyOf: '#B8860B',
+        null: '#ff7f50',
+        integer: '#a52a2a',
+        number: '#a52a2a',
+        boolean: '#ff69b4',
+        binary: '#66cdaa',
+        string: '#008080',
+        $ref: '#8a2be2',
+      },
     },
 };

src/__stories__/__fixtures__/default-schema.json

@@ -1,16 +1,60 @@
 {
+  "title": "User",
+  "type": "object",
   "properties": {
-    "data": {
+    "name": {
+      "type": "string",
+      "description": "The user's full name."
+    },
+    "age": {
+      "type": "number",
+      "minimum": 0,
+      "maximum": 150
+    },
+    "completed_at": {},
+    "items": {
+      "type": [
+        "string",
+        "array"
+      ],
       "items": {
-        "$ref": "#/definitions/Gif"
-      },
-      "type": "array"
+        "type": "string"
+      }
     },
-    "meta": {
-      "$ref": "#/definitions/Meta"
+    "email": {
+      "type": "string",
+      "format": "email",
+      "minLength": 2
     },
-    "pagination": {
-      "$ref": "#/definitions/Pagination"
+    "plan": {
+      "anyOf": [
+        {
+          "type": "object",
+          "properties": {
+            "foo": {
+              "type": "string"
+            },
+            "bar": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "foo",
+            "bar"
+          ]
+        },
+        {
+          "type": "array",
+          "items": {
+            "type": "integer"
+          }
+        }
+      ]
     }
-  }
+  },
+  "required": [
+    "name",
+    "age",
+    "completed_at"
+  ]
 }

src/common/RowType.tsx

@@ -0,0 +1,31 @@
+/* @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import { Box, IBox } from '@stoplight/ui-kit';
+import { FunctionComponent } from 'react';
+import { useTheme } from '../theme';
+
+export const RowType: FunctionComponent<IRowType> = props => {
+  const { children, type, ...rest } = props;
+  const css = rowStyles({ type });
+
+  return (
+    <Box css={css} {...rest}>
+      {children}
+    </Box>
+  );
+};
+
+export interface IRowTypeProps {
+  type?: string;
+}
+
+export interface IRowType extends IRowTypeProps, IBox {}
+
+export const rowStyles = ({ type }: IRowTypeProps) => {
+  const theme = useTheme();
+
+  return {
+    ...(type !== undefined && type in theme.types && { color: theme.types[type] }),
+  };
+};

src/renderers/renderProp.tsx

@@ -1,6 +1,6 @@
 /* @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Box, Flex, Icon, IconLibrary, Textarea } from '@stoplight/ui-kit';
+import { Box, Flex, Icon, IconLibrary } from '@stoplight/ui-kit';
 import has = require('lodash/has');
 import isEmpty = require('lodash/isEmpty');
 import isString = require('lodash/isString');
@@ -11,6 +11,7 @@ import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
 import { ErrorMessage } from '../common/ErrorMessage';
 import { MutedText } from '../common/MutedText';
 import { Row } from '../common/Row';
+import { RowType } from '../common/RowType';
 import { PropValidations } from '../PropValidations';
 import { useTheme } from '../theme';
 import { ICommonProps } from '../types';
@@ -116,9 +117,9 @@ export const renderProp = ({
   if (!isEmpty(types)) {
     typeElems = types.reduce((acc: ReactNode[], type: string, i) => {
       acc.push(
-        <span key={i}>
+        <RowType as="span" type={type} key={i}>
           {type === 'array' && childPropType && childPropType !== 'array' ? `array[${childPropType}]` : type}
-        </span>
+        </RowType>
       );
 
       if (types[i + 1]) {
@@ -132,7 +133,7 @@ export const renderProp = ({
       return acc;
     }, []);
   } else if (prop.$ref) {
-    typeElems.push(<span key="prop-ref">{`{${prop.$ref}}`}</span>);
+    typeElems.push(<RowType as="span" type="$ref" key="prop-ref">{`{${prop.$ref}}`}</RowType>);
   } else if (prop.__error || isBasic) {
     typeElems.push(
       <Box as="span" key="no-types" color={theme.canvas.error}>
@@ -166,6 +167,7 @@ export const renderProp = ({
     rowElems.push(
       <Row
         as={Flex}
+        alignItems="center"
         position="relative"
         py={2}
         key={position}
@@ -178,7 +180,7 @@ export const renderProp = ({
         }}
       >
         {expandable ? (
-          <Flex justifyContent="center" mt={1} pl="0.5rem" mr="0.5rem" ml="-1.5rem" width="1rem">
+          <Flex justifyContent="center" pl="0.5rem" mr="0.5rem" ml="-1.5rem" width="1rem">
             <Icon size="1x" icon={expanded ? faCaretDown : faCaretRight} />
           </Flex>
         ) : null}
@@ -190,7 +192,7 @@ export const renderProp = ({
             {!isEmpty(typeElems) && <div>{typeElems}</div>}
           </Flex>
 
-          {!isEmpty(prop.description) ? <MutedText as={Textarea} fontSize=".875rem" value={prop.description} /> : null}
+          {!isEmpty(prop.description) ? <MutedText fontSize=".875rem">{prop.description}</MutedText> : null}
         </Box>
 
         {requiredElem || showInheritedFrom || expanded ? (

src/types.ts

@@ -34,6 +34,20 @@ export interface IJSONSchemaViewerTheme extends ICustomTheme {
     evenBg: string;
   };
 
+  types: {
+    array: string;
+    object: string;
+    allOf: string;
+    oneOf: string;
+    anyOf: string;
+    null: string;
+    integer: string;
+    number: string;
+    boolean: string;
+    binary: boolean;
+    $ref: string;
+  };
+
   divider: {
     bg: string;
   };