Using a components library? (e.g. django-components or JinjaX)

[HiPhish]

Hello,

on the documentation website under "Related projects" a number of component libraries like django-components and JinjaX are listed as "complementary" packages. The question is, what would be the best way to go about using them? My guess would be to define the components in one place outside the patterns directory, and then in the patterns directory define small wrappers around the components which just call the components.

Here is an example using JinjaX:

{# components/message.html.jinja #}

{#def class, title #}
<div class="{{ class }}">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
</div>

Then the patterns

{# pattern/molecules/message_box/warning.html.jinja #}

{% block content %}
{% call catalog.irender("Message", class="warning", title="My warning") %}
This is some warning message
{% endcall %}
{% endblock %}

{# pattern/molecules/message_box/error.html.jinja #}

{% block content %}
{% call catalog.irender("Message", class="error", title="My error") %}
This is some error message
{% endcall %}
{% endblock %}

This would also allow me to have multiple variants of the same component as separate patterns. In this setup patterns are just for displaying in the pattern library frontend, but not for building actual pages. Is this the way to go or is there a better approach?

[thibaudcolas]

Hey @HiPhish, the original design idea for django-pattern-library was that you would directly point it at the components’ source, and use .yaml files to provide the demo content. However that currently doesn’t support multiple variants – so your approach could be decent!