@terreno/ui 0.0.17 → 0.1.0

package/src/Theme.tsx

@@ -163,11 +163,39 @@ type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
+const computeTheme = (
+  themeConfig: DeepPartial<TerrenoThemeConfig>,
+  primitives: ThemePrimitives
+): TerrenoTheme => {
+  const theme = Object.keys(themeConfig).reduce((acc, key) => {
+    if (key === "primitives") {
+      return acc;
+    }
+    const value = themeConfig[key as keyof TerrenoThemeConfig] ?? {};
+    acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
+      const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
+      if (key === "font") {
+        accKey[valueKey] = primitiveKey;
+      } else {
+        if (primitives[primitiveKey] === undefined) {
+          console.error(`Primitive ${primitiveKey} not found in theme.`);
+        }
+        accKey[valueKey as keyof typeof accKey] = primitives[primitiveKey];
+      }
+      return accKey;
+    }, {} as any);
+    return acc;
+  }, {} as TerrenoTheme);
+  return {...theme, primitives};
+};
+
+const defaultComputedTheme = computeTheme(defaultTheme, defaultPrimitives);
+
 export const ThemeContext = createContext({
   resetTheme: () => {},
   setPrimitives: (_primitives: DeepPartial<typeof defaultPrimitives>) => {},
   setTheme: (_theme: DeepPartial<TerrenoThemeConfig>) => {},
-  theme: {} as TerrenoTheme,
+  theme: defaultComputedTheme,
 });
 
 interface ThemeProviderProps {
@@ -178,32 +206,10 @@ export const ThemeProvider = ({children}: ThemeProviderProps) => {
   const [providerTheme, setProviderTheme] = useState<DeepPartial<TerrenoThemeConfig>>(defaultTheme);
   const [providerPrimitives, setProviderPrimitives] = useState<ThemePrimitives>(defaultPrimitives);
 
-  const computedTheme = useMemo(() => {
-    // Map the providerTheme and transform the strings into the actual values from the primitives.
-    // Do this for each sub-object in the theme. E.g. theme.text, theme.surface, etc.
-    const theme = Object.keys(providerTheme).reduce((acc, key) => {
-      if (key === "primitives") return acc;
-      const value = providerTheme[key as keyof TerrenoThemeConfig] ?? {};
-      // for each key, map the value to the primitive value.
-      acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
-        const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
-        if (key === "font") {
-          accKey[valueKey] = primitiveKey;
-        } else {
-          if (providerPrimitives[primitiveKey] === undefined) {
-            console.error(`Primitive ${primitiveKey} not found in theme.`);
-          }
-          accKey[valueKey as keyof typeof accKey] = providerPrimitives[primitiveKey];
-        }
-        return accKey;
-      }, {} as any);
-      return acc;
-    }, {} as TerrenoTheme);
-    return {
-      ...theme,
-      primitives: providerPrimitives,
-    };
-  }, [providerTheme, providerPrimitives]);
+  const computedTheme = useMemo(
+    () => computeTheme(providerTheme, providerPrimitives),
+    [providerTheme, providerPrimitives]
+  );
 
   const setPrimitives = (newPrimitives: Partial<ThemePrimitives>) => {
     setProviderPrimitives((prev) => ({...prev, ...newPrimitives}));

package/src/Toast.tsx

@@ -1,12 +1,12 @@
 import type React from "react";
 import {Platform, Pressable, View} from "react-native";
-import {useToast as useRNToast} from "react-native-toast-notifications";
 
 import type {IconName, SurfaceColor, TextColor, ToastProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
+import {useToastNotifications} from "./ToastNotifications";
 import {isAPIError, printAPIError} from "./Utilities";
 
 const TOAST_DURATION_MS = 3 * 1000;
@@ -30,8 +30,12 @@ export function useToast(): {
   show: (title: string, options?: UseToastOptions) => string;
   catch: (error: any, message?: string, options?: UseToastVariantOptions) => void;
 } {
-  const toast = useRNToast();
+  const toast = useToastNotifications();
   const show = (title: string, options?: UseToastOptions): string => {
+    if (!toast?.show) {
+      console.warn("Toast not ready yet — provider ref may not be initialized");
+      return "";
+    }
     const toastData = {
       variant: "info",
       ...options,
@@ -39,7 +43,6 @@ export function useToast(): {
     };
     return toast.show(title, {
       data: toastData,
-      // a duration of 0 keeps the toast up infinitely until hidden
       duration: options?.persistent ? 0 : TOAST_DURATION_MS,
     });
   };
@@ -60,7 +63,7 @@ export function useToast(): {
       console.error(title);
       return show(title, {...options, variant: "error"});
     },
-    hide: (id: string) => toast.hide(id),
+    hide: (id: string) => toast?.hide?.(id),
     info: (title: string, options?: UseToastVariantOptions): string => {
       console.info(title);
       return show(title, {...options, variant: "info"});
@@ -79,7 +82,6 @@ export function useToast(): {
 
 // TODO: Support secondary version of Toast.
 // TODO: Support dismissible version of Toast. Currently only persistent are dismissible.
-// This may require a different library from react-native-toast-notifications.
 export const Toast = ({
   title,
   variant = "info",