Extend demos (#441)

* Add updated demo templates

* Add mantine component example

* Fix file header

---------

Co-authored-by: delsim <dev@gibbsconsulting.ca>

Author: delsim

demo/demo/mantine_example.py

@@ -0,0 +1,38 @@
+'''
+Dash apps for the demonstration of functionality
+
+Copyright (c) 2023 Gibbs Consulting and others - see CONTRIBUTIONS.md
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+'''
+
+from dash import dcc, html
+from django_plotly_dash import DjangoDash
+
+import dash_mantine_components as dmc
+
+
+mantine_example = DjangoDash("MantineExample")
+
+
+mantine_example.layout = dmc.Alert(
+    "Hi from Dash Mantine Components. You can create some great looking dashboards using me!",
+    title="Welcome!",
+    color="violet",
+)

demo/demo/plotly_apps.py

@@ -461,3 +461,5 @@ def pattern_match(values):
     [dash.dependencies.Input({"_type": "div", "_id": ALL}, 'children')])
 def pattern_all(values):
     return str(values)
+
+

demo/demo/scaffold.py

@@ -5,10 +5,11 @@
 
 from demo.plotly_apps import multiple_callbacks, flexible_expanded_callbacks
 
+
 def stateless_app_loader(app_name):
 
     # Load a stateless app
     return import_string("demo.scaffold." + app_name)
 
-demo_app = DjangoDash(name="name_of_demo_app")
 
+demo_app = DjangoDash(name="name_of_demo_app")

demo/demo/templates/demo_eleven.html

@@ -0,0 +1,28 @@
+{%extends "base.html"%}
+{%load plotly_dash%}
+
+{%block title%}Demo Eleven - Dash Mantine Components{%endblock%}
+
+{%block content%}
+<h1>Dash Mantine Components</h1>
+<p>
+  This example demonstrates serving Dash Mantine Components within a Dash app.
+</p>
+<p></p>
+<div class="card bg-light border-dark">
+  <div class="card-body">
+    <p><span>{</span>% load plotly_dash %}</p>
+    <p>&lt;div class="<span>{</span>% plotly_class name="MantineExample"%}">
+    <p class="ml-3"><span>{</span>% plotly_app name="MantineExample" ratio=0.3 %}</p>
+    <p>&lt;\div>
+  </div>
+</div>
+<p></p>
+<div class="card border-dark">
+  <div class="card-body">
+    <div class="{%plotly_class name="MantineExample"%}">
+      {%plotly_app name="MantineExample" ratio=0.3 %}
+    </div>
+  </div>
+</div>
+{%endblock%}

demo/demo/templates/demo_ten.html

@@ -35,4 +35,10 @@ <h1>Multiple Callback Values</h1>
   </div>
 </div>
 <p></p>
+<div class="card border-dark">
+  <div class="card-body">
+    {%plotly_app name="FlexibleExpandedCallbacks" ratio=0.2 %}
+  </div>
+</div>
+<p></p>
 {%endblock%}

demo/demo/templates/index.html

@@ -48,6 +48,10 @@ <h1>Demonstration Application</h1>
         <td><a class="btn btn-primary btn-block" href="{%url "demo-ten"%}">Demo Ten</a></td>
         <td>Callback with multiple return values</td>
       </tr>
+      <tr>
+        <td><a class="btn btn-primary btn-block" href="{%url "demo-eleven"%}">Demo Eleven</a></td>
+        <td>Dash Mantine Components</td>
+      </tr>
     </tbody>
   </table>
 {%endblock%}

demo/demo/urls.py

@@ -26,14 +26,17 @@
 from django.conf.urls.static import static
 
 # Load demo plotly apps - this triggers their registration
-import demo.plotly_apps    # pylint: disable=unused-import
-import demo.dash_apps      # pylint: disable=unused-import
-import demo.bootstrap_app  # pylint: disable=unused-import
+import demo.plotly_apps      # pylint: disable=unused-import
+import demo.dash_apps        # pylint: disable=unused-import
+import demo.bootstrap_app    # pylint: disable=unused-import
+import demo.mantine_example  # pylint: disable=unused-import
+
 
 from django_plotly_dash.views import add_to_session
 
 from .views import dash_example_1_view, session_state_view
 
+
 urlpatterns = [
     path('', TemplateView.as_view(template_name='index.html'), name="home"),
     path('demo-one', TemplateView.as_view(template_name='demo_one.html'), name="demo-one"),
@@ -46,12 +49,14 @@
     path('demo-eight', session_state_view, {'template_name':'demo_eight.html'}, name="demo-eight"),
     path('demo-nine', TemplateView.as_view(template_name='demo_nine.html'), name="demo-nine"),
     path('demo-ten', TemplateView.as_view(template_name='demo_ten.html'), name="demo-ten"),
+    path('demo-eleven', TemplateView.as_view(template_name='demo_eleven.html'), name="demo-eleven"),
     path('admin/', admin.site.urls),
     path('django_plotly_dash/', include('django_plotly_dash.urls')),
 
     path('demo-session-var', add_to_session, name="session-variable-example"),
 ]
 
+
 # Add in static routes so daphne can serve files; these should
 # be masked eg with nginx for production use