From aa979ef086325f650da975832abc4a4bb0a62844 Mon Sep 17 00:00:00 2001 From: Hugues Tavernier Date: Sun, 28 Jan 2024 21:54:13 +0100 Subject: [PATCH] symfony ux notify implementation into playground --- docs/src/fr/stimulus/symfony-ux.md | 7 +- docs/src/stimulus/symfony-ux.md | 7 +- .../assets/controllers/notifier_controller.js | 7 ++ .../assets/react/controllers/App.scss | 22 ------ .../assets/svelte/controllers/app.scss | 22 ------ playground/stimulus/assets/theme.scss | 8 +- .../assets/vue/components/HelloWorld.vue | 20 ----- playground/stimulus/compose.override.yaml | 8 -- playground/stimulus/compose.yaml | 11 +-- .../stimulus/config/packages/notifier.yaml | 2 +- .../src/Controller/DefaultController.php | 22 +++++- playground/stimulus/templates/base.html.twig | 76 ++++++++++--------- .../templates/default/notifier.html.twig | 17 +++++ .../templates/default/notify.html.twig | 10 --- shared/theme/components/button.scss | 20 +++++ shared/theme/index.scss | 2 + shared/theme/pages/stimulus.scss | 3 + 17 files changed, 126 insertions(+), 138 deletions(-) create mode 100644 playground/stimulus/assets/controllers/notifier_controller.js delete mode 100644 playground/stimulus/compose.override.yaml create mode 100644 playground/stimulus/templates/default/notifier.html.twig delete mode 100644 playground/stimulus/templates/default/notify.html.twig create mode 100644 shared/theme/components/button.scss create mode 100644 shared/theme/pages/stimulus.scss diff --git a/docs/src/fr/stimulus/symfony-ux.md b/docs/src/fr/stimulus/symfony-ux.md index f0940cf0..e8412b8f 100644 --- 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 index 2e404cf3..e22c1f76 100644 --- 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 new file mode 100644 index 00000000..752325c2 --- /dev/null +++ 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") + } +} \ No newline at end of file diff --git a/playground/stimulus/assets/react/controllers/App.scss b/playground/stimulus/assets/react/controllers/App.scss index 9d3dd307..49c0668b 100644 --- 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 index d28787a6..f610d60e 100644 --- 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 index 0384bb82..2276c0db 100644 --- 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; } \ No newline at end of file diff --git a/playground/stimulus/assets/vue/components/HelloWorld.vue b/playground/stimulus/assets/vue/components/HelloWorld.vue index d7b1e6d1..a0206cb9 100644 --- a/playground/stimulus/assets/vue/components/HelloWorld.vue +++ b/playground/stimulus/assets/vue/components/HelloWorld.vue @@ -21,23 +21,3 @@ export default { } - \ No newline at end of file diff --git a/playground/stimulus/compose.override.yaml b/playground/stimulus/compose.override.yaml deleted file mode 100644 index 50f0fab6..00000000 --- a/playground/stimulus/compose.override.yaml +++ /dev/null @@ -1,8 +0,0 @@ -version: '3' - -services: -###> symfony/mercure-bundle ### - mercure: - ports: - - "80" -###< symfony/mercure-bundle ### diff --git a/playground/stimulus/compose.yaml b/playground/stimulus/compose.yaml index 84df2e2e..21d38c4e 100644 --- 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 index 3f8e2fe8..ebeacd96 100644 --- 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 index d45a519e..a645a99c 100644 --- 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 index 59cc6454..e6c83c3f 100644 --- a/playground/stimulus/templates/base.html.twig +++ b/playground/stimulus/templates/base.html.twig @@ -2,52 +2,54 @@ - + - {% block title %}Welcome!{% endblock %} + + {% block title %}Welcome! + {% endblock %} + {% 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 %} - -{# {{ stimulus_controller('symfony/ux-swup/swup', { containers: ['#content', '#nav'] }) }} #} - + + -
- {% block content %}{% endblock %} -
- +
{% block content %}{% endblock %} +
+ - \ No newline at end of file + diff --git a/playground/stimulus/templates/default/notifier.html.twig b/playground/stimulus/templates/default/notifier.html.twig new file mode 100644 index 00000000..9dd474a5 --- /dev/null +++ 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 %} +
+
+ +
+ + {{ stream_notifications(['/chat/symfony-vite']) }} +
+{% endblock %} diff --git a/playground/stimulus/templates/default/notify.html.twig b/playground/stimulus/templates/default/notify.html.twig deleted file mode 100644 index 617fb6cb..00000000 --- a/playground/stimulus/templates/default/notify.html.twig +++ /dev/null @@ -1,10 +0,0 @@ -{% extends 'base.html.twig' %} - -{% block title %}HelloController!{% endblock %} - -{% block html_class %}page-notify{% endblock %} - -{% block content %} -
Not tested
-{% endblock %} - diff --git a/shared/theme/components/button.scss b/shared/theme/components/button.scss new file mode 100644 index 00000000..2669bf94 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/shared/theme/index.scss b/shared/theme/index.scss index 2f3a66d4..1752036f 100644 --- 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 new file mode 100644 index 00000000..6537d621 --- /dev/null +++ b/shared/theme/pages/stimulus.scss @@ -0,0 +1,3 @@ +.notifier-container { + margin: 3rem 0; +} \ No newline at end of file