@feedvalue/react 0.1.8 → 0.1.10

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { FeedValue, FeedbackData, UserTraits, FeedValueConfig } from '@feedvalue/core';
-export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, UserData, UserTraits } from '@feedvalue/core';
+import { FeedValue, FeedbackData, UserTraits, FeedValueConfig, ReactionState, ButtonSize, FollowUpTrigger, ReactionOption } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, ReactionConfig, ReactionData, ReactionOption, ReactionState, UserData, UserTraits, WidgetType } from '@feedvalue/core';
 
 /**
  * @feedvalue/react - Provider
@@ -133,6 +133,95 @@ declare function useFeedValue(): FeedValueContextValue;
  */
 declare function useFeedValueOptional(): FeedValueContextValue | null;
 
+/**
+ * Return type for useReaction hook
+ */
+interface UseReactionReturn extends ReactionState {
+    /** Submit a reaction */
+    react: (value: string, followUp?: string) => Promise<void>;
+    /** Set which option is showing follow-up input */
+    setShowFollowUp: (value: string | null) => void;
+    /** Clear the submitted state to allow re-submission */
+    clearSubmitted: () => void;
+    /** Check if widget is a reaction type */
+    isReactionWidget: boolean;
+    /** Widget configuration is ready */
+    isReady: boolean;
+    /** Whether to show text labels next to icons */
+    showLabels: boolean;
+    /** Button size */
+    buttonSize: ButtonSize;
+    /** When to show follow-up input */
+    followUpTrigger: FollowUpTrigger;
+    /** Check if an option should show follow-up based on followUpTrigger */
+    shouldShowFollowUp: (optionValue: string) => boolean;
+}
+/**
+ * Hook for reaction widgets
+ *
+ * Provides reaction options, submission handling, and follow-up state management.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useReaction } from '@feedvalue/react';
+ *
+ * function ReactionButtons() {
+ *   const {
+ *     options,
+ *     react,
+ *     isSubmitting,
+ *     submitted,
+ *     error,
+ *     showFollowUp,
+ *     setShowFollowUp,
+ *     isReady,
+ *   } = useReaction();
+ *
+ *   if (!isReady || !options) return null;
+ *
+ *   if (submitted) {
+ *     return <div>Thanks for your feedback!</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {options.map((option) => (
+ *         <button
+ *           key={option.value}
+ *           onClick={() => {
+ *             if (option.showFollowUp) {
+ *               setShowFollowUp(option.value);
+ *             } else {
+ *               react(option.value);
+ *             }
+ *           }}
+ *           disabled={isSubmitting}
+ *         >
+ *           {option.icon} {option.label}
+ *         </button>
+ *       ))}
+ *
+ *       {showFollowUp && (
+ *         <form onSubmit={(e) => {
+ *           e.preventDefault();
+ *           const form = e.target as HTMLFormElement;
+ *           const input = form.elements.namedItem('followUp') as HTMLInputElement;
+ *           react(showFollowUp, input.value);
+ *         }}>
+ *           <input name="followUp" placeholder="Tell us more..." />
+ *           <button type="submit">Send</button>
+ *         </form>
+ *       )}
+ *
+ *       {error && <div>Error: {error.message}</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useReaction(): UseReactionReturn;
+
 /**
  * @feedvalue/react - Components
  *
@@ -169,5 +258,73 @@ interface FeedValueWidgetProps extends Omit<FeedValueProviderProps, 'children'>
  * ```
  */
 declare function FeedValueWidget(props: FeedValueWidgetProps): React.ReactElement;
