nn-widgets 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nn-widgets",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Expo config plugin for adding native widgets (iOS WidgetKit & Android App Widgets)",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/plugin/build/withAndroidWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withAndroidWidget.d.ts","sourceRoot":"","sources":["../src/withAndroidWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,sBAAsB,CAAC;AAGzE,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,SAAS,CAAC;AA+hBjB,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,oBAAoB,CAuNhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"withAndroidWidget.d.ts","sourceRoot":"","sources":["../src/withAndroidWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,sBAAsB,CAAC;AAGzE,OAAO,KAAK,EACV,oBAAoB,EAGrB,MAAM,SAAS,CAAC;AAmgCjB,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAAC,oBAAoB,CAyQhE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/plugin/build/withAndroidWidget.js

@@ -39,6 +39,38 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const withIosWidget_1 = require("./withIosWidget");
 // ──────────────────────────────────────────────
+//  Constants and helpers
+// ──────────────────────────────────────────────
+// Material background names that should use blur effect on Android 12+
+const BLUR_BACKGROUNDS = [
+    "blur",
+    "ultraThinMaterial",
+    "thinMaterial",
+    "regularMaterial",
+    "thickMaterial",
+    "ultraThickMaterial",
+];
+/**
+ * Check if backgroundColor should use blur effect
+ */
+function isBlurBackground(bgColor) {
+    return bgColor ? BLUR_BACKGROUNDS.includes(bgColor) : false;
+}
+/**
+ * Resolve Android background attribute for XML.
+ * - If blur/material: use system widget background (API 31+) or transparent
+ * - Otherwise: use the color directly
+ */
+function resolveAndroidBackground(bgColor) {
+    if (!bgColor)
+        return "#FFFFFF";
+    if (isBlurBackground(bgColor)) {
+        // Will be handled by drawable resource
+        return "@drawable/widget_blur_background";
+    }
+    return bgColor;
+}
+// ──────────────────────────────────────────────
 //  Code generation helpers (per widget)
 // ──────────────────────────────────────────────
 function generateWidgetProviderCode(w, packageName, deepLinkUrl) {
@@ -286,6 +318,264 @@ class ${w.name}Provider : AppWidgetProvider() {
         }
     }
 }
