Skip to content

Commit 5dd8607

Browse files
Halleck45Halleck45
committed
adds details about ux_toolkit configuration in documentation
1 parent 8f4c54e commit 5dd8607

File tree

3 files changed

+89
-7
lines changed

3 files changed

+89
-7
lines changed

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
when@dev:
2+
ux_toolkit:
3+
theme: default
4+
prefix: null

‎ux.symfony.com/templates/ux_packages/_package_install.html.twig

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="col-12 col-md-6">
55
{% component Terminal with {bottomPadding: 20} %}
66
{% block content %}
7-
composer require {{ package.composerName }}
7+
composer require {% if installOnlyInDevMode|default(false) == true%} --dev {% endif %}{{ package.composerName }}
88
{% endblock %}
99
{% endcomponent %}
1010
</div>

‎ux.symfony.com/templates/ux_packages/toolkit.html.twig

+84-6
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,15 @@
6969
<twig:BreadcrumbLink href="/">Home</twig:BreadcrumbLink>
7070
</twig:BreadcrumbItem>
7171
<twig:BreadcrumbSeparator />
72-
<twig:BreadcrumbItem sm="true">
72+
<twig:BreadcrumbItem>
7373
<twig:BreadcrumbEllipsis />
7474
</twig:BreadcrumbItem>
7575
<twig:BreadcrumbSeparator />
76-
<twig:BreadcrumbItem sm="false">
76+
<twig:BreadcrumbItem>
7777
<twig:BreadcrumbLink href="/docs">Docs</twig:BreadcrumbLink>
7878
</twig:BreadcrumbItem>
7979
<twig:BreadcrumbSeparator />
80-
<twig:BreadcrumbItem sm="false">
80+
<twig:BreadcrumbItem>
8181
<twig:BreadcrumbLink href="/docs/components">Components</twig:BreadcrumbLink>
8282
</twig:BreadcrumbItem>
8383
<twig:BreadcrumbSeparator />
@@ -102,18 +102,96 @@
102102
<div class="col-6">
103103
{% block avatar_example %}
104104
<twig:Avatar class="inline-block">
105-
<twig:AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
106-
<twig:AvatarFallback>CN</twig:AvatarFallback>
105+
<twig:AvatarImage src="https://github.com/symfony.png" alt="@symfony" />
106+
<twig:AvatarFallback>SF</twig:AvatarFallback>
107107
</twig:Avatar>
108108

109109
<twig:Avatar class="inline-block">
110-
<twig:AvatarFallback class="bg-blue-400">CN</twig:AvatarFallback>
110+
<twig:AvatarFallback class="bg-blue-400">SF</twig:AvatarFallback>
111111
</twig:Avatar>
112112
{% endblock %}
113113
</div>
114114
</div>
115115
{% endblock %}
116116

117+
118+
{% block package_install %}
119+
{% set installOnlyInDevMode = true %}
120+
{{ parent() }}
121+
<section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
122+
<p>
123+
Then install your components with the following command:
124+
</p>
125+
126+
{% component Terminal with {bottomPadding: 20} %}
127+
{% block content %}
128+
php bin/console ux:toolkit:install badge
129+
php bin/console ux:toolkit:install button
130+
php bin/console ux:toolkit:install card
131+
php bin/console ux:toolkit:install breadcrumb
132+
php bin/console ux:toolkit:install avatar
133+
php bin/console ux:toolkit:install ...
134+
{% endblock %}
135+
{% endcomponent %}
136+
137+
<p class="mt-4">
138+
Official components require tailwindcss to be installed in your project. Visit the <a class="underline" href="https://tailwindcss.com/docs/installation" target="_blank">Tailwindcss documentation</a> for more information.
139+
Components are based on <a href="https://ui.shadcn.com/" target="_blank">shadcdn/ui</a> design system.
140+
</p>
141+
142+
<p class="mt-4">
143+
If you use component library using <code>html_cva()</code> or <code>tailwind_merge()</code> functions, remember to install them with:
144+
</p>
145+
146+
{% component Terminal with {bottomPadding: 20} %}
147+
{% block content %}
148+
composer require --dev tales-from-a-dev/twig-tailwind-extra twig/extra-bundle
149+
{% endblock %}
150+
{% endcomponent %}
151+
152+
153+
</section>
154+
<section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
155+
<h2 class="ubuntu text-center mt-5">Philosophy</h2>
156+
<div class=" justify-content-center mt-5">
157+
<div class="col-12">
158+
<p>
159+
Toolkit provides ready-to-use components, but freely customizable.
160+
</p>
161+
<p>
162+
Official components are copied into your project in the <code>templates/components</code> folder, like classic TwigComponent.
163+
Feel free to modify the code to suit your needs.
164+
</p>
165+
</div>
166+
<div class="col-12 mt-4">
167+
<p>
168+
It is quite possible to install other component libraries, or even redistribute your own components
169+
(for example, if you want to provide your internal Design System).
170+
</p>
171+
<p>
172+
The choice of the component library is made in the configuration of your project:
173+
</p>
174+
175+
<twig:CodeBlock
176+
filename="config/packages/ux_toolkit.yaml"
177+
:showTwigExtends="false"
178+
language="yaml"
179+
showFilename="false"
180+
:copyButton="true"
181+
:stripExcessHtml="false"
182+
height="{{ height|default('auto') }}"
183+
style="--bg-header: rgba(13, 13, 13, 0.729); --header-opacity: .5;"
184+
/>
185+
186+
<p class="mt-4">
187+
The <code>theme</code> key allows you to choose the component library to use, and can be any GitHub repository.
188+
</p>
189+
</div>
190+
</div>
191+
</section>
192+
{% endblock %}
193+
194+
117195
{% block javascripts %}
118196
{{ parent() }}
119197
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

0 commit comments

Comments
 (0)