[Site] Isolate React/Svelte build

ux.symfony.com/assets/app-react.js → ux.symfony.com/assets/react/app-react.js

@@ -1,5 +1,5 @@
 import {registerReactControllerComponents} from '@symfony/ux-react';
 
-import './app.js';
+import '../app.js';
 
 registerReactControllerComponents();

ux.symfony.com/assets/react/src/components/PackageList.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function (props) {
+    if (props.packages.length === 0) {
+        return 'No packages found';
+    }
+
+    return (
+        props.packages.map(item => (
+                <div class="PackageListItem">
+                    <div class="PackageListItem__icon" style={`--gradient: ${item.gradient}`}>
+                        <img src={item.imageUrl} alt={`Image for the ${item.humanName} UX package`} />
+                    </div>
+                    <h3 class="PackageListItem__title">
+                        <a href={item.url}>{item.humanName}</a>
+                    </h3>
+                </div>
+        ))
+    );
+}

ux.symfony.com/assets/react/src/package.json

@@ -0,0 +1,12 @@
+{
+    "devDependencies": {
+        "@babel/cli": "^7.25.6",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-react": "^7.24.7"
+    },
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "build": "../build/node_modules/.bin/babel ../. --out-dir ../../build/react --presets=@babel/preset-react"
+    }
+}

ux.symfony.com/assets/styles/app.scss

