fix: readme + minor fixes (#7) [SL-271]

* chore: update readme + minor fixes

* test: cover show extra btn

* feat: export themes

Author: P0lip

.storybook/theme.js

@@ -30,7 +30,7 @@ export const zones = {
           types: {
             object: '#83c1ff',
             array: '#7dff75',
-            allOff: '#b89826',
+            allOf: '#b89826',
             oneOf: '#b89826',
             anyOf: '#b89826',
             null: '#ff7f50',
@@ -63,7 +63,7 @@ export const zones = {
           types: {
             object: '#00f',
             array: '#008000',
-            allOff: '#B8860B',
+            allOf: '#B8860B',
             oneOf: '#B8860B',
             anyOf: '#B8860B',
             null: '#ff7f50',

README.md

@@ -9,8 +9,11 @@ A JSON Schema viewer React component
 
 ### Features
 
-- **Awesome**: It is.
-- .. more features
+- Full JSON Schema Draft 4 support, including `oneOf` and `anyOf` combiner properties
+- Renders complicated nested objects to any depth
+- Renders validation properties and markdown descriptions
+- Theme-able
+- Collapsible
 
 ### Installation
 
@@ -23,12 +26,17 @@ yarn add @stoplight/json-schema-viewer
 
 ### Usage
 
-```ts
-import { Library } from "@stoplight/json-schema-viewer";
+```jsx
+import { JsonSchemaViewer, ThemeProvider } from "@stoplight/json-schema-viewer";
+import { dark } from "@stoplight/json-schema-viewer/themes";
 
-// ...example
+<ThemeProvider theme={dark}>
+  <JsonSchemaViewer schemas={schemas} schema={schema} expanded />
+</ThemeProvider>
 ```
 
+More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).
+
 ### Contributing
 
 1. Clone repo.

src/SchemaView.tsx

@@ -102,7 +102,7 @@ export const SchemaView: FunctionComponent<ISchemaView> = props => {
   return (
     <Box backgroundColor={theme.canvas.bg} color={theme.canvas.fg} {...rest}>
       {rowElems}
-      {showExtra || propOverflowCount > 0 ? (
+      {showExtra || (limitPropertyCount > 0 && propOverflowCount > 0) ? (
         <Button onClick={toggleShowExtra}>
           {showExtra ? 'collapse' : `...show ${propOverflowCount} more properties`}
         </Button>

src/__tests__/SchemaView.spec.tsx

@@ -54,6 +54,12 @@ describe('SchemaView', () => {
     expect(wrapper.children()).toHaveLength(3);
   });
 
+  test('should hide expand button when limitPropertyCount <= 0', () => {
+    const wrapper = shallow(<SchemaView emptyText="" schema={schema} schemas={{}} limitPropertyCount={0} />);
+
+    expect(wrapper.find(Button)).not.toExist();
+  });
+
   test('should toggle showExtra on btn click', () => {
     const wrapper = shallow(<SchemaView emptyText="" schema={schema} schemas={{}} limitPropertyCount={2} />);
 

src/index.ts

@@ -1 +1,2 @@
 export * from './JsonSchemaViewer';
+export { ThemeProvider } from './theme';

src/theme.ts

@@ -3,4 +3,4 @@ import { IJSONSchemaViewerTheme } from './types';
 
 export type themeZones = 'json-schema-viewer';
 
-export const { useTheme, ThemeZone } = createThemedModule<themeZones, IJSONSchemaViewerTheme>();
+export const { useTheme, ThemeZone, ThemeProvider } = createThemedModule<themeZones, IJSONSchemaViewerTheme>();

src/themes/dark.ts

@@ -0,0 +1,37 @@
+import { IJSONSchemaViewerTheme } from '../types';
+
+export const dark: IJSONSchemaViewerTheme = {
+  base: 'dark',
+
+  canvas: {
+    bg: '#111',
+    fg: '#fff',
+    error: 'red',
+    muted: 'rgba(255, 255, 255, 0.6)',
+  },
+
+  divider: {
+    bg: '#bababa',
+  },
+
+  row: {
+    hoverBg: '#333',
+    hoverFg: '#fff',
+    evenBg: '#232222',
+  },
+
+  types: {
+    object: '#83c1ff',
+    array: '#7dff75',
+    allOf: '#b89826',
+    oneOf: '#b89826',
+    anyOf: '#b89826',
+    null: '#ff7f50',
+    integer: '#e03b36',
+    number: '#e03b36',
+    boolean: '#ff69b4',
+    binary: '#8ccda3',
+    string: '#19c5a0',
+    $ref: '#a359e2',
+  },
+};

src/themes/index.ts

@@ -0,0 +1,2 @@
+export * from './dark';
+export * from './light';

src/themes/light.ts

@@ -0,0 +1,37 @@
+import { IJSONSchemaViewerTheme } from '../types';
+
+export const light: IJSONSchemaViewerTheme = {
+  base: 'light',
+
+  canvas: {
+    bg: '#fff',
+    fg: '#111',
+    error: 'red',
+    muted: 'rgba(0, 0, 0, 0.5)',
+  },
+
+  divider: {
+    bg: '#dae1e7',
+  },
+
+  row: {
+    hoverBg: '#e9e9e9',
+    hoverFg: '#111',
+    evenBg: '#f3f3f3',
+  },
+
+  types: {
+    object: '#00f',
+    array: '#008000',
+    allOf: '#B8860B',
+    oneOf: '#B8860B',
+    anyOf: '#B8860B',
+    null: '#ff7f50',
+    integer: '#a52a2a',
+    number: '#a52a2a',
+    boolean: '#ff69b4',
+    binary: '#66cdaa',
+    string: '#008080',
+    $ref: '#8a2be2',
+  },
+};

src/types.ts

@@ -44,7 +44,8 @@ export interface IJSONSchemaViewerTheme extends ICustomTheme {
     integer: string;
     number: string;
     boolean: string;
-    binary: boolean;
+    binary: string;
+    string: string;
     $ref: string;
   };