Migration of jsx files to tsx 2 (#850)

This is to continue the work of migrating all the jsx files into tsx
files.
The MO is basically described here: #848.

About 7 files to go...

src/components/PropertyGroup.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import FieldFunction from './FieldFunction'
+import { LayerSpecification } from '@maplibre/maplibre-gl-style-spec'
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+
+/** Extract field spec by {@fieldName} from the {@layerType} in the
+ * style specification from either the paint or layout group */
+function getFieldSpec(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
+  const groupName = getGroupName(spec, layerType, fieldName)
+  const group = spec[groupName + '_' + layerType]
+  const fieldSpec = group[fieldName]
+  if(iconProperties.indexOf(fieldName) >= 0) {
+    return {
+      ...fieldSpec,
+      values: spec.$root.sprite.values
+    }
+  }
+  if(fieldName === 'text-font') {
+    return {
+      ...fieldSpec,
+      values: spec.$root.glyphs.values
+    }
+  }
+  return fieldSpec
+}
+
+function getGroupName(spec: any, layerType: LayerSpecification["type"], fieldName: string) {
+  const paint  = spec['paint_' + layerType] || {}
+  if (fieldName in paint) {
+    return 'paint'
+  } else {
+    return 'layout'
+  }
+}
+
+type PropertyGroupProps = {
+  layer: LayerSpecification
+  groupFields: string[]
+  onChange(...args: unknown[]): unknown
+  spec: any
+  errors?: unknown[]
+};
+
+export default class PropertyGroup extends React.Component<PropertyGroupProps> {
+  onPropertyChange = (property: string, newValue: any) => {
+    const group = getGroupName(this.props.spec, this.props.layer.type, property)
+    this.props.onChange(group ,property, newValue)
+  }
+
+  render() {
+    const {errors} = this.props;
+    const fields = this.props.groupFields.map(fieldName => {
+      const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
+
+      const paint = this.props.layer.paint || {}
+      const layout = this.props.layer.layout || {}
+      const fieldValue = fieldName in paint 
+        ? paint[fieldName as keyof typeof paint] 
+        : layout[fieldName as keyof typeof layout]
+      const fieldType = fieldName in paint ? 'paint' : 'layout';
+
+      return <FieldFunction
+        errors={errors}
+        onChange={this.onPropertyChange}
+        key={fieldName}
+        fieldName={fieldName}
+        value={fieldValue}
+        fieldType={fieldType}
+        fieldSpec={fieldSpec}
+      />
+    })
+
+    return <div className="maputnik-property-group">
+      {fields}
+    </div>
+  }
+}