@applicaster/zapp-react-native-ui-components 16.0.0-alpha.7845362739 → 16.0.0-alpha.8101951023

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

@@ -0,0 +1,167 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Switch } from "react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { Toggle } from "../Toggle";
+
+const mockOnCellClick = jest.fn();
+const mockInvokeAction = jest.fn();
+const mockInitialEntryState = jest.fn().mockReturnValue({ state: 0 });
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/cell-click", () => ({
+  useCellClick: jest.fn(() => mockOnCellClick),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => ({
+    invokeAction: mockInvokeAction,
+    initialEntryState: mockInitialEntryState,
+  })),
+}));
+
+const style = {
+  trackColor: "rgba(0,0,0,1)",
+  trackColorActive: "rgba(4,207,153,1)",
+  thumbColor: "rgba(255,255,255,1)",
+  thumbColorActive: "rgba(255,255,255,1)",
+} as any;
+
+const item = { id: "true", title: "I agree" } as any;
+
+const renderToggle = (identifier: string, cellState) =>
+  render(
+    <Toggle
+      item={item}
+      action={{ identifier }}
+      style={style}
+      cellState={cellState}
+    />
+  );
+
+describe("Toggle with an empty action identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("is on when the cell is selected", () => {
+    const { getByRole } = renderToggle("", "selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off when the cell is not selected", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
+  // A finger on a selected row resolves the cell to focused_selected. Reading
+  // that as unselected flipped the thumb for the duration of the press and let
+  // it jump back on release, which reads as a second tap.
+  it("stays on while a selected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused_selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off while an unselected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("does not read the action plugin state", () => {
+    renderToggle("", "default");
+
+    expect(mockInitialEntryState).not.toHaveBeenCalled();
+  });
+
+  // Asserted on the Switch element rather than the rendered host component:
+  // what Toggle owns is the props it hands to Switch, and React Native rewrites
+  // them into platform-specific ones (tintColor, a style entry) underneath.
+  it("forwards every configured color to the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props).toMatchObject({
+      trackColor: { false: style.trackColor, true: style.trackColorActive },
+      thumbColor: style.thumbColor,
+    });
+  });
+
+  // ios_backgroundColor paints an opaque layer behind the track that the track
+  // color cannot cover, which on iOS reads as a halo around the switch. The
+  // switch is left on its platform default instead, so the prop must stay
+  // unset even if a style happens to carry a color for it.
+  it("does not set an iOS background color on the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props.ios_backgroundColor).toBeUndefined();
+  });
+});
+
+describe("Toggle with an action plugin identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("routes a change through the action plugin", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockInvokeAction).toHaveBeenCalledWith(
+      item,
+      expect.objectContaining({ updateState: expect.any(Function) })
+    );
+
+    expect(mockOnCellClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("Toggle with an identifier whose action plugin is not installed", () => {
+  // The cell manifest no longer defaults toggle_action_identifier, but app
+  // configurations saved while it did still carry "firebase-push-topic-action",
+  // and a mistyped id is always possible. A toggle can therefore still arrive
+  // with a non-empty identifier it never asked for - the presence of a real
+  // action context, not the identifier string, is what decides the route.
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useActions as jest.Mock).mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    (useActions as jest.Mock).mockReturnValue({
+      invokeAction: mockInvokeAction,
+      initialEntryState: mockInitialEntryState,
+    });
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("still reflects the cell selection state", () => {
+    const { getByRole } = renderToggle(
+      "firebase-push-topic-action",
+      "selected"
+    );
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+});

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("stretches to the parent width so labels wrap using the cell width", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("stretch");
+  });
+});

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -3,7 +3,6 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import {
   getColorFromData,
   getKeyForLabel,
-  mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
@@ -23,7 +22,7 @@ export const CollapsibleTextContainer = ({
   return {
     type: "CollapsibleTextContainer", // Collapsible Text Container,
     style: {
-      alignSelf: mapSelfAlignment(getValue("text_alignment")),
+      alignSelf: "stretch",
       marginTop: toNumberWithDefaultZero(getValue("margin_top")),
       marginRight: toNumberWithDefaultZero(getValue("margin_right")),
       marginBottom: toNumberWithDefaultZero(getValue("margin_bottom")),

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  isActionAvailableFor,
+  RegisteredAction,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { Button } from "../Button";
+
+export type ActionButtonProps = {
+  entry: ZappEntry;
+  item: RegisteredAction;
+  configuration: any;
+  width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+type Props = ActionButtonProps & {
+  onPress?: (item: any) => void;
+};
+
+/**
+ * Unified action button for the modal bottom sheet.
+ *
+ * Every item is a `RegisteredAction` resolved from the registry (entry actions,
+ * registry actions and legacy context-provider actions alike), so the button
+ * simply reads `item.action` and drives it through `useEntryActionState`
+ * (backed by the action's observable / `addListener`).
+ */
+export function ActionButton(props: Props) {
+  const { item, entry, onPress: onItemPress, component } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
+      });
+    },
+    [invokeAction, item, onItemPress, component]
+  );
+
+  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
+
+  return (
+    <Button {...props} item={state} onPress={onPress} label={state?.label} />
+  );
+}
+
+// Explicitly set display name for the component
+ActionButton.displayName = "ActionButton";

package/Components/ModalComponent/ActionsBottomSheet/__tests__/openActionsBottomSheet.test.ts

@@ -0,0 +1,38 @@
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { boundActionButton } from "../boundActionButton";
+import { openActionsBottomSheet } from "../openActionsBottomSheet";
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../boundActionButton", () => ({
+  boundActionButton: jest.fn(() => jest.fn()),
+}));
+
+describe("openActionsBottomSheet", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("binds the List component into the sheet row button", () => {
+    const entry = { id: "entry-1" } as ZappEntry;
+
+    const component = {
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actions = [
+      { identifier: "entry_action_0", action: { invokeAction: jest.fn() } },
+    ];
+
+    openActionsBottomSheet({
+      entry,
+      actions: actions as any,
+      component: component as any,
+    });
+
+    expect(boundActionButton).toHaveBeenCalledWith(entry, component);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ActionButton, ActionButtonProps } from "./ActionButton";
+
+/**
+ * Binds an entry to the sheet's row button.
+ *
+ * `BottomSheetModalContent` renders `buttonComponent` per item and does not
+ * know about entries, so the entry is closed over here instead.
+ */
+export const boundActionButton = (
+  entry: ZappEntry | ZappFeed,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
+  );
+
+  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
+
+  return ActionButtonWithEntry;
+};
+
+boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -0,0 +1,9 @@
+export { ActionButton } from "./ActionButton";
+
+export type { ActionButtonProps } from "./ActionButton";
+
+export { boundActionButton } from "./boundActionButton";
+
+export { openActionsBottomSheet } from "./openActionsBottomSheet";
+
+export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -0,0 +1,61 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { boundActionButton } from "./boundActionButton";
+
+const { log_warning } = createLogger({
+  subsystem: "ActionsBottomSheet",
+  category: "Presentation",
+});
+
+export type OpenActionsBottomSheetArgs = {
+  /** Entry the actions act on; bound into every row button. */
+  entry: ZappEntry | ZappFeed;
+  /** Already resolved and merged actions, in the order they should appear. */
+  actions: RegisteredAction[];
+  title?: string;
+  summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+/**
+ * Presents a list of resolved actions in the shared bottom sheet.
+ *
+ * This is the core entry point for "show these actions in a sheet": the
+ * open-modal-bottom-sheet plugin uses it for its configured list, and the
+ * player overflow uses it for the actions that did not fit on the overlay.
+ * Neither has to know about the other, and neither needs the plugin installed.
+ */
+export function openActionsBottomSheet({
+  entry,
+  actions,
+  title,
+  summary,
+  component,
+}: OpenActionsBottomSheetArgs): void {
+  if (!actions?.length) {
+    // Every action resolved away - unavailable for this entry, or not
+    // invokable. An empty sheet looks broken, so say why and stay put.
+    log_warning(
+      "openActionsBottomSheet: nothing to present - not opening the sheet",
+      { entryId: (entry as ZappEntry)?.id }
+    );
+
+    return;
+  }
+
+  openBottomSheetModal({
+    modalBottomSheetContentProps: {
+      // TODO: should be optional - the button handles its own tap, but
+      //  BottomSheetModalContent still requires an onPress.
+      onPress: noop,
+      items: actions,
+      buttonComponent: boundActionButton(entry, component),
+      title,
+      summary,
+    },
+  });
+}

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -17,6 +17,9 @@ import {
   Text,
   View,
 } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+const logger = createLogger({ category: "ModalComponent:AudioPlayerButton" });
 
 const styles = StyleSheet.create({
   container: {
@@ -32,24 +35,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -99,6 +84,8 @@ export type LeadingIconConfiguration = {
   enabled: boolean;
   /** Decides which icon will be displayed when enabled */
   actionType?: ButtonActionType;
+  /** Optional Studio / modal-blocks asset URI (overrides actionType mapping) */
+  asset?: string;
 };
 
 export type IconsConfiguration = {
@@ -146,6 +133,28 @@ export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Variant configurations
+// ---------------------------------------------------------------------------
+
+export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: DEFAULT_ICONS_CONFIGURATION,
+};
+
+export const VARIANT_WITH_ICON: ButtonConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  icons: {
+    ...DEFAULT_ICONS_CONFIGURATION,
+    leadingIcon: {
+      enabled: true,
+      actionType: "addToPlaylist",
+    },
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Data (runtime / localization — not styling config)
 // ---------------------------------------------------------------------------
@@ -156,30 +165,15 @@ export type ButtonData = {
 };
 
 export type AudioPlayerButtonProps = {
-  configuration: ButtonConfiguration;
-  data: ButtonData;
+  configuration?: ButtonConfiguration;
+  data?: ButtonData;
   disabled?: boolean;
   focused?: boolean;
   onPress?: () => void;
 };
 
-// ---------------------------------------------------------------------------
-// Hardcoded spec values (black fields)
-// ---------------------------------------------------------------------------
-
-// Hardcoded: action type → icon asset mapping (base64 PNG)
-const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
-  addToQueue:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDCfxHw6MWjFpAvEGk4lELKLdgNJmOWkA7C0YBbQAAwiZvkR9eFgQAAAAASUVORK5CYII=",
-  addToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJklEQVR42mNgGAUjFvzHgmluATF4cFswGsmjkTwayaORPAqGLwAA6Jpxj9Ms9QMAAAAASUVORK5CYII=",
-  goToPlaylist:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALklEQVR42mNgGAWjYNiD/7Q2/D8tLflPiSX/ycQ0t+D/yLGAEkeMWjAKRgG9AQB4zlSshwSzWwAAAABJRU5ErkJggg==",
-  confirm:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
-  cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
-};
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
 
 function getTextTransformStyle(
   textTransform: TextTransform
@@ -188,7 +182,9 @@ function getTextTransformStyle(
 }
 
 function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
-  return leadingIcon.enabled && !!leadingIcon.actionType;
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -286,17 +282,31 @@ function ButtonTitle({
 }
 
 type ButtonLeadingIconProps = {
-  actionType: ButtonActionType;
+  actionType?: ButtonActionType;
   configuration: IconsConfiguration;
 };
 
-function ButtonLeadingIcon({
-  actionType,
-  configuration,
-}: ButtonLeadingIconProps) {
+function ButtonLeadingIcon({ configuration }: ButtonLeadingIconProps) {
+  const asset = configuration.leadingIcon.asset || PLACEHOLDER_RED_BOX;
+
+  React.useEffect(() => {
+    if (!configuration.leadingIcon.asset) {
+      logger.log_warning(
+        "AudioPlayerButton has leadingIcon enabled but no asset was provided. Falling back to placeholder red box. Ensure the relevant plugin (e.g. playlist-experience) provides leadingIcon.asset in styleOverrides.",
+        {
+          leadingIcon: configuration.leadingIcon,
+        }
+      );
+    }
+  }, [configuration.leadingIcon.asset]);
+
+  if (!asset) {
+    return null;
+  }
+
   return (
     <Image
-      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
+      source={{ uri: asset }}
       style={{
         width: configuration.width,
         height: configuration.height,
@@ -310,22 +320,46 @@ function ButtonLeadingIcon({
 // AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
 export function AudioPlayerButton({
-  configuration,
-  data,
+  configuration = VARIANT_WITH_ICON,
+  data = { title: undefined },
   disabled,
   focused = false,
   onPress,
 }: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
-  const { title } = data;
+  const title = data?.title || buttonBlock?.title.default;
   const isDisabled = disabled ?? data.disabled ?? false;
 
+  React.useEffect(() => {
+    if (!title) {
+      logger.log_warning(
+        "Create New Playlist button rendering with empty title. Ensure data.title is set for AudioPlayerButton or styleOverrides providing button title.",
+        {
+          leadingIcon: iconsConfiguration.leadingIcon,
+          modalBlocksStyle: modalBlocksStyle,
+        }
+      );
+    }
+  }, [title]);
+
   const { leadingIcon } = iconsConfiguration;
   const showIcon = shouldShowLeadingIcon(leadingIcon);
 
@@ -333,7 +367,7 @@ export function AudioPlayerButton({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
       onPress={onPress}
     >
       <View style={styles.contentRow}>
@@ -343,60 +377,16 @@ export function AudioPlayerButton({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Snack demo — two Button variants from configuration only
-// ---------------------------------------------------------------------------
-
-export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_WITH_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    ...DEFAULT_ICONS_CONFIGURATION,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToPlaylist",
-    },
-  },
-};
-
-export const VARIANT_UPPERCASE_TITLE: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: {
-    ...DEFAULT_TITLE_CONFIGURATION,
-    textTransform: "uppercase",
-  },
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_LARGE_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    width: 32,
-    height: 32,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToQueue",
-    },
-  },
-};