@applicaster/zapp-react-native-utils 13.0.0-alpha.5928753399 → 13.0.0-alpha.5942605655

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +1,11 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 
+const DEFAULT_BACKGROUND_FALLBACK = "transparent";
+
 export const useScreenBackgroundColor = (screenId: string): string => {
   const { backgroundColor: screenBackgroundColor } =
     useScreenConfiguration(screenId);
 
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  return backgroundColor;
+  return ifEmptyUseFallback(screenBackgroundColor, DEFAULT_BACKGROUND_FALLBACK);
 };

package/reactHooks/state/README.md

@@ -0,0 +1,79 @@
+# ZStoreProvider and useZStore
+
+This module provides a React context-based solution for managing Zustand stores with named access.
+
+## Usage
+
+### ZStoreProvider
+
+The `ZStoreProvider` component creates a Zustand store from the provided value and makes it available to child components.
+
+```tsx
+import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+
+// In your component
+<ZStoreProvider name="playerConfiguration" value={controller?.config}>
+  <YourComponent />
+</ZStoreProvider>
+```
+
+### useZStore
+
+The `useZStore` hook allows you to access a Zustand store by name from within a `ZStoreProvider`.
+
+```tsx
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// In your component
+const MyComponent = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state.someProperty);
+  
+  return <Text>{config}</Text>;
+};
+```
+
+## Example
+
+```tsx
+import React from "react";
+import { ZStoreProvider, useZStore } from "@applicaster/zapp-react-native-utils/reactHooks/state";
+import { useStore } from "zustand";
+
+// Component that uses the store
+const PlayerConfigDisplay = () => {
+  const store = useZStore("playerConfiguration");
+  const config = useStore(store, (state) => state);
+  
+  return (
+    <View>
+      <Text>Player Config: {JSON.stringify(config)}</Text>
+    </View>
+  );
+};
+
+// Main component that provides the store
+const PlayerComponent = ({ controller }) => {
+  return (
+    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
+      <PlayerConfigDisplay />
+    </ZStoreProvider>
+  );
+};
+```
+
+## Features
+
+- **Named Stores**: Access stores by name instead of importing them directly
+- **Context-based**: Uses React Context for store management
+- **Zustand Integration**: Seamlessly works with existing Zustand stores
+- **Type Safety**: Full TypeScript support
+- **Error Handling**: Clear error messages when stores are not found or used outside providers
+
+## Error Handling
+
+The `useZStore` hook will throw errors in the following cases:
+
+1. **Used outside provider**: "useZStore must be used within a ZStoreProvider"
+2. **Store not found**: "Store with name 'storeName' not found. Make sure it's provided by a ZStoreProvider" 

package/reactHooks/state/ZStoreProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import { create, UseBoundStore } from "zustand";
+
+interface ZStoreContextType {
+  stores: Map<string, UseBoundStore<any>>;
+  registerStore: (name: string, store: UseBoundStore<any>) => void;
+  getStore: (name: string) => UseBoundStore<any> | undefined;
+}
+
+const ZStoreContext = createContext<ZStoreContextType | null>(null);
+
+interface ZStoreProviderProps {
+  children: ReactNode;
+  name: string;
+  value: any;
+}
+
+export const ZStoreProvider: React.FC<ZStoreProviderProps> = ({
+  children,
+  name,
+  value,
+}) => {
+  const parentContext = useContext(ZStoreContext);
+
+  const context = useMemo(() => {
+    if (parentContext) {
+      // If parent context exists, create a new store and register it
+      const store = create(() => value);
+      parentContext.registerStore(name, store);
+
+      return parentContext;
+    }
+
+    // Create a new context if none exists
+    const stores = new Map<string, UseBoundStore<any>>();
+
+    // Create a store from the provided value
+    const store = create(() => value);
+    stores.set(name, store);
+
+    return {
+      stores,
+      registerStore: (storeName: string, storeInstance: UseBoundStore<any>) => {
+        stores.set(storeName, storeInstance);
+      },
+      getStore: (storeName: string) => stores.get(storeName),
+    };
+  }, [parentContext, name, value]);
+
+  return (
+    <ZStoreContext.Provider value={context}>{children}</ZStoreContext.Provider>
+  );
+};
+
+export const useZStore = (name: string): UseBoundStore<any> => {
+  const context = useContext(ZStoreContext);
+
+  if (!context) {
+    throw new Error("useZStore must be used within a ZStoreProvider");
+  }
+
+  const store = context.getStore(name);
+
+  if (!store) {
+    throw new Error(
+      `Store with name "${name}" not found. Make sure it's provided by a ZStoreProvider.`
+    );
+  }
+
+  return store;
+};

