From 1618ec1f45c6ce9147d5c888dd1e7accfa57dc60 Mon Sep 17 00:00:00 2001
From: Peter Thomson <p.thomson@theicehouse.co.nz>
Date: Wed, 22 May 2024 20:30:29 +1200
Subject: [PATCH] Dark mode and themes in basic component with slots.

---
 README.md                                     | 43 ++++++++++++++++++-
 src/Support/Builder.php                       | 14 +++---
 src/Themes/darkmode.json                      | 12 ++++++
 .../views/components/component.blade.php      | 11 +++--
 4 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 src/Themes/darkmode.json

diff --git a/README.md b/README.md
index d020600..12a76fb 100644
--- a/README.md
+++ b/README.md
@@ -195,7 +195,7 @@ $data = app('mermaid')->generateDiagramFromArray($data);
 
 
 ## Configuration
-You can publish the configuration file using the following command:
+You can customize the Mermaid configuration by publishing the `mermaid.php` config file and changing the settings as needed. You can publish the configuration file using the following command:
 
 ```bash
 php artisan vendor:publish --provider="IcehouseVentures\LaravelMermaid\ServiceProvider" --tag="config"
@@ -212,6 +212,47 @@ You can also set the canvas style for the Mermaid diagram by passing in a class
 <x-mermaid::component :data="$data" class="border rounded p-2" />
 ```
 
+## Livewire
+
+This package includes a Livewire compatible component that will re-render a diagram when a property on your Livewire component is updated. Here's an example of using this in a Livewire component when when you increase the 'limit', more users will be loaded and added to the diagram.
+
+```php
+
+// Your Livewire Class:
+<?php
+
+namespace App\Livewire;
+
+use App\Models\User;
+use Livewire\Component;
+
+class Mermaid extends Component
+{
+    public $limit = 2;
+
+    public $mermaid;
+
+    public function render()
+    {
+        $this->mermaid = app('mermaid')->generateDiagramFromCollection(
+            User::with('posts')->limit($this->limit)->get()
+        );
+
+        return view('livewire.mermaid');
+    }
+}
+
+// Your Livewire View:
+<div>
+    <x-mermaid::livewire-component wire:model="mermaid" />
+
+    <div>
+        <label for="limit">Limit:</label>
+        <input wire:model.live="limit" id="limit" type="number">
+    </div>
+</div>
+```
+
 
 ## Background
 Icehouse Ventures is an early-stage venture capital firm based in New Zealand. We have an in-house technology platform built using Laravel and created this package to help streamline the generation of flowcharts, process diagrams and data visualisations inside our application using dynamic data. 
diff --git a/src/Support/Builder.php b/src/Support/Builder.php
index 6d85bdd..e784803 100644
--- a/src/Support/Builder.php
+++ b/src/Support/Builder.php
@@ -31,9 +31,9 @@ protected static function setDiagramType(?string $type): string
     }
 
     // Set the theme for the diagram
-    public static function setTheme(string $theme): string
+    public static function setTheme(?string $theme = null): ?string
     {
-        $theme = config('mermaid.theme');
+        $theme = $theme ?? config('mermaid.theme');
     
         if (in_array($theme, ['base', 'forest', 'dark', 'neutral', 'default'])) {
             return "%%{\n  
@@ -41,13 +41,17 @@ public static function setTheme(string $theme): string
             }%%\n";
         }
 
-        $themeFile = config('mermaid.themeFile');
+        $themeFile = $theme ?? config('mermaid.themeFile');
+        
+        $themeFileExtension = str_ends_with($themeFile, '.json') ? $themeFile : $themeFile.'.json';
+        
+        $themeFilePath = __DIR__ . '/../Themes/' . $themeFileExtension;
 
-        if (!file_exists(__DIR__ . '/../Themes/' . $themeFile)) {
+        if (!file_exists($themeFilePath)) {
             return null;
         }
         
-        $themeConfig = json_decode(file_get_contents(__DIR__ . '/../Themes/' . $themeFile), true);
+        $themeConfig = json_decode(file_get_contents($themeFilePath), true);
         
         $themeJson = json_encode($themeConfig);
         
diff --git a/src/Themes/darkmode.json b/src/Themes/darkmode.json
new file mode 100644
index 0000000..5d71da5
--- /dev/null
+++ b/src/Themes/darkmode.json
@@ -0,0 +1,12 @@
+{
+  "theme": "base",
+  "themeName": "Dark Mode",
+  "themeVariables": {
+    "primaryColor": "#212529",
+    "primaryBorderColor": "#343a40",
+    "primaryTextColor": "#f8f9fa",
+    "lineColor": "#000000",
+    "secondaryColor": "#495057",
+    "tertiaryColor": "#212529"
+  } 
+}
\ No newline at end of file
diff --git a/src/resources/views/components/component.blade.php b/src/resources/views/components/component.blade.php
index 2781027..6bf9aa1 100644
--- a/src/resources/views/components/component.blade.php
+++ b/src/resources/views/components/component.blade.php
@@ -1,9 +1,13 @@
 <div class="mermaid {{ $class ?? '' }}">
-    {{ isset($data) ? $data : $slot }}
+    @if(isset($data))
+    {{ $data }}
+    @else
+        {{ \IcehouseVentures\LaravelMermaid\Support\Builder::setTheme($theme ?? '') }}
+        {{ $slot }}
+    @endif
 </div>
 
 @once
-    
     <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 
     <script>
@@ -11,5 +15,4 @@
             startOnLoad: true
         });
     </script>
-
-@endonce
+@endonce
\ No newline at end of file