+`;
+    }
+    // ── Flex-grid type provider ──
+    if (w.type === "flex-grid") {
+        const bgColor = w.style?.backgroundColor || "#FFFFFF";
+        const titleColor = w.style?.titleColor
+            ? `android.graphics.Color.parseColor("${w.style.titleColor}")`
+            : "android.graphics.Color.BLACK";
+        const subtitleColor = w.style?.subtitleColor
+            ? `android.graphics.Color.parseColor("${w.style.subtitleColor}")`
+            : "android.graphics.Color.GRAY";
+        const accentColor = w.style?.accentColor
+            ? `android.graphics.Color.parseColor("${w.style.accentColor}")`
+            : 'android.graphics.Color.parseColor("#6200EE")';
+        return `package ${packageName}.widget
+
+import android.app.PendingIntent
+import android.appwidget.AppWidgetManager
+import android.appwidget.AppWidgetProvider
+import android.content.Context
+import android.content.Intent
+import android.view.View
+import android.widget.RemoteViews
+import ${packageName}.MainActivity
+import ${packageName}.R
+import org.json.JSONArray
+import org.json.JSONObject
+
+/**
+ * ${w.name} - Flex Grid Widget Provider
+ * Auto-generated by nn-widgets
+ */
+class ${w.name}Provider : AppWidgetProvider() {
+
+    companion object {
+        const val PREFS_NAME = "nn_widgets_data"
+        const val MAX_ROWS = 4
+        const val MAX_COLS = 4
+    }
+
+    override fun onUpdate(
+        context: Context,
+        appWidgetManager: AppWidgetManager,
+        appWidgetIds: IntArray
+    ) {
+        for (appWidgetId in appWidgetIds) {
+            updateAppWidget(context, appWidgetManager, appWidgetId)
+        }
+    }
+
+    override fun onEnabled(context: Context) {}
+    override fun onDisabled(context: Context) {}
+
+    override fun onReceive(context: Context, intent: Intent) {
+        super.onReceive(context, intent)
+        if (intent.action == "\${context.packageName}.WIDGET_UPDATE_${w.name.toUpperCase()}") {
+            val appWidgetManager = AppWidgetManager.getInstance(context)
+            val thisWidget = android.content.ComponentName(context, ${w.name}Provider::class.java)
+            val appWidgetIds = appWidgetManager.getAppWidgetIds(thisWidget)
+            onUpdate(context, appWidgetManager, appWidgetIds)
+        }
+    }
+
+    private fun updateAppWidget(
+        context: Context,
+        appWidgetManager: AppWidgetManager,
+        appWidgetId: Int
+    ) {
+        val prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
+        val views = RemoteViews(context.packageName, R.layout.${w.name.toLowerCase()}_layout)
+        
+        // Read items and layout JSON (same API as iOS)
+        val itemsJson = prefs.getString("widget_${w.name}_items", null)
+        val layoutJson = prefs.getString("widget_${w.name}_layout", null)
+        val title = prefs.getString("widget_${w.name}_title", "${w.fallbackTitle}") ?: "${w.fallbackTitle}"
+        val subtitle = prefs.getString("widget_${w.name}_subtitle", "${w.fallbackSubtitle}") ?: "${w.fallbackSubtitle}"
+
+        if (itemsJson != null && layoutJson != null) {
+            try {
+                val items = JSONArray(itemsJson)
+                val layoutObj = JSONObject(layoutJson)
+                // Get layout for systemSmall (default) - same as iOS
+                val layout = layoutObj.optJSONArray("systemSmall") ?: JSONArray("[[1]]")
+                
+                // Hide fallback, show grid
+                views.setViewVisibility(R.id.widget_fallback, View.GONE)
+                views.setViewVisibility(R.id.widget_grid_container, View.VISIBLE)
+                
+                // Clear existing rows
+                views.removeAllViews(R.id.widget_grid_container)
+                
+                var itemIndex = 0
+                val rowCount = minOf(layout.length(), MAX_ROWS)
+                
+                for (rowIdx in 0 until rowCount) {
+                    val rowRatios = layout.optJSONArray(rowIdx) ?: continue
+                    val colCount = minOf(rowRatios.length(), MAX_COLS)
+                    
+                    // Create row container
+                    val rowView = RemoteViews(context.packageName, R.layout.${w.name.toLowerCase()}_row)
+                    
+                    for (colIdx in 0 until colCount) {
+                        val ratio = rowRatios.optDouble(colIdx, 1.0)
+                        val isListStyle = ratio >= 1.0
+                        
+                        if (itemIndex < items.length()) {
+                            val item = items.getJSONObject(itemIndex)
+                            val cellView = if (isListStyle) {
+                                createListStyleCell(context, item, itemIndex)
+                            } else {
+                                createCardStyleCell(context, item, itemIndex)
+                            }
+                            rowView.addView(R.id.row_container, cellView)
+                        }
+                        itemIndex++
+                    }
+                    
+                    views.addView(R.id.widget_grid_container, rowView)
+                }
+            } catch (e: Exception) {
+                android.util.Log.e("${w.name}Provider", "Error parsing widget data", e)
+                showFallback(views, title, subtitle)
+            }
+        } else {
+            showFallback(views, title, subtitle)
+        }
+
+        // Widget-level click
+        ${intentCode}
+        val pendingIntent = PendingIntent.getActivity(
+            context, 100, intent,
+            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
+        )
+        views.setOnClickPendingIntent(R.id.widget_container, pendingIntent)
+
+        appWidgetManager.updateAppWidget(appWidgetId, views)
+    }
+    
+    private fun createListStyleCell(context: Context, item: JSONObject, index: Int): RemoteViews {
+        val cellView = RemoteViews(context.packageName, R.layout.${w.name.toLowerCase()}_cell_list)
+        
+        // Parse title
+        val itemTitle = parseTextValue(item, "title")
+        cellView.setTextViewText(R.id.cell_title, itemTitle)
+        cellView.setTextColor(R.id.cell_title, ${titleColor})
+        
+        // Parse description
+        val itemDesc = parseTextValue(item, "description")
+        if (itemDesc.isNotEmpty()) {
+            cellView.setTextViewText(R.id.cell_description, itemDesc)
+            cellView.setTextColor(R.id.cell_description, ${subtitleColor})
+            cellView.setViewVisibility(R.id.cell_description, View.VISIBLE)
+        } else {
+            cellView.setViewVisibility(R.id.cell_description, View.GONE)
+        }
+        
+        // Parse icon
+        setupIcon(context, cellView, item, R.id.cell_icon)
+        
+        // Deep link
+        setupDeepLink(context, cellView, item, index, R.id.cell_container)
+        
+        return cellView
+    }
+    
+    private fun createCardStyleCell(context: Context, item: JSONObject, index: Int): RemoteViews {
+        val cellView = RemoteViews(context.packageName, R.layout.${w.name.toLowerCase()}_cell_card)
+        
+        // Parse title (smaller for card style)
+        val itemTitle = parseTextValue(item, "title")
+        cellView.setTextViewText(R.id.cell_title, itemTitle)
+        cellView.setTextColor(R.id.cell_title, ${titleColor})
+        
+        // Parse icon (larger for card style)
+        setupIcon(context, cellView, item, R.id.cell_icon)
+        
+        // Deep link
+        setupDeepLink(context, cellView, item, index, R.id.cell_container)
+        
+        return cellView
+    }
+    
+    private fun setupIcon(context: Context, views: RemoteViews, item: JSONObject, iconViewId: Int) {
+        val iconName = parseIconName(item)
+        if (iconName.isNotEmpty()) {
+            // Try to load from drawable resources
+            val resId = context.resources.getIdentifier(
+                iconName.replace("-", "_").lowercase(),
+                "drawable",
+                context.packageName
+            )
+            if (resId != 0) {
+                views.setImageViewResource(iconViewId, resId)
+                views.setViewVisibility(iconViewId, View.VISIBLE)
+            } else {
+                // Fallback to a default icon or hide
+                views.setViewVisibility(iconViewId, View.GONE)
+            }
+        } else {
+            views.setViewVisibility(iconViewId, View.GONE)
+        }
+    }
+    
+    private fun setupDeepLink(context: Context, views: RemoteViews, item: JSONObject, index: Int, containerId: Int) {
+        val deepLink = item.optString("deepLink", "")
+        if (deepLink.isNotEmpty()) {
+            val itemIntent = Intent(Intent.ACTION_VIEW, android.net.Uri.parse(deepLink)).apply {
+                flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP
+            }
+            val pendingIntent = PendingIntent.getActivity(
+                context, index, itemIntent,
+                PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
+            )
+            views.setOnClickPendingIntent(containerId, pendingIntent)
+        }
+    }
+    
+    private fun showFallback(views: RemoteViews, title: String, subtitle: String) {
+        views.setViewVisibility(R.id.widget_fallback, View.VISIBLE)
+        views.setViewVisibility(R.id.widget_grid_container, View.GONE)
+        views.setTextViewText(R.id.fallback_title, title)
+        views.setTextColor(R.id.fallback_title, ${titleColor})
+        views.setTextViewText(R.id.fallback_subtitle, subtitle)
+        views.setTextColor(R.id.fallback_subtitle, ${subtitleColor})
+    }
+    
+    private fun parseTextValue(item: JSONObject, key: String): String {
+        return when {
+            item.has(key) && item.get(key) is String -> item.getString(key)
+            item.has(key) && item.get(key) is JSONObject -> item.getJSONObject(key).optString("text", "")
+            else -> ""
+        }
+    }
+    
+    private fun parseIconName(item: JSONObject): String {
+        if (!item.has("icon")) return ""
+        return when {
+            item.get("icon") is String -> {
+                val iconStr = item.getString("icon")
+                // Extract filename from URL if it's a URL
+                if (iconStr.startsWith("http")) {
+                    iconStr.substringAfterLast("/").substringBeforeLast(".")
+                } else {
+                    iconStr
+                }
+            }
+            item.get("icon") is JSONObject -> {
+                val iconUrl = item.getJSONObject("icon").optString("url", "")
+                if (iconUrl.startsWith("http")) {
+                    iconUrl.substringAfterLast("/").substringBeforeLast(".")
+                } else {
+                    iconUrl
+                }
+            }
+            else -> ""
+        }
+    }
+}
 `;
     }
     // ── Single-type provider (default) ──
@@ -388,7 +678,7 @@ function generateWidgetLayoutXml(w) {
     }
     // ── List layout ──
     if (w.type === "list") {
-        const bgColor = w.style?.backgroundColor || "#FFFFFF";
+        const bgColor = resolveAndroidBackground(w.style?.backgroundColor);
         const titleColor = w.style?.titleColor || "#000000";
         const subtitleColor = w.style?.subtitleColor || "#888888";
         return `<?xml version="1.0" encoding="utf-8"?>
