From 06b7f90d2e61d4f3512eb50d70a8a88b27d35a05 Mon Sep 17 00:00:00 2001 From: Stephen Eisenhauer Date: Sat, 2 Mar 2024 00:44:32 -0800 Subject: [PATCH] Add React types --- js/about.d.ts | 4 +- js/about.tsx | 10 ++-- js/application.d.ts | 68 +++++++++++++++++++++++++ js/{application.jsx => application.tsx} | 18 +++++-- js/common/card.d.ts | 9 ++-- js/common/card.tsx | 4 +- js/common/practice-intro.d.ts | 35 ++++++++----- js/common/practice-intro.tsx | 37 ++++++++------ js/common/prefs-checkbox.d.ts | 2 +- js/common/prefs-toggle.d.ts | 2 +- js/common/tip-card.d.ts | 2 +- js/entry.tsx | 2 +- js/home.d.ts | 4 +- js/home.tsx | 7 +-- js/keyboard-buttons.d.ts | 15 ++++-- js/keyboard-buttons.tsx | 34 ++++++++----- js/modes/free-play.jsx | 5 +- js/modes/perfect-pitch-practice.jsx | 7 +-- js/modes/sight-reading-practice.jsx | 5 +- package-lock.json | 25 +++++++++ package.json | 2 + 21 files changed, 217 insertions(+), 80 deletions(-) create mode 100644 js/application.d.ts rename js/{application.jsx => application.tsx} (89%) diff --git a/js/about.d.ts b/js/about.d.ts index c59295f..a884992 100644 --- a/js/about.d.ts +++ b/js/about.d.ts @@ -8,11 +8,11 @@ declare class About extends React.Component { appbar: any; }; context: { - appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void; + appbar: (title: string, leftElement?: Element, rightElement?: Element) => void; }; constructor(props: any); componentWillMount(): void; clearSettings(): void; - render(): any; + render(): React.JSX.Element; } export default About; diff --git a/js/about.tsx b/js/about.tsx index 8d4e3cb..c81d939 100644 --- a/js/about.tsx +++ b/js/about.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import CardActions from 'material-ui/Card/CardActions'; import CardHeader from 'material-ui/Card/CardHeader'; -import CardMedia from 'material-ui/Card/CardMedia'; -import CardTitle from 'material-ui/Card/CardTitle'; import FlatButton from 'material-ui/FlatButton'; import CardText from 'material-ui/Card/CardText'; import {List, ListItem} from 'material-ui/List'; import CodeIcon from 'material-ui/svg-icons/action/code'; import PersonIcon from 'material-ui/svg-icons/social/person'; +import PropTypes from 'prop-types'; import OpenInNewIcon from 'material-ui/svg-icons/action/open-in-new'; import Card from './common/card'; @@ -16,7 +14,7 @@ import Card from './common/card'; */ class About extends React.Component { static contextTypes: { snackbar: any; appbar: any; }; - context: { appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void }; + context: { appbar: (title: string, leftElement?: Element, rightElement?: Element) => void }; constructor(props) { super(props); @@ -77,7 +75,7 @@ class About extends React.Component { } } About.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, + snackbar: PropTypes.func, + appbar: PropTypes.func, }; export default About; diff --git a/js/application.d.ts b/js/application.d.ts new file mode 100644 index 0000000..2f6347d --- /dev/null +++ b/js/application.d.ts @@ -0,0 +1,68 @@ +import React from 'react'; +import { Router } from 'react-router'; +import Synth from './synth'; +/** + * Top-level application component + */ +declare class Application extends React.Component { + state: { + drawerOpen: boolean; + snackbarOpen: boolean; + snackbarMessage: string; + snackbarAutoHideDuration: number; + appBarTitle: string; + appBarLeftElement: any; + appBarRightElement: any; + }; + menuItems: { + Home: { + route: string; + icon: any; + }; + "Sight Reading Practice": { + route: string; + icon: any; + }; + "Perfect Pitch Practice": { + route: string; + icon: any; + }; + "Free Play": { + route: string; + icon: any; + }; + About: { + route: string; + icon: any; + }; + }; + synth: Synth; + context: { + router: Router; + }; + props: { + children: any; + }; + static contextTypes: { + router: Router; + }; + static childContextTypes: any; + constructor(props: any); + getChildContext(): { + snackbar: any; + appbar: any; + synth: Synth; + }; + componentDidMount(): void; + toggleDrawer(): void; + leftNavChange(e: any, key: any, payload: any): void; + drawerMenuItemTouched(e: any): void; + snackbarRequestClose(): void; + displaySnackbar(message: any, duration: any): void; + /** + * Used in child contexts to update the app bar + */ + updateAppBar(title: any, leftElement: any, rightElement: any): void; + render(): React.JSX.Element; +} +export default Application; diff --git a/js/application.jsx b/js/application.tsx similarity index 89% rename from js/application.jsx rename to js/application.tsx index 9e4f07f..469932a 100644 --- a/js/application.jsx +++ b/js/application.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Router, Route, Link } from 'react-router' +import PropTypes from 'prop-types'; +import { Router } from 'react-router' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import { cyan700, cyan900 } from 'material-ui/styles/colors'; @@ -25,6 +26,13 @@ const muiTheme = getMuiTheme({ * Top-level application component */ class Application extends React.Component { + state: { drawerOpen: boolean; snackbarOpen: boolean; snackbarMessage: string; snackbarAutoHideDuration: number; appBarTitle: string; appBarLeftElement: any; appBarRightElement: any; }; + menuItems: { Home: { route: string; icon: any; }; "Sight Reading Practice": { route: string; icon: any; }; "Perfect Pitch Practice": { route: string; icon: any; }; "Free Play": { route: string; icon: any; }; About: { route: string; icon: any; }; }; + synth: Synth; + context: { router: Router }; + props: { children: any; }; + static contextTypes: { router: Router; }; + static childContextTypes; constructor(props) { super(props); @@ -179,11 +187,11 @@ class Application extends React.Component { } } Application.contextTypes = { - router: React.PropTypes.object + router: PropTypes.object }; Application.childContextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, - synth: React.PropTypes.object, + snackbar: PropTypes.func, + appbar: PropTypes.func, + synth: PropTypes.instanceOf(Synth), }; export default Application; diff --git a/js/common/card.d.ts b/js/common/card.d.ts index 2d77cb1..17f5fb7 100644 --- a/js/common/card.d.ts +++ b/js/common/card.d.ts @@ -1,8 +1,11 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; /** * Wrapper around material-ui Card with some customizations */ export default class extends React.Component { - props: {}; - render(): any; + props: { + children?: Element | Element[] | ReactElement | ReactElement[]; + style?: React.CSSProperties; + }; + render(): React.JSX.Element; } diff --git a/js/common/card.tsx b/js/common/card.tsx index a42b2ce..9256dd3 100644 --- a/js/common/card.tsx +++ b/js/common/card.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import Card from 'material-ui/Card/Card'; /** * Wrapper around material-ui Card with some customizations */ export default class extends React.Component { - props: {}; + props: { children?: Element | Element[] | ReactElement | ReactElement[], style?: React.CSSProperties }; render() { //var { children, ...other } = this.props; return ( diff --git a/js/common/practice-intro.d.ts b/js/common/practice-intro.d.ts index 77e0030..311aec8 100644 --- a/js/common/practice-intro.d.ts +++ b/js/common/practice-intro.d.ts @@ -1,4 +1,17 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; +export type PreferenceItem = { + type: string; + label: string; + pref: string; + default: boolean; +}; +export type PreferenceGroup = { + header: string; + items: PreferenceItem[]; +}; +export type PreferencesState = { + [x: string]: any; +}; /** * Wrapper component for practice modes, containing general functionality for * displaying an initial options screen with a "start" button to begin an @@ -9,25 +22,19 @@ import React from 'react'; */ declare class PracticeIntro extends React.Component { props: { - component: React.Component; + component: React.ComponentType<{ + prefs: PreferencesState; + }>; title: string; - prefDefs: { - header: string; - items: { - type: string; - label: string; - pref: string; - default: boolean; - }[]; - }[]; + prefDefs: PreferenceGroup[]; prefsNamespace: string; }; state: { started: boolean; - prefs: any; + prefs: PreferencesState; }; context: { - appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void; + appbar: (title: string, leftElement?: Element | ReactElement, rightElement?: Element | ReactElement) => void; }; static contextTypes: { snackbar: any; @@ -57,6 +64,6 @@ declare class PracticeIntro extends React.Component { * Handler for all toggle switches and checkboxes */ onToggle(e: any, enabled: any): void; - render(): any; + render(): React.JSX.Element; } export default PracticeIntro; diff --git a/js/common/practice-intro.tsx b/js/common/practice-intro.tsx index 5d49633..0d01036 100644 --- a/js/common/practice-intro.tsx +++ b/js/common/practice-intro.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import FlatButton from 'material-ui/FlatButton'; import IconButton from 'material-ui/IconButton'; import NavigationBackIcon from 'material-ui/svg-icons/navigation/arrow-back'; @@ -7,6 +7,21 @@ import Subheader from 'material-ui/Subheader'; import Card from './card'; import PrefsToggle from './prefs-toggle'; import PrefsCheckbox from './prefs-checkbox'; +import PropTypes from 'prop-types'; + +export type PreferenceItem = { + type: string; + label: string; + pref: string; + default: boolean; +}; +export type PreferenceGroup = { + header: string; + items: PreferenceItem[]; +}; +export type PreferencesState = { + [x: string]: any +}; /** * Wrapper component for practice modes, containing general functionality for @@ -17,17 +32,9 @@ import PrefsCheckbox from './prefs-checkbox'; * how to use. */ class PracticeIntro extends React.Component { - props: {component: React.Component, title: string, prefDefs: { - header: string; - items: { - type: string; - label: string; - pref: string; - default: boolean; - }[]; -}[], prefsNamespace: string}; - state: { started: boolean; prefs: any; }; - context: { appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void }; + props: { component: React.ComponentType<{ prefs: PreferencesState }>, title: string, prefDefs: PreferenceGroup[], prefsNamespace: string }; + state: { started: boolean; prefs: PreferencesState; }; + context: { appbar: (title: string, leftElement?: Element | ReactElement, rightElement?: Element | ReactElement) => void }; static contextTypes: { snackbar: any; appbar: any; }; constructor(props) { @@ -36,7 +43,7 @@ class PracticeIntro extends React.Component { // If localStorage doesn't have prefs yet, pre-populate with defaults let prefs = localStorage["prefs." + this.props.prefsNamespace]; if (prefs === undefined) { - var defaults = {}; + var defaults: { [x: string]: any } = {}; this.props.prefDefs.forEach(section => { section.items.forEach(item => { defaults[item.pref] = item.default; @@ -147,7 +154,7 @@ class PracticeIntro extends React.Component { } } PracticeIntro.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, + snackbar: PropTypes.func, + appbar: PropTypes.func, }; export default PracticeIntro; diff --git a/js/common/prefs-checkbox.d.ts b/js/common/prefs-checkbox.d.ts index 64f4a5f..e404dd8 100644 --- a/js/common/prefs-checkbox.d.ts +++ b/js/common/prefs-checkbox.d.ts @@ -6,5 +6,5 @@ export default class extends React.Component { defaultState: boolean; onSwitch: Function; }; - render(): any; + render(): React.JSX.Element; } diff --git a/js/common/prefs-toggle.d.ts b/js/common/prefs-toggle.d.ts index 64f4a5f..e404dd8 100644 --- a/js/common/prefs-toggle.d.ts +++ b/js/common/prefs-toggle.d.ts @@ -6,5 +6,5 @@ export default class extends React.Component { defaultState: boolean; onSwitch: Function; }; - render(): any; + render(): React.JSX.Element; } diff --git a/js/common/tip-card.d.ts b/js/common/tip-card.d.ts index ca37dc6..6747dbe 100644 --- a/js/common/tip-card.d.ts +++ b/js/common/tip-card.d.ts @@ -7,5 +7,5 @@ export default class extends React.Component { children: any; title: string; }; - render(): any; + render(): React.JSX.Element; } diff --git a/js/entry.tsx b/js/entry.tsx index 977451b..72d83d3 100644 --- a/js/entry.tsx +++ b/js/entry.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'react-dom' import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router' import injectTapEventPlugin from 'react-tap-event-plugin'; -import Application from './application.jsx'; +import Application from './application'; import Home from './home'; import About from './about'; import SightReadingPracticeIntro from './modes/sight-reading-practice-intro.jsx'; diff --git a/js/home.d.ts b/js/home.d.ts index 30bf773..e516bad 100644 --- a/js/home.d.ts +++ b/js/home.d.ts @@ -4,7 +4,7 @@ import React from 'react'; */ declare class Home extends React.Component { context: { - appbar: (title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void; + appbar: (title: string, leftElement?: Element, rightElement?: Element) => void; }; props: { location: { @@ -19,6 +19,6 @@ declare class Home extends React.Component { }; constructor(props: any); componentWillMount(): void; - render(): any; + render(): React.JSX.Element; } export default Home; diff --git a/js/home.tsx b/js/home.tsx index 767ae60..2651c54 100644 --- a/js/home.tsx +++ b/js/home.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import CardTitle from 'material-ui/Card/CardTitle'; import CardText from 'material-ui/Card/CardText'; import Card from './common/card'; @@ -8,7 +9,7 @@ import TipCard from './common/tip-card'; * Component providing the main/home screen */ class Home extends React.Component { - context: { appbar: ( title: string, leftElement?: HTMLElement, rightElement?: HTMLElement) => void }; + context: { appbar: ( title: string, leftElement?: Element, rightElement?: Element) => void }; props: { location: { query: { [x: string]: string } } }; static contextTypes: { snackbar: any; appbar: any; }; constructor(props) { @@ -77,7 +78,7 @@ class Home extends React.Component { } } Home.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, + snackbar: PropTypes.func, + appbar: PropTypes.func, }; export default Home; diff --git a/js/keyboard-buttons.d.ts b/js/keyboard-buttons.d.ts index 76a888e..10871ea 100644 --- a/js/keyboard-buttons.d.ts +++ b/js/keyboard-buttons.d.ts @@ -1,12 +1,19 @@ -import React from 'react'; +import React, { CSSProperties, MouseEvent } from 'react'; declare class KeyboardButtons extends React.Component { - props: any; + props: { + onEntry: Function; + enableSound: boolean; + keysDown: any; + showLabels: boolean; + useFlats: boolean; + style: CSSProperties; + }; context: any; static contextTypes: { synth: any; }; constructor(props: any); - onButtonPress(event: any): void; - render(): any; + onButtonPress(event: MouseEvent): void; + render(): React.JSX.Element; } export default KeyboardButtons; diff --git a/js/keyboard-buttons.tsx b/js/keyboard-buttons.tsx index 0b73f3b..2b3adee 100644 --- a/js/keyboard-buttons.tsx +++ b/js/keyboard-buttons.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { CSSProperties, MouseEvent, MouseEventHandler } from 'react'; +import PropTypes from 'prop-types'; import { grey100, grey200, grey800, cyanA700, white } from 'material-ui/styles/colors'; // Private constants @@ -9,14 +10,19 @@ const lowerRow = ['c', 'd', 'e', 'f', 'g', 'a', 'b']; // Component representing a single key class Key extends React.Component { - props: {note, held: boolean, onClick: Function, label, keysDown, showLabels, useFlats, style}; + props: { + note, + held: boolean, + onClick: MouseEventHandler, + label: string + }; render() { var key = this.props.note; //var showLabel = this.props.showLabel; //var text = showLabel ? key : ''; var accidental = (key.length > 1); var buttonWidth = "40px"; - var style = { + var style: CSSProperties = { width: buttonWidth, textTransform: "uppercase", height: accidental ? "70px" : "140px", @@ -40,7 +46,7 @@ class Key extends React.Component { // Component representing an interactive piano keyboard class KeyboardButtons extends React.Component { - props: any; + props: { onEntry: Function, enableSound: boolean, keysDown, showLabels: boolean, useFlats: boolean, style: CSSProperties }; context: any; static contextTypes: { synth: any; }; constructor(props) { @@ -51,15 +57,17 @@ class KeyboardButtons extends React.Component { } // Click handler for keys - onButtonPress(event) { - let key = event.target.getAttribute('data-key'); + onButtonPress(event: MouseEvent) { + if (event.target instanceof HTMLElement) { + let key = event.target.getAttribute('data-key'); - // Report all currently-down key(s) to parent's callback - this.props.onEntry(key); + // Report all currently-down key(s) to parent's callback + this.props.onEntry(key); - // Play sound (TODO: Unless key is going from down to up) - if (this.props.enableSound) { - this.context.synth.play(key, 0.25); + // Play sound (TODO: Unless key is going from down to up) + if (this.props.enableSound) { + this.context.synth.play(key, 0.25); + } } } @@ -69,7 +77,7 @@ class KeyboardButtons extends React.Component { width: "266px", height: "140px" }, this.props.style); - let rows = [ + const rows: { notes: string[], labels: string[], className: string, style: CSSProperties }[] = [ { notes: upperRow, labels: this.props.useFlats ? upperRowFlats : upperRowSharps, @@ -99,6 +107,6 @@ class KeyboardButtons extends React.Component { } } KeyboardButtons.contextTypes = { - synth: React.PropTypes.object, + synth: PropTypes.object, }; export default KeyboardButtons; diff --git a/js/modes/free-play.jsx b/js/modes/free-play.jsx index 1b02ad7..23189cf 100644 --- a/js/modes/free-play.jsx +++ b/js/modes/free-play.jsx @@ -4,6 +4,7 @@ import Teoria from 'teoria'; import Card from 'material-ui/Card/Card'; import CardTitle from 'material-ui/Card/CardTitle'; import CardText from 'material-ui/Card/CardText'; +import PropTypes from 'prop-types'; import SheetMusicView from '../sheet-music-view.jsx'; import KeyboardButtons from '../keyboard-buttons'; import * as Midi from '../midi' @@ -184,8 +185,8 @@ export default class FreePlay extends React.Component { } } FreePlay.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, + snackbar: PropTypes.func, + appbar: PropTypes.func, }; FreePlay.prefsDefinitions = [ { diff --git a/js/modes/perfect-pitch-practice.jsx b/js/modes/perfect-pitch-practice.jsx index ab117d9..6f85342 100644 --- a/js/modes/perfect-pitch-practice.jsx +++ b/js/modes/perfect-pitch-practice.jsx @@ -6,6 +6,7 @@ import Card from 'material-ui/Card/Card'; import CardTitle from 'material-ui/Card/CardTitle'; import CardText from 'material-ui/Card/CardText'; import KeyboardButtons from '../keyboard-buttons'; +import PropTypes from 'prop-types'; import * as Midi from '../midi'; /** @@ -213,9 +214,9 @@ export default class PerfectPitchPractice extends React.Component { } } PerfectPitchPractice.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, - synth: React.PropTypes.object, + snackbar: PropTypes.func, + appbar: PropTypes.func, + synth: PropTypes.object, }; PerfectPitchPractice.prefsDefinitions = [ { diff --git a/js/modes/sight-reading-practice.jsx b/js/modes/sight-reading-practice.jsx index 682bc9f..c33aef9 100644 --- a/js/modes/sight-reading-practice.jsx +++ b/js/modes/sight-reading-practice.jsx @@ -9,6 +9,7 @@ import SheetMusicView from '../sheet-music-view.jsx'; import KeyboardButtons from '../keyboard-buttons'; import * as Midi from '../midi'; import PD from 'probability-distributions'; +import PropTypes from 'prop-types'; // Private constants const possibleClefs = ['treble', 'bass', 'alto']; @@ -482,8 +483,8 @@ export default class SightReadingPractice extends React.Component { } } SightReadingPractice.contextTypes = { - snackbar: React.PropTypes.func, - appbar: React.PropTypes.func, + snackbar: PropTypes.func, + appbar: PropTypes.func, }; SightReadingPractice.prefsDefinitions = [ { diff --git a/package-lock.json b/package-lock.json index acae381..39d452d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@types/react": "^18.2.58", "@types/vexflow": "^1.2.34", "babel-loader": "^9.1.3", "buffer": "^6.0.3", @@ -22,6 +23,7 @@ "material-ui": "0.15.0", "nosleep": "bhspitmonkey/NoSleep.js", "probability-distributions": "^0.9.1", + "prop-types": "^15.8.1", "react": "15.0.2", "react-dom": "15.0.2", "react-hot-loader": "1.3.0", @@ -2349,12 +2351,29 @@ "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", "dev": true }, + "node_modules/@types/react": { + "version": "18.2.58", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.58.tgz", + "integrity": "sha512-TaGvMNhxvG2Q0K0aYxiKfNDS5m5ZsoIBBbtfUorxdH4NGSXIlYvZxLJI+9Dd3KjeB3780bciLyAb7ylO8pLhPw==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/retry": { "version": "0.12.2", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz", "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==", "dev": true }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true + }, "node_modules/@types/send": { "version": "0.17.4", "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", @@ -3666,6 +3685,12 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, "node_modules/currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", diff --git a/package.json b/package.json index f7d44cd..f2994e7 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@types/react": "^18.2.58", "@types/vexflow": "^1.2.34", "babel-loader": "^9.1.3", "buffer": "^6.0.3", @@ -16,6 +17,7 @@ "material-ui": "0.15.0", "nosleep": "bhspitmonkey/NoSleep.js", "probability-distributions": "^0.9.1", + "prop-types": "^15.8.1", "react": "15.0.2", "react-dom": "15.0.2", "react-hot-loader": "1.3.0",