Component Library Solution: django-lookbook

Show & Tell
1

Hi, I’d like to share an Django component library solution django-lookbook here.

I want something like “StoryBook” to Django but existing solutions of the Django community did not make me satisfied, so I built it myself.

Below are some features you might be interested:

Pluggable app

It is a classic Django pluggable app which can be integrated with your Django project within minutes.

No matter your Django project use jQuery, Vanilla JS, Alpine.js, HTMX, Stimulus.js or other frontend solution, it can work with them all.

Preview

Let’s say you have a custom Modal component in your Django project, built with Alpine.js, and it supports different modal size small, medium, large based on the Tailwind CSS

How to make other team mates quickly understand the usage? Instead of digging the Django templates?

We can create three previews for the Modal and developers can directly check the final result in the component library.

class ModalComponentPreview:

    def small_modal():

    def medium_modal():

    def large_modal():

As you can see, we can create previews and put them in one Python class, and the syntax is very similar with writing unittests in Django.

After you create the previews, the component library can auto detect and display them on the sidebar.

Your teammates can quickly understand how the Modal is used, the code style is consistent, productivity is improved, and everyone is happy.

Each preview has isolated env and if your template code needs special attribute from request, you can even mock the Django request, as I said, it is very similar with writing unittests.

Reactive

Please open your eye because now I am talking about the killer feature of this project (inspired by Storybook Controls).

From now, the code of preview is hard coded in the Python.

Can we make it reactive?

For example, we have a template snippet which render button element.

It would be great to let your teammates to try different button style and button text to check the final result in real time.

And you can use the boring Django form to do this, yes, it is boring, but it is working!

class ButtonForm(forms.Form):
    COLOR_CHOICES = (
        ("btn-blue", "Blue"),
        ("btn-green", "Green"),
        ("btn-red", "Red"),
    )

    btn_text = forms.CharField(
        label="Button Text",
        max_length=100,
        help_text="Enter button text",
        initial="Button",
    )
    btn_color = forms.ChoiceField(
        choices=COLOR_CHOICES,
        label="Button Color",
        help_text="Select button color",
    )

Then we got this

params-editor

With this approach, you can define and make the preview react on the parameters passed from the end users, which is very powerful.

Github Link

I hope this package can help developers extract reusable, maintainable component from the Django application.

Here is the Github link, please check if you want to know more, and any feedback is welcome.

django-lookbook

2 Likes