Introducing ux.symfony.com

Co-authored-by: Leanna Pelham <[email protected]>
Florent Morselli <[email protected]>

.php-cs-fixer.dist.php

@@ -23,7 +23,7 @@
     ->setRiskyAllowed(true)
     ->setFinder(
         PhpCsFixer\Finder::create()
-            ->in(__DIR__.'/src')
+            ->in([__DIR__.'/src', __DIR__.'/ux.symfony.com/src'])
             ->append([__FILE__])
             ->notPath('#/Fixtures/#')
             ->notPath('#/app/var/#')

.platform/routes.yaml

@@ -0,0 +1,12 @@
+"https://{all}/":
+    type: upstream
+    upstream: "app:http"
+
+"http://{all}/":
+    type: redirect
+    to: "https://{all}/"
+
+
+"https://{all}/.well-known/mercure":
+    type: upstream
+    upstream: "mercure:http"

.platform/services.yaml

@@ -0,0 +1 @@
+

ux.symfony.com/.env

@@ -0,0 +1,42 @@
+# In all environments, the following files are loaded if they exist,
+# the latter taking precedence over the former:
+#
+#  * .env                contains default values for the environment variables needed by the app
+#  * .env.local          uncommitted file with local overrides
+#  * .env.$APP_ENV       committed environment-specific defaults
+#  * .env.$APP_ENV.local uncommitted environment-specific overrides
+#
+# Real environment variables win over .env files.
+#
+# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
+#
+# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
+# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=97d7548ca5eceaf1d746b84178c9b87b
+###< symfony/framework-bundle ###
+
+###> symfony/mercure-bundle ###
+# See https://symfony.com/doc/current/mercure.html#configuration
+# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
+MERCURE_URL=https://ux.symfony.com/.well-known/mercure
+# The public URL of the Mercure hub, used by the browser to connect
+MERCURE_PUBLIC_URL=https://ux.symfony.com/.well-known/mercure
+# The secret used to sign the JWTs
+MERCURE_JWT_SECRET="!ChangeMe!"
+###< symfony/mercure-bundle ###
+
+###> doctrine/doctrine-bundle ###
+# Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
+# IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
+#
+DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
+# DATABASE_URL="mysql://db_user:[email protected]:3306/db_name?serverVersion=5.7&charset=utf8mb4"
+# DATABASE_URL="postgresql://symfony:[email protected]:5432/app?serverVersion=13&charset=utf8"
+###< doctrine/doctrine-bundle ###
+
+###> symfony/mercure-notifier ###
+MERCURE_DSN=mercure://default?topic=/demo/notifier
+###< symfony/mercure-notifier ###

ux.symfony.com/.env.test

@@ -0,0 +1,6 @@
+# define your env variables for the test env here
+KERNEL_CLASS='App\Kernel'
+APP_SECRET='$ecretf0rt3st'
+SYMFONY_DEPRECATIONS_HELPER=999999
+PANTHER_APP_ENV=panther
+PANTHER_ERROR_SCREENSHOT_DIR=./var/error-screenshots

ux.symfony.com/.gitignore

@@ -0,0 +1,22 @@
+
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###
+
+###> symfony/phpunit-bridge ###
+.phpunit.result.cache
+/phpunit.xml
+###< symfony/phpunit-bridge ###

ux.symfony.com/.platform.app.yaml

@@ -0,0 +1,61 @@
+name: app
+
+type: php:8.1
+
+dependencies:
+    php:
+        composer/composer: "^2"
+    nodejs:
+        yarn: "1.22.17"
+
+build:
+    flavor: none
+
+runtime:
+    sizing_hints:
+        request_memory: 10
+        reserved_memory: 70
+
+    extensions:
+        - sodium
+        - mbstring
+        - imagick
+        - xsl
+
+crons:
+    reload_database:
+        spec: '*/20 * * * *'
+        commands:
+            start: sleep 60 && echo sleep-60-finished && date
+
+web:
+    locations:
+        "/":
+            root: "public"
+            expires: 1h
+            passthru: "/index.php"
+            rules:
+                '\.(gif|jpe?g|png|css|js|woff|woff2|ttf|eot|svg)$':
+                    expires: 365d
+
+disk: 256
+
+mounts:
+    "/var": { source: local, source_path: var }
+
+hooks:
+    build: |
+        set -x -e
+
+        curl -s https://get.symfony.com/cloud/configurator | (>&2 bash)
+
+        (>&2
+            symfony-build
+        )
+
+    deploy: |
+        set -x -e
+
+        (>&2 symfony-deploy)
+
+        php bin/console app:load-data

ux.symfony.com/assets/app.js

@@ -0,0 +1,15 @@
+import { registerReactControllerComponents } from '@symfony/ux-react';
+
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.scss';
+
+// start the Stimulus application
+import './bootstrap';
+
+// imported to initialize global plugins
+import Dropdown from 'bootstrap/js/dist/dropdown';
+import Collapse from 'bootstrap/js/dist/collapse';
+
+// initialize symfony/ux-react
+registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

ux.symfony.com/assets/bootstrap.js

@@ -0,0 +1,16 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+import Clipboard from 'stimulus-clipboard'
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+));
+
+app.debug = process.env.NODE_ENV === 'development';
+
+app.register('clipboard', Clipboard);
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);
+

ux.symfony.com/assets/controllers.json

@@ -0,0 +1,90 @@
+{
+    "controllers": {
+        "@symfony/ux-autocomplete": {
+            "autocomplete": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "tom-select/dist/css/tom-select.default.css": false
+                }
+            }
+        },
+        "@symfony/ux-chartjs": {
+            "chart": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-cropperjs": {
+            "cropper": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "cropperjs/dist/cropper.min.css": true,
+                    "@symfony/ux-cropperjs/src/style.css": true
+                }
+            }
+        },
+        "@symfony/ux-dropzone": {
+            "dropzone": {
+                "enabled": true,
+                "fetch": "lazy",
+                "autoimport": {
+                    "@symfony/ux-dropzone/src/style.css": true
+                }
+            }
+        },
+        "@symfony/ux-lazy-image": {
+            "lazy-image": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-live-component": {
+            "typed": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/styles/live.css": true
+                }
+            }
+        },
+        "@symfony/ux-notify": {
+            "notify": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-swup": {
+            "swup": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-turbo-mercure": {
+            "turbo-stream": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
+        "@symfony/ux-typed": {
+            "typed": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}

ux.symfony.com/assets/controllers/markdown-controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus';
+import snarkdown from 'snarkdown';
+
+export default class extends Controller {
+    static targets = ['input', 'preview'];
+
+    render(event) {
+        const rendered = snarkdown(this.inputTarget.value);
+        this.previewTarget.innerHTML = rendered;
+    }
+}

ux.symfony.com/assets/controllers/tooltips-controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import Tooltip from 'bootstrap/js/dist/tooltip';
+
+export default class extends Controller {
+    connect() {
+        this.element.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((element) => {
+            new Tooltip(element, {
+                container: this.element,
+            });
+        });
+    }
+}