Initial commit of WooNooW Docs

contents/docs/developer/addons/bridge-pattern/index.mdx

@@ -0,0 +1,79 @@
+---
+title: Bridge Pattern
+description: Integrating third-party plugins with WooNooW
+date: 2024-01-31
+---
+
+# Addon Bridge Pattern
+
+## Philosophy
+
+**WooNooW Core = Zero Addon Dependencies**
+
+We don't integrate specific plugins into WooNooW core. Instead, we provide:
+1. **Hook system** for addons to extend functionality
+2. **Bridge snippets** for compatibility with existing plugins
+3. **Addon development guide** for building proper WooNooW addons
+
+---
+
+## The Problem
+
+Example: **Rajaongkir** (Indonesian Shipping Plugin).
+It removes standard fields and adds custom dropdowns, storing data in WooCommerce sessions.
+It doesn't work with WooNooW OrderForm out of the box because the OrderForm uses standard fields and API-based validation.
+
+---
+
+## Solution: Bridge Snippet
+
+### Option A: Standalone Bridge Plugin
+
+Create a tiny bridge plugin that makes the third-party plugin work with WooNooW.
+
+```php
+/**
+ * Plugin Name: WooNooW Rajaongkir Bridge
+ * Description: Makes Rajaongkir plugin work with WooNooW OrderForm
+ * Version: 1.0.0
+ */
+
+// Hook into WooNooW's shipping calculation
+add_filter('woonoow_before_shipping_calculate', function($shipping_data) {
+    if ($shipping_data['country'] === 'ID' && !empty($shipping_data['city'])) {
+        // Search API and set session data
+        $api = Cekongkir_API::get_instance();
+        $results = $api->search_destination_api($shipping_data['city']);
+        
+        if (!empty($results[0])) {
+            WC()->session->set('selected_destination_id', $results[0]['id']);
+        }
+    }
+    return $shipping_data;
+});
+```
+
+### Option B: Frontend Injection
+
+Inject script to handle UI changes.
+
+```typescript
+import { addonLoader, addFilter } from '@woonoow/hooks';
+
+addonLoader.register({
+  id: 'rajaongkir-bridge',
+  init: () => {
+    addFilter('woonoow_order_form_after_shipping', (content, formData, setFormData) => {
+      if (formData.shipping?.country !== 'ID') return content;
+      return (
+        <>
+          {content}
+          <div className="custom-field">
+             {/* Custom Destination Select */}
+          </div>
+        </>
+      );
+    });
+  }
+});
+```