Merge pull request #6 from blazejkustra/fix/is-preferred-on-web

refactor: allow for customizing preferred option on web

Author: blazejkustra

.cursor/mcp.json

@@ -11,7 +11,7 @@ export default function App() {
   const showAlert = () => {
     Alert.alert('Alert Title', 'This is a simple alert message', [
       { text: 'Cancel', style: 'cancel' },
-      { text: 'OK', style: 'default' },
+      { text: 'OK', style: 'default', isPreferred: true },
     ]);
   };
 

example/src/App.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@blazejkustra/react-native-alert",
-  "version": "1.0.0",
+  "version": "1.0.1-rc.0",
   "description": "Universal alerts for react native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -79,8 +79,8 @@
     "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-native": "0.81.1",
-    "react-native-builder-bob": "^0.40.13",
-    "release-it": "^19.0.4",
+    "react-native-builder-bob": "0.40.16",
+    "release-it": "19.0.6",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"
   },

package.json

@@ -60,6 +60,7 @@ class Alert {
         buttons: buttons.map((b) => ({
           text: b?.text ?? '',
           style: b?.style ?? 'default',
+          isPreferred: b?.isPreferred ?? false,
         })),
         type: type ?? 'plain-text',
         defaultValue: defaultValue ?? '',

src/Alert/index.ts

@@ -96,20 +96,36 @@ function createCustomButtons(
   buttons: AlertButton[] | null,
   inputField?: string
 ): void {
-  buttons?.forEach(({ text, style, onPress }, index) => {
+  buttons?.forEach(({ text, style, onPress, isPreferred }, index) => {
     const button = document.createElement('button');
     button.innerText = text || 'OK';
 
-    // Apply appropriate button styling
+    // Determine button variant based on priority:
+    // 1. Destructive style (highest priority)
+    // 2. Preferred button
+    // 3. Fallback: first button in 2-button dialog (if second isn't preferred)
+    // 4. Default: secondary
+    const baseClass = 'rn-alert__button';
+    let variantClass: string;
+
     if (style === 'destructive') {
-      button.className = 'rn-alert__button rn-alert__button--destructive';
-    } else if (index === 0 && buttons.length === 2) {
-      // First button in two-button dialog gets primary styling
-      button.className = 'rn-alert__button rn-alert__button--primary';
+      variantClass = 'rn-alert__button--destructive';
+    } else if (isPreferred === true) {
+      variantClass = 'rn-alert__button--primary';
     } else {
-      button.className = 'rn-alert__button rn-alert__button--secondary';
+      const isFirstButtonInTwoButtonDialog =
+        index === 0 && buttons.length === 2;
+      const secondButtonIsNotPreferred = buttons[1]?.isPreferred !== true;
+
+      if (isFirstButtonInTwoButtonDialog && secondButtonIsNotPreferred) {
+        variantClass = 'rn-alert__button--primary';
+      } else {
+        variantClass = 'rn-alert__button--secondary';
+      }
     }
 
+    button.className = `${baseClass} ${variantClass}`;
+
     button.addEventListener('click', () => {
       dialog.close();
       if (onPress) {