@applicaster/zapp-react-native-ui-components 16.0.0-rc.8 → 16.0.0-rc.81

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

@@ -0,0 +1,407 @@
+/**
+ * Modal Building Block — Button
+ *
+ * Single-file Expo Snack demo for the Button building block spec.
+ * Two variants (with / without leading icon) are driven only by configuration + data.
+ *
+ * Green (configurable): background, title, icons (size + leading icon enable/action type)
+ * Black (hardcoded): action type → icon asset mapping
+ */
+
+import React from "react";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  contentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    textAlign: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields from spec)
+// ---------------------------------------------------------------------------
+
+export type ButtonActionType =
+  | "addToQueue"
+  | "addToPlaylist"
+  | "goToPlaylist"
+  | "confirm"
+  | "cancel";
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  inactiveColor: string;
+  cornerRadius: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  horizontalGutter: number;
+};
+
+export type TitleConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  inactiveFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type LeadingIconConfiguration = {
+  /** Enable: On / Off */
+  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 = {
+  width: number;
+  height: number;
+  leadingIcon: LeadingIconConfiguration;
+};
+
+export type ButtonConfiguration = {
+  background: BackgroundConfiguration;
+  title: TitleConfiguration;
+  icons: IconsConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "#FFFFFF",
+  focusedColor: "#E0E0E0",
+  inactiveColor: "#999999",
+  cornerRadius: 12,
+  paddingTop: 12,
+  paddingRight: 12,
+  paddingBottom: 12,
+  paddingLeft: 12,
+  horizontalGutter: 6,
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#000000",
+  focusedFontColor: "#000000",
+  inactiveFontColor: "#000000",
+  iosFontFamily: "SFProText-Bold",
+  androidFontFamily: "Roboto-Bold",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_ICONS_CONFIGURATION: IconsConfiguration = {
+  width: 24,
+  height: 24,
+  leadingIcon: {
+    enabled: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Data (runtime / localization — not styling config)
+// ---------------------------------------------------------------------------
+
+export type ButtonData = {
+  title: string;
+  disabled?: boolean;
+};
+
+export type AudioPlayerButtonProps = {
+  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",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inner components (hardcoded styling lives here)
+// ---------------------------------------------------------------------------
+
+type ButtonContainerProps = {
+  focused: boolean;
+  disabled: boolean;
+  configuration: BackgroundConfiguration;
+  children: React.ReactNode;
+  onPress?: () => void;
+};
+
+function ButtonContainer({
+  focused,
+  disabled,
+  configuration,
+  children,
+  onPress,
+}: ButtonContainerProps) {
+  const defaultBgColor = disabled
+    ? configuration.inactiveColor
+    : focused
+      ? configuration.focusedColor
+      : configuration.defaultColor;
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      style={({ pressed }) => [
+        styles.container,
+        {
+          backgroundColor:
+            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
+          borderRadius: configuration.cornerRadius,
+          paddingTop: configuration.paddingTop,
+          paddingRight: configuration.paddingRight,
+          paddingBottom: configuration.paddingBottom,
+          paddingLeft: configuration.paddingLeft,
+        },
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+type ButtonTitleProps = {
+  title: string;
+  focused: boolean;
+  disabled: boolean;
+  configuration: TitleConfiguration;
+};
+
+function ButtonTitle({
+  title,
+  focused,
+  disabled,
+  configuration,
+}: ButtonTitleProps) {
+  const color = disabled
+    ? configuration.inactiveFontColor
+    : focused
+      ? configuration.focusedFontColor
+      : configuration.fontColor;
+
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={[
+        styles.title,
+        {
+          color,
+          fontSize: configuration.fontSize,
+          lineHeight: configuration.lineHeight,
+          letterSpacing,
+          fontFamily: Platform.select({
+            ios: configuration.iosFontFamily,
+            android: configuration.androidFontFamily,
+            default: configuration.androidFontFamily,
+          }),
+          textTransform: getTextTransformStyle(configuration.textTransform),
+        },
+      ]}
+      numberOfLines={1}
+    >
+      {title}
+    </Text>
+  );
+}
+
+type ButtonLeadingIconProps = {
+  actionType?: ButtonActionType;
+  configuration: IconsConfiguration;
+};
+
+function ButtonLeadingIcon({
+  actionType,
+  configuration,
+}: ButtonLeadingIconProps) {
+  const asset =
+    configuration.leadingIcon.asset ||
+    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+
+  if (!asset) {
+    return null;
+  }
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{
+        width: configuration.width,
+        height: configuration.height,
+      }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AudioPlayerButton — single building block driven by configuration + data
+// ---------------------------------------------------------------------------
+
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
+export function AudioPlayerButton({
+  configuration,
+  data,
+  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: effectiveBgConfig,
+    title: effectiveTitleConfig,
+    icons: iconsConfiguration,
+  } = effectiveConfig;
+
+  const { title } = data;
+  const isDisabled = disabled ?? data.disabled ?? false;
+
+  const { leadingIcon } = iconsConfiguration;
+  const showIcon = shouldShowLeadingIcon(leadingIcon);
+
+  return (
+    <ButtonContainer
+      focused={focused}
+      disabled={isDisabled}
+      configuration={effectiveBgConfig}
+      onPress={onPress}
+    >
+      <View style={styles.contentRow}>
+        {showIcon ? (
+          <>
+            <ButtonLeadingIcon
+              actionType={leadingIcon.actionType}
+              configuration={iconsConfiguration}
+            />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
+          </>
+        ) : null}
+        <ButtonTitle
+          title={title}
+          focused={focused}
+          disabled={isDisabled}
+          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",
+    },
+  },
+};