ferns-ui 1.7.0 → 1.8.0

package/dist/useStoredState.test.js

@@ -0,0 +1,93 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Unifier } from "./Unifier";
+import { useStoredState } from "./useStoredState";
+jest.mock("./Unifier", () => ({
+    Unifier: {
+        storage: {
+            getItem: jest.fn(),
+            setItem: jest.fn(),
+        },
+    },
+}));
+describe("useStoredState", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it("should return initialValue and isLoading=true on initial render", async () => {
+        Unifier.storage.getItem.mockImplementation(() => new Promise((resolve) => setTimeout(() => resolve("stored value"), 100)));
+        const { result } = renderHook(() => useStoredState("testKey", "initial value"));
+        expect(result.current[0]).toBe("initial value");
+        expect(result.current[2]).toBe(true);
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+        });
+        expect(result.current[0]).toBe("stored value");
+        expect(result.current[2]).toBe(false);
+    });
+    it("should update state and storage when setter is called", async () => {
+        Unifier.storage.getItem.mockResolvedValue("stored value");
+        Unifier.storage.setItem.mockResolvedValue(undefined);
+        const { result } = renderHook(() => useStoredState("testKey", "initial value"));
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
+        await act(async () => {
+            await result.current[1]("new value");
+        });
+        expect(result.current[0]).toBe("new value");
+        expect(Unifier.storage.setItem).toHaveBeenCalledWith("testKey", "new value");
+    });
+    it("should handle errors when reading from storage", async () => {
+        const originalConsoleError = console.error;
+        console.error = jest.fn();
+        Unifier.storage.getItem.mockRejectedValue(new Error("Storage error"));
+        const { result } = renderHook(() => useStoredState("testKey", "initial value"));
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
+        expect(result.current[0]).toBe("initial value");
+        expect(result.current[2]).toBe(false);
+        expect(console.error).toHaveBeenCalled();
+        console.error = originalConsoleError;
+    });
+    it("should handle errors when writing to storage", async () => {
+        const originalConsoleError = console.error;
+        console.error = jest.fn();
+        Unifier.storage.getItem.mockResolvedValue("stored value");
+        Unifier.storage.setItem.mockRejectedValue(new Error("Storage error"));
+        const { result } = renderHook(() => useStoredState("testKey", "initial value"));
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
+        await act(async () => {
+            await result.current[1]("new value");
+        });
+        expect(result.current[0]).toBe("stored value");
+        expect(console.error).toHaveBeenCalled();
+        console.error = originalConsoleError;
+    });
+    it("should handle undefined initialValue", async () => {
+        Unifier.storage.getItem.mockResolvedValue(null);
+        const { result } = renderHook(() => useStoredState("testKey"));
+        expect(result.current[0]).toBeUndefined();
+        expect(result.current[2]).toBe(true);
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        });
+        expect(result.current[0]).toBeNull();
+        expect(result.current[2]).toBe(false);
+    });
+    it("should not update state if component unmounts before storage resolves", async () => {
+        Unifier.storage.getItem.mockImplementation(() => new Promise((resolve) => setTimeout(() => resolve("stored value"), 100)));
+        const { result, unmount } = renderHook(() => useStoredState("testKey", "initial value"));
+        expect(result.current[0]).toBe("initial value");
+        expect(result.current[2]).toBe(true);
+        unmount();
+        await act(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+        });
+        expect(result.current[0]).toBe("initial value");
+        expect(result.current[2]).toBe(true);
+    });
+});
+//# sourceMappingURL=useStoredState.test.js.map

package/dist/useStoredState.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoredState.test.js","sourceRoot":"","sources":["../src/useStoredState.test.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Common.ts

@@ -1361,6 +1361,49 @@ export interface BadgeProps {
   variant?: "iconOnly" | "numberOnly";
 }
 
