Skip to content

Commit 9be6a1f

Browse files
committed
fix reviews
1 parent 67c2557 commit 9be6a1f

25 files changed

+261
-262
lines changed
Loading

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
@import "components/ProductGrid";
8383
@import "components/PackageHeader";
8484
@import "components/PackageBox";
85-
@import "components/Recipe";
85+
@import "components/Cookbook";
8686
@import "components/Tabs";
8787
@import "components/Tag";
8888
@import "components/Terminal";

ux.symfony.com/assets/styles/components/_Recipe.scss renamed to ux.symfony.com/assets/styles/components/_Cookbook.scss

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.Recipe {
1+
.Cookbook {
22
h1 {
33
margin-top: 3rem;
44
margin-bottom: 1rem;
@@ -8,24 +8,14 @@
88
line-height: 60px;
99
}
1010

11-
h2 {
12-
margin-top: 3rem;
13-
margin-bottom: 1rem;
14-
font-size: 32px;
15-
font-weight: 700;
16-
line-height: 40px;
17-
}
18-
19-
h3 {
20-
margin-top: 3rem;
21-
margin-bottom: 1rem;
11+
.description {
12+
text-align: center;
2213
font-size: 24px;
23-
font-weight: 700;
24-
line-height: 32px;
25-
color: #FFFFFF;
14+
font-weight: 600;
15+
margin-top: 1.5rem;
2616
}
2717

28-
ul:first-of-type {
18+
.tags {
2919
display: flex;
3020
justify-content: center;
3121
align-items: center;
@@ -60,7 +50,30 @@
6050
}
6151
}
6252

63-
.Terminal {
64-
margin-bottom: 3rem;
53+
.content {
54+
h2 {
55+
margin-top: 3rem;
56+
margin-bottom: 1rem;
57+
font-size: 32px;
58+
font-weight: 700;
59+
line-height: 40px;
60+
}
61+
62+
h3 {
63+
margin-top: 3rem;
64+
margin-bottom: 1rem;
65+
font-size: 24px;
66+
font-weight: 700;
67+
line-height: 32px;
68+
color: #FFFFFF;
69+
}
70+
}
71+
72+
pre {
73+
margin-top: 4rem;
74+
margin-bottom: 2rem;
75+
border-radius: 4px;
76+
background-color: #0A0A0A;
77+
padding: 2rem;
6578
}
6679
}

ux.symfony.com/composer.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

ux.symfony.com/config/services.yaml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ services:
1010
_defaults:
1111
autowire: true # Automatically injects dependencies in your services.
1212
autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
13+
bind:
14+
string $cookbookPath: '%kernel.project_dir%/cookbook'
1315

1416
# makes classes in src/ available to be used as services
1517
# this creates a service per class whose id is the fully-qualified class name
@@ -24,6 +26,3 @@ services:
2426
# please note that last definitions always *replace* previous ones
2527
Tempest\Highlight\Highlighter:
2628
tags: ['twig.runtime']
27-
28-
Twig\Extension\StringLoaderExtension:
29-
tags: ['twig.extension']

ux.symfony.com/cookbook/architecture_component.md

Lines changed: 74 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
11
---
22
title: Architecture component
33
description: Rules and pattern to work with components
4-
image: /assets/images/cookbook/component_architecture-620bbd49fffc53d13e56941a359c0d1a.png
4+
image: images/cookbook/component_architecture.png
55
tags:
66
- javascript
77
- symfony
88
---
99

10-
# Architecture component
11-
12-
- javascript
13-
- symfony
14-
15-
*Rules and pattern to work with components*
16-
17-
<div class="image-title">
18-
<img src="{{ asset('images/cookbook/component_architecture.png') }}" alt="Stimulus and Symfony" />
19-
</div>
20-
2110
## Introduction
2211

2312
In SymfonyUX exist two packages: [TwigComponents](https://symfony.com/bundles/ux-twig-component/current/index.html) and [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html).
@@ -36,24 +25,33 @@ These components can be assembled to form a page. For example, there could be a
3625
The training list component could even be composed of smaller components, such as a training card component.
3726
The goal is to create the most atomic, and reusable components possible.
3827

39-
***How does it work into Symfony?***
28+
#### How does it work into Symfony?
4029

4130
In Symfony you can have a component Alert for example with the following template:
4231

43-
<div>
44-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/alert.html.twig" />
32+
```twig
33+
<div class="alert alert-{{ type }}">
34+
<twig:Icon name="{{ icon }}" />
35+
{{ message }}
4536
</div>
37+
```
4638

4739
So here you can see we have an alert component that his himself use an Icon component.
4840
Or you can make composition with the following syntax:
4941

50-
<div>
51-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/index.html.twig" />
52-
</div>
42+
```twig
43+
<twig:Card>
44+
<twig:CardHeader>
45+
<h2>My Card</h2>
46+
</twig:CardHeader>
47+
<twig:CardBody>
48+
<p>This is the content of my card.</p>
49+
</twig:CardBody>
50+
</twig:Card>
51+
```
5352

5453
So here we Card component, and we give to the content of this component mutliple other components.
5554

56-
5755
### Independence
5856

5957
This is a really important rule, and not obvious. But your component should leave on his own context,
@@ -78,22 +76,32 @@ this props at his initialization and keep it all his life long.
7876
Let's take the example of the Alert component an [anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components).
7977
We have the following template:
8078

81-
<div>
82-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/alert2.html.twig" />
79+
```twig
80+
{% props type, icon, message %}
81+
82+
<div class="alert alert-{{ type }}">
83+
<twig:Icon name="{{ icon }}" />
84+
{{ message }}
8385
</div>
86+
```
8487

8588
Just like that we define three props for our Alert component. And know we can use like this:
8689

87-
<div>
88-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/index2.html.twig" />
89-
</div>
90+
```twig
91+
<twig:Alert type="success" icon="check" message="Your account has been created." />
92+
```
9093

9194
If your component anonymous but a class component, you can simply define props
9295
by adding property to your class.
9396

94-
<div>
95-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/Alert.php" />
96-
</div>
97+
```php
98+
class Alert
99+
{
100+
public string $type;
101+
public string $icon;
102+
public string $message;
103+
}
104+
```
97105

98106
There are something really important to notice with props. It's your props
99107
should only go into one direction from the parent to child. But your props should never
@@ -112,15 +120,31 @@ And when the loading is done, the state `loading` can be set to `false` and the
112120
In symfony you 2 different approach to handle state. The first one is to use stimulus directly
113121
in to your component. What we recommend to do is to set a controller stimulus at the root of your component.
114122

115-
<div>
116-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/button.html.twig" />
117-
</div>
123+
```twig
124+
{% props label %}
125+
126+
<button data-controller="button" data-button-label="{{ label }}">
127+
{{ label }}
128+
</button>
129+
```
118130

119131
And then you can define your controller like this:
120132

121-
<div>
122-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/button_controller.js" />
123-
</div>
133+
```js
134+
import { Controller } from 'stimulus';
135+
136+
export default class extends Controller {
137+
static values = { label: String };
138+
139+
connect() {
140+
this.element.textContent = this.labelValue;
141+
}
142+
143+
loading() {
144+
this.element.textContent = 'Loading...';
145+
}
146+
}
147+
```
124148

125149
The second approach is to use the [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html) package.
126150
How to choose between the two? If your component don't need any backend logic
@@ -129,9 +153,23 @@ backend logic for your state, use LiveComponent.
129153
With live component a live prop is a state. So if you want store the number of click on a button you can do
130154
the following component:
131155

132-
<div>
133-
<twig:CodeBlock filename="cookbook/codeblock/architecture_component/LiveButton.php" />
134-
</div>
156+
```php
157+
<?php
158+
159+
#[AsLiveComponent]
160+
class Button
161+
{
162+
#[LiveProp]
163+
public int $clicks = 0;
164+
165+
public function increment()
166+
{
167+
$this->clicks++;
168+
169+
$this->save();
170+
}
171+
}
172+
```
135173

136174
## Conclusion
137175

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

Lines changed: 0 additions & 33 deletions
This file was deleted.
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
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;
13+
14+
use App\Service\CookbookFactory;
15+
use App\Service\CookbookRepository;
16+
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
17+
use Symfony\Component\HttpFoundation\Response;
18+
use Symfony\Component\Routing\Attribute\Route;
19+
20+
class CookbookController extends AbstractController
21+
{
22+
public function __construct(
23+
private CookbookRepository $cookbookRepository,
24+
private CookbookFactory $cookbookFactory,
25+
) {
26+
}
27+
28+
#[Route('/cookbook', name: 'app_cookbook_index')]
29+
public function index(): Response
30+
{
31+
return $this->render('cookbook/index.html.twig');
32+
}
33+
34+
#[Route('/cookbook/{slug}', name: 'app_cookbook_show')]
35+
public function show(string $slug): Response
36+
{
37+
$file = $this->cookbookRepository->findOneByName($slug);
38+
39+
$cookbook = $this->cookbookFactory->buildFromFile($file);
40+
41+
return $this->render('cookbook/show.html.twig', [
42+
'slug' => $slug,
43+
'cookbook' => $cookbook,
44+
]);
45+
}
46+
}

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

ux.symfony.com/src/Model/Recipe.php renamed to ux.symfony.com/src/Model/Cookbook.php

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,17 @@
1111

1212
namespace App\Model;
1313

14-
class Recipe
14+
class Cookbook
1515
{
1616
public function __construct(
17-
public string $name,
17+
public string $title,
1818
public string $description,
1919
public string $route,
2020
public string $image,
2121
public string $content,
22+
/**
23+
* @var string[]
24+
*/
2225
public array $tags = [],
2326
) {
2427
}

0 commit comments

Comments
 (0)