+/**
+ * Props for ReactionButtons component
+ */
+interface ReactionButtonsProps {
+    /** Custom CSS class for the container */
+    className?: string;
+    /** Custom CSS class for buttons */
+    buttonClassName?: string;
+    /** Custom CSS class for the follow-up form */
+    formClassName?: string;
+    /** Custom CSS class for the thank you message */
+    thankYouClassName?: string;
+    /** Callback when a reaction is submitted */
+    onReact?: (value: string, followUp?: string) => void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Custom render function for buttons (for full control) */
+    renderButton?: (option: ReactionOption, onClick: () => void, isDisabled: boolean) => React.ReactNode;
+    /** Custom render function for thank you message */
+    renderThankYou?: (value: string) => React.ReactNode;
+    /** Whether to show follow-up inline (default) or in a modal */
+    followUpMode?: 'inline' | 'none';
+    /** Hide after submission (default: false) */
+    hideAfterSubmit?: boolean;
+}
+/**
+ * ReactionButtons component
+ *
+ * Renders reaction buttons (thumbs up/down, helpful, emoji, etc.) for inline feedback.
+ * Must be used within a FeedValueProvider with a reaction-type widget.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { FeedValueProvider, ReactionButtons } from '@feedvalue/react';
+ *
+ * function ArticleFooter() {
+ *   return (
+ *     <FeedValueProvider widgetId="your-reaction-widget-id" headless>
+ *       <div>
+ *         <h3>Was this helpful?</h3>
+ *         <ReactionButtons
+ *           onReact={(value) => console.log('Reacted:', value)}
+ *         />
+ *       </div>
+ *     </FeedValueProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom button rendering
+ * <ReactionButtons
+ *   renderButton={(option, onClick, isDisabled) => (
+ *     <button
+ *       key={option.value}
+ *       onClick={onClick}
+ *       disabled={isDisabled}
+ *       className="my-custom-button"
+ *     >
+ *       {option.icon} {option.label}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare function ReactionButtons(props: ReactionButtonsProps): React.ReactElement;
 
-export { type FeedValueContextValue, FeedValueProvider, type FeedValueProviderProps, FeedValueWidget, type FeedValueWidgetProps, useFeedValue, useFeedValueOptional };
+export { type FeedValueContextValue, FeedValueProvider, type FeedValueProviderProps, FeedValueWidget, type FeedValueWidgetProps, ReactionButtons, type ReactionButtonsProps, type UseReactionReturn, useFeedValue, useFeedValueOptional, useReaction };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { FeedValue, FeedbackData, UserTraits, FeedValueConfig } from '@feedvalue/core';
-export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, UserData, UserTraits } from '@feedvalue/core';
+import { FeedValue, FeedbackData, UserTraits, FeedValueConfig, ReactionState, ButtonSize, FollowUpTrigger, ReactionOption } from '@feedvalue/core';
+export { FeedValueConfig, FeedValueEvents, FeedValueState, FeedbackData, FeedbackMetadata, ReactionConfig, ReactionData, ReactionOption, ReactionState, UserData, UserTraits, WidgetType } from '@feedvalue/core';
 
 /**
  * @feedvalue/react - Provider
@@ -133,6 +133,95 @@ declare function useFeedValue(): FeedValueContextValue;
  */
 declare function useFeedValueOptional(): FeedValueContextValue | null;
 
+/**
+ * Return type for useReaction hook
+ */
+interface UseReactionReturn extends ReactionState {
+    /** Submit a reaction */
+    react: (value: string, followUp?: string) => Promise<void>;
+    /** Set which option is showing follow-up input */
+    setShowFollowUp: (value: string | null) => void;
+    /** Clear the submitted state to allow re-submission */
+    clearSubmitted: () => void;
+    /** Check if widget is a reaction type */
+    isReactionWidget: boolean;
+    /** Widget configuration is ready */
+    isReady: boolean;
+    /** Whether to show text labels next to icons */
+    showLabels: boolean;
+    /** Button size */
+    buttonSize: ButtonSize;
+    /** When to show follow-up input */
+    followUpTrigger: FollowUpTrigger;
+    /** Check if an option should show follow-up based on followUpTrigger */
+    shouldShowFollowUp: (optionValue: string) => boolean;
+}
+/**
+ * Hook for reaction widgets
+ *
+ * Provides reaction options, submission handling, and follow-up state management.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { useReaction } from '@feedvalue/react';
+ *
+ * function ReactionButtons() {
+ *   const {
+ *     options,
+ *     react,
+ *     isSubmitting,
+ *     submitted,
+ *     error,
+ *     showFollowUp,
+ *     setShowFollowUp,
+ *     isReady,
+ *   } = useReaction();
+ *
+ *   if (!isReady || !options) return null;
+ *
+ *   if (submitted) {
+ *     return <div>Thanks for your feedback!</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {options.map((option) => (
+ *         <button
+ *           key={option.value}
+ *           onClick={() => {
+ *             if (option.showFollowUp) {
+ *               setShowFollowUp(option.value);
+ *             } else {
+ *               react(option.value);
+ *             }
+ *           }}
+ *           disabled={isSubmitting}
+ *         >
+ *           {option.icon} {option.label}
+ *         </button>
+ *       ))}
+ *
+ *       {showFollowUp && (
+ *         <form onSubmit={(e) => {
+ *           e.preventDefault();
+ *           const form = e.target as HTMLFormElement;
+ *           const input = form.elements.namedItem('followUp') as HTMLInputElement;
+ *           react(showFollowUp, input.value);
+ *         }}>
+ *           <input name="followUp" placeholder="Tell us more..." />
+ *           <button type="submit">Send</button>
+ *         </form>
+ *       )}
+ *
+ *       {error && <div>Error: {error.message}</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useReaction(): UseReactionReturn;
+
 /**
  * @feedvalue/react - Components
  *
@@ -169,5 +258,73 @@ interface FeedValueWidgetProps extends Omit<FeedValueProviderProps, 'children'>
  * ```
  */
 declare function FeedValueWidget(props: FeedValueWidgetProps): React.ReactElement;
