feat(storybook): add a lightweight "storybook" route so we can test c…

…omponents more easily

app/main/__init__.py

@@ -29,6 +29,7 @@
     set_lang,
     sign_in,
     sign_out,
+    storybook,
     styleguide,
     templates,
     two_factor,

app/main/views/storybook.py

@@ -0,0 +1,12 @@
+from flask import render_template, request
+
+from app.main import main
+
+
+@main.route("/_storybook")
+def storybook():
+    component = None
+    if "component" in request.args:
+        component = request.args["component"]
+
+    return render_template("views/storybook.html", component=component)

app/templates/views/storybook.html

@@ -0,0 +1,29 @@
+{% extends "admin_template.html" %}
+{% from 'views/storybook/storybook-menu.html' import storybook_menu %}
+
+{% block page_title %} Storybook {% endblock %}
+
+{% block maincolumn_content %}
+<style>
+  .container {
+    max-width: 1536px;
+  }
+</style>
+
+<div class="flex">
+  <!-- Left Column -->
+  <div class="w-1/4 p-4 bg-gray-100">
+    <h2 class="text-lg font-bold mb-4">Components</h2>
+    {{ storybook_menu() }}
+  </div>
+
+  <!-- Main Content Area -->
+  <div class="w-3/4 p-4">
+    {% if component %}
+      {% include 'views/storybook/' ~ component ~ '.html' %}
+    {% else %}
+      <p>Choose a component</p>
+    {% endif %}
+  </div>
+
+  {% endblock %}

app/templates/views/storybook/remaining-messages-summary.html

@@ -0,0 +1,78 @@
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary with context %}
+
+    <h1><pre>remaining_messages_summary</pre></h1>
+    <hr />
+    <h2 class="heading-medium">Below limits</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-checks">
+
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(1000, 799, 1000, 799, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(10000, 699, 10000, 699, "sms") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(1000, 0, 1000, 0, "email") }}
+        </div>
+    </div>
+
+    <h2 class="heading-medium">Warning</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-warnings">
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 800, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 900, 1000, 900, "email") }}
+        </div>
+    </div>
+
+    <h2 class="heading-medium">At both limits</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-both-limits">
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+        </div>
+    </div>
+
+    <h2 class="heading-medium">Mixed</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-both-limits">
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 100, 1000, 1000, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 100, "email") }}
+        </div>
+    </div>
+
+    <h2 class="heading-medium">Text only</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-at-limit">at limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "text") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-below-limit">below limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(10000, 700, 10000, 750, "email", "text") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-near-limit">near limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "text") }}
+        </div>  
+    </div>
+
+    <h2 class="heading-medium">Text only emoji</h2>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-at-limit">at limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "emoji") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-below-limit">below limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 700, 1000, 750, "email", "emoji") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="remaining-summary-text-only-near-limit">near limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "emoji") }}
+        </div>
+    </div>

app/templates/views/storybook/remaining-messages.html

@@ -0,0 +1,46 @@
+{% from 'components/remaining-messages.html' import remaining_messages with context %}
+
+<h1 class="heading-large">remaining_messages</h1>
+<hr />
+<h2 class="heading-medium">Below limits</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=250) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=500) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=799) }}  
+</div>
+
+<h2 class="heading-medium">Warning</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=800) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=825) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=900) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=999) }}  
+</div>
+
+<h2 class="heading-medium">At limit</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1000) }}
+</div>
+
+
+<h2 class="heading-medium">Muted - Below limits</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=250, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=500, muted=true) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=799, muted=true) }}  
+</div>
+
+<h2 class="heading-medium">Muted - Warning</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=800, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=825, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=900, muted=true) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=999, muted=true) }}  
+</div>
+
+<h2 class="heading-medium">Muted - At limit</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="remaining-messages-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1000, muted=true) }}
+</div>

app/templates/views/storybook/storybook-menu.html

