Skip to content

Commit 376d304

Browse files
smnandresmnandre
committed
minor #2248 [Site] Add Stimulus Bundle missing page (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Add Stimulus Bundle missing page Add first (minimal) version of this page | . | . | | - | - | | ![Capture d’écran 2024-10-07 à 22 42 23](https://github.com/user-attachments/assets/2b32db55-abd9-4fe3-9cec-7c954a154d04) | ![Capture d’écran 2024-10-07 à 22 42 29](https://github.com/user-attachments/assets/f092e24c-3a74-4cc1-b2e7-acac06b49eeb) | Commits ------- 4f73505 [Site] Add Stimulus Bundle missing page
2 parents 3feb03f + 4f73505 commit 376d304

File tree

13 files changed

+292
-26
lines changed

13 files changed

+292
-26
lines changed

‎ux.symfony.com/assets/images/ux_packages/stimulus-1200x675.png

74.2 KB
Loading

‎ux.symfony.com/assets/images/ux_packages/stimulus.svg

Lines changed: 5 additions & 0 deletions
Loading

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ $utilities: map-remove(
132132
@import "components/DemoContainer";
133133
@import "components/DemoCard";
134134
@import "components/DocsLink";
135+
@import "components/FeatureBox";
135136
@import "components/FileTree";
136137
@import "components/Icon";
137138
@import "components/IconGrid";

‎ux.symfony.com/assets/styles/components/_FeatureBox.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.FeatureBox {
2+
3+
--bg-color: var(--bs-body-bg);
4+
[data-bs-theme="dark"] {
5+
--bg-color: #1b1e21;
6+
}
7+
8+
background: var(--bg-color);
9+
border: 1px solid var(--bs-secondary-bg-subtle);
10+
border-radius: var(--border-radius);
11+
display: grid;
12+
padding: 1rem;
13+
place-content: center;
14+
gap: .75rem;
15+
}
16+
17+
.FeatureBox_icon {
18+
height: 2.4rem;
19+
display: grid;
20+
place-content: center;
21+
svg {
22+
height: 100%;
23+
width: 100%;
24+
}
25+
path, circle {
26+
fill: var(--bs-body-bg);
27+
fill-opacity: .1;
28+
stroke: currentColor;
29+
stroke-width: 1;
30+
transition: 400ms;
31+
}
32+
}
33+
.FeatureBox:hover {
34+
path, circle {
35+
fill-opacity: .15;
36+
stroke-width: 1.25;
37+
}
38+
}
39+
40+
.FeatureBox_title {
41+
opacity: .85;
42+
font-weight: 400;
43+
font-size: 1rem;
44+
font-family: var(--font-family-text);
45+
color: var(--bs-body-color);
46+
text-decoration: none;
47+
line-height: 1;
48+
text-align: center;
49+
}

‎ux.symfony.com/assets/styles/sections/_hero.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,16 @@
77
}
88

99
.hero-sub-text {
10-
width: 40%;
10+
width: 50%;
1111
text-wrap: balance;
1212
}
13+
.hero-sub-text a {
14+
border-bottom: 1.5px solid #ffff;
15+
text-decoration: none;
16+
}
17+
.hero-sub-text a:hover {
18+
color: inherit;
19+
}
1320

