ferns-ui 0.36.5 → 0.37.0

package/dist/Banner.d.ts

@@ -1,27 +1,17 @@
 import React from "react";
-import { BoxColor, Rounding, TextColor } from "./Common";
+import { BoxColor, IconName, Rounding, TextColor } from "./Common";
 export interface BannerProps {
     id: string;
+    dismissible?: boolean;
     text: string;
     subtext?: string;
+    iconName?: IconName;
     color?: BoxColor;
     textColor?: TextColor;
     negativeXMargin?: number;
-    bold?: boolean;
     shape?: Rounding;
-    type?: "dismiss" | "action";
+    type?: "dismiss" | "action" | "permanent";
     onClick?: () => void;
 }
-interface BannerState {
-    show: boolean;
-}
-export declare const hideBanner: (id: string) => void;
-export declare class Banner extends React.Component<BannerProps, BannerState> {
-    state: {
-        show: boolean;
-    };
-    componentDidMount(): Promise<void>;
-    dismiss: () => void;
-    render(): React.JSX.Element | null;
-}
-export {};
+export declare const hideBanner: (id: string) => Promise<void>;
+export declare const Banner: ({ id, text, subtext, color, iconName, textColor, negativeXMargin, shape, type, onClick, }: BannerProps) => React.ReactElement | null;

package/dist/Banner.js

@@ -1,56 +1,65 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Box } from "./Box";
+import { Icon } from "./Icon";
 import { IconButton } from "./IconButton";
 import { Text } from "./Text";
 import { Unifier } from "./Unifier";
 function getKey(id) {
-    return `@ReactUnifier:${id}`;
+    return `@FernsUI:${id}`;
 }
 export const hideBanner = (id) => {
     console.debug(`[banner] Hiding ${getKey(id)} `);
-    Unifier.storage.setItem(getKey(id), "true");
+    return Unifier.storage.setItem(getKey(id), "true");
 };
-export class Banner extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { show: false };
-        this.dismiss = () => {
-            hideBanner(this.props.id);
-            this.setState({ show: false });
-        };
-    }
-    async componentDidMount() {
-        const seen = await Unifier.storage.getItem(getKey(this.props.id));
-        console.debug(`[banner] ${getKey(this.props.id)} seen? ${seen}`);
-        this.setState({ show: !seen });
-    }
-    render() {
-        if (!this.state.show) {
-            return null;
+export const Banner = ({ id, text, subtext, color = "secondaryDark", iconName, textColor = "white", negativeXMargin = 0, shape, type = "dismiss", onClick, }) => {
+    // If the banner is permanent, show it immediately.
+    const [show, setShow] = useState(type === "permanent");
+    // Load seen from async storage.
+    useEffect(() => {
+        // Always show permanent banners.
+        if (type === "permanent") {
+            return;
+        }
+        Unifier.storage.getItem(getKey(id)).then((isSeen) => {
+            console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
+            setShow(!isSeen);
+        });
+    }, [id, type]);
+    const dismiss = () => {
+        if (type === "permanent") {
+            return;
         }
-        const type = this.props.type || "dismiss";
-        if (type === "action" && !this.props.onClick) {
-            console.warn("Banners with type action require an onClick property.");
+        hideBanner(id);
+        setShow(false);
+    };
+    const renderButton = () => {
+        if (type === "permanent") {
+            return null;
         }
-        const negativeMargin = (this.props.negativeXMargin || 0) * -4;
-        return (React.createElement(Box, { color: this.props.color || "secondaryDark", dangerouslySetInlineStyle: {
-                __style: {
-                    marginLeft: negativeMargin,
-                    marginRight: negativeMargin,
-                },
-            }, direction: "row", justifyContent: "between", marginBottom: 3, marginTop: 3, paddingX: 3, paddingY: 2, rounding: this.props.shape, shadow: true, width: Unifier.utils.dimensions().width || "100%", onClick: this.dismiss },
-            React.createElement(Box, { alignItems: "center", direction: "column", flex: "shrink", justifyContent: "center" },
-                React.createElement(Box, { paddingY: 1 },
-                    React.createElement(Text, { align: "center", color: this.props.textColor || "white", weight: "bold" }, this.props.text)),
-                this.props.subtext && (React.createElement(Box, { paddingY: 1 },
-                    React.createElement(Text, { align: "center", color: this.props.textColor || "white" }, this.props.subtext)))),
-            React.createElement(Box, { alignItems: "center", display: "block", justifyContent: "center", width: 40 },
-                type === "dismiss" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "times-circle", 
-                    // size="lg"
-                    iconColor: (this.props.textColor || "white"), prefix: "fas", onClick: () => this.dismiss() })),
-                type === "action" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "arrow-right", 
-                    // size="lg"
-                    iconColor: (this.props.textColor || "white"), prefix: "fas", onClick: () => this.props.onClick && this.props.onClick() })))));
+        return (React.createElement(Box, { alignItems: "center", display: "block", justifyContent: "center", width: 40 },
+            type === "dismiss" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "times-circle", iconColor: textColor, prefix: "fas", onClick: dismiss })),
+            type === "action" && (React.createElement(IconButton, { accessibilityLabel: "", icon: "arrow-right", iconColor: textColor, prefix: "fas", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick() }))));
+    };
+    if (!show) {
+        return null;
     }
