@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/components/AppVersion.ts

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import { AppState, Linking, Platform } from "react-native";
+
+import { Alert } from "@bigbinary/neetoui-rn";
+import { compare } from "compare-versions";
+import Config from "react-native-config";
+import { getVersion } from "react-native-device-info";
+
+import {
+  ANDROID_APP_LINK,
+  IOS_PROD_APP_LINK,
+  IOS_STAGING_APP_LINK,
+} from "./constants";
+
+import { useLocalization } from "../contexts/localization";
+import { getItem, setItem } from "../helpers/asyncStore";
+import { useFetchAppVersionApi } from "../hooks/query/useAppVersionApi";
+import { Store } from "../store";
+
+/**
+ * `AppVersionInfo` (@api/app_version) types only the envelope; the
+ * per-platform fields read below live under its index signature.
+ */
+interface AppVersionPayload {
+  android_minimum_supported_version?: string;
+  android_current_version?: string;
+  ios_minimum_supported_version?: string;
+  ios_current_version?: string;
+}
+
+export const AppVersion = () => {
+  const [isMajorUpdate, setIsMajorUpdate] = useState(false);
+  const [isMinorUpdate, setIsMinorUpdate] = useState(false);
+
+  const { strings } = useLocalization();
+
+  const appName = Store.getState().auth.appName;
+
+  const { data: appVersionData, refetch } = useFetchAppVersionApi();
+  const data = (appVersionData ?? {}) as AppVersionPayload;
+
+  const iOSAppLink =
+    Config.ENVIRONMENT === "staging" ? IOS_STAGING_APP_LINK : IOS_PROD_APP_LINK;
+
+  const handleAppUpdate = async () => {
+    try {
+      setIsMinorUpdate(false);
+      setIsMajorUpdate(false);
+      const url = Platform.select({
+        ios: iOSAppLink,
+        android: ANDROID_APP_LINK,
+        default: ANDROID_APP_LINK,
+      }).toLowerCase();
+
+      await Linking.openURL(url);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log((error as Error).message);
+    }
+  };
+
+  const compareVersions = () => {
+    if (Platform.OS === "android") {
+      const {
+        android_minimum_supported_version: androidMinimumSupportedVersion,
+        android_current_version: androidCurrentVersion,
+      } = data;
+      if (androidMinimumSupportedVersion && androidCurrentVersion) {
+        if (compare(getVersion(), androidMinimumSupportedVersion, "<")) {
+          setIsMajorUpdate(true);
+        } else if (compare(getVersion(), androidCurrentVersion, "<")) {
+          setIsMinorUpdate(true);
+        }
+      }
+    } else {
+      const {
+        ios_minimum_supported_version: iOSMinimumSupportedVersion,
+        ios_current_version: iOSCurrentVersion,
+      } = data;
+      if (iOSMinimumSupportedVersion && iOSCurrentVersion) {
+        if (compare(getVersion(), iOSMinimumSupportedVersion, "<")) {
+          setIsMajorUpdate(true);
+        } else if (compare(getVersion(), iOSCurrentVersion, "<")) {
+          setIsMinorUpdate(true);
+        }
+      }
+    }
+  };
+
+  const showAlert = async () => {
+    const {
+      android_current_version: androidCurrentVersion,
+      ios_current_version: iOSCurrentVersion,
+    } = data;
+
+    const version = Platform.select({
+      ios: iOSCurrentVersion,
+      android: androidCurrentVersion,
+    });
+
+    const buttons = [
+      {
+        label: strings.commons.buttons.update,
+        onPress: handleAppUpdate,
+      },
+    ];
+    if (isMinorUpdate) {
+      buttons.push({
+        label: strings.commons.alertMessage.mayBeLater,
+        onPress: async () => {
+          await setItem("appVersion", version);
+        },
+      });
+      const currentVersion = await getItem<string>("appVersion");
+      if (currentVersion === version) return null;
+    }
+
+    return Alert.show({
+      buttons,
+      // `formatString` widens to an array only when handed React elements;
+      // `appName` is a plain string, so this is always a string.
+      description: strings.formatString(
+        strings.commons.alertMessage.updateAvailableDescription,
+        appName
+      ) as string,
+      isCancelable: !isMajorUpdate,
+      title: strings.commons.alertMessage.updateAvailable,
+    });
+  };
+
+  useEffect(() => {
+    if (data) {
+      compareVersions();
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (isMinorUpdate || isMajorUpdate) {
+      showAlert();
+    }
+  }, [isMinorUpdate, isMajorUpdate]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", state => {
+      if (state === "active") {
+        refetch();
+      }
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  return null;
+};

package/src/components/BottomSheet.ts

@@ -0,0 +1,9 @@
+import { BottomSheet } from "@bigbinary/neetoui-rn";
+
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3 (gorhom-based, same
+ * isVisible/hide/data/ContentRow facade). This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BottomSheet from the UI library instead.
+ */
+export default BottomSheet;

package/src/components/BottomSheetMenu.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BottomSheetMenu from the UI library instead.
+ */
+export { BottomSheetMenu } from "@bigbinary/neetoui-rn";

package/src/components/ConfirmSheet.ts

@@ -0,0 +1,15 @@
+import { Alert, type AlertParams } from "@bigbinary/neetoui-rn";
+
+/**
+ * @deprecated Collapsed into the UI library's Alert (v3 presents every
+ * confirm as this bottom sheet). Same params: { title, description,
+ * isCancelable, buttons, onDismiss }. NeetoUIProvider hosts it, so
+ * rendering <ConfirmSheet /> is a no-op kept for compatibility. Call
+ * Alert.show directly once call sites migrate; this alias disappears in
+ * the next commons major.
+ */
+const ConfirmSheet = () => null;
+
+ConfirmSheet.show = (params: AlertParams) => Alert.show(params);
+
+export default ConfirmSheet;

package/src/components/EmptyView.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { EmptyView as UIEmptyView } from "@bigbinary/neetoui-rn";
+
+import EmptyGraphic from "../assets/images/empty.svg";
+import { moderateScale } from "../helpers/scale";
+
+export interface EmptyViewProps {
+  title?: string | null;
+  showCTA?: boolean;
+  ctaLabel?: string | null;
+  /**
+   * Historically optional even with showCTA set; the library's primaryAction
+   * requires a handler, hence the cast below.
+   */
+  onCTAPress?: (() => void) | null;
+}
+
+/**
+ * Compat wrapper over the UI library's EmptyView: keeps the historical
+ * commons prop API (showCTA/ctaLabel/onCTAPress) and the commons empty
+ * illustration. New code should use the library EmptyView directly
+ * ({ title, description, Illustration, primaryAction }).
+ */
+export const EmptyView = ({
+  title = null,
+  showCTA = false,
+  ctaLabel = null,
+  onCTAPress = null,
+}: EmptyViewProps) => (
+  <UIEmptyView
+    Illustration={<EmptyGraphic height={moderateScale(200)} />}
+    title={title ?? ""}
+    primaryAction={
+      showCTA && ctaLabel
+        ? { label: ctaLabel, onPress: onCTAPress as () => void }
+        : undefined
+    }
+  />
+);

package/src/components/Header/BaseHeader.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BaseHeader from the UI library instead.
+ */
+export { BaseHeader } from "@bigbinary/neetoui-rn";

package/src/components/Header/ScreenHeader.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import ScreenHeader from the UI library instead.
+ */
+export { ScreenHeader } from "@bigbinary/neetoui-rn";

package/src/components/Header.tsx

@@ -0,0 +1,139 @@
+import React, { useState, type ComponentType } from "react";
+
+import { HamburgerMenu, MenuVertical, Search } from "@bigbinary/neeto-icons-rn";
+import {
+  Avatar,
+  BottomSheetMenu,
+  Header as UIHeader,
+  Touchable,
+  useNeetoTheme,
+} from "@bigbinary/neetoui-rn";
+import { useNavigation, type NavigationProp } from "@react-navigation/native";
+
+import { moderateScale } from "../helpers/scale";
+import { debounce } from "../helpers/utils";
+import { type CommonsParamList } from "../navigation/types";
+
+/**
+ * Host apps mount this header inside their drawer navigator, so `openDrawer`
+ * is available at runtime even though commons' own param list cannot name it.
+ */
+type HeaderNavigation = NavigationProp<CommonsParamList> & {
+  openDrawer: () => void;
+};
+
+export interface HeaderProps {
+  title: string;
+  subTitle?: string;
+  canGoBack?: boolean;
+  onBackPress?: () => void;
+  showSideMenu?: boolean;
+  handleSearch?: () => void;
+  RightComponent?: ComponentType;
+  isLoading?: boolean;
+  showWorkspaceLogo?: boolean;
+  onMarkAllAsRead?: () => void;
+  showMarkAllOption?: boolean;
+}
+
+/**
+ * Compat wrapper over the UI library's navigation-agnostic Header: keeps
+ * the historical commons prop API (canGoBack/showSideMenu/RightComponent/
+ * onMarkAllAsRead) and wires react-navigation + the mark-all menu on top.
+ * New code should use the library Header with onBack and slots directly.
+ */
+export const Header = ({
+  title,
+  subTitle,
+  canGoBack = false,
+  onBackPress,
+  showSideMenu,
+  handleSearch,
+  RightComponent,
+  isLoading = false,
+  showWorkspaceLogo = false,
+  onMarkAllAsRead,
+  showMarkAllOption = false,
+}: HeaderProps) => {
+  const navigation = useNavigation<HeaderNavigation>();
+  const theme = useNeetoTheme();
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+  const handleBack =
+    onBackPress || canGoBack
+      ? debounce(onBackPress || navigation.goBack)
+      : undefined;
+
+  const LeftSlot = (
+    <>
+      {showWorkspaceLogo && (
+        <Touchable onPress={() => navigation.openDrawer()}>
+          <Avatar name="S" variant="extra-small" />
+        </Touchable>
+      )}
+      {showSideMenu && (
+        <Touchable
+          accessibilityLabel="Open side menu"
+          hitSlop={moderateScale(8)}
+          onPress={() => navigation.openDrawer()}
+        >
+          <HamburgerMenu
+            color={theme.colors.text.primary}
+            size={moderateScale(24)}
+          />
+        </Touchable>
+      )}
+    </>
+  );
+
+  const RightSlot = (
+    <>
+      {handleSearch && (
+        <Touchable
+          accessibilityLabel="Search"
+          hitSlop={moderateScale(10)}
+          onPress={handleSearch}
+        >
+          <Search color={theme.colors.text.primary} size={moderateScale(24)} />
+        </Touchable>
+      )}
+      {showMarkAllOption && (
+        <Touchable
+          accessibilityLabel="Open menu"
+          hitSlop={moderateScale(10)}
+          onPress={() => setIsMenuVisible(true)}
+        >
+          <MenuVertical
+            color={theme.colors.text.primary}
+            size={moderateScale(24)}
+          />
+        </Touchable>
+      )}
+      {RightComponent && <RightComponent />}
+    </>
+  );
+
+  return (
+    <>
+      <UIHeader
+        LeftSlot={LeftSlot}
+        RightSlot={RightSlot}
+        isLoading={isLoading}
+        subTitle={subTitle}
+        title={title}
+        onBack={handleBack}
+      />
+      <BottomSheetMenu
+        isVisible={isMenuVisible}
+        items={[
+          {
+            key: "mark-all-read",
+            label: "Mark all as read",
+            onPress: () => onMarkAllAsRead && onMarkAllAsRead(),
+          },
+        ]}
+        onClose={() => setIsMenuVisible(false)}
+      />
+    </>
+  );
+};

package/src/components/HyperlinkText.tsx

@@ -0,0 +1,34 @@
+import React, { type ReactNode } from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+
+import { Typography, type TypographyProps } from "@bigbinary/neetoui-rn";
+import Hyperlink from "react-native-hyperlink";
+
+export interface HyperlinkTextProps {
+  /**
+   * Rendered as Typography children, so anything `formatString` returns
+   * (a string, or a mixed string/element array) is accepted.
+   */
+  text: ReactNode;
+  linkMapping: Record<string, string>;
+  linkStyleProps?: StyleProp<TextStyle>;
+  /** v3 Typography props — layout goes through its `style` entry. */
+  textStyleProps?: TypographyProps;
+  onPress?: (url: string, text?: string) => void;
+}
+
+export const HyperlinkText = ({
+  text,
+  onPress,
+  linkMapping,
+  linkStyleProps,
+  textStyleProps,
+}: HyperlinkTextProps) => (
+  <Hyperlink
+    linkStyle={linkStyleProps}
+    linkText={url => linkMapping?.[url]}
+    onPress={onPress}
+  >
+    <Typography {...textStyleProps}>{text}</Typography>
+  </Hyperlink>
+);

package/src/components/LineLoader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Skeleton } from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+
+export interface LineLoaderProps {
+  isLoading?: boolean;
+  height?: number;
+}
+
+/**
+ * @deprecated Absorbed by the UI library's Skeleton
+ * (<Skeleton variant="line" animated />). This shim keeps the v2 prop
+ * contract for one deprecation cycle and disappears in the next commons
+ * major.
+ */
+export const LineLoader = ({
+  isLoading,
+  height = moderateScale(1.5),
+}: LineLoaderProps) => (
+  <Skeleton animated={Boolean(isLoading)} height={height} variant="line" />
+);

package/src/components/NotificationIcon.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import { Notification } from "@bigbinary/neeto-icons-rn";
+import {
+  Container,
+  Touchable,
+  lightTheme,
+  useNeetoTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+import { useNotification } from "../hooks/query/useNotification";
+
+export interface NotificationIconProps {
+  handleClick?: () => void;
+}
+
+export const NotificationIcon = ({
+  handleClick = () => {},
+}: NotificationIconProps) => {
+  const theme = useNeetoTheme();
+
+  const { useFetchNotifications } = useNotification();
+  const { data } = useFetchNotifications();
+  const unreadNotifications = data?.unreadNotifications ?? 0;
+
+  return (
+    <Container>
+      <Touchable
+        hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+        onPress={handleClick}
+      >
+        <Notification
+          color={theme.colors.text.primary}
+          size={moderateScale(22)}
+        />
+      </Touchable>
+      {unreadNotifications > 0 && <Container style={styles.unreadBadge} />}
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  unreadBadge: {
+    position: "absolute",
+    right: 0,
+    backgroundColor: lightTheme.colors.danger,
+    borderRadius: 5,
+    height: 10,
+    width: 10,
+  },
+});

package/src/components/NotificationPreferenceList.tsx

@@ -0,0 +1,132 @@
+import React, { type ComponentType } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Container,
+  Divider,
+  Loader,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { PREFERENCE_TITLE_LINE_HEIGHT } from "./constants";
+import { ToggleSwitch } from "./ToggleSwitch";
+
+import { moderateScale } from "../helpers/scale";
+
+export interface NotificationPreference {
+  label: string;
+  enabled: boolean;
+  LeftIcon?: ComponentType;
+  onSwitch: (item: NotificationPreference, index: number) => void;
+}
+
+// neetoui-rn v2 shipped this; v3 dropped it. Reproduced here against the v3
+// primitives, with the styled-system shorthands the original used rewritten
+// as styles.
+export interface NotificationPreferenceListProps {
+  data?: NotificationPreference[];
+  title?: string;
+  isLoading?: boolean;
+}
+
+export const NotificationPreferenceList = ({
+  data,
+  title,
+  isLoading,
+}: NotificationPreferenceListProps) => (
+  <Container style={styles.root}>
+    <Container style={styles.header}>
+      {!!title && (
+        <Typography
+          color={lightTheme.colors.palette.grey600}
+          size="m"
+          style={styles.title}
+        >
+          {title}
+        </Typography>
+      )}
+      {isLoading && (
+        <Container style={styles.loader}>
+          <Loader />
+        </Container>
+      )}
+    </Container>
+    <Container style={styles.list}>
+      {data?.map((item, index) => {
+        const { label, enabled, onSwitch, LeftIcon } = item;
+        const isLastItem = index === data.length - 1;
+
+        return (
+          <Container key={index} style={styles.itemWrapper}>
+            <Container style={styles.item}>
+              <Container style={styles.labelRow}>
+                {LeftIcon && (
+                  <Container style={styles.leftIcon}>
+                    <LeftIcon />
+                  </Container>
+                )}
+                <Typography size="l" style={styles.label}>
+                  {label}
+                </Typography>
+              </Container>
+              <ToggleSwitch
+                value={enabled}
+                onValueChange={() => onSwitch(item, index)}
+              />
+            </Container>
+            {!isLastItem && <Divider style={styles.divider} />}
+          </Container>
+        );
+      })}
+    </Container>
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    paddingBottom: moderateScale(8),
+    paddingTop: moderateScale(20),
+  },
+  title: {
+    lineHeight: PREFERENCE_TITLE_LINE_HEIGHT,
+  },
+  loader: {
+    justifyContent: "center",
+    height: PREFERENCE_TITLE_LINE_HEIGHT,
+    marginHorizontal: moderateScale(8),
+  },
+  list: {
+    backgroundColor: lightTheme.colors.background.secondary,
+    borderRadius: moderateScale(8),
+  },
+  itemWrapper: {
+    paddingHorizontal: moderateScale(16),
+  },
+  item: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: moderateScale(12),
+  },
+  labelRow: {
+    alignItems: "center",
+    flex: 1,
+    flexDirection: "row",
+  },
+  leftIcon: {
+    marginRight: moderateScale(8),
+  },
+  label: {
+    flex: 1,
+    marginRight: moderateScale(8),
+  },
+  divider: {
+    backgroundColor: lightTheme.colors.palette.grey300,
+  },
+});