package/reactHooks/state/__tests__/ZStoreProvider.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { ZStoreProvider, useZStore } from "../ZStoreProvider";
+import { useStore } from "zustand";
+
+interface TestState {
+  value: string;
+}
+
+// Test component that uses the store
+const TestComponent = ({ storeName }: { storeName: string }) => {
+  const store = useZStore(storeName);
+  const value = useStore(store, (state: any) => (state as TestState).value);
+
+  return <Text testID="test-value">{value}</Text>;
+};
+
+// Test component that provides a store
+const TestProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ZStoreProvider name="testStore" value={{ value: "test-value" }}>
+      {children}
+    </ZStoreProvider>
+  );
+};
+
+describe("ZStoreProvider and useZStore", () => {
+  it("should provide a store and allow access via useZStore", () => {
+    render(
+      <TestProvider>
+        <TestComponent storeName="testStore" />
+      </TestProvider>
+    );
+
+    expect(screen.getByTestId("test-value").props.children).toBe("test-value");
+  });
+
+  it("should throw error when useZStore is used outside provider", () => {
+    // Suppress console.error for this test
+    const originalError = console.error;
+    console.error = jest.fn();
+
+    expect(() => {
+      render(<TestComponent storeName="testStore" />);
+    }).toThrow("useZStore must be used within a ZStoreProvider");
+
+    console.error = originalError;
+  });
+
+  it("should throw error when store name is not found", () => {
+    // Suppress console.error for this test
+    const originalError = console.error;
+    console.error = jest.fn();
+
+    expect(() => {
+      render(
+        <TestProvider>
+          <TestComponent storeName="nonExistentStore" />
+        </TestProvider>
+      );
+    }).toThrow('Store with name "nonExistentStore" not found');
+
+    console.error = originalError;
+  });
+});

package/reactHooks/state/index.ts

@@ -1,3 +1,5 @@
 export { useRivers } from "./useRivers";
 
 export { useHomeRiver } from "./useHomeRiver";
+
+export { ZStoreProvider, useZStore } from "./ZStoreProvider";

package/reactHooks/useListenEventBusEvent.ts

@@ -23,5 +23,5 @@ export const useListenEventBusEvent = (
         sub.remove(); // stop listening to DeviceEventEmitter
       };
     }
-  }, []);
+  }, [handler, subscriptionID, source, events]);
 };

package/reactUtils/index.ts

@@ -187,3 +187,12 @@ export const hasVizioAPIs = () => {
 
   return hasAPIs;
 };
+
+/**
+ * Checks if the Android version is at least the expected version
+ * @param expectedVersion The version to compare against
+ * @returns True if the current Android version is at least the expected version, false otherwise
+ */
+export const isAndroidVersionAtLeast = (expectedVersion: number) => {
+  return parseFloat(Platform.Version.toString()) >= expectedVersion;
+};

package/typeGuards/index.ts

@@ -0,0 +1,3 @@
+export const isString = (value: unknown) => {
+  return typeof value === "string";
+};

package/utils/README.md

@@ -0,0 +1,30 @@
+### ramda replacement utils
+
+See contribution guide below
+
+## Reference
+
+Prefer non-fp variant as it more performant - if refactoring assumes you need more efforts rewrite ramda sample to lodash and it can be easily replaced with lodash-fp - use lodash-fp.
+
+### Ramda alternatives:
+
+Custom
+- `splitEvery` => `chunk`
+- `times` => `times`
+
+From `lodash`
+- `clone` => `clone`
+- `flatten` => `flatten`
+- `drop` => `drop`
+- `length` => `size`
+
+
+## Contribution
+
+To add new helper function as ramda replacement
+
+1. Search for replacement ( you can use lodash or pure JS solution), arguments should match with Ramda definition (for easier transition).
+2. Add new file if needed, add test, update exports in index file. 2.1. Make sure it's well-typed.
+3. If the function can-be reexported from other 3rd party lib - update index.ts to re-export it.
+4. Make sure README is updated and contains reference for newly added function.
+5. You can use AI's help. Use query like 'lodash & lodash/fp equivalent of Ramda's R.clone function' to get an options you can use.

package/utils/chunk.ts

@@ -0,0 +1,5 @@
+import { chunk as _chunk } from "lodash";
+
+export const chunk = <T>(size: number, array: T[]): T[][] => {
+  return _chunk(array, size);
+};

package/utils/index.ts