-}
+    if (type === "action" && !onClick) {
+        console.warn("Banners with type action require an onClick property.");
+    }
+    const negativeMargin = negativeXMargin * -4;
+    return (React.createElement(Box, { color: color, dangerouslySetInlineStyle: {
+            __style: {
+                marginLeft: negativeMargin,
+                marginRight: negativeMargin,
+            },
+        }, direction: "row", justifyContent: "between", marginBottom: 3, marginTop: 3, paddingX: 3, paddingY: 2, rounding: shape, shadow: true, width: Unifier.utils.dimensions().width || "100%", onClick: type === "permanent" ? undefined : dismiss },
+        iconName && (React.createElement(Box, { justifyContent: "center", marginRight: 2, width: 32 },
+            React.createElement(Icon, { color: textColor, name: iconName, size: "lg" }))),
+        React.createElement(Box, { alignItems: "center", direction: "column", flex: "shrink", justifyContent: "center" },
+            React.createElement(Box, { paddingY: 1 },
+                React.createElement(Text, { align: "center", color: textColor, weight: "bold" }, text)),
+            subtext && (React.createElement(Box, { paddingY: 1 },
+                React.createElement(Text, { align: "center", color: textColor }, subtext)))),
+        renderButton()));
+};
 //# sourceMappingURL=Banner.js.map

