Add react component typings (#791)

mfisher87 · web-flow · commit 5a93217bb736 · 2025-07-02T09:29:18.000+02:00
diff --git a/packages/base/src/annotations/components/Annotation.tsx b/packages/base/src/annotations/components/Annotation.tsx
@@ -19,12 +19,12 @@ export interface IAnnotationProps {
   children?: JSX.Element[] | JSX.Element;
 }
 
-const Annotation = ({
+const Annotation: React.FC<IAnnotationProps> = ({
   itemId,
   annotationModel,
   rightPanelModel,
   children,
-}: IAnnotationProps) => {
+}) => {
   const [messageContent, setMessageContent] = useState('');
   const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
     rightPanelModel?.jGISModel,
diff --git a/packages/base/src/annotations/components/AnnotationFloater.tsx b/packages/base/src/annotations/components/AnnotationFloater.tsx
@@ -4,10 +4,10 @@ import React, { useState } from 'react';
 
 import Annotation, { IAnnotationProps } from './Annotation';
 
-const AnnotationFloater = ({
+const AnnotationFloater: React.FC<IAnnotationProps> = ({
   itemId,
   annotationModel: model,
-}: IAnnotationProps) => {
+}) => {
   const annotation = model.getAnnotation(itemId);
   const [isOpen, setIsOpen] = useState(annotation?.open);
 
diff --git a/packages/base/src/annotations/components/Message.tsx b/packages/base/src/annotations/components/Message.tsx
@@ -18,7 +18,7 @@ interface IProps {
   user?: User.IIdentity;
 }
 
-export const Message = (props: IProps): JSX.Element => {
+export const Message: React.FC<IProps> = props => {
   const { self, message, user } = props;
   const color = user?.color ?? 'black';
   const author = user?.display_name ?? '';
diff --git a/packages/base/src/dialogs/ProcessingFormDialog.tsx b/packages/base/src/dialogs/ProcessingFormDialog.tsx
@@ -34,7 +34,7 @@ export interface IProcessingFormWrapperProps
   formErrorSignalPromise?: PromiseDelegate<Signal<Dialog<any>, boolean>>;
 }
 
-const ProcessingFormWrapper = (props: IProcessingFormWrapperProps) => {
+const ProcessingFormWrapper: React.FC<IProcessingFormWrapperProps> = props => {
   const [ready, setReady] = React.useState<boolean>(false);
 
   const okSignal = React.useRef<Signal<Dialog<any>, number>>();
diff --git a/packages/base/src/dialogs/layerBrowserDialog.tsx b/packages/base/src/dialogs/layerBrowserDialog.tsx
@@ -25,13 +25,13 @@ interface ILayerBrowserDialogProps {
   cancel: () => void;
 }
 
-export const LayerBrowserComponent = ({
+export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
   model,
   registry,
   formSchemaRegistry,
   okSignalPromise,
   cancel,
-}: ILayerBrowserDialogProps) => {
+}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [activeLayers, setActiveLayers] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] =
diff --git a/packages/base/src/dialogs/layerCreationFormDialog.tsx b/packages/base/src/dialogs/layerCreationFormDialog.tsx
@@ -29,7 +29,9 @@ export interface ICreationFormDialogOptions extends ICreationFormProps {
   title: string;
 }
 
-export const CreationFormWrapper = (props: ICreationFormWrapperProps) => {
+export const CreationFormWrapper: React.FC<
+  ICreationFormWrapperProps
+> = props => {
   const [ready, setReady] = React.useState<boolean>(false);
 
   const okSignal = React.useRef<Signal<Dialog<any>, number>>();
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
@@ -14,10 +14,10 @@ interface ICanvasSelectComponentProps {
   setSelected: (item: any) => void;
 }
 
-const CanvasSelectComponent = ({
+const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   selectedRamp,
   setSelected,
-}: ICanvasSelectComponentProps) => {
+}) => {
   const colorRampNames = [
     'jet',
     // 'hsv', 11 steps min
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
@@ -25,13 +25,13 @@ export type ColorRampOptions = {
   selectedMode: string;
 };
 
-const ColorRamp = ({
+const ColorRamp: React.FC<IColorRampProps> = ({
   layerParams,
   modeOptions,
   classifyFunc,
   showModeRow,
   showRampSelector,
-}: IColorRampProps) => {
+}) => {
   const [selectedRamp, setSelectedRamp] = useState('');
   const [selectedMode, setSelectedMode] = useState('');
   const [numberOfShades, setNumberOfShades] = useState('');
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx
@@ -8,7 +8,11 @@ interface IColorRampEntryProps {
   onClick: (item: any) => void;
 }
 
-const ColorRampEntry = ({ index, colorMap, onClick }: IColorRampEntryProps) => {
+const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
+  index,
+  colorMap,
+  onClick,
+}) => {
   const canvasHeight = 30;
 
   useEffect(() => {
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
@@ -6,13 +6,13 @@ interface IModeSelectRowProps {
   setSelectedMode: (value: string) => void;
   modeOptions: string[];
 }
-const ModeSelectRow = ({
+const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
   numberOfShades,
   setNumberOfShades,
   selectedMode,
   setSelectedMode,
   modeOptions,
-}: IModeSelectRowProps) => {
+}) => {
   return (
     <div className="jp-gis-symbology-row">
       <div className="jp-gis-color-ramp-div">
diff --git a/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx b/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx
@@ -10,11 +10,11 @@ interface IStopContainerProps {
   setStopRows: (stops: IStopRow[]) => void;
 }
 
-const StopContainer = ({
+const StopContainer: React.FC<IStopContainerProps> = ({
   selectedMethod,
   stopRows,
   setStopRows,
-}: IStopContainerProps) => {
+}) => {
   const addStopRow = () => {
     setStopRows([
       {
diff --git a/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx b/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx
@@ -5,22 +5,22 @@ import React, { useEffect, useRef } from 'react';
 
 import { IStopRow } from '@/src/dialogs/symbology/symbologyDialog';
 
-const StopRow = ({
-  index,
-  value,
-  outputValue,
-  stopRows,
-  setStopRows,
-  deleteRow,
-  useNumber,
-}: {
+const StopRow: React.FC<{
   index: number;
   value: number;
   outputValue: number | number[];
   stopRows: IStopRow[];
   setStopRows: (stopRows: IStopRow[]) => void;
   deleteRow: () => void;
   useNumber?: boolean;
+}> = ({
+  index,
+  value,
+  outputValue,
+  stopRows,
+  setStopRows,
+  deleteRow,
+  useNumber,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
diff --git a/packages/base/src/dialogs/symbology/symbologyDialog.tsx b/packages/base/src/dialogs/symbology/symbologyDialog.tsx
@@ -39,12 +39,12 @@ export interface IStopRow {
   output: number | number[];
 }
 
-const SymbologyDialog = ({
+const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
-}: ISymbologyDialogProps) => {
+}) => {
   const [selectedLayer, setSelectedLayer] = useState<string | null>(null);
   const [componentToRender, setComponentToRender] = useState<any>(null);
 
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx b/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx
@@ -4,13 +4,13 @@ import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import MultibandColor from './types/MultibandColor';
 import SingleBandPseudoColor from './types/SingleBandPseudoColor';
 
-const TiffRendering = ({
+const TiffRendering: React.FC<ISymbologyDialogProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
-}: ISymbologyDialogProps) => {
+}) => {
   const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
   const [selectedRenderType, setSelectedRenderType] = useState<string>();
   const [componentToRender, setComponentToRender] = useState<any>(null);
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx b/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx
@@ -22,15 +22,15 @@ interface IBandRowProps {
  * @param setBandRows Function to update band rows in parent
  * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
  */
-const BandRow = ({
+const BandRow: React.FC<IBandRowProps> = ({
   label,
   index,
   bandRow,
   bandRows,
   setSelectedBand,
   setBandRows,
   isMultibandColor,
-}: IBandRowProps) => {
+}) => {
   const [minValue, setMinValue] = useState(bandRow?.stats.minimum);
   const [maxValue, setMaxValue] = useState(bandRow?.stats.maximum);
 
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx
@@ -16,12 +16,12 @@ interface ISelectedBands {
 
 type rgbEnum = keyof ISelectedBands;
 
-const MultibandColor = ({
+const MultibandColor: React.FC<ISymbologyDialogProps> = ({
   model,
   okSignalPromise,
   cancel,
   layerId,
-}: ISymbologyDialogProps) => {
+}) => {
   if (!layerId) {
     return;
   }
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
@@ -23,12 +23,12 @@ import { GlobalStateDbManager } from '@/src/store';
 
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
 
-const SingleBandPseudoColor = ({
+const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   model,
   okSignalPromise,
   cancel,
   layerId,
-}: ISymbologyDialogProps) => {
+}) => {
   if (!layerId) {
     return;
   }
diff --git a/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx b/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
@@ -101,13 +101,13 @@ const useLayerRenderType = (
     setSelectedRenderType(renderType);
   }, []);
 
-const VectorRendering = ({
+const VectorRendering: React.FC<ISymbologyDialogProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
-}: ISymbologyDialogProps) => {
+}) => {
   const [selectedRenderType, setSelectedRenderType] = useState<
     VectorRenderType | undefined
   >();
diff --git a/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx b/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
@@ -6,11 +6,11 @@ interface IValueSelectProps {
   setSelectedValue: (value: string) => void;
 }
 
-const ValueSelect = ({
+const ValueSelect: React.FC<IValueSelectProps> = ({
   featureProperties,
   selectedValue,
   setSelectedValue,
-}: IValueSelectProps) => {
+}) => {
   return (
     <div className="jp-gis-symbology-row">
       <label htmlFor={'vector-value-select'}>Value:</label>
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx
@@ -5,14 +5,14 @@ import React, { useEffect, useRef, useState } from 'react';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
 import { ISymbologyDialogWithAttributesProps } from '../../symbologyDialog';
 
-const Canonical = ({
+const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
   selectableAttributesAndValues,
-}: ISymbologyDialogWithAttributesProps) => {
+}) => {
   const selectedValueRef = useRef<string>();
   const [selectedValue, setSelectedValue] = useState('');
 
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
@@ -13,15 +13,15 @@ import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
 import { SymbologyTab } from '@/src/types';
 
-const Categorized = ({
+const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
   symbologyTab,
   selectableAttributesAndValues,
-}: ISymbologyTabbedDialogWithAttributesProps) => {
+}) => {
   const selectedAttributeRef = useRef<string>();
   const stopRowsRef = useRef<IStopRow[]>();
   const colorRampOptionsRef = useRef<ReadonlyJSONObject | undefined>();
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
@@ -4,13 +4,13 @@ import React, { useEffect, useRef, useState } from 'react';
 import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 
-const Heatmap = ({
+const Heatmap: React.FC<ISymbologyDialogProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
-}: ISymbologyDialogProps) => {
+}) => {
   if (!layerId) {
     return;
   }
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
@@ -4,14 +4,14 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ISymbologyTabbedDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import { IParsedStyle, parseColor } from '@/src/tools';
 
-const SimpleSymbol = ({
+const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
   model,
   state,
   okSignalPromise,
   cancel,
   layerId,
   symbologyTab,
-}: ISymbologyTabbedDialogProps) => {
+}) => {
   const styleRef = useRef<IParsedStyle>();
 
   const [style, setStyle] = useState<IParsedStyle>({
diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -70,7 +70,7 @@ export interface IBaseFormProps {
   formErrorSignal?: Signal<Dialog<any>, boolean>;
 }
 
-const WrappedFormComponent = (props: any): JSX.Element => {
+const WrappedFormComponent: React.FC<any> = props => {
   const { fields, ...rest } = props;
   return (
     <FormComponent
diff --git a/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx b/packages/base/src/formbuilder/objectform/fileselectorwidget.tsx
@@ -5,7 +5,7 @@ import React, { useState, useEffect, useRef } from 'react';
 
 import { LayerCreationFormDialog } from '@/src/dialogs/layerCreationFormDialog';
 
-export const FileSelectorWidget = (props: any) => {
+export const FileSelectorWidget: React.FC<any> = props => {
   const { options } = props;
   const { docManager, formOptions } = options;
 
diff --git a/packages/base/src/mainview/CollaboratorPointers.tsx b/packages/base/src/mainview/CollaboratorPointers.tsx
@@ -18,7 +18,9 @@ export type ClientPointer = {
   lonLat: { latitude: number; longitude: number };
 };
 
-const CollaboratorPointers = ({ clients }: ICollaboratorPointersProps) => {
+const CollaboratorPointers: React.FC<ICollaboratorPointersProps> = ({
+  clients,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/packages/base/src/mainview/FollowIndicator.tsx b/packages/base/src/mainview/FollowIndicator.tsx
@@ -5,7 +5,9 @@ interface IFollowIndicatorProps {
   remoteUser: User.IIdentity | null | undefined;
 }
 
-export function FollowIndicator({ remoteUser }: IFollowIndicatorProps) {
+export const FollowIndicator: React.FC<IFollowIndicatorProps> = ({
+  remoteUser,
+}) => {
   return remoteUser?.display_name ? (
     <div
       style={{
@@ -18,4 +20,4 @@ export function FollowIndicator({ remoteUser }: IFollowIndicatorProps) {
       {`Following ${remoteUser.display_name}`}
     </div>
   ) : null;
-}
+};
diff --git a/packages/base/src/mainview/TemporalSlider.tsx b/packages/base/src/mainview/TemporalSlider.tsx
diff --git a/packages/base/src/panelview/components/filter-panel/Filter.tsx b/packages/base/src/panelview/components/filter-panel/Filter.tsx
diff --git a/packages/base/src/panelview/components/filter-panel/FilterRow.tsx b/packages/base/src/panelview/components/filter-panel/FilterRow.tsx
diff --git a/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx b/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
diff --git a/packages/base/src/panelview/components/layers.tsx b/packages/base/src/panelview/components/layers.tsx
diff --git a/packages/base/src/shared/components/Calendar.tsx b/packages/base/src/shared/components/Calendar.tsx
diff --git a/packages/base/src/shared/components/Pagination.tsx b/packages/base/src/shared/components/Pagination.tsx
diff --git a/packages/base/src/shared/components/Popover.tsx b/packages/base/src/shared/components/Popover.tsx
diff --git a/packages/base/src/shared/components/Tabs.tsx b/packages/base/src/shared/components/Tabs.tsx
diff --git a/packages/base/src/statusbar/StatusBar.tsx b/packages/base/src/statusbar/StatusBar.tsx

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ interface IProps {`
`18`	`18`	`user?: User.IIdentity;`
`19`	`19`	`}`
`20`	`20`
`21`		`-export const Message = (props: IProps): JSX.Element => {`
	`21`	`+export const Message: React.FC<IProps> = props => {`
`22`	`22`	`const { self, message, user } = props;`
`23`	`23`	`const color = user?.color ?? 'black';`
`24`	`24`	`const author = user?.display_name ?? '';`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export interface IProcessingFormWrapperProps`
`34`	`34`	`formErrorSignalPromise?: PromiseDelegate<Signal<Dialog<any>, boolean>>;`
`35`	`35`	`}`
`36`	`36`
`37`		`-const ProcessingFormWrapper = (props: IProcessingFormWrapperProps) => {`
	`37`	`+const ProcessingFormWrapper: React.FC<IProcessingFormWrapperProps> = props => {`
`38`	`38`	`const [ready, setReady] = React.useState<boolean>(false);`
`39`	`39`
`40`	`40`	`const okSignal = React.useRef<Signal<Dialog<any>, number>>();`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,9 @@ export interface ICreationFormDialogOptions extends ICreationFormProps {`
`29`	`29`	`title: string;`
`30`	`30`	`}`
`31`	`31`
`32`		`-export const CreationFormWrapper = (props: ICreationFormWrapperProps) => {`
	`32`	`+export const CreationFormWrapper: React.FC<`
	`33`	`+ ICreationFormWrapperProps`
	`34`	`+> = props => {`
`33`	`35`	`const [ready, setReady] = React.useState<boolean>(false);`
`34`	`36`
`35`	`37`	`const okSignal = React.useRef<Signal<Dialog<any>, number>>();`