feat: upgrade deps

Author: lottamus

.storybook/addons.js

@@ -1,7 +1 @@
-require('@storybook/addon-knobs/register');
-
-require('@storybook/addon-actions/register');
-
-require('@storybook/addon-links/register');
-
-require('@storybook/addon-options/register');
+import '@stoplight/storybook-config/addons';

.storybook/config.js

@@ -1,31 +1 @@
-import * as React from 'react';
-import { withOptions } from '@storybook/addon-options';
-import { addDecorator, configure } from '@storybook/react';
-
-import '@stoplight/tree-list/styles/_tree-list.scss';
-import '@stoplight/ui-kit/styles/_ui-kit.scss';
-import { ThemeContainer } from '@stoplight/ui-kit';
-
-addDecorator(
-  withOptions({
-    name: 'Stoplight Json Schema Viewer',
-    url: 'https://github.com/stoplightio/json-schema-viewer',
-    goFullScreen: false,
-    showStoriesPanel: true,
-    showAddonPanel: true,
-    showSearchBox: false,
-    addonPanelInRight: true,
-    sortStoriesByKind: true,
-    hierarchySeparator: /\//,
-    hierarchyRootSeparator: /:/,
-    selectedAddonPanel: undefined,
-  }),
-);
-
-function loadStories() {
-  require('@project/stories');
-}
-
-addDecorator(story => <ThemeContainer>{story()}</ThemeContainer>);
-
-configure(loadStories, module);
+import "@stoplight/storybook-config/config";

.storybook/webpack.config.js

@@ -1,62 +1,7 @@
-const path = require('path');
-const PackageImporter = require('node-sass-package-importer');
+const defaultConfig = require('@stoplight/storybook-config/webpack.config');
 
-const cwd = process.cwd();
-
-module.exports = ({ config }) => {
-  config.context = cwd;
-  config.mode = 'development';
-
-  config.resolve.alias['@project/stories'] = require.resolve('src/__stories__/index.ts', { paths: [cwd] });
-  config.resolve.extensions.push('.ts', '.tsx', '.js');
-  config.resolve.modules = [...(config.resolve.modules || []), path.resolve('./')];
-
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    include: [path.resolve(cwd, 'src')],
-    use: [
-      {
-        loader: require.resolve('ts-loader'),
-        options: {
-          onlyCompileBundledFiles: true, // https://github.com/TypeStrong/ts-loader#onlycompilebundledfiles-boolean-defaultfalse
-        },
-      },
-    ],
-  });
-
-  config.module.rules.push({
-    test: /\.scss$/,
-    use: [
-      {
-        loader: 'style-loader',
-        options: {
-          sourceMap: true,
-        },
-      },
-      {
-        loader: 'css-loader',
-        options: {
-          sourceMap: true,
-        },
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          sourceMap: true,
-          ident: 'postcss',
-          plugins: loader => [require('postcss-import'), require('autoprefixer')],
-        },
-      },
-      {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: true,
-          importer: [PackageImporter()],
-        },
-      },
-    ],
-    include: path.resolve(__dirname, '../'),
-  });
+module.exports = (baseConfig, env, config) => {
+  config = defaultConfig(baseConfig, env, config);
 
   return config;
 };

README.md

@@ -12,7 +12,7 @@ A JSON Schema viewer React component
 - 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
-- Capable of linking resolved $refs
+- Capable of linking resolved \$refs
 - Theme-able
 - Collapsible
 
@@ -28,12 +28,17 @@ yarn add @stoplight/json-schema-viewer
 ### Usage
 
 ```jsx
-import { JsonSchemaViewer, ThemeProvider } from "@stoplight/json-schema-viewer";
-import { dark } from "@stoplight/json-schema-viewer/themes";
-
-<ThemeProvider theme={dark}>
-  <JsonSchemaViewer dereferencedSchema={dereferencedSchema} schema={schema} />
-</ThemeProvider>
+import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";
+
+<JsonSchemaViewer
+  name="Todos Model"
+  dereferencedSchema={schemaWithoutRefs}
+  schema={schemaWithRefs}
+  expanded={true}
+  hideTopBar={false}
+  emptyText="No schema defined"
+  defaultExpandedDepth={0}
+/>;
 ```
 
 More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).

jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  preset: '@stoplight/scripts',
-  testEnvironment: 'jsdom',
-  setupTestFrameworkScriptFile: './setupTests.ts',
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  preset: "@stoplight/scripts",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["./setupTests.ts"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
   moduleNameMapper: {
-    '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
-  },
+    "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
+  }
 };

package.json

@@ -23,41 +23,40 @@
     "build": "sl-scripts build",
     "build.docs": "build-storybook -c .storybook -o docs-auto",
     "commit": "git-cz",
-    "lint": "sl-scripts lint",
+    "lint": "tslint -c tslint.json 'src/**/*.ts?'",
     "lint.fix": "yarn lint --fix",
     "release": "sl-scripts release",
     "release.docs": "sl-scripts release:docs",
     "release.dryRun": "sl-scripts release --dry-run --debug",
     "storybook": "start-storybook -p 9001",