+/**
+ * Props for ReactionButtons component
+ */
+interface ReactionButtonsProps {
+    /** Custom CSS class for the container */
+    className?: string;
+    /** Custom CSS class for buttons */
+    buttonClassName?: string;
+    /** Custom CSS class for the follow-up form */
+    formClassName?: string;
+    /** Custom CSS class for the thank you message */
+    thankYouClassName?: string;
+    /** Callback when a reaction is submitted */
+    onReact?: (value: string, followUp?: string) => void;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+    /** Custom render function for buttons (for full control) */
+    renderButton?: (option: ReactionOption, onClick: () => void, isDisabled: boolean) => React.ReactNode;
+    /** Custom render function for thank you message */
+    renderThankYou?: (value: string) => React.ReactNode;
+    /** Whether to show follow-up inline (default) or in a modal */
+    followUpMode?: 'inline' | 'none';
+    /** Hide after submission (default: false) */
+    hideAfterSubmit?: boolean;
+}
+/**
+ * ReactionButtons component
+ *
+ * Renders reaction buttons (thumbs up/down, helpful, emoji, etc.) for inline feedback.
+ * Must be used within a FeedValueProvider with a reaction-type widget.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { FeedValueProvider, ReactionButtons } from '@feedvalue/react';
+ *
+ * function ArticleFooter() {
+ *   return (
+ *     <FeedValueProvider widgetId="your-reaction-widget-id" headless>
+ *       <div>
+ *         <h3>Was this helpful?</h3>
+ *         <ReactionButtons
+ *           onReact={(value) => console.log('Reacted:', value)}
+ *         />
+ *       </div>
+ *     </FeedValueProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom button rendering
+ * <ReactionButtons
+ *   renderButton={(option, onClick, isDisabled) => (
+ *     <button
+ *       key={option.value}
+ *       onClick={onClick}
+ *       disabled={isDisabled}
+ *       className="my-custom-button"
+ *     >
+ *       {option.icon} {option.label}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare function ReactionButtons(props: ReactionButtonsProps): React.ReactElement;
 
-export { type FeedValueContextValue, FeedValueProvider, type FeedValueProviderProps, FeedValueWidget, type FeedValueWidgetProps, useFeedValue, useFeedValueOptional };
+export { type FeedValueContextValue, FeedValueProvider, type FeedValueProviderProps, FeedValueWidget, type FeedValueWidgetProps, ReactionButtons, type ReactionButtonsProps, type UseReactionReturn, useFeedValue, useFeedValueOptional, useReaction };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { createContext, useRef, useEffect, useSyncExternalStore, useCallback, useMemo, useContext } from 'react';
-import { FeedValue } from '@feedvalue/core';
-import { jsx } from 'react/jsx-runtime';
+import React2, { createContext, useRef, useEffect, useSyncExternalStore, useCallback, useMemo, useContext, useState } from 'react';
+import { FeedValue, NEGATIVE_OPTIONS_MAP } from '@feedvalue/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var FeedValueContext = createContext(null);
 var getServerSnapshot = () => ({
@@ -120,10 +120,308 @@ function useFeedValue() {
 function useFeedValueOptional() {
   return useContext(FeedValueContext);
 }
+function useReaction() {
+  const { instance, isReady } = useFeedValue();
+  const [showFollowUp, setShowFollowUp] = useState(null);
+  const [submitted, setSubmitted] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const options = useMemo(() => {
+    if (!instance || !isReady) return null;
+    return instance.getReactionOptions();
+  }, [instance, isReady]);
+  const reactionConfig = useMemo(() => {
+    if (!instance || !isReady) return null;
+    return instance._widgetConfig?.config ?? null;
+  }, [instance, isReady]);
+  const showLabels = reactionConfig?.showLabels ?? true;
+  const buttonSize = reactionConfig?.buttonSize ?? "md";
+  const followUpTrigger = reactionConfig?.followUpTrigger ?? "negative";
+  const template = reactionConfig?.template;
+  const isReactionWidget = useMemo(() => {
+    return instance?.isReaction() ?? false;
+  }, [instance]);
+  const shouldShowFollowUp = useCallback(
+    (optionValue) => {
+      if (followUpTrigger === "none") return false;
+      if (followUpTrigger === "all") return true;
+      if (template && NEGATIVE_OPTIONS_MAP[template]) {
+        return NEGATIVE_OPTIONS_MAP[template].includes(optionValue);
+      }
+      const option = options?.find((o) => o.value === optionValue);
+      return option?.showFollowUp ?? false;
+    },
+    [followUpTrigger, template, options]
+  );
+  const react = useCallback(
+    async (value, followUp) => {
+      if (!instance) {
+        throw new Error("FeedValue not initialized");
+      }
+      setIsSubmitting(true);
+      setError(null);
+      try {
+        await instance.react(value, followUp ? { followUp } : void 0);
+        setSubmitted(value);
+        setShowFollowUp(null);
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [instance]
+  );
+  const clearSubmitted = useCallback(() => {
+    setSubmitted(null);
+    setError(null);
+  }, []);
+  return {
+    options,
+    isSubmitting,
+    submitted,
+    error,
+    showFollowUp,
+    setShowFollowUp,
+    react,
+    clearSubmitted,
+    isReactionWidget,
+    isReady,
+    showLabels,
+    buttonSize,
+    followUpTrigger,
+    shouldShowFollowUp
+  };
+}
 function FeedValueWidget(props) {
   return /* @__PURE__ */ jsx(FeedValueProvider, { ...props, children: null });
 }
