@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,92 +1,221 @@
-import React from "react";
-import RN from "react-native";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import * as React from "react";
+import { render, waitFor } from "@testing-library/react-native";
+import { StyleSheet } from "react-native";
 
-const mockUseIsRTL = jest.fn(() => true);
-const mockGetIsRTL = jest.fn(() => true);
-const mockUseLocalizedStrings = jest.fn(() => ({}));
-const mockGetUILanguage = jest.fn(() => "he-HE");
+import Text from "../Text";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
+import { CellFocusedStateContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
+
+const mockAddHeading = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: mockAddHeading,
+    })),
+  })
+);
 
 jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
-  useIsRTL: mockUseIsRTL,
-  getIsRTL: mockGetIsRTL,
-  useLocalizedStrings: mockUseLocalizedStrings,
-  getUILanguage: mockGetUILanguage,
+  useIsRTL: jest.fn(() => false),
 }));
 
-const CustomText = require("../Text").default;
-
-const defaultProps = {
-  entry: {},
-  style: {},
-  transformText: "default",
-};
+jest.mock("@applicaster/uikit/lib/components/uikit/text", () => ({
+  Text: ({
+    style,
+    focusedStyle,
+    normalStyles,
+    focusedState,
+    children,
+    ...props
+  }) => {
+    const React = require("react");
+    const { Text } = require("react-native");
+
+    const resolvedStyle = focusedState
+      ? [focusedState === "focused" ? focusedStyle : normalStyles, style]
+      : style;
+
+    return (
+      <Text {...props} allowFontScaling={false} style={resolvedStyle}>
+        {children}
+      </Text>
+    );
+  },
+}));
 
