symfony ux notify implementation into playground

lhapaipai · Jan 28, 2024 · aa979ef · aa979ef
1 parent 94861e7
commit aa979ef
Show file tree

Hide file tree

Showing 17 changed files with 126 additions and 138 deletions.
diff --git a/docs/src/fr/stimulus/symfony-ux.md b/docs/src/fr/stimulus/symfony-ux.md
@@ -7,12 +7,13 @@
 | ux-chartjs        | ✅            | ux-swup           | ✅            |
 | ux-cropperjs      | ✅            | ux-toggle         | ✅            |
 | ux-dropzone       | ✅            | ux-translator     | ✅            |
-| ux-lazy           | ✅            | ux-turbo          | 🤯 Not Tested    |
+| ux-lazy           | ✅            | ux-turbo          | Pas encore testé (**) |
 | ux-live-component | ✅            | ux-twig           | ✅            |
-| ux-notify         | 🤯 Not Tested    | ux-typed          | ✅            |
+| ux-notify         | ✅            | ux-typed          | ✅            |
 | ux-react          | ✅ (*)        | ux-vue            | ✅ (*)        |
 
-(*) demande quelques modifications de code
+(*) demande quelques modifications au niveau des imports (voir ci-dessous)
+(**) en théorie il n'y a aucune raison que ce ne soit pas compatible, vos retours sont les bienvenus.
 
 ## Prérequis
 

diff --git a/docs/src/stimulus/symfony-ux.md b/docs/src/stimulus/symfony-ux.md
@@ -7,12 +7,13 @@
 | ux-chartjs        | ✅            | ux-swup           | ✅            |
 | ux-cropperjs      | ✅            | ux-toggle         | ✅            |
 | ux-dropzone       | ✅            | ux-translator     | ✅            |
-| ux-lazy           | ✅            | ux-turbo          | 🤯 Not Tested    |
+| ux-lazy           | ✅            | ux-turbo          | Not yes Tested (**) |
 | ux-live-component | ✅            | ux-twig           | ✅            |
-| ux-notify         | 🤯 Not Tested    | ux-typed          | ✅            |
+| ux-notify         | ✅            | ux-typed          | ✅            |
 | ux-react          | ✅ (*)        | ux-vue            | ✅ (*)        |
 
-(*) requires some code changes
+(*) requires some modifications with imports (see below)
+(**) in theory there is no reason why it is not compatible, your feedback is welcome.
 
 ## Prerequisites
 

