@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/src/components/molecules/Tooltip/Tooltip.tsx

@@ -0,0 +1,326 @@
+import React, { useState } from "react"
+import { View, Platform, type ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as TooltipPrimitive from "@rn-primitives/tooltip"
+import { Typography } from "../../atoms"
+import { Animated } from "../Animated"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+type TooltipAlignment = "left" | "middle" | "right"
+type TooltipPosition = "top" | "bottom"
+
+type TooltipOwnProps = {
+  text: string
+  alignment?: TooltipAlignment
+  position?: TooltipPosition
+  /**
+   * Trigger element. When provided the component manages its own open/close
+   * state (press-to-toggle, animated). Omit for static rendering (docs stories).
+   *
+   * Requires a <PortalHost /> at the application root.
+   */
+  children?: React.ReactNode
+}
+
+export type TooltipProps = TooltipOwnProps &
+  Omit<ViewProps, keyof TooltipOwnProps>
+
+const NIB_OFFSET: Record<TooltipAlignment, number> = {
+  left: 24,
+  middle: 146,
+  right: 268
+}
+
+// ─── Styled primitives ────────────────────────────────────────────────────────
+
+const Container = styled(View)<{ $width: number }>(({ $width }) => ({
+  width: $width
+}))
+
+const StyledBody = styled(View)<{
+  bgColor: string
+  borderColor: string
+  borderW: number
+  borderR: number
+  topPad: number
+  bottomPad: number
+  horizontalPad: number
+}>(
+  ({
+    bgColor,
+    borderColor,
+    borderW,
+    borderR,
+    topPad,
+    bottomPad,
+    horizontalPad
+  }) => ({
+    backgroundColor: bgColor,
+    borderWidth: borderW,
+    borderColor,
+    borderRadius: borderR,
+    paddingTop: topPad,
+    paddingBottom: bottomPad,
+    paddingLeft: horizontalPad,
+    paddingRight: horizontalPad
+  })
+)
+
+// ─── Nib triangle ─────────────────────────────────────────────────────────────
+
+type NibTriangleProps = {
+  position: TooltipPosition
+  nibX: number
+  fillColor: string
+  borderColor: string
+  nibHalfWidth: number
+  nibHeight: number
+}
+
+function NibTriangle({
+  position,
+  nibX,
+  fillColor,
+  borderColor,
+  nibHalfWidth,
+  nibHeight
+}: NibTriangleProps) {
+  const pointingUp = position === "top"
+  const nibOuterHalfWidth = nibHalfWidth + 1
+  const nibOuterHeight = nibHeight + 1
+
+  const outerStyle = pointingUp
+    ? {
+        borderLeftWidth: nibOuterHalfWidth,
+        borderRightWidth: nibOuterHalfWidth,
+        borderBottomWidth: nibOuterHeight,
+        borderLeftColor: "transparent" as const,
+        borderRightColor: "transparent" as const,
+        borderBottomColor: borderColor
+      }
+    : {
+        borderLeftWidth: nibOuterHalfWidth,
+        borderRightWidth: nibOuterHalfWidth,
+        borderTopWidth: nibOuterHeight,
+        borderLeftColor: "transparent" as const,
+        borderRightColor: "transparent" as const,
+        borderTopColor: borderColor
+      }
+
+  const innerStyle = pointingUp
+    ? {
+        borderLeftWidth: nibHalfWidth,
+        borderRightWidth: nibHalfWidth,
+        borderBottomWidth: nibHeight,
+        borderLeftColor: "transparent" as const,
+        borderRightColor: "transparent" as const,
+        borderBottomColor: fillColor
+      }
+    : {
+        borderLeftWidth: nibHalfWidth,
+        borderRightWidth: nibHalfWidth,
+        borderTopWidth: nibHeight,
+        borderLeftColor: "transparent" as const,
+        borderRightColor: "transparent" as const,
+        borderTopColor: fillColor
+      }
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        left: nibX - 1,
+        width: nibOuterHalfWidth * 2,
+        height: nibOuterHeight,
+        ...(pointingUp ? { bottom: 0 } : { top: 0 })
+      }}
+    >
+      <View
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: 0,
+          height: 0,
+          ...outerStyle
+        }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          left: 1,
+          top: pointingUp ? 1 : 0,
+          width: 0,
+          height: 0,
+          ...innerStyle
+        }}
+      />
+    </View>
+  )
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const Tooltip = React.forwardRef<View, TooltipProps>(
+  (
+    { text, alignment = "middle", position = "bottom", children, ...props },
+    ref
+  ) => {
+    const theme = useTheme()
+    const {
+      colour,
+      spacing,
+      borderRadius,
+      borderWidth,
+      typography,
+      nib: nibToken,
+      width
+    } = theme.tokens.components.tooltip
+
+    const [open, setOpen] = useState(false)
+
+    const tooltipWidth = parseTokenValue(width)
+    const nibWidth = parseTokenValue(nibToken.width)
+    const nibHeight = parseTokenValue(nibToken.height)
+    const nibHalfWidth = nibWidth / 2
+    const nibOuterHeight = nibHeight + 1
+
+    const nibX = NIB_OFFSET[alignment]
+    const nibCenterX = nibX + nibHalfWidth
+    // Shift bubble so nib centre aligns with trigger centre
+    const alignOffset = tooltipWidth / 2 - nibCenterX
+    // position="bottom" means nib is below the body → bubble is above trigger
+    const side = position === "bottom" ? "top" : ("bottom" as const)
+
+    const bgColor = colour.background.default
+    const borderColor = colour.border.default
+    const borderW = parseTokenValue(borderWidth.default)
+    const borderR = parseTokenValue(borderRadius.default)
+    const topPad = parseTokenValue(spacing.topPadding)
+    const bottomPad = parseTokenValue(spacing.bottomPadding)
+    const horizontalPad = parseTokenValue(spacing.horizontalPading)
+
+    const nibRow = (
+      <View style={{ height: nibOuterHeight, position: "relative", zIndex: 2 }}>
+        <NibTriangle
+          position={position}
+          nibX={nibX}
+          fillColor={bgColor}
+          borderColor={borderColor}
+          nibHalfWidth={nibHalfWidth}
+          nibHeight={nibHeight}
+        />
+      </View>
+    )
+
+    const bubble = (
+      <Container
+        $width={tooltipWidth}
+        ref={ref}
+        accessible={true}
+        accessibilityRole="none"
+        accessibilityLabel={text}
+        accessibilityLiveRegion="polite"
+        {...props}
+      >
+        {position === "top" && nibRow}
+        <StyledBody
+          bgColor={bgColor}
+          borderColor={borderColor}
+          borderW={borderW}
+          borderR={borderR}
+          topPad={topPad}
+          bottomPad={bottomPad}
+          horizontalPad={horizontalPad}
+          style={{
+            marginTop: position === "top" ? -1 : 0,
+            marginBottom: position === "bottom" ? -1 : 0,
+            zIndex: 1,
+            ...Platform.select({
+              web: { boxShadow: "0px 4px 8px rgba(82,42,16,0.08)" },
+              ios: {
+                shadowColor: "#522a10",
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.08,
+                shadowRadius: 8
+              },
+              android: { elevation: 4 }
+            })
+          }}
+        >
+          <Typography token={typography.default} color={colour.text.default}>
+            {text}
+          </Typography>
+        </StyledBody>
+        {position === "bottom" && nibRow}
+      </Container>
+    )
+
+    // Static mode — no trigger, bubble always visible (documentation stories)
+    if (children === undefined) {
+      return bubble
+    }
+
+    // Web (Storybook Native): inject onPress into the trigger child and
+    // position the bubble absolutely so it doesn't affect the trigger's layout.
+    // Nested Pressables steal the touch responder, so we merge onPress via
+    // cloneElement instead of wrapping. Absolute positioning prevents the
+    // bubble from expanding the trigger's container.
+    if (Platform.OS === "web") {
+      type PressableChild = { onPress?: (() => void) | undefined }
+      const child = React.isValidElement<PressableChild>(children)
+        ? children
+        : null
+      const trigger = child
+        ? React.cloneElement(child, {
+            onPress: () => {
+              child.props.onPress?.()
+              setOpen((o) => !o)
+            }
+          })
+        : children
+
+      return (
+        <View>
+          {trigger}
+          {open && (
+            <View
+              style={{
+                position: "absolute",
+                left: "50%",
+                zIndex: 9999,
+                ...(side === "top" ? { bottom: "100%" } : { top: "100%" }),
+                transform: [{ translateX: -(tooltipWidth / 2) + alignOffset }]
+              }}
+            >
+              <Animated variant="scale">{bubble}</Animated>
+            </View>
+          )}
+        </View>
+      )
+    }
+
+    // Native (iOS/Android): primitive handles press-to-toggle and positioning
+    const content = (
+      <TooltipPrimitive.Content
+        side={side}
+        sideOffset={4}
+        alignOffset={alignOffset}
+        avoidCollisions
+      >
+        <Animated variant="scale">{bubble}</Animated>
+      </TooltipPrimitive.Content>
+    )
+
+    return (
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    )
+  }
+)
+
+Tooltip.displayName = "Tooltip"

