react-native-ai-animations 0.0.0-stage → 0.8.0

package/lib/module/chat/question-card.js

@@ -0,0 +1,720 @@
+"use strict";
+
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import Animated, { Easing, FadeIn, FadeOut, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSequence, withSpring, withTiming, ZoomIn, ZoomOut } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { withAlpha } from "../internal/color.js";
+import { useMotionPalette } from "../theme/provider.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);
+const ENTER_SPRING = {
+  damping: 24,
+  stiffness: 220,
+  mass: 0.9
+};
+const HEIGHT_SPRING = {
+  damping: 28,
+  stiffness: 260,
+  mass: 0.9
+};
+const CHIP_SPRING = {
+  damping: 14,
+  stiffness: 420,
+  mass: 0.6
+};
+const PAGE_OUT = 110;
+const PAGE_IN = 240;
+const PAGE_SHIFT = 12;
+const ADVANCE_DELAY = 260;
+const CHIP = 26;
+const DEFAULT_TITLE_STYLE = {
+  fontSize: 19,
+  lineHeight: 25,
+  fontWeight: "500"
+};
+const DEFAULT_OPTION_STYLE = {
+  fontSize: 16,
+  lineHeight: 22
+};
+const DEFAULT_META_STYLE = {
+  fontSize: 13,
+  lineHeight: 18,
+  fontWeight: "500"
+};
+const DEFAULT_LABELS = {
+  progress: (current, total) => `${current} of ${total}`,
+  next: "Continue",
+  submit: "Send",
+  customPlaceholder: "Type your answer...",
+  sent: "Answers sent"
+};
+const emptyDraft = () => ({
+  selected: [],
+  custom: ""
+});
+function normalize(option) {
+  return typeof option === "string" ? {
+    label: option
+  } : option;
+}
+function isAnswered(draft) {
+  return !!draft && (draft.selected.length > 0 || draft.custom.trim().length > 0);
+}
+function buildAnswers(questions, drafts) {
+  return questions.map((question, index) => {
+    const draft = drafts[index] ?? emptyDraft();
+    const options = question.options.map(normalize);
+    const custom = draft.custom.trim();
+    return {
+      question: question.title,
+      selected: draft.selected,
+      labels: draft.selected.map(position => options[position]?.label ?? ""),
+      ...(custom ? {
+        custom
+      } : {})
+    };
+  });
+}
+export const QuestionCard = /*#__PURE__*/forwardRef(function QuestionCard({
+  questions,
+  variant = "card",
+  labels,
+  icons,
+  numbered = true,
+  autoAdvance = true,
+  autoSubmit = true,
+  showSentState = true,
+  onSubmit,
+  onClose,
+  onAnswerChange,
+  onHaptic,
+  renderOption,
+  fontFamily,
+  titleStyle: titleStyleProp = DEFAULT_TITLE_STYLE,
+  optionStyle: optionStyleProp = DEFAULT_OPTION_STYLE,
+  metaStyle: metaStyleProp = DEFAULT_META_STYLE,
+  colors,
+  style
+}, ref) {
+  const font = fontFamily ? {
+    fontFamily
+  } : null;
+  const titleStyle = [titleStyleProp, font];
+  const optionStyle = [optionStyleProp, font];
+  const metaStyle = [metaStyleProp, font];
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const copy = {
+    ...DEFAULT_LABELS,
+    ...labels
+  };
+  const [page, setPage] = useState(0);
+  const [shown, setShown] = useState(0);
+  const [drafts, setDrafts] = useState(() => questions.map(emptyDraft));
+  const [sent, setSent] = useState(false);
+  const draftsRef = useRef(drafts);
+  draftsRef.current = drafts;
+  const timer = useRef(null);
+  const enter = useSharedValue(reduceMotion ? 1 : 0);
+  const contentOpacity = useSharedValue(1);
+  const contentShift = useSharedValue(0);
+  const height = useSharedValue(0);
+  const measured = useRef(0);
+  useEffect(() => {
+    enter.value = reduceMotion ? 1 : withSpring(1, ENTER_SPRING);
+  }, [enter, reduceMotion]);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const signature = questions.map(item => `${item.title}:${item.options.length}`).join("|");
+  const lastSignature = useRef(signature);
+  useEffect(() => {
+    if (lastSignature.current === signature) return;
+    lastSignature.current = signature;
+    setPage(0);
+    setShown(0);
+    setSent(false);
+    setDrafts(questions.map(emptyDraft));
+  }, [questions, signature]);
+  useEffect(() => {
+    if (page === shown) return;
+    const direction = page > shown ? 1 : -1;
+    if (reduceMotion) {
+      setShown(page);
+      return;
+    }
+    contentShift.value = withTiming(-direction * PAGE_SHIFT, {
+      duration: PAGE_OUT,
+      easing: Easing.in(Easing.quad)
+    });
+    contentOpacity.value = withTiming(0, {
+      duration: PAGE_OUT,
+      easing: Easing.in(Easing.quad)
+    }, finished => {
+      if (finished) scheduleOnRN(setShown, page);
+    });
+  }, [contentOpacity, contentShift, page, reduceMotion, shown]);
+  const firstShown = useRef(true);
+  useEffect(() => {
+    if (firstShown.current) {
+      firstShown.current = false;
+      return;
+    }
+    if (reduceMotion) return;
+    contentShift.value = contentShift.value < 0 ? PAGE_SHIFT : -PAGE_SHIFT;
+    contentShift.value = withTiming(0, {
+      duration: PAGE_IN,
+      easing: EASE_OUT
+    });
+    contentOpacity.value = withTiming(1, {
+      duration: PAGE_IN,
+      easing: EASE_OUT
+    });
+  }, [contentOpacity, contentShift, reduceMotion, shown]);
+  const question = questions[shown];
+  const kind = question?.kind ?? "single";
+  const draft = drafts[shown] ?? emptyDraft();
+  const options = useMemo(() => question?.options.map(normalize) ?? [], [question]);
+  const last = shown === questions.length - 1;
+  const hairline = withAlpha(palette.text, 0.08);
+  const commit = next => {
+    draftsRef.current = next;
+    setDrafts(next);
+    onAnswerChange?.(buildAnswers(questions, next));
+  };
+  const goTo = target => {
+    if (target < 0 || target >= questions.length || target === page) return;
+    if (timer.current) clearTimeout(timer.current);
+    onHaptic?.("page");
+    setPage(target);
+  };
+  const submit = () => {
+    const current = draftsRef.current;
+    if (!current.every(isAnswered)) return;
+    onHaptic?.("submit");
+    onSubmit(buildAnswers(questions, current));
+    if (showSentState) setSent(true);
+  };
+  const select = index => {
+    onHaptic?.("select");
+    const selected = kind === "single" ? [index] : draft.selected.includes(index) ? draft.selected.filter(value => value !== index) : [...draft.selected, index].sort((a, b) => a - b);
+    commit(drafts.map((item, position) => position === shown ? {
+      selected,
+      custom: kind === "single" ? "" : item.custom
+    } : item));
+    if (kind !== "single") return;
+    if (timer.current) clearTimeout(timer.current);
+    if (!last && autoAdvance) {
+      timer.current = setTimeout(() => goTo(shown + 1), ADVANCE_DELAY);
+    } else if (last && autoSubmit) {
+      timer.current = setTimeout(submit, ADVANCE_DELAY);
+    }
+  };
+  const setCustom = value => {
+    commit(drafts.map((item, position) => position === shown ? {
+      selected: kind === "single" && value ? [] : item.selected,
+      custom: value
+    } : item));
+  };
+  const sendCustom = () => {
+    if (!draft.custom.trim()) return;
+    if (last) submit();else goTo(shown + 1);
+  };
+  useImperativeHandle(ref, () => ({
+    select,
+    goTo,
+    submit
+  }));
+  const handleLayout = event => {
+    const next = Math.ceil(event.nativeEvent.layout.height);
+    if (next === measured.current) return;
+    const initial = measured.current === 0;
+    measured.current = next;
+    height.value = initial || reduceMotion ? next : withSpring(next, HEIGHT_SPRING);
+  };
+  const shellStyle = useAnimatedStyle(() => ({
+    opacity: Math.min(1, enter.value * 1.6),
+    transform: [{
+      translateY: (1 - enter.value) * 22
+    }, {
+      scale: 0.985 + enter.value * 0.015
+    }]
+  }));
+  const clipStyle = useAnimatedStyle(() => height.value > 0 ? {
+    height: height.value
+  } : {});
+  const contentStyle = useAnimatedStyle(() => ({
+    opacity: contentOpacity.value,
+    transform: [{
+      translateX: contentShift.value
+    }]
+  }));
+  const radius = variant === "card" ? 26 : 0;
+  const container = variant === "card" ? {
+    borderRadius: radius,
+    borderCurve: "continuous",
+    backgroundColor: palette.card,
+    borderWidth: 1,
+    borderColor: withAlpha(palette.text, 0.06),
+    shadowColor: "#000000",
+    shadowOpacity: 0.08,
+    shadowRadius: 22,
+    shadowOffset: {
+      width: 0,
+      height: 8
+    }
+  } : {};
+  const sheet = variant === "sheet";
+  const padding = sheet ? {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 16
+  } : {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 12
+  };
+  const showFooter = kind === "multiple" && draft.selected.length > 0;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [container, shellStyle, style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        overflow: "hidden",
+        borderRadius: radius
+      }, sheet ? null : clipStyle],
+      children: /*#__PURE__*/_jsx(View, {
+        onLayout: sheet ? undefined : handleLayout,
+        style: [padding, sheet ? null : {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0
+        }],
+        children: sent ? /*#__PURE__*/_jsxs(Animated.View, {
+          entering: reduceMotion ? undefined : FadeIn.duration(260).easing(EASE_OUT),
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 10,
+            paddingVertical: 10
+          },
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            entering: reduceMotion ? undefined : ZoomIn.springify().damping(14).stiffness(320),
+            style: {
+              width: CHIP,
+              height: CHIP,
+              borderRadius: CHIP / 2,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: palette.success
+            },
+            children: icons?.sent ?? /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: palette.accentContrast,
+                fontSize: 13,
+                fontWeight: "700"
+              },
+              children: "\u2713"
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [optionStyle, {
+              color: palette.text,
+              fontWeight: "500"
+            }],
+            children: copy.sent
+          })]
+        }) : question ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              minHeight: 32
+            },
+            children: [questions.length > 1 ? /*#__PURE__*/_jsxs(View, {
+              style: {
+                flexDirection: "row",
+                alignItems: "center",
+                marginLeft: -8
+              },
+              children: [/*#__PURE__*/_jsx(IconButton, {
+                label: "Previous question",
+                disabled: page === 0,
+                onPress: () => goTo(page - 1),
+                children: icons?.previous ?? /*#__PURE__*/_jsx(Text, {
+                  style: [metaStyle, {
+                    color: palette.textSecondary,
+                    fontSize: 18,
+                    fontWeight: "400"
+                  }],
+                  children: "\u2039"
+                })
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [metaStyle, {
+                  color: palette.textSecondary,
+                  fontVariant: ["tabular-nums"]
+                }],
+                children: copy.progress(page + 1, questions.length)
+              }), /*#__PURE__*/_jsx(IconButton, {
+                label: "Next question",
+                disabled: page === questions.length - 1 || !isAnswered(drafts[page]),
+                onPress: () => goTo(page + 1),
+                children: icons?.next ?? /*#__PURE__*/_jsx(Text, {
+                  style: [metaStyle, {
+                    color: palette.textSecondary,
+                    fontSize: 18,
+                    fontWeight: "400"
+                  }],
+                  children: "\u203A"
+                })
+              })]
+            }) : null, /*#__PURE__*/_jsx(View, {
+              style: {
+                flex: 1
+              }
+            }), onClose ? /*#__PURE__*/_jsx(View, {
+              style: {
+                marginRight: -8
+              },
+              children: /*#__PURE__*/_jsx(IconButton, {
+                label: "Close",
+                onPress: onClose,
+                children: icons?.close ?? /*#__PURE__*/_jsx(Text, {
+                  style: [metaStyle, {
+                    color: palette.textSecondary,
+                    fontSize: 18,
+                    fontWeight: "400"
+                  }],
+                  children: "\xD7"
+                })
+              })
+            }) : null]
+          }), /*#__PURE__*/_jsxs(Animated.View, {
+            style: contentStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              accessibilityRole: "header",
+              style: [titleStyle, {
+                color: palette.text,
+                marginTop: 4,
+                marginBottom: 8
+              }],
+              children: question.title
+            }), /*#__PURE__*/_jsxs(View, {
+              accessibilityRole: kind === "single" ? "radiogroup" : undefined,
+              children: [options.map((option, index) => /*#__PURE__*/_jsx(OptionRow, {
+                label: option.label,
+                description: option.description,
+                index: index,
+                kind: kind,
+                selected: draft.selected.includes(index),
+                divider: index > 0,
+                numbered: numbered,
+                palette: palette,
+                hairline: hairline,
+                optionStyle: optionStyle,
+                metaStyle: metaStyle,
+                checkIcon: icons?.check,
+                animate: !reduceMotion,
+                renderOption: renderOption,
+                onPress: () => select(index)
+              }, `${shown}-${index}`)), question.allowCustom !== false ? /*#__PURE__*/_jsxs(View, {
+                style: {
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 12,
+                  minHeight: 50,
+                  marginHorizontal: -8,
+                  paddingHorizontal: 8
+                },
+                children: [options.length ? /*#__PURE__*/_jsx(View, {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: numbered ? CHIP + 20 : 8,
+                    right: 8,
+                    height: 1,
+                    backgroundColor: hairline
+                  }
+                }) : null, numbered ? /*#__PURE__*/_jsx(View, {
+                  style: {
+                    width: CHIP,
+                    height: CHIP,
+                    borderRadius: 8,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: palette.surface
+                  },
+                  children: icons?.custom ?? /*#__PURE__*/_jsx(Text, {
+                    style: [metaStyle, {
+                      color: palette.textSecondary
+                    }],
+                    children: "\u270E"
+                  })
+                }) : null, /*#__PURE__*/_jsx(TextInput, {
+                  value: draft.custom,
+                  onChangeText: setCustom,
+                  placeholder: copy.customPlaceholder,
+                  placeholderTextColor: palette.textTertiary,
+                  returnKeyType: last ? "send" : "next",
+                  onSubmitEditing: sendCustom,
+                  style: [optionStyle, {
+                    flex: 1,
+                    color: palette.text,
+                    paddingVertical: 12
+                  }]
+                }), draft.custom.trim() ? /*#__PURE__*/_jsx(Animated.View, {
+                  entering: reduceMotion ? undefined : ZoomIn.springify().damping(15).stiffness(340),
+                  exiting: reduceMotion ? undefined : ZoomOut.duration(140),
+                  children: /*#__PURE__*/_jsx(Pressable, {
+                    onPress: sendCustom,
+                    accessibilityRole: "button",
+                    accessibilityLabel: last ? copy.submit : copy.next,
+                    hitSlop: 6,
+                    style: ({
+                      pressed
+                    }) => ({
+                      width: 32,
+                      height: 32,
+                      borderRadius: 16,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: palette.accent,
+                      opacity: pressed ? 0.8 : 1
+                    }),
+                    children: icons?.send ?? /*#__PURE__*/_jsx(Text, {
+                      style: {
+                        color: palette.accentContrast,
+                        fontSize: 16,
+                        fontWeight: "700"
+                      },
+                      children: "\u2191"
+                    })
+                  })
+                }) : null]
+              }) : null]
+            }), showFooter ? /*#__PURE__*/_jsx(Animated.View, {
+              entering: reduceMotion ? undefined : FadeIn.duration(200).easing(EASE_OUT),
+              exiting: reduceMotion ? undefined : FadeOut.duration(120),
+              style: {
+                alignItems: "flex-end",
+                paddingTop: 8
+              },
+              children: /*#__PURE__*/_jsx(Pressable, {
+                onPress: () => last ? submit() : goTo(shown + 1),
+                accessibilityRole: "button",
+                style: ({
+                  pressed
+                }) => ({
+                  paddingHorizontal: 18,
+                  height: 38,
+                  borderRadius: 19,
+                  justifyContent: "center",
+                  backgroundColor: palette.text,
+                  opacity: pressed ? 0.85 : 1
+                }),
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [metaStyle, {
+                    color: palette.background,
+                    fontSize: 15,
+                    fontWeight: "600"
+                  }],
+                  children: last ? copy.submit : copy.next
+                })
+              })
+            }) : null]
+          })]
+        }) : null
+      })
+    })
+  });
+});
+function IconButton({
+  label,
+  disabled,
+  onPress,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    disabled: disabled,
+    hitSlop: 6,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    style: {
+      width: 30,
+      height: 30,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: disabled ? 0.28 : 1
+    },
+    children: children
+  });
+}
+function OptionRow({
+  label,
+  description,
+  index,
+  kind,
+  selected,
+  divider,
+  numbered,
+  palette,
+  hairline,
+  optionStyle,
+  metaStyle,
+  checkIcon,
+  animate,
+  renderOption,
+  onPress
+}) {
+  const pop = useSharedValue(1);
+  const fill = useSharedValue(selected ? 1 : 0);
+  const pressed = useSharedValue(0);
+  const rest = withAlpha(palette.text, 0);
+  const press = withAlpha(palette.text, 0.05);
+  useEffect(() => {
+    fill.value = animate ? withTiming(selected ? 1 : 0, {
+      duration: 180,
+      easing: EASE_OUT
+    }) : selected ? 1 : 0;
+    if (selected && animate) pop.value = withSequence(withTiming(0.86, {
+      duration: 70
+    }), withSpring(1, CHIP_SPRING));
+  }, [animate, fill, pop, selected]);
+  const chipStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: pop.value
+    }]
+  }));
+  const chipFill = useAnimatedStyle(() => ({
+    opacity: fill.value
+  }));
+  const rowStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(pressed.value, [0, 1], [rest, press])
+  }));
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onPressIn: () => {
+      pressed.value = withTiming(1, {
+        duration: 80
+      });
+    },
+    onPressOut: () => {
+      pressed.value = withTiming(0, {
+        duration: 220
+      });
+    },
+    accessibilityRole: kind === "single" ? "radio" : "checkbox",
+    accessibilityState: {
+      checked: selected
+    },
+    accessibilityLabel: label,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        minHeight: 50,
+        paddingVertical: 10,
+        marginHorizontal: -8,
+        paddingHorizontal: 8,
+        borderRadius: 12
+      }, rowStyle],
+      children: [divider ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: numbered ? CHIP + 20 : 8,
+          right: 8,
+          height: 1,
+          backgroundColor: hairline
+        }
+      }) : null, renderOption ? renderOption({
+        label,
+        description
+      }, {
+        index,
+        selected,
+        kind
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [numbered ? /*#__PURE__*/_jsxs(Animated.View, {
+          style: [{
+            width: CHIP,
+            height: CHIP,
+            borderRadius: 8,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: palette.surface
+          }, chipStyle],
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            style: [{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              borderRadius: 8,
+              backgroundColor: palette.text
+            }, chipFill]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [metaStyle, {
+              color: selected ? palette.background : palette.textSecondary,
+              fontVariant: ["tabular-nums"]
+            }],
+            children: index + 1
+          })]
+        }) : null, /*#__PURE__*/_jsxs(View, {
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [optionStyle, {
+              color: palette.text
+            }],
+            children: label
+          }), description ? /*#__PURE__*/_jsx(Text, {
+            style: [metaStyle, {
+              color: palette.textSecondary,
+              marginTop: 1,
+              fontWeight: "400"
+            }],
+            children: description
+          }) : null]
+        }), kind === "multiple" ? /*#__PURE__*/_jsx(View, {
+          style: {
+            width: 22,
+            height: 22,
+            borderRadius: 11,
+            borderWidth: selected ? 0 : 1.5,
+            borderColor: withAlpha(palette.text, 0.22),
+            backgroundColor: selected ? palette.text : "transparent",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: selected ? /*#__PURE__*/_jsx(Animated.View, {
+            entering: animate ? ZoomIn.springify().damping(14).stiffness(380) : undefined,
+            children: checkIcon ?? /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: palette.background,
+                fontSize: 12,
+                fontWeight: "700"
+              },
+              children: "\u2713"
+            })
+          }) : null
+        }) : null]
+      })]
+    })
+  });
+}
+export const QuestionSheet = /*#__PURE__*/forwardRef(function QuestionSheet(props, ref) {
+  return /*#__PURE__*/_jsx(QuestionCard, {
+    ...props,
+    ref: ref,
+    variant: "sheet"
+  });
+});
+//# sourceMappingURL=question-card.js.map