@butternutbox/pawprint-native 0.0.1 → 0.2.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.stories.tsx

@@ -1,8 +1,13 @@
 import React from "react"
-import { View, StyleSheet, Text } from "react-native"
+import { View, StyleSheet } from "react-native"
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight
+} from "@butternutbox/pawprint-icons/core"
 import { ButtonDock } from "./ButtonDock"
 import type { ButtonDockProps } from "./ButtonDock"
 import { Button } from "../../atoms/Button"
+import { Icon } from "../../atoms/Icon"
 
 export default {
   title: "Molecules/ButtonDock",
@@ -11,7 +16,7 @@ export default {
     variant: {
       control: { type: "select" },
       options: ["stacked", "inline"],
-      description: "Layout variant (stacked or inline)"
+      description: "Layout variant"
     },
     description: {
       control: { type: "text" },
@@ -23,13 +28,13 @@ export default {
 export const Playground = {
   args: {
     variant: "stacked",
-    description: "Helper text goes here"
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   },
   render: (args: ButtonDockProps) => (
     <ButtonDock {...args}>
       <Button fullWidth>Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   )
@@ -37,10 +42,13 @@ export const Playground = {
 
 export const Stacked = () => (
   <View style={styles.column}>
-    <ButtonDock variant="stacked" description="Need help? Contact support.">
+    <ButtonDock
+      variant="stacked"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    >
       <Button fullWidth>Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   </View>
@@ -49,8 +57,22 @@ export const Stacked = () => (
 export const Inline = () => (
   <View style={styles.column}>
     <ButtonDock variant="inline">
-      <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
+      <Button
+        variant="filled"
+        colour="secondary"
+        startIcon={
+          <Icon icon={KeyboardArrowLeft} size="md" colour="action-default" />
+        }
+      >
+        Back
+      </Button>
+      <Button
+        endIcon={
+          <Icon icon={KeyboardArrowRight} size="md" colour="action-inverse" />
+        }
+      >
+        Continue
+      </Button>
     </ButtonDock>
   </View>
 )
@@ -59,16 +81,12 @@ export const WithLeadingContent = () => (
   <View style={styles.column}>
     <ButtonDock
       variant="stacked"
-      leadingContent={
-        <Text style={styles.leadingText}>
-          By continuing you agree to our terms and conditions.
-        </Text>
-      }
-      description="You can change this later in settings."
+      leadingContent={<View style={styles.leadingSlot} />}
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     >
-      <Button fullWidth>Accept & Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth>Continue</Button>
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   </View>
@@ -76,8 +94,8 @@ export const WithLeadingContent = () => (
 
 export const StackedSingleButton = () => (
   <View style={styles.column}>
-    <ButtonDock variant="stacked" description="Only one action available.">
-      <Button fullWidth>Continue</Button>
+    <ButtonDock variant="stacked">
+      <Button fullWidth>Update</Button>
     </ButtonDock>
   </View>
 )
@@ -87,9 +105,10 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     gap: 24
   },
-  leadingText: {
-    textAlign: "center",
-    fontSize: 14,
-    color: "#666"
+  leadingSlot: {
+    height: 64,
+    width: "100%",
+    backgroundColor: "#f5f5f5",
+    borderRadius: 8
   }
 })