@bigbinary/neeto-commons-rn 1.8.5 → 2.0.2

package/src/components/OfflineScreen.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect } from "react";
+import { Image, StyleSheet } from "react-native";
+
+import {
+  Button,
+  Container,
+  Toast,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import NetInfo from "@react-native-community/netinfo";
+
+import Wifi from "../assets/images/wifi.png";
+import { useLocalization } from "../contexts/localization";
+import { moderateScale } from "../helpers/scale";
+
+export interface OfflineScreenProps {
+  /** NetInfo reports an unknown connection state as `null`. */
+  setIsConnected: (isConnected: boolean | null) => void;
+}
+
+export const OfflineScreen = ({ setIsConnected }: OfflineScreenProps) => {
+  const { strings } = useLocalization();
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener(state => {
+      setIsConnected(state.isConnected);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [setIsConnected]);
+
+  const handleRetry = async () => {
+    const netInfo = await NetInfo.fetch();
+    setIsConnected(netInfo.isConnected);
+
+    if (!netInfo.isConnected) {
+      Toast.show({
+        type: "error",
+        text1: strings.commons.alertMessage.noInternetConnection,
+      });
+    }
+  };
+
+  return (
+    <Container style={styles.screen}>
+      <Container style={styles.content}>
+        <Image source={Wifi} style={styles.illustration} />
+        <Typography
+          color={lightTheme.colors.palette.grey600}
+          style={styles.message}
+          weight="bold"
+        >
+          {strings.commons.alertMessage.noInternetConnection}
+        </Typography>
+      </Container>
+      <Button
+        label={strings.commons.buttons.tryAgain}
+        style={styles.retryButton}
+        onPress={handleRetry}
+      />
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: lightTheme.colors.white,
+    flex: 1,
+  },
+  content: {
+    alignItems: "center",
+  },
+  illustration: {
+    height: moderateScale(100),
+    width: moderateScale(100),
+  },
+  message: {
+    marginTop: moderateScale(10),
+  },
+  retryButton: {
+    marginTop: moderateScale(20),
+    width: moderateScale(140),
+  },
+});

package/src/components/OrganizationItem.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Linking, StyleSheet } from "react-native";
+
+import { Container, Typography, lightTheme } from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+
+// 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 OrganizationItemProps {
+  name: string;
+  subdomain: string;
+  label?: string;
+}
+
+export const OrganizationItem = ({
+  name,
+  subdomain,
+  label = "Organization",
+}: OrganizationItemProps) => (
+  <Container style={styles.container}>
+    <Container style={styles.labelRow}>
+      <Typography
+        color={lightTheme.colors.palette.grey800}
+        size="s"
+        weight="medium"
+      >
+        {label}
+      </Typography>
+    </Container>
+    <Typography
+      color={lightTheme.colors.palette.grey700}
+      size="m"
+      style={styles.name}
+      weight="medium"
+    >
+      {name}
+    </Typography>
+    <Typography
+      color={lightTheme.colors.palette.grey700}
+      size="m"
+      weight="medium"
+      onPress={() => Linking.openURL(`https://${subdomain}`)}
+    >
+      {subdomain}
+    </Typography>
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "space-between",
+    backgroundColor: lightTheme.colors.background.secondary,
+    borderRadius: moderateScale(6),
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: moderateScale(12),
+    width: "100%",
+  },
+  labelRow: {
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  name: {
+    marginTop: moderateScale(8),
+  },
+});