@@ -143,6 +143,7 @@ $utilities: map-remove(
 @import "components/ProductGrid";
 @import "components/PackageHeader";
 @import "components/PackageBox";
+@import "components/PackageList";
 @import "components/Cookbook";
 @import "components/SupportBox";
 @import "components/Tabs";

ux.symfony.com/assets/styles/components/_PackageList.scss

@@ -0,0 +1,61 @@
+.PackageList {
+  --gradient: #202427;
+  --color: #C8CED2;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: .75rem;
+}
+
+.PackageListItem {
+  background: var(--bs-body-bg);
+  border-radius: .75rem;
+  border: 0.66px solid var(--bs-secondary-bg-subtle);
+  padding: .5rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: .75rem;
+  position: relative;
+}
+
+.PackageListItem__icon {
+  width: 3rem;
+  aspect-ratio: 1;
+  border-radius: 14%;
+  background: var(--gradient);
+  display: grid;
+  place-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    max-width: 50%;
+    max-height: 50%;
+    transition: transform 0.35s;
+    .PackageListItem:hover & {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.PackageListItem__label {
+  font-size: 1.25rem;
+  font-family: var(--font-family-title);
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+  opacity: .85;
+  transition: opacity 0.5s;
+  letter-spacing: -0.07ch;
+
+  .PackageListItem:hover & {
+    opacity: 1;
+    transition: opacity 0.25s;
+  }
+
+  a:after {
+    content: " ";
+    inset: 0;
+    position: absolute;
+  }
+}

ux.symfony.com/assets/app-svelte.js → ux.symfony.com/assets/svelte/app-svelte.js

@@ -1,5 +1,5 @@
 import {registerSvelteControllerComponents} from '@symfony/ux-svelte';
 
-import './app.js';
+import '../app.js';
 
 registerSvelteControllerComponents();

ux.symfony.com/bin/compile_svelte.js → ux.symfony.com/assets/svelte/src/build.js

@@ -31,6 +31,6 @@ function compileDirectory(inputDir, outputDir) {
 }
 
 compileDirectory(
-    path.join(__dirname, '..', 'assets', 'svelte'),
-    path.join(__dirname, '..', 'assets', 'build', 'svelte'),
+    path.join(__dirname, '..',  'src' ),
+    path.join(__dirname, '..',  'dist' ),
 );

ux.symfony.com/package.json → ux.symfony.com/assets/svelte/src/package.json

@@ -9,7 +9,6 @@
     "private": true,
     "scripts": {
         "build": "yarn build-react && yarn build-svelte",
-        "build-react": "babel assets/react --out-dir assets/build/react --presets=@babel/preset-react",
         "build-svelte": "node bin/compile_svelte.js"
     }
 }

ux.symfony.com/assets/app-vue.js → ux.symfony.com/assets/vue/app-vue.js

@@ -1,5 +1,5 @@
 import {registerVueControllerComponents} from '@symfony/ux-vue';
 
-import './app.js';
+import '../app.js';
 
 registerVueControllerComponents();

ux.symfony.com/assets/vue/components/PackageList.js

@@ -1,34 +1,21 @@
 export default {
     props: ['packages'],
     template: `
-        <div>
-            <div v-if="packages.length === 0" class="alert alert-info">
-                Sad trombone... we haven't built any components that match this search yet!
+            <div v-if="packages.length === 0">
+                No packages found. Sad trombone...
             </div>
 
-            <div v-else class="row">
-                <a
-                    v-for="uxPackage in packages"
-                    :href="uxPackage.url"
-                    class="col-12 col-md-4 col-lg-3 mb-2"
-                >
-                    <div class="components-container p-2">
-                        <div class="d-flex">
-                            <div
-                                class="live-component-img d-flex justify-content-center align-items-center"
-                                :style="{background: uxPackage.gradient}">
-                                <img width="17" height="17"
-                                     :src="uxPackage.imageUrl"
-                                     :alt="'Image for the ' + uxPackage.humanName + ' UX package'"
-                                />
-                            </div>
-                            <h4 class="ubuntu-title ps-2 align-self-center">
-                                {{ uxPackage.humanName }}
-                            </h4>
+            <div v-else class="PackageList">
+
+                    <div v-for="package in packages" class="PackageListItem">
+                        <div class="PackageListItem__icon" :style="{'--gradient': package.gradient}">
+                            <img :src="package.imageUrl" :alt="package.humanName">
                         </div>
+                        <h4 class="PackageListItem__label">
+                            <a :href="package.url">{{ package.humanName }}</a>
+                        </h4>
                     </div>
-                </a>
+                    
             </div>
-        </div>
     `
 };

ux.symfony.com/assets/vue/controllers/PackageSearch.js

@@ -1,4 +1,4 @@
-/*
+/**
  |  Single-File Components - e.g. PackageSearch.vue -
  |  are supported when using Webpack Encore.
  */

ux.symfony.com/config/packages/asset_mapper.yaml

@@ -7,10 +7,12 @@ framework:
             - '*/assets/styles/_*.scss'
             - '*/assets/styles/**/_*.scss'
             - '*/assets/icons/**'
+            - '*/assets/react/src/**'       # Exclude React source + build files
+            - '*/assets/svelte/src/**'      # Exclude Svelte source + build files
         importmap_polyfill: false
 
 react:
-    controllers_path: '%kernel.project_dir%/assets/build/react/controllers'
+    controllers_path: '%kernel.project_dir%/assets/react/dist/controllers'
 
 svelte:
-    controllers_path: '%kernel.project_dir%/assets/build/svelte/controllers'
+    controllers_path: '%kernel.project_dir%/assets/svelte/dist/controllers'

ux.symfony.com/importmap.php

@@ -17,15 +17,15 @@
         'entrypoint' => true,
     ],
     'app-react' => [
-        'path' => './assets/app-react.js',
+        'path' => './assets/react/app-react.js',
         'entrypoint' => true,
     ],
     'app-svelte' => [
-        'path' => './assets/app-svelte.js',
+        'path' => './assets/svelte/app-svelte.js',
         'entrypoint' => true,
     ],
     'app-vue' => [
-        'path' => './assets/app-vue.js',
+        'path' => './assets/vue/app-vue.js',
         'entrypoint' => true,
     ],
     'demos/live-memory' => [

ux.symfony.com/templates/components/FileTree.html.twig

@@ -0,0 +1,22 @@
+<div class="FileTree FileTree-main list-unstyled px-3">
+    {{ _self.fileTree(files) }}
+</div>
+
+{% macro fileTree(files) %}
+    {% for file_info in files %}
+            <li class="FileTree-main {{ file_info.isDirectory ? 'FileTree-dir' : 'FileTree-file' }}">
+                <span
+                    data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="right"
+                    title="{{ file_info.description|e('html_attr') }}"
+                >
+                    <twig:ux:icon name="{{ file_info.isDirectory ? 'folder-open' : 'file' }}" />
+                    {{ file_info.filename }}
+                </span>
+                {% if file_info.files is defined %}
+                    <ul class="list-unstyled">
+                        {{ _self.fileTree(file_info.files) }}
+                    </ul>
+                {% endif %}
+            </li>
+    {% endfor %}
+{% endmacro %}

ux.symfony.com/templates/components/Package/PackageListItem.html.twig

@@ -0,0 +1,8 @@
+<div class="PackageListItem">
+    <div class="PackageListItem__icon" style="--gradient: {{ package.gradient }};">
+        <img src="{{ asset('images/ux_packages/' ~ package.imageFilename) }}" alt="Symfony UX {{ package.humanName }}" />
+    </div>
+    <h4 class="PackageListItem__label">
+        <a href="{{ url(package.route) }}">{{ package.humanName }}</a>
+    </h4>
+</div>

ux.symfony.com/templates/components/Package/SearchPackages.html.twig

@@ -1,18 +1,13 @@
 <div{{ attributes }}>
-    <input
-        type="text"
-        data-model="query"
-        placeholder="Results update as you type..."
-        class="form-control"
-    >
 
-    {% if computed.packages|length > 0 %}
-        <div data-loading="addClass(opacity-50)" class="mt-3 row">
-            {% for package in computed.packages %}
-                {{ include('main/_package_in_list.html.twig', {package}) }}
-            {% endfor %}
-        </div>
-    {% else %}
-        <div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
-    {% endif %}
+    <input type="text"  data-model="query" placeholder="Results update as you type..." class="form-control" />
+
+    <div class="PackageList pt-3" data-loading="addClass(opacity-50)">
+        {% for package in computed.packages %}
+            {{ include('components/Package/PackageListItem.html.twig', {package}) }}
+         {% else %}
+            No packages found "{{ query }}"
+        {% endfor %}
+    </div>
+
 </div>

ux.symfony.com/templates/main/homepage.html.twig

@@ -37,13 +37,9 @@
         </div>
 
         <div class="col-12 col-md-6 mt-3 mt-md-0">
-            <div data-controller="tooltips" class="ux-container FileTree flex-grow-1 ms-2 py-3">
+            <div data-controller="tooltips" class="ux-container FileTree  flex-grow-1 ms-2 py-3">
                 <div style="height: 185px; overflow: auto;">
-                    <ul class="list-unstyled FileTree-main">
-                        {{ include('main/_file_tree.html.twig', {
-                            files: recipeFileTree.files
-                        }) }}
-                    </ul>
+                    <twig:FileTree files="{{ recipeFileTree.files }}" />
                 </div>
             </div>
         </div>