code review: minor documentation improvements

.changeset/red-rice-applaud.md

@@ -2,4 +2,8 @@
 "@open-pioneer/coordinate-search": patch
 ---
 
-Coordinate viewer with added functionality to search for coordinates via input
+Added new components CoordinateSearch and CoordinateInput with functionality to search for coordinates via input.
+
+```
+
+```

src/packages/coordinate-search/CoordinateInput.tsx

@@ -42,7 +42,7 @@ const DEFAULT_PROJECTIONS = [
 ];
 
 /**
- * dropdown item of projection selection with an optional coordinate precision
+ * Dropdown item of projection selection with an optional coordinate precision
  */
 export interface ProjectionInput {
     /**
@@ -62,7 +62,7 @@ export interface ProjectionInput {
 }
 
 /**
- * dropdown item of projection selection with an optional coordinate precision
+ * Dropdown item of projection selection with an optional coordinate precision
  */
 export interface ProjectionOption {
     /**
@@ -82,7 +82,7 @@ export interface ProjectionOption {
 }
 
 /**
- * dropdown item of projection selection, must have a specified precision
+ * Dropdown item of projection selection, must have a specified precision
  */
 type ProjectionItem = Required<ProjectionOption>;
 
@@ -118,7 +118,7 @@ export interface CoordinateInputProps extends CommonComponentProps, MapModelProp
     projections?: ProjectionInput[];
 
     /**
-     * Optional event that gets called if some coordinates are entered or projection is changed by the user.
+     * Optional event that gets called if (valid) coordinates are entered or projection is changed by the user.
      */
     onSelect?: (selectProps: CoordinatesEvent) => void;
 
@@ -128,31 +128,31 @@ export interface CoordinateInputProps extends CommonComponentProps, MapModelProp
     onClear?: () => void;
 
     /**
-     * Insert input value and overwrite user input
+     * Insert input value and overwrite user input.
      */
     input?: Coordinate;
 
     /**
-     * Placeholder text to display when no input was entered by the user. Common usages:
+     * Placeholder text to display when no input is present. Common usages:
      * * hint for the user ("enter coordinate here")
      * * example coordinate ("12.345 67.890")
      * * current mouse position
      *
-     * If a Coordinate is given, it has to be in the current projection of the map
+     * If a coordinate is given, it has to be in the current projection of the map.
      */
     placeholder?: string | Coordinate;
 }
 
 /**
- * The `CoordinateInput` component can be used in an app to provide an validated input field for coordinates in a selected projection
+ * The `CoordinateInput` component can be used in an app to provide a validated input field for coordinates in a selected projection
  */
 export const CoordinateInput: FC<CoordinateInputProps> = (props) => {
     const { onSelect, onClear, projections = DEFAULT_PROJECTIONS, input, placeholder = "" } = props;
     const { containerProps } = useCommonComponentProps("coordinate-input", props);
     const { map } = useMapModel(props);
     const intl = useIntl();
     const olMap = map?.olMap;
-    const mapProjection = useProjection(olMap) ?? undefined; // projection of the map
+    const mapProjection = useProjection(olMap) ?? undefined;
 
     // Projection items (dropdown)
     const availableProjections = useProjectionItems(projections); // filter for projections that are known
@@ -654,8 +654,8 @@ function checkIfCoordsInProjectionsExtent(projection: Projection, coords: number
 // TODO: use NumberParser from core
 /* transforms the given coordinates to the given destination projection */
 function parseCoords(inputString: string, intl: PackageIntl) {
-    const thousandSeparator = /^de-?/.test(intl.locale) ? "." : /^en-?/.test(intl.locale) ? "," : "";
-    const inputStringWithoutThousandSeparator = inputString.replaceAll(thousandSeparator, "");
+    const separator = /^de-?/.test(intl.locale) ? "." : /^en-?/.test(intl.locale) ? "," : "";
+    const inputStringWithoutThousandSeparator = inputString.replaceAll(separator, "");
 
     const coordsString = inputStringWithoutThousandSeparator.replaceAll(",", ".");
 

src/packages/coordinate-search/README.md

@@ -1,15 +1,17 @@
 # @open-pioneer/coordinate-search
 
-This package provides UI components which allow users to search for coordinates in the map and provide an input field for coordinates.
+This package provides a UI component which allow users to search for coordinates in the map and provides component that is an input field for coordinates.
 
-## Usage Coordinate search
+## Usage coordinate search
 
 To integrate the coordinate search in your app, insert the following snippet:
 
 ```jsx
 <CoordinateSearch mapId="map_id" />
 ```
 
+### Configuration
+
 To define the selectable projections, set the optional `projections` property:
 
 ```jsx
@@ -41,7 +43,7 @@ If no `projections` are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:432
 
 To listen to the events `onSelect` and `onClear`, provide optional callback functions to the component.
 
-In case of the `onSelect` event, you can access the entered coordinate from the parameter `CoordinatesEvent`. The `onSelect` event gets called if you enter the input or if the selected projection is changed after entering an input.
+In case of the `onSelect` event, you can access the entered coordinate from the parameter `CoordinatesEvent`. The `onSelect` event gets called if a valid input is entered or if the selected projection is changed after entering an input.
 
 With the `onClear` option, you can set a callback function that gets called if the clear button is clicked.
 
@@ -57,14 +59,16 @@ With the `onClear` option, you can set a callback function that gets called if t
 />
 ```
 
-## Usage Coordinate input
+## Usage coordinate input
 
 To integrate the coordinate input component in your app, insert the following snippet:
 
 ```jsx
 <CoordinateInput mapId="map_id" />
 ```
 
+### Configure projections
+
 To define the selectable projections, set the optional `projections` property:
 
 ```jsx
@@ -92,16 +96,20 @@ The optional property `precision` allows to specify the number of display digits
 
 If no `projections` are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:4326) are the default options.
 
+### Set the input value
+
 To set the value of the input field from outside the component, set the optional `input` property of type `Coordinate`.
 
 The coordinates have to be in the projection of the map.
 
-If the value changes, the `onSelect` function is triggered.
+If the value changes, the `onSelect` function is triggered (see below).
 
 ```jsx
 <CoordinateInput mapId="map_id" input={[761166, 6692084]} />
 ```
 
+### Configure the placeholder
+
 To set the placeholder of the input field from outside the component, use the optional `placeholder` property of type `Coordinate` or `string`.
 
 Common usage for a `string` input is a supportive text like "Enter coordinates here".