@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5974411329 → 14.0.0-alpha.6000342231

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };

package/Components/FeedLoader/FeedLoaderHOC.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  selectZappPipes,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+export const FeedLoaderHOC = (_Component: any) => {
+  return function FeedLoaderHOC(props: any) {
+    const zappPipes = useAppSelector(selectZappPipes);
+    const loadPipesData = useLoadPipesDataDispatch();
+
+    return (
+      <_Component
+        {...props}
+        zappPipes={zappPipes}
+        loadPipesData={loadPipesData}
+      />
+    );
+  };
+};

package/Components/FeedLoader/index.js

@@ -1,10 +1,4 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
 import { FeedLoaderComponent } from "./FeedLoader";
+import { FeedLoaderHOC } from "./FeedLoaderHOC";
 
-export const FeedLoader = connectToStore(R.pick(["zappPipes"]), {
-  loadPipesData,
-})(FeedLoaderComponent);
+export const FeedLoader = FeedLoaderHOC(FeedLoaderComponent);

package/Components/Focusable/Focusable.tsx

@@ -6,6 +6,7 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 import { StyleSheet, ViewStyle } from "react-native";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -20,7 +21,7 @@ type Props = {
   onPressOut?: () => void;
   onLongPress?: () => void;
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
-  children: (boolean, string) => React.ComponentType<any>;
+  children: (boolean, string) => React.ReactNode;
   selected?: boolean;
   style?: ViewStyle[] | ViewStyle;
 };
@@ -29,6 +30,7 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
+  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -43,6 +45,8 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   /**
@@ -123,12 +127,15 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
+    const accessibilityProps =
+      this.accessibilityManager.getWebAccessibilityProps(this.props);
+
     return (
       <div
         id={focusableId}
@@ -141,7 +148,7 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={StyleSheet.flatten(style) as any as React.CSSProperties}
-        {...otherProps}
+        {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPress?: (nativeEvent: any) => void;
   onFocus?: (nativeEvent: any) => void;
   onBlur?: (nativeEvent: any) => void;
-  children: (focused?: boolean) => React.ReactNode;
+  children: ((focused?: boolean) => React.ReactNode) | React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -204,7 +204,7 @@ export class Focusable extends BaseFocusable<Props> {
         {...this.nextFocusableReactTags}
         {...otherProps}
       >
-        {R.is(Function, children) ? children(focused) : children}
+        {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>
     );
   }

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -39,9 +40,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,6 +33,7 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnregister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
@@ -70,6 +72,7 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
   } = props;
@@ -113,9 +116,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell, parentFocusableId]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -125,9 +129,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -20,27 +20,34 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -138,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );

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

@@ -1,19 +1,18 @@
 import React, { Dispatch, useEffect, useState } from "react";
-import {
-  act,
-  create,
-  ReactTestRenderer,
-  ReactTestRendererJSON,
-} from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
+import { View } from "react-native";
 import { FreezeWithCallback } from "../index";
 
-const SimpleContent = () => <div />;
+const SimpleContent = () => <View testID="simple-content" />;
 
 interface InnerProps {
   value: number;
 }
+
 // eslint-disable-next-line unused-imports/no-unused-vars
-const Inner = ({ value }: InnerProps) => <div />;
+const Inner = ({ value }: InnerProps) => (
+  <View testID="inner-component" data-value={value} />
+);
 
 interface TestSubscriber {
   renderCount: number;
@@ -51,24 +50,20 @@ const Container = ({ freeze, children }: ContainerProps) => (
 );
 
 function setupTest(initialFreeze: boolean = false) {
-  let testRenderer: ReactTestRenderer | undefined;
   const [Subscriber, subscriberState] = createSubscriberComponent();
 
-  act(() => {
-    testRenderer = create(
-      <Container freeze={initialFreeze}>
-        <Subscriber />
-      </Container>
-    );
-  });
+  const renderResult = render(
+    <Container freeze={initialFreeze}>
+      <Subscriber />
+    </Container>
+  );
 
   return {
-    testRenderer,
-    testInstance: testRenderer?.root,
+    renderResult,
     subscriberState,
     updateFreeze: (freeze: boolean) => {
       act(() =>
-        testRenderer?.update(
+        renderResult.rerender(
           <Container freeze={freeze}>
             <Subscriber />
           </Container>
@@ -80,91 +75,120 @@ function setupTest(initialFreeze: boolean = false) {
 
 describe("FreezeWithCallback", () => {
   test("Renders stuff not frozen", () => {
-    const testRenderer = create(
+    const { getByTestId } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
   });
 
   test("Does not render stuff when frozen", () => {
-    const testRenderer = create(
+    const { queryByTestId } = render(
       <Container freeze>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+    expect(queryByTestId("simple-content")).toBe(null);
   });
 
   test("Stuff is gone after freeze", () => {
-    const testRenderer = create(
+    const { toJSON, getByTestId, rerender } = render(
       <Container freeze={false}>
         <SimpleContent />
       </Container>
     );
 
-    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+    expect(getByTestId("simple-content")).toBeTruthy();
 
     act(() =>
-      testRenderer.update(
+      rerender(
         <Container freeze>
           <SimpleContent />
         </Container>
       )
     );
 
-    expect(testRenderer.toJSON()).toBe(null);
+    expect(toJSON()).toBe(null);
   });
 
   test("Updates work when not frozen", () => {
-    const { testInstance, subscriberState } = setupTest();
+    const { renderResult, subscriberState } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 
   test("Updates does not propagate when frozen", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
+
     expect(subscriberState.renderCount).toBe(1);
   });
 
   test("State persists after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze, testRenderer } =
-      setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
     act(() => subscriberState.subscription(1));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
 
     updateFreeze(true);
-    expect(testRenderer?.toJSON()).toBe(null);
+    expect(renderResult.toJSON()).toBe(null);
 
     updateFreeze(false);
-    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
-    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(renderResult.getByTestId("inner-component")).toBeTruthy();
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(1);
   });
 
   test("Update propagate after defrost", () => {
-    const { testInstance, subscriberState, updateFreeze } = setupTest();
+    const { renderResult, subscriberState, updateFreeze } = setupTest();
 
     updateFreeze(true);
     act(() => subscriberState.subscription(1));
     act(() => subscriberState.subscription(2));
     act(() => subscriberState.subscription(3));
-    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(0);
 
     updateFreeze(false);
-    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+
+    expect(
+      renderResult.getByTestId("inner-component").props["data-value"]
+    ).toEqual(3);
+
     expect(subscriberState.renderCount).toBe(2);
   });
 });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -3,8 +3,6 @@ import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 import { useEffect, useMemo } from "react";
 
 import {
-  ZappPipes,
-  useAppDispatch,
   useLayoutPresets,
   useZappPipesFeed,
 } from "@applicaster/zapp-react-native-redux";
@@ -25,6 +23,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 import { produce } from "immer";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 // types reference
 
 declare interface CurationEntry {
@@ -126,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useAppDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -145,17 +142,15 @@ export const useCurationAPI = (
       const url = path(SOURCE_PATH, component);
       const mapping = path(MAPPING_PATH, component);
 
-      map[component.id] = mapping
-        ? getInflatedDataSourceUrl({
-            source: url,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : url;
+      map[component.id] = getInflatedDataSourceUrl({
+        source: url,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      });
     });
 
     return map;
@@ -163,17 +158,19 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(ZappPipes.loadPipesData(url, { clearCache: false }));
+        loadPipesDataDispatcher(url, { clearCache: false });
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
         });
       }
     });
-  }, [urls]);
+  }, [urls, loadPipesDataDispatcher]);
 
   const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();