@@ -0,0 +1,21 @@
+<!-- macro to display the component menu -->
+{% set components = [
+    {
+        'name': 'Remaining Messages Summary',
+        'path': 'remaining-messages-summary'
+    },
+    {
+        'name': 'Remaining Messages',
+        'path': 'remaining-messages'
+    },
+] %}
+
+{% macro storybook_menu() %}
+    <ul>
+        <!-- loop through components -->
+        {% for component in components %}
+            <li><a href="{{ url_for('main.storybook', component=component.path) }}"
+                class="text-blue-500 hover:underline">{{ component.name }}</a></li>
+        {% endfor %}
+    </ul>
+{% endmacro %}

app/templates/views/styleguide.html

@@ -9,7 +9,7 @@
 "components/api-key.html" import api_key %} {% from
 "components/template-filter.html" import template_filter with context %} {%
 block per_page_title %} Styleguide {% endblock %} {% block maincolumn_content %}
-
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary with context %}
 <h2 class="heading-large">Banner</h2>
 <div class="grid-row contain-floats">
   <div class="md:w-3/4 float-left py-0 px-0 px-gutterHalf box-border">
@@ -388,5 +388,51 @@ <h2 class="heading-medium">Browse Templates</h2>
   </fieldset>
 </nav>
 <hr />
+<h2 class="heading-large">Below limits</h2>
+<p data-testid="remaining-summary-checks">
+  {{ remaining_messages_summary(1000, 799, 1000, 799, "email") }}
+  <br /><br />
+  {{ remaining_messages_summary(10000, 699, 10000, 699, "sms") }}
+  <br /><br />
+  {{ remaining_messages_summary(1000, 0, 1000, 0, "email") }}
+</p>
+
+<h2 class="heading-large">Warning</h2>
+<p data-testid="remaining-summary-warnings">
+  {{ remaining_messages_summary(1000, 800, 1000, 800, "email") }}
+  <br /><br />
+  {{ remaining_messages_summary(1000, 900, 1000, 900, "email") }}
+</p>
+
+<h2 class="heading-large">At both limits</h2>
+<p data-testid="remaining-summary-both-limits">
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+</p>
+
+<h2 class="heading-large">Mixed</h2>
+<p data-testid="remaining-summary-both-limits">
+  {{ remaining_messages_summary(1000, 100, 1000, 1000, "email") }}
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+</p>
+<h2 class="heading-large">Text only</h2>
+<p data-testid="remaining-summary-text-only-at-limit">at limit
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "text") }}
+</p>
+<p data-testid="remaining-summary-text-only-below-limit">below limit
+  {{ remaining_messages_summary(10000, 700, 10000, 750, "email", "text") }}
+</p>
+<p data-testid="remaining-summary-text-only-near-limit">near limit
+  {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "text") }}
+</p>
 
+<h2 class="heading-large">Text only emoji</h2>
+<p data-testid="remaining-summary-text-only-at-limit">at limit
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "emoji") }}
+</p>
+<p data-testid="remaining-summary-text-only-below-limit">below limit
+  {{ remaining_messages_summary(1000, 700, 1000, 750, "email", "emoji") }}
+</p>
+<p data-testid="remaining-summary-text-only-near-limit">near limit
+  {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "emoji") }}
+</p>
 {% endblock %}

app/templates/views/welcome.html

@@ -1,4 +1,5 @@
 {% extends  "admin_template.html" %}
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary %}
 
 {% block per_page_title %}
   {{ _('Welcome to GC Notify') }}
@@ -18,4 +19,6 @@ <h1 class="heading-large">{{ _('Welcome to GC Notify') }}</h1>
         <a href="{{ url_for('main.add_service', first='first') }}" class="mt-4 button">{{ _('Create your first service') }}</a>
     </div>
 
+    <br /><br />
+    {{ remaining_messages_summary(1500, 400, 10000, 8100, 'text') }}
 {% endblock %}