@@ -0,0 +1,5 @@
+export { chunk } from "./chunk";
+
+export { times } from "./times";
+
+export { cloneDeep as clone, flatten, drop, size, isNil } from "lodash";

package/utils/times.ts

@@ -0,0 +1,5 @@
+import { times as _times } from "lodash";
+
+export const times = <T>(iteratee: (index: number) => T, n: number) => {
+  return _times(n, iteratee);
+};

package/zappFrameworkUtils/localStorageHelper.ts

@@ -1,6 +1,13 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { isNilOrEmpty } from "../reactUtils/helpers";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  StorageOwnedValues,
+  NamespaceValues,
+  StorageValuesToRemove,
+  StorageValuesToAdd,
+} from "./types";
+import { Storage } from "@applicaster/zapp-react-native-bridge/ZappStorage/Storage";
 
 const defaultOwnedKey = "owned_keys";
 const DEFAULT_NAMESPACE = "applicaster.v2";
@@ -44,8 +51,9 @@ function mapOwnedKeysToAdd(
   return mappedData;
 }
 
-export async function batchSaveToLocalStorage(
-  storageValues: StorageValuesToAdd
+export async function batchSave(
+  storageValues: StorageValuesToAdd,
+  storage: Storage
 ) {
   if (isNilOrEmpty(storageValues)) {
     return false;
@@ -58,24 +66,37 @@ export async function batchSaveToLocalStorage(
       const value = namespaceData[key];
 
       if (!isNilOrEmpty(value)) {
-        await localStorage.setItem(key, value, namespace);
+        await storage.setItem(key, value, namespace);
       }
     }
   }
 }
 
-export async function batchRemoveFromLocalStorage(
-  storageValues: StorageValuesToRemove
+export async function batchSaveToLocalStorage(
+  storageValues: StorageValuesToAdd
+) {
+  return await batchSave(storageValues, localStorage);
+}
+
+export async function batchRemoveFromStorage(
+  storageValues: StorageValuesToRemove,
+  storage: Storage = localStorage
 ) {
   for (const namespace of Object.keys(storageValues)) {
     const namespaceData = storageValues[namespace];
 
     for (const key of namespaceData) {
-      await localStorage.removeItem(key, namespace);
+      await storage.removeItem(key, namespace);
     }
   }
 }
 
+export async function batchRemoveFromLocalStorage(
+  storageValues: StorageValuesToRemove
+) {
+  await batchRemoveFromStorage(storageValues, localStorage);
+}
+
 async function addOwnedKeys({
   newKeys,
   ownershipKey,
@@ -218,13 +239,20 @@ export async function batchRemoveOwnedNamespaceKeys({
   });
 }
 
-export async function batchRemoveAllFromNamespace(namespace) {
-  const allDataInNamespace = await localStorage.getAllItems(namespace);
+export async function batchRemoveAllFromNamespaceForStorage(
+  namespace: string,
+  storage: Storage
+) {
+  const allDataInNamespace = await storage.getAllItems(namespace);
   const keysToRemove = Object.keys(allDataInNamespace);
 
-  const dataToRemove = {
+  const dataToRemove: StorageValuesToRemove = {
     [namespace]: keysToRemove,
   };
 
-  await batchRemoveFromLocalStorage(dataToRemove);
+  await batchRemoveFromStorage(dataToRemove, storage);
+}
+
+export async function batchRemoveAllFromNamespace(namespace: string) {
+  await batchRemoveAllFromNamespaceForStorage(namespace, localStorage);
 }

package/zappFrameworkUtils/loginPluginUtils.ts

@@ -89,11 +89,15 @@ const runInBackground = async ({
     const shouldPresent = await hookPresentPolicy.shouldPresentScreen();
 
     if (!shouldPresent) {
+      const isRefreshed = await checkUserAuthenticated();
+
       log_info(
-        "runInBackground: Background mode finished, hook plugin will be skipped"
+        `runInBackground: Background mode finished, ${isRefreshed ? "finish hook with completion true" : "refresh failed will presentUI"}`
       );
 
-      await checkUserAuthenticated();
+      isRefreshed
+        ? callback({ success: isRefreshed, payload: item })
+        : presentUI();
 
       return;
     }

package/zappFrameworkUtils/types.ts

@@ -0,0 +1,11 @@
+export type StorageValuesToAdd = Record<string, NamespaceValues>;
+
+export type StorageValuesToRemove = {
+  string?: string[];
+};
+
+export type StorageOwnedValues = {
+  string?: string[];
+};
+
+export type NamespaceValues = Record<string, string>;