@applicaster/zapp-react-native-utils 12.0.0-rc.25 → 12.0.0-rc.28

package/modalState/index.ts

@@ -0,0 +1,57 @@
+import { create } from "zustand";
+
+interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
+
+export const useModalStore = create<ModalStore>((set) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({
+    item,
+    options = {},
+    props = { screenData: {} },
+  }: OpenModalArg) =>
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...options,
+          onDismiss: () => set({ modalState: initialModalState }),
+          onRequestClose: () => set({ modalState: initialModalState }),
+        },
+        props,
+      },
+    }),
+  dismissModal: () => set(() => ({ modalState: initialModalState })),
+}));

package/navigationUtils/index.ts

@@ -93,19 +93,64 @@ export function resolveNavigationPlugin({
  * @param {Object} navigator to look for navigation props
  * @param {String} category to look for in screen navigations
  * @returns {Object} props
+ * @deprecated use getNavigationPropsV2 instead
  */
 export function getNavigationProps({
-  navigator: { activeRiver },
+  navigator,
   title = "",
   category,
 }: {
   navigator: QuickBrickAppNavigator;
   title: string;
   category: string;
-}): Nullable<
-  Partial<ZappNavigation> & { selected: string; title: string; home: boolean }
-> {
-  const { navigations, id: selected, home } = activeRiver;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { activeRiver } = navigator;
+  const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
+  const navigation = R.find(R.propEq("category", category), navigations);
+
+  if (!navigation) {
+    return null;
+  }
+
+  const { styles, assets, nav_items, rules } = navigation;
+
+  return {
+    selected,
+    title,
+    home,
+    styles,
+    assets,
+    nav_items,
+    rules,
+  };
+}
+
+export function getNavigationPropsV2({
+  currentRiver,
+  title = "",
+  category,
+}: {
+  currentRiver: ZappRiver;
+  title: string;
+  category: string;
+}): {
+  selected: string;
+  title: string;
+  home: boolean;
+  styles: unknown;
+  assets: ZappNavBarAssets;
+  rules: ZappNavBarRules;
+  nav_items: NavBarItem[];
+} | null {
+  const { navigations, id: selected, home } = currentRiver; // use useRiver hook instead
   const navigation = R.find(R.propEq("category", category), navigations);
 
   if (!navigation) {
@@ -170,7 +215,7 @@ export function getScreenIdForContentType(payload, contentTypes) {
 export function getItemTargetId(
   item: ZappEntry | ZappRiver,
   screenType?: string, // todo: creat screen types enum
-  contentTypes?: ZappContentTypes,
+  contentTypes?: ZappContentTypes | null,
   rivers?: Record<string, ZappRiver>
 ) {
   // Pipes v2 resolution
@@ -217,7 +262,7 @@ export function getTargetRoute(
     layoutVersion = undefined,
     rivers = {},
   }: {
-    contentTypes?: ZappContentTypes;
+    contentTypes?: ZappContentTypes | null;
     layoutVersion?: Maybe<ZappLayoutVersions>;
     rivers?: Record<string, ZappRiver>;
   } = {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-rc.25",
+  "version": "12.0.0-rc.28",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.25",
+    "@applicaster/applicaster-types": "12.0.0-rc.28",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,6 +44,7 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
+    "validate-color": "*",
     "zustand": "*"
   },
   "devDependencies": {

package/playerUtils/configurationGenerator.ts

@@ -46,6 +46,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
+      {
+        key: "audio_player_background_image_query",
+        label: "Audio Player Image Query",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
+      },
     ],
   };
 

package/pluginUtils/index.ts

@@ -20,14 +20,14 @@ type Plugin = {
  * returns the component module for a specific type
  * Will look in components first, then in plugins
  */
-function getComponentModule({
+export function getComponentModule({
   componentType,
   components,
   plugins,
 }: {
   componentType: string;
   components: ComponentsMap;
-  plugins: Plugin[];
+  plugins: Plugin[] | QuickBrickPlugin[];
 }) {
   const component = R.compose(
     R.prop(R.__, components),

package/reactHooks/index.ts

@@ -13,3 +13,5 @@ export * from "./navigation";
 export * from "./device";
 
 export * from "./screen";
+
+export * from "./state";

package/reactHooks/layout/__tests__/index.test.js

@@ -1,5 +1,7 @@
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 
+import * as ReactNative from "react-native";
+
 const mocked_return_value = (tv) => ({
   screen: tv
     ? { width: 50, height: 50, scale: 2, fontScale: 1 }
@@ -10,41 +12,31 @@ const mocked_return_value = (tv) => ({
 const platform = "android";
 let tv_flag = false;
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+ReactNative.Dimensions.get = jest.fn(
+  (context) => mocked_return_value(tv_flag)[context]
+);
 
 const mockRemoveFn = jest.fn();
 
-jest.mock("react-native", () => {
-  const RNMock = jest.genMockFromModule("react-native");
-
-  const Dims = {
-    get: jest.fn((context) => mocked_return_value(tv_flag)[context]),
-    addEventListener: jest.fn().mockReturnValue({
-      remove: mockRemoveFn,
-    }),
-  };
-
-  const QuickBrickCommunicationModule = {
-    initialProps: {
-      is_tablet: false,
-    },
-  };
-
-  return {
-    ...RNMock,
-    Dimensions: Dims,
-    Platform: {
-      OS: platform,
-    },
-    NativeModules: {
-      ...RNMock.NativeModules,
-      QuickBrickCommunicationModule,
-    },
-  };
+ReactNative.Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: mockRemoveFn,
 });
 
+ReactNative.Platform.OS = platform;
+
+const QuickBrickCommunicationModule = {
+  initialProps: {
+    is_tablet: false,
+  },
+};
+
+ReactNative.NativeModules.QuickBrickCommunicationModule =
+  QuickBrickCommunicationModule;
+
+jest.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 50 }),
+}));
+
 jest.mock("../../../reactUtils", () => ({
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => tv_flag),

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js

@@ -1,19 +1,14 @@
-let mockPlatformOS = "android";
+import * as ReactNative from "react-native";
 
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
 
-  return {
-    Platform: jest.fn(() => ({ OS: mockPlatformOS })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+ReactNative.Dimensions.get = mockDimensionsGet;
 
 const mockGetConstants = jest.fn().mockReturnValue({
   Dimensions: {
@@ -26,9 +21,10 @@ jest.mock("react-native/Libraries/Utilities/NativeDeviceInfo", () => ({
   getConstants: mockGetConstants,
 }));
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "android";
+
 const { getInitialDimensions } = require("../getInitialDimensions.native.ts");
 
 describe("useDimensions > helpers ( native )", () => {
@@ -48,7 +44,6 @@ describe("useDimensions > helpers ( native )", () => {
 
   it("should call NativeDeviceInfo.getConstants for ios when width === height", () => {
     Platform.OS = "ios";
-    mockPlatformOS = "ios";
 
     jest.fn().mockReturnValue({
       Dimensions: {

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -1,21 +1,19 @@
-jest.mock("react-native", () => {
-  const mockDimensionsGet = jest.fn(
-    (type) =>
-      ({
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      }[type])
-  );
+import * as ReactNative from "react-native";
 
-  return {
-    Platform: jest.fn(() => ({ OS: "web" })),
-    Dimensions: { get: mockDimensionsGet },
-  };
-});
+const mockDimensionsGet = jest.fn(
+  (type) =>
+    ({
+      window: { width: 1, height: 1 },
+      screen: { width: 360, height: 540 },
+    }[type])
+);
+
+ReactNative.Dimensions.get = mockDimensionsGet;
 
-const { Platform, Dimensions } = require("react-native");
+const { Platform, Dimensions } = ReactNative;
 
 Platform.OS = "web";
+
 const { getInitialDimensions } = require("../getInitialDimensions.ts");
 
 describe("useDimensions > helpers (web)", () => {