@terreno/ui 0.7.0 → 0.7.1

package/src/AiSuggestionBox.test.tsx

@@ -0,0 +1,373 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {TextArea} from "./TextArea";
+import {renderWithTheme} from "./test-utils";
+
+describe("AiSuggestionBox in TextArea", () => {
+  describe("not-started state", () => {
+    it("should render default not-started text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{onAdd: () => {}, status: "not-started"}}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("AI note will be generated once the session ends.")).toBeTruthy();
+    });
+
+    it("should render custom not-started text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            notStartedText: "Custom pending message",
+            onAdd: () => {},
+            status: "not-started",
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("Custom pending message")).toBeTruthy();
+    });
+  });
+
+  describe("generating state", () => {
+    it("should render default generating text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{onAdd: () => {}, status: "generating"}}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("AI note generation in progress...")).toBeTruthy();
+    });
+
+    it("should render custom generating text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            generatingText: "Thinking...",
+            onAdd: () => {},
+            status: "generating",
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("Thinking...")).toBeTruthy();
+    });
+  });
+
+  describe("ready state", () => {
+    it("should render suggestion text", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "ready",
+            text: "This is a suggestion.",
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("AI-generated note")).toBeTruthy();
+      expect(getByText("This is a suggestion.")).toBeTruthy();
+    });
+
+    it("should render Hide and Add to note buttons", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("Hide")).toBeTruthy();
+      expect(getByText("Add to note")).toBeTruthy();
+    });
+
+    it("should call onAdd when Add to note is pressed", () => {
+      const mockOnAdd = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: mockOnAdd,
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Add to note"));
+      expect(mockOnAdd).toHaveBeenCalledTimes(1);
+    });
+
+    it("should collapse when Hide is pressed", () => {
+      const {getByLabelText, getByText, queryByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      expect(getByText("Suggestion text")).toBeTruthy();
+
+      fireEvent.press(getByLabelText("Hide suggestion"));
+
+      expect(queryByText("Suggestion text")).toBeNull();
+      expect(getByText("AI-generated note (hidden)")).toBeTruthy();
+      expect(getByText("Show")).toBeTruthy();
+    });
+
+    it("should expand when Show is pressed after collapsing", () => {
+      const {getByLabelText, getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Hide suggestion"));
+      expect(getByText("AI-generated note (hidden)")).toBeTruthy();
+
+      fireEvent.press(getByLabelText("Show suggestion"));
+      expect(getByText("Suggestion text")).toBeTruthy();
+      expect(getByText("AI-generated note")).toBeTruthy();
+    });
+
+    it("should call onHide when Hide is pressed", () => {
+      const mockOnHide = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            onHide: mockOnHide,
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Hide suggestion"));
+      expect(mockOnHide).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onShow when Show is pressed", () => {
+      const mockOnShow = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            onShow: mockOnShow,
+            status: "ready",
+            text: "Suggestion text",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Hide suggestion"));
+      fireEvent.press(getByLabelText("Show suggestion"));
+      expect(mockOnShow).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("added state", () => {
+    it("should render added heading", () => {
+      const {getByText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "added",
+            text: "Added suggestion",
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+
+      expect(getByText("AI-generated note added!")).toBeTruthy();
+      expect(getByText("Added suggestion")).toBeTruthy();
+    });
+  });
+
+  describe("feedback", () => {
+    it("should call onFeedback with 'like' when thumbs up is pressed", () => {
+      const mockOnFeedback = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            feedback: null,
+            onAdd: () => {},
+            onFeedback: mockOnFeedback,
+            status: "ready",
+            text: "Suggestion",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Thumbs up"));
+      expect(mockOnFeedback).toHaveBeenCalledWith("like");
+    });
+
+    it("should call onFeedback with null when thumbs up is pressed while already liked", () => {
+      const mockOnFeedback = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            feedback: "like",
+            onAdd: () => {},
+            onFeedback: mockOnFeedback,
+            status: "ready",
+            text: "Suggestion",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Thumbs up"));
+      expect(mockOnFeedback).toHaveBeenCalledWith(null);
+    });
+
+    it("should call onFeedback with 'dislike' when thumbs down is pressed", () => {
+      const mockOnFeedback = mock(() => {});
+      const {getByLabelText} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            feedback: null,
+            onAdd: () => {},
+            onFeedback: mockOnFeedback,
+            status: "ready",
+            text: "Suggestion",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+
+      fireEvent.press(getByLabelText("Thumbs down"));
+      expect(mockOnFeedback).toHaveBeenCalledWith("dislike");
+    });
+  });
+
+  describe("testID propagation", () => {
+    it("should apply testIDs to interactive elements", () => {
+      const {getByTestId} = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            onAdd: () => {},
+            status: "ready",
+            text: "Suggestion",
+          }}
+          onChange={() => {}}
+          testID="notes"
+          value=""
+        />
+      );
+
+      expect(getByTestId("notes-ai-suggestion")).toBeTruthy();
+      expect(getByTestId("notes-ai-suggestion-thumbs-up")).toBeTruthy();
+      expect(getByTestId("notes-ai-suggestion-thumbs-down")).toBeTruthy();
+      expect(getByTestId("notes-ai-suggestion-hide")).toBeTruthy();
+      expect(getByTestId("notes-ai-suggestion-add")).toBeTruthy();
+    });
+  });
+
+  describe("snapshots", () => {
+    it("should match snapshot for not-started state", () => {
+      const component = renderWithTheme(
+        <TextArea
+          aiSuggestion={{onAdd: () => {}, status: "not-started"}}
+          onChange={() => {}}
+          value=""
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot for generating state", () => {
+      const component = renderWithTheme(
+        <TextArea
+          aiSuggestion={{onAdd: () => {}, status: "generating"}}
+          onChange={() => {}}
+          value=""
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot for ready state", () => {
+      const component = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            feedback: null,
+            onAdd: () => {},
+            status: "ready",
+            text: "AI-generated suggestion text.",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("should match snapshot for added state", () => {
+      const component = renderWithTheme(
+        <TextArea
+          aiSuggestion={{
+            feedback: "like",
+            onAdd: () => {},
+            status: "added",
+            text: "AI-generated suggestion text.",
+          }}
+          onChange={() => {}}
+          testID="test"
+          value=""
+        />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/AiSuggestionBox.tsx

@@ -0,0 +1,233 @@
+import {type FC, useCallback, useEffect, useState} from "react";
+import {Pressable, View} from "react-native";
+
+import type {AiSuggestionProps} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+export interface AiSuggestionBoxProps extends AiSuggestionProps {
+  testID?: string;
+}
+
+export const AiSuggestionBox: FC<AiSuggestionBoxProps> = ({
+  status,
+  text,
+  onAdd,
+  onHide,
+  onShow,
+  onFeedback,
+  feedback,
+  notStartedText = "AI note will be generated once the session ends.",
+  generatingText = "AI note generation in progress...",
+  testID,
+}) => {
+  const {theme} = useTheme();
+  const [expanded, setExpanded] = useState(true);
+
+  // Re-expand when a new suggestion arrives or is added
+  useEffect(() => {
+    if (status === "ready" || status === "added") {
+      setExpanded(true);
+    }
+  }, [status]);
+
+  const isAdded = status === "added";
+
+  const backgroundColor = isAdded
+    ? theme.surface.successLight
+    : status === "not-started"
+      ? theme.primitives.neutral050
+      : theme.primitives.primary000;
+
+  const borderColor = isAdded
+    ? "#9BE7B2"
+    : status === "not-started"
+      ? theme.surface.secondaryLight
+      : theme.primitives.primary100;
+
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderRadius: 8,
+    borderWidth: 1,
+    gap: 8,
+    padding: 8,
+    width: "100%" as const,
+  };
+
+  const headingText =
+    status === "not-started"
+      ? notStartedText
+      : status === "generating"
+        ? generatingText
+        : isAdded
+          ? "AI-generated note added!"
+          : expanded
+            ? "AI-generated note"
+            : "AI-generated note (hidden)";
+
+  const handleHide = useCallback(() => {
+    setExpanded(false);
+    onHide?.();
+  }, [onHide]);
+
+  const handleShow = useCallback(() => {
+    setExpanded(true);
+    onShow?.();
+  }, [onShow]);
+
+  const handleThumbsUp = useCallback(() => {
+    if (!onFeedback) {
+      return;
+    }
+    onFeedback(feedback === "like" ? null : "like");
+  }, [onFeedback, feedback]);
+
+  const handleThumbsDown = useCallback(() => {
+    if (!onFeedback) {
+      return;
+    }
+    onFeedback(feedback === "dislike" ? null : "dislike");
+  }, [onFeedback, feedback]);
+
+  const renderFeedback = () => (
+    <View
+      style={{alignItems: "center", flexDirection: "row"}}
+      testID={testID ? `${testID}-feedback` : undefined}
+    >
+      <Pressable
+        accessibilityLabel="Thumbs up"
+        accessibilityRole="button"
+        onPress={handleThumbsUp}
+        style={{alignItems: "center", height: 24, justifyContent: "center", width: 24}}
+        testID={testID ? `${testID}-thumbs-up` : undefined}
+      >
+        <Icon
+          color={feedback === "like" ? "secondaryDark" : "secondaryLight"}
+          iconName="thumbs-up"
+          size="xs"
+          type={feedback === "like" ? "solid" : "regular"}
+        />
+      </Pressable>
+      <Pressable
+        accessibilityLabel="Thumbs down"
+        accessibilityRole="button"
+        onPress={handleThumbsDown}
+        style={{alignItems: "center", height: 24, justifyContent: "center", width: 24}}
+        testID={testID ? `${testID}-thumbs-down` : undefined}
+      >
+        <Icon
+          color={feedback === "dislike" ? "secondaryDark" : "secondaryLight"}
+          iconName="thumbs-down"
+          size="xs"
+          type={feedback === "dislike" ? "solid" : "regular"}
+        />
+      </Pressable>
+    </View>
+  );
+
+  if (status === "not-started" || status === "generating") {
+    return (
+      <View style={containerStyle} testID={testID}>
+        <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+          <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+          <View style={{flex: 1}}>
+            <Text color="secondaryDark" size="sm">
+              {headingText}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  if (!expanded) {
+    return (
+      <View style={{...containerStyle, flexDirection: "column"}} testID={testID}>
+        <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+          <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+          <View style={{flex: 1}}>
+            <Text color="secondaryDark" size="sm">
+              {headingText}
+            </Text>
+          </View>
+          <View style={{alignItems: "center", flexDirection: "row", gap: 4}}>
+            <Pressable
+              accessibilityLabel="Show suggestion"
+              accessibilityRole="button"
+              onPress={handleShow}
+              style={{height: 28, justifyContent: "center", paddingHorizontal: 16}}
+              testID={testID ? `${testID}-show` : undefined}
+            >
+              <Text bold color="secondaryDark" size="sm">
+                Show
+              </Text>
+            </Pressable>
+            {renderFeedback()}
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{...containerStyle, alignItems: "flex-end"}} testID={testID}>
+      <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+        <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+        <View style={{flex: 1}}>
+          <Text color="secondaryDark" size="sm">
+            {headingText}
+          </Text>
+        </View>
+        {renderFeedback()}
+      </View>
+
+      {Boolean(text) && (
+        <View style={{paddingBottom: 4, width: "100%"}}>
+          <Text size="md">{text}</Text>
+        </View>
+      )}
+
+      <View
+        style={{
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 8,
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <Pressable
+          accessibilityLabel="Hide suggestion"
+          accessibilityRole="button"
+          onPress={handleHide}
+          style={{height: 28, justifyContent: "center", paddingHorizontal: 16}}
+          testID={testID ? `${testID}-hide` : undefined}
+        >
+          <Text bold color="secondaryDark" size="sm">
+            Hide
+          </Text>
+        </Pressable>
+        <Pressable
+          accessibilityLabel="Add to note"
+          accessibilityRole="button"
+          onPress={onAdd}
+          style={{
+            alignItems: "center",
+            backgroundColor: theme.surface.secondaryDark,
+            borderRadius: 360,
+            height: 28,
+            justifyContent: "center",
+            paddingHorizontal: 16,
+          }}
+          testID={testID ? `${testID}-add` : undefined}
+        >
+          <Text bold color="inverted" size="sm">
+            Add to note
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};

package/src/Common.ts

@@ -630,6 +630,18 @@ export interface ErrorTextProps {
   errorText?: string;
 }
 
+export interface AiSuggestionProps {
+  status: "not-started" | "generating" | "ready" | "added";
+  text?: string;
+  onAdd?: () => void;
+  onHide?: () => void;
+  onShow?: () => void;
+  onFeedback?: (feedback: "like" | "dislike" | null) => void;
+  feedback?: "like" | "dislike" | null;
+  notStartedText?: string;
+  generatingText?: string;
+}
+
 export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
   type?: "email" | "password" | "phoneNumber" | "search" | "text" | "url";
 
@@ -642,6 +654,8 @@ export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTe
 
   inputRef?: any;
   trimOnBlur?: boolean;
+
+  aiSuggestion?: AiSuggestionProps;
 }
 
 export interface TextAreaProps extends Omit<TextFieldProps, "multiline" | "type"> {}