@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/ParentView/index.ts

@@ -0,0 +1 @@
+export { ParentView, type ParentViewProps } from "./ParentView";

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,80 @@
+import { Radio, RadioInactive } 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 RadioButtonProps = Omit<TouchableProps, "onPress"> & {
+  selected?: boolean;
+  onSelect?: () => void;
+  disabled?: boolean;
+  label: string;
+  labelStyle?: StyleProp<TextStyle>;
+  iconSize?: number;
+};
+
+export const RadioButton = ({
+  selected = false,
+  onSelect,
+  disabled = false,
+  label,
+  labelStyle,
+  iconSize,
+  style,
+  ...rest
+}: RadioButtonProps) => {
+  const { theme } = useUnistyles();
+
+  styles.useVariants({ selected, disabled });
+
+  const Icon = selected ? Radio : RadioInactive;
+
+  return (
+    <Touchable
+      accessibilityRole="radio"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      style={[styles.container, style]}
+      onPress={onSelect}
+      {...rest}
+    >
+      <Typography size="m" style={[styles.label, labelStyle]}>
+        {label}
+      </Typography>
+      <Icon
+        color={theme.colors.text.primary}
+        size={iconSize ?? moderateScale(22)}
+      />
+    </Touchable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    flexDirection: "row",
+    paddingVertical: moderateScale(8),
+  },
+  label: {
+    flex: 1,
+    lineHeight: moderateScale(22),
+    variants: {
+      selected: {
+        true: {
+          color: theme.colors.text.primary,
+          fontFamily: theme.fonts.medium,
+        },
+        false: {
+          color: theme.colors.text.secondary,
+          fontFamily: theme.fonts.regular,
+        },
+      },
+      disabled: {
+        true: { color: theme.colors.palette.grey400 },
+        false: {},
+      },
+    },
+  },
+}));

package/src/components/RadioButton/index.ts

@@ -0,0 +1 @@
+export { RadioButton, type RadioButtonProps } from "./RadioButton";

package/src/components/ScrollView/ScrollView.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import {
+  ScrollView as RNScrollView,
+  type ScrollViewProps as RNScrollViewProps,
+} from "react-native";
+
+const GROW_CONTENT = { flexGrow: 1 } as const;
+
+export type ScrollViewProps = RNScrollViewProps;
+
+/**
+ * v2 defaults preserved: taps land while the keyboard is open, no vertical
+ * scroll indicator, content grows to fill the viewport.
+ */
+export const ScrollView = forwardRef<RNScrollView, ScrollViewProps>(
+  ({ children, style, contentContainerStyle, ...rest }, ref) => (
+    <RNScrollView
+      ref={ref}
+      keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator={false}
+      {...rest}
+      contentContainerStyle={[GROW_CONTENT, contentContainerStyle]}
+      style={style}
+    >
+      {children}
+    </RNScrollView>
+  )
+);
+
+ScrollView.displayName = "ScrollView";

package/src/components/ScrollView/index.ts