package/dist/Banner.js.map

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

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";
+export * from "./useStoredState";
 type ImageRequireSource = number;
 interface Insets {
     top?: number;

package/dist/index.js

@@ -60,4 +60,5 @@ export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";
+export * from "./useStoredState";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/useStoredState.d.ts

@@ -0,0 +1 @@
+export declare const useStoredState: <T>(key: string, initialValue?: T | undefined) => [T | null | undefined, (value: T | null | undefined) => Promise<void>];

package/dist/useStoredState.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { Unifier } from "./Unifier";
+export const useStoredState = (key, initialValue) => {
+    const [state, setState] = useState(initialValue);
+    // Function to fetch data from AsyncStorage
+    const fetchData = useCallback(async () => {
+        try {
+            return await Unifier.storage.getItem(key);
+        }
+        catch (error) {
+            console.error("Error reading data from AsyncStorage:", error);
+            return initialValue;
+        }
+    }, [initialValue, key]);
+    // Fetch data when the component mounts
+    useEffect(() => {
+        fetchData().then((value) => {
+            setState(value);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const setAsyncStorageState = async (newValue) => {
+        try {
+            await Unifier.storage.setItem(key, newValue);
+            setState(newValue);
+        }
+        catch (error) {
+            console.error("Error writing data to AsyncStorage:", error);
+        }
+    };
+    return [state, setAsyncStorageState];
+};
+//# sourceMappingURL=useStoredState.js.map

package/dist/useStoredState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoredState.js","sourceRoot":"","sources":["../src/useStoredState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAW,EACX,YAAgB,EACwD,EAAE;IAC1E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAuB,YAAY,CAAC,CAAC;IAEvE,2CAA2C;IAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAA4B,EAAE;QAC/D,IAAI;YACF,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;SAC3C;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,OAAO,YAAY,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;IAExB,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,KAAK,EAAE,QAA8B,EAAiB,EAAE;QACnF,IAAI;YACF,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC7C,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,KAAK,CAAC,CAAC;SAC7D;IACH,CAAC,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;AACvC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.36.5",
+  "version": "0.37.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -119,99 +119,99 @@
   "devDependencies": {
     "@expo/config-plugins": "~7.2.2",
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-async-storage/async-storage": "1.19.3",
     "@react-native-community/blur": "^4.3.0",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-picker/picker": "2.4.10",
-    "@types/mdurl": "^1.0.2",
-    "@types/react": "^18.2.21",
+    "@react-native-community/datetimepicker": "7.6.1",
+    "@react-native-picker/picker": "2.5.1",
+    "@types/mdurl": "^1.0.4",
+    "@types/react": "^18.2.31",
     "@types/react-datetime-picker": "^5.0.0",
     "@types/react-time-picker": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "dayjs": "^1.11.9",
-    "eslint": "^8.49.0",
-    "eslint-config-ferns": "^0.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "dayjs": "^1.11.10",
+    "eslint": "^8.52.0",
+    "eslint-config-ferns": "^0.4.4",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-lodash": "^7.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-react-native": "^4.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "3.0.0",
-    "expo-clipboard": "~4.3.1",
-    "expo-font": "~11.4.0",
-    "expo-haptics": "~12.4.0",
-    "expo-image-manipulator": "~11.3.0",
-    "expo-image-picker": "~14.3.2",
-    "libphonenumber-js": "^1.10.44",
+    "expo-clipboard": "~4.5.0",
+    "expo-font": "~11.6.0",
+    "expo-haptics": "~12.6.0",
+    "expo-image-manipulator": "~11.5.0",
+    "expo-image-picker": "~14.5.0",
+    "libphonenumber-js": "^1.10.48",
     "lodash": "^4.17.21",
     "mdurl": "^1.0.1",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-date-picker": "^10.0.3",
-    "react-datetime-picker": "^5.0.3",
+    "react-date-picker": "^10.5.2",
+    "react-datetime-picker": "^5.5.3",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
     "react-keyed-flatten-children": "^2.2.1",
-    "react-native": "0.72.5",
-    "react-native-actions-sheet": "^0.9.0-alpha.21",
+    "react-native": "0.72.6",
+    "react-native-actions-sheet": "^0.8.29",
     "react-native-calendars": "^1.1301.0",
     "react-native-drawer-layout": "^3.2.1",
-    "react-native-gesture-handler": "~2.12.1",
+    "react-native-gesture-handler": "~2.13.4",
     "react-native-modalize": "^2.1.1",
-    "react-native-permissions": "^3.9.1",
+    "react-native-permissions": "^3.10.0",
     "react-native-picker-select": "^8.1.0",
     "react-native-portalize": "^1.0.7",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-svg": "13.9.0",
+    "react-native-reanimated": "~3.5.4",
+    "react-native-svg": "13.14.0",
     "react-native-swiper-flatlist": "^3.1.1",
     "react-native-toast-notifications": "^3.4.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "react-time-picker": "^6.0.4",
+    "react-router": "^6.17.0",
+    "react-router-dom": "^6.17.0",
+    "react-time-picker": "^6.5.2",
     "tsc-watch": "^6.0.4",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-async-storage/async-storage": "1.19.3",
     "@react-native-community/blur": "^4.3.0",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-picker/picker": "2.4.10",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "dayjs": "^1.11.9",
-    "expo-clipboard": "~4.3.1",
-    "expo-font": "~11.4.0",
-    "expo-haptics": "~12.4.0",
-    "expo-image-manipulator": "~11.3.0",
-    "expo-image-picker": "~14.3.2",
-    "libphonenumber-js": "^1.10.44",
+    "@react-native-community/datetimepicker": "7.6.1",
+    "@react-native-picker/picker": "2.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "dayjs": "^1.11.10",
+    "expo-clipboard": "~4.5.0",
+    "expo-font": "~11.6.0",
+    "expo-haptics": "~12.6.0",
+    "expo-image-manipulator": "~11.5.0",
+    "expo-image-picker": "~14.5.0",
+    "libphonenumber-js": "^1.10.48",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-date-picker": "^10.0.3",
-    "react-datetime-picker": "^5.0.3",
+    "react-date-picker": "^10.5.2",
+    "react-datetime-picker": "^5.5.3",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
-    "react-native": "0.72.5",
-    "react-native-actions-sheet": "^0.9.0-alpha.21",
+    "react-native": "0.72.6",
+    "react-native-actions-sheet": "^0.8.29",
     "react-native-calendars": "^1.1301.0",
     "react-native-drawer-layout": "^3.2.1",
-    "react-native-gesture-handler": "~2.12.1",
+    "react-native-gesture-handler": "~2.13.4",
     "react-native-modalize": "^2.1.1",
-    "react-native-permissions": "^3.9.1",
+    "react-native-permissions": "^3.10.0",
     "react-native-picker-select": "^8.1.0",
     "react-native-portalize": "^1.0.7",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-svg": "13.9.0",
+    "react-native-reanimated": "~3.5.4",
+    "react-native-svg": "13.14.0",
     "react-native-toast-notifications": "^3.4.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "react-time-picker": "^6.0.4"
+    "react-router": "^6.17.0",
+    "react-router-dom": "^6.17.0",
+    "react-time-picker": "^6.5.2"
   }
 }

package/src/Banner.tsx

@@ -1,124 +1,149 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 
 import {Box} from "./Box";
-import {BoxColor, ButtonColor, Rounding, TextColor} from "./Common";
+import {BoxColor, ButtonColor, IconName, Rounding, TextColor} from "./Common";
+import {Icon} from "./Icon";
 import {IconButton} from "./IconButton";
 import {Text} from "./Text";
 import {Unifier} from "./Unifier";
 
-// import {faTimesCircle, faArrowRight} from "@fortawesome/free-solid-svg-icons";
-
 export interface BannerProps {
   id: string;
+  dismissible?: boolean;
   text: string;
   subtext?: string;
+  iconName?: IconName;
   color?: BoxColor;
   textColor?: TextColor;
   negativeXMargin?: number;
-  bold?: boolean;
   shape?: Rounding;
-  type?: "dismiss" | "action";
+  type?: "dismiss" | "action" | "permanent";
   onClick?: () => void;
 }
 
-// library.add(faTimesCircle);
-// library.add(faArrowRight);
-
-interface BannerState {
-  show: boolean;
-}
-
-function getKey(id: string) {
-  return `@ReactUnifier:${id}`;
+function getKey(id: string): string {
+  return `@FernsUI:${id}`;
 }
 
-export const hideBanner = (id: string) => {
+export const hideBanner = (id: string): Promise<void> => {
   console.debug(`[banner] Hiding ${getKey(id)} `);
-  Unifier.storage.setItem(getKey(id), "true");
+  return Unifier.storage.setItem(getKey(id), "true");
 };
 
-export class Banner extends React.Component<BannerProps, BannerState> {
-  state = {show: false};
+export const Banner = ({
+  id,
+  text,
+  subtext,
+  color = "secondaryDark",
+  iconName,
+  textColor = "white",
+  negativeXMargin = 0,
+  shape,
+  type = "dismiss",
+  onClick,
+}: BannerProps): React.ReactElement | null => {
+  // If the banner is permanent, show it immediately.
+  const [show, setShow] = useState(type === "permanent");
 
-  async componentDidMount() {
-    const seen = await Unifier.storage.getItem(getKey(this.props.id));
-    console.debug(`[banner] ${getKey(this.props.id)} seen? ${seen}`);
-    this.setState({show: !seen});
-  }
+  // Load seen from async storage.
+  useEffect(() => {
+    // Always show permanent banners.
+    if (type === "permanent") {
+      return;
+    }
+
+    Unifier.storage.getItem(getKey(id)).then((isSeen) => {
+      console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
+      setShow(!isSeen);
+    });
+  }, [id, type]);
 
-  dismiss = () => {
-    hideBanner(this.props.id);
-    this.setState({show: false});
+  const dismiss = (): void => {
+    if (type === "permanent") {
+      return;
+    }
+    hideBanner(id);
+    setShow(false);
   };
 
-  render() {
-    if (!this.state.show) {
+  const renderButton = (): React.ReactElement | null => {
+    if (type === "permanent") {
       return null;
     }
-    const type = this.props.type || "dismiss";
+    return (
+      <Box alignItems="center" display="block" justifyContent="center" width={40}>
+        {type === "dismiss" && (
+          <IconButton
+            accessibilityLabel=""
+            icon="times-circle"
+            iconColor={textColor as ButtonColor}
+            prefix="fas"
+            onClick={dismiss}
+          />
+        )}
+        {type === "action" && (
+          <IconButton
+            accessibilityLabel=""
+            icon="arrow-right"
+            iconColor={textColor as ButtonColor}
+            prefix="fas"
+            onClick={(): void => onClick?.()}
+          />
+        )}
+      </Box>
+    );
+  };
 
-    if (type === "action" && !this.props.onClick) {
-      console.warn("Banners with type action require an onClick property.");
-    }
-    const negativeMargin = (this.props.negativeXMargin || 0) * -4;
+  if (!show) {
+    return null;
+  }
 
-    return (
-      <Box
-        color={this.props.color || "secondaryDark"}
-        dangerouslySetInlineStyle={{
-          __style: {
-            marginLeft: negativeMargin,
-            marginRight: negativeMargin,
-          },
-        }}
-        direction="row"
-        justifyContent="between"
-        marginBottom={3}
-        marginTop={3}
-        paddingX={3}
-        paddingY={2}
-        rounding={this.props.shape}
-        shadow
-        width={Unifier.utils.dimensions().width || "100%"}
-        onClick={this.dismiss}
-      >
-        <Box alignItems="center" direction="column" flex="shrink" justifyContent="center">
+  if (type === "action" && !onClick) {
+    console.warn("Banners with type action require an onClick property.");
+  }
+
+  const negativeMargin = negativeXMargin * -4;
+
+  return (
+    <Box
+      color={color}
+      dangerouslySetInlineStyle={{
+        __style: {
+          marginLeft: negativeMargin,
+          marginRight: negativeMargin,
+        },
+      }}
+      direction="row"
+      justifyContent="between"
+      marginBottom={3}
+      marginTop={3}
+      paddingX={3}
+      paddingY={2}
+      rounding={shape}
+      shadow
+      width={Unifier.utils.dimensions().width || "100%"}
+      onClick={type === "permanent" ? undefined : dismiss}
+    >
+      {iconName && (
+        <Box justifyContent="center" marginRight={2} width={32}>
+          <Icon color={textColor} name={iconName} size="lg" />
+        </Box>
+      )}
+      <Box alignItems="center" direction="column" flex="shrink" justifyContent="center">
+        <Box paddingY={1}>
+          <Text align="center" color={textColor} weight="bold">
+            {text}
+          </Text>
+        </Box>
+        {subtext && (
           <Box paddingY={1}>
-            <Text align="center" color={this.props.textColor || "white"} weight="bold">
-              {this.props.text}
+            <Text align="center" color={textColor}>
+              {subtext}
             </Text>
           </Box>
-          {this.props.subtext && (
-            <Box paddingY={1}>
-              <Text align="center" color={this.props.textColor || "white"}>
-                {this.props.subtext}
-              </Text>
-            </Box>
-          )}
-        </Box>
-        <Box alignItems="center" display="block" justifyContent="center" width={40}>
-          {type === "dismiss" && (
-            <IconButton
-              accessibilityLabel=""
-              icon="times-circle"
-              // size="lg"
-              iconColor={(this.props.textColor || "white") as ButtonColor}
-              prefix="fas"
-              onClick={() => this.dismiss()}
-            />
-          )}
-          {type === "action" && (
-            <IconButton
-              accessibilityLabel=""
-              icon="arrow-right"
-              // size="lg"
-              iconColor={(this.props.textColor || "white") as ButtonColor}
-              prefix="fas"
-              onClick={() => this.props.onClick && this.props.onClick()}
-            />
-          )}
-        </Box>
+        )}
       </Box>
-    );
-  }
-}
+      {renderButton()}
+    </Box>
+  );
+};

package/src/index.tsx

@@ -61,6 +61,7 @@ export * from "./Table";
 export * from "./TableHeader";
 export * from "./TableHeaderCell";
 export * from "./TableRow";
+export * from "./useStoredState";
 
 // Lifted from react-native
 type ImageRequireSource = number;

package/src/useStoredState.ts

@@ -0,0 +1,39 @@
+import {useCallback, useEffect, useState} from "react";
+
+import {Unifier} from "./Unifier";
+
+export const useStoredState = <T>(
+  key: string,
+  initialValue?: T
+): [T | undefined | null, (value: T | undefined | null) => Promise<void>] => {
+  const [state, setState] = useState<T | undefined | null>(initialValue);
+
+  // Function to fetch data from AsyncStorage
+  const fetchData = useCallback(async (): Promise<T | undefined> => {
+    try {
+      return await Unifier.storage.getItem(key);
+    } catch (error) {
+      console.error("Error reading data from AsyncStorage:", error);
+      return initialValue;
+    }
+  }, [initialValue, key]);
+
+  // Fetch data when the component mounts
+  useEffect(() => {
+    fetchData().then((value) => {
+      setState(value);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setAsyncStorageState = async (newValue: T | undefined | null): Promise<void> => {
+    try {
+      await Unifier.storage.setItem(key, newValue);
+      setState(newValue);
+    } catch (error) {
+      console.error("Error writing data to AsyncStorage:", error);
+    }
+  };
+
+  return [state, setAsyncStorageState];
+};