Initial migration of jsx files

src/components/Doc.tsx

@@ -1,24 +1,33 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class Doc extends React.Component {
+const headers = {
-  static propTypes = {
+  js: "JS",
-    fieldSpec: PropTypes.object.isRequired,
+  android: "Android",
+  ios: "iOS",
+  macos: "macOS",
+};
+
+type DocProps = {
+  fieldSpec: {
+    doc?: string
+    values?: {
+      [key: string]: {
+        doc?: string
+      }
+    }
+    'sdk-support'?: {
+      [key: string]: typeof headers
+    }
   }
+};
 
+export default class Doc extends React.Component<DocProps> {
   render () {
     const {fieldSpec} = this.props;
 
     const {doc, values} = fieldSpec;
     const sdkSupport = fieldSpec['sdk-support'];
 
-    const headers = {
-      js: "JS",
-      android: "Android",
-      ios: "iOS",
-      macos: "macOS",
-    };
-
     const renderValues = (
       !!values &&
       // HACK: Currently we merge additional values into the style spec, so this is required
@@ -61,10 +70,9 @@ export default class Doc extends React.Component {
                   return (
                     <tr key={key}>
                       <td>{key}</td>
-                      {Object.keys(headers).map(k => {
+                      {Object.keys(headers).map((k) => {
-                        const value = supportObj[k];
                         if (supportObj.hasOwnProperty(k)) {
-                          return <td key={k}>{supportObj[k]}</td>;
+                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
                         }
                         else {
                           return <td key={k}>no</td>;

src/components/InputButton.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-export default class InputButton extends React.Component {
+type InputButtonProps = {
-  static propTypes = {
+  "data-wd-key"?: string
-    "data-wd-key": PropTypes.string,
+  "aria-label"?: string
-    "aria-label": PropTypes.string,
+  onClick?(...args: unknown[]): unknown
-    onClick: PropTypes.func,
+  style?: object
-    style: PropTypes.object,
+  className?: string
-    className: PropTypes.string,
+  children?: React.ReactNode
-    children: PropTypes.node,
+  disabled?: boolean
-    disabled: PropTypes.bool,
+  type?: typeof HTMLButtonElement.prototype.type
-    type: PropTypes.string,
+  id?: string
-    id: PropTypes.string,
+  title?: string
-    title: PropTypes.string,
+};
-  }
 
+export default class InputButton extends React.Component<InputButtonProps> {
   render() {
     return <button
       id={this.props.id}
@@ -32,4 +31,3 @@ export default class InputButton extends React.Component {
     </button>
   }
 }
-

src/components/InputCheckbox.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class InputCheckbox extends React.Component {
+type InputCheckboxProps = {
-  static propTypes = {
+  value?: boolean
-    value: PropTypes.bool,
+  style?: object
-    style: PropTypes.object,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+};
-  }
 
+export default class InputCheckbox extends React.Component<InputCheckboxProps> {
   static defaultProps = {
     value: false,
   }
@@ -36,4 +35,3 @@ export default class InputCheckbox extends React.Component {
     </div>
   }
 }
-

src/components/InputSelect.tsx

@@ -1,22 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class InputSelect extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string,
-    options: PropTypes.array.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    title: PropTypes.string,
-    'aria-label': PropTypes.string,
-  }
 
+type InputSelectProps = {
+  value: string
+  "data-wd-key"?: string
+  options: [string, any][] | string[]
+  style?: object
+  onChange(...args: unknown[]): unknown
+  title?: string
+  'aria-label'?: string
+};
 
+export default class InputSelect extends React.Component<InputSelectProps> {
   render() {
-    let options = this.props.options
+    let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
+      options = options.map((v) => [v as string, v as any])
     }
 
     return <select

src/components/InputString.tsx

@@ -1,26 +1,30 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class InputString extends React.Component {
+type InputStringProps = {
-  static propTypes = {
+  "data-wd-key"?: string
-    "data-wd-key": PropTypes.string,
+  value?: string
-    value: PropTypes.string,
+  style?: object
-    style: PropTypes.object,
+  default?: string
-    default: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  onInput(...args: unknown[]): unknown
-    onInput: PropTypes.func,
+  multi?: boolean
-    multi: PropTypes.bool,
+  required?: boolean
-    required: PropTypes.bool,
+  disabled?: boolean
-    disabled: PropTypes.bool,
+  spellCheck?: boolean
-    spellCheck: PropTypes.bool,
+  'aria-label'?: string
-    'aria-label': PropTypes.string,
+};
-  }
 
+type InputStringState = {
+  editing: boolean
+  value?: string
+}
+
+export default class InputString extends React.Component<InputStringProps, InputStringState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor(props) {
+  constructor(props: InputStringProps) {
     super(props)
     this.state = {
       editing: false,
@@ -28,7 +32,7 @@ export default class InputString extends React.Component {
     }
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props: InputStringProps, state: InputStringState) {
     if (!state.editing) {
       return {
         value: props.value
@@ -68,7 +72,7 @@ export default class InputString extends React.Component {
       style: this.props.style,
       value: this.state.value === undefined ? "" : this.state.value,
       placeholder: this.props.default,
-      onChange: e => {
+      onChange: (e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
         this.setState({
           editing: true,
           value: e.target.value

src/components/SmallError.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import './SmallError.scss';
 
 
-export default class SmallError extends React.Component {
+type SmallErrorProps = {
-  static propTypes = {
+  children?: React.ReactNode
-    children: PropTypes.node,
+};
-  }
 
+
+export default class SmallError extends React.Component<SmallErrorProps> {
   render () {
     return (
       <div className="SmallError">
@@ -16,4 +16,3 @@ export default class SmallError extends React.Component {
     );
   }
 }
-