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

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -0,0 +1,728 @@
+/**
+ * Modal Building Block — Header
+ *
+ * Single-file Expo Snack demo for the Header building block spec.
+ *
+ * Green (configurable): title, closeButton (enable + asset), actionButtons styling
+ * White (hardcoded): container, action button layout/enable/actions, close dimensions,
+ *   action button padding/radius, action labels
+ */
+
+import React, { useCallback, useState } from "react";
+import { Image, Platform, StyleSheet, Text, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  centerAlignedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 44,
+    position: "relative",
+  },
+  measureLayer: {
+    position: "absolute",
+    opacity: 0,
+    left: 0,
+    top: 0,
+    flexDirection: "row",
+  },
+  sideSlotFixed: {
+    justifyContent: "center",
+    minHeight: 44,
+  },
+  centerSpacer: {
+    flex: 1,
+  },
+  absoluteTitleLayer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  closeButton: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  demoScreen: {
+    flex: 1,
+    backgroundColor: "#1C1C1E",
+    paddingTop: 64,
+    paddingHorizontal: 0,
+    gap: 24,
+  },
+  demoBlock: {
+    gap: 8,
+    paddingHorizontal: 0,
+  },
+  demoHeading: {
+    color: "#FFFFFF",
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 8,
+    paddingHorizontal: 24,
+  },
+  demoLabel: {
+    color: "#999999",
+    fontSize: 13,
+    paddingHorizontal: 24,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green / editable fields from spec)
+// ---------------------------------------------------------------------------
+
+export type HeaderActionType = "cancel" | "done" | "clear";
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type TitleAlignment = "left" | "center";
+
+/** Selects hardcoded container + action layout (white fields). */
+export type HeaderVariant =
+  | "singleLine"
+  | "headerWithActions"
+  | "headerWithActionsCancelOnly"
+  | "section";
+
+export type TitleConfiguration = {
+  fontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+  alignment: TitleAlignment;
+};
+
+export type CloseButtonConfiguration = {
+  enabled: boolean;
+  asset?: string;
+};
+
+export type ActionButtonsStyleConfiguration = {
+  defaultBackgroundColor: string;
+  focusedBackgroundColor: string;
+  fontColor: string;
+  focusedFontColor: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type HeaderConfiguration = {
+  variant: HeaderVariant;
+  title: TitleConfiguration;
+  closeButton: CloseButtonConfiguration;
+  actionButtons: ActionButtonsStyleConfiguration;
+};
+
+export const DEFAULT_TITLE_CONFIGURATION: TitleConfiguration = {
+  fontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Bold",
+  androidFontFamily: "Roboto-Bold",
+  fontSize: 22,
+  lineHeight: 28,
+  iosLetterSpacing: -0.6,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+  alignment: "left",
+};
+
+export const DEFAULT_CLOSE_BUTTON_CONFIGURATION: CloseButtonConfiguration = {
+  enabled: true,
+};
+
+export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfiguration =
+  {
+    defaultBackgroundColor: "rgba(62, 62, 62, 1)",
+    focusedBackgroundColor: "rgba(78, 78, 78, 1)",
+    fontColor: "#FFFFFF",
+    focusedFontColor: "#FFFFFF",
+    iosFontFamily: "SFProText-Semibold",
+    androidFontFamily: "Roboto-Medium",
+    fontSize: 14,
+    lineHeight: 20,
+    iosLetterSpacing: 0,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+  };
+
+// ---------------------------------------------------------------------------
+// Data (runtime / localization — not styling config)
+// ---------------------------------------------------------------------------
+
+export type HeaderData = {
+  title: string;
+};
+
+export type ItemProps = {
+  configuration: HeaderConfiguration;
+  data: HeaderData;
+  focusedCloseButton?: boolean;
+  focusedLeadingAction?: boolean;
+  focusedTrailingAction?: boolean;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded spec values (white fields)
+// ---------------------------------------------------------------------------
+
+type ContainerSpec = {
+  horizontalGutter: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+};
+
+type ActionSlotSpec = {
+  enabled: boolean;
+  actionType?: HeaderActionType;
+};
+
+type ActionButtonsBehaviorSpec = {
+  sectionEnabled: boolean;
+  leading: ActionSlotSpec;
+  trailing: ActionSlotSpec;
+};
+
+const CONTAINER_SPEC: Record<HeaderVariant, ContainerSpec> = {
+  singleLine: {
+    horizontalGutter: 16,
+    paddingTop: 0,
+    paddingRight: 14,
+    paddingBottom: 8,
+    paddingLeft: 20,
+  },
+  headerWithActions: {
+    horizontalGutter: 12,
+    paddingTop: 0,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
+  },
+  headerWithActionsCancelOnly: {
+    horizontalGutter: 12,
+    paddingTop: 0,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
+  },
+  section: {
+    horizontalGutter: 12,
+    paddingTop: 0,
+    paddingRight: 20,
+    paddingBottom: 0,
+    paddingLeft: 20,
+  },
+};
+
+const ACTION_BUTTONS_BEHAVIOR: Record<
+  HeaderVariant,
+  ActionButtonsBehaviorSpec
+> = {
+  singleLine: {
+    sectionEnabled: false,
+    leading: { enabled: false },
+    trailing: { enabled: false },
+  },
+  headerWithActions: {
+    sectionEnabled: true,
+    leading: { enabled: true, actionType: "cancel" },
+    trailing: { enabled: true, actionType: "done" },
+  },
+  headerWithActionsCancelOnly: {
+    sectionEnabled: true,
+    leading: { enabled: true, actionType: "cancel" },
+    trailing: { enabled: false },
+  },
+  section: {
+    sectionEnabled: true,
+    leading: { enabled: false },
+    trailing: { enabled: true, actionType: "clear" },
+  },
+};
+
+const DEFAULT_CLOSE_BUTTON_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAl0lEQVR42u2YQQ7AIAgE/f+naQ899dDYyiLT7DyAnRijwBjGGLNEnKCy4qJCNlVYKZ2aETeUshLhTGlZbUVh5UGkB8hlM4PKZDMCy2VXgrfJfhHYLvtGpI3sjFA72SextrKz0m1bUYwsTvhX97f9C4F8g5G/HLKPQHZqyF4YOW0g5znkxCytjV6koFZVqGVg5Yc0jDFmiQNENiwNUMoCZAAAAABJRU5ErkJggg==";
+
+const CLOSE_BUTTON_SPEC = {
+  width: 44,
+  height: 44,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+};
+
+const ACTION_BUTTON_LAYOUT_SPEC = {
+  paddingTop: 6,
+  paddingRight: 10,
+  paddingBottom: 6,
+  paddingLeft: 10,
+  cornerRadius: 16,
+};
+
+const ACTION_LABELS: Record<HeaderActionType, string> = {
+  cancel: "Cancel",
+  done: "Done",
+  clear: "Clear",
+};
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function shouldShowActionSlot(slot: ActionSlotSpec, sectionEnabled: boolean) {
+  return sectionEnabled && slot.enabled && !!slot.actionType;
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type HeaderContainerProps = {
+  variant: HeaderVariant;
+  children: React.ReactNode;
+};
+
+function HeaderContainer({ variant, children }: HeaderContainerProps) {
+  const container = CONTAINER_SPEC[variant];
+
+  return (
+    <View
+      style={{
+        paddingTop: container.paddingTop,
+        paddingRight: container.paddingRight,
+        paddingBottom: container.paddingBottom,
+        paddingLeft: container.paddingLeft,
+      }}
+    >
+      {children}
+    </View>
+  );
+}
+
+type HeaderTitleProps = {
+  title: string;
+  configuration: TitleConfiguration;
+  centered: boolean;
+};
+
+function HeaderTitle({ title, configuration, centered }: HeaderTitleProps) {
+  const letterSpacing =
+    Platform.OS === "ios"
+      ? configuration.iosLetterSpacing
+      : configuration.androidLetterSpacing;
+
+  return (
+    <Text
+      style={{
+        flex: centered ? undefined : 1,
+        color: 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),
+        textAlign: centered ? "center" : configuration.alignment,
+      }}
+      numberOfLines={1}
+    >
+      {title}
+    </Text>
+  );
+}
+
+type HeaderCloseButtonProps = {
+  configuration: CloseButtonConfiguration;
+  focused?: boolean;
+};
+
+function HeaderCloseButton({
+  configuration,
+  focused = false,
+}: HeaderCloseButtonProps) {
+  if (!configuration.enabled) {
+    return null;
+  }
+
+  const asset = configuration.asset ?? DEFAULT_CLOSE_BUTTON_ASSET;
+
+  return (
+    <View
+      style={[
+        styles.closeButton,
+        {
+          width: CLOSE_BUTTON_SPEC.width,
+          height: CLOSE_BUTTON_SPEC.height,
+          marginTop: CLOSE_BUTTON_SPEC.paddingTop,
+          marginRight: CLOSE_BUTTON_SPEC.paddingRight,
+          marginBottom: CLOSE_BUTTON_SPEC.paddingBottom,
+          marginLeft: CLOSE_BUTTON_SPEC.paddingLeft,
+          borderRadius: CLOSE_BUTTON_SPEC.width / 2,
+          borderWidth: 1,
+          borderColor: "#FFFFFF",
+          opacity: focused ? 0.7 : 1,
+        },
+      ]}
+    >
+      <Image
+        source={{ uri: asset }}
+        style={{
+          width: CLOSE_BUTTON_SPEC.width * 0.55,
+          height: CLOSE_BUTTON_SPEC.height * 0.55,
+        }}
+        resizeMode="contain"
+      />
+    </View>
+  );
+}
+
+type HeaderActionButtonProps = {
+  actionType: HeaderActionType;
+  configuration: ActionButtonsStyleConfiguration;
+  focused?: boolean;
+};
+
+function HeaderActionButton({
+  actionType,
+  configuration,
+  focused = false,
+}: HeaderActionButtonProps) {
+  return (
+    <View
+      style={{
+        backgroundColor: focused
+          ? configuration.focusedBackgroundColor
+          : configuration.defaultBackgroundColor,
+        borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
+        paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
+        paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
+        paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
+        paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
+      }}
+    >
+      <Text
+        style={{
+          color: focused
+            ? configuration.focusedFontColor
+            : configuration.fontColor,
+          fontSize: configuration.fontSize,
+          lineHeight: configuration.lineHeight,
+          letterSpacing:
+            Platform.OS === "ios"
+              ? configuration.iosLetterSpacing
+              : configuration.androidLetterSpacing,
+          fontFamily: Platform.select({
+            ios: configuration.iosFontFamily,
+            android: configuration.androidFontFamily,
+            default: configuration.androidFontFamily,
+          }),
+          textTransform: getTextTransformStyle(configuration.textTransform),
+        }}
+        numberOfLines={1}
+      >
+        {ACTION_LABELS[actionType]}
+      </Text>
+    </View>
+  );
+}
+
+type CenterAlignedHeaderLayoutProps = {
+  horizontalGutter: number;
+  title: TitleConfiguration;
+  titleText: string;
+  leadingContent: React.ReactNode;
+  trailingContent: React.ReactNode;
+};
+
+function CenterAlignedHeaderLayout({
+  horizontalGutter,
+  title,
+  titleText,
+  leadingContent,
+  trailingContent,
+}: CenterAlignedHeaderLayoutProps) {
+  const [sideWidths, setSideWidths] = useState({ leading: 0, trailing: 0 });
+  const sideSlotWidth = Math.max(sideWidths.leading, sideWidths.trailing);
+
+  const updateSideWidth = useCallback(
+    (side: "leading" | "trailing", width: number) => {
+      setSideWidths((previous) => {
+        if (previous[side] === width) {
+          return previous;
+        }
+
+        return { ...previous, [side]: width };
+      });
+    },
+    []
+  );
+
+  return (
+    <View style={styles.centerAlignedRow}>
+      <View style={styles.measureLayer} pointerEvents="none">
+        {leadingContent ? (
+          <View
+            onLayout={(event) =>
+              updateSideWidth("leading", event.nativeEvent.layout.width)
+            }
+          >
+            {leadingContent}
+          </View>
+        ) : null}
+        {trailingContent ? (
+          <View
+            onLayout={(event) =>
+              updateSideWidth("trailing", event.nativeEvent.layout.width)
+            }
+          >
+            {trailingContent}
+          </View>
+        ) : null}
+      </View>
+
+      <View
+        style={[
+          styles.sideSlotFixed,
+          { width: sideSlotWidth, alignItems: "flex-start" },
+        ]}
+      >
+        {leadingContent}
+      </View>
+      <View style={{ width: horizontalGutter }} />
+      <View style={styles.centerSpacer} />
+      <View style={{ width: horizontalGutter }} />
+      <View
+        style={[
+          styles.sideSlotFixed,
+          { width: sideSlotWidth, alignItems: "flex-end" },
+        ]}
+      >
+        {trailingContent}
+      </View>
+
+      <View
+        pointerEvents="none"
+        style={[
+          styles.absoluteTitleLayer,
+          { paddingHorizontal: sideSlotWidth + horizontalGutter },
+        ]}
+      >
+        <HeaderTitle title={titleText} configuration={title} centered />
+      </View>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Item
+// ---------------------------------------------------------------------------
+
+export function Item({
+  configuration,
+  data,
+  focusedCloseButton = false,
+  focusedLeadingAction = false,
+  focusedTrailingAction = false,
+}: ItemProps) {
+  const { variant, title, closeButton, actionButtons } = configuration;
+  const { title: titleText } = data;
+
+  const container = CONTAINER_SPEC[variant];
+  const behavior = ACTION_BUTTONS_BEHAVIOR[variant];
+  const isCenterAligned = title.alignment === "center";
+
+  const showLeadingAction = shouldShowActionSlot(
+    behavior.leading,
+    behavior.sectionEnabled
+  );
+
+  const showTrailingAction = shouldShowActionSlot(
+    behavior.trailing,
+    behavior.sectionEnabled
+  );
+
+  const leadingContent = showLeadingAction ? (
+    <HeaderActionButton
+      actionType={behavior.leading.actionType}
+      configuration={actionButtons}
+      focused={focusedLeadingAction}
+    />
+  ) : null;
+
+  const trailingContent = showTrailingAction ? (
+    <HeaderActionButton
+      actionType={behavior.trailing.actionType}
+      configuration={actionButtons}
+      focused={focusedTrailingAction}
+    />
+  ) : closeButton.enabled && !isCenterAligned ? (
+    <HeaderCloseButton
+      configuration={closeButton}
+      focused={focusedCloseButton}
+    />
+  ) : null;
+
+  if (isCenterAligned) {
+    return (
+      <HeaderContainer variant={variant}>
+        <CenterAlignedHeaderLayout
+          horizontalGutter={container.horizontalGutter}
+          title={title}
+          titleText={titleText}
+          leadingContent={leadingContent}
+          trailingContent={trailingContent}
+        />
+      </HeaderContainer>
+    );
+  }
+
+  return (
+    <HeaderContainer variant={variant}>
+      <View style={styles.row}>
+        {leadingContent ? (
+          <>
+            {leadingContent}
+            <View style={{ width: container.horizontalGutter }} />
+          </>
+        ) : null}
+        <HeaderTitle title={titleText} configuration={title} centered={false} />
+        {trailingContent ? (
+          <>
+            <View style={{ width: container.horizontalGutter }} />
+            {trailingContent}
+          </>
+        ) : null}
+      </View>
+    </HeaderContainer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Variant configurations (green defaults per PDF column)
+// ---------------------------------------------------------------------------
+
+/** Default / Variant 1 — Single Line Header */
+export const VARIANT_SINGLE_LINE_HEADER: HeaderConfiguration = {
+  variant: "singleLine",
+  title: DEFAULT_TITLE_CONFIGURATION,
+  closeButton: DEFAULT_CLOSE_BUTTON_CONFIGURATION,
+  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
+};
+
+/** Variant 2 — Header With Actions */
+export const VARIANT_HEADER_WITH_ACTIONS: HeaderConfiguration = {
+  variant: "headerWithActions",
+  title: {
+    fontColor: "#FFFFFF",
+    iosFontFamily: "SFProText-Bold",
+    androidFontFamily: "Roboto-Bold",
+    fontSize: 22,
+    lineHeight: 28,
+    iosLetterSpacing: -0.6,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+    alignment: "center",
+  },
+  closeButton: { enabled: false },
+  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
+};
+
+/** Variant 2 — single side action (layout rule demo) */
+export const VARIANT_HEADER_WITH_CANCEL_ONLY: HeaderConfiguration = {
+  variant: "headerWithActionsCancelOnly",
+  title: {
+    fontColor: "#FFFFFF",
+    iosFontFamily: "SFProText-Bold",
+    androidFontFamily: "Roboto-Bold",
+    fontSize: 22,
+    lineHeight: 28,
+    iosLetterSpacing: -0.6,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+    alignment: "center",
+  },
+  closeButton: { enabled: false },
+  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
+};
+
+/** Variant 3 — Section Header */
+export const VARIANT_SECTION_HEADER: HeaderConfiguration = {
+  variant: "section",
+  title: {
+    fontColor: "#FFFFFF",
+    iosFontFamily: "SFProText-Bold",
+    androidFontFamily: "Roboto-Bold",
+    fontSize: 13,
+    lineHeight: 32,
+    iosLetterSpacing: -0.1,
+    androidLetterSpacing: 0,
+    textTransform: "default",
+    alignment: "left",
+  },
+  closeButton: { enabled: false },
+  actionButtons: DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION,
+};
+
+export default function App() {
+  return (
+    <View style={styles.demoScreen}>
+      <Text style={styles.demoHeading}>Modal Header Building Block</Text>
+
+      <View style={styles.demoBlock}>
+        <Text style={styles.demoLabel}>Single Line Header</Text>
+        <Item
+          configuration={VARIANT_SINGLE_LINE_HEADER}
+          data={{ title: "Playback Speed" }}
+        />
+      </View>
+
+      <View style={styles.demoBlock}>
+        <Text style={styles.demoLabel}>Header With Actions</Text>
+        <Item
+          configuration={VARIANT_HEADER_WITH_ACTIONS}
+          data={{ title: "Playback Speed" }}
+        />
+      </View>
+
+      <View style={styles.demoBlock}>
+        <Text style={styles.demoLabel}>
+          Header With Actions — single side action
+        </Text>
+        <Item
+          configuration={VARIANT_HEADER_WITH_CANCEL_ONLY}
+          data={{ title: "Playback Speed" }}
+        />
+      </View>
+
+      <View style={styles.demoBlock}>
+        <Text style={styles.demoLabel}>Section Header</Text>
+        <Item
+          configuration={VARIANT_SECTION_HEADER}
+          data={{ title: "Next in Queue" }}
+        />
+      </View>
+    </View>
+  );
+}