withAndroidModernAlertDialog.cjs

const fs = require("node:fs");
const path = require("node:path");
const themeVariables = require("../generated-uniwind-default-theme-variables.json");
const {
  AndroidConfig,
  withAndroidColors,
  withAndroidColorsNight,
  withAndroidStyles,
  withDangerousMod,
} = require("expo/config-plugins");

// Preserve AppCompat's default 16dp dialog inset.
const DIALOG_BACKGROUND_DRAWABLE = `<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="16dp"
    android:insetTop="16dp"
    android:insetRight="16dp"
    android:insetBottom="16dp">
  <shape android:shape="rectangle">
    <solid android:color="@color/alert_dialog_background" />
    <corners android:radius="24dp" />
  </shape>
</inset>
`;

const colorsFor = (appearance) => {
  const variables = themeVariables[appearance];
  return {
    background: variables["--color-card"],
    text: variables["--color-foreground"],
    secondaryText: variables["--color-foreground-secondary"],
    buttonText: variables["--color-primary-text"],
  };
};

const COLORS = { light: colorsFor("light"), night: colorsFor("dark") };

function assignStyleItem(style, name, value) {
  style.item = style.item ?? [];
  const existing = style.item.find((item) => item.$?.name === name);
  if (existing) {
    existing._ = value;
  } else {
    style.item.push({ _: value, $: { name } });
  }
}

function withAlertDialogStyles(config) {
  return withAndroidStyles(config, (config) => {
    const resources = config.modResults.resources;
    resources.style = resources.style ?? [];

    const appTheme = resources.style.find((style) => style.$?.name === "AppTheme");
    if (appTheme) {
      // React Native uses the AppCompat attr; platform dialogs need the framework attr too.
      assignStyleItem(appTheme, "alertDialogTheme", "@style/AppAlertDialog");
      assignStyleItem(appTheme, "android:alertDialogTheme", "@style/AppAlertDialog");
    }

    resources.style = resources.style.filter(
      (style) =>
        !["AppAlertDialog", "AppAlertDialog.Title", "AppAlertDialog.Button"].includes(
          style.$?.name,
        ),
    );
    resources.style.push(
      {
        $: { name: "AppAlertDialog", parent: "ThemeOverlay.AppCompat.Dialog.Alert" },
        item: [
          { _: "@drawable/alert_dialog_background", $: { name: "android:windowBackground" } },
          { _: "@color/alert_dialog_secondary_text", $: { name: "android:textColorPrimary" } },
          { _: "@color/alert_dialog_secondary_text", $: { name: "android:textColorSecondary" } },
          // Theme fontFamily covers text views without their own font, including the message body.
          { _: "@font/xml_dm_sans_regular", $: { name: "android:fontFamily" } },
          // AppCompat titles use android:windowTitleStyle; there is no unprefixed equivalent.
          { _: "@style/AppAlertDialog.Title", $: { name: "android:windowTitleStyle" } },
          { _: "@style/AppAlertDialog.Button", $: { name: "buttonBarPositiveButtonStyle" } },
          { _: "@style/AppAlertDialog.Button", $: { name: "buttonBarNegativeButtonStyle" } },
          { _: "@style/AppAlertDialog.Button", $: { name: "buttonBarNeutralButtonStyle" } },
        ],
      },
      {
        $: { name: "AppAlertDialog.Title", parent: "RtlOverlay.DialogWindowTitle.AppCompat" },
        item: [
          { _: "@font/dm_sans_500medium", $: { name: "android:fontFamily" } },
          { _: "18sp", $: { name: "android:textSize" } },
          { _: "@color/alert_dialog_text", $: { name: "android:textColor" } },
        ],
      },
      {
        $: {
          name: "AppAlertDialog.Button",
          parent: "Widget.AppCompat.Button.ButtonBar.AlertDialog",
        },
        item: [
          // Override AppCompat's hardcoded sans-serif-medium button font.
          { _: "@font/dm_sans_500medium", $: { name: "android:fontFamily" } },
          { _: "@color/alert_dialog_button_text", $: { name: "android:textColor" } },
          { _: "false", $: { name: "android:textAllCaps" } },
          { _: "0", $: { name: "android:letterSpacing" } },
        ],
      },
    );

    return config;
  });
}

function assignColors(colorsResource, palette) {
  let result = colorsResource;
  result = AndroidConfig.Colors.assignColorValue(result, {
    name: "alert_dialog_background",
    value: palette.background,
  });
  result = AndroidConfig.Colors.assignColorValue(result, {
    name: "alert_dialog_text",
    value: palette.text,
  });
  result = AndroidConfig.Colors.assignColorValue(result, {
    name: "alert_dialog_secondary_text",
    value: palette.secondaryText,
  });
  result = AndroidConfig.Colors.assignColorValue(result, {
    name: "alert_dialog_button_text",
    value: palette.buttonText,
  });
  return result;
}

function withAlertDialogColors(config) {
  config = withAndroidColors(config, (config) => {
    config.modResults = assignColors(config.modResults, COLORS.light);
    return config;
  });
  config = withAndroidColorsNight(config, (config) => {
    config.modResults = assignColors(config.modResults, COLORS.night);
    return config;
  });
  return config;
}

function withAlertDialogBackgroundDrawable(config) {
  return withDangerousMod(config, [
    "android",
    async (config) => {
      const drawableDir = path.join(
        config.modRequest.platformProjectRoot,
        "app",
        "src",
        "main",
        "res",
        "drawable",
      );
      fs.mkdirSync(drawableDir, { recursive: true });
      fs.writeFileSync(
        path.join(drawableDir, "alert_dialog_background.xml"),
        DIALOG_BACKGROUND_DRAWABLE,
      );
      return config;
    },
  ]);
}

module.exports = function withAndroidModernAlertDialog(config) {
  return withAlertDialogBackgroundDrawable(withAlertDialogColors(withAlertDialogStyles(config)));
};