diff --git a/playground/stimulus/assets/controllers/notifier_controller.js b/playground/stimulus/assets/controllers/notifier_controller.js
@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class controller extends Controller {
+  notify() {
+    fetch("/notify")
+  }
+}
diff --git a/playground/stimulus/assets/react/controllers/App.scss b/playground/stimulus/assets/react/controllers/App.scss
@@ -4,28 +4,6 @@
   padding: 2rem;
   text-align: center;
 
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #f9f9f9;
-    cursor: pointer;
-    transition: border-color 0.25s;
-
-    &:focus,
-    &:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    &:hover {
-      border-color: #646cff;
-    }
-  }
-
-
   .logo {
     height: 200px;
     padding: 1.5em;

diff --git a/playground/stimulus/assets/svelte/controllers/app.scss b/playground/stimulus/assets/svelte/controllers/app.scss
@@ -4,28 +4,6 @@
   padding: 2rem;
   text-align: center;
 
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #f9f9f9;
-    cursor: pointer;
-    transition: border-color 0.25s;
-
-    &:focus,
-    &:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    &:hover {
-      border-color: #646cff;
-    }
-  }
-
-
   .logo {
     height: 200px;
     padding: 1.5em;

diff --git a/playground/stimulus/assets/theme.scss b/playground/stimulus/assets/theme.scss
@@ -1,8 +1,8 @@
 @import "~shared/theme/index.scss";
 
 html #content {
-    height: calc(100% - var(--nav-height));
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: calc(100% - var(--nav-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
diff --git a/playground/stimulus/assets/vue/components/HelloWorld.vue b/playground/stimulus/assets/vue/components/HelloWorld.vue
@@ -21,23 +21,3 @@ export default {
 }
 </script>
 
-<style scoped>
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #f9f9f9;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-</style>
diff --git a/playground/stimulus/compose.override.yaml b/playground/stimulus/compose.override.yaml
diff --git a/playground/stimulus/compose.yaml b/playground/stimulus/compose.yaml
@@ -1,7 +1,7 @@
 version: '3'
 
 services:
-###> symfony/mercure-bundle ###
+  ###> symfony/mercure-bundle ###
   mercure:
     image: dunglas/mercure
     restart: unless-stopped
@@ -11,7 +11,9 @@ services:
       MERCURE_SUBSCRIBER_JWT_KEY: '!ChangeThisMercureHubJWTSecretKey!'
       # Set the URL of your Symfony project (without trailing slash!) as value of the cors_origins directive
       MERCURE_EXTRA_DIRECTIVES: |
-        cors_origins http://127.0.0.1:8000
+        cors_origins https://127.0.0.1:8000 http://127.0.0.1:8000
+    ports:
+      - "80"
     # Comment the following line to disable the development mode
     command: /usr/bin/caddy run --config /etc/caddy/Caddyfile.dev
     volumes:
@@ -20,7 +22,6 @@ services:
 ###< symfony/mercure-bundle ###
 
 volumes:
-###> symfony/mercure-bundle ###
+  ###> symfony/mercure-bundle ###
   mercure_data:
-  mercure_config:
-###< symfony/mercure-bundle ###
+  mercure_config: ###< symfony/mercure-bundle ###
diff --git a/playground/stimulus/config/packages/notifier.yaml b/playground/stimulus/config/packages/notifier.yaml
@@ -1,7 +1,7 @@
 framework:
     notifier:
         chatter_transports:
-            mercure: '%env(MERCURE_DSN)%'
+            mercure: 'mercure://default?topic=/chat/symfony-vite'
         texter_transports:
         channel_policy:
             # use chat/slack, chat/telegram, sms/twilio or sms/nexmo

diff --git a/playground/stimulus/src/Controller/DefaultController.php b/playground/stimulus/src/Controller/DefaultController.php
@@ -7,6 +7,9 @@
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Notifier\Bridge\Mercure\MercureOptions;
+use Symfony\Component\Notifier\ChatterInterface;
+use Symfony\Component\Notifier\Message\ChatMessage;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Model\Chart;
@@ -139,14 +142,27 @@ public function liveComponent(): Response
         ]);
     }
 
-    #[Route('/notify', name: 'notify')]
-    public function notify(): Response
+    #[Route('/notifier', name: 'notifier')]
+    public function notifier(ChatterInterface $chatter): Response
     {
-        return $this->render('default/notify.html.twig', [
+        return $this->render('default/notifier.html.twig', [
             'currentPage' => 'notify',
         ]);
     }
 
+    #[Route('/notify', name: 'notify')]
+    public function notify(ChatterInterface $chatter): Response
+    {
+        $message = (new ChatMessage(
+            'Symfony UX Notify!',
+            new MercureOptions(['/chat/symfony-vite'])
+        ))->transport('mercure');
+
+        $chatter->send($message);
+
+        return new Response('', Response::HTTP_NO_CONTENT);
+    }
+
     #[Route('/toggle-password', name: 'toggle-password')]
     public function togglePassword(): Response
     {

diff --git a/playground/stimulus/templates/base.html.twig b/playground/stimulus/templates/base.html.twig
@@ -2,52 +2,54 @@
 <!DOCTYPE html>
 <html class="{% block html_class %}{% endblock %}">
 
-<head>
+  <head>
     <meta charset="UTF-8">
-    <title>{% block title %}Welcome!{% endblock %}</title>
+    <title>
+      {% block title %}Welcome!
+      {% endblock %}
+    </title>
     <link rel="icon" href="data:;base64,iBORw0KGgo=">
     {% block stylesheets %}
-    {{ vite_entry_link_tags('app') }}
-    {{ vite_entry_link_tags('theme') }}
+      {{ vite_entry_link_tags('app') }}
+      {{ vite_entry_link_tags('theme') }}
     {% endblock %}
 
     {% block javascripts %}
-    {{ vite_entry_script_tags('app', { dependency: 'react' }) }}
-    {{ vite_entry_script_tags('theme') }}
+      {{ vite_entry_script_tags('app', { dependency: 'react' }) }}
+      {{ vite_entry_script_tags('theme') }}
     {% endblock %}
-</head>
-{# {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] }) }} #}
-<body {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] }) }}>
+  </head>
+  <body {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] } ) }}>
     <nav id="nav">