@@ -436,11 +726,64 @@ function generateWidgetLayoutXml(w) {
         android:orientation="vertical"
         android:visibility="gone" />
 
+</LinearLayout>
+`;
+    }
+    // ── Flex-grid layout ──
+    if (w.type === "flex-grid") {
+        const bgColor = resolveAndroidBackground(w.style?.backgroundColor);
+        const titleColor = w.style?.titleColor || "#000000";
+        const subtitleColor = w.style?.subtitleColor || "#888888";
+        return `<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/widget_container"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    android:padding="8dp"
+    android:background="${bgColor}">
+
+    <!-- Fallback view (shown when no data) -->
+    <LinearLayout
+        android:id="@+id/widget_fallback"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:gravity="center"
+        android:visibility="visible">
+
+        <TextView
+            android:id="@+id/fallback_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="${w.fallbackTitle}"
+            android:textSize="16sp"
+            android:textStyle="bold"
+            android:textColor="${titleColor}" />
+
+        <TextView
+            android:id="@+id/fallback_subtitle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="4dp"
+            android:text="${w.fallbackSubtitle}"
+            android:textSize="12sp"
+            android:textColor="${subtitleColor}" />
+    </LinearLayout>
+
+    <!-- Grid container (populated dynamically with rows) -->
+    <LinearLayout
+        android:id="@+id/widget_grid_container"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical"
+        android:visibility="gone" />
+
 </LinearLayout>
 `;
     }
     // ── Single (default) styled text layout ──
-    const bgColor = w.style?.backgroundColor || "#FFFFFF";
+    const bgColor = resolveAndroidBackground(w.style?.backgroundColor);
     const titleColor = w.style?.titleColor || "#000000";
     const subtitleColor = w.style?.subtitleColor || "#888888";
     const accentColor = w.style?.accentColor || "#6200EE";
@@ -536,6 +879,133 @@ function generateWidgetItemLayoutXml(w) {
 </LinearLayout>
 `;
 }
