@bigbinary/neeto-commons-rn 2.0.3 → 2.2.0

package/src/initializers/logRocket.ts

@@ -1,25 +1,116 @@
 import LogRocket from "@logrocket/react-native";
 import Config from "react-native-config";
 
-import { Store } from "../store";
-
-export const logRocket = () => {
-  if (!Config.LOG_ROCKET_API_KEY || __DEV__) return;
-
-  const { isLoggedIn, userId, name, email, subdomain } = Store.getState().auth;
-
-  LogRocket.init(Config.LOG_ROCKET_API_KEY);
-
-  if (!isLoggedIn) {
-    //End the current session gracefully during logout
-    LogRocket.shutdown();
-    // Reinitialize LogRocket to capture the login screen after logout
-    LogRocket.init(Config.LOG_ROCKET_API_KEY);
-  } else {
-    LogRocket.identify(userId, {
-      name,
-      email,
-      organization: subdomain,
-    });
+import {
+  DEFAULT_SAMPLE_RATE,
+  SAMPLE_DECISION_TTL_MS,
+  SAMPLE_STORAGE_KEY,
+} from "./constants";
+
+import { getItem, setItem } from "../helpers/asyncStore";
+
+interface SampleDecision {
+  sampled: boolean;
+  rate: number;
+  rolledAt: number;
+}
+
+interface LogRocketUser {
+  userId: string;
+  name: string;
+  email: string;
+  subdomain: string;
+}
+
+let initialized = false;
+let initPromise: Promise<void> | null = null;
+let sessionURL: string | null = null;
+// Bumped by shutdownLogRocket so an init still awaiting the sampling roll
+// knows it was cancelled and must not start recording.
+let generation = 0;
+
+// Null until LogRocket's backend accepts the session (1-5s after init), and
+// null on unsampled devices — callers must handle the absence.
+export const getLogRocketSessionURL = () => sessionURL;
+
+// 0 falls back to the default: turning recording off is done by removing or
+// rotating the API key, never through the sample rate.
+const getSampleRate = () =>
+  parseInt(Config.LOG_ROCKET_SAMPLE_RATE ?? "", 10) || DEFAULT_SAMPLE_RATE;
+
+// A device keeps its decision until the TTL passes or the rate changes, so
+// the sampled population rotates instead of locking in the first 10% forever.
+const shouldSample = async () => {
+  const rate = getSampleRate();
+  const stored = await getItem<SampleDecision>(SAMPLE_STORAGE_KEY);
+
+  const isCurrent =
+    stored !== null &&
+    stored.rate === rate &&
+    Date.now() - stored.rolledAt < SAMPLE_DECISION_TTL_MS;
+
+  if (isCurrent) return stored.sampled;
+
+  const sampled = Math.random() * 100 < rate;
+  await setItem(SAMPLE_STORAGE_KEY, { sampled, rate, rolledAt: Date.now() });
+
+  return sampled;
+};
+
+export const initLogRocket = async () => {
+  const apiKey = Config.LOG_ROCKET_API_KEY;
+  if (initialized || __DEV__ || !apiKey) return;
+
+  initPromise ??= (async () => {
+    try {
+      const startedAs = generation;
+      if (!(await shouldSample()) || startedAs !== generation) return;
+
+      LogRocket.init(apiKey);
+      initialized = true;
+      LogRocket.getSessionURL(url => {
+        // The backend accepts the session 1-5s after init; by then a logout
+        // may have ended it, and its URL must not resurface.
+        if (startedAs === generation) {
+          sessionURL = url;
+        }
+      });
+    } catch {
+      // Recording is expendable; a LogRocket failure must never reject the
+      // promise that initLogRocket and identifyLogRocketUser await.
+    }
+  })();
+
+  await initPromise;
+};
+
+export const identifyLogRocketUser = async ({
+  userId,
+  name,
+  email,
+  subdomain,
+}: LogRocketUser) => {
+  // Callers invoke this right after initLogRocket(), often in the same tick;
+  // waiting on the pending init keeps that pattern from dropping the identity.
+  if (initPromise) await initPromise;
+
+  if (!initialized) return;
+
+  try {
+    LogRocket.identify(userId, { name, email, organization: subdomain });
+  } catch {
+    // Fire-and-forget callers must never see a rejection from LogRocket.
   }
 };
+
+export const shutdownLogRocket = () => {
+  generation += 1;
+  initPromise = null;
+  // The replay ends here, so an error after logout must not link to it.
+  sessionURL = null;
+
+  if (!initialized) return;
+
+  LogRocket.shutdown();
+  initialized = false;
+};

package/src/providers/NeetoCommonsRNProvider.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 
 import { type NavigationContainerRef } from "@react-navigation/native";
+import { type QueryClient } from "@tanstack/react-query";
 import { Provider } from "react-redux";
 import { type Reducer } from "redux";
 import { PersistGate } from "redux-persist/integration/react";
@@ -25,6 +26,20 @@ import { updateRootReducer } from "../store/utils";
 
 initializeConfigs();
 
+// Same module-level __DEV__ gate as the store's Rozenite enhancer: metro
+// inlines __DEV__ and strips the require — and the plugin packages behind
+// it — from release bundles before dependency collection. The try/catch
+// keeps hosts working if the plugins are ever absent.
+let DevToolsBridge: React.ComponentType<{ queryClient?: QueryClient }> | null =
+  null;
+if (__DEV__) {
+  try {
+    DevToolsBridge = require("../components/DevToolsBridge").default;
+  } catch {
+    DevToolsBridge = null;
+  }
+}
+
 export interface NeetoCommonsRNProviderProps {
   appName: string;
   hostNavigationRef?: React.RefObject<NavigationContainerRef<
@@ -33,6 +48,12 @@ export interface NeetoCommonsRNProviderProps {
   hostStrings?: HostStrings;
   hostRootReducer: Record<string, Reducer>;
   blacklistedReducers?: string[];
+  /**
+   * The host app's react-query client. Dev-only: when provided, the
+   * Rozenite TanStack Query DevTools panel streams this client's cache.
+   * Network and Storage panels work without it.
+   */
+  queryClient?: QueryClient;
   children?: ReactNode;
 }
 
@@ -42,6 +63,7 @@ export const NeetoCommonsRNProvider = ({
   hostStrings,
   hostRootReducer,
   blacklistedReducers,
+  queryClient,
   children,
 }: NeetoCommonsRNProviderProps) => {
   const prevReducersRef = useRef<Record<string, Reducer> | null>(null);
@@ -69,6 +91,7 @@ export const NeetoCommonsRNProvider = ({
     <Provider store={Store}>
       <PersistGate loading={null} persistor={Persistor}>
         <LocalizationProvider hostStrings={hostStrings}>
+          {DevToolsBridge ? <DevToolsBridge queryClient={queryClient} /> : null}
           {children}
         </LocalizationProvider>
       </PersistGate>

package/src/screens/authentication/IncompleteOnboardingInfo.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import { Linking, StyleSheet } from "react-native";
 
+import Left from "@bigbinary/neeto-icons-rn/icons/Left";
 import {
   Container,
   ParentView,
@@ -9,7 +10,6 @@ import {
   lightTheme,
 } from "@bigbinary/neetoui-rn";
 import Config from "react-native-config";
-import Icon from "react-native-remix-icon";
 
 import { HyperlinkText } from "../../components/HyperlinkText";
 import { useLocalization } from "../../contexts/localization";
@@ -64,7 +64,7 @@ export const IncompleteOnboardingInfo = ({
           style={styles.backButton}
           onPress={onBackPress}
         >
-          <Icon name="arrow-left-s-line" size={moderateScale(24)} />
+          <Left size={moderateScale(24)} />
         </Touchable>
       </Container>
       <Container style={styles.body}>

package/src/screens/authentication/LoginScreen.tsx

@@ -5,6 +5,7 @@ import {
   Container,
   Input,
   ParentView,
+  ScrollView,
   Toast,
   Typography,
   lightTheme,
@@ -37,7 +38,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   body: {
-    flex: 1,
     marginHorizontal: 16,
   },
   inputWrapper: {
@@ -45,11 +45,15 @@ const styles = StyleSheet.create({
     marginBottom: 32,
     marginTop: 18,
   },
+  // `marginTop: auto` inside the grow-to-fill scroll content parks this at
+  // the bottom whenever the screen has slack, and lets it flow below the
+  // auth buttons when it does not. Absolute positioning used to pin it 50dp
+  // from the bottom, which landscape turned into an overlay across the
+  // middle of the form.
   versionText: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: moderateScale(50),
+    marginBottom: moderateScale(24),
+    marginTop: "auto",
+    paddingTop: moderateScale(24),
     textAlign: "center",
   },
   androidVersionText: {
@@ -129,42 +133,49 @@ export const LoginScreen = () => {
       barStyle="dark-content"
       style={styles.screen}
     >
-      <Container style={styles.body}>
-        {/*
-          The v2 `lineHeight` override has no v3 counterpart: ScreenHeader
-          takes only `title` and a container `style`, and sets the title's
-          line height itself on Android.
-        */}
-        <ScreenHeader title={strings.commons.headers.login} />
-        <Container style={styles.inputWrapper}>
-          <Input
-            autoCapitalize="none"
-            error={touched?.email ? errors?.email : ""}
-            keyboardType="email-address"
-            label={strings.commons.labels.Email}
-            value={email}
-            onBlur={() => setFieldValue("email", email.toLowerCase())}
-            onChangeText={handleChange("email")}
+      {/*
+        Landscape (and any small viewport with the keyboard up) leaves the
+        auth buttons taller than the screen, so the content scrolls instead
+        of being clipped.
+      */}
+      <ScrollView>
+        <Container style={styles.body}>
+          {/*
+            The v2 `lineHeight` override has no v3 counterpart: ScreenHeader
+            takes only `title` and a container `style`, and sets the title's
+            line height itself on Android.
+          */}
+          <ScreenHeader title={strings.commons.headers.login} />
+          <Container style={styles.inputWrapper}>
+            <Input
+              autoCapitalize="none"
+              error={touched?.email ? errors?.email : ""}
+              keyboardType="email-address"
+              label={strings.commons.labels.Email}
+              value={email}
+              onBlur={() => setFieldValue("email", email.toLowerCase())}
+              onChangeText={handleChange("email")}
+            />
+          </Container>
+          <AuthOptions
+            buttonLoading={isGeneratingOTP}
+            handleSubmit={handleSubmit}
           />
         </Container>
-        <AuthOptions
-          buttonLoading={isGeneratingOTP}
-          handleSubmit={handleSubmit}
-        />
-      </Container>
-      <Typography
-        color={lightTheme.colors.palette.grey600}
-        size="xs"
-        weight="regular"
-        style={StyleSheet.flatten([
-          styles.versionText,
-          Platform.OS === "android" && styles.androidVersionText,
-        ])}
-      >
-        {Config.APP_DISPLAY_NAME}
-        {strings.commons.common.version}
-        {DeviceInfo.getVersion()}
-      </Typography>
+        <Typography
+          color={lightTheme.colors.palette.grey600}
+          size="xs"
+          weight="regular"
+          style={StyleSheet.flatten([
+            styles.versionText,
+            Platform.OS === "android" && styles.androidVersionText,
+          ])}
+        >
+          {Config.APP_DISPLAY_NAME}
+          {strings.commons.common.version}
+          {DeviceInfo.getVersion()}
+        </Typography>
+      </ScrollView>
     </ParentView>
   );
 };

package/src/screens/authentication/OTPVerificationScreen.tsx

@@ -4,15 +4,14 @@ import { StyleSheet } from "react-native";
 import {
   Button,
   Container,
+  Header,
   Input,
   ParentView,
   Toast,
-  Touchable,
   Typography,
   lightTheme,
 } from "@bigbinary/neetoui-rn";
 import { useFocusEffect } from "@react-navigation/native";
-import Icon from "react-native-remix-icon";
 
 import { useLocalization } from "../../contexts/localization";
 import { useAuth } from "../../hooks/query/useAuth";
@@ -20,7 +19,6 @@ import { type CommonsScreenProps } from "../../navigation/types";
 
 // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 const RESEND_TIMER = 30;
-let interval: ReturnType<typeof setInterval> | null = null;
 
 export const OTPVerificationScreen = ({
   navigation,
@@ -31,6 +29,7 @@ export const OTPVerificationScreen = ({
   const [startTimer, setStartTimer] = useState(false);
 
   const isSubmittingRef = useRef(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const { email, userId } = params;
   const { strings } = useLocalization();
@@ -80,10 +79,12 @@ export const OTPVerificationScreen = ({
 
   useEffect(() => {
     if (startTimer) {
-      interval = setInterval(() => {
+      intervalRef.current = setInterval(() => {
         setResendTimer(prev => {
           if (prev === 1) {
-            clearInterval(interval as ReturnType<typeof setInterval>);
+            clearInterval(
+              intervalRef.current as ReturnType<typeof setInterval>
+            );
           }
 
           return prev - 1;
@@ -91,9 +92,10 @@ export const OTPVerificationScreen = ({
       }, 1000);
     }
 
-    // `interval` is null until the first tick is scheduled; clearing a null
-    // handle has always been the no-op it is today.
-    return () => clearInterval(interval as ReturnType<typeof setInterval>);
+    // The ref is null until the first tick is scheduled; clearing a null
+    // handle is a no-op.
+    return () =>
+      clearInterval(intervalRef.current as ReturnType<typeof setInterval>);
   }, [startTimer]);
 
   useEffect(() => {
@@ -118,27 +120,11 @@ export const OTPVerificationScreen = ({
       barStyle="dark-content"
       style={styles.screen}
     >
+      <Header
+        title={strings.commons.headers.otpVerification}
+        onBack={() => navigation?.goBack()}
+      />
       <Container style={styles.body}>
-        <Container style={styles.backRow}>
-          <Touchable
-            style={styles.backButton}
-            onPress={() => navigation?.goBack()}
-          >
-            <Icon
-              color={lightTheme.colors.palette.grey600}
-              name="arrow-left-s-line"
-              size={25}
-            />
-          </Touchable>
-        </Container>
-        <Typography
-          color={lightTheme.colors.palette.grey800}
-          style={styles.heading}
-          variant="header"
-          weight="semibold"
-        >
-          {strings.commons.headers.otpVerification}
-        </Typography>
         <Typography
           color={lightTheme.colors.palette.grey700}
           size="s"
@@ -201,19 +187,9 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     marginHorizontal: 16,
-  },
-  backRow: {
-    justifyContent: "center",
-    height: 42,
-    marginBottom: 18,
-  },
-  backButton: {
-    marginLeft: -14,
-    padding: 2,
-    width: 42,
-  },
-  heading: {
-    marginBottom: 2,
+    // The title moved into the Header, which carries its own bottom spacing;
+    // the description now opens the body.
+    marginTop: 16,
   },
   description: {
     marginBottom: 24,

package/src/screens/authentication/Organization.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleSheet } from "react-native";
 
+import Right from "@bigbinary/neeto-icons-rn/icons/Right";
 import {
   Avatar,
   Container,
@@ -8,7 +9,6 @@ import {
   Typography,
   lightTheme,
 } from "@bigbinary/neetoui-rn";
-import Icon from "react-native-remix-icon";
 
 import { moderateScale } from "../../helpers/scale";
 import { type Organization as OrganizationEntity } from "../../slices/auth";
@@ -64,11 +64,7 @@ export const Organization = ({
       ) : (
         showOrganizationDetails()
       )}
-      <Icon
-        color={lightTheme.colors.primary}
-        name="arrow-right-s-line"
-        size={25}
-      />
+      <Right color={lightTheme.colors.primary} size={25} />
     </Touchable>
   );
 };

package/src/screens/authentication/SubDomainScreen.tsx

@@ -4,17 +4,15 @@ import { StyleSheet } from "react-native";
 import {
   Container,
   FlashList,
+  Header,
   ParentView,
   SearchBar,
-  Touchable,
   Typography,
   lightTheme,
 } from "@bigbinary/neetoui-rn";
-import Icon from "react-native-remix-icon";
 
 import { Organization } from "./Organization";
 
-import { LineLoader } from "../../components";
 import { useLocalization } from "../../contexts/localization";
 import { moderateScale } from "../../helpers/scale";
 import { useAuth } from "../../hooks/query/useAuth";
@@ -57,45 +55,35 @@ export const SubDomainScreen = ({
           org.subdomain.toLowerCase().includes(searchTermLowerCase)
       );
 
-  const renderHeader = () => (
-    <Container style={styles.header}>
+  const renderIntro = () => (
+    <Container style={styles.intro}>
       <Typography
-        color={lightTheme.colors.palette.grey800}
-        style={styles.headerTitle}
-        variant="header"
-        weight="semibold"
+        color={lightTheme.colors.palette.grey600}
+        size="s"
+        style={styles.introDescription}
+        weight="regular"
       >
-        {strings.commons.headers.subDomain}
-      </Typography>
-      <Container>
-        <Typography
-          color={lightTheme.colors.palette.grey600}
-          size="s"
-          style={styles.headerDescription}
-          weight="regular"
-        >
-          {strings.commons.subdomain.description1}
-          <Typography color={lightTheme.colors.text.primary} weight="bold">
-            {organizations[0].email}
-          </Typography>
-          {strings.commons.subdomain.description2}
+        {strings.commons.subdomain.description1}
+        <Typography color={lightTheme.colors.text.primary} weight="bold">
+          {organizations[0].email}
         </Typography>
-        {/*
-          v3's SearchBar owns its text; it has no `value` prop, so the screen
-          only mirrors it through onChangeText.
-        */}
-        <SearchBar
-          // `formatString` returns a plain string whenever every argument is
-          // one, which is the case here.
-          placeholder={
-            strings.formatString(
-              strings.commons.placeholders.search,
-              strings.commons.labels.Workspaces.toLowerCase()
-            ) as string
-          }
-          onChangeText={setSearchTerm}
-        />
-      </Container>
+        {strings.commons.subdomain.description2}
+      </Typography>
+      {/*
+        v3's SearchBar owns its text; it has no `value` prop, so the screen
+        only mirrors it through onChangeText.
+      */}
+      <SearchBar
+        // `formatString` returns a plain string whenever every argument is
+        // one, which is the case here.
+        placeholder={
+          strings.formatString(
+            strings.commons.placeholders.search,
+            strings.commons.labels.Workspaces.toLowerCase()
+          ) as string
+        }
+        onChangeText={setSearchTerm}
+      />
     </Container>
   );
 
@@ -105,22 +93,15 @@ export const SubDomainScreen = ({
       barStyle="dark-content"
       style={styles.screen}
     >
-      <Container>
-        <Container style={styles.navBar}>
-          {/* v3's ripple config dropped `isCentered`; nothing replaces it. */}
-          <Touchable
-            hitSlop={10}
-            rippleConfig={{ shouldOverflowContainer: true }}
-            style={styles.backButton}
-            onPress={onBackPress}
-          >
-            <Icon name="arrow-left-s-line" size={moderateScale(24)} />
-          </Touchable>
-        </Container>
-        <LineLoader isLoading={isSelectingOrganization} />
-      </Container>
+      {/* Header carries the progress line the screen used to draw with its
+          own LineLoader. */}
+      <Header
+        isLoading={isSelectingOrganization}
+        title={strings.commons.headers.subDomain}
+        onBack={onBackPress}
+      />
       <Container style={styles.body}>
-        {renderHeader()}
+        {renderIntro()}
         <FlashList
           contentContainerStyle={styles.contentContainerStyle}
           data={filteredOrganizations}
@@ -142,29 +123,16 @@ const styles = StyleSheet.create({
   screen: {
     flex: 1,
   },
-  navBar: {
-    alignItems: "center",
-    flexDirection: "row",
-    height: moderateScale(44),
-    paddingHorizontal: moderateScale(16),
-  },
-  backButton: {
-    marginLeft: moderateScale(-8),
-  },
   body: {
     flex: 1,
     marginHorizontal: moderateScale(16),
-    marginTop: moderateScale(16),
+    marginTop: moderateScale(4),
   },
-  header: {
+  intro: {
     justifyContent: "center",
     marginBottom: 18,
   },
-  headerTitle: {
-    lineHeight: moderateScale(28),
-    marginBottom: moderateScale(8),
-  },
-  headerDescription: {
+  introDescription: {
     marginBottom: moderateScale(8),
   },
   flatListStyle: {

package/src/screens/profile/ProfileScreen.tsx

@@ -1,7 +1,8 @@
 import React, { type ReactNode } from "react";
 import { Linking, ScrollView, StyleSheet } from "react-native";
 
-import { LeftArrow, Help } from "@bigbinary/neeto-icons-rn";
+import Help from "@bigbinary/neeto-icons-rn/icons/Help";
+import LeftArrow from "@bigbinary/neeto-icons-rn/icons/LeftArrow";
 import {
   Typography,
   Container,

package/src/screens/team_members/Card.tsx

@@ -1,7 +1,7 @@
 import React, { type ComponentType } from "react";
 import { StyleSheet, View } from "react-native";
 
-import { MenuVertical } from "@bigbinary/neeto-icons-rn";
+import MenuVertical from "@bigbinary/neeto-icons-rn/icons/MenuVertical";
 import {
   Avatar as UIAvatar,
   Container,