diff --git a/.storybook/theme.js b/.storybook/theme.js
index b354be39..5df71d03 100644
--- a/.storybook/theme.js
+++ b/.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',
diff --git a/README.md b/README.md
index 01145f43..e1ca5bcf 100644
--- a/README.md
+++ b/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
+
+
+
```
+More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).
+
### Contributing
1. Clone repo.
diff --git a/src/SchemaView.tsx b/src/SchemaView.tsx
index 2cd3cda4..d902811f 100644
--- a/src/SchemaView.tsx
+++ b/src/SchemaView.tsx
@@ -102,7 +102,7 @@ export const SchemaView: FunctionComponent = props => {
return (
{rowElems}
- {showExtra || propOverflowCount > 0 ? (
+ {showExtra || (limitPropertyCount > 0 && propOverflowCount > 0) ? (
diff --git a/src/__tests__/SchemaView.spec.tsx b/src/__tests__/SchemaView.spec.tsx
index b4d72b30..e88ca333 100644
--- a/src/__tests__/SchemaView.spec.tsx
+++ b/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();
+
+ expect(wrapper.find(Button)).not.toExist();
+ });
+
test('should toggle showExtra on btn click', () => {
const wrapper = shallow();
diff --git a/src/index.ts b/src/index.ts
index 4fd5b689..d84de607 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
export * from './JsonSchemaViewer';
+export { ThemeProvider } from './theme';
diff --git a/src/theme.ts b/src/theme.ts
index af0f3ede..d8d552cc 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -3,4 +3,4 @@ import { IJSONSchemaViewerTheme } from './types';
export type themeZones = 'json-schema-viewer';
-export const { useTheme, ThemeZone } = createThemedModule();
+export const { useTheme, ThemeZone, ThemeProvider } = createThemedModule();
diff --git a/src/themes/dark.ts b/src/themes/dark.ts
new file mode 100644
index 00000000..3d97f07c
--- /dev/null
+++ b/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',
+ },
+};
diff --git a/src/themes/index.ts b/src/themes/index.ts
new file mode 100644
index 00000000..4100599d
--- /dev/null
+++ b/src/themes/index.ts
@@ -0,0 +1,2 @@
+export * from './dark';
+export * from './light';
diff --git a/src/themes/light.ts b/src/themes/light.ts
new file mode 100644
index 00000000..90fdc112
--- /dev/null
+++ b/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',
+ },
+};
diff --git a/src/types.ts b/src/types.ts
index 2c805812..4eb71805 100644
--- a/src/types.ts
+++ b/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;
};