Skip to content

Commit 2488b65

Browse files
davidhoelzelBenjamin Schultz
davidhoelzel
and
Benjamin Schultz
authored
Release preparations (#20)
* use twig-ux-components in dev and suggest ux packages * fix hardcoded menu add basic usage doc add hints on experimental state of bundle * cs fixer * Update README.md Co-authored-by: Benjamin Schultz <[email protected]> --------- Co-authored-by: Benjamin Schultz <[email protected]>
1 parent 23adb72 commit 2488b65

File tree

9 files changed

+114
-67
lines changed

9 files changed

+114
-67
lines changed

‎README.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,27 @@
22

33
[![Image](docs/resources/images/qossmic.png)](https://qossmic.com) Brought to you by qossmic!
44

5-
1. [Installation](#installation)
6-
2. Configuration
5+
1. [Ye be warned!](#experimental-package)
6+
2. [Installation](#installation)
7+
3. Configuration
78
1. [Bundle Configuration](docs/BundleConfiguration.md)
89
2. [Component Configuration](docs/ComponentConfiguration.md)
9-
3. [Routing](#routing)
10-
4. [Customization](#customizing-the-design)
11-
5. [Usage](docs/Usage.md)
10+
4. [Routing](#routing)
11+
5. [Customization](#customizing-the-design)
12+
6. [Usage](docs/Usage.md)
1213

1314
---
1415

16+
## Experimental Package
1517
> **Important**: This is an experimental version and might change drastically.
1618
> Therefore, you might encounter breaking changes when updating until we release a stable version.
1719
20+
- bad templates: due to the lack of frontend capacities, the templates are very "basic"
21+
- but as in every Symfony bundle, you can easily overwrite them and create your own :-)
22+
- incomplete documentation
23+
- no translations (yet)
24+
25+
###
1826
Allows you to create an overview for your Twig Components, be it either [UX-Components](https://symfony.com/bundles/ux-twig-component/current/index.html), [UX-Live-Components](https://symfony.com/bundles/ux-live-component/current/index.html) or simple snippet templates.
1927

2028
Components will be grouped in categories and optional sub-categories.

‎composer.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
"symfony/browser-kit": "^6.4|^7.0",
2828
"symfony/css-selector": "^6.4|^7.0",
2929
"symfony/dom-crawler": "^6.4|^7.0",
30-
"friendsofphp/php-cs-fixer": "^3.51"
30+
"friendsofphp/php-cs-fixer": "^3.51",
31+
"symfony/ux-twig-component": "^2.16.0"
32+
},
33+
"suggest": {
34+
"symfony/ux-twig-component": "Create native UX components with twig and document them with this bundle",
35+
"symfony/ux-live-component": "Create truly reactive frontend components and document them with this bundle"
3136
}
3237
}

‎docs/Usage.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
## Usage
22

3-
TODO
4-
- screenshots of UI
5-
- searching
3+
The bundle provides two routes:
4+
5+
- component overview (twig_doc_home, /twig/doc): here are all components listed
6+
- component view (twig_doc_component_view, /twig/doc/component-view): this route is used to render a component into an iframe
7+
8+
### Overview
9+
10+
This is how a component will look like on the overview page:
11+
![image](resources/images/overview.png)
12+
13+
As the components are rendered into an iframe, you can view the behaviour of the component for different screen-sizes by simply changing its width.

‎docs/resources/images/overview.png‎

79.3 KB
Loading

‎src/Twig/TwigDocExtension.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,13 @@ public function getFunctions(): array
3535
new TwigFunction('filterComponents', [$this, 'filterComponents']),
3636
new TwigFunction('getInvalidComponents', [$this, 'getInvalidComponents']),
3737
new TwigFunction('getSubCategories', [$this, 'getSubCategories']),
38+
new TwigFunction('getComponentCategories', [$this, 'getCategories']),
3839
];
3940
}
4041

42+
/**
43+
* @codeCoverageIgnore
44+
*/
4145
public function filterComponents(string $filterQuery, ?string $type = null): ComponentItemList
4246
{
4347
return $this->componentService->filter($filterQuery, $type);
@@ -86,4 +90,14 @@ private function renderFallback(ComponentItem $item, array $params): string
8690
{
8791
return $this->twig->render($item->getRenderPath(), $params);
8892
}
93+
94+
/**
95+
* @return ComponentCategory[]
96+
*
97+
* @codeCoverageIgnore
98+
*/
99+
public function getCategories(): array
100+
{
101+
return $this->categoryService->getCategories();
102+
}
89103
}

‎templates/blocks/page_blocks.html.twig‎

Lines changed: 60 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,66 @@
11
{% block head %}
2-
{% block stylesheets %}
3-
<style>
4-
{{ include('@TwigDoc/style/style.css.twig') }}
5-
</style>
6-
{% endblock %}
2+
{% block stylesheets %}
3+
<style>
4+
{{ include('@TwigDoc/style/style.css.twig') }}
5+
</style>
6+
{% endblock %}
77
<title>{% block title %}Twig Component Documentation{% endblock %}</title>
8-
{% block javascripts %}
9-
<script type="application/javascript">
10-
window.addEventListener('load', () => {
11-
document.querySelectorAll('.twig-doc-variation h5').forEach(
12-
function (element) {
13-
element.addEventListener('click', function () {
14-
console.log(element);
15-
let variation = element.getAttribute('data-variation');
16-
element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
17-
function (e) {
18-
e.classList.remove('active');
19-
});
20-
element.classList.add('active');
21-
element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
22-
})
23-
}
24-
)
25-
const observer = new ResizeObserver((entries) => {
26-
for (const entry of entries) {
27-
entry.target.closest('.twig-doc-variation-body').querySelector('.twig-doc-viewport-width-value').innerText = entry.contentRect.width;
28-
}
29-
})
30-
document.querySelectorAll('.twig-doc-viewport').forEach((e) => {
31-
observer.observe(e);
32-
})
33-
});
34-
</script>
8+
{% block javascripts %}
9+
<script type="application/javascript">
10+
window.addEventListener('load', () => {
11+
document.querySelectorAll('.twig-doc-variation h5').forEach(
12+
function (element) {
13+
element.addEventListener('click', function () {
14+
let variation = element.getAttribute('data-variation');
15+
element.parentNode.querySelectorAll('.twig-doc-variation-body, h5').forEach(
16+
function (e) {
17+
e.classList.remove('active');
18+
});
19+
element.classList.add('active');
20+
element.parentNode.querySelector(`.twig-doc-variation-body[data-variation="${variation}"]`).classList.add('active');
21+
})
22+
}
23+
)
24+
const observer = new ResizeObserver((entries) => {
25+
for (const entry of entries) {
26+
entry.target.closest('.twig-doc-variation-body').querySelector('.twig-doc-viewport-width-value').innerText = entry.contentRect.width;
27+
}
28+
})
29+
document.querySelectorAll('.twig-doc-viewport').forEach((e) => {
30+
observer.observe(e);
31+
})
32+
});
33+
</script>
34+
{% endblock %}
3535
{% endblock %}
36+
37+
{% block navigation %}
38+
<div class="twig-doc-navigation">
39+
{% for category in getComponentCategories() %}
40+
{% if loop.first %}
41+
<ul>
42+
{% endif %}
43+
<li>
44+
<a href="{{ path('twig_doc_home', {filterQuery: category.name, filterType: 'category'}) }}">{{ category.name }}</a>
45+
{% for subCategory in getSubCategories(category.name) %}
46+
{% if loop.first %}
47+
<ul>
48+
{% endif %}
49+
<li>
50+
<a href="{{ path('twig_doc_home', {filterQuery: subCategory.name, filterType: 'subCategory'}) }}">
51+
{{ subCategory.name }}
52+
</a>
53+
</li>
54+
{% if loop.last %}
55+
</ul>
56+
{% endif %}
57+
{% endfor %}
58+
</li>
59+
{% if loop.last %}
60+
</ul>
61+
{% endif %}
62+
{% endfor %}
63+
</div>
3664
{% endblock %}
3765

3866
{% block body %}
@@ -45,23 +73,6 @@
4573
</div>
4674
{% endif %}
4775
<div class="twig-doc-body">
48-
49-
<div class="navigation">
50-
<ul>
51-
<li>
52-
<a href="?filterQuery=Atoms&filterType=category">Atoms</a>
53-
<ul>
54-
<li><a href="?filterQuery=Buttons&filterType=sub_category">Buttons</a></li>
55-
<li><a href="?filterQuery=Typography&filterType=sub_category">Typography</a></li>
56-
</ul>
57-
</li>
58-
<li><a href="?filterQuery=Commons&filterType=category">Commons</a></li>
59-
<li><a href="?filterQuery=Snippets&filterType=category">Snippets</a></li>
60-
<li><a href="?filterQuery=Blocks&filterType=category">Blocks</a></li>
61-
<li><a href="?filterQuery=Templates&filterType=category">Templates</a></li>
62-
</ul>
63-
</div>
64-
6576
{% for component in components %}
6677
{% include '@TwigDoc/component/_item.html.twig' with { component: component } %}
6778
{% endfor %}

‎templates/documentation.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{{ block('head') }}
66
</head>
77
<body>
8+
{{ block('navigation') }}
89
{{ block('body') }}
910
</body>
1011
</html>

‎templates/style/style.css.twig‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#twig-doc-container {
2-
margin-top: 50px;
2+
margin-top: 60px;
33
}
44
#twig-doc-container .breakpoints {
55
position: fixed;
@@ -26,7 +26,7 @@
2626
flex-grow: 1;
2727
}
2828

29-
#twig-doc-container .navigation {
29+
.twig-doc-navigation {
3030
position: fixed;
3131
left: 0;
3232
top: 0;
@@ -37,28 +37,28 @@
3737
z-index: 100;
3838
}
3939

40-
#twig-doc-container .navigation ul {
40+
.twig-doc-navigation ul {
4141
display: flex;
4242
position: relative;
4343
flex-direction: row;
4444
{# margin-bottom: 25px; #}
4545
}
4646

47-
#twig-doc-container .navigation ul ul {
47+
.twig-doc-navigation ul ul {
4848
display: none;
4949
position: absolute;
5050
}
5151

52-
#twig-doc-container .navigation li {
52+
.twig-doc-navigation li {
5353
list-style: none;
5454
}
5555

56-
#twig-doc-container .navigation li a {
56+
.twig-doc-navigation li a {
5757
padding: 5px 15px;
5858
}
5959

6060

61-
#twig-doc-container .navigation li:hover ul {
61+
.twig-doc-navigation li:hover ul {
6262
display: flex;
6363
}
6464

@@ -169,4 +169,4 @@
169169
width: 100%;
170170
flex-grow: 1;
171171
border: 0;
172-
}
172+
}

‎tests/Functional/Twig/TwigDocExtensionTest.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ public function testGetFunctions(): void
3434
$extension = static::getContainer()->get(TwigDocExtension::class);
3535
$functions = $extension->getFunctions();
3636

37-
static::assertCount(4, $functions);
37+
static::assertCount(5, $functions);
3838

3939
foreach ($functions as $function) {
4040
static::assertInstanceOf(TwigFunction::class, $function);

0 commit comments

Comments
 (0)