Migrate more components, fix spec documentation missing information

src/components/FieldArray.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
+import Fieldset from './Fieldset'
+
+type FieldArrayProps = InputArrayProps & {
+  name?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+export default class FieldArray extends React.Component<FieldArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputArray {...this.props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldColor.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Block from './Block'
+import InputColor, {InputColorProps} from './InputColor'
+
+
+type FieldColorProps = InputColorProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldColor extends React.Component<FieldColorProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputColor {...this.props} />
+    </Block>
+  }
+}
+

src/components/FieldEnum.tsx

@@ -3,15 +3,18 @@ import InputEnum, {InputEnumProps} from './InputEnum'
 import Fieldset from './Fieldset';
 
 
-type FieldEnumProps = InputEnumProps & { label : string };
+type FieldEnumProps = InputEnumProps & { 
+  label?: string;
+  fieldSpec?: {
+    doc: string
+  }
+};
 
 
 export default class FieldEnum extends React.Component<FieldEnumProps> {
   render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputEnum {...props} />
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputEnum {...this.props} />
     </Fieldset>
   }
 }

src/components/FieldJson.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import InputJson, {InputJsonProps} from './InputJson'
+
+
+type FieldJsonProps = InputJsonProps & {};
+
+
+export default class FieldJson extends React.Component<FieldJsonProps> {
+  render() {
+    return <InputJson {...this.props} />
+  }
+}
+

src/components/FieldMaxZoom.jsx → src/components/FieldMaxZoom.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 
-export default class FieldMaxZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type FieldMaxZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
   render() {
     return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
       error={this.props.error}

src/components/FieldMinZoom.jsx → src/components/FieldMinZoom.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 
-export default class FieldMinZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type FieldMinZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
   render() {
     return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
       error={this.props.error}

src/components/FieldMultiInput.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
+import Fieldset from './Fieldset'
+
+
+type FieldMultiInputProps = InputMultiInputProps & {
+  label?: string
+};
+
+
+export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputMultiInput {...props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldNumber.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import InputNumber, {InputNumberProps} from './InputNumber'
+import Block from './Block'
+
+
+type FieldNumberProps = InputNumberProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldNumber extends React.Component<FieldNumberProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputNumber {...this.props} />
+    </Block>
+  }
+}

src/components/FieldSelect.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Block from './Block'
+import InputSelect, {InputSelectProps} from './InputSelect'
+
+
+type FieldSelectProps = InputSelectProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldSelect extends React.Component<FieldSelectProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputSelect {...this.props}/>
+    </Block>
+  }
+}
+
+

src/components/FieldString.tsx

@@ -5,14 +5,15 @@ import InputString, {InputStringProps} from './InputString'
 type FieldStringProps = InputStringProps & {
   name?: string
   label?: string
+  fieldSpec?: {
+    doc: string
+  }
 };
 
 export default class FieldString extends React.Component<FieldStringProps> {
   render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputString {...props} />
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputString {...this.props} />
     </Block>
   }
 }

src/components/FieldUrl.tsx

@@ -5,16 +5,17 @@ import Block from './Block'
 
 type FieldUrlProps = InputUrlProps & {
   label: string;
+  fieldSpec?: {
+    doc: string
+  }
 };
 
 
 export default class FieldUrl extends React.Component<FieldUrlProps> {
   render () {
-    const {props} = this;
-
     return (
-      <Block label={this.props.label}>
-        <InputUrl {...props} />
+      <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+        <InputUrl {...this.props} />
       </Block>
     );
   }

src/components/Fieldset.tsx

@@ -3,7 +3,7 @@ import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 type FieldsetProps = {
-  label: string,
+  label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,
 };

src/components/InputArray.tsx

@@ -3,7 +3,7 @@ import InputString from './InputString'
 import InputNumber from './InputNumber'
 
 export type FieldArrayProps = {
-  value: string[]
+  value: string[] | number[]
   type?: string
   length?: number
   default?: string[] | number[]

src/components/InputJson.tsx

@@ -11,7 +11,7 @@ import stringifyPretty from 'json-stringify-pretty-compact'
 import '../util/codemirror-mgl';
 
 
-type InputJsonProps = {
+export type InputJsonProps = {
   layer: any
   maxHeight?: number
   onChange?(...args: unknown[]): unknown

src/components/InputMultiInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-type InputMultiInputProps = {
+export type InputMultiInputProps = {
   name?: string
   value: string
   options: any[]