@applicaster/zapp-react-native-utils 13.0.0-alpha.4574923605 → 13.0.0-alpha.4629339973

package/manifestUtils/sharedConfiguration/screenPicker/utils.js

@@ -0,0 +1,130 @@
+const defaultPlatforms = {
+  tvos: "tvOS",
+  android_tv: "Android TV",
+  lg_tv: "LG TV",
+  samsung_tv: "Samsung TV",
+};
+
+const global_defaults = {
+  fontSize: 20,
+  lineHeight: 40,
+  letterSpacing: 0.4,
+};
+
+const generateFontConfiguration = (platforms = defaultPlatforms) => {
+  const platformEntries = Object.entries(platforms);
+  const defaultsEntries = Object.entries(global_defaults);
+  const splitCamelCase = (str) => str.replace(/([a-z](?=[A-Z]))/g, "$1_");
+
+  return platformEntries.reduce((acc, [platformKey, platformValue]) => {
+    acc.push(
+      ...defaultsEntries.reduce((acc2, [valueKey, defaultValue]) => {
+        acc2.push({
+          type: "number_input",
+          label: `${platformValue} ${splitCamelCase(valueKey).replace(
+            "_",
+            " "
+          )}`,
+          key: `${platformKey}_${splitCamelCase(valueKey)}`.toLowerCase(),
+          initial_value: defaultValue,
+        });
+
+        return acc2;
+      }, [])
+    );
+
+    return acc;
+  }, []);
+};
+
+const conditional_rule = (key, condition_value) => ({
+  key,
+  condition_value,
+});
+
+const createConditionalConfig = (rules, matchAll = false) => ({
+  rules: matchAll ? "all_conditions" : "conditional",
+  conditional_fields: rules.map((field) => conditional_rule(...field)),
+});
+
+const conditional_horizontal_type = createConditionalConfig([
+  ["styles/screen_picker_type", "horizontal"],
+]);
+
+const conditional_vertical_type = createConditionalConfig([
+  ["styles/screen_picker_type", "vertical"],
+]);
+
+const conditional_horizontal_type_item_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_item_size", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_type_item_dynamic = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["screen_picker_horizontal_display_type", "dynamic"],
+  ],
+  true
+);
+
+const conditional_horizontal_display_type_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_horizontal_display_type", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_asset_on = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_asset_switch", true],
+  ],
+  true
+);
+
+const createVariationFields = ({
+  prefix = "screen_picker",
+  key,
+  type = "number_input",
+  label = "",
+  variants: [a, b],
+}) => {
+  return [
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        a?.key ?? "vertical"
+      }_${key}`,
+      label: a?.label ?? label,
+      initial_value: a.initial_value,
+      ...conditional_vertical_type,
+    },
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        b.key ?? "horizontal"
+      }_${key}`,
+      label: b?.label ?? label,
+      initial_value: b.initial_value,
+      ...conditional_horizontal_type,
+    },
+  ];
+};
+
+module.exports = {
+  generateFontConfiguration,
+  createVariationFields,
+  createConditionalConfig,
+  conditional_rule,
+  conditional_horizontal_type,
+  conditional_vertical_type,
+  conditional_horizontal_type_item_fixed,
+  conditional_horizontal_type_item_dynamic,
+  conditional_horizontal_display_type_fixed,
+  conditional_horizontal_asset_on,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.4574923605",
+  "version": "13.0.0-alpha.4629339973",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,11 +28,9 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.4574923605",
+    "@applicaster/applicaster-types": "13.0.0-alpha.4629339973",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
-    "create-react-context": "^0.2.3",
-    "create-react-ref": "^0.1.0",
     "dayjs": "^1.11.10",
     "memoizee": "0.4.15",
     "prop-types": "^15.0.0",
@@ -42,8 +40,8 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/index.ts

@@ -108,11 +108,11 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
+  const showSecondaryLevel = screenData?.navigations?.some(
+    (navigation) => navigation.styles?.show_secondary_level_menu
   );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 

package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
+exports[`reactUtils helpers addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -8,7 +8,7 @@ exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`]
 </View>
 `;
 
-exports[`attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
+exports[`reactUtils helpers attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -16,6 +16,18 @@ exports[`attachMethodToPrototype attaches a lifecycle method to the component's
 </View>
 `;
 
-exports[`attachMethodToPrototype preserves any existing lifecycle method 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers attachMethodToPrototype preserves any existing lifecycle method 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;
 
-exports[`wrapInClass wraps the stateless component in a class 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers wrapInClass wraps the stateless component in a class 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;

package/reactUtils/__tests__/reactUtils.test.js

@@ -7,7 +7,7 @@ import {
   componentDidMount,
 } from "./fixtures";
 
-import { attachLifeCycleMethods, createReactRef, mergeChildrenProps } from "..";
+import { attachLifeCycleMethods, mergeChildrenProps } from "..";
 
 describe("attachLifeCycleMethods", () => {
   let addLifeCycleMethodsSpy;
@@ -41,24 +41,6 @@ describe("attachLifeCycleMethods", () => {
   });
 });
 
-describe("createReactRef", () => {
-  it("calls the React.createRef function if it exists", () => {
-    jest.clearAllMocks();
-
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-  });
-
-  it("calls the polyfill if React.createRef doesn't exist", () => {
-    jest.clearAllMocks();
-    const originalCreateRef = React.createRef;
-    React.createRef = undefined;
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-    React.createRef = originalCreateRef;
-  });
-});
-
 describe("mergeChildrenProps", () => {
   it("returns the cloned children with the merged props", () => {
     const Egg = () => React.createElement("Egg");

package/reactUtils/__tests__/reactUtilsHelpers.test.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import {
   isClassComponent,
@@ -20,98 +19,100 @@ import {
 } from "./fixtures";
 
 describe("reactUtils helpers", () => {
-  it("should have isNilOrEmpty", () => {
-    expect(isNilOrEmpty).toBeDefined();
-    expect(isNilOrEmpty(null)).toBeTruthy();
-    expect(isNilOrEmpty(undefined)).toBeTruthy();
-    expect(isNilOrEmpty("")).toBeTruthy();
-    expect(isNilOrEmpty([])).toBeTruthy();
+  describe("isNilOrEmpty", () => {
+    it("should return correct output", () => {
+      expect(isNilOrEmpty).toBeDefined();
+      expect(isNilOrEmpty(null)).toBeTruthy();
+      expect(isNilOrEmpty(undefined)).toBeTruthy();
+      expect(isNilOrEmpty("")).toBeTruthy();
+      expect(isNilOrEmpty([])).toBeTruthy();
+    });
   });
-});
 
-describe("isClassComponent", () => {
-  it("returns true if the component is a class component", () => {
-    expect(isClassComponent(ClassComponent)).toBe(true);
-  });
+  describe("isClassComponent", () => {
+    it("returns true if the component is a class component", () => {
+      expect(isClassComponent(ClassComponent)).toBe(true);
+    });
 
-  it("returns false otherwise", () => {
-    expect(isClassComponent(StatelessComponent)).toBe(false);
+    it("returns false otherwise", () => {
+      expect(isClassComponent(StatelessComponent)).toBe(false);
+    });
   });
-});
 
-describe("attachMethodToPrototype", () => {
-  const initialWrapper = shallow(<ClassComponent />);
+  describe("attachMethodToPrototype", () => {
+    const initialWrapper = render(<ClassComponent />);
 
-  expect(initialWrapper.instance()).not.toHaveProperty(
-    COMPONENT_DID_MOUNT_METHOD
-  );
-
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
-
-  it("attaches a lifecycle method to the component's prototype", () => {
-    const NewComponent = attachMethodToPrototype(ClassComponent)(
-      componentDidMount,
+    expect(initialWrapper.toJSON()).not.toHaveProperty(
       COMPONENT_DID_MOUNT_METHOD
     );
 
-    const wrapper = shallow(<NewComponent />);
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapper.instance()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
-    expect(componentDidMount).toHaveBeenCalled();
-  });
+    it("attaches a lifecycle method to the component's prototype", () => {
+      const NewComponent = attachMethodToPrototype(ClassComponent)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-  it("preserves any existing lifecycle method", () => {
-    const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
-      componentDidMount,
-      COMPONENT_DID_MOUNT_METHOD
-    );
+      const wrapper = render(<NewComponent />);
 
-    expect(componentDidMount).not.toHaveBeenCalled();
+      expect(wrapper.toJSON(wrapper)).toMatchSnapshot();
+      expect(new NewComponent()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
+      expect(componentDidMount).toHaveBeenCalled();
+    });
 
-    const wrapper = shallow(<NewComponent />);
+    it("preserves any existing lifecycle method", () => {
+      const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(componentDidMount).toHaveBeenCalled();
-    expect(existingMethod).toHaveBeenCalled();
-  });
-});
+      expect(componentDidMount).not.toHaveBeenCalled();
 
-describe("wrapInClass", () => {
-  let NewComponent;
-  let wrapper;
+      const wrapper = render(<NewComponent />);
 
-  beforeEach(() => {
-    NewComponent = wrapInClass(StatelessComponent);
-    wrapper = shallow(<NewComponent />);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(componentDidMount).toHaveBeenCalled();
+      expect(existingMethod).toHaveBeenCalled();
+    });
   });
 
-  it("wraps the stateless component in a class", () => {
-    expect(isClassComponent(NewComponent)).toBe(true);
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-});
+  describe("wrapInClass", () => {
+    let NewComponent;
+    let wrapper;
 
-describe("addLifeCycleMethods", () => {
-  let NewComponent;
-  let wrapper;
+    beforeEach(() => {
+      NewComponent = wrapInClass(StatelessComponent);
+      wrapper = render(<NewComponent />);
+    });
 
-  beforeEach(() => {
-    NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
-    wrapper = shallow(<NewComponent />);
+    it("wraps the stateless component in a class", () => {
+      expect(isClassComponent(NewComponent)).toBe(true);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
   });
 
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
+  describe("addLifeCycleMethods", () => {
+    let NewComponent;
+    let wrapper;
 
-  it("attaches the lifecycle method to the component", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
+    beforeEach(() => {
+      NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
+      wrapper = render(<NewComponent />);
+    });
+
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
+
+    it("attaches the lifecycle method to the component", () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
 
-  it("adds the lifecycle method to the component", () => {
-    expect(componentDidMount).toHaveBeenCalled();
+    it("adds the lifecycle method to the component", () => {
+      expect(componentDidMount).toHaveBeenCalled();
+    });
   });
 });

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

@@ -1,59 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 1`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 1`] = `
 {
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 2`] = `
-{
-  "bar": "bar",
-  "foo": "invalid foo",
-}
-`;
-
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 3`] = `
-{
-  "bar": "invalid bar",
-  "foo": "invalid foo",
-}
-`;
-
-exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 4`] = `
-[
-  [
-    [Function],
-  ],
-  [
-    [Function],
-  ],
-]
-`;
-
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 1`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 2`] = `
 {
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 2`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 3`] = `
 {
   "bar": "bar",
-  "foo": "new foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 3`] = `
-{
-  "bar": "new bar",
-  "foo": "new foo",
+  "foo": "foo",
 }
 `;
 
-exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 4`] = `
+exports[`helpers createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 4`] = `
 [
   [
     [Function],
@@ -64,43 +32,9 @@ exports[`createContextSetters when state validator is provided calls setState wh
 ]
 `;
 
-exports[`createContextSetters when state validator is provided skips the update if the new value is the same as the previous one 1`] = `
+exports[`helpers createContextSetters when state validator is provided skips the update if the new value is the same as the previous one 1`] = `
 {
   "bar": "bar",
   "foo": "new foo",
 }
 `;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 1`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 2`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 3`] = `
-{
-  "bar": "bar",
-  "foo": "foo",
-}
-`;
-
-exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 4`] = `
-[
-  [
-    "trying to invoke setFoo with invalid foo - but it was rejected by the state validator
-          skipping context update",
-  ],
-  [
-    "trying to invoke setBar with invalid bar - but it was rejected by the state validator
-          skipping context update",
-  ],
-]
-`;

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={
-    {
-      "context": "initialValue",
-      "otherContext": "otherValue",
-      "setContext": [Function],
-      "setOtherContext": [Function],
-    }
-  }
->
-  <MockChild
-    context="context"
-  />
-</mockConstructor>
-`;
-
-exports[`createProvider creates a context Provider component 2`] = `
-{
-  "children": <MockChild
-    context="context"
-  />,
-  "value": {
-    "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>
 `;