@applicaster/zapp-react-native-utils 13.0.0-alpha.1102149799 → 13.0.0-alpha.1338463240

package/manifestUtils/sharedConfiguration/screenPicker/__tests__/utils.test.js

@@ -0,0 +1,304 @@
+// @ts-nocheck
+import utils from "../utils";
+
+describe("generateFontConfiguration", () => {
+  it("should generate default configuration for tvos", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "tvOS font Size",
+        key: "tvos_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "tvOS line Height",
+        key: "tvos_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "tvOS letter Spacing",
+        key: "tvos_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      tvos: "tvOS",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for android_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "Android TV font Size",
+        key: "android_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "Android TV line Height",
+        key: "android_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "Android TV letter Spacing",
+        key: "android_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      android_tv: "Android TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for lg_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "LG TV font Size",
+        key: "lg_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "LG TV line Height",
+        key: "lg_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "LG TV letter Spacing",
+        key: "lg_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      lg_tv: "LG TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+
+  it("should generate default configuration for samsung_tv", () => {
+    const expected = [
+      {
+        initial_value: 20,
+        label: "Samsung TV font Size",
+        key: "samsung_tv_font_size",
+        type: "number_input",
+      },
+      {
+        initial_value: 40,
+        label: "Samsung TV line Height",
+        key: "samsung_tv_line_height",
+        type: "number_input",
+      },
+      {
+        initial_value: 0.4,
+        label: "Samsung TV letter Spacing",
+        key: "samsung_tv_letter_spacing",
+        type: "number_input",
+      },
+    ];
+
+    const platforms = {
+      samsung_tv: "Samsung TV",
+    };
+
+    const generatedFontConfiguration =
+      utils.generateFontConfiguration(platforms);
+
+    expect(generatedFontConfiguration).toEqual(expected);
+  });
+});
+
+test("conditional_rule helper should return correct object", () => {
+  expect(utils.conditional_rule("a", "b")).toMatchObject({
+    key: "a",
+    condition_value: "b",
+  });
+});
+
+test("createConditionalConfig helper should return correct object", () => {
+  expect(
+    utils.createConditionalConfig([
+      ["a", "b"],
+      ["c", "d"],
+    ])
+  ).toEqual({
+    rules: "conditional",
+    conditional_fields: [
+      {
+        key: "a",
+        condition_value: "b",
+      },
+      {
+        key: "c",
+        condition_value: "d",
+      },
+    ],
+  });
+});
+
+test("conditional_horizontal_type should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+});
+
+test("conditional_vertical_type should contain correct parameters", () => {
+  expect(utils.conditional_vertical_type.conditional_fields[0]).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "vertical",
+  });
+});
+
+test("conditional_horizontal_type_item_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_type_item_fixed.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_item_size",
+    condition_value: "fixed",
+  });
+});
+
+test("conditional_horizontal_display_type_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_display_type_fixed.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_display_type_fixed.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_horizontal_display_type",
+    condition_value: "fixed",
+  });
+});
+
+test("conditional_horizontal_display_type_fixed should contain correct parameters", () => {
+  expect(
+    utils.conditional_horizontal_asset_on.conditional_fields[0]
+  ).toMatchObject({
+    key: "styles/screen_picker_type",
+    condition_value: "horizontal",
+  });
+
+  expect(
+    utils.conditional_horizontal_asset_on.conditional_fields[1]
+  ).toMatchObject({
+    key: "styles/screen_picker_asset_switch",
+    condition_value: true,
+  });
+});
+
+describe("createVariationFields", () => {
+  const defaultInput = {
+    key: "somekey",
+    label: "default somekey label",
+    variants: [
+      {
+        initial_value: "a",
+      },
+      {
+        initial_value: "b",
+        label: "custom label",
+      },
+    ],
+  };
+
+  const config = utils.createVariationFields(defaultInput);
+
+  it("should return array containing object for conditional_vertical_type", () => {
+    expect(config[0].rules).toBe("conditional");
+
+    expect(config[0].conditional_fields).toEqual([
+      {
+        key: "styles/screen_picker_type",
+        condition_value: "vertical",
+      },
+    ]);
+
+    expect(config[0].type).toBe("number_input");
+    expect(config[0].key).toBe("screen_picker_vertical_somekey");
+    expect(config[0].label).toBe("default somekey label");
+    expect(config[0].initial_value).toBe("a");
+  });
+
+  it("should return array containing object for conditional_horizontal_type", () => {
+    expect(config[1].rules).toBe("conditional");
+
+    expect(config[1].conditional_fields).toEqual([
+      {
+        key: "styles/screen_picker_type",
+        condition_value: "horizontal",
+      },
+    ]);
+
+    expect(config[1].type).toBe("number_input");
+    expect(config[1].key).toBe("screen_picker_horizontal_somekey");
+    expect(config[1].label).toBe("custom label");
+    expect(config[1].initial_value).toBe("b");
+  });
+
+  it("should accept custom prefix (empty)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      prefix: "",
+    });
+
+    expect(config[0].key).toBe("vertical_somekey");
+    expect(config[1].key).toBe("horizontal_somekey");
+  });
+
+  it("should accept custom prefix (string)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      prefix: "string",
+    });
+
+    expect(config[0].key).toBe("string_vertical_somekey");
+    expect(config[1].key).toBe("string_horizontal_somekey");
+  });
+
+  it("should accept custom type (string)", () => {
+    const config = utils.createVariationFields({
+      ...defaultInput,
+      type: "text_input",
+    });
+
+    expect(config[0].type).toBe("text_input");
+    expect(config[1].type).toBe("text_input");
+  });
+});

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -0,0 +1,875 @@
+const {
+  fieldsGroup,
+} = require("@applicaster/zapp-react-native-utils/manifestUtils");
+
+const {
+  generateFontConfiguration,
+  createVariationFields,
+  conditional_horizontal_type,
+  conditional_vertical_type,
+  conditional_horizontal_type_item_fixed,
+  conditional_horizontal_type_item_dynamic,
+  conditional_horizontal_asset_on,
+  conditional_horizontal_display_type_fixed,
+} = require("./utils");
+
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+const fontFamily = "Ubuntu-Medium";
+
+const componentConfigurationFields = [
+  {
+    type: "select",
+    key: "screen_picker_type",
+    label: "Screen picker type",
+    initial_value: "vertical",
+    options: [
+      { text: "Vertical", value: "vertical" },
+      { text: "Horizontal (Beta)", value: "horizontal" },
+    ],
+  },
+  {
+    type: "select",
+    key: "screen_picker_horizontal_display_type",
+    label: "Display",
+    initial_value: "fixed",
+    options: [
+      { text: "Fixed", value: "fixed" },
+      { text: "Dynamic", value: "dynamic" },
+    ],
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "select",
+    label: "Alignment for Picker container",
+    key: "screen_picker_items_alignment",
+    initial_value: "left",
+    options: [
+      { text: "Left", value: "left" },
+      { text: "Right", value: "right" },
+      { text: "Center", value: "center" },
+    ],
+    ...conditional_horizontal_type_item_dynamic,
+  },
+  {
+    type: "select",
+    label: "Alignment for Picker container items",
+    key: "screen_picker_horizontal_items_alignment_inner",
+    initial_value: "left",
+    options: [
+      { text: "Left", value: "left" },
+      { text: "Right", value: "right" },
+      { text: "Center", value: "center" },
+    ],
+    ...conditional_horizontal_display_type_fixed,
+  },
+  {
+    type: "number_input",
+    label: "Width",
+    key: "screen_picker_vertical_width",
+    initial_value: 300,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "number_input",
+    label: "Width",
+    key: "screen_picker_horizontal_width",
+    initial_value: 1920,
+    ...conditional_horizontal_display_type_fixed,
+  },
+  ...createVariationFields({
+    label: "X position",
+    key: "x_position",
+    variants: [
+      {
+        initial_value: 124,
+      },
+      {
+        initial_value: 0,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    label: "Y position",
+    key: "y_position",
+    variants: [
+      {
+        initial_value: 200,
+      },
+      {
+        initial_value: 200,
+      },
+    ],
+  }),
+  {
+    type: "number_input",
+    label: "Padding Top",
+    key: "component_padding_top",
+    initial_value: 0,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Padding Right",
+    key: "component_padding_right",
+    initial_value: 124,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Padding Bottom",
+    key: "component_padding_bottom",
+    initial_value: 0,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Padding Left",
+    key: "component_padding_left",
+    initial_value: 124,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Background color",
+    key: "screen_picker_background_color",
+    initial_value: TRANSPARENT,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "uploader",
+    label: "Background image",
+    key: "screen_picker_background_image",
+    initial_value: null,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Border color",
+    key: "screen_picker_border_color",
+    initial_value: TRANSPARENT,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Border thickness",
+    key: "screen_picker_border_thickness",
+    initial_value: 0,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Corner Radius",
+    key: "screen_picker_corner_radius",
+    initial_value: 0,
+    ...conditional_horizontal_type,
+  },
+  /* Disabled due to blocker issues with Android TV
+    Task: https://applicaster.monday.com/boards/1615228456/pulses/4130776042
+    Discussion: https://applicaster.monday.com/boards/1615228456/pulses/4130775820/posts/2031049491
+   */
+  // ...loopFields
+];
+
+const assetFields = [
+  {
+    type: "switch",
+    key: "screen_picker_asset_switch",
+    label: "Enable",
+    initial_value: false,
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "text_input",
+    key: "screen_picker_asset_key",
+    label: "Default data key",
+    initial_value: "image_base",
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "switch",
+    key: "screen_picker_asset_focused_switch",
+    label: "Enable focused asset",
+    initial_value: false,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "text_input",
+    key: "screen_picker_asset_focused_key",
+    label: "Focused data key",
+    initial_value: "thumb_1",
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "switch",
+    key: "screen_picker_asset_selected_switch",
+    label: "Enable selected asset",
+    initial_value: false,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "text_input",
+    key: "screen_picker_asset_selected_key",
+    label: "Selected data key",
+    initial_value: "thumb_2",
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "switch",
+    key: "screen_picker_asset_selectedfocused_switch",
+    label: "Enable selected & focused asset",
+    initial_value: false,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "text_input",
+    key: "screen_picker_asset_selectedfocused_key",
+    label: "Selected & Focused data key",
+    initial_value: "thumb_3",
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_width",
+    label: "Width",
+    initial_value: 40,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_height",
+    label: "Height",
+    initial_value: 40,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_margin_top",
+    label: "Margin Top",
+    initial_value: 0,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_margin_right",
+    label: "Margin Right",
+    initial_value: 16,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_margin_bottom",
+    label: "Margin Bottom",
+    initial_value: 0,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "number_input",
+    key: "screen_picker_asset_margin_left",
+    label: "Margin Left",
+    initial_value: 0,
+    ...conditional_horizontal_asset_on,
+  },
+  {
+    type: "select",
+    label: "Alignment",
+    key: "screen_picker_asset_alignment",
+    initial_value: "left",
+    options: [
+      { text: "Top", value: "top" },
+      { text: "Right", value: "right" },
+      { text: "Bottom", value: "bottom" },
+      { text: "Left", value: "left" },
+    ],
+    ...conditional_horizontal_asset_on,
+  },
+];
+
+const screenPickerItemsFields = [
+  ...createVariationFields({
+    key: "gutter",
+    variants: [
+      {
+        label: "Vertical gutter",
+        initial_value: 10,
+      },
+      {
+        label: "Horizontal gutter",
+        initial_value: 80,
+      },
+    ],
+  }),
+  {
+    type: "select",
+    label: "Item Size",
+    key: "screen_picker_item_size",
+    initial_value: "dynamic",
+    options: [
+      { text: "Dynamic", value: "dynamic" },
+      { text: "Fixed", value: "fixed" },
+    ],
+    ...conditional_horizontal_type,
+  },
+  {
+    type: "number_input",
+    label: "Item Width",
+    key: "screen_picker_item_width",
+    initial_value: 200,
+    ...conditional_horizontal_type_item_fixed,
+  },
+  {
+    type: "select",
+    label: "Alignment for item content",
+    key: "screen_picker_item_alignment",
+    initial_value: "left",
+    options: [
+      { text: "Left", value: "left" },
+      { text: "Right", value: "right" },
+      { text: "Center", value: "center" },
+    ],
+    ...conditional_horizontal_type_item_fixed,
+  },
+];
+
+const titleFields = [
+  {
+    type: "switch",
+    label: "Enable",
+    key: "title_enable",
+    initial_value: true,
+    ...conditional_horizontal_type,
+  },
+  // font color
+  ...createVariationFields({
+    prefix: "default",
+    type: "color_picker_rgba",
+    label: "Default font color",
+    key: "font_color",
+    variants: [
+      {
+        initial_value: "rgba(239, 239, 239, 0.5)",
+      },
+      {
+        initial_value: "rgba(239, 239, 239, 0.5)",
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "focused",
+    type: "color_picker_rgba",
+    label: "Focused font color",
+    key: "font_color",
+    variants: [
+      {
+        initial_value: "rgba(239, 239, 239, 1)",
+      },
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected",
+    type: "color_picker_rgba",
+    label: "Selected font color",
+    key: "font_color",
+    variants: [
+      {
+        initial_value: "rgba(239, 239, 239, 1)",
+      },
+      {
+        initial_value: "rgba(239, 239, 239, 1)",
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected_focused",
+    type: "color_picker_rgba",
+    label: "Selected & Focused font color",
+    key: "font_color",
+    variants: [
+      {
+        initial_value: "rgba(239, 239, 239, 1)",
+      },
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+    ],
+  }),
+  // fonts
+  {
+    type: "tvos_font_selector",
+    label: "tvOS Font Family",
+    key: "tvos_font_family",
+    initial_value: fontFamily,
+  },
+  {
+    type: "android_font_selector",
+    label: "Android TV Font Family",
+    key: "android_tv_font_family",
+    initial_value: fontFamily,
+  },
+  {
+    type: "lg_tv_font_selector",
+    label: "LG TV Font Family",
+    key: "lg_tv_font_family",
+    initial_value: fontFamily,
+  },
+  {
+    type: "samsung_font_selector",
+    label: "Samsung TV Font Family",
+    key: "samsung_tv_font_family",
+    initial_value: fontFamily,
+  },
+  {
+    type: "vizio_font_selector",
+    label: "Vizio TV Font Family",
+    key: "vizio_font_family",
+    initial_value: fontFamily,
+  },
+  ...generateFontConfiguration(),
+  // text transform
+  {
+    type: "select",
+    label: "Text Transform",
+    key: "text_transform",
+    initial_value: "uppercase",
+    options: ["default", "uppercase", "lowercase", "capitalize"],
+  },
+  // number of lines
+  {
+    type: "number_input",
+    label: "number of lines",
+    key: "number_of_lines",
+    initial_value: 1,
+    ...conditional_vertical_type,
+  },
+];
+
+const itemFields = [
+  // underline color
+  ...createVariationFields({
+    prefix: "default",
+    type: "color_picker_rgba",
+    label: "Default underline color",
+    key: "underline_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "focused",
+    type: "color_picker_rgba",
+    label: "Focused underline color",
+    key: "underline_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected",
+    type: "color_picker_rgba",
+    label: "Selected underline color",
+    key: "underline_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: "rgba(239, 239, 239, 1)",
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected_focused",
+    type: "color_picker_rgba",
+    label: "Selected & Focused underline color",
+    key: "underline_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+    ],
+  }),
+  // underline thickness
+  ...createVariationFields({
+    prefix: "",
+    label: "Underline Thickness",
+    key: "underline_thickness",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 6,
+      },
+    ],
+  }),
+  // underline corner radius
+  ...createVariationFields({
+    prefix: "",
+    label: "Underline corner radius",
+    key: "underline_corner_radius",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 3,
+      },
+    ],
+  }),
+  // text bg color
+  {
+    type: "color_picker_rgba",
+    label: "Default Text Background color",
+    key: "default_text_background_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Focused Text Background color",
+    key: "focused_text_background_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Selected Text Background color",
+    key: "selected_text_background_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Selected & Focused Text Background color",
+    key: "selected_focused_text_background_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  // text item border_thickness
+  {
+    type: "number_input",
+    label: "Text Item border thickness",
+    key: "text_border_thickness",
+    initial_value: 0,
+    ...conditional_vertical_type,
+  },
+  // text item corner radius
+  {
+    type: "number_input",
+    label: "Text Item corner radius",
+    key: "text_corner_radius",
+    initial_value: 0,
+    ...conditional_vertical_type,
+  },
+  // text border color
+  {
+    type: "color_picker_rgba",
+    label: "Default Text border color",
+    key: "default_text_border_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Focused Text border color",
+    key: "focused_text_border_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Selected Text border color",
+    key: "selected_text_border_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "color_picker_rgba",
+    label: "Selected & Focused Text border color",
+    key: "selected_focused_text_border_color",
+    initial_value: TRANSPARENT,
+    ...conditional_vertical_type,
+  },
+  // item margin
+  {
+    type: "number_input",
+    label: "Item Margin top",
+    key: "item_margin_top",
+    initial_value: 0,
+  },
+  {
+    type: "number_input",
+    label: "Item Margin Right",
+    key: "item_margin_right",
+    initial_value: 0,
+  },
+  {
+    type: "number_input",
+    label: "Item Margin Bottom",
+    key: "item_margin_bottom",
+    initial_value: 0,
+  },
+  {
+    type: "number_input",
+    label: "Item Margin Left",
+    key: "item_margin_left",
+    initial_value: 0,
+  },
+  // text item padding
+  {
+    type: "number_input",
+    label: "Text Item Padding Top",
+    key: "item_padding_top",
+    initial_value: 12,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "number_input",
+    label: "Text Item Padding Right",
+    key: "item_padding_right",
+    initial_value: 24,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "number_input",
+    label: "Text Item Padding Bottom",
+    key: "item_padding_bottom",
+    initial_value: 12,
+    ...conditional_vertical_type,
+  },
+  {
+    type: "number_input",
+    label: "Text Item Padding Left",
+    key: "item_padding_left",
+    initial_value: 24,
+    ...conditional_vertical_type,
+  },
+  // text padding
+  ...createVariationFields({
+    prefix: "text",
+    type: "number_input",
+    label: "Text Padding Top",
+    key: "padding_top",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 12,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "text",
+    type: "number_input",
+    label: "Text Padding Right",
+    key: "padding_right",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 0,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "text",
+    type: "number_input",
+    label: "Text Padding Bottom",
+    key: "padding_bottom",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 12,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "text",
+    type: "number_input",
+    label: "Text Padding Left",
+    key: "padding_left",
+    variants: [
+      {
+        initial_value: 0,
+      },
+      {
+        initial_value: 0,
+      },
+    ],
+  }),
+  // item bg color
+  ...createVariationFields({
+    prefix: "default",
+    type: "color_picker_rgba",
+    label: "Default Item background color",
+    key: "item_background_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "focused",
+    type: "color_picker_rgba",
+    label: "Focused Item background color",
+    key: "item_background_color",
+    variants: [
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected",
+    type: "color_picker_rgba",
+    label: "Selected Item background color",
+    key: "item_background_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected_focused",
+    type: "color_picker_rgba",
+    label: "Selected & Focused Item background color",
+    key: "item_background_color",
+    variants: [
+      {
+        initial_value: "rgba(254, 20, 72, 1)",
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  // item border color
+  ...createVariationFields({
+    prefix: "default",
+    type: "color_picker_rgba",
+    label: "Default Item border color",
+    key: "item_border_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "focused",
+    type: "color_picker_rgba",
+    label: "Focused Item border color",
+    key: "item_border_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected",
+    type: "color_picker_rgba",
+    label: "Selected Item border color",
+    key: "item_border_color",
+    variants: [
+      {
+        initial_value: "rgba(239, 239, 239, 0.5)",
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  ...createVariationFields({
+    prefix: "selected_focused",
+    type: "color_picker_rgba",
+    label: "Selected & Focused Item border color",
+    key: "item_border_color",
+    variants: [
+      {
+        initial_value: TRANSPARENT,
+      },
+      {
+        initial_value: TRANSPARENT,
+      },
+    ],
+  }),
+  // item border thickness
+  ...createVariationFields({
+    prefix: "",
+    label: "Item Border Thickness",
+    key: "item_border_thickness",
+    variants: [
+      {
+        initial_value: 2,
+      },
+      {
+        initial_value: 0,
+      },
+    ],
+  }),
+  // item corner radius
+  ...createVariationFields({
+    prefix: "",
+    label: "Item Corner radius",
+    key: "item_corner_radius",
+    variants: [
+      {
+        initial_value: 8,
+      },
+      {
+        initial_value: 0,
+      },
+    ],
+  }),
+];
+
+const stylesFields = [
+  fieldsGroup(
+    "Component Configuration",
+    "",
+    componentConfigurationFields,
+    false
+  ),
+  fieldsGroup("Screen Picker Items", "", screenPickerItemsFields, false),
+  fieldsGroup("Asset", "", assetFields, false),
+  fieldsGroup("Title", "", titleFields, false),
+  fieldsGroup("Item", "", itemFields, false),
+];
+
+module.exports = stylesFields;

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.1102149799",
+  "version": "13.0.0-alpha.1338463240",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1102149799",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1338463240",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,7 +44,6 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
-    "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
   },