@applicaster/zapp-react-native-ui-components 13.0.0-alpha.6523249552 → 13.0.0-alpha.6651373134

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
@@ -8,6 +8,7 @@ import thunk from "redux-thunk";
 import { zappPipesDataConnector } from "../index";
 
 import { Hero } from "./Hero";
+import { render } from "ejs";
 
 const mockStore = configureStore([thunk]);
 
@@ -20,6 +21,15 @@ const initialState = {
   },
 };
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: () => ({
+      isScreenActive: true,
+    }),
+  })
+);
+
 const store = mockStore(initialState);
 
 const zappPipesSpy = jest
@@ -31,6 +41,7 @@ const WrappedComponent = zappPipesDataConnector(Hero);
 const componentProp = (data) => ({ data });
 
 // tests need to be re-written due to TS refactor
+// this test has old usage of enzyme API, that's need to be replaced with @testing-library/react-native
 describe.skip("zappPipesDataConnector", () => {
   beforeEach(() => {
     zappPipesSpy.mockClear();
@@ -43,7 +54,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("loads the provided feed url", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp(data)}
           feedUrl={feedUrl}
@@ -51,8 +62,7 @@ describe.skip("zappPipesDataConnector", () => {
         />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(feedUrl, {
         clearCache: false,
@@ -71,12 +81,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: false,
@@ -99,12 +108,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("calls clearCache true and silentRefresh with false", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={{ data, rules }} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: true,
@@ -123,12 +131,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
         "applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=1234",
@@ -146,11 +153,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
@@ -171,11 +178,11 @@ describe.skip("zappPipesDataConnector", () => {
     };
 
     it("calls loadPipesData with favourites option", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith("FAVOURITES", {
@@ -188,7 +195,7 @@ describe.skip("zappPipesDataConnector", () => {
 
   describe("getDataSourceUrl", () => {
     it("returns null if data prop is empty", () => {
-      const wrapper = shallow(
+      const wrapper = render(
         <WrappedComponent component={componentProp({})} store={store} />
       ).dive();
 
@@ -199,7 +206,7 @@ describe.skip("zappPipesDataConnector", () => {
     });
 
     it("returns null if data.source is falsy", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp({ source: null })}
           store={store}
@@ -222,7 +229,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("reloads the app's datasource", () => {
       store.clearActions();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
@@ -251,7 +258,7 @@ describe.skip("zappPipesDataConnector", () => {
         entry: [{ id: "test-entry", title: "test entry" }],
       }));
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={{ data, getStaticComponentFeed }}
           store={store}

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,12 +1,10 @@
 /// <reference types="@applicaster/applicaster-types" />
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React, { useEffect, useMemo } from "react";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 
 import * as R from "ramda";
 import { Platform } from "react-native";
 import Url from "url";
-import { ENDPOINT_TAGS } from "@applicaster/zapp-react-native-utils/types";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -21,12 +19,7 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import {
-  findEndpointForURL,
-  HTTP_METHODS,
-} from "@applicaster/zapp-pipes-v2-client";
-import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -237,7 +230,8 @@ export function zappPipesDataConnector(
     const entryContext =
       (shouldUseNestedContext && screenContextData?.nested?.entry
         ? screenContextData?.nested?.entry
-        : screenContextData?.entry) || {};
+        : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+      {};
 
     const screenContext =
       (shouldUseNestedContext && screenContextData?.nested?.screen
@@ -300,27 +294,7 @@ export function zappPipesDataConnector(
           return addListener(reloadData);
         }
       } else {
-        const pipesEndpoints = appStore.get("pipesEndpoints");
-
-        const endpointURL = findEndpointForURL(
-          dataSourceUrl,
-          pipesEndpoints,
-          HTTP_METHODS.GET
-        );
-
-        const endpoint = pipesEndpoints?.[endpointURL];
-
-        if (endpoint?.tags?.includes(ENDPOINT_TAGS.observe_storage)) {
-          const subscriptions: (() => void)[] = endpoint.context_obj.map(
-            (data: Record<string, any>) => {
-              const { namespace, key } = getNamespaceAndKey(data.key);
-
-              return localStorage.addListener({ key, namespace }, reloadData);
-            }
-          );
-
-          return () => subscriptions.forEach((listener) => listener());
-        }
+        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
       }
     }, [dataSourceUrl, reloadData]);
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.6523249552",
+  "version": "13.0.0-alpha.6651373134",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid typescript build for now"
   },
   "publishConfig": {
@@ -29,15 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.6523249552",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6523249552",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6523249552",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6523249552",
+    "@applicaster/applicaster-types": "13.0.0-alpha.6651373134",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.6651373134",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.6651373134",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.6651373134",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",
@@ -46,10 +43,9 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "@types/node": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",

package/tsconfig.json

@@ -2,8 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./lib",
-    "rootDir": "./src"
+    "rootDir": "./"
   },
-  "exclude": ["src/**/*.test.tsx"],
-  "include": ["src/**/*"]
+  "include": ["**/*"],
 }

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": ["react-native", "flow", "react-native-stage-0/decorator-support"],
-  "env": {
-    "test": {
-      "presets": [["env", { "modules": "commonjs" }], "react-native", "flow"]
-    }
-  }
-}

package/Components/Cell/CellStyles/FallbackCellStyle/index.js

@@ -1,157 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 384,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 384,
-  height: 216,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 336,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const subtitleContainerStyles = {
-  width: 336,
-  height: 88,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const subtitleStyles = (styles) => ({
-  fontSize: 24,
-  fontWeight: "normal",
-  opacity: 0.8,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontStyle: "normal",
-});
-
-const focusedSubtitleStyles = (styles) => ({
-  ...subtitleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-      {
-        type: View,
-        style: subtitleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedSubtitleStyles(styles)
-                : subtitleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["summary"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 3,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const fallbackCellStyle = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-        selected: viewTree("selected", styles),
-        focused_selected: viewTree("focused_selected", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/Hero/index.js

@@ -1,111 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 1280,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 1280,
-  height: 352,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 1184,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const hero = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/ScreenSelector/index.js

@@ -1,68 +0,0 @@
-const viewTree = (state) => [
-  {
-    type: "View",
-    style: {
-      flex: 1,
-      // aspectRatio: 1.0487804878,
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingRight: 30,
-    },
-    elements: [
-      {
-        type: "View",
-
-        elements: [
-          {
-            type: "Text",
-
-            style: {
-              // paddingHorizontal: "15%",
-              paddingTop: "2%",
-              paddingBottom: "2%",
-              fontSize: 26,
-              lineHeight: 32,
-              color:
-                state === "focused" || state === "selected"
-                  ? "rgba(239,239,239,1.0)"
-                  : "rgba(239,239,239,0.61)",
-              fontWeight: "700",
-            },
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-          {
-            type: "View",
-            style: {
-              height: 10,
-              alignItems: "center",
-              justifyContent: "center",
-              borderColor: state === "focused" ? "#FC461B" : "transparent",
-              borderBottomWidth: 6,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const screenSelector = {
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default"),
-        focused: viewTree("focused"),
-        selected: viewTree("selected"),
-      },
-    },
-  },
-};

package/Components/Cell/CellStyles/cellStylesResolver.ts

@@ -1,19 +0,0 @@
-import * as R from "ramda";
-
-import { cellStyles } from "./index";
-
-type Props = {
-  cellStyle: string | null | undefined;
-  componentType: string | null | undefined;
-};
-
-export function cellStylesResolver({ cellStyle, componentType }: Props) {
-  const componentCellStyles =
-    R.prop(componentType, cellStyles) || cellStyles.default;
-
-  const result =
-    R.prop(cellStyle || "fallbackCellStyle", componentCellStyles) ||
-    componentCellStyles.fallbackCellStyle;
-
-  return result;
-}

package/Components/Cell/CellStyles/colors.js

@@ -1,40 +0,0 @@
-import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
-import * as R from "ramda";
-
-export const ACTIVE_COLOR = "ACTIVE_COLOR";
-
-export const BACKGROUND_COLOR = "BACKGROUND_COLOR";
-
-export const MAIN_TEXT_COLOR = "MAIN_TEXT_COLOR";
-
-export const FOCUSED_TEXT_COLOR = "FOCUSED_TEXT_COLOR";
-
-const colorKeyPath = (keyName) => ["tv", keyName, "color"];
-
-const COLORS = {
-  [ACTIVE_COLOR]: {
-    path: colorKeyPath("active"),
-    default: "#FC461B",
-  },
-  [BACKGROUND_COLOR]: {
-    path: colorKeyPath("background"),
-    default: "#2F2F2F",
-  },
-  [MAIN_TEXT_COLOR]: {
-    path: colorKeyPath("main_text"),
-    default: "#EFEFEF",
-  },
-  [FOCUSED_TEXT_COLOR]: {
-    path: colorKeyPath("focused_text_color"),
-    default: "#FFFFFF",
-  },
-};
-
-export const getColor = (name, styles) => {
-  const colorKeyPath = R.path([name, "path"], COLORS);
-
-  return (
-    fixColorHexCode(R.path(colorKeyPath, styles)) ||
-    R.path([name, "default"], COLORS)
-  );
-};