ferns-ui 1.7.0 → 1.8.0

package/src/__snapshots__/TextField.test.tsx.snap

@@ -0,0 +1,481 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField snapshots should match snapshot when disabled 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1C1C1C",
+        "fontSize": 14,
+        "fontWeight": 600,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+    Disabled Field
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#D9D9D9",
+        "borderColor": "#4E4E4E",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <TextInput
+      accessibilityHint="Enter text here"
+      accessibilityState={
+        {
+          "disabled": true,
+        }
+      }
+      aria-label="Text input field"
+      autoCapitalize="sentences"
+      autoCorrect={true}
+      blurOnSubmit={true}
+      keyboardType="default"
+      numberOfLines={1}
+      onBlur={[Function]}
+      onChangeText={[MockFunction]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onSubmitEditing={[Function]}
+      placeholderTextColor="#686868"
+      readOnly={true}
+      secureTextEntry={false}
+      style={
+        {
+          "color": "#1C1C1C",
+          "flex": 1,
+          "fontFamily": "text",
+          "fontSize": 16,
+          "gap": 10,
+          "height": 20,
+          "paddingVertical": 0,
+          "width": "100%",
+        }
+      }
+      textContentType="none"
+      underlineColorAndroid="transparent"
+      value="disabled value"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField snapshots should match snapshot with all props 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1C1C1C",
+        "fontSize": 14,
+        "fontWeight": 600,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+    Test Title
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginVertical": 2,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginLeft": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#BD1111",
+            "fontSize": 12,
+          }
+        }
+      >
+        Error text
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#D33232",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <TextInput
+      accessibilityHint="Enter text here"
+      accessibilityState={
+        {
+          "disabled": false,
+        }
+      }
+      aria-label="Text input field"
+      autoCapitalize="sentences"
+      autoCorrect={true}
+      blurOnSubmit={true}
+      keyboardType="default"
+      multiline={false}
+      numberOfLines={1}
+      onBlur={[Function]}
+      onChangeText={[MockFunction]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onSubmitEditing={[Function]}
+      placeholder="Enter text"
+      placeholderTextColor="#686868"
+      readOnly={false}
+      secureTextEntry={false}
+      style={
+        {
+          "color": "#1C1C1C",
+          "flex": 1,
+          "fontFamily": "text",
+          "fontSize": 16,
+          "gap": 10,
+          "height": 20,
+          "paddingVertical": 0,
+          "width": "100%",
+        }
+      }
+      textContentType="none"
+      underlineColorAndroid="transparent"
+      value="test value"
+    />
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      aria-role="button"
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+    />
+  </View>
+  <View
+    style={
+      {
+        "marginTop": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "#1C1C1C",
+          "fontSize": 12,
+          "lineHeight": 16,
+        }
+      }
+    >
+      Helper text
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextField snapshots should match snapshot with default props 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#9A9A9A",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <TextInput
+      accessibilityHint="Enter text here"
+      accessibilityState={
+        {
+          "disabled": undefined,
+        }
+      }
+      aria-label="Text input field"
+      autoCapitalize="sentences"
+      autoCorrect={true}
+      blurOnSubmit={true}
+      keyboardType="default"
+      numberOfLines={1}
+      onBlur={[Function]}
+      onChangeText={[MockFunction]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onSubmitEditing={[Function]}
+      placeholderTextColor="#686868"
+      secureTextEntry={false}
+      style={
+        {
+          "color": "#1C1C1C",
+          "flex": 1,
+          "fontFamily": "text",
+          "fontSize": 16,
+          "gap": 10,
+          "height": 20,
+          "paddingVertical": 0,
+          "width": "100%",
+        }
+      }
+      textContentType="none"
+      underlineColorAndroid="transparent"
+      value="test value"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField snapshots should match snapshot with error state 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1C1C1C",
+        "fontSize": 14,
+        "fontWeight": 600,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+    Error Field
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginVertical": 2,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "marginLeft": 4,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "color": "#BD1111",
+            "fontSize": 12,
+          }
+        }
+      >
+        This field is required
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#D33232",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <TextInput
+      accessibilityHint="Enter text here"
+      accessibilityState={
+        {
+          "disabled": undefined,
+        }
+      }
+      aria-label="Text input field"
+      autoCapitalize="sentences"
+      autoCorrect={true}
+      blurOnSubmit={true}
+      keyboardType="default"
+      numberOfLines={1}
+      onBlur={[Function]}
+      onChangeText={[MockFunction]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onSubmitEditing={[Function]}
+      placeholderTextColor="#686868"
+      secureTextEntry={false}
+      style={
+        {
+          "color": "#1C1C1C",
+          "flex": 1,
+          "fontFamily": "text",
+          "fontSize": 16,
+          "gap": 10,
+          "height": 20,
+          "paddingVertical": 0,
+          "width": "100%",
+        }
+      }
+      textContentType="none"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField snapshots should match snapshot with multiline 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "width": "100%",
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "color": "#1C1C1C",
+        "fontSize": 14,
+        "fontWeight": 600,
+        "lineHeight": 22.4,
+      }
+    }
+  >
+    Multiline Field
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "borderColor": "#9A9A9A",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "overflow": "hidden",
+        "paddingHorizontal": 12,
+        "paddingVertical": 8,
+      }
+    }
+  >
+    <TextInput
+      accessibilityHint="Enter text here"
+      accessibilityState={
+        {
+          "disabled": undefined,
+        }
+      }
+      aria-label="Text input field"
+      autoCapitalize="sentences"
+      autoCorrect={true}
+      blurOnSubmit={true}
+      keyboardType="default"
+      multiline={true}
+      numberOfLines={3}
+      onBlur={[Function]}
+      onChangeText={[MockFunction]}
+      onContentSizeChange={[Function]}
+      onFocus={[Function]}
+      onSubmitEditing={[Function]}
+      placeholderTextColor="#686868"
+      secureTextEntry={false}
+      style={
+        {
+          "color": "#1C1C1C",
+          "flex": 1,
+          "fontFamily": "text",
+          "fontSize": 16,
+          "gap": 10,
+          "height": 120,
+          "paddingVertical": 0,
+          "width": "100%",
+        }
+      }
+      textContentType="none"
+      underlineColorAndroid="transparent"
+      value="line 1\\nline 2"
+    />
+  </View>
+</View>
+`;

package/src/index.tsx

@@ -50,6 +50,7 @@ export * from "./Radio";
 export * from "./RadioField";
 export * from "./ScrollView";
 export * from "./SegmentedControl";
+export * from "./SelectBadge";
 export * from "./SelectField";
 export * from "./SideDrawer";
 export * from "./Signature";

package/src/test-utils.tsx

@@ -0,0 +1,26 @@
+import {render} from "@testing-library/react-native";
+import React from "react";
+import {ThemeProvider} from "./Theme";
+
+export const renderWithTheme = (ui: React.ReactElement) => {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+};
+
+export const createCommonMocks = () => ({
+  onChange: jest.fn(),
+  onFocus: jest.fn(),
+  onBlur: jest.fn(),
+  onEnter: jest.fn(),
+  onSubmitEditing: jest.fn(),
+  onIconClick: jest.fn(),
+});
+
+export const setupComponentTest = () => {
+  jest.useFakeTimers();
+  return createCommonMocks();
+};
+
+export const teardownComponentTest = () => {
+  jest.useRealTimers();
+  jest.clearAllMocks();
+};

package/src/useStoredState.test.tsx

@@ -0,0 +1,134 @@
+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 as jest.Mock).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 as jest.Mock).mockResolvedValue("stored value");
+    (Unifier.storage.setItem as jest.Mock).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 as jest.Mock).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 as jest.Mock).mockResolvedValue("stored value");
+    (Unifier.storage.setItem as jest.Mock).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 as jest.Mock).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 as jest.Mock).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);
+  });
+});

package/src/useStoredState.ts

@@ -1,12 +1,14 @@
-import {useCallback, useEffect, useState} from "react";
+import {useCallback, useEffect, useRef, useState} from "react";
 
 import {Unifier} from "./Unifier";
 
 export const useStoredState = <T>(
   key: string,
   initialValue?: T
-): [T | undefined, (value: T | undefined) => Promise<void>] => {
+): [T | undefined, (value: T | undefined) => Promise<void>, boolean] => {
   const [state, setState] = useState<T | undefined>(initialValue);
+  const [isLoading, setIsLoading] = useState(true);
+  const isMounted = useRef(true);
 
   // Function to fetch data from AsyncStorage
   const fetchData = useCallback(async (): Promise<T | undefined> => {
@@ -21,19 +23,33 @@ export const useStoredState = <T>(
   // Fetch data when the component mounts
   useEffect(() => {
     void fetchData().then((value) => {
-      setState(value);
+      if (isMounted.current) {
+        setState(value);
+        setIsLoading(false);
+      }
+    }).catch((error) => {
+      console.error("Error fetching data:", error);
+      if (isMounted.current) {
+        setIsLoading(false);
+      }
     });
+
+    return () => {
+      isMounted.current = false;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const setAsyncStorageState = async (newValue: T | undefined): Promise<void> => {
     try {
       await Unifier.storage.setItem(key, newValue);
-      setState(newValue);
+      if (isMounted.current) {
+        setState(newValue);
+      }
     } catch (error) {
       console.error("Error writing data to AsyncStorage:", error);
     }
   };
 
-  return [state, setAsyncStorageState];
+  return [state, setAsyncStorageState, isLoading];
 };