1421
@media (max-width: 1114px) {
1522
.hero-sub-text {

‎ux.symfony.com/config/packages/ux_icons.yaml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
ux_icons:
22
default_icon_attributes:
33
class: 'Icon'
4+
5+
icon_sets:
6+
7+
# FeatureBox icons
8+
feature:
9+
alias: 'lucide'
10+
# icon_attributes:

‎ux.symfony.com/src/Controller/UxPackage/StimulusController.php

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <fabien@symfony.com>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Controller\UxPackage;
13+
14+
use App\Service\UxPackageRepository;
15+
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
16+
use Symfony\Component\HttpFoundation\Response;
17+
use Symfony\Component\Routing\Attribute\Route;
18+
19+
class StimulusController extends AbstractController
20+
{
21+
public function __construct(
22+
private readonly UxPackageRepository $packageRepository,
23+
) {
24+
}
25+
26+
#[Route('/stimulus', name: 'app_stimulus')]
27+
public function __invoke(): Response
28+
{
29+
$package = $this->packageRepository->find('stimulus');
30+
31+
return $this->render('ux_packages/stimulus.html.twig', [
32+
'package' => $package,
33+
]);
34+
}
35+
}

‎ux.symfony.com/src/Model/UxPackage.php

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ public function __construct(
2626
private string $gradient,
2727
private string $tagLine,
2828
private string $description,
29-
private string $createString,
29+
private ?string $createString = null,
3030
private ?string $imageFileName = null,
31+
private ?string $composerName = null,
3132
) {
3233
}
3334

@@ -73,7 +74,7 @@ public function getDescription(): string
7374

7475
public function getComposerName(): string
7576
{
76-
return 'symfony/ux-'.$this->getName();
77+
return $this->composerName ?? 'symfony/ux-'.$this->getName();
7778
}
7879

7980
public function getComposerRequireCommand(): string
@@ -117,12 +118,21 @@ public function getScreencastLinkText(): ?string
117118
return $this->screencastLinkText;
118119
}
119120

121+
public function setOfficialDocsUrl(string $officialDocsUrl): self
122+
{
123+
$this->officialDocsUrl = $officialDocsUrl;
124+
125+
return $this;
126+
}
127+
128+
private string $officialDocsUrl;
129+
120130
public function getOfficialDocsUrl(): string
121131
{
122-
return \sprintf('https://symfony.com/bundles/ux-%s/current/index.html', $this->name);
132+
return $this->officialDocsUrl ??= \sprintf('https://symfony.com/bundles/ux-%s/current/index.html', $this->name);
123133
}
124134

125-
public function getCreateString(): string
135+
public function getCreateString(): ?string
126136
{
127137
return $this->createString;
128138
}

‎ux.symfony.com/src/Service/UxPackageRepository.php

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,21 @@ public function findAll(?string $query = null): array
8080
->setDocsLink('https://turbo.hotwired.dev/handbook/introduction', 'Documentation specifically for the Turbo JavaScript library.')
8181
->setScreencastLink('https://symfonycasts.com/screencast/turbo', 'Go deep into all 3 parts of Turbo.'),
8282

83+
(new UxPackage(
84+
'stimulus',
85+
'Stimulus',
86+
'app_stimulus',
87+
'#2EB17B',
88+
'linear-gradient(to bottom right, #3D9A89 5%, #2EB17B 80%)',
89+
'Central Bridge of Symfony UX',
90+
'Integration with Stimulus for HTML-powered controllers',
91+
null,
92+
'stimulus.svg',
93+
'symfony/stimulus-bundle',
94+
))
95+
->setOfficialDocsUrl('https://symfony.com/bundles/StimulusBundle')
96+
->setScreencastLink('https://symfonycasts.com/screencast/stimulus', 'More than 40 videos to master Stimulus.'),
97+
8398
new UxPackage(
8499
'autocomplete',
85100
'Autocomplete',
@@ -100,7 +115,7 @@ public function findAll(?string $query = null): array
100115
'Symfony Translations in JavaScript',
101116
"Use Symfony's translations in JavaScript",
102117
'I need to translate strings in JavaScript',
103-
'translator.svg'
118+
'translator.svg',
104119
),
105120

106121
(new UxPackage(
@@ -135,7 +150,7 @@ public function findAll(?string $query = null): array
135150
'linear-gradient(95deg, #35B67C -5%, #8CE3BC 105%)',
136151
'Render Vue components from Twig',
137152
'Quickly render `<Vue />` components &amp; pass them props.',
138-
'I need to render Vue.js components from Twig'
153+
null,
139154
))
140155
->setDocsLink('https://vuejs.org/', 'Go deeper with the Vue.js docs.'),
141156

@@ -147,7 +162,7 @@ public function findAll(?string $query = null): array
147162
'linear-gradient(115deg, #BE3030, #FF3E00)',
148163
'Render Svelte components from Twig',
149164
'Quickly render `<Svelte />` components &amp; pass them props.',
150-
'I need to render Svelte components from Twig',
165+
null,
151166
'svelte.svg',
152167
))
153168
->setDocsLink('https://svelte.dev/', 'Go deeper with the Svelte docs.'),
@@ -160,7 +175,7 @@ public function findAll(?string $query = null): array
160175
'linear-gradient(136deg, #1E8FA8 -7%, #3FC0DC 105%)',
161176
'Form Tools for cropping images',
162177
'Form Type and tools for cropping images',
163-
'I need to add a JavaScript image cropper'
178+
null,
164179
))
165180
->setDocsLink('https://github.com/fengyuanchen/cropperjs', 'Cropper.js documentation.'),
166181

@@ -172,7 +187,6 @@ public function findAll(?string $query = null): array
172187
'linear-gradient(136deg, #AC2777 -8%, #F246AD 105%)',
173188
'Delay Loading with Blurhash',
174189
'Optimize Image Loading with BlurHash',
175-
'I need to delay large image loading'
176190
),
177191

