Statamic Peak

Article

PETAL Components disponible en v1

Nicolas Kempf Le Stanc

Nicolas Kempf Le Stanc

2 min

Venez découvrir la librairie PETAL Components pour Phoenix LiveView et comment la mettre à jour en v1.

Présentation de la librairie PETAL Components

PETAL Components est une librairie de composants clef en main pour la stack technique PETAL (Phoenix framework, Elixir, TailwindCSS, AlpineJS et LiveView).

Elle propose un ensemble d'éléments déjà stylisés et vraiment jolis que vous pouvez utilisez dans vos projets.

Elle inclut la plupart des composants qu'on attend de ce genre de librairies :

  • un conteneur,

  • des liens,

  • des boutons,

  • des titres,

  • des icônes,

  • des badges,

  • des alertes,

  • des champs de formulaire avec gestion des erreurs,

  • des menus déroulants,

  • des indicateurs de chargement,

  • des fils d'ariane,

  • des avatars,

  • des barres de progression,

  • une pagination,

  • une fenêtre type modal,

  • des onglets,

  • des cartes,

  • des tableaux,

  • des slide overs,

  • et des accordéons.

L'utilisation est vraiment simple et se base sur des attributs et des slots comme pour des composants de librairies front-end.

Voici par exemple comment créer un champ de texte avec un <label> qui gère toutes les erreurs de validation venant d'un Changeset.

<.form_field
    type="text_input"
    form={@f}
    field={:business_structure}
    placeholder={gettext("e.g. EI, SARL, SAS, etc.")}
/>

Installer PETAL Components ou mettre à jour de 0.x à 1.0

La v1 de PETAL Components apporte des facilités de personnalisation qui nécessitent quelques modifications à notre projet. Les manipulations sont strictement les mêmes pour un nouveau projet ou une montée de version.

Tout d'abord, il faut ajouter la librairie ou monter la version dans le fichier `mix.exs`.

{:petal_components, "~> 1.0.1"},

Ensuite, on peut installer la dépendance à jour.

mix deps.get

Il nous reste encore 2 modifications à effectuer.

Dans notre fichier assets/tailwind.config.js, on va devoir ajouter les familles de couleurs success, danger, warning et info.

theme: {
    extend: {
      colors: {
        // ... your previous colors here
        success: colors.green,
        danger: colors.red,
        warning: colors.yellow,
        info: colors.sky,
      },
    },
  },

La dernière chose à faire est d'ajouter les styles CSS par défaut des composants, dans assets/app.css.

@import "../../deps/petal_components/assets/default.css";

Et voilà ! Nous avons maintenant des jolis composants à jour.