@bigbinary/neeto-commons-rn 2.0.2 → 2.1.0

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,

package/src/screens/team_members/ProductSelect.tsx

@@ -2,7 +2,7 @@ import React, { useState, type ComponentType } from "react";
 import { Pressable, StyleSheet } from "react-native";
 
 import { findIndexBy } from "@bigbinary/neeto-cist";
-import { Down } from "@bigbinary/neeto-icons-rn";
+import Down from "@bigbinary/neeto-icons-rn/icons/Down";
 import {
   BottomSheet as UIBottomSheet,
   Container,
@@ -13,7 +13,7 @@ import {
   type BottomSheetProps,
 } from "@bigbinary/neetoui-rn";
 import { type FormikProps } from "formik";
-import { mergeRight } from "ramda";
+import mergeRight from "ramda/src/mergeRight";
 
 import Checkbox from "./Checkbox";
 import { APP_NAME } from "./constants";
@@ -32,11 +32,10 @@ interface RoleSheetItem {
   value: string;
 }
 
-// `isVisible` starts out null here, which v3 narrowed to `boolean`.
+// Pins the sheet's row type — `data` can be undefined mid-close, which
+// blocks inference at the call site.
 const BottomSheet = UIBottomSheet as ComponentType<
-  Omit<BottomSheetProps<RoleSheetItem>, "isVisible"> & {
-    isVisible: boolean | null;
-  }
+  BottomSheetProps<RoleSheetItem>
 >;
 
 interface ProductSelectProps {
@@ -52,7 +51,7 @@ const ProductSelect = ({
   setFieldValue,
 }: ProductSelectProps) => {
   const otherProducts = values?.otherProducts ?? true;
-  const [openDropdown, setOpenDropdown] = useState<boolean | null>(null);
+  const [openDropdown, setOpenDropdown] = useState(false);
   const [selectedAppName, setSelectedAppName] = useState<string | null>(null);
 
   const updateProduct = (appName: string, object: Partial<ProductRole>) => {

package/src/screens/team_members/index.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from "react";
 import { StyleSheet } from "react-native";
 
-import { Edit, Delete } from "@bigbinary/neeto-icons-rn";
+import Delete from "@bigbinary/neeto-icons-rn/icons/Delete";
+import Edit from "@bigbinary/neeto-icons-rn/icons/Edit";
 import {
   Container,
   Divider,

package/src/screens/team_members/utils.ts

@@ -1,5 +1,7 @@
 import { _findBy, notEquals } from "@bigbinary/neeto-cist";
-import { equals, includes, move } from "ramda";
+import equals from "ramda/src/equals";
+import includes from "ramda/src/includes";
+import move from "ramda/src/move";
 
 import { ADMIN_ROLE_NAME, ADMIN_ROLES, APP_NAME } from "./constants";
 

package/src/store/index.ts

@@ -1,5 +1,9 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { configureStore } from "@reduxjs/toolkit";
+import {
+  configureStore,
+  type StoreEnhancer,
+  type UnknownAction,
+} from "@reduxjs/toolkit";
 import {
   persistStore,
   persistReducer,
@@ -27,6 +31,67 @@ const persistConfig: PersistConfig<CommonsState> = {
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
 
+// The enhancer must exist when configureStore runs — at module-import time —
+// so the store wires it itself; host apps could never inject it early enough.
+// The guarded require keeps hosts without the plugin working (it is a dev
+// tool the host may not install), and metro strips the whole branch from
+// release bundles because __DEV__ is inlined before dependency collection.
+const devToolsEnhancers = () => {
+  if (__DEV__) {
+    try {
+      // The require is untyped on purpose (consistent-type-imports forbids
+      // import() annotations); cast just the surface used here.
+      const { rozeniteDevToolsEnhancer } =
+        require("@rozenite/redux-devtools-plugin") as {
+          rozeniteDevToolsEnhancer: (options: {
+            name?: string;
+            maxAge?: number;
+            actionSanitizer?: (action: UnknownAction, id: number) => unknown;
+            stateSanitizer?: (state: unknown, index: number) => unknown;
+          }) => StoreEnhancer;
+        };
+
+      // The workspace switcher keeps a per-organization auth token in the
+      // store (every other credential lives in the keychain). The DevTools
+      // bridge rides metro's websocket, so those tokens must not cross it.
+      const redactOrganizationTokens = (state: unknown) => {
+        const snapshot = state as CommonsState | undefined;
+        if (!snapshot?.auth?.organizations?.length) return state;
+
+        return {
+          ...snapshot,
+          auth: {
+            ...snapshot.auth,
+            organizations: snapshot.auth.organizations.map(organization => ({
+              ...organization,
+              auth_token: "<<redacted>>",
+            })),
+          },
+        };
+      };
+
+      return [
+        rozeniteDevToolsEnhancer({
+          name: "neeto-commons-rn store",
+          // The whole persisted tree rides through REHYDRATE; big snapshots
+          // can OOM the Android DevTools panel, so cap history and elide the
+          // payload.
+          maxAge: 25,
+          actionSanitizer: action =>
+            action.type === REHYDRATE
+              ? { ...action, payload: "<<elided: persisted state>>" }
+              : action,
+          stateSanitizer: redactOrganizationTokens,
+        }),
+      ];
+    } catch {
+      return [];
+    }
+  }
+
+  return [];
+};
+
 const baseStore = configureStore({
   reducer: persistedReducer,
   middleware: getDefaultMiddleware =>
@@ -35,6 +100,8 @@ const baseStore = configureStore({
         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
       },
     }),
+  enhancers: getDefaultEnhancers =>
+    getDefaultEnhancers().concat(devToolsEnhancers()),
 });
 const Persistor = persistStore(baseStore);
 

package/src/utils/apiHelpers.ts

@@ -1,7 +1,10 @@
+// `appName` doubles as user-facing copy ("Update neetoDesk"), so it keeps its
+// camel case. Hosts are case-insensitive, but the mixed-case spelling shows up
+// verbatim in request logs and Bugsnag error groups, so lowercase it here.
 export const appVersionsUrl = ({
   appName,
   environment,
 }: {
   appName: string;
   environment: string;
-}) => `https://api.${appName}.${environment}/app_versions`;
+}) => `https://api.${appName.toLowerCase()}.${environment}/app_versions`;