@applicaster/zapp-react-native-utils 13.0.0-alpha.1632352572 → 13.0.0-alpha.1673005505

package/reactUtils/createContext/__tests__/__snapshots__/index.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createContext - when React has the new context API returns the components and the decorators 1`] = `
-Object {
+{
   "Consumer": [MockFunction],
   "Provider": [MockFunction],
-  "ReactContext": Object {
+  "ReactContext": {
     "Consumer": [MockFunction],
     "Provider": [MockFunction],
   },

package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap

@@ -1,32 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createProvider creates a context Provider component 1`] = `
-<mockConstructor
-  value={
-    Object {
-      "context": "initialValue",
-      "otherContext": "otherValue",
-      "setContext": [Function],
-      "setOtherContext": [Function],
-    }
-  }
->
-  <MockChild
-    context="context"
-  />
-</mockConstructor>
-`;
-
-exports[`createProvider creates a context Provider component 2`] = `
-Object {
-  "children": <MockChild
-    context="context"
-  />,
-  "value": Object {
-    "context": "initialValue",
-    "otherContext": "otherValue",
-    "setContext": [Function],
-    "setOtherContext": [Function],
-  },
-}
+<View>
+  context
+</View>
 `;

package/reactUtils/createContext/__tests__/__snapshots__/withConsumer.test.js.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createConsumer creates a context consumer function 1`] = `
-<Child
-  context="foo"
-  setContext={[MockFunction]}
-/>
+<View>
+  foo
+</View>
 `;

package/reactUtils/createContext/__tests__/__snapshots__/withProvider.test.js.snap

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`withProvider decorates a component with the provider 1`] = `
-<Provider>
-  <Component />
-</Provider>
+<View>
+  <View>
+    <Text>
+      I am a Component
+    </Text>
+  </View>
+</View>
 `;

package/reactUtils/createContext/__tests__/helpers.test.js

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { shallow } from "enzyme";
 import { View, Text } from "react-native";
 
+import { NOOP, getSetterName, createContextSetters } from "../helpers";
+
 function stateValidator({ property, value }) {
   return (
     (property === "foo" && value === "new foo") ||
@@ -9,150 +10,135 @@ function stateValidator({ property, value }) {
   );
 }
 
-const logger = {
-  warning: jest.fn(),
-};
-
-jest.mock("../../logger", () => ({
-  reactUtilsLogger: {
-    addSubsystem: jest.fn(() => logger),
-  },
-}));
-
-const { NOOP, getSetterName, createContextSetters } = require("../helpers");
-
-describe("NOOP", () => {
-  it("does nothing", () => {
-    expect(NOOP()).toBeUndefined();
+describe("helpers", () => {
+  describe("NOOP", () => {
+    it("does nothing", () => {
+      expect(NOOP()).toBeUndefined();
+    });
   });
-});
 
-describe("getSetterName", () => {
-  it("returns a setter name for the given property name", () => {
-    expect(getSetterName("fooBar")).toBe("setFooBar");
+  describe("getSetterName", () => {
+    it("returns a setter name for the given property name", () => {
+      expect(getSetterName("fooBar")).toBe("setFooBar");
+    });
   });
-});
-
-describe("createContextSetters", () => {
-  describe("when state validator is provided", () => {
-    class Component extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { foo: "foo", bar: "bar" };
-        createContextSetters(["foo", "bar"], this, { stateValidator });
-      }
-
-      resetInitialState() {
-        this.setState({ foo: "foo", bar: "bar" });
-      }
 
-      render() {
-        return (
-          <View>
-            <Text>I am a component</Text>
-          </View>
-        );
+  describe("createContextSetters", () => {
+    describe("when state validator is provided", () => {
+      class ClassComponent {
+        constructor() {
+          this._state = { foo: "foo", bar: "bar" };
+          createContextSetters(["foo", "bar"], this, { stateValidator });
+        }
+
+        setState(newState) {
+          if (typeof newState === "function") {
+            this.state = newState(this.state);
+          } else {
+            this.state = { ...this.state, ...newState };
+          }
+        }
+
+        set state(val) {
+          this._state = val;
+        }
+
+        get state() {
+          return this._state;
+        }
+
+        getState() {
+          return this._state;
+        }
+
+        resetInitialState() {
+          this.setState({ foo: "foo", bar: "bar" });
+        }
+
+        render() {
+          return <View testID="test-view">{JSON.stringify(this.state)}</View>;
+        }
       }
-    }
 
-    const wrapper = shallow(<Component />);
-    const instance = wrapper.instance();
-    const setStateSpy = jest.spyOn(instance, "setState");
+      let instance;
 
-    beforeEach(() => {
-      instance.resetInitialState();
-      setStateSpy.mockClear();
-      logger.warning.mockClear();
-    });
-
-    it("adds all properties and setters to the component", () => {
-      expect(instance).toHaveProperty("setFoo");
-      expect(instance.setFoo).toBeFunction();
-      expect(instance).toHaveProperty("setBar");
-      expect(instance.setBar).toBeFunction();
-    });
+      beforeEach(() => {
+        instance = new ClassComponent();
+      });
 
-    it("calls setState when the setters are called & the validator passes", () => {
-      expect(instance.state).toMatchSnapshot();
+      it("calls setState when the setters are called & the validator passes", () => {
+        expect(instance.state.foo).toEqual("foo");
+        expect(instance.state.bar).toEqual("bar");
 
-      instance.setFoo("new foo");
-      expect(instance.state).toMatchSnapshot();
-
-      instance.setBar("new bar");
-      expect(instance.state).toMatchSnapshot();
-
-      expect(setStateSpy).toHaveBeenCalledTimes(2);
-      expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(logger.warning).not.toHaveBeenCalled();
-    });
+        instance.setFoo("new foo");
+        expect(instance.state.foo).toEqual("new foo");
 
-    it("skips the update if the state validator doesn't pass", () => {
-      expect(instance.state).toMatchSnapshot();
+        instance.setBar("new bar");
+        expect(instance.state.bar).toEqual("new bar");
+      });
 
-      instance.setFoo("invalid foo");
-      expect(instance.state).toMatchSnapshot();
+      it("skips the update if the state validator doesn't pass", () => {
+        expect(instance.state.foo).toEqual("foo");
+        expect(instance.state.bar).toEqual("bar");
 
-      instance.setBar("invalid bar");
-      expect(instance.state).toMatchSnapshot();
+        instance.setFoo("invalid foo");
+        expect(instance.state.foo).toEqual("foo");
 
-      expect(setStateSpy).not.toHaveBeenCalled();
-      expect(logger.warning).toHaveBeenCalledTimes(2);
-      expect(logger.warning.mock.calls).toMatchSnapshot();
-    });
+        instance.setBar("invalid bar");
+        expect(instance.state.bar).toEqual("bar");
+      });
 
-    it("skips the update if the new value is the same as the previous one", () => {
-      instance.setFoo("new foo");
-      instance.setFoo("new foo");
-      expect(instance.state).toMatchSnapshot();
-      expect(setStateSpy).toHaveBeenCalledTimes(1);
+      it("skips the update if the new value is the same as the previous one", () => {
+        instance.setFoo("new foo");
+        instance.setFoo("new foo");
+        expect(instance.state).toMatchSnapshot();
+      });
     });
-  });
-
-  describe("when no state validator is provided", () => {
-    class Component extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = { foo: "foo", bar: "bar" };
-        createContextSetters(["foo", "bar"], this);
-      }
 
-      render() {
-        return (
-          <View>
-            <Text>I am a component </Text>
-          </View>
-        );
+    describe("when no state validator is provided", () => {
+      class Component extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { foo: "foo", bar: "bar" };
+          createContextSetters(["foo", "bar"], this);
+        }
+
+        render() {
+          return (
+            <View>
+              <Text>I am a component </Text>
+            </View>
+          );
+        }
       }
-    }
 
-    const wrapper = shallow(<Component />);
-    const instance = wrapper.instance();
-    const setStateSpy = jest.spyOn(instance, "setState");
+      // const wrapper = new Component();
+      const instance = new Component();
+      const setStateSpy = jest.spyOn(instance, "setState");
 
-    afterEach(() => {
-      setStateSpy.mockClear();
-      logger.warning.mockClear();
-    });
+      afterEach(() => {
+        setStateSpy.mockClear();
+      });
 
-    it("adds all properties and setters to the component", () => {
-      expect(instance).toHaveProperty("setFoo");
-      expect(instance.setFoo).toBeFunction();
-      expect(instance).toHaveProperty("setBar");
-      expect(instance.setBar).toBeFunction();
-    });
+      it("adds all properties and setters to the component", () => {
+        expect(instance).toHaveProperty("setFoo");
+        expect(instance.setFoo).toBeFunction();
+        expect(instance).toHaveProperty("setBar");
+        expect(instance.setBar).toBeFunction();
+      });
 
-    it("calls setState when the setters are called, no matter what the value is", () => {
-      expect(instance.state).toMatchSnapshot();
+      it("calls setState when the setters are called, no matter what the value is", () => {
+        expect(instance.state).toMatchSnapshot();
 
-      instance.setFoo("invalid foo");
-      expect(instance.state).toMatchSnapshot();
+        instance.setFoo("invalid foo");
+        expect(instance.state).toMatchSnapshot();
 
-      instance.setBar("invalid bar");
-      expect(instance.state).toMatchSnapshot();
+        instance.setBar("invalid bar");
+        expect(instance.state).toMatchSnapshot();
 
-      expect(setStateSpy).toHaveBeenCalledTimes(2);
-      expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(logger.warning).not.toHaveBeenCalled();
+        expect(setStateSpy).toHaveBeenCalledTimes(2);
+        expect(setStateSpy.mock.calls).toMatchSnapshot();
+      });
     });
   });
 });

package/reactUtils/createContext/__tests__/provider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createProvider } from "../provider";
@@ -29,14 +29,12 @@ describe("createProvider", () => {
   it("creates a context Provider component", () => {
     const MockChild = (props) => <View>{props.context}</View>;
 
-    const wrapper = shallow(
+    const wrapper = render(
       <Provider>
         <MockChild context={"context"} />
       </Provider>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
-
-    expect(wrapper.find(ReactContext.Provider).props()).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/reactUtils/createContext/__tests__/withConsumer.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View } from "react-native";
 
 import { createWithConsumerDecorator } from "../withConsumer";
@@ -11,21 +11,21 @@ describe("createConsumer", () => {
   const { Consumer } = ReactContext;
   const withConsumer = createWithConsumerDecorator(Consumer);
 
-  it("returns a function", () => {
-    expect(withConsumer).toBeFunction();
-  });
-
   it("creates a context consumer function", () => {
-    const Child = (props) => <View>{props.context}</View>;
-    const DecoratedChild = withConsumer(Child);
+    expect(withConsumer).toBeFunction();
     const newContextValue = "newValue";
 
-    const wrapper = shallow(<DecoratedChild />);
+    const Child = (props) => {
+      props.setContext(newContextValue);
+
+      return <View>{props.context}</View>;
+    };
+
+    const DecoratedChild = withConsumer(Child);
 
-    const childWrapper = wrapper.dive();
+    const wrapper = render(<DecoratedChild />);
 
-    expect(toJson(childWrapper)).toMatchSnapshot();
-    childWrapper.props().setContext(newContextValue);
+    expect(wrapper.toJSON()).toMatchSnapshot();
 
     expect(mockContextData.setContext).toHaveBeenCalledWith(newContextValue);
   });

package/reactUtils/createContext/__tests__/withProvider.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { shallow } from "enzyme";
-import toJson from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
 import { View, Text } from "react-native";
 
 import { createWithProviderDecorator } from "../withProvider";
@@ -19,8 +19,8 @@ describe("withProvider", () => {
 
     const DecoratedComponent = withProvider(Component);
 
-    const wrapper = shallow(<DecoratedComponent />);
+    const wrapper = render(<DecoratedComponent />);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/reactUtils/index.ts

@@ -109,20 +109,6 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
-declare global {
-  interface Window {
-    VIZIO?: {
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      exitApplication: () => void;
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
-
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have

package/screenState/index.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { produce } from "immer";
 import { path } from "ramda";
+import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
 type ScreenState = {
   selectedEntry: {
@@ -18,6 +20,8 @@ type ScreenStore = {
   setSelectedEntry: (screenId: string, entryId: string) => void;
 };
 
+type SetSelectedEntry = (screenId: string, entryId: string) => void;
+
 const useScreenStore = create<ScreenStore>((set) => ({
   screens: screensInitialState,
   setSelectedEntry: (screenId, entryId) =>
@@ -35,17 +39,27 @@ const useScreenStore = create<ScreenStore>((set) => ({
 export function useScreenState(
   screenId: ScreenId
 ): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
-  // const state = useState(screenState);
-  const screenState = useScreenStore(
-    path(["screens", screenId])
-  ) as ScreenState;
+  const screenState = useScreenStore<ScreenState>(
+    useShallow(path(["screens", screenId]))
+  );
 
-  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);
+  const setSelectedEntry = useScreenStore<SetSelectedEntry>(
+    useShallow(path(["setSelectedEntry"]))
+  );
 
-  if (!screenId) return null;
+  const memoizedSetSelectedEntry = React.useCallback(
+    (entryId) => setSelectedEntry(screenId, entryId),
+    [screenId, setSelectedEntry]
+  );
 
-  return {
-    screen: screenState,
-    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
-  };
+  return React.useMemo(
+    () =>
+      !screenId
+        ? null
+        : {
+            screen: screenState,
+            setSelectedEntry: memoizedSetSelectedEntry,
+          },
+    [screenId, screenState]
+  );
 }

package/testUtils/index.tsx

@@ -15,16 +15,6 @@ import { ThemeContext } from "../theme";
 
 export { getByTestId } from "./getByTestId";
 
-/**
- * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
- * Example:
- * wrapper.findWhere(testIDEquals('yourID'))
- * @param {*} testId
- * @return boolean
- */
-export const testIDEquals = (testId: any): boolean =>
-  R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance

package/theme/__mocks__/index.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const themeMock = {
   screen_padding_top: 20,
   screen_padding_bottom: 48,
@@ -17,3 +19,5 @@ export const themeMock = {
 };
 
 export const useTheme = jest.fn().mockReturnValue(themeMock);
+
+export const ThemeContext = React.createContext(themeMock);

package/theme/index.ts

@@ -14,7 +14,7 @@ export const ThemeContext = React.createContext({
 export function useTheme<
   T extends Record<string, any> =
     | BaseThemePropertiesTV
-    | BaseThemePropertiesMobile
+    | BaseThemePropertiesMobile,
 >(): T {
   const { themes, selectedThemeId } = React.useContext(ThemeContext);
 

package/time/Timer.ts

@@ -3,8 +3,11 @@ export class Timer {
   private remaining: number;
   private timeoutId: NodeJS.Timeout | null;
 
-  constructor(private callback: () => void, private duration: number) {
-    this.remaining = duration;
+  constructor(
+    private callback: () => void,
+    private duration: number
+  ) {
+    this.remaining = this.duration;
     this.timeoutId = null;
   }
 

package/types.ts

@@ -8,4 +8,5 @@ export type ManifestField<T> = {
 
 export enum ENDPOINT_TAGS {
   allow_missing_keys = "allow_missing_keys",
+  observe_storage = "observe_storage",
 }

package/zappFrameworkUtils/presentPluginOneTime.ts

@@ -92,9 +92,8 @@ export const PresentHookPluginOneTime = (
       const presentOneTimeVersionName =
         await getLatestWatchedVersionNumberFromStorage(storageKey, namespace);
 
-      const applicationVersionName = await sessionStorage.getItem(
-        versionNameKey
-      );
+      const applicationVersionName =
+        await sessionStorage.getItem(versionNameKey);
 
       if (!presentOneTimeVersionName || !applicationVersionName) {
         log_info(

package/appUtils/keyCodes/keys.ios.js

@@ -1,46 +0,0 @@
-/* global tizen */
-const isTizen = typeof tizen !== "undefined";
-
-export const KEYS = {
-  Enter: { code: "Enter", keyCode: 13 },
-  Space: { code: "Space", keyCode: 32 },
-  m: { code: "m", keyCode: 77 },
-  ArrowLeft: { code: "ArrowLeft", keyCode: 37 },
-  ArrowUp: { code: "ArrowUp", keyCode: 38 },
-  ArrowRight: { code: "ArrowRight", keyCode: 39 },
-  ArrowDown: { code: "ArrowDown", keyCode: 40 },
-  Back: isTizen
-    ? { code: "Back", keyCode: 10009 }
-    : { code: "Backspace", keyCode: 8 },
-  Play: isTizen
-    ? { code: "MediaPlay", keyCode: 10252 }
-    : { code: "PlayPause", keyCode: 179 },
-  Pause: isTizen
-    ? { code: "MediaPause", keyCode: 19 }
-    : { code: "Pause", keyCode: 179 },
-  Forward: isTizen
-    ? { code: "MediaFastForward", keyCode: 417 }
-    : { code: "Forward", keyCode: 176 },
-  Rewind: isTizen
-    ? { code: "MediaRewind", keyCode: 412 }
-    : { code: "Rewind", keyCode: 177 },
-  VolumeUp: isTizen
-    ? { code: "VolumeUp", keyCode: 447 }
-    : { code: "VolumeUp", keyCode: 175 },
-  VolumeDown: isTizen
-    ? { code: "VolumeDown", keyCode: 448 }
-    : { code: "VolumeDown", keyCode: 174 },
-  ToggleMute: isTizen
-    ? { code: "VolumeMute", keyCode: 449 }
-    : { code: "VolumeMute", keyCode: 173 },
-  Stop: isTizen
-    ? { code: "MediaStop", keyCode: 413 }
-    : { code: "Q", keyCode: 81 },
-};
-
-export const ARROW_KEYS = [
-  KEYS.ArrowUp,
-  KEYS.ArrowLeft,
-  KEYS.ArrowDown,
-  KEYS.ArrowRight,
-];