ferns-ui 1.15.0 → 2.0.0-beta.2

package/dist/test-utils.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 export declare const renderWithTheme: (ui: React.ReactElement) => {
+    rerender: (component: React.ReactElement) => void;
+    rerenderAsync: (component: React.ReactElement) => Promise<void>;
     update: (component: React.ReactElement) => void;
+    updateAsync: (component: React.ReactElement) => Promise<void>;
     unmount: () => void;
-    rerender: (component: React.ReactElement) => void;
+    unmountAsync: () => Promise<void>;
     toJSON: () => null | import("react-test-renderer").ReactTestRendererJSON | import("react-test-renderer").ReactTestRendererJSON[];
     debug: import("@testing-library/react-native").DebugFunction;
     root: ReactTestInstance;

package/dist/useStoredState.js

@@ -16,14 +16,12 @@ export const useStoredState = (key, initialValue) => {
     }, [initialValue, key]);
     // Fetch data when the component mounts
     useEffect(() => {
-        void fetchData()
-            .then((value) => {
+        void fetchData().then((value) => {
             if (isMounted.current) {
                 setState(value);
                 setIsLoading(false);
             }
-        })
-            .catch((error) => {
+        }).catch((error) => {
             console.error("Error fetching data:", error);
             if (isMounted.current) {
                 setIsLoading(false);

package/dist/useStoredState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStoredState.js","sourceRoot":"","sources":["../src/useStoredState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAW,EACX,YAAgB,EACmD,EAAE;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE/B,2CAA2C;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAA4B,EAAE;QAC/D,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC5C,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,OAAO,YAAY,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,SAAS,EAAE;aACb,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YACd,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,KAAK,EAAE,QAAuB,EAAiB,EAAE;QAC5E,IAAI,CAAC;YACH,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAClD,CAAC,CAAC"}
+{"version":3,"file":"useStoredState.js","sourceRoot":"","sources":["../src/useStoredState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAW,EACX,YAAgB,EACmD,EAAE;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,YAAY,CAAC,CAAC;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE/B,2CAA2C;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAA4B,EAAE;QAC/D,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC5C,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,OAAO,YAAY,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9B,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,CAAC,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,KAAK,EAAE,QAAuB,EAAiB,EAAE;QAC5E,IAAI,CAAC;YACH,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7C,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAClD,CAAC,CAAC"}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "ferns-ui",
-  "version": "1.15.0",
+  "version": "2.0.0-beta.2",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
     "local": "tsc-watch --onSuccess \"cp -a dist/* ../flourish/node_modules/ferns-ui/dist\"",
-    "lint": "biome check src",
-    "lintfix": "biome check --write src",
-    "lintfixunsafe": "biome check --write --unsafe src",
+    "lint": "eslint",
+    "lintfix": "eslint --fix",
     "build": "tsc",
     "dev": "tsc -w",
     "deps": "node checkDeps.js",
@@ -42,83 +41,147 @@
     "trailingComma": "es5",
     "useTabs": false
   },
+  "eslintConfig": {
+    "extends": [
+      "plugin:ferns/recommended",
+      "plugin:react-native-a11y/all"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "plugins": [
+      "ban"
+    ],
+    "rules": {
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "react-native-a11y/has-valid-accessibility-descriptors": "off",
+      "@typescript-eslint/consistent-type-definitions": [
+        "error",
+        "interface"
+      ],
+      "ban/ban": [
+        "error",
+        {
+          "name": [
+            "dayjs",
+            "*"
+          ],
+          "message": "Use Luxon."
+        },
+        {
+          "name": [
+            "moment",
+            "*"
+          ],
+          "message": "Use Luxon"
+        },
+        {
+          "name": [
+            "React",
+            "FC"
+          ],
+          "message": "Use FC imported directly from React instead of React.FC"
+        }
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "src/**/*"
   ],
   "devDependencies": {
-    "@biomejs/biome": "^2.3.6",
-    "@expo/config-plugins": "~10.0.0",
+    "@expo/config-plugins": "~54.0.4",
     "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.17",
-    "@types/luxon": "^3.4.2",
+    "@types/lodash": "^4.17.16",
+    "@types/luxon": "^3.6.2",
     "@types/mdurl": "^2.0.0",
-    "@types/react": "~18.3.12",
+    "@types/minimatch": "^6.0.0",
+    "@types/react": "~19.1.10",
     "@types/react-datetime-picker": "^5.0.0",
     "@types/react-signature-canvas": "^1.0.5",
     "@types/react-time-picker": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-ban": "^2.0.0",
+    "eslint-plugin-comment-length": "^2.1.1",
+    "eslint-plugin-ferns": "^0.3.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-lodash": "^8.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "eslint-plugin-react-native-a11y": "^3.3.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unused-imports": "4.1.4",
+    "expo-modules-core": "^3.0.29",
     "jest": "^29.7.0",
     "jest-expo": "~53.0.7",
     "jest-github-actions-reporter": "^1.0.3",
     "mdurl": "^2.0.0",
     "prettier": "^3.3.3",
-    "react": "19.0.0",
-    "react-keyed-flatten-children": "^5.0.0",
-    "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.0",
+    "react": "19.1.0",
+    "react-keyed-flatten-children": "^5.1.1",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.30.1",
+    "react-test-renderer": "19.1.0",
     "tsc-watch": "^7.1.1",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
-    "react": "19.0.0",
-    "react-router": "^6.23.0",
-    "react-router-dom": "^6.23.0"
+    "react": "19.1.0",
+    "react-router": "^6.26.2",
+    "react-router-dom": "^6.30.1"
   },
   "dependencies": {
-    "@expo-google-fonts/nunito": "^0.4.1",
-    "@expo-google-fonts/titillium-web": "^0.4.0",
-    "@expo/vector-icons": "^14.1.0",
-    "@react-native-async-storage/async-storage": "1.23.1",
+    "@expo-google-fonts/nunito": "^0.4.2",
+    "@expo-google-fonts/titillium-web": "^0.4.1",
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/blur": "^4.4.0",
-    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
-    "@react-native-picker/picker": "2.11.0",
-    "expo-clipboard": "~7.1.4",
-    "expo-font": "~13.3.1",
-    "expo-haptics": "~14.1.4",
-    "expo-image-manipulator": "~13.1.7",
-    "expo-image-picker": "~16.1.4",
-    "expo-linear-gradient": "~14.1.5",
-    "expo-localization": "~16.1.5",
-    "libphonenumber-js": "^1.12.9",
+    "@react-native-picker/picker": "2.11.1",
+    "expo-clipboard": "~8.0.8",
+    "expo-font": "~14.0.10",
+    "expo-haptics": "~15.0.8",
+    "expo-image-manipulator": "~14.0.8",
+    "expo-image-picker": "~17.0.9",
+    "expo-linear-gradient": "~15.0.8",
+    "expo-localization": "~17.0.8",
+    "libphonenumber-js": "^1.12.31",
     "lodash": "^4.17.21",
-    "luxon": "^3.6.1",
-    "patch-package": "^8.0.0",
+    "luxon": "^3.7.2",
+    "patch-package": "^8.0.1",
     "react-app-polyfill": "^3.0.0",
-    "react-date-picker": "^11.0.0",
-    "react-datetime-picker": "^6.0.1",
+    "react-date-picker": "^12.0.1",
+    "react-datetime-picker": "^7.0.1",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.3",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-actions-sheet": "^0.9.3",
     "react-native-calendars": "^1.1312.1",
-    "react-native-drawer-layout": "4.1.10",
-    "react-native-gesture-handler": "~2.25.0",
-    "react-native-google-places-autocomplete": "^2.5.6",
+    "react-native-drawer-layout": "4.2.0",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-google-places-autocomplete": "^2.6.1",
     "react-native-markdown-display": "^7.0.2",
     "react-native-modalize": "^2.1.1",
-    "react-native-permissions": "^5.4.1",
+    "react-native-permissions": "^5.4.4",
     "react-native-picker-select": "^9.1.3",
     "react-native-portalize": "^1.0.7",
-    "react-native-reanimated": "~3.17.4",
+    "react-native-reanimated": "~4.1.1",
     "react-native-signature-canvas": "^4.7.4",
-    "react-native-svg": "15.11.2",
-    "react-native-swiper-flatlist": "^3.2.4",
+    "react-native-svg": "15.12.1",
+    "react-native-swiper-flatlist": "^3.2.5",
     "react-native-toast-notifications": "^3.4.0",
     "react-native-webview": "13.15.0",
+    "react-native-worklets": "0.5.1",
     "react-signature-canvas": "^1.1.0-alpha.2",
     "react-time-picker": "^7.0.0"
   }

package/src/ActionSheet.tsx

@@ -5,8 +5,8 @@ import {
   Animated,
   Dimensions,
   EmitterSubscription,
-  FlatList,
   findNodeHandle,
+  FlatList,
   Keyboard,
   KeyboardEvent,
   LayoutChangeEvent,
@@ -312,11 +312,11 @@ export class ActionSheet extends Component<Props, State, any> {
           () => {
             this.isClosing = false;
             this.isReachedTop = false;
-            this.props.onPositionChanged?.(false);
+            this.props.onPositionChanged && this.props.onPositionChanged(false);
             this.indicatorTranslateY.setValue(-this.state.paddingTop);
             this.layoutHasCalled = false;
             this.deviceLayoutCalled = false;
-            this.props.onClose?.();
+            this.props.onClose && this.props.onClose();
           }
         );
       }
@@ -334,7 +334,7 @@ export class ActionSheet extends Component<Props, State, any> {
       setTimeout(() => {
         UIManager.measureInWindow(
           this.safeAreaViewRef.current._nativeTag,
-          (_x, _y, _width, height) => {
+          (x, y, width, height) => {
             safeAreaPaddingTop = height;
             resolve(height === 0 ? 20 : height);
           }
@@ -377,7 +377,7 @@ export class ActionSheet extends Component<Props, State, any> {
       this.underlayScale.setValue(1);
       this.underlayTranslateY.setValue(100);
       if (!gestureEnabled) {
-        this.props.onPositionChanged?.(true);
+        this.props.onPositionChanged && this.props.onPositionChanged(true);
       }
       this.updateActionSheetPosition(scrollOffset);
     }
@@ -441,7 +441,7 @@ export class ActionSheet extends Component<Props, State, any> {
         this._scrollTo(scrollOffset);
         await waitAsync(300);
         this.isRecoiling = false;
-        this.props.onPositionChanged?.(true);
+        this.props.onPositionChanged && this.props.onPositionChanged(true);
       } else {
         this._returnToPrevScrollPosition(this.actionSheetHeight);
       }
@@ -529,12 +529,12 @@ export class ActionSheet extends Component<Props, State, any> {
     if (this.actionSheetHeight < this.offsetY) {
       if (!this.isReachedTop) {
         this.isReachedTop = true;
-        this.props.onPositionChanged?.(true);
+        this.props.onPositionChanged && this.props.onPositionChanged(true);
       }
     } else {
       if (this.isReachedTop) {
         this.isReachedTop = false;
-        this.props.onPositionChanged?.(false);
+        this.props.onPositionChanged && this.props.onPositionChanged(false);
       }
     }
 
@@ -581,7 +581,7 @@ export class ActionSheet extends Component<Props, State, any> {
     const ReactNativeVersion = require("react-native/Libraries/Core/ReactNativeVersion");
 
     let v = ReactNativeVersion.version.major + ReactNativeVersion.version.minor;
-    v = parseInt(v, 10);
+    v = parseInt(v);
 
     if (v >= 63 || Platform.OS === "ios") {
       const keyboardHeight = event.endCoordinates.height;
@@ -595,24 +595,20 @@ export class ActionSheet extends Component<Props, State, any> {
         return;
       }
 
-      UIManager.measure(
-        currentlyFocusedField,
-        (_originX, _originY, _width, height, _pageX, pageY) => {
-          const fieldHeight = height;
-          const gap = windowHeight - keyboardHeight - (pageY + fieldHeight);
-          if (gap >= 0) {
-            return;
-          }
-          const toValue =
-            this.props.keyboardMode === "position" ? -(keyboardHeight + 15) : gap - 10;
-
-          Animated.timing(this.transformValue, {
-            toValue,
-            duration: 250,
-            useNativeDriver: true,
-          }).start();
+      UIManager.measure(currentlyFocusedField, (originX, originY, width, height, pageX, pageY) => {
+        const fieldHeight = height;
+        const gap = windowHeight - keyboardHeight - (pageY + fieldHeight);
+        if (gap >= 0) {
+          return;
         }
-      );
+        const toValue = this.props.keyboardMode === "position" ? -(keyboardHeight + 15) : gap - 10;
+
+        Animated.timing(this.transformValue, {
+          toValue,
+          duration: 250,
+          useNativeDriver: true,
+        }).start();
+      });
     } else {
       Animated.timing(this.transformValue, {
         toValue: -10,

package/src/AddressField.tsx

@@ -19,7 +19,7 @@ export const AddressField: FC<AddressFieldProps> = ({
 }) => {
   const handleAddressChange = (field: string, newValue: string) => {
     onChange({...value, [field]: newValue});
-    onBlur?.({...value, [field]: newValue});
+    onBlur && onBlur({...value, [field]: newValue});
   };
 
   const handleAutoCompleteChange = (newValue: AddressInterface) => {

package/src/Avatar.test.tsx

@@ -18,9 +18,7 @@ const mockRenderAsync = jest.fn();
 const mockSaveAsync = jest.fn();
 
 jest.mock("expo-image-manipulator", () => {
-  const actual = jest.requireActual("expo-image-manipulator");
   return {
-    ...actual,
     ImageManipulator: {
       manipulate: jest.fn().mockImplementation(() => ({
         resize: mockResize.mockImplementation(() => ({

package/src/Badge.tsx

@@ -77,7 +77,7 @@ export const Badge = ({
   let badgeValue = value;
 
   if (variant === "numberOnly") {
-    if (!Number.isNaN(Number(value)) && maxValue) {
+    if (!isNaN(Number(value)) && maxValue) {
       const numberValue = Number(value);
       if (numberValue > maxValue) {
         badgeValue = `${maxValue}+`;

package/src/Banner.tsx

@@ -1,6 +1,6 @@
 import debounce from "lodash/debounce";
 import React, {useEffect, useState} from "react";
-import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
+import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
 
 import {Box} from "./Box";
 import {BannerProps, IconName, SurfaceTheme} from "./Common";