-    "test": "sl-scripts test",
+    "test": "jest",
     "test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
     "test.update": "yarn test --updateSnapshot",
     "test.watch": "yarn test --watch"
   },
   "peerDependencies": {
-    "@stoplight/tree-list": ">=4",
-    "@stoplight/ui-kit": ">=2",
     "mobx": "5.x.x",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "dependencies": {
     "@stoplight/json": "1.9.x",
-    "@stoplight/markdown-viewer": "^3.0.0",
+    "@stoplight/markdown-viewer": "3.0.0-beta.4",
     "@stoplight/tree-list": "^4.0.0",
     "@types/json-schema": "^7.0.3",
     "classnames": "^2.2.6",
-    "lodash": "4.17.x",
+    "lodash": "^4.17.11",
     "mobx-react-lite": "^1.3.1",
     "pluralize": "^7.0.0",
     "json-schema-merge-allof": "^0.6.0"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^1.3.4",
-    "@stoplight/scripts": "4.1.0",
-    "@stoplight/storybook-config": "1.4.0",
+    "@stoplight/scripts": "5.1.0",
+    "@stoplight/storybook-config": "^2.0.1",
     "@stoplight/types": "4.1.0",
     "@stoplight/ui-kit": "2.0.0",
+    "@types/classnames": "^2.2.7",
     "@types/enzyme": "3.9.1",
     "@types/json-schema": "^7.0.3",
     "@types/pluralize": "^0.0.29",
@@ -66,16 +65,14 @@
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.12.1",
     "enzyme-to-json": "3.x.x",
+    "jest": "^24.7.1",
     "jest-enzyme": "7.0.2",
     "mobx": "^5.9.4",
-    "node-sass": "^4.11.0",
-    "node-sass-package-importer": "^5.3.1",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "sass-loader": "^7.1.0",
-    "ts-loader": "^5.3.3",
+    "ts-jest": "^24.0.2",
+    "tslint": "^5.16.0",
+    "tslint-config-stoplight": "^1.2.0",
     "typescript": "3.4.2"
   },
   "lint-staged": {

src/components/JsonSchemaViewer.tsx

@@ -6,7 +6,9 @@ import * as React from 'react';
 import { isSchemaViewerEmpty, renderSchema } from '../utils';
 import { ISchemaTree, SchemaTree } from './SchemaTree';
 
-export interface IJsonSchemaViewer extends Omit<ISchemaTree, 'emptyText' | 'treeStore'> {
+import '../styles/main.scss';
+
+export interface IJsonSchemaViewer extends Omit<ISchemaTree, 'treeStore'> {
   emptyText?: string;
   defaultExpandedDepth?: number;
 }

src/components/Type.tsx

@@ -1,24 +1,26 @@
+import { Dictionary } from '@stoplight/types';
 import * as cn from 'classnames';
 import { JSONSchema4TypeName } from 'json-schema';
 import * as React from 'react';
 import { ITreeNodeMeta, JSONSchema4CombinerName } from '../types';
 
 export interface IType {
-  type: JSONSchema4TypeName | JSONSchema4CombinerName | '$ref';
+  type: JSONSchema4TypeName | JSONSchema4CombinerName | 'binary' | '$ref';
   subtype?: ITreeNodeMeta['subtype'];
 }
 
 export const Type: React.FunctionComponent<IType> = ({ children, type, subtype }) => {
   return (
-    <span className={cn(TypeClasses[type])}>
+    <span className={cn(PropertyTypeColors[type])}>
       {type === 'array' && subtype && subtype !== 'array' ? `array[${subtype}]` : type}
       {children}
     </span>
   );
 };
 
-const TypeClasses = {
+export const PropertyTypeColors: Dictionary<string, IType['type']> = {
   object: 'text-blue-6',
+  any: 'text-blue-5',
   array: 'text-green-6',
   allOf: 'text-orange-5',
   oneOf: 'text-orange-5',

src/components/__tests__/JsonSchemaViewer.spec.tsx

@@ -2,15 +2,14 @@ import { shallow } from 'enzyme';
 import 'jest-enzyme';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
-import { isSchemaViewerEmpty } from '../../utils';
-import { MutedText } from '../common/MutedText';
-import { JsonSchemaViewer } from '../JsonSchemaViewer';
-import { SchemaTree } from '../SchemaTree';
 
-jest.mock('../../theme');
-jest.mock('../../utils/isSchemaViewerEmpty');
+import { JSONSchema4 } from 'json-schema';
+import { JsonSchemaViewer, SchemaTree } from '../components';
+import { isSchemaViewerEmpty } from '../utils/isSchemaViewerEmpty';
+
+jest.mock('../utils/isSchemaViewerEmpty');
 
-const schema = {
+const schema: JSONSchema4 = {
   properties: {
     data: {
       items: {
@@ -32,15 +31,13 @@ describe('JSON Schema Viewer component', () => {
     (isSchemaViewerEmpty as jest.Mock).mockReturnValue(true);
     const wrapper = shallow(<JsonSchemaViewer schema={{}} />);
     expect(isSchemaViewerEmpty).toHaveBeenCalledWith({});
-    expect(wrapper.find(MutedText)).toExist();
     expect(wrapper.find(SchemaTree)).not.toExist();
   });
 
   test('should render SchemaView if schema is provided', () => {
     (isSchemaViewerEmpty as jest.Mock).mockReturnValue(false);
     const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} />);
     expect(isSchemaViewerEmpty).toHaveBeenCalledWith(schema);
-    expect(wrapper.find(MutedText)).not.toExist();
     expect(wrapper.find(SchemaTree)).toExist();
   });
 });

src/components/__tests__/Type.spec.tsx

@@ -1,13 +1,11 @@
 import { shallow } from 'enzyme';
 import 'jest-enzyme';
 import * as React from 'react';
-import { Type } from '../Type';
-
-jest.mock('../../theme');
+import { IType, PropertyTypeColors, Type } from '../Type';
 
 describe('Type component', () => {
-  it.each(['integer', 'number', 'string'])('should handle $s type', type => {
-    const wrapper = shallow(<Type type={type} />);
+  it.each(Object.keys(PropertyTypeColors))('should handle $s type', type => {
+    const wrapper = shallow(<Type type={type as IType['type']} />);
 
     expect(wrapper).toHaveText(type);
   });