@@ -0,0 +1 @@
+export { ScrollView, type ScrollViewProps } from "./ScrollView";

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  Pressable,
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from "react-native";
+import { Close, Search } from "@bigbinary/neeto-icons-rn";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { useDebounce } from "../../hooks";
+import { moderateScale } from "../../utils/scale";
+import { Touchable } from "../Touchable";
+
+export type SearchBarProps = {
+  placeholder?: string;
+  onChangeText?: (text: string) => void;
+  onCancel?: () => void;
+  debounceDelay?: number;
+  showCancelButton?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputProps?: TextInputProps;
+};
+
+export const SearchBar = ({
+  placeholder = "Search",
+  onChangeText,
+  onCancel,
+  debounceDelay = 1000,
+  showCancelButton = true,
+  containerStyle,
+  inputProps,
+}: SearchBarProps) => {
+  const { theme } = useUnistyles();
+  const inputRef = useRef<TextInput>(null);
+  const [searchText, setSearchText] = useState("");
+  const debouncedSearchText = useDebounce(searchText.trim(), debounceDelay);
+
+  // Held in a ref so an inline arrow from the call site does not make the
+  // effect a per-render callback: the debounced text is what should drive
+  // the search, not the identity of the handler.
+  const onChangeTextRef = useRef(onChangeText);
+  onChangeTextRef.current = onChangeText;
+
+  const hasEmittedRef = useRef(false);
+
+  useEffect(() => {
+    // Skips the mount pass — emitting "" before the user has typed would
+    // clear whatever search the screen restored.
+    if (!hasEmittedRef.current) {
+      hasEmittedRef.current = true;
+
+      return;
+    }
+
+    onChangeTextRef.current?.(debouncedSearchText);
+  }, [debouncedSearchText]);
+
+  const handleCancel = () => {
+    setSearchText("");
+    inputRef.current?.blur();
+    onCancel?.();
+  };
+
+  return (
+    <Pressable
+      style={[styles.container, containerStyle]}
+      onPress={() => {
+        if (!inputRef.current?.isFocused()) inputRef.current?.focus();
+      }}
+    >
+      <Search color={theme.colors.text.secondary} size={moderateScale(22)} />
+      <TextInput
+        accessibilityRole="search"
+        autoCapitalize="none"
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.text.muted}
+        ref={inputRef}
+        returnKeyType="search"
+        style={styles.input}
+        value={searchText}
+        onChangeText={setSearchText}
+        {...inputProps}
+      />
+      {showCancelButton && (
+        <Touchable
+          accessibilityLabel="Clear search"
+          style={styles.cancelButton}
+          onPress={handleCancel}
+        >
+          <Close color={theme.colors.text.secondary} size={moderateScale(22)} />
+        </Touchable>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    alignItems: "center",
+    borderColor: theme.colors.palette.grey400,
+    borderRadius: moderateScale(8),
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: moderateScale(8),
+    height: moderateScale(42),
+    paddingHorizontal: moderateScale(8),
+  },
+  input: {
+    color: theme.colors.text.primary,
+    flex: 1,
+    fontFamily: theme.fonts.regular,
+    fontSize: moderateScale(16),
+    padding: 0,
+  },
+  cancelButton: {
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(8),
+  },
+}));

package/src/components/SearchBar/index.ts

@@ -0,0 +1 @@
+export { SearchBar, type SearchBarProps } from "./SearchBar";

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,121 @@
+import { useEffect } from "react";
+import { View, type DimensionValue, type ViewProps } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+
+type SkeletonVariants = UnistylesVariants<typeof styles>;
+
+export type SkeletonProps = ViewProps &
+  SkeletonVariants & {
+    width?: DimensionValue;
+    height?: DimensionValue;
+    radius?: number;
+    animated?: boolean;
+  };
+
+/**
+ * Promoted component: replaces the fleet's ~14 react-content-loader
+ * implementations (and v2's LineLoader) with one Reanimated pulse primitive.
+ * The library ships primitives only — screen-specific skeleton layouts
+ * recompose these app-side.
+ */
+export const Skeleton = ({
+  variant = "rect",
+  width,
+  height,
+  radius,
+  animated = true,
+  style,
+  ...rest
+}: SkeletonProps) => {
+  const pulse = useSharedValue(0.45);
+
+  useEffect(() => {
+    if (!animated) return undefined;
+
+    pulse.value = withRepeat(
+      withTiming(1, { duration: 700, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true
+    );
+
+    // An infinite repeat keeps running after unmount (and after `animated`
+    // flips off) unless it is cancelled — a list of skeleton rows would
+    // otherwise leave one live animation behind per row.
+    return () => cancelAnimation(pulse);
+  }, [animated, pulse]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: animated ? pulse.value : 1,
+  }));
+
+  styles.useVariants({ variant });
+
+  const size = {
+    width: width ?? (variant === "circle" ? moderateScale(40) : "100%"),
+    height:
+      height ??
+      (variant === "line"
+        ? moderateScale(12)
+        : variant === "circle"
+          ? moderateScale(40)
+          : moderateScale(48)),
+  };
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <View
+        {...rest}
+        style={[
+          styles.base,
+          size,
+          radius !== undefined && { borderRadius: radius },
+          style,
+        ]}
+      />
+    </Animated.View>
+  );
+};
+
+type SkeletonGroupProps = {
+  count: number;
+  gap?: number;
+  children: React.ReactNode;
+};
+
+/** Repeat a skeleton row layout `count` times. */
+const SkeletonGroup = ({
+  count,
+  gap = moderateScale(12),
+  children,
+}: SkeletonGroupProps) => (
+  <View style={{ gap }}>
+    {Array.from({ length: count }, (_, index) => (
+      <View key={index}>{children}</View>
+    ))}
+  </View>
+);
+
+Skeleton.Group = SkeletonGroup;
+
+const styles = StyleSheet.create(theme => ({
+  base: {
+    backgroundColor: theme.colors.palette.grey200,
+    variants: {
+      variant: {
+        rect: { borderRadius: moderateScale(6) },
+        line: { borderRadius: moderateScale(4) },
+        circle: { borderRadius: 9999 },
+      },
+    },
+  },
+}));

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from "./Skeleton";

