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>
+        </>
+      );
+    });
+  }
+});
+```

contents/docs/developer/addons/module-integration/index.mdx

@@ -0,0 +1,50 @@
+---
+title: Module Integration
+description: Integrating Addons usage with Module Registry
+date: 2024-01-31
+---
+
+# Addon-Module Integration
+
+## Vision
+
+**Module Registry as the Single Source of Truth.**
+Functionality extensions—whether built-in Modules or external Addons—should live in the same UI.
+
+## Registration
+
+Addons register themselves via the `woonoow/addon_registry` filter.
+
+```php
+add_filter('woonoow/addon_registry', function($addons) {
+    $addons['my-shipping-addon'] = [
+        'id'           => 'my-shipping-addon',
+        'name'         => 'My Shipping',
+        'description'  => 'Custom shipping integration',
+        'version'      => '1.0.0',
+        'author'       => 'My Company',
+        'category'     => 'shipping',
+        'icon'         => 'truck',
+        'settings_url' => '/settings/shipping/my-addon',
+        'spa_bundle'   => plugin_dir_url(__FILE__) . 'dist/addon.js',
+    ];
+    return $addons;
+});
+```
+
+This ensures your addon appears in the **WooNooW Modules** list with a consistent UI, toggle switch, and settings link.
+
+## Settings Pages
+
+Addons can register their own SPA routes for settings pages.
+
+```php
+add_filter('woonoow/spa_routes', function($routes) {
+    $routes[] = [
+        'path'          => '/settings/shipping/my-addon',
+        'component_url' => plugin_dir_url(__FILE__) . 'dist/Settings.js',
+        'title'         => 'My Addon Settings',
+    ];
+    return $routes;
+});
+```

contents/docs/developer/addons/react-integration/index.mdx

@@ -0,0 +1,79 @@
+---
+title: React Integration
+description: Using React within WooNooW Addons
+date: 2024-01-31
+---
+
+# Addon React Integration
+
+## The Challenge
+
+External addons cannot bundle React because WooNooW already ships with a React runtime. Bundling it again would cause conflicts and bloat.
+
+## Solution: Exposed Runtime
+
+WooNooW exposes its React instance and Component library on the `window` object.
+
+### Core Setup (How it works internally)
+
+```typescript
+// WooNooW Core
+window.WooNooW = {
+  React: React,
+  ReactDOM: ReactDOM,
+  components: {
+    Button: Button,
+    Input: Input,
+    Select: Select,
+  },
+  hooks: { addFilter, addAction }
+};
+```
+
+### Addon implementation
+
+#### Level 1: Vanilla JS (No Build)
+
+Good for simple injections.
+
+```javascript
+(function() {
+  window.addEventListener('woonoow:loaded', function() {
+    window.WooNooW.addFilter('woonoow_order_form_after_shipping', function(container) {
+      // Manual DOM manipulation
+      return container;
+    });
+  });
+})();
+```
+
+#### Level 2: React with Build (Recommended)
+
+Use `vite` or `webpack` and configure React as an **external**.
+
+**vite.config.js**
+```javascript
+export default {
+  build: {
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'window.WooNooW.React',
+          'react-dom': 'window.WooNooW.ReactDOM'
+        }
+      }
+    }
+  }
+};
+```
+
+**Index.tsx**
+```typescript
+const { React, hooks, components } = window.WooNooW;
+const { Button } = components;
+
+function MyAddonComponent() {
+  return <Button>Click Me</Button>;
+}
+```