@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/src/components/molecules/Animated/Animated.stories.tsx

@@ -0,0 +1,254 @@
+import React, { useState } from "react"
+import { StyleSheet, View } from "react-native"
+import { Typography } from "../../atoms/Typography"
+import { Button } from "../../atoms/Button"
+import { Animated, type AnimatedProps } from "./Animated"
+
+export default {
+  title: "Molecules/Animated",
+  component: Animated,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Reanimated wrapper that applies a named animation preset to its children. Exit animations run automatically on unmount — no AnimatePresence wrapper needed."
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["fade", "fadeUp", "fadeDown", "scale", "slideIn", "slideOut"],
+      description: "Animation preset"
+    },
+    delay: {
+      control: { type: "number", min: 0, max: 2, step: 0.05 },
+      description: "Delay before entering animation starts (seconds)"
+    }
+  }
+}
+
+const Card = ({ label }: { label: string }) => (
+  <View style={styles.card}>
+    <Typography variant="heading" size="xs">
+      {label}
+    </Typography>
+    <Typography>Toggle the button to see enter and exit.</Typography>
+  </View>
+)
+
+function ToggleStory({
+  variant,
+  label
+}: {
+  variant: AnimatedProps["variant"]
+  label: string
+}) {
+  const [visible, setVisible] = useState(true)
+
+  return (
+    <View style={styles.toggleContainer}>
+      <Button
+        variant="filled"
+        colour="primary"
+        onPress={() => setVisible((v) => !v)}
+      >
+        {visible ? "Hide" : "Show"}
+      </Button>
+      {visible && (
+        <Animated variant={variant}>
+          <Card label={label} />
+        </Animated>
+      )}
+    </View>
+  )
+}
+
+export const Playground = (args: AnimatedProps) => (
+  <View style={styles.container}>
+    <Animated {...args}>
+      <Card label={args.variant ?? "fade"} />
+    </Animated>
+  </View>
+)
+Playground.args = {
+  variant: "fadeUp",
+  delay: 0
+}
+
+export const Fade = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="fade" label="Fade" />
+  </View>
+)
+
+export const FadeUp = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="fadeUp" label="Fade up" />
+  </View>
+)
+
+export const FadeDown = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="fadeDown" label="Fade down" />
+  </View>
+)
+
+export const Scale = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="scale" label="Scale" />
+  </View>
+)
+
+export const SlideIn = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="slideIn" label="Slide in (from right)" />
+  </View>
+)
+
+export const SlideOut = () => (
+  <View style={styles.container}>
+    <ToggleStory variant="slideOut" label="Slide out (from left)" />
+  </View>
+)
+
+export const Delay = () => {
+  const [visible, setVisible] = useState(true)
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.toggleContainer}>
+        <Button
+          variant="filled"
+          colour="primary"
+          onPress={() => setVisible((v) => !v)}
+        >
+          {visible ? "Hide" : "Show"}
+        </Button>
+        {visible && (
+          <Animated variant="scale" delay={0.6}>
+            <Card label="Appears after 0.6s delay" />
+          </Animated>
+        )}
+      </View>
+    </View>
+  )
+}
+
+export const StaggeredList = () => {
+  const [visible, setVisible] = useState(true)
+
+  const items = [
+    "Fresh chicken recipe",
+    "Salmon & sweet potato",
+    "Turkey & vegetables",
+    "Beef & brown rice"
+  ]
+
+  return (
+    <View style={styles.container}>
+      <Button
+        variant="filled"
+        colour="primary"
+        onPress={() => setVisible((v) => !v)}
+        style={styles.staggerButton}
+      >
+        {visible ? "Hide list" : "Show list"}
+      </Button>
+      <View style={styles.list}>
+        {visible &&
+          items.map((item, i) => (
+            <Animated key={item} variant="fadeUp" delay={i * 0.08}>
+              <View style={styles.row}>
+                <Typography>{item}</Typography>
+              </View>
+            </Animated>
+          ))}
+      </View>
+    </View>
+  )
+}
+
+export const AllVariants = () => {
+  const [visible, setVisible] = useState(true)
+
+  const variants: { key: AnimatedProps["variant"]; label: string }[] = [
+    { key: "fade", label: "Fade" },
+    { key: "fadeUp", label: "Fade up" },
+    { key: "fadeDown", label: "Fade down" },
+    { key: "scale", label: "Scale" },
+    { key: "slideIn", label: "Slide in" },
+    { key: "slideOut", label: "Slide out" }
+  ]
+
+  return (
+    <View style={styles.container}>
+      <Button
+        variant="filled"
+        colour="primary"
+        onPress={() => setVisible((v) => !v)}
+        style={styles.staggerButton}
+      >
+        {visible ? "Hide all" : "Show all"}
+      </Button>
+      <View style={styles.grid}>
+        {variants.map(({ key, label }) =>
+          visible ? (
+            <Animated key={key} variant={key}>
+              <View style={styles.chip}>
+                <Typography size="sm">{label}</Typography>
+              </View>
+            </Animated>
+          ) : null
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  },
+  toggleContainer: {
+    gap: 24,
+    alignItems: "center"
+  },
+  card: {
+    padding: 24,
+    borderRadius: 12,
+    backgroundColor: "#fff6d8",
+    borderWidth: 1,
+    borderColor: "#e8d9b0",
+    width: 280,
+    gap: 8
+  },
+  row: {
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: "#fff6d8",
+    borderWidth: 1,
+    borderColor: "#e8d9b0",
+    marginBottom: 8
+  },
+  list: {
+    marginTop: 8
+  },
+  staggerButton: {
+    marginBottom: 16
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  chip: {
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: "#fff6d8",
+    borderWidth: 1,
+    borderColor: "#e8d9b0",
+    alignItems: "center",
+    width: 100
+  }
+})

package/src/components/molecules/Animated/Animated.tsx

@@ -0,0 +1,283 @@
+import React from "react"
+import { type View, type ViewProps } from "react-native"
+import Reanimated, {
+  Easing,
+  Keyframe,
+  FadeIn,
+  FadeOut,
+  FadeInUp,
+  FadeOutDown,
+  FadeInDown,
+  FadeOutUp,
+  FadeInRight,
+  FadeOutRight,
+  FadeInLeft,
+  FadeOutLeft,
+  ComplexAnimationBuilder,
+  BaseAnimationBuilder,
+  type EntryExitAnimationFunction
+} from "react-native-reanimated"
+
+// ─── Custom scale entering builder ───────────────────────────────────────────
+// Entering: presetName = "ZoomIn" → built-in CSS on web (scale 0→1, no opacity).
+// Not using withInitialValues() intentionally: patching the 0% frame creates a
+// custom REA* keyframe, which triggers Reanimated's scheduleAnimationCleanup →
+// setElementPosition (position:absolute) on the live element → breaks flex flow.
+// Native gets the subtle 0.85→1 + opacity via the worklet in build() instead.
+// Exiting uses a Keyframe (subtleScaleOut below) for precise 0.85 CSS targeting.
+
+class SubtleScaleIn extends ComplexAnimationBuilder {
+  // presetName maps to the ZoomIn CSS keyframe on web (scale 0→1).
+  // The worklet in build() drives native with scale 0.85→1 + opacity 0→1.
+  static presetName = "ZoomIn"
+
+  static createInstance<T extends typeof BaseAnimationBuilder>(
+    this: T
+  ): InstanceType<T> {
+    return new SubtleScaleIn() as unknown as InstanceType<T>
+  }
+
+  build = (): EntryExitAnimationFunction => {
+    const delayFunction = this.getDelayFunction()
+    const [animation, config] = this.getAnimationAndConfig()
+    const delay = this.getDelay()
+    const callback = this.callbackV
+    const initialValues = this.initialValues
+
+    return () => {
+      "worklet"
+      return {
+        animations: {
+          opacity: delayFunction(delay, animation(1, config)),
+          transform: [{ scale: delayFunction(delay, animation(1, config)) }]
+        },
+        initialValues: {
+          opacity: 0,
+          transform: [{ scale: 0.85 }],
+          ...initialValues
+        },
+        callback
+      }
+    }
+  }
+}
+
+// ─── Preset map ──────────────────────────────────────────────────────────────
+// Each preset bundles an entering and exiting builder class.
+// Exported so consumers can apply them directly on Reanimated.View for
+// stagger patterns without using the Animated component wrapper.
+//
+// Usage:
+//   <Reanimated.View entering={fadeUpAnimation.entering.duration(200)} />
+//   <Reanimated.View entering={fadeUpAnimation.entering.duration(200).delay(80)} />
+
+export const fadeAnimation = { entering: FadeIn, exiting: FadeOut } as const
+
+// fadeUp: starts below, moves upward — matches web Motion convention where
+// the name describes direction of movement, not direction of origin.
+export const fadeUpAnimation = {
+  entering: FadeInDown,
+  exiting: FadeOutDown
+} as const
+
+// fadeDown: starts above, moves downward — same convention as above.
+export const fadeDownAnimation = {
+  entering: FadeInUp,
+  exiting: FadeOutUp
+} as const
+
+// slideIn: enters from the right — use for new content arriving
+export const slideInAnimation = {
+  entering: FadeInRight,
+  exiting: FadeOutRight
+} as const
+
+// slideOut: enters from the left — use for content returning (back navigation)
+export const slideOutAnimation = {
+  entering: FadeInLeft,
+  exiting: FadeOutLeft
+} as const
+
+// ─── Internal lookups ────────────────────────────────────────────────────────
+
+const DURATIONS = {
+  fade: 200,
+  scale: 150,
+  fadeUp: 200,
+  fadeDown: 200,
+  slideIn: 250,
+  slideOut: 250
+} as const
+
+// Keyframe-based exit: scale 1→0.85 with opacity fade.
+// Using Keyframe (instead of ComplexAnimationBuilder + ZoomOut presetName) lets
+// Reanimated generate precise CSS @keyframes on web, so the exit targets
+// scale 0.85 rather than the built-in ZoomOut's scale 0.
+// easing at frame 100 = destination frame per Reanimated Keyframe convention;
+// the web CSS generator moves it to the 0% frame automatically.
+const subtleScaleOut = new Keyframe({
+  0: {
+    opacity: 1,
+    transform: [{ scale: 1 }]
+  },
+  100: {
+    opacity: 0,
+    transform: [{ scale: 0.85 }],
+    easing: Easing.out(Easing.quad)
+  }
+}).duration(DURATIONS.scale)
+
+// scale: subtle grow 0.85↔1 with opacity fade — matches web tooltip CSS transition.
+// Note: exiting is a Keyframe instance (not a class). Use it directly or call
+// .duration()/.delay() — those mutate the shared instance, so create a fresh
+// Keyframe if you need independent configuration.
+export const scaleAnimation = {
+  entering: SubtleScaleIn,
+  exiting: subtleScaleOut
+} as const
+
+export type AnimatedVariant = keyof typeof DURATIONS
+
+// Entering classes — needed to build fresh instances when a delay is applied.
+// ComplexAnimationBuilder instance methods mutate the object, so a pre-built
+// shared instance must not have .delay() called on it directly.
+const ENTERING_CLS = {
+  fade: FadeIn,
+  scale: SubtleScaleIn,
+  fadeUp: FadeInDown,
+  fadeDown: FadeInUp,
+  slideIn: FadeInRight,
+  slideOut: FadeInLeft
+} as const
+
+// ─── Pre-built animation instances ───────────────────────────────────────────
+// Built once at module load. All Reanimated builders default to
+// ReduceMotion.System, so OS reduce-motion is respected automatically.
+// Directional entering variants use easeOut for a natural deceleration.
+
+const easeOut = Easing.out(Easing.quad)
+const easeInOut = Easing.inOut(Easing.quad)
+
+const ENTERING = {
+  fade: FadeIn.duration(DURATIONS.fade),
+  scale: SubtleScaleIn.duration(DURATIONS.scale).easing(easeOut),
+  fadeUp: FadeInDown.duration(DURATIONS.fadeUp).easing(easeInOut),
+  fadeDown: FadeInUp.duration(DURATIONS.fadeDown).easing(easeInOut),
+  slideIn: FadeInRight.duration(DURATIONS.slideIn).easing(easeOut),
+  slideOut: FadeInLeft.duration(DURATIONS.slideOut).easing(easeOut)
+} as const
+
+const EXITING = {
+  fade: FadeOut.duration(DURATIONS.fade),
+  scale: subtleScaleOut,
+  fadeUp: FadeOutDown.duration(DURATIONS.fadeUp),
+  fadeDown: FadeOutUp.duration(DURATIONS.fadeDown),
+  slideIn: FadeOutRight.duration(DURATIONS.slideIn),
+  slideOut: FadeOutLeft.duration(DURATIONS.slideOut)
+} as const
+
+// Builds a fresh entering instance with delay. Must be a fresh instance because
+// instance methods (.easing, .delay) mutate the object in place.
+function buildDelayedEntering(variant: AnimatedVariant, delayMs: number) {
+  const b = (ENTERING_CLS[variant] as typeof ComplexAnimationBuilder).duration(
+    DURATIONS[variant]
+  )
+  if (variant === "fadeUp" || variant === "fadeDown") {
+    b.easing(easeInOut)
+  } else if (
+    variant === "slideIn" ||
+    variant === "slideOut" ||
+    variant === "scale"
+  ) {
+    b.easing(easeOut)
+  }
+  b.delay(delayMs)
+  return b
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+export type AnimatedProps = {
+  /**
+   * Animation preset. Defaults to `"fade"`.
+   *
+   * | Preset      | Motion                                    |
+   * |-------------|-------------------------------------------|
+   * | `fade`      | opacity                                   |
+   * | `fadeUp`    | opacity + enter from below                |
+   * | `fadeDown`  | opacity + enter from above                |
+   * | `scale`     | opacity + subtle scale 0.85↔1             |
+   * | `slideIn`   | opacity + enter from right                |
+   * | `slideOut`  | opacity + enter from left                 |
+   */
+  variant?: AnimatedVariant
+  /**
+   * Delay in seconds before the entering animation starts. Useful for
+   * sequencing elements without a full stagger setup. Ignored when
+   * `prefers-reduced-motion` is active.
+   *
+   * @example
+   * ```tsx
+   * <Animated variant="fadeUp" delay={0}>First</Animated>
+   * <Animated variant="fadeUp" delay={0.08}>Second</Animated>
+   * <Animated variant="fadeUp" delay={0.16}>Third</Animated>
+   * ```
+   */
+  delay?: number
+} & ViewProps
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * Reanimated wrapper that applies a named animation preset to its children.
+ *
+ * Exit animations run automatically when the component unmounts — no wrapper
+ * component needed (unlike `AnimatePresence` on web).
+ *
+ * Respects the OS reduce-motion setting automatically — Reanimated builders
+ * default to `ReduceMotion.System` so no extra hook is needed.
+ *
+ * Export `*Animation` objects (e.g. `fadeUpAnimation`) for applying presets
+ * directly on `Reanimated.View` in custom stagger patterns:
+ *
+ * ```tsx
+ * <Reanimated.View entering={fadeUpAnimation.entering.duration(200).delay(80)}>
+ *   <Item />
+ * </Reanimated.View>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Enter animation
+ * <Animated variant="fadeUp"><Card /></Animated>
+ *
+ * // Enter + exit — condition the render and Reanimated handles both
+ * {visible && <Animated variant="slideIn"><Panel /></Animated>}
+ *
+ * // Sequenced elements
+ * <Animated variant="fadeUp" delay={0}>Title</Animated>
+ * <Animated variant="fadeUp" delay={0.1}>Subtitle</Animated>
+ * ```
+ */
+export const Animated = React.forwardRef<View, AnimatedProps>(
+  ({ variant = "fade", delay, children, ...props }, ref) => {
+    const delayMs =
+      delay !== undefined && delay > 0 ? Math.round(delay * 1000) : 0
+
+    const entering =
+      delayMs > 0 ? buildDelayedEntering(variant, delayMs) : ENTERING[variant]
+
+    return (
+      <Reanimated.View
+        ref={ref}
+        entering={entering}
+        exiting={EXITING[variant]}
+        {...props}
+      >
+        {children}
+      </Reanimated.View>
+    )
+  }
+)
+
+Animated.displayName = "Animated"

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

@@ -0,0 +1,10 @@
+export {
+  Animated,
+  fadeAnimation,
+  fadeUpAnimation,
+  fadeDownAnimation,
+  scaleAnimation,
+  slideInAnimation,
+  slideOutAnimation
+} from "./Animated"
+export type { AnimatedProps, AnimatedVariant } from "./Animated"

package/src/components/molecules/ButtonDock/ButtonDock.test.tsx

@@ -0,0 +1,83 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { ButtonDock } from "./ButtonDock"
+
+describe("ButtonDock", () => {
+  describe("when component is rendering", () => {
+    it("renders children", () => {
+      renderWithTheme(
+        <ButtonDock>
+          <button>Continue</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Continue")).toBeInTheDocument()
+    })
+
+    it("renders with default stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock>
+          <button>Primary</button>
+          <button>Secondary</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Primary")).toBeInTheDocument()
+      expect(screen.getByText("Secondary")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it("renders stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock variant="stacked">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+
+    it("renders inline variant", () => {
+      renderWithTheme(
+        <ButtonDock variant="inline">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with description", () => {
+    it("renders description in stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock description="Helper text">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Helper text")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with leading content", () => {
+    it("renders leading content in stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock leadingContent={<span>Leading</span>}>
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Leading")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(
+        <ButtonDock ref={ref}>
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/ButtonGroup/ButtonGroup.stories.tsx

@@ -27,10 +27,8 @@ export const Playground = {
   },
   render: (args: ButtonGroupProps) => (
     <ButtonGroup {...args}>
-      <Button fullWidth>Confirm</Button>
-      <Button fullWidth variant="outlined">
-        Cancel
-      </Button>
+      <Button>Confirm</Button>
+      <Button variant="outlined">Cancel</Button>
     </ButtonGroup>
   )
 }
@@ -38,10 +36,8 @@ export const Playground = {
 export const Stacked = () => (
   <View style={styles.column}>
     <ButtonGroup layout="stacked" description="Two buttons stacked vertically">
-      <Button fullWidth>Primary action</Button>
-      <Button fullWidth variant="outlined">
-        Secondary action
-      </Button>
+      <Button>Primary action</Button>
+      <Button variant="outlined">Secondary action</Button>
     </ButtonGroup>
   </View>
 )
@@ -49,8 +45,8 @@ export const Stacked = () => (
 export const Inline = () => (
   <View style={styles.column}>
     <ButtonGroup layout="inline" description="Two buttons side by side">
+      <Button colour="secondary">Cancel</Button>
       <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
     </ButtonGroup>
   </View>
 )
@@ -58,7 +54,7 @@ export const Inline = () => (
 export const SingleButton = () => (
   <View style={styles.column}>
     <ButtonGroup layout="stacked" description="Just one button">
-      <Button fullWidth>Continue</Button>
+      <Button>Continue</Button>
     </ButtonGroup>
   </View>
 )
@@ -66,10 +62,8 @@ export const SingleButton = () => (
 export const WithoutDescription = () => (
   <View style={styles.column}>
     <ButtonGroup layout="stacked">
-      <Button fullWidth>Confirm</Button>
-      <Button fullWidth variant="outlined">
-        Cancel
-      </Button>
+      <Button>Confirm</Button>
+      <Button variant="outlined">Cancel</Button>
     </ButtonGroup>
   </View>
 )