@applicaster/zapp-react-native-ui-components 16.0.0-rc.33 → 16.0.0-rc.34

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

@@ -0,0 +1,424 @@
+/**
+ * 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, 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",
+  },
+  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,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// 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;
+};
+
+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 ItemProps = {
+  configuration: ButtonConfiguration;
+  data: ButtonData;
+  disabled?: boolean;
+  focused?: boolean;
+};
+
+// ---------------------------------------------------------------------------
+// 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,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAUjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
+  return leadingIcon.enabled && !!leadingIcon.actionType;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components (hardcoded styling lives here)
+// ---------------------------------------------------------------------------
+
+type ButtonContainerProps = {
+  focused: boolean;
+  disabled: boolean;
+  configuration: BackgroundConfiguration;
+  children: React.ReactNode;
+};
+
+function ButtonContainer({
+  focused,
+  disabled,
+  configuration,
+  children,
+}: ButtonContainerProps) {
+  const backgroundColor = disabled
+    ? configuration.inactiveColor
+    : focused
+      ? configuration.focusedColor
+      : configuration.defaultColor;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          borderRadius: configuration.cornerRadius,
+          paddingTop: configuration.paddingTop,
+          paddingRight: configuration.paddingRight,
+          paddingBottom: configuration.paddingBottom,
+          paddingLeft: configuration.paddingLeft,
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+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) {
+  return (
+    <Image
+      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
+      style={{
+        width: configuration.width,
+        height: configuration.height,
+      }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item — single building block driven by configuration + data
+// ---------------------------------------------------------------------------
+
+export function Item({
+  configuration,
+  data,
+  disabled,
+  focused = false,
+}: ItemProps) {
+  const {
+    background: backgroundConfiguration,
+    title: titleConfiguration,
+    icons: iconsConfiguration,
+  } = configuration;
+
+  const { title } = data;
+  const isDisabled = disabled ?? data.disabled ?? false;
+
+  const { leadingIcon } = iconsConfiguration;
+  const showIcon = shouldShowLeadingIcon(leadingIcon);
+
+  return (
+    <ButtonContainer
+      focused={focused}
+      disabled={isDisabled}
+      configuration={backgroundConfiguration}
+    >
+      <View style={styles.contentRow}>
+        {showIcon ? (
+          <>
+            <ButtonLeadingIcon
+              actionType={leadingIcon.actionType}
+              configuration={iconsConfiguration}
+            />
+            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+          </>
+        ) : null}
+        <ButtonTitle
+          title={title}
+          focused={focused}
+          disabled={isDisabled}
+          configuration={titleConfiguration}
+        />
+      </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",
+    },
+  },
+};
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Button Building Block</Text>
+
+      <Text style={styles.demoLabel}>Variant 1 — Text only (confirmation)</Text>
+      <Item configuration={VARIANT_TEXT_ONLY} data={{ title: "Confirm" }} />
+
+      <Text style={styles.demoLabel}>Variant 2 — Leading icon + text</Text>
+      <Item
+        configuration={VARIANT_WITH_ICON}
+        data={{ title: "Add To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Inactive state</Text>
+      <Item
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: "Unavailable" }}
+        disabled
+      />
+
+      <Text style={styles.demoLabel}>Custom title config — uppercase</Text>
+      <Item
+        configuration={VARIANT_UPPERCASE_TITLE}
+        data={{ title: "Save Changes" }}
+      />
+
+      <Text style={styles.demoLabel}>Custom icons config — 32×32</Text>
+      <Item
+        configuration={VARIANT_LARGE_ICON}
+        data={{ title: "Add To Queue" }}
+      />
+    </View>
+  );
+}