Upgrade TS (#683)

package.json

@@ -11,9 +11,6 @@
   "engines": {
     "node": ">=18.0.0 || >=20.0.0"
   },
-  "bin": {
-    "mosaic": "yarn workspace @jpmorganchase/mosaic-cli"
-  },
   "scripts": {
     "build:site": "turbo run build --filter=@jpmorganchase/mosaic-site",
     "build": "turbo run build",
@@ -59,7 +56,9 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.24",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/node": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.11",
@@ -90,7 +89,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resize-observer-polyfill": "1.5.1",
-    "typescript": "^4.8.3",
+    "typescript": "^5.0.0",
     "vitest": "^2.0.0"
   },
   "dependencies": {
@@ -100,7 +99,7 @@
   },
   "resolutions": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.3.12",
     "commander": "^9.4.0",
     "esbuild": "0.23.1",
     "json5": "^1.0.2"

packages/components-labs/package.json

@@ -37,7 +37,7 @@
     "@types/styled-components": "^5.1.26",
     "@vanilla-extract/esbuild-plugin": "^2.3.11",
     "del-cli": "^4.0.1",
-    "typescript": "^4.8.3"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "@jpmorganchase/mosaic-components": "^0.1.0-beta.89",
@@ -53,7 +53,7 @@
     "warning": "^3.0.0"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/components-labs/src/Diagram.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Mermaid, MermaidProps } from 'mdx-mermaid/lib/Mermaid';
 import warning from 'warning';
 

packages/components/package.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "react": "^18.2.0",
     "del-cli": "^4.0.1",
-    "typescript": "^4.8.3"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.89",
@@ -62,7 +62,7 @@
     "warning": "^3.0.0"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/components/src/BrowserOnly.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { canUseDOM } from './canUseDOM';
 
 export function BrowserOnly({

packages/components/src/Button.tsx

@@ -1,4 +1,4 @@
-import React, { type Ref, type ReactNode, forwardRef } from 'react';
+import { type Ref, type ReactNode, forwardRef } from 'react';
 import classnames from 'clsx';
 import { Button as SaltButton, ButtonProps as SaltButtonProps } from '@salt-ds/core';
 import { button as buttonStyles } from '@jpmorganchase/mosaic-theme';

packages/components/src/FilterToolbar/FilterDropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useMemo } from 'react';
+import { SyntheticEvent, useMemo } from 'react';
 import { Dropdown, DropdownProps, Option } from '@salt-ds/core';
 import { Icon } from '../../Icon';
 import { useToolbarDispatch, useToolbarState } from '../ToolbarProvider';

packages/components/src/FilterToolbar/Search/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, SyntheticEvent, useState } from 'react';
+import { ChangeEvent, SyntheticEvent, useState } from 'react';
 import classnames from 'clsx';
 import { ComboBox, Option, ComboBoxProps } from '@salt-ds/core';
 import { Icon } from '../../Icon';

packages/components/src/FilterToolbar/SortDropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent, useState } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import { Dropdown, Option, DropdownProps } from '@salt-ds/core';
 import { Icon } from '../../Icon';
 import { useToolbarDispatch, useToolbarState } from '../ToolbarProvider';

packages/components/src/Grid/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, Ref } from 'react';
+import { forwardRef, ReactNode, Ref } from 'react';
 import classnames from 'clsx';
 
 import styles from './styles.css';

packages/components/src/GridBase/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactElement, Ref } from 'react';
+import { forwardRef, ReactElement, Ref } from 'react';
 import classnames from 'clsx';
 import { responsiveSprinkles } from '@jpmorganchase/mosaic-theme';
 import type { SpaceVars } from '@jpmorganchase/mosaic-theme';

packages/components/src/Link/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref } from 'react';
+import { forwardRef, Ref } from 'react';
 import classnames from 'clsx';
 
 import { LinkBase, LinkBaseProps } from '../LinkBase';

