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; };