@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1690332913 → 15.0.0-alpha.1693300296

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/model.test.ts

@@ -0,0 +1,80 @@
+import { buildActionButtonsModel } from "../model";
+
+describe("buildActionButtonsModel", () => {
+  it("returns null when the container is disabled", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: false,
+      mobile_button_1_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toBeNull();
+  });
+
+  it("returns explicit enabled slots and semantic container data", () => {
+    const configuration = {
+      mobile_buttons_container_buttons_enabled: true,
+      mobile_buttons_container_align: "right",
+      mobile_buttons_container_margin_top: 1,
+      mobile_buttons_container_margin_right: 2,
+      mobile_buttons_container_margin_bottom: 3,
+      mobile_buttons_container_margin_left: 4,
+      mobile_buttons_container_stacking: "vertical",
+      mobile_buttons_container_horizontal_gutter: 8,
+      mobile_buttons_container_vertical_gutter: 12,
+      mobile_buttons_container_independent_styles: false,
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(
+      buildActionButtonsModel({
+        configuration,
+        value,
+        containerPrefix: "mobile_buttons_container",
+        buttonPrefix: "mobile_button",
+      })
+    ).toEqual({
+      enabledSlots: [1, 3],
+      buttonsCount: 2,
+      container: {
+        horizontalAlign: "flex-end",
+        margins: {
+          top: 1,
+          right: 2,
+          bottom: 3,
+          left: 4,
+        },
+        stacking: "vertical",
+        horizontalGutter: 8,
+        verticalGutter: 12,
+        independentStyles: false,
+      },
+      buttons: [
+        {
+          slot: 1,
+          renderIndex: 0,
+          specificPrefix: "mobile_button_1",
+          stylePrefix: "mobile_button_1",
+        },
+        {
+          slot: 3,
+          renderIndex: 1,
+          specificPrefix: "mobile_button_3",
+          stylePrefix: "mobile_button_1",
+        },
+      ],
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/placement.test.ts

@@ -0,0 +1,187 @@
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../placement";
+
+describe("ActionButtonsCore placement", () => {
+  const buttons = { type: "View", name: "buttons" };
+
+  const above_labels = [
+    { name: "above_label_1" },
+    { name: "above_label_2" },
+    { name: "above_label_3" },
+  ];
+
+  const below_labels = [
+    { name: "below_label_1" },
+    { name: "below_label_2" },
+    { name: "below_label_3" },
+  ];
+
+  it("inserts buttons after the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
+    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+  });
+
+  it("inserts buttons before the matching label", () => {
+    expect(
+      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
+    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+  });
+
+  it("prepends buttons only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        below_labels
+      )
+    ).toEqual([buttons, ...below_labels]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "on_top", allowOnTop: false },
+        buttons,
+        below_labels
+      )
+    ).toEqual(below_labels);
+  });
+
+  it("appends buttons when appendWhenMissing is enabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        below_labels
+      )
+    ).toEqual([...below_labels, buttons]);
+  });
+
+  it("returns labels unchanged when appendWhenMissing is disabled", () => {
+    expect(
+      insertBetweenLabels(
+        { position: "unknown", appendWhenMissing: false },
+        buttons,
+        below_labels
+      )
+    ).toEqual(below_labels);
+  });
+
+  const labelContainers = [
+    {
+      elements: [
+        {
+          elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+        },
+      ],
+    },
+    {
+      elements: [
+        {
+          elements: [{ name: "bottom_label_1" }],
+        },
+      ],
+    },
+  ];
+
+  it("inserts buttons after the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              { name: "top_label_2" },
+              buttons,
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("inserts buttons before the matching label in a nested container", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "above_top_label_2" },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [
+          {
+            elements: [
+              { name: "top_label_1" },
+              buttons,
+              { name: "top_label_2" },
+            ],
+          },
+        ],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("prepends buttons into the first container only when on_top is allowed", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "on_top", allowOnTop: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      {
+        elements: [buttons, ...labelContainers[0].elements],
+      },
+      labelContainers[1],
+    ]);
+  });
+
+  it("appends buttons into the last container when configured", () => {
+    expect(
+      insertBetweenLabelContainers(
+        { position: "unknown", appendWhenMissing: true },
+        buttons,
+        labelContainers
+      )
+    ).toEqual([
+      labelContainers[0],
+      {
+        elements: [...labelContainers[1].elements, buttons],
+      },
+    ]);
+  });
+
+  it("inserts buttons after a matching label in a direct two-level container", () => {
+    const directLabelContainers = [
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }],
+      },
+      {
+        elements: [{ name: "bottom_label_1" }],
+      },
+    ];
+
+    expect(
+      insertBetweenLabelContainers(
+        { position: "below_top_label_2" },
+        buttons,
+        directLabelContainers
+      )
+    ).toEqual([
+      {
+        elements: [{ name: "top_label_1" }, { name: "top_label_2" }, buttons],
+      },
+      directLabelContainers[1],
+    ]);
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/selectors.test.ts

