chore(nodejs): Bump dependencies.

Note that this bump includes a new version of `@heroicons/react`,
which changes the appearance of the outline icons.

Also, many of the icon names have changed. Here's a convenient list of
the changes:

tailwindlabs/heroicons#750

Finally, the imports now need to specify the icon size.

We do not bump the TypeScript pin here because `@dicebear/avatars` has
some issues with strict null checks in TypeScript 4.8. See:

dicebear/dicebear#239

package.json

@@ -6,28 +6,28 @@
     "pnpm": "^7.1.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
-    "eslint": "^8.22.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.4.2",
+    "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-storybook": "^0.6.4",
-    "eslint-plugin-tailwindcss": "^3.6.0",
-    "pnpm": "^7.9.3",
+    "eslint-plugin-tailwindcss": "^3.6.1",
+    "pnpm": "^7.11.0",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4",
     "typescript-eslint-language-service": "^5.0.0",
-    "typescript-language-server": "^1.0.0",
+    "typescript-language-server": "^1.1.2",
     "unified-language-server": "^3.1.0",
     "vite-plugin-package-config": "^0.1.1",
     "vscode-css-languageserver-bin": "^1.4.0",
     "vscode-html-languageserver-bin": "^1.4.0",
     "vscode-json-languageserver": "^1.3.4",
