iOS — Prism aka le Storybook de SwiftUI.

Joey Barbier
3 min readNov 27, 2022

Une plateforme pour les partager tous 📈

Prism — OS X / iOS

StoryBook ? 🤓

Storybook.js

À l’air du Design System et du branding, nos amis du web ont un outil très pratique “StoryBook” (https://storybook.js.org/).

Cette plateforme permet d’exposer les différents composants réalisés, ce qui permet aux designers/développeur de voir les composants déjà existant ainsi que de les tester en live.

🎉 Prism, le showroom de vos composants !

Prism — V1.0

Le projet est open source ! https://github.com/joey-barbier/ios-prism

Vous pouvez fork le repo pour créer votre propre Prism, pour ça il vous suffit de rajouter vos composants puis de builder 🙌🏻

Il ne vous reste plus qu’à partager votre app Prism à vos designers, développeurs…

Je rajouterai plusieurs composants par la suite sur mon GitHub donc n’hésites pas à me follow: https://github.com/joey-barbier/

🧱 Comment créer un composant ?

Pour créer un composant, vous pouvez utiliser le script “new.rb” :

Une fois exécuté, le script va vous demander la catégorie de votre nouveau composant (exp: Loader, Button, ActivityIndicator …) ainsi que son nom.

Une fois les informations saisies, il va générer la class de votre composant, sa démo et mettre à jour le fichier PodSpec ! 🎉

Finder — Nouveau composant.
Mise à jour du PodSpec.

La vue de démo du composant 🎛

Vue du composant

Un dossier `NomDuComposant+Demo` a été généré dans ce dossier vous pouvez voir les différentes vues (correspondant au menu):

  • …+Colors: Vue permetant la gestion UI de votre composant
  • …+Documentation: Pour d’afficher votre documentation directement dans l’application
  • …+Params: Afficher les différents champs de configuration de votre composant (titre, taille …)
  • …+Preview: Vue qui va être utilisée pour afficher votre composant
  • …+Status: Dans le cas ou votre composant dispose de plusieurs état.

Si vous avez un doute, n’hésitez pas à vous inspirer du composant PrismButtonLoader présent dans le repo.

Merci 🫶🏻

Merci pour la lecture, pensez à partager l’article et pour finir vous pouvez lâcher vos meilleurs claps ! 👏 ⬇️

PS: Teasing, la prochaine update sera “La gestion des tests” 🤫

--

--

Joey Barbier

Lead Tech iOS. Consultant et développeur pour applications iOS en remote depuis Lille. https://www.joeybarbier.com