package/src/components/SocialButton.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+
+import {
+  Container,
+  Loader,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import AppleLogo from "../assets/images/apple-logo.svg";
+import GoogleLogo from "../assets/images/google-logo.svg";
+import { moderateScale } from "../helpers/scale";
+
+// 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 SocialButtonProps {
+  variant: "apple" | "google";
+  disabled?: boolean;
+  isLoading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  onPress: () => void;
+}
+
+const capitalize = (value: string) =>
+  `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+
+export const SocialButton = ({
+  variant,
+  disabled,
+  isLoading,
+  style,
+  onPress,
+}: SocialButtonProps) => (
+  <Touchable
+    disabled={disabled}
+    rippleConfig={{ color: lightTheme.colors.palette.grey800 }}
+    style={[styles.button, style]}
+    onPress={onPress}
+  >
+    {isLoading ? (
+      <Loader color={lightTheme.colors.palette.grey800} />
+    ) : (
+      <>
+        <Container style={styles.logo}>
+          {variant === "apple" && <AppleLogo />}
+          {variant === "google" && <GoogleLogo />}
+        </Container>
+        <Typography
+          color={lightTheme.colors.text.primary}
+          size="m"
+          weight="medium"
+        >
+          Continue with {capitalize(variant)}
+        </Typography>
+      </>
+    )}
+  </Touchable>
+);
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    borderColor: lightTheme.colors.palette.grey800,
+    borderRadius: moderateScale(8),
+    borderWidth: moderateScale(1),
+    height: moderateScale(48),
+    width: "100%",
+  },
+  logo: {
+    position: "absolute",
+    left: moderateScale(17),
+  },
+});

package/src/components/TextWithUrl.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 TextWithUrl from the UI library instead.
+ */
+export { TextWithUrl } from "@bigbinary/neetoui-rn";

package/src/components/ToggleSwitch.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { Check, Close } from "@bigbinary/neeto-icons-rn";
+import { Container, Touchable, lightTheme } from "@bigbinary/neetoui-rn";
+
+import { TOGGLE_ANIMATION_DURATION, TOGGLE_KNOB_TRAVEL } from "./constants";
+
+import { moderateScale } from "../helpers/scale";
+
+// 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 ToggleSwitchProps {
+  value: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: boolean) => void;
+}
+
+export const ToggleSwitch = ({
+  value,
+  disabled,
+  onValueChange,
+}: ToggleSwitchProps) => {
+  const knobPosition = useRef(
+    new Animated.Value(value ? TOGGLE_KNOB_TRAVEL : 0)
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(knobPosition, {
+      toValue: value ? TOGGLE_KNOB_TRAVEL : 0,
+      duration: TOGGLE_ANIMATION_DURATION,
+      useNativeDriver: false,
+    }).start();
+  }, [value, knobPosition]);
+
+  const iconColor = value
+    ? lightTheme.colors.success
+    : lightTheme.colors.palette.grey500;
+  const Icon = value ? Check : Close;
+
+  return (
+    <Touchable
+      disabled={disabled}
+      hitSlop={10}
+      style={[
+        styles.track,
+        {
+          backgroundColor: value
+            ? lightTheme.colors.success
+            : lightTheme.colors.palette.grey300,
+        },
+        disabled && styles.trackDisabled,
+      ]}
+      onPress={() => onValueChange?.(!value)}
+    >
+      <Animated.View style={{ transform: [{ translateX: knobPosition }] }}>
+        <Container style={styles.knob}>
+          <Icon
+            color={iconColor}
+            size={moderateScale(16)}
+            viewBox={value ? "0 0 25 27" : "0 0 25 25"}
+          />
+        </Container>
+      </Animated.View>
+    </Touchable>
+  );
+};
+
+const styles = StyleSheet.create({
+  track: {
+    justifyContent: "center",
+    borderRadius: moderateScale(75),
+    height: moderateScale(28),
+    paddingHorizontal: moderateScale(5),
+    width: moderateScale(50),
+  },
+  trackDisabled: {
+    opacity: 0.5,
+  },
+  knob: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: lightTheme.colors.white,
+    borderRadius: moderateScale(10),
+    height: moderateScale(16),
+    width: moderateScale(16),
+  },
+});

package/src/components/WorkspaceSwitcherPane.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { SafeAreaView, StyleSheet } from "react-native";
+
+import { Close } from "@bigbinary/neeto-icons-rn";
+import {
+  Container,
+  FlashList,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+import { useAuth } from "../hooks/query/useAuth";
+import { Organization } from "../screens/authentication/Organization";
+import { type Organization as OrganizationRecord } from "../slices/auth";
+import { useAppSelector } from "../store/hooks";
+
+export interface WorkspaceSwitcherPaneProps {
+  /** The drawer navigator's navigation object, injected by `drawerContent`. */
+  navigation: { closeDrawer: () => void };
+}
+
+export const WorkspaceSwitcherPane = ({
+  navigation,
+}: WorkspaceSwitcherPaneProps) => {
+  const organizations = useAppSelector(state => state.auth.organizations);
+
+  const { useSelectOrganizationMutation } = useAuth();
+  const { mutate: selectOrganization } = useSelectOrganizationMutation();
+
+  const onOrganizationSelect = ({
+    organization,
+  }: {
+    organization: OrganizationRecord;
+  }) => {
+    selectOrganization({ organization });
+    navigation.closeDrawer();
+  };
+
+  return (
+    <Container style={styles.pane}>
+      {/*
+        The `edges={["top"]}` this used to pass belongs to
+        react-native-safe-area-context; react-native's own SafeAreaView never
+        read it, so dropping it changes nothing at runtime.
+      */}
+      <SafeAreaView style={styles.headerSafeArea}>
+        <Container style={styles.headerRow}>
+          <Typography size="xl" weight="semibold">
+            Switch Workspaces
+          </Typography>
+          {/*
+            Was a text-variant Button carrying the icon through `LeftIcon`.
+            v3's Button has no icon slot and requires a label, so the icon is
+            hosted by the Touchable the text variant already reduced to.
+          */}
+          <Touchable
+            hitSlop={moderateScale(8)}
+            onPress={() => navigation.closeDrawer()}
+          >
+            <Close size={moderateScale(20)} />
+          </Touchable>
+        </Container>
+      </SafeAreaView>
+      <Container style={styles.listWrapper}>
+        <FlashList
+          contentContainerStyle={styles.contentContainerStyle}
+          data={organizations.filter(org => org.is_onboard !== false)}
+          keyExtractor={item => item.id.toString()}
+          style={styles.flatListStyle}
+          renderItem={({ item }) => (
+            <Organization
+              isSidePane
+              organization={item}
+              onOrganizationSelect={onOrganizationSelect}
+            />
+          )}
+        />
+      </Container>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  pane: {
+    backgroundColor: lightTheme.colors.white,
+    flex: 1,
+    padding: moderateScale(8),
+  },
+  headerSafeArea: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: moderateScale(16),
+    paddingHorizontal: moderateScale(16),
+  },
+  headerRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    marginVertical: moderateScale(10),
+  },
+  listWrapper: {
+    backgroundColor: lightTheme.colors.white,
+    flex: 1,
+    paddingVertical: moderateScale(8),
+  },
+  flatListStyle: {
+    flex: 1,
+  },
+  contentContainerStyle: {
+    paddingBottom: moderateScale(20),
+  },
+});

package/src/components/constants.ts

@@ -0,0 +1,16 @@
+import Config from "react-native-config";
+
+import { moderateScale } from "../helpers/scale";
+
+export const ANDROID_APP_LINK = `http://play.google.com/store/apps/details?id=${Config.BUNDLE_IDENTIFIER}`;
+
+export const IOS_PROD_APP_LINK = `https://apps.apple.com/us/app/${Config.IOS_APP_ID}`;
+
+export const IOS_STAGING_APP_LINK = `https://testflight.apple.com/v1/app/${Config.IOS_APP_ID}`;
+
+// ToggleSwitch knob travel and animation.
+export const TOGGLE_KNOB_TRAVEL = moderateScale(24);
+export const TOGGLE_ANIMATION_DURATION = 300;
+
+// NotificationPreferenceList title row.
+export const PREFERENCE_TITLE_LINE_HEIGHT = moderateScale(24);

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export { BaseHeader } from "./Header/BaseHeader";
+export { ScreenHeader } from "./Header/ScreenHeader";
+export { AppVersion } from "./AppVersion";
+export { LineLoader } from "./LineLoader";
+export { Header } from "./Header";
+export { NotificationIcon } from "./NotificationIcon";
+export { default as BottomSheet } from "./BottomSheet";
+export { BottomSheetMenu } from "./BottomSheetMenu";
+export { default as ConfirmSheet } from "./ConfirmSheet";
+export { EmptyView } from "./EmptyView";
+export { TextWithUrl } from "./TextWithUrl";
+export { OfflineScreen } from "./OfflineScreen";
+export { WorkspaceSwitcherPane } from "./WorkspaceSwitcherPane";

