@applicaster/zapp-react-native-ui-components 12.0.5 → 13.0.0-alpha.1035032144

package/README.md

@@ -78,17 +78,6 @@ export default MyAwesomeComponent;
 export { MyAwesomeComponent } from "./MyAwesomeComponent";
 ```
 
-We provide flow types for component props - please use it to make sure your component will be compliant
-
-```javascript
-import * as React from "react";
-import type { ZappComponentProps } from "../../flow-types"; // in the root of the project
-
-export class MyComponent extends React.Component<ZappComponentProps> {
-  /* ... */
-}
-```
-
 ## Connecting my component to Zapp Pipes
 
 Zapp App components rely on [Zapp-Pipes](https://github.com/applicaster/zapp-pipes) to load data.
@@ -100,10 +89,9 @@ In order to connect your component to ZappPipes, you simply need to use the `Zap
 import * as React from "react";
 import { View, Text } from "react-native";
 import { zappPipesDataConnector } from "../ZappPipesDataConnector";
-import type { ZappComponentProps } from "../../flow-types";
 
 @zappPipesDataConnector
-export class MyComponent extends React.Component<ZappComponentProps> {
+export class MyComponent extends React.Component {
   renderComponent = (data) => {
     return (
       <View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.5",
+  "version": "13.0.0-alpha.1035032144",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,20 +34,26 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.5",
-    "@applicaster/zapp-react-native-bridge": "12.0.5",
-    "@applicaster/zapp-react-native-redux": "12.0.5",
-    "@applicaster/zapp-react-native-utils": "12.0.5",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.1035032144",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1035032144",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
+    "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
+    "@types/node": "*",
+    "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
     "react-native-safe-area-context": "*",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   }
 }

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -1,126 +0,0 @@
-/** TODO: Remove this file when tvos FocusableGroup
- * behaviour is aligned to the web one
- * FocusableGroup should only send onFocus and onBlur events when
- * Focus enters and leaves the Focusables inside the branch
- */
-import * as React from "react";
-
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-
-import { isAppleTV } from "../../Helpers/Platform";
-import { useCellState } from "../MasterCell/utils";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
-
-type Props = {
-  item: ZappEntry;
-  CellRenderer: React.FunctionComponent<any>;
-  id: string;
-  groupId: string;
-  onFocus: Function;
-  index: number;
-  scrollTo: Function;
-  preferredFocus?: boolean;
-  skipFocusManagerRegistration?: boolean;
-  isFocusable?: boolean;
-  behavior: Behavior;
-  focused?: boolean;
-};
-
-export function CellWithFocusable(props: Props) {
-  const {
-    index,
-    item,
-    CellRenderer,
-    id,
-    groupId,
-    onFocus,
-    scrollTo = noop,
-    preferredFocus,
-    skipFocusManagerRegistration,
-    isFocusable,
-    behavior,
-    focused,
-  } = props;
-
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
-
-  const state = useCellState({
-    id: item.id,
-    behavior,
-    focused: isFocused || toBooleanWithDefaultFalse(focused),
-  });
-
-  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
-
-  // for horizontal scrolling
-  React.useEffect(() => {
-    if (focusedButtonId) {
-      scrollTo(index);
-    }
-  }, [focusedButtonId]);
-
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
-
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
-    }
-  };
-
-  return (
-    <CellRenderer
-      item={item}
-      groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
-      preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
-  );
-}

package/Decorators/RiverFeedLoader/utils.ts

@@ -1,100 +0,0 @@
-import * as R from "ramda";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
-import {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import {
-  mapPromises,
-  reducePromises,
-} from "@applicaster/zapp-react-native-utils/arrayUtils";
-
-import {
-  ZappPipesEntryContext,
-  ZappPipesScreenContext,
-  ZappPipesSearchContext,
-} from "../../Contexts";
-
-export const DATASOURCE_CHUNKS = 10;
-
-export async function loadDatasources(urls: string[][], riverId, dispatch) {
-  return reducePromises<string, void>(
-    mapPromises<string, void>((url) => {
-      if (url) {
-        return dispatch(loadPipesData(url, { riverId }));
-      }
-    }),
-    undefined,
-    urls
-  );
-}
-
-export function riverIsCurrentRoute(riverId, route) {
-  const routeRiverId = R.compose(R.last, R.split("/"))(route);
-
-  return typeof riverId === "undefined" || routeRiverId === riverId;
-}
-
-export const ignoreComponentsWithClearCacheFlag = R.reject(
-  R.pathEq(["rules", "clear_cache_on_reload"], true)
-);
-
-export const getDatasourceUrl: (
-  contexts: {
-    screenData?: Record<string, any>;
-    entryContext: ReturnType<
-      typeof ZappPipesEntryContext.useZappPipesContext
-    >[0];
-    searchContext: string;
-    screenContext: ZappRiver;
-  },
-  component?: ZappUIComponent
-) => string | null = R.curry(
-  (
-    { screenData, entryContext, searchContext, screenContext },
-    component: ZappUIComponent
-  ) => {
-    const { source, mapping } = R.propOr({}, ["data"], component);
-
-    if (mapping) {
-      const contexts = {
-        entry: entryContext,
-        screen: screenContext || screenData,
-        search: getSearchContext(searchContext, mapping),
-      };
-
-      return getInflatedDataSourceUrl({ source, mapping, contexts });
-    }
-
-    return source;
-  }
-);
-
-export function usePipesContexts(
-  riverId: string,
-  route: string
-): {
-  entryContext: ReturnType<typeof ZappPipesEntryContext.useZappPipesContext>[0];
-  searchContext: string;
-  screenContext: ZappRiver;
-} {
-  const isNestedScreen = !riverIsCurrentRoute(riverId, route);
-
-  const routeForEntry = isNestedScreen ? `${route}/river/${riverId}` : route;
-
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
-    routeForEntry,
-    isNestedScreen
-  );
-
-  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
-  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
-
-  return {
-    entryContext,
-    searchContext,
-    screenContext,
-  };
-}