feat: setup theme

Author: P0lip

.storybook/theme.js

@@ -6,4 +6,41 @@ export { useTheme, ThemeProvider };
 
 export const themes = ['dark', 'light'];
 
-export const zones = {};
+export const zones = {
+  'json-schema-viewer': ({ base }) => base === 'dark'
+    ? {
+      canvas: {
+        bg: '#111',
+        fg: '#fff',
+        error: 'red',
+        muted: 'rgba(255, 255, 255, 0.4)'
+      },
+
+      divider: {
+        bg: '#bababa',
+      },
+
+      row: {
+        hoverBg: '#999',
+        hoverFg: '#222',
+        evenBg: '#333',
+      }
+    } : {
+      canvas: {
+        bg: '#fff',
+        fg: '#111',
+        error: 'red',
+        muted: 'rgba(0, 0, 0, 0.4)'
+      },
+
+      divider: {
+        bg: '#dae1e7',
+      },
+
+      row: {
+        hoverBg: '#888',
+        hoverFg: '#111',
+        evenBg: '#e4e4e4',
+      },
+    },
+};

package.json

@@ -40,6 +40,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@stoplight/json": "1.3.x",
     "lodash": "4.17.x"
   },

src/JsonSchemaViewer.tsx

@@ -1,14 +1,17 @@
 /* @jsx jsx */
 
 import { jsx } from '@emotion/core';
-import { Box, IBox } from '@stoplight/ui-kit';
+import { Omit } from '@stoplight/types';
 import { Component } from 'react';
 import { ErrorMessage } from './common/ErrorMessage';
 import { MutedText } from './common/MutedText';
 import { ISchemaView, SchemaView } from './Schema';
+import { ThemeZone } from './theme';
 import { isSchemaViewerEmpty } from './util/isSchemaViewerEmpty';
 
