@applicaster/zapp-react-native-ui-components 14.0.0-alpha.4517121861 → 14.0.0-alpha.4520122433

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -1,14 +1,19 @@
 import * as React from "react";
-import { ScrollView } from "react-native";
-import TestRenderer, { act } from "react-test-renderer";
+import { act, render } from "@testing-library/react-native";
 import { ViewportEvents } from "../../ViewportEvents";
+import ReactNative from "react-native";
+
+const { ScrollView } = ReactNative;
 
 const TestComponent = () => <ScrollView />;
 
-jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
-  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
-  findNodeHandle: () => 1234,
-}));
+jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+
+ReactNative.UIManager.measureLayout = jest.fn(
+  (handle, parent, error, success) => {
+    success(100, 100, 400, 400);
+  }
+);
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -23,32 +28,49 @@ const event = {
 };
 
 describe("<ViewportTracker />", () => {
-  // eslint-disable-next-line react/prop-types
-  const ReactWrapper = ({ children }) => (
-    <ViewportTracker viewportEventsManager={viewportEventsManager}>
-      <ScrollView>{children}</ScrollView>
-    </ViewportTracker>
-  );
-
-  const wrapper = TestRenderer.create(
-    <ReactWrapper>
-      <TestComponent />
-    </ReactWrapper>
-  );
-
-  const scrollView = wrapper.root.findByType(ScrollView);
-
   beforeEach(() => {
     viewportEventSpy.mockClear();
   });
 
   it("renders correctly", () => {
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(scrollView.props).toMatchSnapshot();
   });
 
   it("notifies viewport listeners when layout changes", () => {
-    act(() => scrollView.props.onLayout(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+    });
 
     expect(viewportEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -63,12 +85,50 @@ describe("<ViewportTracker />", () => {
   });
 
   it("notifies viewport listeners when content scrolls", () => {
-    act(() => scrollView.props.onScroll(event));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onScroll(event);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 
   it("notifies viewport listeners when content size changes", () => {
-    act(() => scrollView.props.onContentSizeChange(100, 100));
+    // eslint-disable-next-line react/prop-types
+    const ReactWrapper = ({ children }) => (
+      <ViewportTracker viewportEventsManager={viewportEventsManager}>
+        <ScrollView>{children}</ScrollView>
+      </ViewportTracker>
+    );
+
+    const wrapper = render(
+      <ReactWrapper>
+        <TestComponent />
+      </ReactWrapper>
+    );
+
+    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
+
+    act(() => {
+      scrollView.props.onLayout(event);
+      scrollView.props.onContentSizeChange(100, 100);
+    });
+
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 });

package/Contexts/CellFocusedStateContext/index.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+
+export const CellFocusedStateContext = React.createContext<boolean>(false);
+
+export const CellFocusedStateContextProvider = ({
+  cellFocused,
+  children,
+}: {
+  cellFocused: boolean;
+  children: ReactNode;
+}) => {
+  return (
+    <CellFocusedStateContext.Provider value={cellFocused}>
+      {children}
+    </CellFocusedStateContext.Provider>
+  );
+};
+
+export function withCellFocusedStateContext(
+  Component: React.ComponentType<any>
+) {
+  return function WithCellFocusedStateContextWrapper(props) {
+    const cellFocusedState = React.useContext(CellFocusedStateContext);
+
+    return <Component {...props} cellFocusedState={cellFocusedState} />;
+  };
+}

package/Contexts/ConfigutaionContext/__tests__/ConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 
@@ -14,12 +14,12 @@ describe("withConfigurationProvider", () => {
   };
 
   it("provides configuration to children", () => {
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <ConfigurationProvider configuration={{ target: "foobar" }}>
         <TestComponent />
       </ConfigurationProvider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ScreenContext/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { Animated } from "react-native";
 
@@ -39,11 +40,26 @@ interface NavBarState {
   setSummary: (subtitle: string) => void;
 }
 
-type ScreenContextType = {
-  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
-  navBar: NavBarState;
-  legacyFormatScreenData: LegacyNavigationScreenData | null;
-};
+const createStateStore = () =>
+  create(
+    subscribeWithSelector<ScreenStateStore>((set) => ({
+      data: {},
+      setValue: (key, value) =>
+        set((state) => ({
+          data: {
+            ...state.data,
+            [key]: value,
+          },
+        })),
+      removeValue: (key) =>
+        set((state) => {
+          const newData = { ...state.data };
+          delete newData[key];
+
+          return { data: newData };
+        }),
+    }))
+  );
 
 const createStore = () =>
   create<NavBarStoreState>((set) => ({
@@ -65,7 +81,15 @@ const createStore = () =>
     },
   }));
 
+type ScreenContextType = {
+  _navBarStore: ReturnType<typeof createStore>;
+  _stateStore: ReturnType<typeof createStateStore>;
+  navBar: NavBarState;
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _stateStore: createStateStore(),
   _navBarStore: createStore(),
   navBar: {
     visible: true,
@@ -103,6 +127,21 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenStateRef = useRef<null | ReturnType<typeof createStateStore>>(
+    null
+  );
+
+  const getScreenState = useCallback(() => {
+    if (screenStateRef.current !== null) {
+      return screenStateRef.current;
+    }
+
+    const stateStore = createStateStore();
+    screenStateRef.current = stateStore;
+
+    return stateStore;
+  }, []);
+
   const getScreenNavBarState = useCallback(() => {
     if (screenNavBarStateRef.current !== null) {
       return screenNavBarStateRef.current;
@@ -163,6 +202,7 @@ export function ScreenContextProvider({
       value={useMemo(
         () => ({
           _navBarStore: getScreenNavBarState(),
+          _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Decorators/ConfigurationWrapper/__tests__/withConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import { View } from "react-native";
 import { withConfigurationProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ConfigurationWrapper";
@@ -15,12 +15,12 @@ describe("withConfigurationProvider", () => {
   it("correctly passes all the configuration keys child component", () => {
     const Component = withConfigurationProvider(TestComponent);
 
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <Component
         screenData={{ styles: {}, general: {}, data: { source: "test" } }}
       />
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Decorators/ConfigurationWrapper/withConfigurationProvider.tsx

@@ -21,13 +21,13 @@ const prepareConfiguration = (
   keys: [string]
 ) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);
 
+const configurationKeys = R.keys(keysMap);
+
 export function withConfigurationProvider(Component: React.ComponentType<any>) {
   return function WithConfigurationProvider(props: Props) {
     const styles = props?.screenData?.styles;
     const general = props?.screenData?.general;
 
-    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);
-
     const configuration = React.useMemo(
       () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
       []