package/src/components/molecules/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from "./Tooltip"
+export type { TooltipProps } from "./Tooltip"

package/src/components/molecules/index.ts

@@ -1,6 +1,21 @@
+export * from "./Accordion"
+export * from "./Animated"
+export * from "./Drawer"
 export * from "./ButtonDock"
 export * from "./ButtonGroup"
 export * from "./Checkbox"
+export * from "./CopyField"
+export * from "./FilterTab"
+export * from "./NumberField"
+export * from "./PasswordField"
+export * from "./Progress"
 export * from "./Radio"
+export * from "./SearchField"
 export * from "./SegmentedControl"
+export * from "./SelectField"
 export * from "./Slider"
+export * from "./Notification"
+export * from "./Tooltip"
+export * from "./MessageCard"
+export * from "./DatePicker"
+export * from "./PictureSelector"

package/src/test-utils.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { render, type RenderOptions } from "@testing-library/react"
+import { ThemeProvider } from "@emotion/react"
+import { createPawprintTheme } from "./theme/utils"
+
+const theme = createPawprintTheme()
+
+export function renderWithTheme(
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, "wrapper">
+) {
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    ),
+    ...options
+  })
+}
+
+export { theme }

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
-  "include": ["src"],
+  "include": ["."],
   "exclude": ["node_modules", "dist"]
 }

