@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/ChatInput/MentionsInput.tsx

@@ -0,0 +1,126 @@
+import { useMemo, type Ref } from "react";
+import { ScrollView, TextInput, View, type TextInputProps } from "react-native";
+import { useMentions } from "react-native-controlled-mentions";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Avatar } from "../Avatar";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+import { buildMentionTriggerConfig, type MentionSuggestion } from "./mentions";
+
+const MAX_VISIBLE_SUGGESTIONS = 4;
+
+type MentionsInputProps = Omit<
+  TextInputProps,
+  "value" | "onChange" | "onChangeText" | "onSelectionChange"
+> & {
+  value: string;
+  onChange: (value: string) => void;
+  suggestions?: MentionSuggestion[];
+  shouldShowSuggestions?: boolean;
+  inputRef?: Ref<TextInput>;
+};
+
+export const MentionsInput = ({
+  value,
+  onChange,
+  suggestions = [],
+  shouldShowSuggestions = true,
+  inputRef,
+  style,
+  ...rest
+}: MentionsInputProps) => {
+  const { theme } = useUnistyles();
+
+  const triggersConfig = useMemo(
+    () =>
+      buildMentionTriggerConfig({
+        fontFamily: theme.fonts.bold,
+        color: theme.colors.primary,
+      }),
+    [theme]
+  );
+
+  const { textInputProps, triggers } = useMentions({
+    value,
+    onChange,
+    triggersConfig,
+  });
+
+  const { keyword, onSelect } = triggers.mention;
+
+  const filteredSuggestions =
+    shouldShowSuggestions && keyword !== undefined
+      ? suggestions
+          .filter(suggestion =>
+            suggestion.name
+              .toLocaleLowerCase()
+              .includes(keyword.toLocaleLowerCase())
+          )
+          .slice(0, MAX_VISIBLE_SUGGESTIONS)
+      : [];
+
+  return (
+    <View style={styles.container}>
+      {filteredSuggestions.length > 0 && (
+        <View style={styles.suggestionsCard} testID="mention-suggestions">
+          <ScrollView keyboardShouldPersistTaps="always">
+            {filteredSuggestions.map(suggestion => (
+              <Touchable
+                key={suggestion.id}
+                style={styles.suggestionRow}
+                onPress={() => onSelect(suggestion)}
+              >
+                <Avatar
+                  imageUrl={suggestion.imageUrl}
+                  name={suggestion.name}
+                  variant="small"
+                />
+                <Typography size="xs">{suggestion.name}</Typography>
+              </Touchable>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+      <TextInput
+        multiline
+        placeholderTextColor={theme.colors.text.muted}
+        ref={inputRef}
+        style={[styles.input, style]}
+        {...rest}
+        // Last on purpose: useMentions owns value, onChangeText and
+        // onSelectionChange, and losing any of them to a caller prop kills
+        // trigger detection silently.
+        {...textInputProps}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    marginVertical: moderateScale(10),
+  },
+  suggestionsCard: {
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: moderateScale(10),
+    maxHeight: moderateScale(200),
+    ...theme.elevation.medium,
+  },
+  suggestionRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: moderateScale(8),
+    height: moderateScale(50),
+    paddingHorizontal: moderateScale(10),
+  },
+  input: {
+    color: theme.colors.text.primary,
+    fontFamily: theme.fonts.regular,
+    fontSize: theme.fontSizes.m,
+    minHeight: moderateScale(50),
+    padding: 0,
+  },
+}));

package/src/components/ChatInput/constants.ts

@@ -0,0 +1,18 @@
+export const OPTION_TYPES = {
+  REPLY: "REPLY",
+  NOTE: "NOTE",
+  FORWARD: "FORWARD",
+} as const;
+
+export type ChatInputOption = keyof typeof OPTION_TYPES;
+
+export const PLACEHOLDERS: Record<ChatInputOption, string> = {
+  REPLY: "Type here to reply…",
+  NOTE: "Add note here…",
+  FORWARD: "Type here to forward…",
+};
+
+export const ACTION_LABELS: Partial<Record<ChatInputOption, string>> = {
+  NOTE: "Add note",
+  FORWARD: "Forward",
+};

package/src/components/ChatInput/index.ts

@@ -0,0 +1,11 @@
+export {
+  ChatInput,
+  type ChatInputPayload,
+  type ChatInputProps,
+  type ChatInputRef,
+} from "./ChatInput";
+export { OPTION_TYPES, type ChatInputOption } from "./constants";
+export {
+  convertMentionsToHTMLAndPlainText,
+  type MentionSuggestion,
+} from "./mentions";

package/src/components/ChatInput/mentions.ts

@@ -0,0 +1,91 @@
+import { type TriggersConfig } from "react-native-controlled-mentions";
+
+export type MentionSuggestion = {
+  id: string;
+  name: string;
+  imageUrl?: string;
+};
+
+// v2 markup, produced by react-native-controlled-mentions 2.x and assumed
+// by both apps' composer flows: @[Name](id). The 3.x lib defaults to
+// {@}[Name](id), so the trigger is configured as a custom pattern that
+// reads and writes the v2 shape — the value prop stays byte-compatible.
+const MENTION_MARKUP = /@\[([^[]*?)]\(([^(]*?)\)/;
+
+export const buildMentionTriggerConfig = (textStyle: {
+  fontFamily: string;
+  color: string;
+}): TriggersConfig<"mention"> => ({
+  mention: {
+    trigger: "@",
+    allowedSpacesCount: 0,
+    isInsertSpaceAfterMention: true,
+    textStyle,
+    pattern: new RegExp(`(${MENTION_MARKUP.source})`, "g"),
+    getTriggerData: match => {
+      const [, name = "", id = ""] = MENTION_MARKUP.exec(match) ?? [];
+
+      return { original: match, trigger: "@", name, id };
+    },
+    getTriggerValue: suggestion => `@[${suggestion.name}](${suggestion.id})`,
+    getPlainString: data => `@${data.name}`,
+  },
+});
+
+const HTML_ESCAPES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+};
+
+/**
+ * v2 serialized through node-html-parser, which escaped on the way out.
+ * This port assembles HTML by hand, so it has to escape itself: the
+ * message body and the mention name/id all come from user-controlled text
+ * (a contact's display name is attacker-controlled in a support desk) and
+ * land in a document the web editors render.
+ */
+const escapeHtml = (value: string) =>
+  value.replace(/[&<>"']/g, character => HTML_ESCAPES[character] ?? character);
+
+/**
+ * Port of v2's converter, minus the node-html-parser dependency — the
+ * output span shape is fixed, so plain string assembly produces the same
+ * HTML the web editors consume.
+ *
+ * Divergence from v2: a mention whose id is missing from `suggestions`
+ * is left as-is instead of crashing on `suggestion.name`.
+ */
+export const convertMentionsToHTMLAndPlainText = ({
+  suggestions = [],
+  value,
+}: {
+  suggestions?: MentionSuggestion[];
+  value: string;
+}) => {
+  let html = `<p>${escapeHtml(value).replace(/\n/g, "<br>")}</p>`;
+  let plainText = value;
+
+  // The same pattern the trigger config writes with, so a display name
+  // containing a parenthesis is matched whole instead of being cut at the
+  // first ")".
+  for (const match of value.matchAll(new RegExp(MENTION_MARKUP.source, "g"))) {
+    const [mention, , id = ""] = match;
+    const suggestion = suggestions.find(item => item.id === id);
+    if (!suggestion) continue;
+
+    const name = escapeHtml(suggestion.name);
+    const span = `<span data-type="mention" data-id="${escapeHtml(
+      id
+    )}" data-label="${name}">@${name}</span>`;
+    // Replacers are functions so a name containing $& or $1 cannot be read
+    // as a replacement pattern; the html needle is escaped because the body
+    // it searches has already been escaped.
+    html = html.replace(escapeHtml(mention), () => span);
+    plainText = plainText.replace(mention, () => `@${suggestion.name}`);
+  }
+
+  return { html, plainText };
+};

package/src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,86 @@
+import {
+  Checkbox as CheckboxIcon,
+  CheckboxInactive,
+} from "@bigbinary/neeto-icons-rn";
+import { type StyleProp, type TextStyle } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Touchable, type TouchableProps } from "../Touchable";
+import { Typography } from "../Typography";
+
+export type CheckBoxProps = Omit<TouchableProps, "onPress"> & {
+  checked?: boolean;
+  onSelect?: () => void;
+  disabled?: boolean;
+  label: string;
+  labelStyle?: StyleProp<TextStyle>;
+  isRequiredLabel?: boolean;
+  iconSize?: number;
+};
+
+export const CheckBox = ({
+  checked = false,
+  onSelect,
+  disabled = false,
+  label,
+  labelStyle,
+  isRequiredLabel = false,
+  iconSize,
+  style,
+  ...rest
+}: CheckBoxProps) => {
+  const { theme } = useUnistyles();
+
+  styles.useVariants({ checked, disabled });
+
+  const Icon = checked ? CheckboxIcon : CheckboxInactive;
+
+  return (
+    <Touchable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      style={[styles.container, style]}
+      onPress={onSelect}
+      {...rest}
+    >
+      <Typography size="m" style={[styles.label, labelStyle]}>
+        {isRequiredLabel ? `${label}*` : label}
+      </Typography>
+      <Icon
+        color={theme.colors.text.primary}
+        size={iconSize ?? moderateScale(22)}
+      />
+    </Touchable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    flexShrink: 1,
+    paddingVertical: moderateScale(8),
+  },
+  label: {
+    flex: 1,
+    lineHeight: moderateScale(22),
+    variants: {
+      checked: {
+        true: {
+          color: theme.colors.text.primary,
+          fontFamily: theme.fonts.semibold,
+        },
+        false: {
+          color: theme.colors.palette.grey400,
+          fontFamily: theme.fonts.regular,
+        },
+      },
+      disabled: {
+        true: { color: theme.colors.palette.grey400 },
+        false: {},
+      },
+    },
+  },
+}));

package/src/components/CheckBox/index.ts

@@ -0,0 +1 @@
+export { CheckBox, type CheckBoxProps } from "./CheckBox";

package/src/components/Container/Container.tsx

@@ -0,0 +1,14 @@
+import { View, type ViewProps } from "react-native";
+
+export type ContainerProps = ViewProps;
+
+/**
+ * The v2 workhorse (260 importing files fleet-wide), now a plain themed
+ * View. It accepted styled-system shorthands (`p`, `bg`, `flex`…) through
+ * the compat layer up to the v3 alpha; those are gone — pass `style`.
+ */
+export const Container = ({ children, style, ...rest }: ContainerProps) => (
+  <View {...rest} style={style}>
+    {children}
+  </View>
+);

package/src/components/Container/index.ts

@@ -0,0 +1 @@
+export { Container, type ContainerProps } from "./Container";

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,32 @@
+import { View, type ViewProps } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+
+export type DividerProps = ViewProps & {
+  orientation?: "horizontal" | "vertical";
+  thickness?: number;
+};
+
+export const Divider = ({
+  orientation = "horizontal",
+  thickness = moderateScale(1),
+  style,
+  ...rest
+}: DividerProps) => {
+  if (thickness <= 0) return null;
+
+  const lineStyle =
+    orientation === "horizontal"
+      ? { height: thickness }
+      : { width: thickness, flex: 1 };
+
+  // styles.line first so a caller's style can recolor the rule.
+  return <View {...rest} style={[styles.line, lineStyle, style]} />;
+};
+
+const styles = StyleSheet.create(theme => ({
+  line: {
+    backgroundColor: theme.colors.palette.grey400,
+  },
+}));

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from "./Divider";

package/src/components/EmptyView/EmptyView.tsx

@@ -0,0 +1,80 @@
+import { type ComponentType, type ReactNode } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Button } from "../Button";
+import { Typography } from "../Typography";
+
+export type EmptyViewProps = {
+  title: string;
+  description?: string;
+  /** Full-size artwork; product illustrations stay app-side. */
+  Illustration?: ReactNode;
+  /** Compact fallback when there is no illustration (neeto-icons-rn shape). */
+  Icon?: ComponentType<{ size?: number; color?: string }>;
+  primaryAction?: {
+    label: string;
+    onPress: () => void;
+  };
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Promoted component: the fleet grew 10 hand-rolled empty states across 8
+ * codebases (fresh audit, 2026-07-28). One layout — artwork, title,
+ * description, optional CTA — replaces them. cal's API maps over:
+ * subtitle → description, showCTA/ctaLabel/onCTAPress → primaryAction.
+ */
+export const EmptyView = ({
+  title,
+  description,
+  Illustration,
+  Icon,
+  primaryAction,
+  style,
+}: EmptyViewProps) => {
+  const { theme } = useUnistyles();
+
+  return (
+    <View style={[styles.container, style]}>
+      {Illustration ?? null}
+      {!Illustration && Icon && (
+        <Icon color={theme.colors.text.muted} size={moderateScale(48)} />
+      )}
+      <View style={styles.textBlock}>
+        <Typography size="xl" style={styles.centered} weight="semibold">
+          {title}
+        </Typography>
+        {!!description && (
+          <Typography size="s" style={[styles.centered, styles.description]}>
+            {description}
+          </Typography>
+        )}
+      </View>
+      {primaryAction && (
+        <Button label={primaryAction.label} onPress={primaryAction.onPress} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    gap: moderateScale(16),
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(24),
+    paddingVertical: moderateScale(32),
+  },
+  textBlock: {
+    alignItems: "center",
+    gap: moderateScale(4),
+  },
+  centered: {
+    textAlign: "center",
+  },
+  description: {
+    color: theme.colors.text.muted,
+  },
+}));

package/src/components/EmptyView/index.ts

@@ -0,0 +1 @@
+export { EmptyView, type EmptyViewProps } from "./EmptyView";

package/src/components/FlashList/FlashList.tsx

@@ -0,0 +1,162 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  type ReactElement,
+} from "react";
+import { RefreshControl } from "react-native";
+import {
+  FlashList as ShopifyFlashList,
+  type FlashListProps as ShopifyFlashListProps,
+  type FlashListRef,
+} from "@shopify/flash-list";
+import Animated, {
+  cancelAnimation,
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useRefreshByUser } from "../../hooks";
+import { moderateScale } from "../../utils/scale";
+import { Skeleton } from "../Skeleton";
+
+// Default loading row — v2 rendered a react-content-loader rect here; the
+// promoted Skeleton primitive replaces it.
+const Placeholder = () => (
+  <Skeleton
+    height={moderateScale(50)}
+    style={{
+      marginHorizontal: moderateScale(15),
+      marginBottom: moderateScale(10),
+    }}
+  />
+);
+
+export type FlashListProps<T> = Omit<ShopifyFlashListProps<T>, "data"> & {
+  data?: readonly T[];
+  isLoading?: boolean;
+  SkeletonComponent?: ReactElement;
+  placeHolderItemCount?: number;
+  animationDuration?: number;
+  onRefresh?: () => Promise<unknown> | unknown;
+};
+
+/**
+ * v2-parity FlashList: skeleton rows while loading, staggered fade-in of the
+ * first rows, pull-to-refresh wired through useRefreshByUser.
+ */
+const FlashListInner = <T,>(
+  {
+    animationDuration = 2000,
+    SkeletonComponent,
+    placeHolderItemCount = 10,
+    isLoading = false,
+    data = [],
+    onRefresh,
+    onEndReached,
+    keyExtractor,
+    renderItem: originalRenderItem,
+    ...rest
+  }: FlashListProps<T>,
+  ref: React.Ref<FlashListRef<T>>
+) => {
+  const progress = useSharedValue(0);
+  const { isRefetchingByUser, refetchByUser } = useRefreshByUser(
+    onRefresh ?? (() => {})
+  );
+
+  useEffect(() => {
+    progress.value = 0;
+    progress.value = withSequence(
+      withTiming(20, { duration: animationDuration }),
+      withTiming(10000, { duration: 0 })
+    );
+
+    return () => cancelAnimation(progress);
+  }, [animationDuration, progress, isLoading]);
+
+  const FadeIn = useCallback(
+    ({ index, children }: { index: number; children: React.ReactNode }) => {
+      const inputRange = [index - 1, index, index + 1, index + 2];
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const animatedStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(
+          progress.value,
+          inputRange,
+          [0, 0.6, 1, 1],
+          Extrapolation.CLAMP
+        ),
+        transform: [
+          {
+            translateX: interpolate(
+              progress.value,
+              inputRange,
+              [25, 15, 10, 0],
+              Extrapolation.CLAMP
+            ),
+          },
+        ],
+      }));
+
+      return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+    },
+    [progress]
+  );
+
+  // Memoized so the data prop keeps its identity across the parent's
+  // re-renders while loading, instead of remounting every placeholder row.
+  const dummyData = useMemo(
+    () => Array.from({ length: placeHolderItemCount }) as T[],
+    [placeHolderItemCount]
+  );
+  const shouldAnimate = animationDuration > 0;
+
+  return (
+    <ShopifyFlashList<T>
+      {...rest}
+      data={isLoading ? dummyData : (data as T[])}
+      extraData={{ isLoading }}
+      ref={ref}
+      keyExtractor={(item, index) =>
+        isLoading || !keyExtractor
+          ? index.toString()
+          : keyExtractor(item, index)
+      }
+      refreshControl={
+        onRefresh ? (
+          <RefreshControl
+            refreshing={isRefetchingByUser}
+            onRefresh={refetchByUser}
+          />
+        ) : undefined
+      }
+      renderItem={info => {
+        if (isLoading) {
+          return (
+            <FadeIn index={info.index}>
+              {SkeletonComponent ?? <Placeholder />}
+            </FadeIn>
+          );
+        }
+
+        const rendered = originalRenderItem?.(info) ?? null;
+
+        return shouldAnimate ? (
+          <FadeIn index={info.index}>{rendered}</FadeIn>
+        ) : (
+          rendered
+        );
+      }}
+      onEndReached={isLoading ? undefined : onEndReached}
+    />
+  );
+};
+
+export const FlashList = forwardRef(FlashListInner) as <T>(
+  props: FlashListProps<T> & { ref?: React.Ref<FlashListRef<T>> }
+) => ReactElement;

package/src/components/FlashList/index.ts

@@ -0,0 +1 @@
+export { FlashList, type FlashListProps } from "./FlashList";

package/src/components/Header/BaseHeader.tsx

@@ -0,0 +1,19 @@
+import { View, type ViewProps } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+export type BaseHeaderProps = ViewProps;
+
+/** Bare header row surface (promoted from neeto-commons-rn). */
+export const BaseHeader = ({ style, children, ...rest }: BaseHeaderProps) => (
+  <View {...rest} style={[styles.container, style]}>
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    backgroundColor: theme.colors.background.primary,
+    flexDirection: "row",
+  },
+}));