-export interface IJsonSchemaViewer extends ISchemaView, IBox {}
+export interface IJsonSchemaViewer extends Omit<ISchemaView, 'emptyText'> {
+  emptyText?: string;
+}
 
 export interface IJsonSchemaViewerState {
   error: null | string;
@@ -21,12 +24,13 @@ export class JsonSchemaViewer extends Component<IJsonSchemaViewer, IJsonSchemaVi
 
   // there is no error hook yet, see https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks
   public static getDerivedStateFromError(error: Error): { error: IJsonSchemaViewerState['error'] } {
-    return { error: error.message };
+    return { error: `Error rendering schema. ${error.message}` };
   }
 
   public render() {
     const {
       props: {
+        emptyText = 'No schema defined',
         name,
         schema,
         dereferencedSchema,
@@ -42,38 +46,38 @@ export class JsonSchemaViewer extends Component<IJsonSchemaViewer, IJsonSchemaVi
     } = this;
 
     if (error) {
-      // todo: handle these:
-      /*
-      <Box as="p" p={3} className="u-error">
-        There is an error in your {name} schema definition.
-      </Box>
-      */
-
-      /*<Row className="u-error">{`Error rendering schema. ${e}`}</Row>]*/
-      return <ErrorMessage>{error}</ErrorMessage>;
+      return (
+        <ThemeZone name="json-schema-viewer">
+          <ErrorMessage>{error}</ErrorMessage>
+        </ThemeZone>
+      );
     }
 
     // an empty array or object is still a valid response, schema is ONLY really empty when a combiner type has no information
     if (isSchemaViewerEmpty(schema)) {
-      return <MutedText>No schema defined</MutedText>;
+      return (
+        <ThemeZone name="json-schema-viewer">
+          <MutedText>{emptyText}</MutedText>
+        </ThemeZone>
+      );
     }
 
     return (
-      <Box {...props}>
-        {(
-          <SchemaView
-            defaultExpandedDepth={defaultExpandedDepth}
-            dereferencedSchema={dereferencedSchema}
-            expanded={expanded}
-            hideInheritedFrom={hideInheritedFrom}
-            hideRoot={hideRoot}
-            limitPropertyCount={limitPropertyCount}
-            name={name}
-            schema={schema}
-            schemas={schemas}
-          />
-        ) || <MutedText>No schema defined</MutedText>}
-      </Box>
+      <ThemeZone name="json-schema-viewer">
+        <SchemaView
+          emptyText={emptyText}
+          defaultExpandedDepth={defaultExpandedDepth}
+          dereferencedSchema={dereferencedSchema}
+          expanded={expanded}
+          hideInheritedFrom={hideInheritedFrom}
+          hideRoot={hideRoot}
+          limitPropertyCount={limitPropertyCount}
+          name={name}
+          schema={schema}
+          schemas={schemas}
+          {...props}
+        />
+      </ThemeZone>
     );
   }
 }

src/Schema.tsx

@@ -1,17 +1,18 @@
 /* @jsx jsx */
 
 import { jsx } from '@emotion/core';
+import { Dictionary, ISchema } from '@stoplight/types';
+import { Box, Button, IBox } from '@stoplight/ui-kit';
 import dropRight = require('lodash/dropRight');
 import isEmpty = require('lodash/isEmpty');
-import { Fragment, FunctionComponent, MouseEventHandler, ReactNodeArray, useCallback, useState } from 'react';
-
-import { Dictionary, ISchema } from '@stoplight/types';
-import { Button } from '@stoplight/ui-kit';
+import { FunctionComponent, MouseEventHandler, ReactNodeArray, useCallback, useState } from 'react';
+import { MutedText } from './common/MutedText';
 import { dereferenceSchema } from './dereferenceSchema';
 import { renderSchema } from './renderers/renderSchema';
+import { useTheme } from './theme';
 import { buildAllOfSchema } from './util/buildAllOfSchema';
 
-export interface ISchemaView {
+export interface ISchemaViewProps {
   name?: string;
   dereferencedSchema?: ISchema;
   defaultExpandedDepth?: number;
@@ -21,20 +22,26 @@ export interface ISchemaView {
   hideRoot?: boolean;
   expanded?: boolean;
   hideInheritedFrom?: boolean;
+  emptyText: string;
 }
 
+export interface ISchemaView extends ISchemaViewProps, IBox {}
+
 export const SchemaView: FunctionComponent<ISchemaView> = props => {
   const {
     defaultExpandedDepth = 1,
     dereferencedSchema,
+    emptyText,
     expanded = false,
     hideInheritedFrom = false,
     hideRoot,
     limitPropertyCount = 0,
     schema,
     schemas = {},
+    ...rest
   } = props;
 
+  const theme = useTheme();
   const [showExtra, setShowExtra] = useState<boolean>(false);
   const [expandedRows, setExpandedRows] = useState<Dictionary<boolean>>({ all: expanded });
 
@@ -56,15 +63,15 @@ export const SchemaView: FunctionComponent<ISchemaView> = props => {
     !Object.keys(actualSchema).length ||
     (actualSchema.properties && !Object.keys(actualSchema.properties).length)
   ) {
-    return null;
+    return <MutedText>{emptyText}</MutedText>;
   }
 
   if (actualSchema.allOf) {
-    const props = actualSchema.allOf;
+    const schemaProps = actualSchema.allOf;
 
-    if (actualSchema.type) props.push({ type: actualSchema.type });
+    if (actualSchema.type) schemaProps.push({ type: actualSchema.type });
 
-    actualSchema = buildAllOfSchema(props);
+    actualSchema = buildAllOfSchema(schemaProps);
   }
 
   let rowElems: ReactNodeArray = [];
@@ -90,17 +97,17 @@ export const SchemaView: FunctionComponent<ISchemaView> = props => {
   }
 
   if (rowElems.length === 0) {
-    return null;
+    return <MutedText>{emptyText}</MutedText>;
   }
 
   return (
-    <Fragment>
+    <Box backgroundColor={theme.canvas.bg} color={theme.canvas.fg} {...rest}>
       {rowElems}
       {showExtra || propOverflowCount > 0 ? (
         <Button onClick={toggleShowExtra}>
           {showExtra ? 'collapse' : `...show ${propOverflowCount} more properties`}
         </Button>
       ) : null}
-    </Fragment>
+    </Box>
   );
 };

src/__stories__/JsonSchemaViewer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { boolean, number, object, text } from '@storybook/addon-knobs';
+import { boolean, number, object, text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
 import { JsonSchemaViewer } from '../JsonSchemaViewer';
@@ -22,13 +22,16 @@ const schema = {
   },
 };
 
-storiesOf('JsonSchemaViewer', module).add('with text', () => (
-  <JsonSchemaViewer
-    name={text('name', 'name')}
-    schemas={object('schemas', {})}
-    schema={object('schema', schema)}
-    limitPropertyCount={number('limitPropertyCount', 20)}
-    hideRoot={boolean('hideRoot', false)}
-    expanded={boolean('expanded', true)}
-  />
-));
+storiesOf('JsonSchemaViewer', module)
+  .addDecorator(withKnobs)
+  .add('with text', () => (
+    <JsonSchemaViewer
+      css={{ fontFamily: 'monospace' }}
+      name={text('name', 'name')}
+      schemas={object('schemas', {})}
+      schema={object('schema', schema)}
+      limitPropertyCount={number('limitPropertyCount', 20)}
+      hideRoot={boolean('hideRoot', false)}
+      expanded={boolean('expanded', true)}
+    />
+  ));

src/common/ErrorMessage.tsx

@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/core';
 import { Box, IBox } from '@stoplight/ui-kit';
 import { FunctionComponent } from 'react';
+import { useTheme } from '../theme';
 
 export const ErrorMessage: FunctionComponent<IErrorMessage> = props => {
   const { children, ...rest } = props;
@@ -20,9 +21,8 @@ export interface IErrorMessageProps {}
 export interface IErrorMessage extends IErrorMessageProps, IBox {}
 
 export const errorMessageStyles = () => {
-  // const theme = useTheme();
+  const theme = useTheme();
   return {
-    // canvas.error
-    color: 'red',
+    color: theme.canvas.error,
   };
 };

src/common/MutedText.tsx

@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/core';
 import { Box, IBox } from '@stoplight/ui-kit';
 import { FunctionComponent } from 'react';
+import { useTheme } from '../theme';
 
 export const MutedText: FunctionComponent<IMutedText> = props => {
   const { children, ...rest } = props;
@@ -20,9 +21,8 @@ export interface IMutedTextProps {}
 export interface IMutedText extends IMutedTextProps, IBox {}
 
 export const mutedTextStyles = () => {
-  // const theme = useTheme();
+  const theme = useTheme();
   return {
-    // canvas.muted
-    color: 'rgba(19, 15, 33, 0.6)',
+    color: theme.canvas.muted,
   };
 };

src/common/Row.tsx

@@ -3,6 +3,8 @@
 import { css, jsx } from '@emotion/core';
 import { Box, IBox } from '@stoplight/ui-kit';
 import { FunctionComponent } from 'react';
+import { DEFAULT_PADDING, GUTTER_WIDTH } from '../consts';
+import { useTheme } from '../theme';
 
 export const Row: FunctionComponent<IRow> = props => {
   const { children, level, ...rest } = props;
@@ -21,22 +23,24 @@ export interface IRowProps {
 
 export interface IRow extends IRowProps, IBox {}
 
-const $gutterWidth = 15;
-
 export const rowStyles = ({ level }: IRowProps) => {
+  const theme = useTheme();
+
   return [
     {
-      ...(level !== undefined && { paddingLeft: 20 + $gutterWidth * level }),
+      ...(level !== undefined && { paddingLeft: DEFAULT_PADDING + GUTTER_WIDTH * level }),
     },
     css`
       user-select none;
 
-      &:nth-child(even) {
-        background-color grey;
+     &:nth-of-type(even) {
+        background-color ${theme.row.evenBg};
+        color ${theme.row.evenFg || theme.canvas.fg};
       }
 
       &:hover {
-       background-color #f3f3f3;
+        background-color ${theme.row.hoverBg};
+        color ${theme.row.hoverFg || theme.canvas.fg};
       }
 
       i {

src/common/RowType.tsx

@@ -0,0 +1,2 @@
+export const GUTTER_WIDTH = 15;
+export const DEFAULT_PADDING = 20;