Convert wdk-client and coreui javascript to typescript [Claude Code Web]

packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.jsx → packages/libs/coreui/src/components/Mesa/Components/AnchoredTooltip.tsx

@@ -4,11 +4,27 @@ import { debounce } from 'lodash';
 import MesaTooltip from './MesaTooltip';
 import Events from '../Utils/Events';
 
-class AnchoredTooltip extends React.Component {
-  constructor(props) {
+interface Position {
+  left?: number;
+  top?: number;
+}
+
+interface AnchoredTooltipProps {
+  className?: string;
+  children?: React.ReactNode;
+  content: React.ReactNode;
+  [key: string]: any;
+}
+
+class AnchoredTooltip extends React.Component<AnchoredTooltipProps> {
+  private childWrapperRef: React.RefObject<HTMLDivElement>;
+  private listeners: { scroll?: string; resize?: string } = {};
+  public updatePosition: (() => void) & { cancel: () => void };
+
+  constructor(props: AnchoredTooltipProps) {
     super(props);
     this.getPosition = this.getPosition.bind(this);
-    this.updatePosition = debounce(this.updatePosition.bind(this), 100);
+    this.updatePosition = debounce(this._updatePosition.bind(this), 100);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.componentWillUnmount = this.componentWillUnmount.bind(this);
     this.childWrapperRef = React.createRef();
@@ -22,19 +38,19 @@ class AnchoredTooltip extends React.Component {
   }
 
   componentWillUnmount() {
-    Object.values(this.listeners).forEach((listenerId) =>
-      Events.remove(listenerId)
-    );
+    Object.values(this.listeners).forEach((listenerId) => {
+      if (listenerId) Events.remove(listenerId);
+    });
     this.updatePosition.cancel();
   }
 
-  updatePosition() {
+  _updatePosition() {
     this.forceUpdate();
   }
 
-  getPosition() {
+  getPosition(): Position {
     const element = this.childWrapperRef.current;
-    if (!element) return undefined;
+    if (!element) return { left: 0, top: 0 };
 
     const offset = element.getBoundingClientRect();
     const { top, left } = offset;

packages/libs/coreui/src/components/Mesa/Components/BodyLayer.jsx → packages/libs/coreui/src/components/Mesa/Components/BodyLayer.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-class BodyLayer extends React.Component {
-  constructor(props) {
+interface BodyLayerProps {
+  [key: string]: any;
+}
+
+class BodyLayer extends React.Component<BodyLayerProps> {
+  private el: HTMLDivElement;
+
+  constructor(props: BodyLayerProps) {
     super(props);
     // XXX This will have to be guarded if we ever use server side rendering
     this.el = document.createElement('div');

packages/libs/coreui/src/components/Mesa/Components/Checkbox.jsx → packages/libs/coreui/src/components/Mesa/Components/Checkbox.tsx

@@ -1,13 +1,23 @@
 import React from 'react';
 import IndeterminateCheckbox from '../../inputs/checkboxes/IndeterminateCheckbox';
 
-class Checkbox extends React.Component {
-  constructor(props) {
+interface CheckboxProps {
+  checked: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  indeterminate?: boolean;
+}
+
+class Checkbox extends React.Component<CheckboxProps> {
+  constructor(props: CheckboxProps) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
+  handleClick(
+    isCheckedOrEvent: boolean | React.ChangeEvent<HTMLInputElement>
+  ): void {
     let { checked, onChange } = this.props;
     if (typeof onChange === 'function') onChange(!!checked);
   }
@@ -24,6 +34,8 @@ class Checkbox extends React.Component {
           <IndeterminateCheckbox
             checked={checked}
             indeterminate={indeterminate}
+            name=""
+            value=""
             onChange={this.handleClick}
           />
         ) : (

packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.jsx → packages/libs/coreui/src/components/Mesa/Components/HelpTrigger.tsx

@@ -2,8 +2,14 @@ import React from 'react';
 import Icon from './Icon';
 import AnchoredTooltip from './AnchoredTooltip';
 
-class HelpTrigger extends React.Component {
-  constructor(props) {
+interface HelpTriggerProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+class HelpTrigger extends React.Component<HelpTriggerProps> {
+  constructor(props: HelpTriggerProps) {
     super(props);
   }
 

packages/libs/coreui/src/components/Mesa/Components/Icon.jsx → packages/libs/coreui/src/components/Mesa/Components/Icon.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
-class Icon extends React.PureComponent {
+interface IconProps {
+  fa: string;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  style?: React.CSSProperties;
+}
+
+class Icon extends React.PureComponent<IconProps> {
   render() {
     let { fa, className, onClick, style } = this.props;
     className = `icon fa fa-${fa} ${className || ''}`;

packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.jsx → packages/libs/coreui/src/components/Mesa/Components/ModalBoundary.tsx

@@ -1,12 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { uid, makeClassifier } from '../Utils/Utils';
 
 const modalBoundaryClass = makeClassifier('ModalBoundary');
 
-class ModalBoundary extends React.Component {
-  constructor(props) {
+interface Modal {
+  _id?: string;
+  render: React.ComponentType<any>;
+  [key: string]: any;
+}
+
+interface ModalBoundaryProps {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+interface ModalBoundaryState {
+  modals: Modal[];
+}
+
+class ModalBoundary extends React.Component<
+  ModalBoundaryProps,
+  ModalBoundaryState
+> {
+  constructor(props: ModalBoundaryProps) {
     super(props);
 
     this.state = { modals: [] };
@@ -28,19 +45,19 @@ class ModalBoundary extends React.Component {
     );
   }
 
-  addModal(modal) {
+  addModal(modal: Modal): string {
     let { modals } = this.state;
     modal._id = uid();
     modals.push(modal);
     this.setState({ modals });
     return modal._id;
   }
 
-  triggerModalRefresh() {
+  triggerModalRefresh(): void {
     this.forceUpdate();
   }
 
-  removeModal(id) {
+  removeModal(id: string): void {
     let { modals } = this.state;
     let index = modals.findIndex((modal) => modal._id === id);
     if (index < 0) return;
@@ -55,7 +72,7 @@ class ModalBoundary extends React.Component {
 
   renderModalWrapper() {
     const { modals } = this.state;
-    const style = {
+    const style: React.CSSProperties = {
       top: 0,
       left: 0,
       width: '100vw',
@@ -76,10 +93,17 @@ class ModalBoundary extends React.Component {
   render() {
     const { children, style } = this.props;
     const ModalWrapper = this.renderModalWrapper;
-    const fullStyle = Object.assign({}, style ? style : {}, {
+    const fullStyle: React.CSSProperties = Object.assign(
+      {},
+      style ? style : {},
+      {
+        position: 'relative',
+      }
+    );
+    const zIndex = (z: number): React.CSSProperties => ({
       position: 'relative',
+      zIndex: z,
     });
-    const zIndex = (z) => ({ position: 'relative', zIndex: z });
 
     return (
       <div
@@ -95,15 +119,4 @@ class ModalBoundary extends React.Component {
   }
 }
 
-ModalBoundary.childContextTypes = {
-  addModal: PropTypes.func,
-  removeModal: PropTypes.func,
-  triggerModalRefresh: PropTypes.func,
-};
-
-ModalBoundary.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
-  style: PropTypes.object,
-};
-
 export default ModalBoundary;

packages/libs/coreui/src/components/Mesa/Components/OverScroll.jsx → packages/libs/coreui/src/components/Mesa/Components/OverScroll.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 
-class OverScroll extends React.Component {
-  constructor(props) {
+interface OverScrollProps {
+  className?: string;
+  height?: number;
+  children?: React.ReactNode;
+}
+
+class OverScroll extends React.Component<OverScrollProps> {
+  constructor(props: OverScrollProps) {
     super(props);
   }
 
   render() {
     let { className, height } = this.props;
     className = 'OverScroll' + (className ? ' ' + className : '');
-    height = typeof height === 'number' ? height + 'px' : 'none';
+    const heightValue = typeof height === 'number' ? height + 'px' : 'none';
 
-    const style = {
-      maxHeight: height,
+    const style: React.CSSProperties = {
+      maxHeight: heightValue,
       overflowY: 'auto',
     };
 

packages/libs/coreui/src/components/Mesa/Components/SelectBox.jsx → packages/libs/coreui/src/components/Mesa/Components/SelectBox.tsx

@@ -1,26 +1,39 @@
 import React from 'react';
 
-class SelectBox extends React.PureComponent {
-  constructor(props) {
+interface SelectOption {
+  name: string;
+  value: string | number;
+}
+
+interface SelectBoxProps {
+  name?: string;
+  className?: string;
+  selected?: string | number;
+  options?: (SelectOption | string | number)[];
+  onChange?: (value: string) => void;
+}
+
+class SelectBox extends React.PureComponent<SelectBoxProps> {
+  constructor(props: SelectBoxProps) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }
 
-  handleChange(e) {
+  handleChange(e: React.ChangeEvent<HTMLSelectElement>): void {
     const { onChange } = this.props;
     const value = e.target.value;
     if (onChange) onChange(value);
   }
 
-  getOptions() {
+  getOptions(): SelectOption[] {
     let { options } = this.props;
     if (!Array.isArray(options)) return [];
     options = options.map((option) => {
       return typeof option === 'object' && 'name' in option && 'value' in option
         ? option
         : { name: option.toString(), value: option };
     });
-    return options;
+    return options as SelectOption[];
   }
 
   render() {

packages/libs/coreui/src/components/Mesa/Components/Toggle.jsx → packages/libs/coreui/src/components/Mesa/Components/Toggle.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 
-import Icon from '../../../Components/Mesa/Components/Icon';
+import Icon from './Icon';
 
-class Toggle extends React.Component {
-  constructor(props) {
+interface ToggleProps {
+  enabled: boolean;
+  onChange?: (enabled: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+class Toggle extends React.Component<ToggleProps> {
+  constructor(props: ToggleProps) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick(e) {
+  handleClick(e: React.MouseEvent): void {
     let { enabled, onChange } = this.props;
     if (typeof onChange === 'function') onChange(!!enabled);
   }
@@ -18,19 +26,19 @@ class Toggle extends React.Component {
     className = 'Toggle' + (className ? ' ' + className : '');
     className += ' ' + (enabled ? 'Toggle-On' : 'Toggle-Off');
     className += disabled ? ' Toggle-Disabled' : '';
-    let offStyle = {
+    let offStyle: React.CSSProperties = {
       fontSize: '1.2rem',
       color: '#989898',
     };
-    let onStyle = Object.assign({}, offStyle, {
+    let onStyle: React.CSSProperties = Object.assign({}, offStyle, {
       color: '#198835',
     });
 
     return (
       <span
         style={style}
         className={className}
-        onClick={disabled ? null : this.handleClick}
+        onClick={disabled ? undefined : this.handleClick}
       >
         <Icon
           fa={enabled ? 'toggle-on' : 'toggle-off'}