convex-feedback-ui 0.1.2 → 0.1.4

package/src/native/shared/ui/NewEntry.tsx

@@ -0,0 +1,375 @@
+import type { EntryKind } from "convex-feedback";
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
+
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
+import { EntryDetail } from "./EntryDetail";
+import { FeedbackForm } from "./primitives";
+
+export function CreateEntryModal({
+  onRequestClose,
+  onCreated,
+}: FeedbackScreenEntryModalProps & {
+  onRequestClose: () => void;
+}) {
+  const { enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const isIos = Platform.OS === "ios";
+
+  const [previewEntryId, setPreviewEntryId] = useState<string | null>(null);
+
+  const [kind, setKind] = useState<EntryKind>(enabledKinds[0] ?? "feedback");
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const modalTile =
+    enabledKinds.length === 1
+      ? messages.newFeedback[enabledKinds.at(0)!]
+      : messages.board.createEntry;
+
+  return (
+    <Modal
+      visible
+      animationType="slide"
+      presentationStyle={"pageSheet"}
+      allowSwipeDismissal={isIos}
+      onRequestClose={onRequestClose}
+      role="dialog"
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "flex-end",
+          backgroundColor: isIos ? theme.colors.background : "transparent",
+        }}
+      >
+        {isIos && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={messages.form.cancel}
+            onPress={onRequestClose}
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+            }}
+          />
+        )}
+
+        <View
+          style={{
+            flex: 1,
+            minHeight: 360,
+            overflow: "hidden",
+            borderTopLeftRadius: theme.radius * 2,
+            borderTopRightRadius: theme.radius * 2,
+            backgroundColor: theme.colors.background,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: 20,
+              paddingVertical: 18,
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border,
+            }}
+          >
+            <Text
+              style={{
+                color: theme.colors.text,
+                fontSize: 18,
+                fontWeight: "700",
+              }}
+            >
+              {modalTile}
+            </Text>
+
+            <Pressable
+              accessibilityRole="button"
+              onPress={onRequestClose}
+              hitSlop={8}
+            >
+              <Text
+                style={{
+                  color: theme.colors.primary,
+                  fontWeight: "600",
+                }}
+              >
+                {messages.form.cancel}
+              </Text>
+            </Pressable>
+          </View>
+
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode={isIos ? "interactive" : "on-drag"}
+            contentInsetAdjustmentBehavior="automatic"
+            contentContainerStyle={{
+              padding: 16,
+              paddingBottom: 32,
+            }}
+          >
+            {previewEntryId !== null ? (
+              <EntryDetail
+                entryId={previewEntryId}
+                onBack={() => setPreviewEntryId(null)}
+              />
+            ) : (
+              <CreateForm
+                kind={kind}
+                onKindChange={setKind}
+                title={title}
+                onTitleChange={setTitle}
+                body={body}
+                onBodyChange={setBody}
+                onCreated={onCreated}
+                onOpenSuggestion={setPreviewEntryId}
+              />
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function CreateForm({
+  kind,
+  onKindChange,
+  title,
+  onTitleChange,
+  body,
+  onBodyChange,
+  onCreated,
+  onOpenSuggestion,
+}: FeedbackScreenEntryModalProps & {
+  kind: EntryKind;
+  onKindChange: (kind: EntryKind) => void;
+  title: string;
+  onTitleChange: (title: string) => void;
+  body: string;
+  onBodyChange: (body: string) => void;
+  onOpenSuggestion: (id: string) => void;
+}) {
+  const { hooks, enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const [submitting, setSubmitting] = useState(false);
+  const create = hooks.useCreateEntry();
+  const similar = hooks.useSimilarEntries({ title, body, kind, limit: 3 });
+
+  const suggestions = useMemo(() => {
+    if (similar === undefined) return [];
+    return [...similar.exact, ...similar.similar];
+  }, [similar]);
+
+  const submit = async () => {
+    if (submitting || title.trim().length === 0 || body.trim().length === 0) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      onCreated(await create({ kind, title, body }));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const requestSubmit = () => {
+    if (
+      submitting ||
+      similar === undefined ||
+      title.trim().length === 0 ||
+      body.trim().length === 0
+    ) {
+      return;
+    }
+
+    if (suggestions.length === 0) {
+      void submit();
+      return;
+    }
+
+    Alert.alert(
+      similar.exact.length > 0
+        ? messages.form.exactDuplicate
+        : messages.form.possibleDuplicates,
+      messages.form.duplicateWarning,
+      [
+        {
+          text: messages.form.cancel,
+          style: "cancel",
+        },
+        {
+          text: messages.form.submitAnyway,
+          onPress: () => {
+            void submit();
+          },
+        },
+      ],
+    );
+  };
+
+  return (
+    <FeedbackForm.Root>
+      {enabledKinds.length > 1 && (
+        <>
+          <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
+            {messages.form.kind}
+          </Text>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 7 }}>
+            {enabledKinds.map((value) => (
+              <Pressable
+                key={value}
+                onPress={() => onKindChange(value)}
+                style={{
+                  paddingVertical: 6,
+                  paddingHorizontal: 9,
+                  borderRadius: 999,
+                  borderWidth: 1,
+                  borderColor:
+                    value === kind ? theme.colors.primary : theme.colors.border,
+                }}
+              >
+                <Text
+                  style={{
+                    color:
+                      value === kind
+                        ? theme.colors.primary
+                        : theme.colors.mutedText,
+                  }}
+                >
+                  {messages.kinds[value]}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </>
+      )}
+      <FeedbackForm.Input
+        value={title}
+        onChangeText={onTitleChange}
+        placeholder={messages.form.titlePlaceholder}
+      />
+      <FeedbackForm.Textarea
+        value={body}
+        onChangeText={onBodyChange}
+        placeholder={messages.form.bodyPlaceholder}
+      />
+      {suggestions.length > 0 ? (
+        <View
+          style={{
+            gap: 8,
+            padding: 10,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radius,
+            backgroundColor: theme.colors.surfaceMuted,
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontWeight: "600",
+            }}
+          >
+            {similar?.exact.length
+              ? messages.form.exactDuplicate
+              : messages.form.possibleDuplicates}
+          </Text>
+
+          {suggestions.map((entry) => (
+            <Pressable
+              key={entry.id}
+              onPress={() => onOpenSuggestion(entry.id)}
+              style={{
+                gap: 4,
+                padding: 10,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: Math.max(8, theme.radius - 2),
+                backgroundColor: theme.colors.surface,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 8,
+                }}
+              >
+                <Text
+                  style={{
+                    flexShrink: 1,
+                    color: theme.colors.mutedText,
+                    fontSize: 12,
+                    fontWeight: "600",
+                  }}
+                >
+                  {messages.kinds[entry.kind]}
+                </Text>
+
+                <Text
+                  style={{
+                    color: theme.colors.mutedText,
+                    fontSize: 12,
+                  }}
+                >
+                  {messages.statuses[entry.status]}
+                </Text>
+              </View>
+
+              <Text
+                numberOfLines={2}
+                style={{
+                  color: theme.colors.text,
+                  fontWeight: "700",
+                }}
+              >
+                {entry.title}
+              </Text>
+
+              <Text
+                numberOfLines={2}
+                style={{
+                  color: theme.colors.mutedText,
+                  lineHeight: 18,
+                }}
+              >
+                {entry.body}
+              </Text>
+
+              <Text
+                style={{
+                  color: theme.colors.mutedText,
+                  fontSize: 12,
+                }}
+              >
+                ▲ {entry.upvoteCount} ·{" "}
+                {messages.entry.comments(entry.commentCount)}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+      <FeedbackForm.Submit submitting={submitting} onPress={requestSubmit} />
+    </FeedbackForm.Root>
+  );
+}

package/src/native/{primitives.tsx → shared/ui/primitives.tsx}

@@ -2,7 +2,13 @@ import type {
   FeedbackComment,
   FeedbackEntry as FeedbackEntryData,
 } from "convex-feedback";
-import { createContext, useContext, useMemo } from "react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+} from "react";
 import {
   Pressable,
   ScrollView,
@@ -18,11 +24,11 @@ import {
   type ViewProps,
   type ViewStyle,
 } from "react-native";
-import {
-  SafeAreaView,
-  type SafeAreaViewProps,
-} from "react-native-safe-area-context";
 
+import {
+  FeedbackNativeThemeScope,
+  useFeedbackUi,
+} from "../../../shared/context/FeedbackProvider.js";
 import type {
   BoardSearchBaseProps,
   BoardSearchState,
@@ -37,21 +43,13 @@ import type {
   FormSubmitBaseProps,
   FormSubmitState,
   RepliesButtonBaseProps,
-} from "../shared/types";
-import { FeedbackNativeThemeScope, useFeedbackUi } from "./context.js";
-
-function combineStyle<T>(
-  enabled: boolean,
-  fallback: StyleProp<T>,
-  style: StyleProp<T>,
-): StyleProp<T> {
-  return enabled ? [fallback, style] : style;
-}
+} from "../../../shared/types";
+import { combineStyle } from "../helpers.js";
 
 /**
  * Props for `FeedbackBoard.Root`.
  */
-export interface BoardRootProps extends SafeAreaViewProps, FeedbackColorProps {}
+export type BoardRootProps = PropsWithChildren<FeedbackColorProps>;
 
 function BoardRoot({
   primaryColor,
@@ -62,10 +60,7 @@ function BoardRoot({
   borderColor,
   dangerColor,
   children,
-  style,
-  ...props
 }: BoardRootProps) {
-  const { theme, unstyled } = useFeedbackUi();
   const colorOverrides = useMemo(
     () => ({
       ...(primaryColor === undefined ? {} : { primary: primaryColor }),
@@ -86,25 +81,10 @@ function BoardRoot({
       textColor,
     ],
   );
-  const background = backgroundColor ?? theme.colors.background;
 
   return (
     <FeedbackNativeThemeScope colors={colorOverrides}>
-      <SafeAreaView
-        {...props}
-        style={combineStyle<ViewStyle>(
-          !unstyled,
-          {
-            flex: 1,
-            gap: theme.spacing,
-            padding: theme.spacing,
-            backgroundColor: background,
-          },
-          style,
-        )}
-      >
-        {children}
-      </SafeAreaView>
+      {children}
     </FeedbackNativeThemeScope>
   );
 }
@@ -114,7 +94,11 @@ function BoardHeader({ style, ...props }: ViewProps) {
   return (
     <View
       {...props}
-      style={combineStyle<ViewStyle>(!unstyled, { gap: theme.spacing }, style)}
+      style={combineStyle<ViewStyle>(
+        !unstyled,
+        { gap: theme.spacing, backgroundColor: theme.colors.background },
+        style,
+      )}
     />
   );
 }
@@ -143,59 +127,60 @@ export interface BoardSearchProps
     Omit<TextInputProps, "children" | "value" | "onChangeText">,
     BoardSearchBaseProps {}
 
-function BoardSearch({
-  value,
-  onValueChange,
-  children,
-  style,
-  ...props
-}: BoardSearchProps) {
-  const { messages, theme, unstyled } = useFeedbackUi();
-  const state: BoardSearchState = { value, setValue: onValueChange };
-  if (typeof children === "function") return <>{children(state)}</>;
-  return (
-    <TextInput
-      {...props}
-      value={value}
-      onChangeText={onValueChange}
-      placeholder={props.placeholder ?? messages.board.searchPlaceholder}
-      placeholderTextColor={
-        props.placeholderTextColor ?? theme.colors.mutedText
-      }
-      style={combineStyle<TextStyle>(
-        !unstyled,
-        {
-          color: theme.colors.text,
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-          borderRadius: Math.max(8, theme.radius - 2),
-          paddingHorizontal: 12,
-          paddingVertical: 10,
-          backgroundColor: theme.colors.surface,
-        },
-        style,
-      )}
-    />
-  );
-}
+const BoardSearch = forwardRef<TextInput, BoardSearchProps>(
+  ({ value, onValueChange, children, style, ...props }, ref) => {
+    const { messages, theme, unstyled } = useFeedbackUi();
+    const state: BoardSearchState = { value, setValue: onValueChange };
+    if (typeof children === "function") return <>{children(state)}</>;
+    return (
+      <TextInput
+        ref={ref}
+        {...props}
+        value={value}
+        onChangeText={onValueChange}
+        placeholder={props.placeholder ?? messages.board.searchPlaceholder}
+        placeholderTextColor={
+          props.placeholderTextColor ?? theme.colors.mutedText
+        }
+        style={combineStyle<TextStyle>(
+          !unstyled,
+          {
+            color: theme.colors.text,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: Math.max(8, theme.radius - 2),
+            paddingHorizontal: 12,
+            paddingVertical: 10,
+            backgroundColor: theme.colors.surface,
+          },
+          style,
+        )}
+      />
+    );
+  },
+);
+// change to forwardRef
 
-function BoardList({ style, ...props }: ScrollViewProps) {
-  const { theme, unstyled } = useFeedbackUi();
-  return (
-    <ScrollView
-      keyboardShouldPersistTaps="handled"
-      contentInsetAdjustmentBehavior="automatic"
-      automaticallyAdjustKeyboardInsets
-      style={{ flex: 1 }}
-      {...props}
-      contentContainerStyle={combineStyle<ViewStyle>(
-        !unstyled,
-        { gap: Math.max(8, theme.spacing - 2) },
-        style,
-      )}
-    />
-  );
-}
+const BoardList = forwardRef<ScrollView, ScrollViewProps>(
+  ({ style, ...props }, ref) => {
+    const { theme, unstyled } = useFeedbackUi();
+    return (
+      <ScrollView
+        ref={ref}
+        keyboardShouldPersistTaps="handled"
+        contentInsetAdjustmentBehavior="automatic"
+        automaticallyAdjustKeyboardInsets
+        style={{ flex: 1 }}
+        {...props}
+        contentContainerStyle={combineStyle<ViewStyle>(
+          !unstyled,
+          { gap: Math.max(8, theme.spacing - 2) },
+          style,
+        )}
+      />
+    );
+  },
+);
 
 export const FeedbackBoard = {
   Root: BoardRoot,
@@ -684,13 +669,15 @@ function FormTextarea({ style, ...props }: TextInputProps) {
 
 export interface FormSubmitProps
   extends Omit<PressableProps, "children" | "style">, FormSubmitBaseProps {
-  primaryColor?: string;
+  backgroundColor?: string;
+  color?: string;
   style?: StyleProp<ViewStyle>;
 }
 function FormSubmit({
   submitting = false,
   children,
-  primaryColor,
+  backgroundColor,
+  color,
   disabled,
   style,
   ...props
@@ -710,13 +697,18 @@ function FormSubmit({
           justifyContent: "center",
           borderRadius: Math.max(8, theme.radius - 2),
           paddingHorizontal: 12,
-          backgroundColor: primaryColor ?? theme.colors.primary,
+          backgroundColor: backgroundColor ?? theme.colors.primary,
           opacity: (disabled ?? submitting) ? 0.55 : 1,
         },
         style,
       )}
     >
-      <Text style={{ color: "#ffffff", fontWeight: "700" }}>
+      <Text
+        style={{
+          color: color ?? theme.colors.primaryForeground,
+          fontWeight: "700",
+        }}
+      >
         {children ?? messages.form.submit}
       </Text>
     </Pressable>

package/src/react/{context.tsx → css.tsx}

@@ -1,50 +1,8 @@
 "use client";
 
-import { createContext, useContext, useMemo, type CSSProperties } from "react";
+import { type CSSProperties } from "react";
 
-import { mergeFeedbackMessages } from "../shared/messages.js";
-import { mergeFeedbackTheme } from "../shared/theme.js";
-import type {
-  FeedbackColorProps,
-  FeedbackProviderProps,
-  FeedbackTheme,
-  FeedbackUiContextValue,
-} from "../shared/types";
-
-const FeedbackUiContext = createContext<FeedbackUiContextValue | null>(null);
-
-export function FeedbackProvider({
-  children,
-  messages,
-  theme,
-  unstyled = false,
-}: FeedbackProviderProps) {
-  const value = useMemo<FeedbackUiContextValue>(
-    () => ({
-      messages: mergeFeedbackMessages(messages),
-      theme: mergeFeedbackTheme(theme),
-      unstyled,
-    }),
-    [messages, theme, unstyled],
-  );
-  return (
-    <FeedbackUiContext.Provider value={value}>
-      {children}
-    </FeedbackUiContext.Provider>
-  );
-}
-
-export function useFeedbackUi(): FeedbackUiContextValue {
-  const context = useContext(FeedbackUiContext);
-  if (context === null) {
-    return {
-      messages: mergeFeedbackMessages(),
-      theme: mergeFeedbackTheme(),
-      unstyled: false,
-    };
-  }
-  return context;
-}
+import type { FeedbackColorProps, FeedbackTheme } from "../shared/types";
 
 /**
  * CSS custom properties produced for a feedback board.

package/src/react/index.ts

@@ -1,6 +1,6 @@
 export * from "../shared/messages.js";
 export * from "../shared/theme.js";
 export type * from "../shared/types";
-export * from "./context.js";
+export * from "./css.js";
 export * from "./primitives.js";
 export * from "./screen.js";