[react] fix: Various fixes for the measurement view and editor (#233)

Various fixes for the measurement view and editor:

- Translate measurements in the measurement set view and align the measurements table properly
- Display a question mark next to the measurements that links to the corresponding docs page

This fixes a part of #226

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/233
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>

packages/react/components/Editor/components/MeasurementsEditor.mjs

@@ -9,9 +9,10 @@ import { MeasurementInput } from '@freesewing/react/components/Input'
  * @param {object} props.state - The ViewWrapper state object
  * @param {object} props.state.settings - The current settings
  * @param {object} props.update - Helper object for updating the ViewWrapper state
+ * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement
  * @return {function} MeasurementsEditor - React component
  */
-export const MeasurementsEditor = ({ Design, update, state }) => {
+export const MeasurementsEditor = ({ Design, update, state, helpProvider = false }) => {
   /*
    * Helper method to handle state updates for measurements
    */
@@ -34,6 +35,7 @@ export const MeasurementsEditor = ({ Design, update, state }) => {
               original={state.settings.measurements?.[m]}
               update={(m, newVal) => onUpdate(m, newVal)}
               id={`edit-${m}`}
+              helpProvider={helpProvider}
             />
           ))}
           <br />

packages/react/components/Editor/components/views/MeasurementsView.mjs

@@ -37,6 +37,7 @@ const iconClasses = {
  * @param {Array} props.missingMeasurements - List of missing measurements for the current design
  * @param {Object} props.state - The editor state object
  * @param {Object} props.update - Helper object for updating the editor state
+ * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement
  * @return {Function} MeasurementsView - React component
  */
 export const MeasurementsView = ({
@@ -46,6 +47,7 @@ export const MeasurementsView = ({
   state,
   update,
   design,
+  measurementHelpProvider = false,
 }) => {
   /*
    * If there is no view set, completing measurements will switch to the view picker
@@ -168,7 +170,10 @@ export const MeasurementsView = ({
       </div>
       <p className="tw-text-left">You can manually set or override measurements below.</p>
     </Fragment>,
-    <MeasurementsEditor key={2} {...{ Design, config, update, state }} />,
+    <MeasurementsEditor
+      key={2}
+      {...{ Design, config, update, state, helpProvider: measurementHelpProvider }}
+    />,
     'edit',
   ])
 

packages/react/components/Editor/index.mjs

@@ -40,6 +40,7 @@ export const Editor = ({
   preload = {},
   setTitle = false,
   localDesigns = {},
+  measurementHelpProvider = false,
 }) => {
   /*
    * Bundle all designs
@@ -144,6 +145,7 @@ export const Editor = ({
               {...extraProps}
               {...{ view, update, designs, config: editorConfig }}
               state={passDownState}
+              measurementHelpProvider={measurementHelpProvider}
             />
           </LoadingStatusContextProvider>
         </ModalContextProvider>