package/src/components/TextWithUrl/TextWithUrl.tsx

@@ -0,0 +1,54 @@
+import { Linking } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { Typography, type TypographyProps } from "../Typography";
+
+const URL_EMAIL_REGEX =
+  /(https?:\/\/[^\s]+)|(\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b)/g;
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export type TextWithUrlProps = Omit<TypographyProps, "children"> & {
+  text?: string | number;
+};
+
+/**
+ * Renders text with tappable http(s) links and email addresses
+ * (promoted from neeto-commons-rn, same splitting regexes). Links render
+ * inline as nested Text, so wrapping behaves like plain copy.
+ */
+export const TextWithUrl = ({ text = "", ...rest }: TextWithUrlProps) => {
+  if (typeof text !== "string") {
+    return <Typography {...rest}>{text}</Typography>;
+  }
+
+  const parts = text.split(URL_EMAIL_REGEX).filter(Boolean);
+
+  return (
+    <Typography {...rest}>
+      {parts.map((part, index) => {
+        if (!URL_EMAIL_REGEX.test(part)) return part;
+        // Reset lastIndex — the regex is global and test() advances it.
+        URL_EMAIL_REGEX.lastIndex = 0;
+        const isEmail = EMAIL_REGEX.test(part);
+
+        return (
+          <Typography
+            key={`${part}-${index}`}
+            style={styles.link}
+            suppressHighlighting={false}
+            {...rest}
+            onPress={() => Linking.openURL(isEmail ? `mailto:${part}` : part)}
+          >
+            {part}
+          </Typography>
+        );
+      })}
+    </Typography>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  link: {
+    color: theme.colors.palette.lightBlue400,
+  },
+}));

package/src/components/TextWithUrl/index.ts