package/src/config/axios/caseConversion.ts

@@ -0,0 +1,60 @@
+import {
+  serializeKeysToSnakeCase,
+  keysToCamelCase,
+} from "@bigbinary/neeto-cist";
+import Bugsnag, { type NotifiableError } from "@bugsnag/react-native";
+
+import { shouldEnableCaseConversion } from "./constants";
+import { type CaseConversionOptions } from "./types";
+
+const logCaseConversionError = (
+  error: unknown,
+  context: Record<string, unknown>
+) => {
+  if (!__DEV__) {
+    Bugsnag.notify(error as NotifiableError, event => {
+      event.severity = "warning";
+      event.context = "case_conversion";
+      event.addMetadata("caseConversion", {
+        ...context,
+        feature: "case_conversion",
+      });
+    });
+  }
+};
+
+export const convertRequestKeys = (
+  data: unknown,
+  options: CaseConversionOptions = {}
+) => {
+  if (!data || !shouldEnableCaseConversion(options)) return data;
+
+  try {
+    return serializeKeysToSnakeCase(data);
+  } catch (error) {
+    logCaseConversionError(error, {
+      type: "request",
+      data,
+    });
+
+    return data;
+  }
+};
+
+export const convertResponseKeys = (
+  data: unknown,
+  options: CaseConversionOptions = {}
+) => {
+  if (!data || !shouldEnableCaseConversion(options)) return data;
+
+  try {
+    return keysToCamelCase(data);
+  } catch (error) {
+    logCaseConversionError(error, {
+      type: "response",
+      data,
+    });
+
+    return data;
+  }
+};

package/src/config/axios/constants.ts

@@ -0,0 +1,17 @@
+import Config from "react-native-config";
+
+import { type CaseConversionOptions } from "./types";
+
+export const DEFAULT_CASE_CONVERSION = Config.ENABLE_CASE_CONVERSION === "true";
+
+export const shouldEnableCaseConversion = (
+  options: CaseConversionOptions = {}
+) => {
+  if (!DEFAULT_CASE_CONVERSION) return false;
+
+  if (options.enableCaseConversion !== undefined) {
+    return options.enableCaseConversion;
+  }
+
+  return DEFAULT_CASE_CONVERSION;
+};