@applicaster/zapp-react-native-utils 13.0.0-rc.14 → 13.0.0-rc.140

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__/{index.test.js → index.test.ts}

@@ -1,3 +1,5 @@
+import { createContext } from "../";
+
 jest.mock("react", () => ({
   ...jest.requireActual("react"),
   createContext: jest.fn(() => ({
@@ -6,8 +8,6 @@ jest.mock("react", () => ({
   })),
 }));
 
-const { createContext } = require("../index");
-
 const mockedProvider = jest.fn();
 const mockedWithConsumer = jest.fn();
 const mockedWithProvider = jest.fn();

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/createContext/helpers.ts

@@ -33,7 +33,12 @@ export const getSetterName: (property: string) => string = R.compose(
 export function createContextSetters(
   properties: string[],
   component: any,
-  options: any = {}
+  options: {
+    stateValidator?: (
+      obj: { property: string; value: unknown },
+      oldValue: unknown
+    ) => boolean;
+  } = {}
 ) {
   const { stateValidator = R.T } = options;
 

package/reactUtils/createContext/index.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import createReactContext from "create-react-context";
 import * as R from "ramda";
 
 import { getSetterName, NOOP } from "./helpers";
@@ -7,33 +6,20 @@ import { createProvider } from "./provider";
 import { createWithConsumerDecorator } from "./withConsumer";
 import { createWithProviderDecorator } from "./withProvider";
 
-const reactContextCreator = React.createContext;
-
-// Depending on the version of React used, the `createContext` function may not be available
-// if this is the case, we fall back to a polyfill library
-const contextCreatorFn =
-  reactContextCreator && typeof reactContextCreator === "function"
-    ? reactContextCreator
-    : createReactContext;
-
-/**
- * @typedef Context
- * @property {Object} Context.Provider react class component to use as context provider
- * @property {Function} Context.Consumer react functional component to use as context consumer
- * @property {Function} Context.withProvider HOC to apply the context provider
- * @property {function} Context.withConsumer HOC to apply the context consumer. passes the context as props
- * @property {React.Context} Context.ReactContext React context object
- * to the wrapped component
- */
-
 /**
  * Creates a React Context and returns consumer & providers components & decorators to interact
  * with this context.
- * @param {Object} initialContext map of context properties and their initial values
- * @param {Function} stateValidator optional predicate to tell whether the state update is valid or not
- * @returns {Context} Object containing the context components & decorators {@link Context}
+ * @param initialContext map of context properties and their initial values
+ * @param stateValidator optional predicate to tell whether the state update is valid or not
+ * @returns Object containing the context components & decorators
  */
-export function createContext(initialContext, stateValidator = R.T) {
+export function createContext(
+  initialContext: Record<string, any>,
+  stateValidator: (
+    obj: { property: string; value: unknown },
+    oldValue: unknown
+  ) => boolean = R.T
+) {
   // first we extract the properties name, and create setters name for those
   const contextPropertiesNames = R.keys(initialContext);
   const contextSettersNames = R.map(getSetterName, contextPropertiesNames);
@@ -41,7 +27,7 @@ export function createContext(initialContext, stateValidator = R.T) {
   // we create a React Context with the properties & their setters, assigning a noop function
   // temporarily (will be overriden by proper setters in the provider component)
   const ReactContext = R.compose(
-    contextCreatorFn,
+    React.createContext,
     R.merge(initialContext),
     R.zipObj(contextSettersNames),
     R.map(R.always(NOOP))

package/reactUtils/index.ts

@@ -2,7 +2,6 @@
 import * as R from "ramda";
 import * as React from "react";
 import { Platform } from "react-native";
-import createRef from "create-react-ref/lib/createRef";
 
 import { addLifeCycleMethods, wrapInClass, isClassComponent } from "./helpers";
 
@@ -19,16 +18,6 @@ export function attachLifeCycleMethods(lifecycleMethods) {
   );
 }
 
-/**
- * creates a React Ref. if the version of React doesn't
- * have this API, will use a polyfill instead
- */
-export function createReactRef() {
-  return React.createRef && typeof React.createRef === "function"
-    ? React.createRef()
-    : createRef();
-}
-
 /**
  * Clone the children and merge each of the cloned elements with otherProps.
  * @param {React.Children} children to clone
@@ -198,3 +187,12 @@ export const hasVizioAPIs = () => {
 
   return hasAPIs;
 };
+
+/**
+ * Checks if the Android version is at least the expected version
+ * @param expectedVersion The version to compare against
+ * @returns True if the current Android version is at least the expected version, false otherwise
+ */
+export const isAndroidVersionAtLeast = (expectedVersion: number) => {
+  return parseFloat(Platform.Version.toString()) >= expectedVersion;
+};

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]
+  );
 }