package/tsup.config.ts

@@ -6,6 +6,20 @@ export default defineConfig({
   dts: true,
   sourcemap: true,
   clean: true,
-  external: ["react", "react-native"],
-  treeshake: true
+  external: [
+    "react",
+    "react-native",
+    "react-native-gesture-handler",
+    "react-native-reanimated",
+    "react-native-svg",
+    "react-native-worklets",
+    /^@rn-primitives\/.*/
+  ],
+  treeshake: true,
+  esbuildOptions(options) {
+    options.loader = {
+      ...options.loader,
+      ".js": "jsx"
+    }
+  }
 })

package/vitest.config.ts

@@ -0,0 +1,114 @@
+import { defineConfig, type Plugin } from "vitest/config"
+import { resolve } from "path"
+
+/** Vite plugin that stubs binary asset imports (.woff2, .ttf, etc.) */
+const stubAssets = (): Plugin => ({
+  name: "stub-font-assets",
+  resolveId(id) {
+    if (/\.woff2$/.test(id)) return `\0font-stub:${id}`
+    return undefined
+  },
+  load(id) {
+    if (id.startsWith("\0font-stub:")) return "export default 'font-stub'"
+    return undefined
+  }
+})
+
+export default defineConfig({
+  plugins: [stubAssets()],
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+    globals: true
+  },
+  resolve: {
+    alias: [
+      {
+        find: /^react-native$/,
+        replacement: resolve(__dirname, "src/__mocks__/react-native.tsx")
+      },
+      {
+        find: /^@emotion\/native$/,
+        replacement: resolve(__dirname, "src/__mocks__/emotion-native.tsx")
+      },
+      {
+        find: /^@rn-primitives\/avatar$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/avatar.tsx"
+        )
+      },
+      {
+        find: /^@rn-primitives\/checkbox$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/checkbox.tsx"
+        )
+      },
+      {
+        find: /^@rn-primitives\/switch$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/switch.tsx"
+        )
+      },
+      {
+        find: /^@rn-primitives\/slider$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/slider.tsx"
+        )
+      },
+      {
+        find: /^@rn-primitives\/select$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/select.tsx"
+        )
+      },
+      {
+        find: /^@rn-primitives\/slot$/,
+        replacement: resolve(__dirname, "src/__mocks__/rn-primitives/slot.tsx")
+      },
+      {
+        find: /^@rn-primitives\/toggle$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/rn-primitives/toggle.tsx"
+        )
+      },
+      {
+        find: /^react-native-gesture-handler$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/react-native-gesture-handler.tsx"
+        )
+      },
+      {
+        find: /^react-native-reanimated$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/react-native-reanimated.tsx"
+        )
+      },
+      {
+        find: /^react-native-worklets$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/react-native-worklets.tsx"
+        )
+      },
+      {
+        find: /^react-native-safe-area-context$/,
+        replacement: resolve(
+          __dirname,
+          "src/__mocks__/react-native-safe-area-context.tsx"
+        )
+      },
+      {
+        find: /^react-native-svg$/,
+        replacement: resolve(__dirname, "src/__mocks__/react-native-svg.tsx")
+      }
+    ]
+  }
+})

package/vitest.setup.ts

@@ -0,0 +1,16 @@
+import "@testing-library/jest-dom/vitest"
+
+// Suppress React DOM warnings for unknown props forwarded by styled mock
+const originalConsoleError = console.error
+console.error = (...args: unknown[]) => {
+  const msg = typeof args[0] === "string" ? args[0] : ""
+  if (
+    msg.includes("React does not recognize") ||
+    msg.includes("Unknown event handler property") ||
+    msg.includes("is not a valid DOM attribute") ||
+    msg.includes("Invalid DOM property")
+  ) {
+    return
+  }
+  originalConsoleError(...args)
+}