feat: tree-ui and path crumbs (#179)

* feat: tree ui
* feat: crumbs and tree lines
* feat: shorten annotation names + improve validation layouts
* refactor: traverse the tree
* chore: re-organize stories
* feat: "show more" description link

Co-authored-by: lottamus <chrisnlott@gmail.com>
Co-authored-by: Jakub Rożek <jakub@stoplight.io>

Author: 3 people

.storybook/preview-head.html

@@ -1,14 +1 @@
-<!--NEED TO SET BODY FONT SIZE TO UI-KIT BASE SINCE WE USE REMS -->
-<style>
-  html,
-  body {
-    padding: 0;
-    margin: 0;
-
-    font-size: 14px;
-  }
-
-  #root {
-    height: 100%;
-  }
-</style>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />

package.json

@@ -38,31 +38,32 @@
     "size-limit": "size-limit"
   },
   "peerDependencies": {
-    "@stoplight/markdown-viewer": "^5.0.0",
-    "@stoplight/mosaic": "^1.0.0",
-    "@stoplight/mosaic-code-viewer": "^1.0.0",
+    "@stoplight/markdown-viewer": "^5",
+    "@stoplight/mosaic": "^1",
+    "@stoplight/mosaic-code-viewer": "^1",
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@stoplight/json": "^3.17.1",
-    "@stoplight/json-schema-tree": "^2.1.2",
+    "@stoplight/json-schema-tree": "^2.1.3",
     "@stoplight/react-error-boundary": "^2.0.0",
     "@types/json-schema": "^7.0.7",
     "classnames": "^2.2.6",
+    "jotai": "^1.4.5",
     "lodash": "^4.17.19"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^1.3.6",
     "@size-limit/preset-big-lib": "^4.11.0",
     "@stoplight/eslint-config": "^1.2.0",
-    "@stoplight/markdown-viewer": "^5.0.0",
-    "@stoplight/mosaic": "^1.0.0",
-    "@stoplight/mosaic-code-viewer": "^1.0.0",
-    "@stoplight/scripts": "9.0.2",
+    "@stoplight/markdown-viewer": "^5.3.3",
+    "@stoplight/mosaic": "^1.12.6",
+    "@stoplight/mosaic-code-viewer": "^1.12.6",
+    "@stoplight/scripts": "9.2.0",
     "@stoplight/storybook-config": "^2.0.6",
-    "@stoplight/types": "^11.9.0",
+    "@stoplight/types": "^12.3.0",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.18",

setupTests.ts

@@ -4,3 +4,14 @@ const Adapter = require('enzyme-adapter-react-16');
 Enzyme.configure({ adapter: new Adapter() });
 
 jest.mock('react');
+
+const observe = jest.fn();
+const unobserve = jest.fn();
+const disconnect = jest.fn();
+
+// @ts-ignore
+window.IntersectionObserver = jest.fn(() => ({
+  observe,
+  unobserve,
+  disconnect,
+}));