chore(deps): upgrade dependencies

Author: Daniel A. White

.circleci/config.yml

@@ -3,15 +3,15 @@ version: 2
 jobs:
   test_node:
     docker:
-      - image: cimg/node:16.13
+      - image: cimg/node:18.20
     steps:
       - checkout
       - run: yarn
       - run: yarn test.prod
 
   release:
     docker:
-      - image: circleci/node:16.13
+      - image: cimg/node:18.20
     steps:
       - checkout
       - run: yarn

.storybook/main.js

@@ -4,5 +4,9 @@ module.exports = {
   addons: ['@storybook/addon-essentials'],
   core: {
     builder: "webpack5"
-  }
+  },
+  // From https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin'
+  },
 };

package.json

@@ -61,20 +61,20 @@
     "@stoplight/markdown-viewer": "^5.3.3",
     "@stoplight/mosaic": "^1.32.0",
     "@stoplight/mosaic-code-viewer": "^1.32.0",
-    "@stoplight/scripts": "9.2.0",
+    "@stoplight/scripts": "10.0.0",
     "@stoplight/types": "^13.7.0",
-    "@storybook/addon-essentials": "^6.4.14",
-    "@storybook/builder-webpack5": "^6.4.14",
-    "@storybook/core": "6.4.14",
-    "@storybook/manager-webpack5": "^6.4.14",
-    "@storybook/react": "^6.4.14",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/builder-webpack5": "^6.5.0",
+    "@storybook/core": "^6.5.0",
+    "@storybook/manager-webpack5": "^6.5.0",
+    "@storybook/react": "^6.5.0",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.18",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.7.2",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.9.13",
+    "@types/react": "^16.14.0",
+    "@types/react-dom": "^16.9.0",
     "@types/treeify": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
@@ -87,22 +87,25 @@
     "eslint": "^8.4.1",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^25.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^26.6.2",
+    "jest": "^29.7.0",
     "jest-enzyme": "^7.1.2",
-    "prettier": "^2.5.1",
+    "prettier": "^3.2.2",
     "react": "^16.14.0",
+    "react-docgen-typescript-plugin": "^1.0.6",
     "react-dom": "^16.14.0",
-    "rollup-plugin-terser": "^5.3.0",
     "size-limit": "^4.11.0",
     "treeify": "^1.1.0",
-    "ts-jest": "^26.4.4",
-    "typescript": "4.5.5",
+    "ts-jest": "^29.1.4",
+    "typescript": "5.4.5",
     "webpack": "^5.67.0"
   },