@@ -0,0 +1,45 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "../selectors";
+
+describe("ActionButtonsCore selectors", () => {
+  it("returns explicit enabled button slots without collapsing sparse slots", () => {
+    const configuration = {
+      mobile_button_1_button_enabled: true,
+      mobile_button_2_button_enabled: false,
+      mobile_button_3_button_enabled: true,
+    };
+
+    expect(getEnabledButtonSlots(configuration, "mobile_button")).toEqual([
+      1, 3,
+    ]);
+  });
+
+  it("returns slot-based prefixes", () => {
+    expect(getButtonSlotPrefix("tv_buttons_button", 3)).toBe(
+      "tv_buttons_button_3"
+    );
+  });
+
+  it("reuses button 1 styles when independent styles are disabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: false,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_1");
+  });
+
+  it("uses the explicit slot prefix when independent styles are enabled", () => {
+    expect(
+      getStylePrefix({
+        slot: 3,
+        independentStyles: true,
+        buttonPrefix: "mobile_button",
+      })
+    ).toBe("mobile_button_3");
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/style.test.ts

@@ -0,0 +1,49 @@
+import { buildContainerLayout, getContainerMargins } from "../style";
+
+describe("ActionButtonsCore style helpers", () => {
+  it("returns numeric margins with zero defaults", () => {
+    const configuration = {
+      mobile_buttons_container_margin_top: "4",
+      mobile_buttons_container_margin_left: 6,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(getContainerMargins(value, "mobile_buttons_container")).toEqual({
+      top: 4,
+      right: 0,
+      bottom: 0,
+      left: 6,
+    });
+  });
+
+  it("returns semantic layout data using shared alignment mapping", () => {
+    const configuration = {
+      tv_buttons_container_align: "middle",
+      tv_buttons_container_margin_top: 1,
+      tv_buttons_container_margin_right: 2,
+      tv_buttons_container_margin_bottom: 3,
+      tv_buttons_container_margin_left: 4,
+      tv_buttons_container_stacking: "vertical",
+      tv_buttons_container_horizontal_gutter: 8,
+      tv_buttons_container_vertical_gutter: 12,
+      tv_buttons_container_independent_styles: true,
+    };
+
+    const value = (key) => configuration[key];
+
+    expect(buildContainerLayout(value, "tv_buttons_container")).toEqual({
+      horizontalAlign: "center",
+      margins: {
+        top: 1,
+        right: 2,
+        bottom: 3,
+        left: 4,
+      },
+      stacking: "vertical",
+      horizontalGutter: 8,
+      verticalGutter: 12,
+      independentStyles: true,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/model.ts

@@ -0,0 +1,47 @@
+import {
+  getButtonSlotPrefix,
+  getEnabledButtonSlots,
+  getStylePrefix,
+} from "./selectors";
+import { buildContainerLayout } from "./style";
+import { ActionButtonsModel, BuildActionButtonsModelOptions } from "./types";
+
+export const buildActionButtonsModel = ({
+  configuration,
+  value,
+  containerPrefix,
+  buttonPrefix,
+  maxButtons = 3,
+}: BuildActionButtonsModelOptions): ActionButtonsModel | null => {
+  if (!value(`${containerPrefix}_buttons_enabled`)) {
+    return null;
+  }
+
+  const enabledSlots = getEnabledButtonSlots(
+    configuration,
+    buttonPrefix,
+    maxButtons
+  );
+
+  if (enabledSlots.length === 0) {
+    return null;
+  }
+
+  const container = buildContainerLayout(value, containerPrefix);
+
+  return {
+    enabledSlots,
+    buttonsCount: enabledSlots.length,
+    container,
+    buttons: enabledSlots.map((slot, renderIndex) => ({
+      slot,
+      renderIndex,
+      specificPrefix: getButtonSlotPrefix(buttonPrefix, slot),
+      stylePrefix: getStylePrefix({
+        slot,
+        independentStyles: container.independentStyles,
+        buttonPrefix,
+      }),
+    })),
+  };
+};

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -0,0 +1,170 @@
+type Label = {
+  name?: string;
+  elements?: Array<Label | unknown>;
+};
+
+type LabelContainer = {
+  elements?: Array<Label | unknown>;
+};
+
+type LabelExtraContainer = {
+  elements?: Array<LabelContainer | unknown>;
+};
+
+type InsertOptions = {
+  position?: string;
+  allowOnTop?: boolean;
+  appendWhenMissing?: boolean;
+};
+
+const hasLabelName = (value: unknown): value is Label =>
+  !!value &&
+  typeof value === "object" &&
+  typeof (value as Label).name === "string" &&
+  (value as Label).name !== "";
+
+const withButtons = (
+  labelName: string | undefined,
+  buttons: unknown,
+  labels: Label[]
+) =>
+  labels.reduce<Array<Label | unknown>>((acc, label) => {
+    if (!!label?.name && labelName?.includes(label.name)) {
+      // handle above_*
+      if (labelName?.startsWith("above_")) {
+        return [...acc, buttons, label];
+      }
+
+      // handle below_* or plain exact match (default: insert after (covers below_* AND plain names))
+      return [...acc, label, buttons];
+    }
+
+    return [...acc, label];
+  }, []);
+
+const withButtonsInNestedViews = (
+  labelName: string | undefined,
+  buttons: unknown,
+  views: Array<LabelContainer | unknown>
+) => {
+  const hasDirectLabels = views.some((view) => hasLabelName(view));
+
+  if (hasDirectLabels) {
+    return withButtons(labelName, buttons, views as Label[]);
+  }
+
+  return views.map((view) => {
+    if (
+      !view ||
+      typeof view !== "object" ||
+      !Array.isArray((view as LabelContainer).elements)
+    ) {
+      return view;
+    }
+
+    return {
+      ...(view as LabelContainer),
+      elements: withButtons(
+        labelName,
+        buttons,
+        (view as LabelContainer).elements || []
+      ),
+    };
+  });
+};
+
+const containsNestedLabel = (
+  labelName: string | undefined,
+  labelContainers: LabelExtraContainer[]
+) =>
+  labelContainers.some((labelContainer) =>
+    (labelContainer.elements || []).some((view) => {
+      if (hasLabelName(view)) {
+        return labelName?.includes(view.name) ?? false;
+      }
+
+      if (
+        !view ||
+        typeof view !== "object" ||
+        !Array.isArray((view as LabelContainer).elements)
+      ) {
+        return false;
+      }
+
+      return ((view as LabelContainer).elements || []).some((label) =>
+        hasLabelName(label) ? (labelName?.includes(label.name) ?? false) : false
+      );
+    })
+  );
+
+export const insertBetweenLabels = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labels: Label[] = []
+) => {
+  if (buttons == null) {
+    return labels;
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return [buttons, ...labels];
+  }
+
+  const labelsWithButtons = withButtons(position, buttons, labels);
+  const inserted = labelsWithButtons.length !== labels.length;
+
+  if (!inserted && appendWhenMissing) {
+    return [...labels, buttons];
+  }
+
+  return inserted ? labelsWithButtons : [...labels];
+};
+
+export const insertBetweenLabelContainers = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labelContainers: LabelExtraContainer[] = []
+) => {
+  if (buttons == null) {
+    return labelContainers;
+  }
+
+  if (labelContainers.length === 0) {
+    return [buttons];
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return labelContainers.map((labelContainer, index) =>
+      index === 0
+        ? {
+            ...labelContainer,
+            elements: [buttons, ...(labelContainer.elements || [])],
+          }
+        : labelContainer
+    );
+  }
+
+  const hasMatchingLabel = containsNestedLabel(position, labelContainers);
+
+  const labelContainersWithButtons = labelContainers.map((labelContainer) => ({
+    ...labelContainer,
+    elements: withButtonsInNestedViews(
+      position,
+      buttons,
+      labelContainer.elements || []
+    ),
+  }));
+
+  if (!hasMatchingLabel && appendWhenMissing) {
+    return labelContainers.map((labelContainer, index) =>
+      index === labelContainers.length - 1
+        ? {
+            ...labelContainer,
+            elements: [...(labelContainer.elements || []), buttons],
+          }
+        : labelContainer
+    );
+  }
+
+  return hasMatchingLabel ? labelContainersWithButtons : labelContainers;
+};

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/selectors.ts

@@ -0,0 +1,26 @@
+export const getButtonSlotPrefix = (buttonPrefix: string, slot: number) =>
+  `${buttonPrefix}_${slot}`;
+
+export const getEnabledButtonSlots = (
+  configuration: Record<string, unknown>,
+  buttonPrefix: string,
+  maxButtons = 3
+): number[] =>
+  Array.from({ length: maxButtons }, (_, index) => index + 1).filter((slot) =>
+    Boolean(
+      configuration[`${getButtonSlotPrefix(buttonPrefix, slot)}_button_enabled`]
+    )
+  );
+
+export const getStylePrefix = ({
+  slot,
+  independentStyles,
+  buttonPrefix,
+}: {
+  slot: number;
+  independentStyles: boolean;
+  buttonPrefix: string;
+}) =>
+  independentStyles
+    ? getButtonSlotPrefix(buttonPrefix, slot)
+    : getButtonSlotPrefix(buttonPrefix, 1);

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/style.ts

@@ -0,0 +1,29 @@
+import { mapSelfAlignment } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { ActionButtonsContainerLayout } from "./types";
+
+export const getContainerMargins = (
+  value: (key: string) => unknown,
+  prefix: string
+) => ({
+  top: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+  right: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+  bottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+  left: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+});
+
+export const buildContainerLayout = (
+  value: (key: string) => unknown,
+  prefix: string
+): ActionButtonsContainerLayout => ({
+  horizontalAlign: mapSelfAlignment(value(`${prefix}_align`)),
+  margins: getContainerMargins(value, prefix),
+  stacking:
+    value(`${prefix}_stacking`) === "vertical" ? "vertical" : "horizontal",
+  horizontalGutter: toNumberWithDefaultZero(
+    value(`${prefix}_horizontal_gutter`)
+  ),
+  verticalGutter: toNumberWithDefaultZero(value(`${prefix}_vertical_gutter`)),
+  independentStyles: Boolean(value(`${prefix}_independent_styles`)),
+});

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/types.ts

@@ -0,0 +1,37 @@
+export type ActionButtonSlot = number;
+
+export type ActionButtonDescriptor = {
+  slot: ActionButtonSlot;
+  renderIndex: number;
+  specificPrefix: string;
+  stylePrefix: string;
+};
+
+export type ActionButtonsContainerLayout = {
+  horizontalAlign: string;
+  margins: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  stacking: "horizontal" | "vertical";
+  horizontalGutter: number;
+  verticalGutter: number;
+  independentStyles: boolean;
+};
+
+export type ActionButtonsModel = {
+  enabledSlots: ActionButtonSlot[];
+  buttonsCount: number;
+  container: ActionButtonsContainerLayout;
+  buttons: ActionButtonDescriptor[];
+};
+
+export type BuildActionButtonsModelOptions = {
+  configuration: Record<string, unknown>;
+  value: (key: string) => unknown;
+  containerPrefix: string;
+  buttonPrefix: string;
+  maxButtons?: number;
+};

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { TouchableOpacity } from "react-native";
-// import { SvgUri } from "react-native-svg";
 
 import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -35,20 +34,6 @@ type Props = {
   cellUUID?: string;
 };
 
-// function Svg({
-//   uri,
-//   style,
-//   ...props
-// }: {
-//   uri: {},
-//   style: { width: Number, height: number },
-// }) {
-//   const width = style?.width;
-//   const height = style?.height;
-
-//   return <SvgUri width={width} height={height} uri={uri} />;
-// }
-
 const components = {
   Image,
 };