Skip to content

Commit c29e7b3

Browse files
lottamuslottamus
authored
Merge pull request #19 from stoplightio/v2
BREAKING CHANGE: UI-Kit v2
2 parents 46abcdc + acd5e91 commit c29e7b3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+4517
-4459
lines changed

‎.storybook/config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
import '@stoplight/storybook-config/config';
1+
import "@stoplight/storybook-config/config";
2+
3+
import "../src/__stories__/_styles.scss";

‎.storybook/preview-head.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
1+
<!--NEED TO SET BODY FONT SIZE TO UI-KIT BASE SINCE WE USE REMS -->
22
<style>
3-
html {
4-
font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5-
}
6-
html, body {
7-
padding: 0;
8-
margin: 0;
9-
}
3+
html,
4+
body {
5+
padding: 0;
6+
margin: 0;
7+
8+
font-size: 14px;
9+
}
10+
11+
#root {
12+
height: 100%;
13+
}
1014
</style>

‎.storybook/theme.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎.storybook/webpack.config.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,5 @@ const defaultConfig = require('@stoplight/storybook-config/webpack.config');
33
module.exports = (baseConfig, env, config) => {
44
config = defaultConfig(baseConfig, env, config);
55

6-
// ... further customize if needed
7-
86
return config;
97
};

‎README.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ A JSON Schema viewer React component
1212
- Full JSON Schema Draft 4 support, including `oneOf` and `anyOf` combiner properties
1313
- Renders complicated nested objects to any depth
1414
- Renders validation properties and markdown descriptions
15-
- Capable of linking resolved $refs
15+
- Capable of linking resolved \$refs
1616
- Theme-able
1717
- Collapsible
1818

@@ -28,12 +28,18 @@ yarn add @stoplight/json-schema-viewer
2828
### Usage
2929

3030
```jsx
31-
import { JsonSchemaViewer, ThemeProvider } from "@stoplight/json-schema-viewer";
32-
import { dark } from "@stoplight/json-schema-viewer/themes";
33-
34-
<ThemeProvider theme={dark}>
35-
<JsonSchemaViewer dereferencedSchema={dereferencedSchema} schema={schema} />
36-
</ThemeProvider>
31+
// index.jsx
32+
import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";
33+
34+
<JsonSchemaViewer
35+
name="Todos Model"
36+
dereferencedSchema={schemaWithoutRefs}
37+
schema={schemaWithRefs}
38+
expanded={true}
39+
hideTopBar={false}
40+
emptyText="No schema defined"
41+
defaultExpandedDepth={0}
42+
/>;
3743
```
3844

3945
More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).

‎jest.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
module.exports = {
2-
preset: '@stoplight/scripts',
3-
testEnvironment: 'jsdom',
4-
setupTestFrameworkScriptFile: './setupTests.ts',
5-
snapshotSerializers: ['enzyme-to-json/serializer'],
2+
preset: "@stoplight/scripts",
3+
testEnvironment: "jsdom",
4+
setupFilesAfterEnv: ["./setupTests.ts"],
5+
snapshotSerializers: ["enzyme-to-json/serializer"],
66
moduleNameMapper: {
7-
'\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
8-
},
7+
"\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
8+
}
99
};