+var sizeStyles = {
+  sm: {
+    button: { padding: "6px 12px", fontSize: "12px", gap: "4px" },
+    icon: { fontSize: "16px" },
+    label: { fontSize: "12px" }
+  },
+  md: {
+    button: { padding: "8px 16px", fontSize: "14px", gap: "6px" },
+    icon: { fontSize: "18px" },
+    label: { fontSize: "14px" }
+  },
+  lg: {
+    button: { padding: "12px 20px", fontSize: "16px", gap: "8px" },
+    icon: { fontSize: "24px" },
+    label: { fontSize: "16px" }
+  }
+};
+var defaultStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    border: "1px solid #e0e0e0",
+    borderRadius: "20px",
+    background: "#fff",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  buttonHover: {
+    borderColor: "#6366f1",
+    background: "#f5f3ff"
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    marginTop: "8px",
+    width: "100%",
+    maxWidth: "400px"
+  },
+  input: {
+    padding: "8px 12px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "8px",
+    fontSize: "14px",
+    resize: "none"
+  },
+  submitButton: {
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "8px",
+    background: "#6366f1",
+    color: "#fff",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    alignSelf: "flex-start"
+  },
+  thankYou: {
+    color: "#059669",
+    fontSize: "14px",
+    fontWeight: 500
+  },
+  error: {
+    color: "#dc2626",
+    fontSize: "14px"
+  }
+};
+function ReactionButtonsInner({
+  className,
+  buttonClassName,
+  formClassName,
+  thankYouClassName,
+  onReact,
+  onError,
+  renderButton,
+  renderThankYou,
+  followUpMode = "inline",
+  hideAfterSubmit = false
+}) {
+  const {
+    options,
+    react,
+    isSubmitting,
+    submitted,
+    error,
+    showFollowUp,
+    setShowFollowUp,
+    isReactionWidget,
+    isReady,
+    showLabels,
+    buttonSize,
+    shouldShowFollowUp
+  } = useReaction();
+  const [followUpText, setFollowUpText] = useState("");
+  const [hoveredButton, setHoveredButton] = useState(null);
+  const handleClick = useCallback(
+    (option) => {
+      if (shouldShowFollowUp(option.value) && followUpMode === "inline") {
+        setShowFollowUp(option.value);
+      } else {
+        react(option.value).then(() => onReact?.(option.value)).catch((err) => onError?.(err));
+      }
+    },
+    [react, setShowFollowUp, followUpMode, onReact, onError, shouldShowFollowUp]
+  );
+  const handleFollowUpSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!showFollowUp) return;
+      react(showFollowUp, followUpText.trim() || void 0).then(() => {
+        onReact?.(showFollowUp, followUpText.trim() || void 0);
+        setFollowUpText("");
+      }).catch((err) => onError?.(err));
+    },
+    [react, showFollowUp, followUpText, onReact, onError]
+  );
+  const handleCancelFollowUp = useCallback(() => {
+    setShowFollowUp(null);
+    setFollowUpText("");
+  }, [setShowFollowUp]);
+  if (!isReady || !isReactionWidget || !options) {
+    return null;
+  }
+  if (submitted && hideAfterSubmit) {
+    return null;
+  }
+  if (submitted) {
+    if (renderThankYou) {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderThankYou(submitted) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: thankYouClassName, style: thankYouClassName ? void 0 : defaultStyles.thankYou, children: "Thanks for your feedback!" });
+  }
+  const followUpOption = showFollowUp ? options.find((o) => o.value === showFollowUp) : null;
+  return /* @__PURE__ */ jsxs("div", { className, style: className ? void 0 : defaultStyles.container, children: [
+    !showFollowUp && options.map((option) => {
+      if (renderButton) {
+        return /* @__PURE__ */ jsx(React2.Fragment, { children: renderButton(option, () => handleClick(option), isSubmitting) }, option.value);
+      }
+      const isHovered = hoveredButton === option.value;
+      const sizeStyle = sizeStyles[buttonSize] || sizeStyles.md;
+      const buttonStyle = {
+        ...defaultStyles.button,
+        ...sizeStyle.button,
+        ...isHovered ? defaultStyles.buttonHover : {},
+        ...isSubmitting ? defaultStyles.buttonDisabled : {}
+      };
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: buttonClassName,
+          style: buttonClassName ? void 0 : buttonStyle,
+          onClick: () => handleClick(option),
+          onMouseEnter: () => setHoveredButton(option.value),
+          onMouseLeave: () => setHoveredButton(null),
+          disabled: isSubmitting,
+          "aria-label": option.label,
+          children: [
+            /* @__PURE__ */ jsx("span", { role: "img", "aria-hidden": "true", style: sizeStyle.icon, children: option.icon }),
+            showLabels && /* @__PURE__ */ jsx("span", { style: sizeStyle.label, children: option.label })
+          ]
+        },
+        option.value
+      );
+    }),
+    showFollowUp && followUpOption && /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: formClassName,
+        style: formClassName ? void 0 : defaultStyles.form,
+        onSubmit: handleFollowUpSubmit,
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: followUpText,
+              onChange: (e) => setFollowUpText(e.target.value),
+              placeholder: followUpOption.followUpPlaceholder ?? "Tell us more (optional)",
+              rows: 3,
+              style: defaultStyles.input,
+              disabled: isSubmitting
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                style: defaultStyles.submitButton,
+                disabled: isSubmitting,
+                children: isSubmitting ? "Sending..." : "Send"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCancelFollowUp,
+                style: { ...defaultStyles.button, padding: "8px 16px" },
+                disabled: isSubmitting,
+                children: "Cancel"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { style: defaultStyles.error, children: error.message })
+  ] });
+}
+function ReactionButtons(props) {
+  return /* @__PURE__ */ jsx(ReactionButtonsInner, { ...props });
+}
 
-export { FeedValueProvider, FeedValueWidget, useFeedValue, useFeedValueOptional };
+export { FeedValueProvider, FeedValueWidget, ReactionButtons, useFeedValue, useFeedValueOptional, useReaction };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map