packages/components/src/PageFilterView/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { TileContentLabel } from '../TileContentLabel';
 import { TileLink } from '../TileLink';
 import type { GridItemSize } from '../Grid';

packages/components/src/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@jpmorganchase/mosaic-store';
 import { ssrClassName } from '@jpmorganchase/mosaic-theme';
 import { SaltProvider, UNSTABLE_SaltProviderNext } from '@salt-ds/core';
-import React, { type ReactNode, useEffect, useState } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 
 import classnames from 'clsx';
 

packages/components/src/TileBase/TileBase.tsx

@@ -28,8 +28,6 @@ export interface TileBaseProps {
   onSelect?: (event: React.KeyboardEvent | React.MouseEvent) => void;
   /** The children components of the Tile component */
   children?: React.ReactNode;
-  /** Ref */
-  ref?: Ref<HTMLDivElement>;
   /** aria role */
   role?: string;
   /** Tile size */
@@ -152,7 +150,7 @@ export const TileBaseComponent: FC<TileBaseComponentProps> = function TileBase({
   );
 };
 
-export const TileBase: FC<TileBaseProps> = forwardRef((props, ref: Ref<HTMLDivElement>) => (
+export const TileBase = forwardRef<HTMLDivElement, TileBaseProps>((props, ref) => (
   <TileStateProvider>
     <TileBaseComponent {...props} tileRef={ref} />
   </TileStateProvider>

packages/components/src/Tiles.tsx

@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, ReactElement, Ref } from 'react';
+import { FC, forwardRef, ReactElement, Ref } from 'react';
 
 import { TileBaseProps } from './TileBase';
 import { Grid, GridProps } from './Grid';

packages/content-editor-plugin/package.json

@@ -35,7 +35,7 @@
     "dev": "node ../../scripts/bundle.mjs watch"
   },
   "devDependencies": {
-    "typescript": "^4.8.3"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "@jpmorganchase/mosaic-components": "^0.1.0-beta.89",
@@ -65,7 +65,7 @@
     "zustand": "^4.1.1"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.26",
+    "@types/react": "^18.3.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/content-editor-plugin/src/components/ActionMenu/ActionMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuTrigger, MenuPanel, MenuItem } from '@salt-ds/core';
 import { Icon, Button } from '@jpmorganchase/mosaic-components';
 import { IconNames } from '@jpmorganchase/mosaic-theme';

packages/content-editor-plugin/src/components/BaseToolbar/BaseToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import classnames from 'clsx';
 
 import styles from './BaseToolbar.css';

packages/content-editor-plugin/src/components/BaseTooltray/BaseTooltray.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import classnames from 'clsx';
 
 import styles from './BaseTooltray.css';

packages/content-editor-plugin/src/components/ContentEditor.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

packages/content-editor-plugin/src/components/Dialog.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Dialog as SaltDialog, type DialogProps as SaltDialogProps } from '@salt-ds/core';
 import { themeClassName } from '@jpmorganchase/mosaic-theme';
 import classnames from 'clsx';

packages/content-editor-plugin/src/components/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, FC, useRef, useState } from 'react';
+import { ComponentType, FC, useRef, useState } from 'react';
 import classnames from 'clsx';
 import matter from 'gray-matter';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';

packages/content-editor-plugin/src/components/EditorControls.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { BaseToolbar as Toolbar } from './BaseToolbar/BaseToolbar';
 import { BaseTooltray as Tooltray } from './BaseTooltray/BaseTooltray';

packages/content-editor-plugin/src/components/LinkEditor/EditLinkButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { ToolbarButton, type ToolbarButtonProps } from '../Toolbar/ToolbarButton';
 

packages/content-editor-plugin/src/components/LinkEditor/LinkEditor.tsx

@@ -6,7 +6,7 @@ import {
   RangeSelection,
   SELECTION_CHANGE_COMMAND
 } from 'lexical';
-import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useFloatingUI, Input } from '@salt-ds/core';

packages/content-editor-plugin/src/components/LinkEditor/SaveAdornment.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import type { ButtonProps } from '@jpmorganchase/mosaic-components';
 import { ToolbarButton } from '../Toolbar/ToolbarButton';

packages/content-editor-plugin/src/components/PersistEditDialog/PersistStatus.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import classnames from 'clsx';
 import { P2, P6 } from '@jpmorganchase/mosaic-components';
 

packages/content-editor-plugin/src/components/PersistEditDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import md5 from 'md5';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $convertToMarkdownString } from '@lexical/markdown';