‎package.json‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,48 +23,64 @@
2323
"build": "sl-scripts build",
2424
"build.docs": "build-storybook -c .storybook -o docs-auto",
2525
"commit": "git-cz",
26-
"lint": "sl-scripts lint",
26+
"lint": "tslint -c tslint.json 'src/**/*.ts?'",
2727
"lint.fix": "yarn lint --fix",
2828
"release": "sl-scripts release",
2929
"release.docs": "sl-scripts release:docs",
3030
"release.dryRun": "sl-scripts release --dry-run --debug",
3131
"storybook": "start-storybook -p 9001",
32-
"test": "sl-scripts test",
32+
"test": "jest",
3333
"test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
3434
"test.update": "yarn test --updateSnapshot",
3535
"test.watch": "yarn test --watch"
3636
},
3737
"peerDependencies": {
38-
"@stoplight/ui-kit": ">=1.49",
39-
"react": ">=16.7.0-alpha.1",
40-
"react-dom": ">=16.7.0-alpha.1"
38+
"@stoplight/markdown-viewer": "3.x.x",
39+
"@stoplight/tree-list": "4.x.x",
40+
"@stoplight/ui-kit": "2.x.x",
41+
"lodash": "4.x.x",
42+
"mobx": "5.x.x",
43+
"react": ">=16.8",
44+
"react-dom": ">=16.8"
4145
},
4246
"dependencies": {
43-
"@emotion/core": "^10.0.10",
44-
"@fortawesome/free-solid-svg-icons": "5.6.x",
4547
"@stoplight/json": "1.9.x",
46-
"@stoplight/tree-list": "^3.6.0",
47-
"@types/json-schema": "^7.0.3",
48-
"lodash": "4.17.x",
49-
"mobx": "^5.9.4",
50-
"json-schema-merge-allof": "^0.6.0"
48+
"classnames": "^2.2.6",
49+
"json-schema-merge-allof": "^0.6.0",
50+
"mobx-react-lite": "^1.3.1",
51+
"pluralize": "^7.0.0",
52+
"react-error-boundary": "^1.2.5"
5153
},
5254
"devDependencies": {
5355
"@sambego/storybook-state": "^1.3.4",
54-
"@stoplight/scripts": "4.1.0",
55-
"@stoplight/storybook-config": "1.4.0",
56+
"@stoplight/markdown-viewer": "^3.0.0",
57+
"@stoplight/scripts": "5.1.0",
58+
"@stoplight/storybook-config": "^2.0.2",
59+
"@stoplight/tree-list": "^4.0.0",
5660
"@stoplight/types": "4.1.0",
57-
"@stoplight/ui-kit": "1.49.3",
61+
"@stoplight/ui-kit": "^2.0.0",
62+
"@types/classnames": "^2.2.7",
5863
"@types/enzyme": "3.9.1",
64+
"@types/jest": "^24.0.12",
65+
"@types/json-schema": "^7.0.3",
66+
"@types/node": "^11.13.8",
67+
"@types/pluralize": "^0.0.29",
5968
"@types/react": "16.8.12",
6069
"@types/react-dom": "16.8.3",
70+
"copyfiles": "^2.1.0",
6171
"enzyme": "3.9.0",
6272
"enzyme-adapter-react-16": "1.12.1",
6373
"enzyme-to-json": "3.x.x",
74+
"jest": "^24.7.1",
6475
"jest-enzyme": "7.0.2",
76+
"lodash": "^4.17.11",
77+
"mobx": "^5.9.4",
6578
"react": "16.8.6",
6679
"react-dom": "16.8.6",
67-
"typescript": "3.4.2"
80+
"ts-jest": "^24.0.2",
81+
"tslint": "^5.16.0",
82+
"tslint-config-stoplight": "^1.2.0",
83+
"typescript": "3.4.5"
6884
},
6985
"lint-staged": {
7086
"*.{ts,tsx}$": [

‎src/__mocks__/theme.ts‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎src/__stories__/JsonSchemaViewer.tsx‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import { State, Store } from '@sambego/storybook-state';
44
import { boolean, number, object, text, withKnobs } from '@storybook/addon-knobs';
55
import { storiesOf } from '@storybook/react';
6-
import { JsonSchemaViewer } from '../components/JsonSchemaViewer';
6+
import { JsonSchemaViewer } from '../components';
77

88
import { JSONSchema4 } from 'json-schema';
99
import * as allOfSchemaResolved from '../__fixtures__/allOf/allOf-resolved.json';
@@ -12,17 +12,20 @@ import * as schema from '../__fixtures__/default-schema.json';
1212
import * as schemaWithRefs from '../__fixtures__/ref/original.json';
1313
import * as dereferencedSchema from '../__fixtures__/ref/resolved.json';
1414
import * as stressSchema from '../__fixtures__/stress-schema.json';
15+
import { Wrapper } from './utils/Wrapper';
1516

1617
storiesOf('JsonSchemaViewer', module)
1718
.addDecorator(withKnobs)
1819
.add('default', () => (
19-
<JsonSchemaViewer
20-
name={text('name', 'my schema')}
21-
schema={schema as JSONSchema4}
22-
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
23-
expanded={boolean('expanded', false)}
24-
hideTopBar={boolean('hideTopBar', false)}
25-
/>
20+
<Wrapper>
21+
<JsonSchemaViewer
22+
name={text('name', 'my schema')}
23+
schema={schema as JSONSchema4}
24+
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
25+
expanded={boolean('expanded', false)}
26+
hideTopBar={boolean('hideTopBar', false)}
27+
/>
28+
</Wrapper>
2629
))
2730
.add('with dereferenced schema', () => {
2831
const store = new Store<{ selected: string[] }>({
@@ -31,51 +34,61 @@ storiesOf('JsonSchemaViewer', module)
3134

3235
return (
3336
<State store={store}>
34-
<JsonSchemaViewer
35-
name={text('name', 'name')}
36-
schema={schemaWithRefs as JSONSchema4}
37-
dereferencedSchema={dereferencedSchema as JSONSchema4}
38-
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
39-
expanded={boolean('expanded', true)}
40-
hideTopBar={boolean('hideTopBar', false)}
41-
/>
37+
<Wrapper>
38+
<JsonSchemaViewer
39+
name={text('name', 'name')}
40+
schema={schemaWithRefs as JSONSchema4}
41+
dereferencedSchema={dereferencedSchema as JSONSchema4}
42+
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
43+
expanded={boolean('expanded', true)}
44+
hideTopBar={boolean('hideTopBar', false)}
45+
/>
46+
</Wrapper>
4247
</State>
4348
);
4449
})
4550
.add('custom schema', () => (
46-
<JsonSchemaViewer
47-
name={text('name', 'my schema')}
48-
schema={object('schema', {})}
49-
expanded={boolean('expanded', true)}
50-
hideTopBar={boolean('hideTopBar', false)}
51-
/>
51+
<Wrapper>
52+
<JsonSchemaViewer
53+
name={text('name', 'my schema')}
54+
schema={object('schema', {})}
55+
expanded={boolean('expanded', true)}
56+
hideTopBar={boolean('hideTopBar', false)}
57+
/>
58+
</Wrapper>
5259
))
5360
.add('stress-test schema', () => (
54-
<JsonSchemaViewer
55-
name={text('name', 'my stress schema')}
56-
schema={stressSchema as JSONSchema4}
57-
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
58-
expanded={boolean('expanded', false)}
59-
hideTopBar={boolean('hideTopBar', false)}
60-
/>
61+
<Wrapper>
62+
<JsonSchemaViewer
63+
name={text('name', 'my stress schema')}
64+
schema={stressSchema as JSONSchema4}
65+
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
66+
expanded={boolean('expanded', false)}
67+
hideTopBar={boolean('hideTopBar', false)}
68+
/>
69+
</Wrapper>
6170
))
6271
.add('allOf-schema', () => (
63-
<JsonSchemaViewer
64-
schema={allOfSchema as JSONSchema4}
65-
dereferencedSchema={allOfSchemaResolved as JSONSchema4}
66-
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
67-
expanded={boolean('expanded', false)}
68-
hideTopBar={boolean('hideTopBar', false)}
69-
/>
72+
<Wrapper>
73+
<JsonSchemaViewer
74+
schema={allOfSchema as JSONSchema4}
75+
dereferencedSchema={allOfSchemaResolved as JSONSchema4}
76+
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
77+
expanded={boolean('expanded', false)}
78+
hideTopBar={boolean('hideTopBar', false)}
79+
/>
80+
</Wrapper>
7081
))
7182
.add('error boundary', () => (
72-
<JsonSchemaViewer
73-
name={text('name', 'throw me an error!')}
74-
// @ts-ignore
75-
schema={null}
76-
onError={(error: any) => console.log('You can hook into the onError handler too!', error)}
77-
expanded={boolean('expanded', false)}
78-
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
79-
hideTopBar={boolean('hideTopBar', false)}
80-
/>
83+
<Wrapper>
84+
<JsonSchemaViewer
85+
name={text('name', 'throw me an error!')}
86+
// @ts-ignore
87+
schema={null}
88+
onError={(error: any) => console.log('You can hook into the onError handler too!', error)}
89+
expanded={boolean('expanded', false)}
90+
defaultExpandedDepth={number('defaultExpandedDepth', 2)}
91+
hideTopBar={boolean('hideTopBar', false)}
92+
/>
93+
</Wrapper>
8194
));

‎src/__stories__/_styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "~@stoplight/tree-list/styles/_tree-list.scss";
2+
@import "~@stoplight/ui-kit/styles/_ui-kit.scss";

0 commit comments

Comments
 (0)