@applicaster/zapp-react-native-ui-components 16.0.0-alpha.8443457654 → 16.0.0-alpha.8525514228

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -0,0 +1,368 @@
+/**
+ * Modal Building Block — Action
+ *
+ * Single-file Expo Snack demo for the Action list item building block spec.
+ * Three forms (text only / leading icon + text / leading + text + trailing)
+ * are driven by data — no separate variants.
+ *
+ * Green (configurable): background, title, trailingIcon.chevronAsset
+ * White (hardcoded): container padding/gutter, icon size, leading icon assets,
+ *   leading/trailing visibility logic from data
+ */
+
+import React from "react";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  demoScreen: {
+    flex: 1,
+    backgroundColor: "#1C1C1E",
+    paddingTop: 64,
+    paddingHorizontal: 16,
+    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 TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  cornerRadius: number;
+};
+
+export type TitleConfiguration = {
+  fontColor: string;
+  focusedFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type TrailingIconConfiguration = {
+  chevronAsset?: string;
+};
+
+export type ActionConfiguration = {
+  background: BackgroundConfiguration;
+  title: TitleConfiguration;
+  trailingIcon: TrailingIconConfiguration;
+};
+
+export const DEFAULT_BACKGROUND_CONFIGURATION: BackgroundConfiguration = {
+  defaultColor: "transparent",
+  focusedColor: "rgba(62, 62, 62, 1)",
+  cornerRadius: 12,
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#FFFFFF",
+  focusedFontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Semibold",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 15,
+  lineHeight: 24,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_TRAILING_ICON_CONFIGURATION: TrailingIconConfiguration =
+  {};
+
+export const DEFAULT_ACTION_CONFIGURATION: ActionConfiguration = {
+  background: DEFAULT_BACKGROUND_CONFIGURATION,
+  title: DEFAULT_TITLE_CONFIGURATION,
+  trailingIcon: DEFAULT_TRAILING_ICON_CONFIGURATION,
+};
+
+// ---------------------------------------------------------------------------
+// Data (runtime — controls which elements are shown)
+// ---------------------------------------------------------------------------
+
+export type LeadingActionType =
+  | "addToQueue"
+  | "addToPlaylist"
+  | "favorite"
+  | "share"
+  | "sleepTimer"
+  | "playbackSpeed";
+
+export type ActionData = {
+  title: string;
+  /** When set, leading icon is shown (Enable: On). */
+  leadingActionType?: LeadingActionType;
+  /** When true, trailing chevron is shown (Enable: On). */
+  showTrailingChevron?: boolean;
+};
+
+export type ItemProps = {
+  configuration: ActionConfiguration;
+  data: ActionData;
+  focused?: boolean;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded spec values (white fields)
+// ---------------------------------------------------------------------------
+
+const CONTAINER_SPEC = {
+  paddingTop: 13,
+  paddingRight: 10,
+  paddingBottom: 13,
+  paddingLeft: 10,
+  horizontalGutter: 12,
+};
+
+const ICON_SPEC = {
+  width: 24,
+  height: 24,
+};
+
+const DEFAULT_CHEVRON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAXUBlu2bPmPjIeWBeiGDy0Lhrbrh1/qGXqZaxSMglEw0gEA4c+IpUrpYX4AAAAASUVORK5CYII=";
+
+/** Hardcoded: action type → leading icon asset (base64 PNG). */
+const LEADING_ICON_ASSETS: Record<LeadingActionType, string> = {
+  addToQueue:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAALElEQVR42mNgGAUjE/xHAzS3gFgweC0Y+nEwGslkBRFFwTj8LBjNyaNgmAMAJTf+EEEZcS0AAAAASUVORK5CYII=",
+  addToPlaylist:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVR42mNgGAVDBvxHA6MWjFpAvEGkglELKLdgNJmOWkA7C0YBzQAAivu+UKRR1ZIAAAAASUVORK5CYII=",
+  favorite:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKklEQVR42mNgGAWjYBTgBP+xAGLkRi0YQhbgM4wqBo9aMHgsGAWjgCAAALyAZqh4yyZZAAAAAElFTkSuQmCC",
+  share:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+  sleepTimer:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAYUlEQVR42tWUSQ4AIAgD+f+n8eJRliIQ6MmEZTSxJZokvipdXgZpAbzOO17AglIXI7XULxmCoEMwRGuWam6AdRsN4IJYTRH4PIDkhxTA92zUPNBcFDDHaOVR0RJ2LXG9QgemFVK8tpo4PwAAAABJRU5ErkJggg==",
+  playbackSpeed:
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAK0lEQVR42mNgGAVDDvxHAqMWjFowUiz4TwQYgRYQYxBFlo1aMPAWjAK6AgD2g7pUUT7VeAAAAABJRU5ErkJggg==",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowLeadingIcon(leadingActionType?: LeadingActionType) {
+  return !!leadingActionType;
+}
+
+function shouldShowTrailingIcon(showTrailingChevron?: boolean) {
+  return !!showTrailingChevron;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type ActionContainerProps = {
+  configuration: BackgroundConfiguration;
+  focused: boolean;
+  children: React.ReactNode;
+};
+
+function ActionContainer({
+  configuration,
+  focused,
+  children,
+}: ActionContainerProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: focused
+          ? configuration.focusedColor
+          : configuration.defaultColor,
+        borderRadius: configuration.cornerRadius,
+        paddingTop: CONTAINER_SPEC.paddingTop,
+        paddingRight: CONTAINER_SPEC.paddingRight,
+        paddingBottom: CONTAINER_SPEC.paddingBottom,
+        paddingLeft: CONTAINER_SPEC.paddingLeft,
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+type ActionTitleProps = {
+  title: string;
+  configuration: TitleConfiguration;
+  focused: boolean;
+};
+
+function ActionTitle({ title, configuration, focused }: ActionTitleProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={{
+        flex: 1,
+        color: focused
+          ? configuration.focusedFontColor
+          : configuration.fontColor,
+        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 ActionLeadingIconProps = {
+  actionType: LeadingActionType;
+};
+
+function ActionLeadingIcon({ actionType }: ActionLeadingIconProps) {
+  return (
+    <Image
+      source={{ uri: LEADING_ICON_ASSETS[actionType] }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+type ActionTrailingIconProps = {
+  configuration: TrailingIconConfiguration;
+};
+
+function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
+  const asset = configuration.chevronAsset ?? DEFAULT_CHEVRON_ASSET;
+
+  return (
+    <Image
+      source={{ uri: asset }}
+      style={{ width: ICON_SPEC.width, height: ICON_SPEC.height }}
+      resizeMode="contain"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item
+// ---------------------------------------------------------------------------
+
+export function Item({ configuration, data, focused = false }: ItemProps) {
+  const { background, title, trailingIcon } = configuration;
+  const { title: label, leadingActionType, showTrailingChevron } = data;
+
+  const showLeading = shouldShowLeadingIcon(leadingActionType);
+  const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
+
+  return (
+    <ActionContainer configuration={background} focused={focused}>
+      <View style={styles.row}>
+        {showLeading ? (
+          <>
+            <ActionLeadingIcon actionType={leadingActionType} />
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+          </>
+        ) : null}
+        <ActionTitle title={label} configuration={title} focused={focused} />
+        {showTrailing ? (
+          <>
+            <View style={{ width: CONTAINER_SPEC.horizontalGutter }} />
+            <ActionTrailingIcon configuration={trailingIcon} />
+          </>
+        ) : null}
+      </View>
+    </ActionContainer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Demo
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text — Add To Queue (focused)
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
+        focused
+      />
+
+      <Text style={styles.demoLabel}>
+        Leading icon + text + trailing chevron — Add To Playlist
+      </Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{
+          title: "Add To Playlist",
+          leadingActionType: "addToPlaylist",
+          showTrailingChevron: true,
+        }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Playlist" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Favorite", leadingActionType: "favorite" }}
+      />
+
+      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Share", leadingActionType: "share" }}
+      />
+
+      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
+      <Item
+        configuration={DEFAULT_ACTION_CONFIGURATION}
+        data={{ title: "Go To Artist" }}
+      />
+    </View>
+  );
+}