@@ -0,0 +1 @@
+export { TextWithUrl, type TextWithUrlProps } from "./TextWithUrl";

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef } from "react";
+import { Pressable, View, useWindowDimensions } from "react-native";
+import { Close } from "@bigbinary/neeto-icons-rn";
+import ToastMessage, {
+  type ToastConfig,
+  type ToastConfigParams,
+  type ToastShowParams,
+  type ToastProps,
+} from "react-native-toast-message";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Typography } from "../Typography";
+import { ToastGlyph } from "./ToastGlyph";
+
+// v2 rule: error toasts with long descriptions stay up longer.
+const LONG_ERROR_DURATION = 10000;
+const DEFAULT_DURATION = 4000;
+
+const ToastView = ({
+  type,
+  text1,
+  text2,
+  hide,
+  isVisible,
+}: ToastConfigParams<unknown>) => {
+  const { theme } = useUnistyles();
+  const { width } = useWindowDimensions();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Held in a ref so a fresh `hide` identity from the host cannot restart
+  // the countdown on every render.
+  const hideRef = useRef(hide);
+  hideRef.current = hide;
+
+  const duration =
+    type === "error" && (text2?.length ?? 0) >= 25
+      ? LONG_ERROR_DURATION
+      : DEFAULT_DURATION;
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const startTimer = useCallback(() => {
+    clearTimer();
+    timerRef.current = setTimeout(() => hideRef.current(), duration);
+  }, [clearTimer, duration]);
+
+  // The card owns its timer (v2 behavior): holding the card pauses
+  // dismissal, releasing it resumes, long error copy gets more reading time.
+  useEffect(() => {
+    if (!isVisible) return undefined;
+
+    startTimer();
+
+    return clearTimer;
+  }, [isVisible, startTimer, clearTimer]);
+
+  const accentColor =
+    theme.colors.toast[type as keyof typeof theme.colors.toast] ??
+    theme.colors.toast.info;
+
+  return (
+    <Pressable
+      style={[styles.card, { width: width - moderateScale(20) }]}
+      onPressIn={clearTimer}
+      onPressOut={startTimer}
+    >
+      <View style={[styles.iconSquare, { backgroundColor: accentColor }]}>
+        <ToastGlyph type={type} />
+      </View>
+      <View style={styles.textBlock}>
+        {!!text1 && (
+          <Typography numberOfLines={10} size="l" weight="semibold">
+            {text1}
+          </Typography>
+        )}
+        {!!text2 && (
+          <Typography numberOfLines={10} size="xs" style={styles.description}>
+            {text2}
+          </Typography>
+        )}
+      </View>
+      <Pressable
+        accessibilityLabel="Dismiss toast"
+        hitSlop={moderateScale(5)}
+        onPress={() => {
+          clearTimer();
+          hide();
+        }}
+      >
+        <Close color={theme.colors.palette.grey500} size={moderateScale(22)} />
+      </Pressable>
+    </Pressable>
+  );
+};
+
+const renderToast = (params: ToastConfigParams<unknown>) => (
+  <ToastView {...params} />
+);
+
+export const defaultToasterConfig: ToastConfig = {
+  success: renderToast,
+  error: renderToast,
+  info: renderToast,
+  warning: renderToast,
+};
+
+/**
+ * Host component. NeetoUIProvider mounts it automatically; the bare export
+ * remains for incremental adoption (v2 required apps to mount <Toast />
+ * themselves).
+ */
+export const Toast = ({ config, ...rest }: ToastProps) => (
+  <ToastMessage {...rest} config={{ ...defaultToasterConfig, ...config }} />
+);
+
+// v2 statics, unchanged signatures. autoHide is off by default because the
+// card runs its own v2 timer (press-to-pause, long-error duration);
+// callers passing autoHide/visibilityTime still win.
+Toast.show = (params: ToastShowParams) =>
+  ToastMessage.show({ autoHide: false, ...params });
+Toast.hide = () => ToastMessage.hide();
+
+const styles = StyleSheet.create(theme => ({
+  card: {
+    alignItems: "center",
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: moderateScale(16),
+    flexDirection: "row",
+    gap: moderateScale(10),
+    marginHorizontal: moderateScale(10),
+    minHeight: moderateScale(60),
+    paddingHorizontal: moderateScale(10),
+    paddingVertical: moderateScale(8),
+    ...theme.elevation.high,
+  },
+  iconSquare: {
+    alignItems: "center",
+    borderRadius: moderateScale(10),
+    height: moderateScale(42),
+    justifyContent: "center",
+    width: moderateScale(42),
+  },
+  textBlock: {
+    flex: 1,
+    gap: moderateScale(2),
+    paddingVertical: moderateScale(3),
+  },
+  description: {
+    color: theme.colors.text.secondary,
+  },
+}));

package/src/components/Toast/ToastGlyph.tsx

