[Site] Renaming "components" to "packages"

Author: weaverryan

ux.symfony.com/assets/styles/app.css.map

@@ -10,7 +10,7 @@
 @import './live_demos';
 
 @import './components/Icon';
-@import './components/ComponentBox';
+@import './components/PackageBox';
 
 body {
     font-family: Inter;

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

@@ -1,4 +1,4 @@
-.ComponentBox {
+.PackageBox {
   --space-large: 1.5rem;
 
   border: 1px solid var(--border-color);
@@ -22,7 +22,7 @@
   }
 }
 
-.ComponentBox::before {
+.PackageBox::before {
   content: "";
   position: absolute;
   inset: .25rem 0 -.25rem 0;
@@ -34,13 +34,13 @@
   transition: opacity 600ms ease-in-out;
   z-index: -1;
 }
-.ComponentBox:hover::before {
+.PackageBox:hover::before {
   transition: opacity 250ms ease-in-out;
   opacity: .25;
   z-index: -1;
 }
 
-.ComponentBox::after {
+.PackageBox::after {
   content: "";
   position: absolute;
   inset: 0 0;
@@ -50,14 +50,14 @@
   transition: opacity 600ms ease-in-out;
   opacity: .95;
 }
-.ComponentBox:hover::after {
+.PackageBox:hover::after {
   transition: opacity 250ms ease-in-out;
   opacity: .99;
   z-index: -1;
 }
 
 
-.ComponentBox_logo {
+.PackageBox_logo {
   --logo-size: 6rem;
 
   background: var(--gradient);
@@ -77,7 +77,7 @@
             filter 600ms ease-in-out,
             transform 600ms ease-in-out;
 
-    .ComponentBox:hover & {
+    .PackageBox:hover & {
       filter: drop-shadow(0 .25rem 1rem rgba(0, 0, 0, .3));
       transform: scale(1.05);
       transition:
@@ -88,21 +88,21 @@
   }
 }
 
-.ComponentBox_content {
+.PackageBox_content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex: 1 1 auto;
 }
 
-.ComponentBox_title {
+.PackageBox_title {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: .75rem;
 }
 
-.ComponentBox_link {
+.PackageBox_link {
   &:after {
     content: '';
     position: absolute;
@@ -111,18 +111,18 @@
   }
 }
 
-.ComponentBox_arrow {
+.PackageBox_arrow {
   color: gray;
   font-size: 1.5rem;
   opacity: .5;
   transition: opacity 600ms ease-in-out;
-  .ComponentBox:hover & {
+  .PackageBox:hover & {
     transition: opacity 250ms ease-in-out;
     opacity: 1;
   }
 }
 
-.ComponentBox_description {
+.PackageBox_description {
   p {
     line-height: 1.4;
   }

ux.symfony.com/assets/styles/components/_ComponentBox.scss renamed to ux.symfony.com/assets/styles/components/_PackageBox.scss

@@ -34,10 +34,7 @@
         <listener class="Symfony\Bridge\PhpUnit\SymfonyTestsListener" />
     </listeners>
 
-    <!-- Run `composer require symfony/panther` before enabling this extension -->
-    <!--
     <extensions>
-        <extension class="Symfony\Component\Panther\ServerExtension" />
+        <extension class="Zenstruck\Browser\Test\BrowserExtension" />
     </extensions>
-    -->
 </phpunit>

ux.symfony.com/phpunit.xml.dist

@@ -5,6 +5,7 @@
 use App\Model\RecipeFileTree;
 use App\Service\PackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 
@@ -21,13 +22,19 @@ public function homepage(PackageRepository $packageRepository): Response
         ]);
     }
 
-    #[Route('/components', name: 'app_all_components')]
-    public function allComponents(PackageRepository $packageRepository): Response
+    #[Route('/packages', name: 'app_all_packages')]
+    public function allPackages(PackageRepository $packageRepository): Response
     {
         $packages = $packageRepository->findAll();
 
-        return $this->render('main/components.html.twig', [
+        return $this->render('main/packages.html.twig', [
             'packages' => $packages,
         ]);
     }
+
+    #[Route('/components')]
+    public function componentsRedirect(): RedirectResponse
+    {
+        return $this->redirectToRoute('app_all_packages', [], Response::HTTP_MOVED_PERMANENTLY);
+    }
 }

ux.symfony.com/src/Controller/MainController.php

@@ -6,7 +6,7 @@
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
 
 #[AsTwigComponent()]
-class ComponentBox
+class PackageBox
 {
     public Package $package;
 }

ux.symfony.com/src/Twig/ComponentBox.php renamed to ux.symfony.com/src/Twig/PackageBox.php

@@ -18,11 +18,11 @@
         <div class="dropdown  my-2 my-lg-0">
             <button
                 class="nav-options me-4 ms-0"
-                id="components-dropdown-button"
+                id="packages-dropdown-button"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
-            >Components <twig:Icon name="chevron-down" /></button>
-            <ul class="dropdown-menu" aria-labelledby="components-dropdown-button">
+            >Packages <twig:Icon name="chevron-down" /></button>
+            <ul class="dropdown-menu" aria-labelledby="packages-dropdown-button">
                 {% for package in twigPackageHelper.topNavPackages %}
                 <li>
                     <a class="dropdown-item" href="{{ path(package.route) }}">
@@ -37,7 +37,7 @@
                 </li>
                 {% endfor %}
                 <li><hr class="dropdown-divider"></li>
-                <li><a class="dropdown-item" href="{{ path('app_all_components') }}">Browse all Components</a></li>
+                <li><a class="dropdown-item" href="{{ path('app_all_packages') }}">Browse all Packages</a></li>
             </ul>
         </div>
         <p class="nav-options mb-0 me-4 d-none d-lg-inline">|</p>

ux.symfony.com/templates/_main_nav.html.twig

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'chartjs',
         eyebrowText: 'Charts from PHP'

ux.symfony.com/templates/chart/chartjs.html.twig

@@ -3,7 +3,7 @@
     {{ message }}
 
     {% if type == 'success' %}
-        <a href="{{ path('app_all_components') }}" class="alert-right-message">
+        <a href="{{ path('app_all_packages') }}" class="alert-right-message">
             (browse all {{ this.packageCount }} packages)
         </a>
     {% endif %}

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

@@ -0,0 +1,19 @@
+<div class="PackageBox" style="--gradient: {{ package.gradient }};">
+
+    <div class="PackageBox_logo">
+        <img width="36" height="36" src="{{ asset('images/'~package.imageFilename) }}"
+             alt="Image for the {{ package.humanName }} UX package">
+    </div>
+
+    <div class="PackageBox_content">
+        <h3 class="PackageBox_title">
+            <a href="{{ path(package.route) }}" class="PackageBox_link">{{ package.humanName }}</a>
+            <span class="PackageBox_arrow">
+                <twig:Icon name="arrow-right" />
+            </span>
+        </h3>
+        <div class="PackageBox_description">
+            {{ package.description|markdown_to_html }}
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,13 @@
+{% props foo, primary = true, notAScalar %}
+
+<div {{ attributes }}>
+    Anonymous component! {{ dump(_context|keys) }}
+    <br>
+    Attributes: <code>{{ attributes }}</code>
+    <br>
+    Foo: {{ foo|default('not defined') }}
+    <br>
+    Primary: {{ primary|default('not defined') }}
+    <br>
+    NotAScalar: {{ dump(notAScalar) }}
+</div>

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

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'cropperjs',
         eyebrowText: 'Craft the perfect image'

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

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'live-component',
         eyebrowText: 'Reactive Twig Templates'
@@ -42,7 +42,7 @@
 
 {% block documentation_links %}{% endblock %}
 
-{% block component_bottom %}
+{% block package_bottom %}
     <h2 class="eyebrows mt-5" id="demos">Live Component Demos</h2>
     <div class="d-md-flex justify-content-md-between text-center text-md-start">
         <h2 class="ubuntu pt-2 component-headlines">Find out what else you can <span style="color: #AE5929;">build</span></h2>

ux.symfony.com/templates/cropper/cropper.html.twig

@@ -1,5 +1,5 @@
 <div class="" style="display: grid; gap: 2rem;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));">
     {% for package in packages %}
-        <twig:ComponentBox :package="package" />
+        <twig:PackageBox :package="package" />
     {% endfor %}
 </div>

ux.symfony.com/templates/live_component/live_component.html.twig

@@ -91,16 +91,16 @@
     </div>
     {% endblock %}
 
-    <p class="eyebrows" style="margin-top: 111px;">Components</p>
+    <p class="eyebrows" style="margin-top: 111px;">Packages</p>
     <div class="d-md-flex justify-content-md-between text-center text-md-start">
-        <h2 class="ubuntu pt-2 component-headlines">Install extra <span class="hero">Components</span></h2>
-        <a style="height: 100%;" class="btn btn-md btn-outline-dark mt-3 mt-md-0"  href="{{ path('app_all_components')}}">
-            Browse all Components
+        <h2 class="ubuntu pt-2 component-headlines">Install extra <span class="hero">Packages</span></h2>
+        <a style="height: 100%;" class="btn btn-md btn-outline-dark mt-3 mt-md-0"  href="{{ path('app_all_packages')}}">
+            Browse all Packages
             <twig:Icon name="arrow-right" style="transform: rotate(-45deg);"/>
         </a>
     </div>
     <div class="row mt-3 mt-md-5">
-        {{ include('main/_componentsList.html.twig') }}
+        {{ include('main/_packagesList.html.twig') }}
     </div>
 
     {#

ux.symfony.com/templates/main/_componentsList.html.twig renamed to ux.symfony.com/templates/main/_packagesList.html.twig

@@ -1,15 +1,15 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}All Symfony UX Components{% endblock %}
+{% block title %}All Symfony UX Packages{% endblock %}
 
 {% block body %}
 <div class="container-fluid container-xxl px-5 pt-5">
     {{ include('_main_nav.html.twig') }}
 
-    <h1 class="text-center ubuntu mt-5">All Components</h1>
+    <h1 class="text-center ubuntu mt-5">All Packages</h1>
         <p class="text-center mt-2 mb-5">A treasure chest of packages to solve your<br>frontend problems.</p>
 
-    {{ include('main/_componentsList.html.twig') }}
+    {{ include('main/_packagesList.html.twig') }}
 </div>
 
 <div style="background-color: #F2F2F2;">

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

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'notify',
         eyebrowText: 'Native Browser Notifications'

ux.symfony.com/templates/main/components.html.twig renamed to ux.symfony.com/templates/main/packages.html.twig

@@ -1,10 +1,10 @@
 {% extends 'base.html.twig' %}
 
 {% set package = twigPackageHelper.currentPackage() %}
-{% block title %}{{ package.humanName }} | Symfony UX Components{% endblock %}
+{% block title %}{{ package.humanName }} | Symfony UX Packages{% endblock %}
 
 {% block body %}
-    {% block component_header %}{% endblock %}
+    {% block package_header %}{% endblock %}
 
     <div class="container-fluid container-xxl px-5 pt-5">
         <div class="arrow mb-3 d-none d-md-block"></div>
@@ -34,7 +34,7 @@
             package: package,
         }) }}
 
-        {% block component_bottom %}{% endblock %}
+        {% block package_bottom %}{% endblock %}
     </div>
 
     {% block documentation_links %}

ux.symfony.com/templates/notifier/notify.html.twig

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'swup',
         eyebrowText: 'Slick Page Transitions'

ux.symfony.com/templates/packageBase.html.twig

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'autocomplete',
         eyebrowText: 'Smart Form Controls'

ux.symfony.com/templates/swup/swup.html.twig

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'dropzone',
         eyebrowText: 'Styled Upload Zone'

ux.symfony.com/templates/ux_packages/autocomplete.html.twig

@@ -1,6 +1,6 @@
 {% extends 'packageBase.html.twig' %}
 
-{% block component_header %}
+{% block package_header %}
     {% component PackageHeader with {
         package: 'lazy-image',
         eyebrowText: 'Images that Zoom',