-        <div class="navbar">
-            <div class="title">
-                <img class="img logo" width="24" height="24" src="/images/symfony-vite.svg" /> Symfony & Vite
-            </div>
-            <div class="links">
-                <a class="{{ currentPage == 'welcome' ? 'active' : '' }}" href="{{ path('welcome') }}">Welcome</a>
+      <div class="navbar">
+        <div class="title">
+          <img class="img logo" width="24" height="24" src="/images/symfony-vite.svg"/>
+          Symfony & Vite
+        </div>
+        <div class="links">
+          <a class="{{ currentPage == 'welcome' ? 'active' : '' }}" href="{{ path('welcome') }}">Welcome</a>
 
-                <a class="{{ currentPage == 'third-party' ? 'active' : '' }}" href="{{ path('third-party') }}">Third party</a>
-                <a class="{{ currentPage == 'autocomplete' ? 'active' : '' }}" href="{{ path('autocomplete') }}">Autocomplete</a>
-                <a class="{{ currentPage == 'chartjs' ? 'active' : '' }}" href="{{ path('chartjs') }}">Chart js</a>
-                <a class="{{ currentPage == 'cropperjs' ? 'active' : '' }}" href="{{ path('cropperjs') }}">Cropper js</a>
-                <a class="{{ currentPage == 'dropzone' ? 'active' : '' }}" href="{{ path('dropzone') }}">Dropzone</a>
-                <a class="{{ currentPage == 'lazy-image' ? 'active' : '' }}" href="{{ path('lazy-image') }}">Lazy image</a>
-                <a data-no-swup class="{{ currentPage == 'live-component' ? 'active' : '' }}" href="{{ path('live-component') }}">Live component</a>
-                {# <a class="{{ currentPage == 'notify' ? 'active' : '' }}" href="{{ path('notify') }}">Notify</a> #}
-                <a class="{{ currentPage == 'toggle-password' ? 'active' : '' }}" href="{{ path('toggle-password') }}">Toggle password</a>
-                <a data-no-swup class="{{ currentPage == 'translator' ? 'active' : '' }}" href="{{ path('translator') }}">Translator</a>
-                {# <a class="{{ currentPage == 'turbo' ? 'active' : '' }}" href="{{ path('turbo') }}">Turbo</a> #}
-                <a class="{{ currentPage == 'twig' ? 'active' : '' }}" href="{{ path('twig') }}">Twig</a>
-                <a class="{{ currentPage == 'typed' ? 'active' : '' }}" href="{{ path('typed') }}">Typed</a>
-                <a class="{{ currentPage == 'react' ? 'active' : '' }}" href="{{ path('react') }}">React</a>
-                <a class="{{ currentPage == 'svelte' ? 'active' : '' }}" href="{{ path('svelte') }}">Svelte</a>
-                <a class="{{ currentPage == 'vue' ? 'active' : '' }}" href="{{ path('vue') }}">Vue</a>
-            </div>
+          <a class="{{ currentPage == 'third-party' ? 'active' : '' }}" href="{{ path('third-party') }}">Third party</a>
+          <a class="{{ currentPage == 'autocomplete' ? 'active' : '' }}" href="{{ path('autocomplete') }}">Autocomplete</a>
+          <a class="{{ currentPage == 'chartjs' ? 'active' : '' }}" href="{{ path('chartjs') }}">Chart js</a>
+          <a class="{{ currentPage == 'cropperjs' ? 'active' : '' }}" href="{{ path('cropperjs') }}">Cropper js</a>
+          <a class="{{ currentPage == 'dropzone' ? 'active' : '' }}" href="{{ path('dropzone') }}">Dropzone</a>
+          <a class="{{ currentPage == 'lazy-image' ? 'active' : '' }}" href="{{ path('lazy-image') }}">Lazy image</a>
+          <a data-no-swup class="{{ currentPage == 'live-component' ? 'active' : '' }}" href="{{ path('live-component') }}">Live component</a>
+          <a class="{{ currentPage == 'notifier' ? 'active' : '' }}" href="{{ path('notifier') }}">Notifier</a>
+          <a class="{{ currentPage == 'toggle-password' ? 'active' : '' }}" href="{{ path('toggle-password') }}">Toggle password</a>
+          <a data-no-swup class="{{ currentPage == 'translator' ? 'active' : '' }}" href="{{ path('translator') }}">Translator</a>
+          {# <a class="{{ currentPage == 'turbo' ? 'active' : '' }}" href="{{ path('turbo') }}">Turbo</a> #}
+          <a class="{{ currentPage == 'twig' ? 'active' : '' }}" href="{{ path('twig') }}">Twig</a>
+          <a class="{{ currentPage == 'typed' ? 'active' : '' }}" href="{{ path('typed') }}">Typed</a>
+          <a class="{{ currentPage == 'react' ? 'active' : '' }}" href="{{ path('react') }}">React</a>
+          <a class="{{ currentPage == 'svelte' ? 'active' : '' }}" href="{{ path('svelte') }}">Svelte</a>
+          <a class="{{ currentPage == 'vue' ? 'active' : '' }}" href="{{ path('vue') }}">Vue</a>
         </div>
+      </div>
     </nav>
-    <div id="content">
-        {% block content %}{% endblock %}
-    </div>
-</body>
+    <div id="content"> {% block content %}{% endblock %}
+      </div>
+    </body>
 
-</html>
+  </html>
diff --git a/playground/stimulus/templates/default/notifier.html.twig b/playground/stimulus/templates/default/notifier.html.twig
@@ -0,0 +1,17 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}HelloController!
+{% endblock %}
+
+{% block html_class %}page-notifier
+{% endblock %}
+
+{% block content %}
+  <div>
+    <div data-controller="notifier" class="notifier-container">
+      <button data-action="click->notifier#notify">Notify !</button>
+    </div>
+
+    {{ stream_notifications(['/chat/symfony-vite']) }}
+  </div>
+{% endblock %}
diff --git a/playground/stimulus/templates/default/notify.html.twig b/playground/stimulus/templates/default/notify.html.twig
diff --git a/shared/theme/components/button.scss b/shared/theme/components/button.scss
@@ -0,0 +1,20 @@
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: border-color 0.25s;
+
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  &:hover {
+    border-color: #646cff;
+  }
+}
diff --git a/shared/theme/index.scss b/shared/theme/index.scss
@@ -2,11 +2,13 @@
 @import "./layout.scss";
 @import "./components/card.scss";
 @import "./components/alert.scss";
+@import "./components/button.scss";
 @import "./typography.scss";
 @import "./navbar.scss";
 
 @import "./pages/welcome.scss";
 @import "./pages/assets.scss";
+@import "./pages/stimulus.scss";
 
 * {
   box-sizing: border-box;

diff --git a/shared/theme/pages/stimulus.scss b/shared/theme/pages/stimulus.scss
@@ -0,0 +1,3 @@
+.notifier-container {
+  margin: 3rem 0;
+}