👌 add correct tsdocs

packages/common-ui-web/src/components/DynamicSVG/hooks/types.ts

@@ -6,21 +6,21 @@ import { SVGProps } from 'react';
  */
 export interface DynamicSVGCustomizationFunctions {
   /**
-   * A callback used to customize SVG tags in a DynamicSVG component based on the HTMLElement itself, or the IDs of the
+   * A callback used to customize SVG tags in a DynamicSVG component based on the HTMLElement itself, or the Elements of the
    * groups this element is part of.
    *
    * @param element The element to apply the custom attributes to.
-   * @param groups SVG group elements this element is part of (the IDs are in order).
+   * @param groups SVG group elements this element is part of (the elements are in order).
    * @return This callback should return a set of custom HTML attributes to pass to the element or `null` for no
    * attributes.
    */
   getAttributes?: (element: SVGElement, groups: SVGGElement[]) => SVGProps<SVGElement>;
   /**
    * A callback used to customize the inner text of SVG tags in a DynamicSVG component based on the HTMLElement itself,
-   * or the IDs of the groups this element is part of.
+   * or the Elements of the groups this element is part of.
    *
    * @param element The element to set the innerText.
-   * @param groups SVG group elements this element is part of (the IDs are in order).
+   * @param groups SVG group elements this element is part of (the elements are in order).
    * @return This callback should return a string to use for the innerText of the element or `null` for no innerText.
    */
   getInnerText?: (element: SVGElement, groups: SVGGElement[]) => string | null;
@@ -36,7 +36,7 @@ export interface SVGElementCustomProps {
    */
   element: SVGElement;
   /**
-   * The IDs of the SVG groups this element is part of (in order).
+   * The Elements of the SVG groups this element is part of (in order).
    *
    * @default []
    */

packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.style.ts

@@ -4,7 +4,7 @@ export const styles: Styles = {
   notCarPart: {
     display: 'none',
   },
-  selectAble: {
+  selectable: {
     pointerEvents: 'fill',
     cursor: 'pointer',
   },

packages/common-ui-web/src/components/VehicleDynamicWireframe/VehicleDynamicWireframe.tsx

@@ -10,21 +10,28 @@ import { partSelectionWireframes, vehicles } from '@monkvision/sights';
 import { DynamicSVG, DynamicSVGCustomizationFunctions } from '../DynamicSVG';
 import { styles } from './VehicleDynamicWireframe.style';
 
+/**
+ * Props accepted by the VehicleDynamicWireframe component.
+ */
 export interface VehicleDynamicWireframeProps {
   /**
    * Vehicle type to display the wireframe for.
    */
   vehicleType: VehicleType;
   /**
    * The orientation of the wireframe.
+   *
+   * @default PartSelectionOrientation.FRONT_LEFT
    */
   orientation?: PartSelectionOrientation;
   /**
-   * Callback to return the clicked part.
+   * Callback when the user clicks a part.
    */
   onClickPart?: (parts: VehiclePart) => void;
   /**
-   * Callback to return the attributes of the SVG HTML element from parent based on style.
+   * Callback used to customize the display style of each vehicle part on the wireframe. See `DynamicSVGCustomizationFunctions` for more details.
+   *
+   * @see DynamicSVGCustomizationFunctions
    */
   getPartAttributes?: (part: VehiclePart) => SVGProps<SVGElement>;
 }
@@ -53,7 +60,7 @@ function createGetAttributesCallback(
     }
     if (element.classList.contains('selectable') && element.id) {
       attributes.onClick = () => onClickPart(part);
-      attributes.style = { ...attributes.style, ...styles['selectAble'] };
+      attributes.style = { ...attributes.style, ...styles['selectable'] };
     }
     return attributes;
   };

packages/common-ui-web/src/components/VehicleDynamicWireframe/index.ts

@@ -1 +1,4 @@
-export * from './VehicleDynamicWireframe';
+export {
+  VehicleDynamicWireframe,
+  type VehicleDynamicWireframeProps,
+} from './VehicleDynamicWireframe';

packages/common-ui-web/src/components/VehiclePartSelection/VehiclePartSelection.tsx

@@ -5,6 +5,9 @@ import { Icon } from '../../icons';
 import { VehicleDynamicWireframe, VehicleDynamicWireframeProps } from '../VehicleDynamicWireframe';
 import { styles } from './VehiclePartSelection.style';
 
+/**
+ * Props accepted by the VehiclePartSelection component
+ */
 export interface VehiclePartSelectionProps {
   /**
    * Vehicle type to display the wireframe for.
@@ -15,7 +18,7 @@ export interface VehiclePartSelectionProps {
    */
   orientation?: PartSelectionOrientation;
   /**
-   * Emit when change in the selected parts.
+   * Callback called when the selected parts are updated (the user selects or unselects a new part).
    */
   onPartsSelected?: (parts: VehiclePart[]) => void;
 }
@@ -28,8 +31,7 @@ const ORIENTATIONS = [
 ];
 
 /**
- * Component that displays a rotatable vehicle wireframe that allows the user to
- * select multiple vehicle parts.
+ * Component that displays a rotatable vehicle wireframe that allows the user to select multiple vehicle parts.
  */
 export function VehiclePartSelection({
   vehicleType,

packages/common-ui-web/src/components/VehiclePartSelection/index.ts

@@ -1 +1 @@
-export * from './VehiclePartSelection';
+export { VehiclePartSelection, type VehiclePartSelectionProps } from './VehiclePartSelection';