@applicaster/zapp-react-native-ui-components 14.0.0-alpha.9256258513 → 14.0.0-alpha.9551591420

package/Components/AnimatedInOut/index.tsx

@@ -4,9 +4,11 @@ import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/uti
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+type AnimatedInterpolatedStyle = any;
+
+// type AnimatedInterpolatedStyle =
+//   | Animated.AnimatedInterpolation
+//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
 
 type AnimationConfig = {
   duration: number;

package/Components/AudioPlayer/mobile/Layout.tsx

@@ -27,7 +27,7 @@ export function AudioPlayerMobileLayout({
 }: Props) {
   const fadeAnimation = useRef(new Animated.Value(0)).current;
 
-  const mainContainerStyles = platformSelect({
+  const mainContainerStyles: ViewStyle = platformSelect({
     native: {
       backgroundColor: "transparent",
       overflow: "hidden",

package/Components/AudioPlayer/tv/helpers.tsx

@@ -27,13 +27,20 @@ const LTR = {
   justifyContent: "flex-start",
   textAlign: "left",
   alignItems: "flex-end",
-};
+} as const;
 
 const RTL = {
   flexDirection: "row-reverse",
   justifyContent: "flex-end",
   textAlign: "right",
   alignItems: "flex-start",
-};
+} as const;
 
-export const directionStyles = (isRTL) => (isRTL ? RTL : LTR);
+export const directionStyles = (
+  isRTL: boolean
+): {
+  flexDirection: "row" | "row-reverse";
+  justifyContent: "flex-start" | "flex-end";
+  textAlign: "left" | "right";
+  alignItems: "flex-end" | "flex-start";
+} => (isRTL ? RTL : LTR);

package/Components/Cell/Cell.tsx

@@ -70,8 +70,6 @@ type State = {
 };
 
 export class CellComponent extends React.Component<Props, State> {
-  accessibilityManager: AccessibilityManager;
-
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -85,8 +83,6 @@ export class CellComponent extends React.Component<Props, State> {
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
     };
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -261,21 +257,20 @@ export class CellComponent extends React.Component<Props, State> {
           style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
-          {...this.accessibilityManager.getButtonAccessibilityProps(
-            item?.extensions?.accessibility?.label || item?.title
-          )}
         >
           {(focused, event) => {
             const isFocused = this.isCellFocused(focused);
 
             if (isFocused) {
+              const accessibilityManager = AccessibilityManager.getInstance();
+
               const accessibilityTitle =
                 item?.extensions?.accessibility?.label || item?.title || "";
 
               const accessibilityHint =
                 item?.extensions?.accessibility?.hint || "";
 
-              this.accessibilityManager.readText({
+              accessibilityManager.readText({
                 text: `${accessibilityTitle} ${accessibilityHint}`,
               });
             }

package/Components/Cell/index.js

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {

package/Components/ComponentResolver/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ComponentResolverComponent } from "./ComponentResolver";
 

package/Components/FeedLoader/index.js

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { FeedLoaderComponent } from "./FeedLoader";

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,9 +16,9 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: React.SyntheticEvent) => void;
-  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
-  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
+  onPress?: (nativeEvent: any) => void;
+  onFocus?: (nativeEvent: any) => void;
+  onBlur?: (nativeEvent: any) => void;
   children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;

package/Components/Focusable/FocusableiOS.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type Props = {
   children: () => React.ReactNode;
-};
+} & Record<string, any>;
 
 function FocusableiOSComponent({ children }: Props) {
   if (typeof children === "function") {
@@ -12,4 +12,4 @@ function FocusableiOSComponent({ children }: Props) {
   return children;
 }
 
-export const FocusableiOS = React.forwardRef(FocusableiOSComponent);
+export const FocusableiOS = FocusableiOSComponent;

package/Components/Focusable/index.tsx

@@ -4,7 +4,7 @@ import { FocusableiOS } from "./FocusableiOS";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-export const Focusable = platformSelect({
+export const Focusable: React.ComponentType<any> = platformSelect({
   tvos: FocusableTvOS,
   ios: FocusableiOS,
   default: FocusableDefault,

package/Components/FocusableList/index.tsx

@@ -91,6 +91,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     // eslint-disable-next-line unused-imports/no-unused-vars
     omitPropsPropagation = [],
     useScrollView = false,
+    onScrollToIndexFailed = noop,
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -277,6 +278,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "withStateMemory",
         "useSequentialLoading",
         "useScrollView",
+        "onScrollToIndexFailed",
         ...omitPropsPropagation,
       ],
       R.__
@@ -305,6 +307,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           {...getFlatListProps(props)}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
           renderItem={renderItem}
           focused={focused}
           data={data}
@@ -319,6 +322,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
           renderItem={renderItem}
           onEndReached={onEndReached}
           initialNumToRender={initialNumToRender}
+          onScrollToIndexFailed={onScrollToIndexFailed}
         />
       )}
     </ChildrenFocusDeactivatorView>

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -8,13 +8,10 @@ import {
   useCurationAPI,
 } from "../useCurationAPI";
 import * as redux from "react-redux";
-import * as layoutPresets from "@applicaster/zapp-react-native-redux/hooks/useLayoutPresets";
-import * as pipesFeeds from "@applicaster/zapp-react-native-redux/hooks/useZappPipesFeeds";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
@@ -42,19 +39,20 @@ const mainStackNavigator = {
   },
 };
 
-const store = configureStore()({});
-
-const wrapper = ({ children }) => (
-  <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
-    >
-      <PathnameContext.Provider value={homeStack.route}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
-  </Provider>
-);
+const getWrapper =
+  (store) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => (
+    <WrappedWithProviders store={store}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, currentRoute: homeStack.route }}
+      >
+        <PathnameContext.Provider value={homeStack.route}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </WrappedWithProviders>
+  );
 
 describe("getTransformedPreset should return the passed components if smartComponents is empty", () => {
   describe("getTransformedPreset function", () => {
@@ -312,19 +310,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
         { id: "02", component_type: "not_smart_another" },
       ];
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue({});
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue({});
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: {},
+        }),
       });
 
       // if there are no smart components, it should return the original array
@@ -366,18 +355,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         "http://curation": { loading: false, data: { entry: mockPresetEntry } },
       };
 
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -437,19 +423,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
         },
       };
 
-      // mock the hooks
-      const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-      mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-
-      const mockUseLayoutPresets = jest.spyOn(
-        layoutPresets,
-        "useLayoutPresets"
-      );
-
-      mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
       const { result } = renderHook(() => useCurationAPI(mockComponents), {
-        wrapper,
+        wrapper: getWrapper({
+          zappPipes: mockFeeds,
+          presetsMapping: {
+            presets_mappings: {
+              ...mockLayoutPresets,
+            },
+          },
+        }),
       });
 
       expect(result.current).toEqual(mockTransformedComponents);
@@ -495,14 +477,15 @@ describe("getTransformedPreset should return the passed components if smartCompo
       "http://curation": { loading: false, data: { entry: mockPresetEntry } },
     };
 
-    // mock the hooks
-    const mockUseZappPipesFeeds = jest.spyOn(pipesFeeds, "useZappPipesFeeds");
-    mockUseZappPipesFeeds.mockReturnValue(mockFeeds);
-    const mockUseLayoutPresets = jest.spyOn(layoutPresets, "useLayoutPresets");
-    mockUseLayoutPresets.mockReturnValue(mockLayoutPresets);
-
     const { result } = renderHook(() => useCurationAPI(mockComponents), {
-      wrapper,
+      wrapper: getWrapper({
+        zappPipes: mockFeeds,
+        presetsMapping: {
+          presets_mappings: {
+            ...mockLayoutPresets,
+          },
+        },
+      }),
     });
 
     expect(result.current).toEqual(mockTransformedComponents);

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,17 +1,18 @@
 import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import {
+  ZappPipes,
+  useAppDispatch,
   useLayoutPresets,
-  useZappPipesFeeds,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+
 import {
   ZappPipesEntryContext,
   ZappPipesScreenContext,
@@ -26,7 +27,10 @@ import {
 import { produce } from "immer";
 // types reference
 
-declare type CurationEntry = { preset_name: string; feed_url: string };
+declare interface CurationEntry {
+  preset_name: string;
+  feed_url: string;
+}
 
 type Feeds = Record<string, ZappPipesData>;
 
@@ -122,7 +126,7 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
@@ -162,7 +166,7 @@ export const useCurationAPI = (
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(loadPipesData(url, { clearCache: false }));
+        dispatch(ZappPipes.loadPipesData(url, { clearCache: false }));
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
@@ -171,7 +175,7 @@ export const useCurationAPI = (
     });
   }, [urls]);
 
-  const feeds = useZappPipesFeeds(urls);
+  const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();
 
   const enrichedComponents = useMemo(() => {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -14,6 +14,7 @@ import {
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { ViewStyle } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
@@ -150,14 +151,19 @@ export function HandlePlayable({
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () => ({
-      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal
-        ? modalSize.height
-        : mode === "PIP"
-          ? "100%"
-          : screenHeight,
-    }),
+    () =>
+      ({
+        width: isModal
+          ? modalSize.width
+          : mode === "PIP"
+            ? "100%"
+            : screenWidth,
+        height: isModal
+          ? modalSize.height
+          : mode === "PIP"
+            ? "100%"
+            : screenHeight,
+      }) as ViewStyle,
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks/usePickFromState";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -4,7 +4,7 @@ import * as R from "ramda";
 import { TouchableOpacity } from "react-native";
 // import { SvgUri } from "react-native-svg";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -20,7 +20,7 @@ const withAppliedDimensions = (style: Style) => (source: Source) => ({
 });
 
 export const withDimensionsHOC = (Component) => {
-  return function WithDimensions(props: { style: any }) {
+  return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
     const useDownScalingImages = toBooleanWithDefaultFalse(

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -13,7 +13,7 @@ export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();
 
   const Component =
-    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
+    isVideoPreviewEnabled(props as Props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

package/Components/MasterCell/elementMapper.tsx

@@ -73,7 +73,6 @@ export function elementMapper(
       : {};
 
     const componentProps = {
-      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -91,7 +90,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component {...componentProps}>
+      <Component key={key} {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { Text, Animated } from "react-native";
+import { render } from "@testing-library/react-native";
 
-import renderer from "react-test-renderer";
-
-jest.useFakeTimers();
+import {
+  NotificationView,
+  onlinePhrase,
+  offlinePhrase,
+} from "../NotificationView";
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   usePickFromState: () => ({
@@ -32,39 +35,31 @@ jest.mock("react-native-safe-area-context", () => ({
 
 const dismiss = jest.fn();
 
-const {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} = require("../NotificationView");
-
 describe("NotificationView", () => {
   it("Show online message when Online", () => {
-    const component = renderer.create(
-      <NotificationView online dismiss={dismiss} />
-    );
+    const component = render(<NotificationView online dismiss={dismiss} />);
 
-    expect(component.root.findByType(Text).props.children).toBe(onlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
   });
 
   it("Show offline message when Online", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} dismiss={dismiss} />
     );
 
-    expect(component.root.findByType(Text).props.children).toBe(offlinePhrase);
+    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
   });
 
   it("When hidden is false to true notification is visible", () => {
-    const component = renderer.create(
+    const component = render(
       <NotificationView online={false} hidden={false} dismiss={dismiss} />
     );
 
-    component.update(
+    component.rerender(
       <NotificationView online={false} hidden={true} dismiss={dismiss} />
     );
 
-    const animatedView = component.root.findByType(Animated.View);
+    const animatedView = component.UNSAFE_getByType(Animated.View);
     const animatedViewStyles = animatedView.props.style;
 
     expect(animatedViewStyles.opacity).toBe(1);

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,6 +21,15 @@ exports[`OfflineHandler renders 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
       accessible={true}
       collapsable={false}
       focusable={true}

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -19,29 +19,27 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => {
   };
 });
 
-jest.mock(
-  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
-  () => ({
-    usePickFromState: () => ({
-      plugins: [
-        {
-          name: "offline experience",
-          identifier: "offline-experience",
-          type: "general",
-          module: {
-            useOfflineExperienceConfiguration: () => ({
-              configurationFields: {},
-              localizations: {
-                offline_toast_message: "No internet connection",
-                online_toast_message: "You are back online",
-              },
-            }),
-          },
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+  usePickFromState: () => ({
+    plugins: [
+      {
+        name: "offline experience",
+        identifier: "offline-experience",
+        type: "general",
+        module: {
+          useOfflineExperienceConfiguration: () => ({
+            configurationFields: {},
+            localizations: {
+              offline_toast_message: "No internet connection",
+              online_toast_message: "You are back online",
+            },
+          }),
         },
-      ],
-    }),
-  })
-);
+      },
+    ],
+  }),
+}));
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 44 }),

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ErrorDisplayComponent } from "./ErrorDisplay";