178192
new UxPackage(
@@ -194,7 +208,6 @@ public function findAll(?string $query = null): array
194208
'linear-gradient(95deg, #D87036 -5%, #EA9633 105%)',
195209
'Stylized Page Transitions',
196210
'Integration with the page transition library Swup',
197-
'I need stylized page transitions'
198211
))
199212
->setDocsLink('https://swup.js.org/', 'Swup documentation'),
200213

@@ -206,7 +219,6 @@ public function findAll(?string $query = null): array
206219
'linear-gradient(95deg, #204CA0 -6%, #3D82EA 105%)',
207220
'Native Browser Notifications',
208221
'Trigger native browser notifications from inside PHP',
209-
'I need to send browser notifications',
210222
),
211223

212224
new UxPackage(
@@ -217,7 +229,6 @@ public function findAll(?string $query = null): array
217229
'linear-gradient(142deg, #FD963C -15%, #BE0404 95%)',
218230
'Password Visibility Switch',
219231
'Switch the visibility of a password field',
220-
'I need to toggle the visibility of a password field',
221232
),
222233

223234
(new UxPackage(
@@ -228,7 +239,6 @@ public function findAll(?string $query = null): array
228239
'linear-gradient(95deg, #20A091 -5%, #4EC9B3 105%)',
229240
'Animated Typing with Typed.js',
230241
'Animated typing with Typed.js',
231-
'I need to type onto the screen... like this'
232242
))
233243
->setDocsLink('https://github.com/mattboldt/typed.js/', 'Typed.js documentation'),
234244
];

‎ux.symfony.com/src/Twig/HomepageTerminalSwapper.php

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
namespace App\Twig;
1313

14+
use App\Model\UxPackage;
1415
use App\Service\UxPackageRepository;
1516
use App\Util\SourceCleaner;
1617
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
@@ -27,7 +28,8 @@ public function __construct(private UxPackageRepository $packageRepository)
2728
public function getTypedStrings(): array
2829
{
2930
$strings = [];
30-
$packages = $this->packageRepository->findAll();
31+
$packages = array_filter($this->packageRepository->findAll(), fn (UxPackage $p): bool => null !== $p->getCreateString());
32+
3133
shuffle($packages);
3234

3335
foreach ($packages as $package) {

‎ux.symfony.com/templates/components/FeatureBox.html.twig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="FeatureBox">
2+
<div class="FeatureBox_icon">
3+
<twig:ux:icon name="feature:{{ icon }}" />
4+
</div>
5+
<h3 class="FeatureBox_title">{{ title }}</h3>
6+
</div>

‎ux.symfony.com/templates/components/Package/PackageHeader.html.twig

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1-
<div class="PackageHeader mb-5" style="background: {{ package.gradient }}, {{ package.color }};">
1+
<div class="PackageHeader mb-5 {{ not (command ?? true) ? 'pb-5' }}" style="background: {{ package.gradient }}, {{ package.color }}; --color-accent: {{ package.color }};"
2+
>
23
<div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5 position-relative">
34

4-
<p class="eyebrows text-center font-white mt-5" style="opacity: 0.8;">{{ eyebrowText|raw }}</p>
5+
<p class="eyebrows text-center font-white mt-5" style="opacity: 0.85;">{{ eyebrowText|raw }}</p>
56

6-
<h1 class="text-center font-white">{% block title_header %}{% endblock %}</h1>
7+
<h1 class="text-center font-white">{% block title_header %}{{ title|default }}{% endblock %}</h1>
78

89
<div class="d-flex justify-content-center">
910
<p class="text-center font-white mt-3 pb-3 hero-sub-text">
10-
{% block sub_content %}{% endblock %}
11+
{% block sub_content %}{{ subtitle|default }}{% endblock %}
1112
</p>
1213
</div>
1314

14-
<div class="d-flex justify-content-center ">
15-
<twig:TerminalCommand
16-
aria-label="Composer command to install {{ package.humanName }}"
17-
command="{{ package.composerRequireCommand }}"
18-
style="--color-accent: {{ package.color }}; transform: translateY(50%);"
19-
/>
20-
</div>
15+
{% if command is not defined or command %}
16+
<div class="d-flex justify-content-center">
17+
<twig:TerminalCommand
18+
aria-label="Composer command to install {{ package.humanName }}"
19+
command="{{ package.composerRequireCommand }}"
20+
style="--color-accent: {{ package.color }}; transform: translateY(50%);"
21+
/>
22+
</div>
23+
{% endif %}
24+
2125
</div>
2226
</div>

0 commit comments

Comments
 (0)