[react] fix: the inspect view popup when clicking on a path or point, fix missing translations in the xray path and point components (#256)

This fixes some react wiring in the inspect view.

The drillProps argument contains the info function which displays the popup. Also `strings` should be passed for translation, instead of the t function.

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/256
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/Pattern/part.mjs

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import { getId, getProps } from './utils.mjs'
 
 export const PartInner = forwardRef(
-  ({ stackName, partName, part, settings, components, strings }, ref) => {
+  ({ stackName, partName, part, settings, components, strings, drillProps }, ref) => {
     const { Group, Path, Point, Snippet } = components
 
     return (
@@ -15,7 +15,7 @@ export const PartInner = forwardRef(
             topLeft={part.topLeft}
             bottomRight={part.bottomRight}
             units={settings[0].units}
-            {...{ stackName, partName, pathName, part, settings, components, strings }}
+            {...{ stackName, partName, pathName, part, settings, components, strings, drillProps }}
           />
         ))}
         {Object.keys(part.points).map((pointName) => (
@@ -24,14 +24,23 @@ export const PartInner = forwardRef(
             point={part.points[pointName]}
             topLeft={part.topLeft}
             bottomRight={part.bottomRight}
-            {...{ stackName, partName, pointName, part, settings, components, strings }}
+            {...{ stackName, partName, pointName, part, settings, components, strings, drillProps }}
           />
         ))}
         {Object.keys(part.snippets).map((snippetName) => (
           <Snippet
             key={snippetName}
             snippet={part.snippets[snippetName]}
-            {...{ stackName, partName, snippetName, part, settings, components, strings }}
+            {...{
+              stackName,
+              partName,
+              snippetName,
+              part,
+              settings,
+              components,
+              strings,
+              drillProps,
+            }}
           />
         ))}
       </Group>
@@ -41,12 +50,12 @@ export const PartInner = forwardRef(
 
 PartInner.displayName = 'PartInner'
 
-export const Part = ({ stackName, partName, part, settings, components, strings }) => {
+export const Part = ({ stackName, partName, part, settings, components, strings, drillProps }) => {
   const { Group } = components
 
   return (
     <Group {...getProps(part)} id={getId({ settings, stackName, partName })}>
-      <PartInner {...{ stackName, partName, part, settings, components, strings }} />
+      <PartInner {...{ stackName, partName, part, settings, components, strings, drillProps }} />
     </Group>
   )
 }

packages/react/components/Pattern/stack.mjs

@@ -1,14 +1,14 @@
 import React from 'react'
 import { getProps } from './utils.mjs'
 
-export const Stack = ({ stackName, stack, settings, components, strings }) => {
+export const Stack = ({ stackName, stack, settings, components, strings, drillProps }) => {
   const { Group, Part, Grid } = components
 
   return (
     <Group {...getProps(stack)}>
       {settings[0].paperless ? <Grid {...{ stack, stackName }} /> : null}
       {[...stack.parts].map((part, key) => (
-        <Part {...{ settings, components, part, stackName, strings }} key={key} />
+        <Part {...{ settings, components, part, stackName, strings, drillProps }} key={key} />
       ))}
     </Group>
   )

packages/react/components/Xray/index.mjs

@@ -17,11 +17,11 @@ export const Xray = forwardRef((props, ref) => {
   // desctructure props
   const {
     renderProps = false,
-    t = (string) => string,
     children = false,
     className = 'freesewing pattern',
     components = {},
     drillProps = {},
+    strings = [],
   } = props
 
   // Merge pattern, default, and custom components
@@ -57,7 +57,7 @@ export const Xray = forwardRef((props, ref) => {
                 stack={renderProps.stacks[stackName]}
                 settings={renderProps.settings}
                 components={mergedComponents}
-                t={t}
+                strings={strings}
                 drillProps={drillProps}
               />
             ))}

packages/react/components/Xray/path.mjs

@@ -21,7 +21,7 @@ export const PathXray = ({
   path,
   settings,
   components,
-  t,
+  strings,
   drillProps = {},
 }) => {
   /*
@@ -87,7 +87,7 @@ export const PathXray = ({
   return (
     <g>
       {output}
-      <Path {...{ stackName, pathName, path, part, settings, components, t, drillProps }} />
+      <Path {...{ stackName, pathName, path, part, settings, components, strings, drillProps }} />
     </g>
   )
 }

packages/react/components/Xray/point.mjs

@@ -14,7 +14,7 @@ export const PointXray = ({
   point,
   settings,
   components,
-  t,
+  strings,
   drillProps = {},
 }) => {
   // Don't include parts outside the part bounding box
@@ -32,7 +32,9 @@ export const PointXray = ({
 
   return (
     <>
-      <Point {...{ stackName, pointName, part, point, settings, components, t, drillProps }} />
+      <Point
+        {...{ stackName, pointName, part, point, settings, components, strings, drillProps }}
+      />
       <circle
         cx={point.x}
         cy={point.y}