+/** Generate row layout XML for flex-grid widgets */
+function generateFlexGridRowLayoutXml(w) {
+    return `<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/row_container"
+    android:layout_width="match_parent"
+    android:layout_height="0dp"
+    android:layout_weight="1"
+    android:orientation="horizontal"
+    android:gravity="center" />
+`;
+}
+/** Generate list-style cell layout XML for flex-grid widgets */
+function generateFlexGridCellListLayoutXml(w) {
+    const titleColor = w.style?.titleColor || "#000000";
+    const subtitleColor = w.style?.subtitleColor || "#888888";
+    const accentColor = w.style?.accentColor || "#6200EE";
+    return `<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/cell_container"
+    android:layout_width="0dp"
+    android:layout_height="match_parent"
+    android:layout_weight="1"
+    android:orientation="horizontal"
+    android:gravity="center_vertical"
+    android:paddingHorizontal="6dp"
+    android:paddingVertical="4dp">
+
+    <ImageView
+        android:id="@+id/cell_icon"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
+        android:layout_marginEnd="8dp"
+        android:scaleType="centerCrop"
+        android:visibility="gone" />
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1"
+        android:orientation="vertical">
+
+        <TextView
+            android:id="@+id/cell_title"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textSize="13sp"
+            android:textStyle="bold"
+            android:textColor="${titleColor}"
+            android:maxLines="1"
+            android:ellipsize="end" />
+
+        <TextView
+            android:id="@+id/cell_description"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textSize="11sp"
+            android:textColor="${subtitleColor}"
+            android:maxLines="1"
+            android:ellipsize="end"
+            android:visibility="gone" />
+    </LinearLayout>
+
+</LinearLayout>
+`;
+}
+/** Generate card-style cell layout XML for flex-grid widgets */
+function generateFlexGridCellCardLayoutXml(w) {
+    const titleColor = w.style?.titleColor || "#000000";
+    const accentColor = w.style?.accentColor || "#6200EE";
+    return `<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/cell_container"
+    android:layout_width="0dp"
+    android:layout_height="match_parent"
+    android:layout_weight="1"
+    android:orientation="vertical"
+    android:gravity="center"
+    android:padding="4dp">
+
+    <ImageView
+        android:id="@+id/cell_icon"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:scaleType="centerCrop"
+        android:visibility="gone" />
+
+    <TextView
+        android:id="@+id/cell_title"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:textSize="10sp"
+        android:textColor="${titleColor}"
+        android:maxLines="2"
+        android:ellipsize="end"
+        android:gravity="center" />
+
+</LinearLayout>
+`;
+}
+/**
+ * Generate blur background drawable for API 31+ (Android 12+)
+ * Uses the system widget background with rounded corners
+ */
+function generateBlurBackgroundDrawableV31() {
+    return `<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="16dp" />
+    <solid android:color="@android:color/system_accent1_50" />
+</shape>
+`;
+}
+/**
+ * Generate blur background drawable for pre-API 31 (fallback)
+ * Uses semi-transparent white with rounded corners
+ */
+function generateBlurBackgroundDrawableFallback() {
+    return `<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="16dp" />
+    <solid android:color="#E6FFFFFF" />
+</shape>
+`;
+}
 function generateWidgetInfoXml(w, updatePeriodMillis) {
     return `<?xml version="1.0" encoding="utf-8"?>
 <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
@@ -567,17 +1037,29 @@ const withAndroidWidget = (config, props = {}) => {
         const resXmlPath = path.join(androidPath, "res", "xml");
         const resValuesPath = path.join(androidPath, "res", "values");
         const resDrawablePath = path.join(androidPath, "res", "drawable");
+        const resDrawableV31Path = path.join(androidPath, "res", "drawable-v31");
         [
             widgetPackagePath,
             resLayoutPath,
             resXmlPath,
             resValuesPath,
             resDrawablePath,
+            resDrawableV31Path,
         ].forEach((dir) => {
             if (!fs.existsSync(dir)) {
                 fs.mkdirSync(dir, { recursive: true });
             }
         });
+        // Check if any widget uses blur background
+        const hasBlurWidget = resolvedProps.widgets.some((w) => isBlurBackground(w.style?.backgroundColor));
+        // Generate blur background drawables if needed
+        if (hasBlurWidget) {
+            // Fallback drawable (pre-API 31)
+            fs.writeFileSync(path.join(resDrawablePath, "widget_blur_background.xml"), generateBlurBackgroundDrawableFallback());
+            // API 31+ drawable
+            fs.writeFileSync(path.join(resDrawableV31Path, "widget_blur_background.xml"), generateBlurBackgroundDrawableV31());
+            console.log("[nn-widgets] Generated Android blur background drawables");
+        }
         // Generate files for each widget
         for (const w of resolvedProps.widgets) {
             // Widget provider Kotlin
@@ -591,6 +1073,19 @@ const withAndroidWidget = (config, props = {}) => {
                 const itemLayoutXml = generateWidgetItemLayoutXml(w);
                 fs.writeFileSync(path.join(resLayoutPath, `${w.name.toLowerCase()}_item.xml`), itemLayoutXml);
             }
+            // Flex-grid layouts (row, card cell, list cell)
+            if (w.type === "flex-grid") {
+                // Row layout
+                const rowLayoutXml = generateFlexGridRowLayoutXml(w);
+                fs.writeFileSync(path.join(resLayoutPath, `${w.name.toLowerCase()}_row.xml`), rowLayoutXml);
+                // Card cell layout (icon on top, text below)
+                const cellCardLayoutXml = generateFlexGridCellCardLayoutXml(w);
+                fs.writeFileSync(path.join(resLayoutPath, `${w.name.toLowerCase()}_cell_card.xml`), cellCardLayoutXml);
+                // List cell layout (icon left, text right)
+                const cellListLayoutXml = generateFlexGridCellListLayoutXml(w);
+                fs.writeFileSync(path.join(resLayoutPath, `${w.name.toLowerCase()}_cell_list.xml`), cellListLayoutXml);
+                console.log(`[nn-widgets] Generated Android flex-grid layouts for ${w.name}`);
+            }
             // Widget info XML
             const widgetInfoXml = generateWidgetInfoXml(w, resolvedProps.android.updatePeriodMillis);
             fs.writeFileSync(path.join(resXmlPath, `${w.name.toLowerCase()}_info.xml`), widgetInfoXml);