@@ -0,0 +1,53 @@
+import Svg, { Path } from "react-native-svg";
+
+import { moderateScale } from "../../utils/scale";
+
+type GlyphProps = { paths: string[] };
+
+const Glyph = ({ paths }: GlyphProps) => (
+  <Svg
+    fill="none"
+    height={moderateScale(20)}
+    viewBox="0 0 20 20"
+    width={moderateScale(20)}
+  >
+    {paths.map(d => (
+      <Path
+        d={d}
+        key={d}
+        stroke="white"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    ))}
+  </Svg>
+);
+
+// Exact v2 glyphs (assets/icons/{success,error,info,warning}.svg), inlined
+// through react-native-svg so no asset bundling or metro svg-transformer
+// config is needed in consumer apps. White strokes sit on the per-type
+// colored square, both platforms, both themes.
+const GLYPH_PATHS: Record<string, string[]> = {
+  success: ["M14.5832 7.5L7.49984 14.5833L4.1665 11.25"],
+  error: ["M5 5L15 15", "M15 5L5 15"],
+  info: [
+    "M9.17432 9.37415H10.1327V12.9158",
+    "M9.1665 12.9155H11.091",
+    "M10.0832 6.87154C10.0832 6.91275 10.071 6.95302 10.0481 6.98729C10.0252 7.02155 9.99263 7.04825 9.95456 7.06402C9.9165 7.07978 9.87461 7.08391 9.83419 7.07587C9.79378 7.06783 9.75666 7.04799 9.72752 7.01886C9.69839 6.98972 9.67855 6.9526 9.67051 6.91218C9.66247 6.87177 9.66659 6.82988 9.68236 6.79182C9.69813 6.75375 9.72483 6.72121 9.75909 6.69832C9.79335 6.67543 9.83363 6.66321 9.87484 6.66321",
+    "M9.875 6.66321C9.93025 6.66321 9.98324 6.68516 10.0223 6.72423C10.0614 6.7633 10.0833 6.81629 10.0833 6.87154",
+    "M13.3333 2.4989H6.66667C4.36548 2.4989 2.5 4.36438 2.5 6.66557V13.3322C2.5 15.6334 4.36548 17.4989 6.66667 17.4989H13.3333C15.6345 17.4989 17.5 15.6334 17.5 13.3322V6.66557C17.5 4.36438 15.6345 2.4989 13.3333 2.4989Z",
+  ],
+  warning: [
+    "M10 10.9333V7.81665",
+    "M9.99901 13.4375C9.88401 13.4375 9.79068 13.5308 9.79151 13.6458C9.79151 13.7608 9.88484 13.8542 9.99984 13.8542C10.1148 13.8542 10.2082 13.7608 10.2082 13.6458C10.2082 13.5308 10.1148 13.4375 9.99901 13.4375Z",
+    "M11.522 4.20233L17.2666 14.0877C17.9341 15.2367 17.0903 16.6667 15.7447 16.6667H4.25566C2.90934 16.6667 2.06555 15.2367 2.73383 14.0877L8.47838 4.20233C9.15116 3.04372 10.8492 3.04372 11.522 4.20233Z",
+  ],
+};
+
+export const ToastGlyph = ({ type }: { type: string }) => {
+  const paths = GLYPH_PATHS[type];
+  if (!paths) return null;
+
+  return <Glyph paths={paths} />;
+};

package/src/components/Toast/index.ts

@@ -0,0 +1 @@
+export { Toast, defaultToasterConfig } from "./Toast";

package/src/components/Touchable/Touchable.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from "react-native";
+
+import { getShadowStyles, isAndroid } from "../../utils";
+
+/**
+ * v2's rippleConfig, minus the fields the Pressable rebuild cannot honor.
+ * v2 rendered ripples through a custom 282-line Ripple implementation on both
+ * platforms; v3 uses the platform ripple on Android and an opacity dip on iOS,
+ * so isCentered/isSequential/shouldFade/size/duration no longer apply.
+ */
+type RippleConfig = {
+  color?: string;
+  shouldOverflowContainer?: boolean;
+};
+
+export type TouchableProps = Omit<PressableProps, "style"> & {
+  elevation?: number;
+  rippleConfig?: RippleConfig;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const Touchable = forwardRef<View, TouchableProps>(
+  ({ children, elevation, rippleConfig, style, ...rest }, ref) => {
+    const shadowStyle = elevation ? getShadowStyles(elevation) : null;
+
+    return (
+      <Pressable
+        ref={ref}
+        {...rest}
+        android_ripple={{
+          color: rippleConfig?.color ?? "rgba(0, 0, 0, 0.09)",
+          borderless: rippleConfig?.shouldOverflowContainer ?? false,
+          foreground: true,
+        }}
+        style={({ pressed }) => [
+          shadowStyle,
+          style,
+          pressed && !isAndroid() && { opacity: 0.7 },
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+);
+
+Touchable.displayName = "Touchable";

package/src/components/Touchable/index.ts

@@ -0,0 +1 @@
+export { Touchable, type TouchableProps } from "./Touchable";