-const getRenderedText = (label: string, storeConfig: any) => {
-  const props = { ...{ ...defaultProps, label } };
+const renderText = ({
+  props = {},
+  measurementValue = null,
+  cellFocused = false,
+}: {
+  props?: Partial<React.ComponentProps<typeof Text>>;
+  measurementValue?: React.ContextType<typeof MeasurementPortalContext>;
+  cellFocused?: boolean;
+} = {}) => {
+  const defaultProps = {
+    label: "Hero title",
+    style: {
+      color: "navy",
+      fontSize: 18,
+      lineHeight: 24,
+    },
+  };
 
-  const { UNSAFE_getByType } = renderWithProviders(
-    <CustomText {...props} />,
-    storeConfig
+  return render(
+    <MeasurementPortalContext.Provider value={measurementValue}>
+      <CellFocusedStateContext.Provider value={cellFocused}>
+        <Text {...defaultProps} {...props} />
+      </CellFocusedStateContext.Provider>
+    </MeasurementPortalContext.Provider>
   );
-
-  return UNSAFE_getByType(RN.Text).props.children;
 };
 
-describe("RTL app: Hebrew text contains english word", () => {
-  const textWithFirstEnglishWord = "Word השיר של נועה נועה קירל באירוויזיון";
-  const textWithNotFirstEnglishWord = "השיר של נועה נועה קירל באירוויזיון Word";
-  const textWithoutEnglishWord = "השיר של נועה נועה קירל באירוויזיון";
-
-  const storeConfig = {
-    remoteConfigurations: { localizations: { he: {} } },
-    appData: {
-      languageCode: "he",
-      countryCode: "IL",
-    },
-  };
-
-  it("Hebrew text contains first english word", () => {
-    const renderedText = getRenderedText(textWithFirstEnglishWord, storeConfig);
-    const desiredText = "\u200fWord\u202c השיר של נועה נועה קירל באירוויזיון";
+describe("MasterCell Text", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-    expect(renderedText).toEqual(desiredText);
+  it("renders the resolved text content with the explicit UI props preserved", () => {
+    const { getByText } = renderText({
+      props: {
+        transformText: "uppercase",
+        numberOfLines: 2,
+        ellipsizeMode: "tail",
+        testID: "mastercell-text",
+        accessibilityLabel: "MasterCell title",
+        accessibilityHint: "Opens details",
+        nativeID: "text-native-id",
+        selectable: true,
+      },
+    });
+
+    const text = getByText("HERO TITLE");
+
+    expect(text.props.numberOfLines).toBe(2);
+    expect(text.props.ellipsizeMode).toBe("tail");
+    expect(text.props.testID).toBe("mastercell-text");
+    expect(text.props.accessibilityLabel).toBe("MasterCell title");
+    expect(text.props.accessibilityHint).toBe("Opens details");
+    expect(text.props.nativeID).toBe("text-native-id");
+    expect(text.props.selectable).toBe(true);
+    expect(text.props.allowFontScaling).toBe(false);
   });
 
-  it("Hebrew text contains not first english word", () => {
-    const renderedText = getRenderedText(
-      textWithNotFirstEnglishWord,
-      storeConfig
+  it("applies the focused visual styles to the rendered text node", () => {
+    const { getByText } = renderText({
+      props: {
+        state: "focused",
+        focusedStyles: {
+          color: "gold",
+          fontWeight: "700",
+        },
+      },
+    });
+
+    const text = getByText("Hero title");
+    const flattenedStyle = StyleSheet.flatten(text.props.style);
+
+    expect(flattenedStyle).toEqual(
+      expect.objectContaining({
+        color: "gold",
+        fontWeight: "700",
+        fontSize: 18,
+      })
     );
+  });
 
-    expect(renderedText).toEqual(textWithNotFirstEnglishWord);
+  it("applies the normal visual styles when the text is not focused", () => {
+    const { getByText } = renderText({
+      props: {
+        state: "default",
+        normalStyles: {
+          color: "gray",
+          opacity: 0.7,
+        },
+      },
+    });
+
+    const text = getByText("Hero title");
+    const flattenedStyle = StyleSheet.flatten(text.props.style);
+
+    expect(flattenedStyle).toEqual(
+      expect.objectContaining({
+        color: "gray",
+        opacity: 0.7,
+        fontSize: 18,
+      })
+    );
   });
 
-  it("Hebrew text doesn't contain english word", () => {
-    const renderedText = getRenderedText(textWithoutEnglishWord, storeConfig);
-    expect(renderedText).toEqual(textWithoutEnglishWord);
+  it("adds a capped height during measurement when lineHeight and numberOfLines are available", () => {
+    const { getByText } = renderText({
+      measurementValue: { measuringInProgress: true } as any,
+      props: {
+        numberOfLines: 3,
+      },
+    });
+
+    const text = getByText("Hero title");
+    const flattenedStyle = StyleSheet.flatten(text.props.style);
+
+    expect(flattenedStyle.height).toBe(72);
   });
-});
 
-describe("LTR app: English text", () => {
-  beforeAll(() => {
-    mockUseIsRTL.mockReturnValue(false);
-    mockGetIsRTL.mockReturnValue(false);
-    mockGetUILanguage.mockReturnValue("en-US");
+  it("returns null when the resolved label is empty", () => {
+    const wrapper = renderText({
+      props: {
+        label: "",
+      },
+    });
+
+    expect(wrapper.toJSON()).toBeNull();
   });
 
-  const englishText = "Test sentence";
+  it("announces the heading for a focused text label", async () => {
+    renderText({
+      cellFocused: true,
+      props: {
+        state: "focused",
+      },
+    });
+
+    await waitFor(() => {
+      expect(mockAddHeading).toHaveBeenCalledWith("Hero title");
+    });
+  });
 
-  const storeConfig = {
-    remoteConfigurations: { localizations: { en: {} } },
-    appData: {
-      languageCode: "en",
-      countryCode: "US",
-    },
-  };
+  it("announces the selected heading for a focused selected text label", async () => {
+    renderText({
+      cellFocused: true,
+      props: {
+        state: "focused_selected",
+      },
+    });
+
+    await waitFor(() => {
+      expect(mockAddHeading).toHaveBeenCalledWith("Hero title, Selected");
+    });
+  });
 
-  it("English text", () => {
-    const renderedText = getRenderedText(englishText, storeConfig);
-    expect(renderedText).toEqual(englishText);
+  it("does not leak internal control props onto the rendered text node", () => {
+    const { getByText } = renderText({
+      props: {
+        state: "focused",
+        focusedStyles: {
+          color: "gold",
+        },
+        normalStyles: {
+          color: "gray",
+        },
+      },
+    });
+
+    const text = getByText("Hero title");
+
+    expect(text.props.state).toBeUndefined();
+    expect(text.props.focusedStyles).toBeUndefined();
+    expect(text.props.normalStyles).toBeUndefined();
   });
 });

package/Components/MasterCell/DefaultComponents/index.ts

@@ -6,26 +6,33 @@ import PureImage from "./Image";
 import { CollapsibleTextContainer } from "../SharedUI/CollapsibleTextContainer/CollapsibleTextContainer";
 import { Toggle } from "./Toggle";
 import { Button } from "./Button";
-import { FocusableView } from "./FocusableView";
 import ProgressBar from "../SharedUI/ProgressBar/ProgressBar";
 import { LiveImage } from "./LiveImage";
 import { DynamicBadge } from "./DynamicBadge";
 import { SecondaryImage } from "./SecondaryImage/Image";
 import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
+import { DataProvider } from "./DataProvider";
 import { TvActionButtons } from "./tv/TvActionButtons";
-import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { TvActionButton } from "./tv/TvActionButtons/TvActionButton";
+import { ButtonContainerView } from "./ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
+import { ActionButton as MobileActionButton } from "./mobile/MobileActionButtons/ActionButton";
+
+// UIKIT adapters
+import { UIKitBadge } from "./UIKitAdapters/Badge";
 
 export const defaultComponents = {
+  UIKitBadge,
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,
-  FocusableView,
   ProgressBar,
   Toggle,
   LiveImage,
@@ -34,5 +41,8 @@ export const defaultComponents = {
   DynamicBadge,
   SecondaryImage,
   TvActionButtons,
+  TvActionButton,
+  MobileActionButton,
   CellBadge,
+  DataProvider,
 };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -0,0 +1,189 @@
+import React, { useCallback } from "react";
+import { PressableView } from "../../PressableView";
+import { usePressedState } from "../../../hooks";
+
+import { ActionButtonController } from "../../ActionButtonsCore/components";
+
+import { masterCellLogger } from "../../../logger";
+import { resolveLabelText, selectByAssetFlavour } from "./utils";
+
+type ChildElementProps = {
+  children?: React.ReactNode;
+  mobileActionRole?: "asset" | "label" | "label_container";
+  uri?: string;
+  asset?: React.ReactNode;
+  state?: "default" | "focused";
+  entry?: any;
+};
+
+const isValidElement = (
+  child: React.ReactNode
+): child is React.ReactElement<ChildElementProps> =>
+  React.isValidElement(child);
+
+type ActionButtonContentProps = {
+  style: any;
+  children: React.ReactNode;
+  action: any;
+  focusedStyles: any;
+  entry: any;
+  props: Record<string, any>;
+  actionContext: any;
+  actionState: any;
+  isActive: boolean;
+  onPress: () => any;
+};
+
+const ActionButtonContent = ({
+  children,
+  action,
+  entry,
+  actionContext,
+  actionState,
+  isActive,
+}: ActionButtonContentProps) => {
+  const isPressed = usePressedState();
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState ? actionState?.mobileButtonAssets : false
+  );
+
+  const shouldRenderLabel = Boolean(
+    supportsEntryState && resolveLabelText(actionState?.label)
+  );
+
+  const _cloneChildrenWithState = useCallback(
+    (nodes?: React.ReactNode): React.ReactNode => {
+      return React.Children.map(nodes, (child) => {
+        if (!isValidElement(child)) {
+          return child;
+        }
+
+        const role = child.props.mobileActionRole;
+
+        const nextChildren = _cloneChildrenWithState(child.props.children);
+
+        // Prevents of the asset rendering when the action doesn't provide asset for current entry state
+        if (role === "asset" && !shouldRenderAsset) {
+          return null;
+        }
+
+        // Prevents of the label rendering when the action doesn't provide label for current entry state.
+        // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
+        if (role === "label" && !shouldRenderLabel) {
+          return null;
+        }
+
+        // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
+        if (
+          role === "label_container" &&
+          React.Children.count(nextChildren) === 0
+        ) {
+          return null;
+        }
+
+        const nextProps: Partial<ChildElementProps> = {};
+
+        // Inject asset or uri to Asset component with role asset
+        if (role === "asset") {
+          const resolvedAsset = selectByAssetFlavour(
+            actionState,
+            action.flavour,
+            isActive
+          );
+
+          if (typeof resolvedAsset === "function") {
+            const AssetComponent = resolvedAsset as CellActionAssetComponent;
+
+            nextProps.asset = (
+              <AssetComponent
+                flavour={action.flavour || "flavour_1"}
+                width={action.width}
+                height={action.height}
+              />
+            );
+          } else {
+            nextProps.uri = resolvedAsset;
+          }
+        }
+
+        // Inject state and entry to Text component with role label
+        // Use isPressed state for mobile buttons to set focused state on mobile
+        if (role === "label") {
+          nextProps.state = isActive || isPressed ? "focused" : "default";
+          nextProps.entry = entry;
+        }
+
+        if (nextChildren !== child.props.children) {
+          nextProps.children = nextChildren;
+        }
+
+        return React.cloneElement(child, nextProps);
+      });
+    },
+    [
+      shouldRenderAsset,
+      shouldRenderLabel,
+      actionState,
+      action.flavour,
+      action.width,
+      action.height,
+      isActive,
+      isPressed,
+      entry,
+    ]
+  );
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return _cloneChildrenWithState(children);
+};
+
+export const ActionButton = ({
+  style,
+  children,
+  action,
+  focusedStyles,
+  entry,
+  ...props
+}) => {
+  return (
+    <ActionButtonController
+      action={action}
+      entry={entry}
+      onMissingActionContext={(identifier) => {
+        masterCellLogger.warning(
+          `You're missing an action plugin(${identifier || action?.identifier}) required by your mobile action button.`
+        );
+      }}
+    >
+      {(renderProps) => (
+        <PressableView
+          testOnly_pressed={props.testOnly_pressed}
+          testID={props.testID || `${entry?.id}`}
+          style={style}
+          pressedStyle={focusedStyles}
+          onPress={renderProps.onPress}
+          accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
+          accessibilityHint={props.accessibilityHint}
+        >
+          <ActionButtonContent
+            style={style}
+            action={action}
+            focusedStyles={focusedStyles}
+            entry={entry}
+            props={props}
+            {...renderProps}
+          >
+            {children}
+          </ActionButtonContent>
+        </PressableView>
+      )}
+    </ActionButtonController>
+  );
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -0,0 +1,33 @@
+import { AssetComponent } from "./AssetComponent";
+
+type Props = {
+  testID?: string;
+  style?: Record<string, unknown>;
+};
+
+type AssetNode = {
+  type: "ReactComponent";
+  style?: Record<string, unknown>;
+  additionalProps: {
+    component: typeof AssetComponent;
+    requiresCellUUID: true;
+    renderChildren: false;
+    mobileActionRole: "asset";
+    testID?: string;
+  };
+};
+
+/** Asset used in conjunction with ActionButton inside mobile action buttons, uri is provided by ActionButton  */
+export const Asset = ({ testID, style }: Props): AssetNode => {
+  return {
+    type: "ReactComponent",
+    style,
+    additionalProps: {
+      component: AssetComponent,
+      requiresCellUUID: true,
+      renderChildren: false,
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/AssetComponent.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { ImageContainer } from "../../ImageContainer";
+
+type Props = {
+  style?: Record<string, unknown>;
+  uri?: string;
+  asset?: React.ReactNode;
+  testID?: string;
+  cellUUID?: string;
+};
+
+const styles = StyleSheet.create({
+  assetContainer: {
+    flexShrink: 0,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export const AssetComponent = (props: Props & Record<string, unknown>) => {
+  return props.asset && React.isValidElement(props.asset) ? (
+    <View style={[styles.assetContainer, props.style]} testID={props.testID}>
+      {React.cloneElement(props.asset, { cellUUID: props.cellUUID })}
+    </View>
+  ) : (
+    <ImageContainer
+      style={[styles.assetContainer, props.style]}
+      {...(props as any)}
+      uri={props.uri}
+    />
+  );
+};