@applicaster/zapp-react-native-utils 13.0.0-alpha.1909212433 → 13.0.0-alpha.2040752175

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1909212433",
+  "version": "13.0.0-alpha.2040752175",
   "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.1909212433",
+    "@applicaster/applicaster-types": "13.0.0-alpha.2040752175",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

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

@@ -1,304 +0,0 @@
-// @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

@@ -1,875 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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,
-};