-    "yaml-language-server": "^1.9.0"
+    "yaml-language-server": "^1.10.0"
   },
   "scripts": {
     "format": "prettier --write .",

packages/primer-app/package.json

@@ -12,7 +12,7 @@
     "generate": "orval --config ./orval.config.js"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.2.1",
+    "@tanstack/react-query": "^4.3.3",
     "axios": "^0.27.2",
     "history": "^5.3.0",
     "react": "^18.2.0",
@@ -23,20 +23,20 @@
   "devDependencies": {
     "@hackworthltd/primer-components": "workspace:0.2.0",
     "@hackworthltd/primer-types": "workspace:0.2.0",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.8",
     "classnames": "^2.3.1",
     "orval": "^6.9.6",
     "postcss": "^8.4.16",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "tailwindcss": "3.1.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "unified-language-server": "^2.1.0",
-    "vite": "^3.0.9",
-    "vite-plugin-checker": "^0.4.9",
+    "vite": "^3.1.0",
+    "vite-plugin-checker": "^0.5.1",
     "vite-plugin-package-config": "^0.1.1",
     "vite-tsconfig-paths": "^3.5.0"
   },

packages/primer-components/package.json

@@ -26,51 +26,51 @@
     "@dicebear/avatars-bottts-sprites": "^4.10.3",
     "@dicebear/avatars-identicon-sprites": "^4.10.3",
     "@dicebear/avatars-jdenticon-sprites": "^4.10.3",
-    "@types/dagre": "^0.7.47",
+    "@types/dagre": "^0.7.48",
     "@visx/group": "^2.10.0",
     "@visx/hierarchy": "^2.10.0",
     "@visx/shape": "^2.12.2",
     "@visx/text": "^2.12.2",
     "d3": "7.6.1",
     "dagre": "github:dagrejs/dagre#103136b04a13c7ac10d8ded25954da58d5ed88e1",
-    "fp-ts": "^2.12.2",
+    "fp-ts": "^2.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-flow-renderer": "^10.3.16",
     "unified-language-server": "^3.1.0",
-    "uuid": "^8.3.2"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.19.0",
     "@hackworthltd/primer-types": "workspace:0.2.0",
-    "@headlessui/react": "^1.6.6",
-    "@heroicons/react": "^1.0.6",
+    "@headlessui/react": "^1.7.0",
+    "@heroicons/react": "^2.0.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
     "@storybook/builder-vite": "^0.2.2",
     "@storybook/react": "^6.5.10",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
     "@types/d3": "^7.4.0",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",
     "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
-    "chromatic": "^6.7.4",
+    "chromatic": "^6.9.0",
     "classnames": "^2.3.1",
     "postcss": "^8.4.16",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "react-router-dom": "^6.3.0",
     "tailwindcss": "3.1.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "unified-language-server": "^2.1.0",
-    "vite": "^3.0.9",
-    "vite-plugin-checker": "^0.4.9",
+    "vite": "^3.1.0",
+    "vite-plugin-checker": "^0.5.1",
     "vite-plugin-dts": "^1.4.1",
     "vite-plugin-package-config": "^0.1.1",
     "vite-plugin-svgr": "^2.2.1",

packages/primer-components/src/FloatingToolbar/FloatingToolbar.tsx

@@ -1,10 +1,10 @@
 import {
-  CodeIcon,
+  CodeBracketIcon,
   ShareIcon,
-  ReplyIcon,
+  ArrowUturnLeftIcon,
   ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@heroicons/react/outline";
+  EllipsisHorizontalIcon,
+} from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { MouseEventHandler, useState } from "react";
 import Draggable from "react-draggable";
@@ -24,7 +24,7 @@ export type Mode = "text" | "tree";
 const modeSvg = (m: Mode) => {
   switch (m) {
     case "text":
-      return <CodeIcon className="p-0.5" />;
+      return <CodeBracketIcon className="p-0.5" />;
     case "tree":
       return <ShareIcon className="rotate-90 p-1" />;
   }
@@ -40,7 +40,7 @@ const nextMode = (m: Mode): Mode => {
 
 // https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/130
 // eslint-disable-next-line tailwindcss/no-custom-classname
-const arrow = <ReplyIcon className="w-6 stroke-[3]" />;
+const arrow = <ArrowUturnLeftIcon className="w-6 stroke-[3]" />;
 const undoRedoClasses =
   "flex flex-col items-center w-12 hover:bg-grey-primary-hover rounded";
 
@@ -65,8 +65,8 @@ export const FloatingToolbar = (p: FloatingToolbarProps): JSX.Element => {
         )}
       >
         <div className="-mt-2 -mb-1 w-6">
-          <DotsHorizontalIcon className="stroke-grey-secondary" />
-          <DotsHorizontalIcon className="-mt-4 stroke-grey-secondary" />
+          <EllipsisHorizontalIcon className="stroke-grey-secondary" />
+          <EllipsisHorizontalIcon className="-mt-4 stroke-grey-secondary" />
         </div>
         <button
           type="button"

packages/primer-components/src/NotificationsButton/NotificationsButton.tsx

@@ -1,6 +1,6 @@
 import "@/index.css";
 
-import { BellIcon } from "@heroicons/react/outline";
+import { BellIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 
 export type Appearance = "plain" | "notifications";

packages/primer-components/src/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
 import "@/index.css";
 
-import { SearchIcon } from "@heroicons/react/solid";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 
 export interface SearchBarProps {
   /**
@@ -35,7 +35,7 @@ export const SearchBar = (p: SearchBarProps): JSX.Element => (
     </label>
     <div className="relative">
       <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <SearchIcon
+        <MagnifyingGlassIcon
           className="h-5 w-5 text-grey-secondary"
           aria-hidden="true"
         />

packages/primer-components/src/Sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   PlusIcon,
-} from "@heroicons/react/outline";
+} from "@heroicons/react/24/outline";
 import { useState } from "react";
 import classNames from "classnames";
 

packages/primer-types/package.json

@@ -19,19 +19,19 @@
     "lint:fix": "eslint --fix ."
   },
   "dependencies": {
-    "@typescript-eslint/parser": "^5.33.1",
+    "@typescript-eslint/parser": "^5.36.2",
     "react": "^18.2.0",
     "typescript": "^4.7.4",
-    "typescript-language-server": "^1.0.0",
+    "typescript-language-server": "^1.1.2",
     "unified-language-server": "^3.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.19",
     "ts-node": "^10.9.1",
     "typescript": "^4.5.4",
     "unified-language-server": "^2.1.0",
-    "vite": "^3.0.9",
-    "vite-plugin-checker": "^0.4.9",
+    "vite": "^3.1.0",
+    "vite-plugin-checker": "^0.5.1",
     "vite-plugin-dts": "^1.4.1",
     "vite-plugin-package-config": "^0.1.1",
     "vite-tsconfig-paths": "^3.5.0"