@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,134 @@
+import {
+  ActivityIndicator,
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
+
+import { Typography } from "../Typography";
+
+type ButtonVariants = UnistylesVariants<typeof styles>;
+
+export type ButtonProps = Omit<
+  PressableProps,
+  "children" | "disabled" | "style"
+> &
+  ButtonVariants & {
+    label: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+  };
+
+export const Button = ({
+  label,
+  variant = "solid",
+  size = "md",
+  isLoading = false,
+  disabled = false,
+  style,
+  labelStyle,
+  ...rest
+}: ButtonProps) => {
+  const isDisabled = disabled || isLoading;
+
+  styles.useVariants({ variant, size, disabled: isDisabled });
+
+  return (
+    <Pressable
+      {...rest}
+      accessibilityRole="button"
+      accessibilityState={{ busy: isLoading, disabled: isDisabled }}
+      disabled={isDisabled}
+      style={[styles.container, style]}
+    >
+      {isLoading ? (
+        <ActivityIndicator testID="button-loader" />
+      ) : (
+        <Typography style={[styles.label, labelStyle]}>{label}</Typography>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    borderColor: "transparent",
+    borderRadius: theme.radii.lg,
+    borderWidth: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary,
+        },
+        inverse: {
+          backgroundColor: theme.colors.background.primary,
+          borderColor: theme.colors.primary,
+        },
+        text: {
+          backgroundColor: "transparent",
+        },
+        // Borderless grey surface with plain text — the dismissive action
+        // in a sheet (cal's Cancel row, Alert's secondary buttons).
+        // borderColor stays the base "transparent".
+        secondary: {
+          backgroundColor: theme.colors.palette.grey100,
+        },
+        danger: {
+          backgroundColor: theme.colors.danger,
+          borderColor: theme.colors.danger,
+        },
+      },
+      size: {
+        sm: {
+          minHeight: 32,
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs,
+        },
+        md: {
+          minHeight: 40,
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+        },
+        lg: {
+          minHeight: 48,
+          paddingHorizontal: theme.spacing.xl,
+          paddingVertical: theme.spacing.md,
+        },
+      },
+      disabled: {
+        true: { opacity: 0.5 },
+        false: {},
+      },
+    },
+  },
+  label: {
+    fontFamily: theme.fonts.medium,
+    variants: {
+      variant: {
+        solid: { color: theme.colors.text.inverse },
+        inverse: { color: theme.colors.primary },
+        text: { color: theme.colors.primary },
+        secondary: { color: theme.colors.text.primary },
+        danger: { color: theme.colors.text.inverse },
+      },
+      size: {
+        sm: { fontSize: theme.fontSizes.xs },
+        md: { fontSize: theme.fontSizes.s },
+        lg: { fontSize: theme.fontSizes.l },
+      },
+      disabled: {
+        true: {},
+        false: {},
+      },
+    },
+  },
+}));

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from "./Button";

package/src/components/ChatInput/AttachmentsView.tsx

@@ -0,0 +1,68 @@
+import { type ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import Animated, { FadeInDown, FadeInUp } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Typography } from "../Typography";
+
+const Badge = ({
+  text,
+  isNoteOptionSelected,
+}: {
+  text: string;
+  isNoteOptionSelected?: boolean;
+}) => (
+  <View style={[styles.badge, isNoteOptionSelected && styles.badgeOnNote]}>
+    <Typography size="3xs">{text}</Typography>
+  </View>
+);
+
+type AttachmentsViewProps = {
+  isAttachmentsVisible: boolean;
+  onExpand: () => void;
+  Attachments?: ReactNode;
+  attachmentsCount?: number;
+  isNoteOptionSelected: boolean;
+};
+
+export const AttachmentsView = ({
+  isAttachmentsVisible,
+  onExpand,
+  Attachments,
+  attachmentsCount = 0,
+  isNoteOptionSelected,
+}: AttachmentsViewProps) => {
+  if (attachmentsCount === 0) return null;
+
+  return isAttachmentsVisible ? (
+    <Animated.View entering={FadeInUp}>{Attachments}</Animated.View>
+  ) : (
+    <Animated.View entering={FadeInDown}>
+      <Pressable style={styles.badgeRow} onPress={onExpand}>
+        <Badge isNoteOptionSelected={isNoteOptionSelected} text="Attachments" />
+        <Badge
+          isNoteOptionSelected={isNoteOptionSelected}
+          text={`+ ${attachmentsCount}`}
+        />
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  badgeRow: {
+    alignItems: "flex-start",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: moderateScale(4),
+  },
+  badge: {
+    backgroundColor: theme.colors.background.oldLace,
+    borderRadius: moderateScale(20),
+    paddingHorizontal: moderateScale(4),
+  },
+  badgeOnNote: {
+    backgroundColor: theme.colors.background.primary,
+  },
+}));

