@butternutbox/pawprint-native 0.1.0 → 0.2.0

package/src/components/molecules/PictureSelector/PictureSelector.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { View, Pressable, ViewProps, PressableProps } from "react-native"
+import Svg, { Path } from "react-native-svg"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
-import { Icon, type PawprintIcon } from "../../atoms/Icon"
 import { Illustration } from "../../atoms/Illustration"
 import { Typography } from "../../atoms/Typography"
 import { MessageCard } from "../MessageCard"
@@ -17,7 +17,6 @@ type PawprintIllustration = React.ComponentType<{
 export type PictureSelectorItem = {
   value: string
   illustration?: PawprintIllustration
-  icon?: PawprintIcon
   disabled?: boolean
   ariaLabel?: string
   insightTitle?: string
@@ -48,11 +47,44 @@ type PressableOwnForItem = Omit<PressableProps, "onPress" | "disabled">
 // ─── Pointer shape ────────────────────────────────────────────────────────────
 
 // TODO: add to pictureSelector.json — pointer is 24w × 12h triangle in Figma.
-// These aren't container dimensions — they're the triangle's border widths
-// (the CSS/RN triangle trick), which *are* the shape itself.
-const POINTER_HALF_WIDTH = 12
+const POINTER_WIDTH = 24
 const POINTER_HEIGHT = 12
 
+// Build an SVG path for the rounded-corner pointer: apex centered at the top
+// of a 24×12 box, bottom edge along the bottom. `r` is the corner radius. The
+// triangle is isoceles with apex interior angle 90° and bottom interior angles
+// 45°, so the inset distances along each edge from a vertex are r·cot(θ/2) —
+// i.e. r at the apex and r·(√2 + 1) at the bottom corners.
+const buildPointerPath = (r: number): string => {
+  const w = POINTER_WIDTH
+  const h = POINTER_HEIGHT
+  const apexInset = r
+  const botInset = r * (Math.SQRT2 + 1)
+  const sin45 = Math.SQRT1_2
+  const apexAxis = apexInset * sin45
+  const botAxis = botInset * sin45
+
+  const apexLeftX = w / 2 - apexAxis
+  const apexRightX = w / 2 + apexAxis
+  const apexY = apexAxis
+  const blEdgeX = botAxis
+  const blEdgeY = h - botAxis
+  const blBottomX = botInset
+  const brBottomX = w - botInset
+  const brEdgeX = w - botAxis
+
+  return [
+    `M ${blEdgeX} ${blEdgeY}`,
+    `L ${apexLeftX} ${apexY}`,
+    `A ${r} ${r} 0 0 1 ${apexRightX} ${apexY}`,
+    `L ${brEdgeX} ${blEdgeY}`,
+    `A ${r} ${r} 0 0 1 ${brBottomX} ${h}`,
+    `L ${blBottomX} ${h}`,
+    `A ${r} ${r} 0 0 1 ${blEdgeX} ${blEdgeY}`,
+    "Z"
+  ].join(" ")
+}
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 const parseTokenValue = (value: string): number => parseFloat(value)
@@ -120,30 +152,13 @@ const StyledPictureButton = styled(Pressable)<{
   })
 )
 
-const StyledPointerTriangle = styled(View)<{
-  pointerColor: string
-  pointerVisible: boolean
-}>(({ pointerColor, pointerVisible }) => ({
-  // 0×0 is part of the RN triangle-via-borders trick, not a layout
-  // dimension. Borders compose into a down-pointing triangle (apex at
-  // bottom) on RN; the `rotate 180deg` transform flips it to apex-up so
-  // the pointer visually connects the selected button to the insight
-  // card below. Using rotate instead of `borderBottom` because RN's
-  // triangle-via-borders rendering is inconsistent when the coloured
-  // border is on the bottom with transparent left/right on certain
-  // platforms.
-  width: 0,
-  height: 0,
-  borderLeftWidth: POINTER_HALF_WIDTH,
-  borderRightWidth: POINTER_HALF_WIDTH,
-  borderTopWidth: POINTER_HEIGHT,
-  borderLeftColor: "transparent",
-  borderRightColor: "transparent",
-  borderTopColor: pointerColor,
-  borderStyle: "solid",
-  transform: [{ rotate: "180deg" }],
-  opacity: pointerVisible ? 1 : 0
-}))
+const StyledPointer = styled(Svg)<{ pointerVisible: boolean }>(
+  ({ pointerVisible }) => ({
+    width: POINTER_WIDTH,
+    height: POINTER_HEIGHT,
+    opacity: pointerVisible ? 1 : 0
+  })
+)
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
@@ -217,6 +232,9 @@ export const PictureSelector = React.forwardRef<View, PictureSelectorProps>(
       pictureButton.borderWidth.default
     )
     const borderWidthActive = parseTokenValue(pictureButton.borderWidth.active)
+    const pointerPath = buildPointerPath(
+      parseTokenValue(pictureButton.pointer.borderRadius.default)
+    )
     const resolvedMinWidth =
       itemMinWidth ?? parseTokenValue(pictureButton.size.minWidth)
     // Default min-height to min-width so the cards stay square at the floor,
@@ -244,7 +262,6 @@ export const PictureSelector = React.forwardRef<View, PictureSelectorProps>(
           {items.map((item) => {
             const isSelected = item.value === selectedValue
             const Visual = item.illustration
-            const IconComp = item.icon
             const buttonProps: Omit<
               React.ComponentProps<typeof StyledPictureButton>,
               keyof PressableOwnForItem
@@ -284,15 +301,20 @@ export const PictureSelector = React.forwardRef<View, PictureSelectorProps>(
                   {...buttonProps}
                 >
                   {Visual ? (
-                    <Illustration illustration={Visual} size="sm" />
-                  ) : IconComp ? (
-                    <Icon icon={IconComp} size="2xl" />
+                    <Illustration illustration={Visual} size="xl" />
                   ) : null}
                 </StyledPictureButton>
-                <StyledPointerTriangle
-                  pointerColor={pictureButton.colour.pointer.default}
+                <StyledPointer
                   pointerVisible={isSelected && hasInsight}
-                />
+                  width={POINTER_WIDTH}
+                  height={POINTER_HEIGHT}
+                  viewBox={`0 0 ${POINTER_WIDTH} ${POINTER_HEIGHT}`}
+                >
+                  <Path
+                    d={pointerPath}
+                    fill={pictureButton.colour.pointer.default}
+                  />
+                </StyledPointer>
               </StyledItemStack>
             )
           })}