+  "resolutions": {
+    "jest-environment-jsdom": "^29.7.0"
+  },
   "lint-staged": {
     "*.{ts,tsx}$": [
       "yarn lint.fix"

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -1,3 +1,4 @@
+import { isPlainObject } from '@stoplight/json';
 import { isRegularNode, RegularNode } from '@stoplight/json-schema-tree';
 import { Box, Flex, HStack, Icon, Menu, Pressable } from '@stoplight/mosaic';
 import { useUpdateAtom } from 'jotai/utils';
@@ -26,7 +27,13 @@ export const TopLevelSchemaRow = ({
   const childNodes = React.useMemo(() => visibleChildren(selectedChoice.type), [selectedChoice.type]);
   const nestingLevel = 0;
 
-  const nodeId = schemaNode.fragment?.['x-stoplight']?.id;
+  const nodeId = (() => {
+    if (isPlainObject(schemaNode.fragment) && isPlainObject(schemaNode.fragment['x-stoplight'])) {
+      const id = schemaNode.fragment['x-stoplight'].id;
+      return typeof id === 'string' ? id : undefined;
+    }
+    return undefined;
+  })();
   const [totalVendorExtensions, vendorExtensions] = React.useMemo(
     () => extractVendorExtensions(schemaNode.fragment),
     [schemaNode.fragment],

src/components/shared/Validations.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 import { isRegularNode, RegularNode } from '@stoplight/json-schema-tree';
 import { Flex, HStack, Text } from '@stoplight/mosaic';
 import { Dictionary } from '@stoplight/types';
@@ -29,6 +30,8 @@ export const numberValidationNames = [
   'exclusiveMaximum',
 ];
 
+type NumberValidationNames = typeof numberValidationNames;
+
 const exampleValidationNames = ['examples'];
 
 const excludedValidations = ['exclusiveMinimum', 'exclusiveMaximum', 'readOnly', 'writeOnly'];
@@ -92,8 +95,14 @@ const oasFormats = {
   },
 };
 
+function isOasFormat(format: string): format is keyof typeof oasFormats {
+  return format in oasFormats;
+}
+
 function filterOutOasFormatValidations(format: string, values: Dictionary<unknown>) {
-  if (!(format in oasFormats)) return values;
+  if (!isOasFormat(format)) {
+    return values;
+  }
 
   const newValues = { ...values };
 
@@ -125,7 +134,7 @@ export const Validations: React.FunctionComponent<IValidations> = ({ validations
 const NumberValidations = ({
   validations,
 }: {
-  validations: Partial<Record<typeof numberValidationNames[number], unknown>>;
+  validations: Partial<Record<NumberValidationNames[number], unknown>>;
 }) => {
   const entries = Object.entries(validations);
   if (!entries.length) {

src/consts.ts

@@ -8,7 +8,7 @@ export const COMBINER_PRETTY_NAMES: Readonly<Dictionary<string, SchemaCombinerNa
   [SchemaCombinerName.OneOf]: 'or',
 };
 
-export const COMMON_JSON_SCHEMA_AND_OAS_FORMATS = {
+export const COMMON_JSON_SCHEMA_AND_OAS_FORMATS: Readonly<Record<string, readonly string[]>> = {
   // strings are omitted because they are the default type to apply format to
   number: ['byte', 'int32', 'int64', 'float', 'double'],
   get integer() {

src/hash.ts

@@ -1,3 +1,4 @@
+import { isPlainObject } from '@stoplight/json';
 import type { SchemaNode } from '@stoplight/json-schema-tree';
 // @ts-expect-error: no types
 import * as fnv from 'fnv-plus';
@@ -16,8 +17,12 @@ export const hash = (value: string, skipHashing: boolean = SKIP_HASHING): string
 };
 
 export const getNodeId = (node: SchemaNode, parentId?: string): string => {
-  const nodeId = node.fragment?.['x-stoplight']?.id;
-  if (nodeId) return nodeId;
+  const fragment = node.fragment;
+
+  if (isPlainObject(fragment) && isPlainObject(fragment['x-stoplight'])) {
+    const nodeId = fragment['x-stoplight'].id;
+    if (typeof nodeId === 'string') return nodeId;
+  }
 
   const key = node.path[node.path.length - 1];
 

src/hooks/useIsOnScreen.ts

@@ -4,11 +4,11 @@ export const useIsOnScreen = (ref: RefObject<HTMLElement>) => {
   const [isOnScreen, setIsOnScreen] = useState(true);
 
   useEffect(() => {
-    let observer: IntersectionObserver | null = null;
+    let observer: IntersectionObserver | undefined;
 
     if (ref.current) {
       const scrollParent = getScrollParent(ref.current);
-      const observer = new IntersectionObserver(
+      observer = new IntersectionObserver(
         ([entry]) => {
           setIsOnScreen(entry.isIntersecting);
         },

src/utils/extractVendorExtensions.ts

@@ -16,11 +16,12 @@ export function extractVendorExtensions(fragment: SchemaFragment | boolean): Ven
     return [0, {}];
   }
 
-  const extensionKeys = Object.keys(fragment).filter(key => key.startsWith('x-'));
-  let vendorExtensions = {};
-  extensionKeys.forEach(key => {
-    vendorExtensions[key] = fragment[key];
-  });
+  const extensionKeys = Object.entries(fragment).filter(([key]) => key.startsWith('x-'));
+  let vendorExtensions: VendorExtensionsList = {};
+
+  for (const [key, value] of extensionKeys) {
+    vendorExtensions[key] = value;
+  }
 
   return [extensionKeys.length, vendorExtensions];
 }

src/utils/getApplicableFormats.ts

@@ -1,3 +1,4 @@
+import { isPlainObject } from '@stoplight/json';
 import { RegularNode, SchemaNodeKind } from '@stoplight/json-schema-tree';
 
 import { COMMON_JSON_SCHEMA_AND_OAS_FORMATS } from '../consts';
@@ -9,6 +10,7 @@ export function getApplicableFormats(schemaNode: RegularNode): [type: SchemaNode
   // which is specific to OpenAPI and not supported by JSON Schema itself.
 
   if (
+    isPlainObject(schemaNode.fragment) &&
     schemaNode.fragment['contentMediaType'] === 'application/octet-stream' &&
     schemaNode.types &&
     schemaNode.types.length > 0