package/src/components/ChatInput/ChatInput.tsx

@@ -0,0 +1,393 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { type TextInput, View, type TextInputProps } from "react-native";
+import {
+  Attachment,
+  BookOpen,
+  CannedResponses,
+  ChatBubble,
+  Down,
+  Expand,
+  Forward,
+  Minimize,
+  Notes,
+  SendPlane,
+} from "@bigbinary/neeto-icons-rn";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { BottomSheet } from "../BottomSheet";
+import { Skeleton } from "../Skeleton";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+import { AttachmentsView } from "./AttachmentsView";
+import { IconButton } from "./IconButton";
+import { MentionsInput } from "./MentionsInput";
+import {
+  ACTION_LABELS,
+  OPTION_TYPES,
+  PLACEHOLDERS,
+  type ChatInputOption,
+} from "./constants";
+import {
+  convertMentionsToHTMLAndPlainText,
+  type MentionSuggestion,
+} from "./mentions";
+
+export type ChatInputPayload = {
+  toEmails: string[];
+  ccEmails: string[];
+  bccEmails: string[];
+  html: string;
+  plainText: string;
+  status?: string;
+};
+
+export type ChatInputRef = {
+  clearEmailFields: () => void;
+};
+
+export type ChatInputProps = Omit<
+  TextInputProps,
+  "value" | "onChange" | "onChangeText" | "onSelectionChange"
+> & {
+  value?: string;
+  onChangeText?: (value: string) => void;
+  initialSelectedOption?: ChatInputOption;
+  onOptionChange?: (option: ChatInputOption) => void;
+  onReply?: (payload: ChatInputPayload) => void;
+  onAddNote?: (payload: ChatInputPayload) => void;
+  /** Forward icon renders only when this is passed (v2 behavior). */
+  onForward?: (payload: ChatInputPayload) => void;
+  onAttachment?: () => void;
+  /** Canned-responses icon renders only when this is passed. */
+  onCannedResponse?: () => void;
+  /** Articles icon renders only when this is passed. */
+  onArticles?: () => void;
+  showArticlesFor?: ChatInputOption[];
+  showCannedResponsesFor?: ChatInputOption[];
+  showSuggestionsFor?: ChatInputOption[];
+  /** Extra "Send and set as closed" menu on the reply action (desk). */
+  showReplyMenuOptions?: boolean;
+  toEmails?: string[];
+  attachmentsCount?: number;
+  Attachments?: ReactNode;
+  suggestions?: MentionSuggestion[];
+  disabled?: boolean;
+  isLoading?: boolean;
+};
+
+/**
+ * Composer used by chat and desk. Ported against the two real call sites
+ * rather than the whole v2 surface: v2's EmailFields UI was gated behind
+ * shouldShowEmailFields, which no app passes — the email-entry UI is dead
+ * in production and is not ported. toEmails still flows into every action
+ * payload and clearEmailFields still resets it (desk's ref contract).
+ *
+ * v2's Popover reply menu (react-native-popover-view, dropped dep) is now
+ * a BottomSheet.
+ */
+export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
+  (
+    {
+      value = "",
+      onChangeText = () => {},
+      initialSelectedOption = OPTION_TYPES.REPLY,
+      onOptionChange = () => {},
+      onReply = () => {},
+      onAddNote = () => {},
+      onForward,
+      onAttachment = () => {},
+      onCannedResponse,
+      onArticles,
+      showArticlesFor = [OPTION_TYPES.REPLY, OPTION_TYPES.NOTE],
+      showCannedResponsesFor = [OPTION_TYPES.REPLY],
+      showSuggestionsFor = [OPTION_TYPES.NOTE],
+      showReplyMenuOptions = false,
+      toEmails: initialToEmails,
+      attachmentsCount = 0,
+      Attachments,
+      suggestions = [],
+      disabled = false,
+      isLoading = false,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const { theme } = useUnistyles();
+    const inputRef = useRef<TextInput>(null);
+
+    const [selectedOption, setSelectedOption] = useState<ChatInputOption>(
+      initialSelectedOption
+    );
+    const [isAttachmentsVisible, setIsAttachmentsVisible] = useState(false);
+    const [isReplyMenuVisible, setIsReplyMenuVisible] = useState(false);
+
+    const [toEmails, setToEmails] = useState(initialToEmails ?? []);
+    const [toEmailsForForward, setToEmailsForForward] = useState<string[]>([]);
+    const [ccEmails, setCcEmails] = useState<string[]>([]);
+    const [bccEmails, setBccEmails] = useState<string[]>([]);
+
+    const isReplySelected = selectedOption === OPTION_TYPES.REPLY;
+    const isNoteSelected = selectedOption === OPTION_TYPES.NOTE;
+    const isForwardSelected = selectedOption === OPTION_TYPES.FORWARD;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        clearEmailFields: () => {
+          setToEmails(initialToEmails ?? []);
+          setToEmailsForForward([]);
+          setCcEmails([]);
+          setBccEmails([]);
+          inputRef.current?.blur();
+        },
+      }),
+      [initialToEmails]
+    );
+
+    useEffect(() => {
+      onOptionChange(selectedOption);
+      // v2 quirk kept: fires on mount too, and intentionally does not chase
+      // a new onOptionChange identity.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedOption]);
+
+    useEffect(() => {
+      setSelectedOption(initialSelectedOption);
+    }, [initialSelectedOption]);
+
+    useEffect(() => {
+      setToEmails(initialToEmails ?? []);
+    }, [initialToEmails]);
+
+    const selectOption = (option: ChatInputOption) => {
+      setIsAttachmentsVisible(false);
+      inputRef.current?.focus();
+      setSelectedOption(option);
+    };
+
+    const buildPayload = (extra?: Partial<ChatInputPayload>) => ({
+      toEmails: isForwardSelected ? toEmailsForForward : toEmails,
+      ccEmails,
+      bccEmails,
+      ...convertMentionsToHTMLAndPlainText({ suggestions, value }),
+      ...extra,
+    });
+
+    const actionHandlers: Record<
+      ChatInputOption,
+      (payload: ChatInputPayload) => void
+    > = {
+      REPLY: onReply,
+      NOTE: onAddNote,
+      FORWARD: onForward ?? (() => {}),
+    };
+
+    const handleAction = (extra?: Partial<ChatInputPayload>) => {
+      actionHandlers[selectedOption](buildPayload(extra));
+      setIsAttachmentsVisible(false);
+    };
+
+    const handleAttachmentPress = () => {
+      // v2: when collapsed attachments already exist, first tap only
+      // expands them instead of re-opening the upload flow.
+      if (isAttachmentsVisible || attachmentsCount === 0) onAttachment();
+      setIsAttachmentsVisible(true);
+    };
+
+    const shouldShowExpandToggle =
+      attachmentsCount > 0 || (toEmails.length > 0 && !isNoteSelected);
+
+    const isActionDisabled =
+      disabled || (isForwardSelected && toEmailsForForward.length === 0);
+
+    return (
+      <View>
+        {isLoading && (
+          <Skeleton animated height={moderateScale(2)} variant="line" />
+        )}
+        <View style={[styles.container, isNoteSelected && styles.noteSurface]}>
+          <View style={styles.inputRow}>
+            <MentionsInput
+              inputRef={inputRef}
+              placeholder={PLACEHOLDERS[selectedOption]}
+              suggestions={suggestions}
+              value={value}
+              shouldShowSuggestions={showSuggestionsFor.includes(
+                selectedOption
+              )}
+              onChange={onChangeText}
+              {...inputProps}
+            />
+            {shouldShowExpandToggle && (
+              <IconButton
+                accessibilityLabel={
+                  isAttachmentsVisible ? "Collapse extras" : "Expand extras"
+                }
+                Icon={isAttachmentsVisible ? Minimize : Expand}
+                style={styles.expandButton}
+                onPress={() => setIsAttachmentsVisible(current => !current)}
+              />
+            )}
+          </View>
+          <AttachmentsView
+            Attachments={Attachments}
+            attachmentsCount={attachmentsCount}
+            isAttachmentsVisible={isAttachmentsVisible}
+            isNoteOptionSelected={isNoteSelected}
+            onExpand={() => setIsAttachmentsVisible(true)}
+          />
+          <View style={styles.toolbar}>
+            <View style={styles.toolbarGroup}>
+              <IconButton
+                accessibilityLabel="Reply"
+                Icon={ChatBubble}
+                isActive={isReplySelected}
+                onPress={() => selectOption(OPTION_TYPES.REPLY)}
+              />
+              <IconButton
+                accessibilityLabel="Add note"
+                Icon={Notes}
+                isActive={isNoteSelected}
+                onPress={() => selectOption(OPTION_TYPES.NOTE)}
+              />
+              {onForward && (
+                <IconButton
+                  accessibilityLabel="Forward"
+                  Icon={Forward}
+                  isActive={isForwardSelected}
+                  onPress={() => selectOption(OPTION_TYPES.FORWARD)}
+                />
+              )}
+              <View style={styles.toolbarDivider} />
+              {onCannedResponse &&
+                showCannedResponsesFor.includes(selectedOption) && (
+                  <IconButton
+                    accessibilityLabel="Canned responses"
+                    Icon={CannedResponses}
+                    isActive={false}
+                    onPress={onCannedResponse}
+                  />
+                )}
+              {onArticles && showArticlesFor.includes(selectedOption) && (
+                <IconButton
+                  accessibilityLabel="Articles"
+                  Icon={BookOpen}
+                  isActive={false}
+                  onPress={onArticles}
+                />
+              )}
+              <IconButton
+                accessibilityLabel="Add attachment"
+                disabled={isLoading}
+                Icon={Attachment}
+                onPress={handleAttachmentPress}
+              />
+            </View>
+            <View style={styles.toolbarGroup}>
+              <Touchable
+                accessibilityLabel="Send"
+                accessibilityRole="button"
+                disabled={isActionDisabled}
+                style={[
+                  styles.sendButton,
+                  isActionDisabled && styles.sendButtonDisabled,
+                ]}
+                onPress={() => handleAction()}
+              >
+                {!!ACTION_LABELS[selectedOption] && (
+                  <Typography size="m" style={styles.sendLabel}>
+                    {ACTION_LABELS[selectedOption]}
+                  </Typography>
+                )}
+                {isReplySelected && (
+                  <SendPlane
+                    color={theme.colors.primary}
+                    size={moderateScale(22)}
+                  />
+                )}
+              </Touchable>
+              {showReplyMenuOptions && isReplySelected && (
+                <>
+                  <Touchable
+                    accessibilityLabel="More reply options"
+                    accessibilityRole="button"
+                    disabled={disabled}
+                    style={styles.sendButton}
+                    onPress={() => setIsReplyMenuVisible(true)}
+                  >
+                    <Down
+                      color={theme.colors.text.primary}
+                      size={moderateScale(22)}
+                    />
+                  </Touchable>
+                  <BottomSheet
+                    data={["Send and set as closed"]}
+                    hide={() => setIsReplyMenuVisible(false)}
+                    isVisible={isReplyMenuVisible}
+                    onItemPress={() => handleAction({ status: "closed" })}
+                  />
+                </>
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+);
+
+ChatInput.displayName = "ChatInput";
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    paddingBottom: moderateScale(5),
+    paddingHorizontal: moderateScale(16),
+  },
+  noteSurface: {
+    backgroundColor: theme.colors.background.oldLace,
+  },
+  inputRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  expandButton: {
+    alignSelf: "center",
+  },
+  toolbar: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: moderateScale(10),
+  },
+  toolbarGroup: {
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  toolbarDivider: {
+    alignSelf: "stretch",
+    backgroundColor: theme.colors.palette.grey400,
+    marginHorizontal: moderateScale(5),
+    width: moderateScale(2),
+  },
+  sendButton: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: moderateScale(4),
+    minHeight: moderateScale(30),
+    paddingHorizontal: moderateScale(4),
+  },
+  sendButtonDisabled: {
+    opacity: 0.5,
+  },
+  sendLabel: {
+    color: theme.colors.primary,
+  },
+}));

package/src/components/ChatInput/IconButton.tsx

@@ -0,0 +1,52 @@
+import { type ComponentType } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Touchable } from "../Touchable";
+
+type IconButtonProps = {
+  Icon: ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const IconButton = ({
+  Icon,
+  onPress,
+  isActive = true,
+  disabled = false,
+  accessibilityLabel,
+  style,
+}: IconButtonProps) => {
+  const { theme } = useUnistyles();
+
+  return (
+    <Touchable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      disabled={disabled}
+      style={[styles.container, !isActive && styles.inactive, style]}
+      onPress={onPress}
+    >
+      <Icon
+        color={disabled ? theme.colors.text.muted : theme.colors.text.primary}
+        size={moderateScale(24)}
+      />
+    </Touchable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(8),
+  },
+  inactive: {
+    opacity: 0.5,
+  },
+});