packages/content-editor-plugin/src/components/Popper/Popper.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import { Portal, useWindow } from '@salt-ds/lab';
 import { themeClassName } from '@jpmorganchase/mosaic-theme';
 import classnames from 'clsx';

packages/content-editor-plugin/src/components/SaveButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 

packages/content-editor-plugin/src/components/ScrollableSection/ScrollableSection.tsx

@@ -1,11 +1,11 @@
-import React, { Ref, forwardRef } from 'react';
+import { ReactNode, Ref, forwardRef } from 'react';
 import classnames from 'clsx';
 
 import styles from './ScrollableSection.css';
 
 interface ScrollableSectionProps {
   className?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const ScrollableSection = forwardRef(function ScrollableSection(

packages/content-editor-plugin/src/components/StatusBanner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Banner, BannerContent } from '@salt-ds/core';
 
 import { usePageState } from '../store';

packages/content-editor-plugin/src/components/Toolbar/InsertBlockDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { SyntheticEvent } from 'react';
+import { SyntheticEvent } from 'react';
 import { Dropdown, Option } from '@salt-ds/core';
 import { $createCodeNode } from '@lexical/code';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';

packages/content-editor-plugin/src/components/Toolbar/InsertHorizontalRule.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';

packages/content-editor-plugin/src/components/Toolbar/InsertImage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';

packages/content-editor-plugin/src/components/Toolbar/InsertLink.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';

packages/content-editor-plugin/src/components/Toolbar/InsertTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, FC, ReactNode, MouseEventHandler, useRef, useState } from 'react';
+import { ReactElement, FC, ReactNode, MouseEventHandler, useRef, useState } from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { INSERT_TABLE_COMMAND } from '@lexical/table';

packages/content-editor-plugin/src/components/Toolbar/TextFormatTooltray.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import classnames from 'clsx';
 import {
   FORMAT_TEXT_COMMAND,

packages/content-editor-plugin/src/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { useEditHistory } from '../../hooks/useEditHistory';
 import { usePageState } from '../../store';

packages/content-editor-plugin/src/components/Toolbar/ToolbarButton.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref } from 'react';
+import { forwardRef, Ref } from 'react';
 import classnames from 'clsx';
 import { Button, type ButtonProps, Label } from '@jpmorganchase/mosaic-components';
 

packages/content-editor-plugin/src/components/Toolbar/ToolbarSepartor.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import classnames from 'clsx';
 
 import styles from './ToolbarSeparator.css';

packages/content-editor-plugin/src/plugins/FloatingToolbarPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
 import {

packages/content-editor-plugin/src/plugins/MarkdownLinkPlugin.tsx

@@ -10,7 +10,7 @@ import {
   createCommand,
   LexicalCommand
 } from 'lexical';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { InsertLinkDialog } from '../components/Toolbar/InsertLink';
 

packages/content-editor-plugin/src/plugins/PreviewPlugin.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { $convertToMarkdownString } from '@lexical/markdown';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import type { EditorState } from 'lexical';

packages/content-editor-plugin/src/plugins/TableActionMenuPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
 import {

packages/core/src/filesystems/MutableVolume.ts

@@ -13,7 +13,7 @@ export default class MutableVolume extends FileSystemRestricted implements IVolu
   }
 
   asRestricted() {
-    return new FileSystemRestricted(this.#vfs, super.namespace);
+    return new FileSystemRestricted(this.#vfs, this.namespace);
   }
 
   freeze() {