+export interface SelectBadgeProps {
+  /**
+   * When status is "custom", determines the badge's background color.
+   */
+  customBackgroundColor?: string;
+  /**
+   * When status is "custom", determines the badge's border color.
+   */
+  customBorderColor?: string;
+  /**
+   * When status is "custom", determines the badge's text color.
+   */
+  customTextColor?: string;
+  /**
+   * If true, the badge will be disabled and not interactive.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The options available for the dropdown badge.
+   * Each option should have a label and a value.
+   */
+  options: FieldOption[];
+  /**
+   * The current value of the select field.
+   */
+  value?: string;
+  /**
+   * If true, the badge will have a secondary style.
+   * @default false
+   */
+  secondary?: boolean;
+  /**
+   * The status of the badge. Determines its color and appearance.
+   * @default "info"
+   */
+  status?: "info" | "error" | "warning" | "success" | "neutral" | "custom";
+  /**
+   * The function to call when the selected value changes.
+   */
+  onChange: (value: string) => void;
+}
+
 type BannerButtonProps = {
   /**
    * Text to display on optional banner button, will display button if provided

package/src/DateTimeField.test.tsx

@@ -1,26 +1,21 @@
-import {act, render, userEvent} from "@testing-library/react-native";
+import {act, userEvent} from "@testing-library/react-native";
 import {DateTime} from "luxon";
 import React from "react";
 
 import {DateTimeField} from "./DateTimeField";
-import {ThemeProvider} from "./Theme";
-
-const renderWithTheme = (ui: React.ReactElement) => {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-};
+import {renderWithTheme, setupComponentTest, teardownComponentTest} from "./test-utils";
 
 describe("DateTimeField", () => {
   let mockOnChange: jest.Mock;
 
   beforeEach(() => {
-    jest.useFakeTimers();
+    const mocks = setupComponentTest();
     jest.setSystemTime(new Date("2023-05-15T10:30:00.000Z"));
-    mockOnChange = jest.fn();
+    mockOnChange = mocks.onChange;
   });
 
   afterEach(() => {
-    jest.useRealTimers();
-    jest.clearAllMocks();
+    teardownComponentTest();
   });
 
   describe("date type", () => {

package/src/Icon.tsx

@@ -15,7 +15,7 @@ export const Icon = ({
   testID,
 }: IconProps): React.ReactElement => {
   const {theme} = useTheme();
-  const iconColor = theme.text[color];
+  const iconColor = theme.text[color] ?? color;
   const iconSize = iconSizeToNumber(size);
   return (
     <FontAwesome6

package/src/Modal.tsx

@@ -178,9 +178,27 @@ export const Modal: FC<ModalProps> = ({
   const actionSheetRef = useRef<ActionSheetRef>(null);
   const {theme} = useTheme();
 
+  const handleDismiss = () => {
+    if (visible && onDismiss) {
+      onDismiss();
+    }
+  };
+
+  const handlePrimaryButtonClick = (value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]) => {
+    if (visible && primaryButtonOnClick) {
+      return primaryButtonOnClick(value);
+    }
+  };
+
+  const handleSecondaryButtonClick = (value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]) => {
+    if (visible && secondaryButtonOnClick) {
+      return secondaryButtonOnClick(value);
+    }
+  };
+
   const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
     if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
-      onDismiss();
+      handleDismiss();
     }
   };
 
@@ -201,9 +219,9 @@ export const Modal: FC<ModalProps> = ({
     primaryButtonText,
     primaryButtonDisabled,
     secondaryButtonText,
-    primaryButtonOnClick,
-    secondaryButtonOnClick,
-    onDismiss,
+    primaryButtonOnClick: handlePrimaryButtonClick,
+    secondaryButtonOnClick: handleSecondaryButtonClick,
+    onDismiss: handleDismiss,
     sizePx,
     theme,
     isMobile,
@@ -211,7 +229,7 @@ export const Modal: FC<ModalProps> = ({
 
   if (isMobile) {
     return (
-      <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
+      <ActionSheet ref={actionSheetRef} onClose={handleDismiss}>
         <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
           <View>
             <View
@@ -237,7 +255,7 @@ export const Modal: FC<ModalProps> = ({
     );
   } else {
     return (
-      <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
+      <RNModal animationType="slide" transparent visible={visible} onRequestClose={handleDismiss}>
         <ModalContent {...modalContentProps}>{children}</ModalContent>
       </RNModal>
     );

package/src/SelectBadge.tsx

@@ -0,0 +1,279 @@
+import {Picker} from "@react-native-picker/picker";
+import React, {useCallback, useMemo, useState} from "react";
+import {Modal, Platform, Text, TouchableOpacity, View} from "react-native";
+
+import {FieldOption, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
+export const SelectBadge = ({
+  value,
+  status = "info",
+  secondary = false,
+  customBackgroundColor,
+  customTextColor,
+  customBorderColor,
+  disabled = false,
+  options,
+  onChange,
+}: SelectBadgeProps): React.ReactElement => {
+  const {theme} = useTheme();
+  const [showPicker, setShowPicker] = useState(false);
+  // Temporary state to manage value changes for ios picker
+  // Assures the badge display value persists when user scrolls through options
+  const [iosDisplayValue, setIosDisplayValue] = useState<string | undefined>(value);
+
+  const secondaryBorderColors = {
+    error: "#F39E9E",
+    warning: "#FCC58F",
+    info: "#8FC1D2",
+    success: "#7FD898",
+    neutral: "#AAAAAA",
+    custom: "#AAAAAA",
+  };
+
+  let borderWidth = 0;
+  if (secondary || status === "custom") borderWidth = 1;
+
+  let badgeColor: keyof TextTheme = "inverted";
+
+  if (secondary) {
+    if (status === "error") badgeColor = "error";
+    else if (status === "warning") badgeColor = "warning";
+    else if (status === "info") badgeColor = "secondaryDark";
+    else if (status === "success") badgeColor = "success";
+    else if (status === "neutral") badgeColor = "primary";
+  }
+
+  let badgeBgColor: keyof SurfaceTheme = "neutralDark";
+
+  if (status === "error") badgeBgColor = secondary ? "errorLight" : "error";
+  else if (status === "warning") badgeBgColor = secondary ? "warningLight" : "warning";
+  else if (status === "info") badgeBgColor = secondary ? "secondaryLight" : "secondaryDark";
+  else if (status === "success") badgeBgColor = secondary ? "successLight" : "success";
+  else if (status === "neutral") badgeBgColor = secondary ? "neutralLight" : "neutralDark";
+
+  const backgroundColor = status === "custom" ? customBackgroundColor : theme.surface[badgeBgColor];
+  const borderColor = status === "custom" ? customBorderColor : secondaryBorderColors[status];
+  const textColor = status === "custom" ? customTextColor : theme.text[badgeColor];
+
+  let leftOfChevronBorderColor = textColor;
+  if (status === "custom") leftOfChevronBorderColor = customBorderColor ?? textColor;
+  else if (secondary) leftOfChevronBorderColor = borderColor;
+
+  const findSelectedItem = useCallback(
+    (v: string | undefined | null): FieldOption | null => {
+      if (v !== undefined && v !== null) {
+        return options.find((opt) => opt.value === v) || null;
+      }
+      return null;
+    },
+    [options]
+  );
+
+  const displayVal = useMemo(() => {
+    return findSelectedItem(value)?.label ?? "---";
+  }, [value, findSelectedItem]);
+
+  const handleOnChange = useCallback(
+    (val: string) => {
+      const selectedItem = findSelectedItem(val);
+      if (selectedItem) {
+        onChange(selectedItem.value);
+      }
+      setShowPicker(false);
+    },
+    [findSelectedItem, onChange]
+  );
+
+  const renderPickerItems = useCallback(() => {
+    return options?.map((item: any) => (
+      <Picker.Item key={item.key || item.label} label={item.label} value={item.value} />
+    ));
+  }, [options]);
+
+  const renderIosPicker = useCallback(() => {
+    const handleValueChangeIos = (itemValue: string) => {
+      setIosDisplayValue(itemValue);
+    };
+
+    const handleSave = () => {
+      if (iosDisplayValue && !disabled) {
+        handleOnChange(iosDisplayValue);
+      } else {
+        setShowPicker(false);
+      }
+    };
+
+    const handleDismiss = () => {
+      setShowPicker(false);
+      setIosDisplayValue(value);
+    };
+
+    return (
+      <Modal
+        animationType="slide"
+        supportedOrientations={["portrait", "landscape"]}
+        transparent
+        visible={showPicker}
+        onRequestClose={handleDismiss}
+      >
+        <View style={{flex: 1, justifyContent: "flex-end"}}>
+          <TouchableOpacity
+            accessibilityHint="Closes the picker modal"
+            accessibilityLabel="Dismiss picker modal"
+            activeOpacity={1}
+            style={{flex: 1}}
+            onPress={handleDismiss}
+          />
+          <View
+            style={{
+              backgroundColor: theme.surface.neutralLight,
+              borderTopWidth: 1,
+              borderTopColor: theme.border.default,
+              height: 215,
+            }}
+          >
+            <View
+              style={{
+                width: "100%",
+                height: 45,
+                backgroundColor: "#f8f8f8",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <TouchableOpacity
+                accessibilityHint="Saves the selected value"
+                accessibilityLabel="Save selected value"
+                aria-role="button"
+                hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}
+                style={{
+                  alignSelf: "flex-end",
+                  paddingRight: 12,
+                }}
+                onPress={handleSave}
+              >
+                <View>
+                  <Text
+                    style={{
+                      color: "#007aff",
+                      fontWeight: "600",
+                      fontSize: 17,
+                      paddingTop: 1,
+                    }}
+                  >
+                    Save
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <Picker
+              enabled={!disabled}
+              selectedValue={iosDisplayValue}
+              onValueChange={handleValueChangeIos}
+            >
+              {renderPickerItems()}
+            </Picker>
+          </View>
+        </View>
+      </Modal>
+    );
+  }, [showPicker, iosDisplayValue, disabled, theme, value, handleOnChange, renderPickerItems]);
+
+  const renderPicker = useCallback(() => {
+    return (
+      <Picker
+        enabled={!disabled}
+        selectedValue={findSelectedItem(value)?.value ?? undefined}
+        style={[
+          {
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            color: "transparent",
+            opacity: 0,
+          },
+          // Android headless picker: transparent overlay to capture touches without visible UI.
+          Platform.OS !== "web" && {backgroundColor: "transparent"},
+        ]}
+        onValueChange={handleOnChange}
+      >
+        {renderPickerItems()}
+      </Picker>
+    );
+  }, [disabled, findSelectedItem, value, handleOnChange, renderPickerItems]);
+
+  return (
+    <View style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
+      <TouchableOpacity
+        accessibilityHint="Opens the options picker"
+        accessibilityLabel="Open select badge options"
+        aria-role="button"
+        disabled={disabled}
+        onPress={() => setShowPicker(!showPicker)}
+      >
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            height: 20,
+            width: "auto",
+          }}
+        >
+          <View
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              paddingHorizontal: theme.spacing.sm,
+              flexDirection: "row",
+              borderTopLeftRadius: 4,
+              borderBottomLeftRadius: 4,
+              backgroundColor,
+              height: 20,
+              width: "auto",
+              borderWidth,
+              borderColor,
+            }}
+          >
+            <Text
+              style={{
+                color: textColor,
+                fontSize: 10,
+                fontWeight: "700",
+                fontFamily: "text",
+              }}
+            >
+              {displayVal}
+            </Text>
+          </View>
+          <View
+            style={{
+              justifyContent: "center",
+              alignItems: "center",
+              paddingVertical: 1,
+              paddingHorizontal: theme.spacing.xs,
+              flexDirection: "row",
+              borderTopRightRadius: 4,
+              borderBottomRightRadius: 4,
+              backgroundColor,
+              height: 20,
+              width: "auto",
+              borderWidth,
+              borderLeftWidth: 1,
+              borderColor: leftOfChevronBorderColor,
+            }}
+          >
+            <Icon
+              color={textColor as any}
+              iconName={showPicker ? "chevron-up" : "chevron-down"}
+              size="sm"
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
+      {Platform.OS === "ios" ? renderIosPicker() : renderPicker()}
+    </View>
+  );
+};