Storybook Nedir? Nasıl Kullanılır?
Bu yazımda Storybook’a neden ihtiyaç duyuldu? öncesinde işler nasıldı? kullanmamızın faydaları nelerdir? gibi bazı soruların cevaplarından kısaca bahsetmeye çalışacağım.
Günümüz UI library ve frameworkleri componentler üzerinden arayüzler geliştirmeye olanak sağlarlar ve çoğunlukla tercih edilen yöntem budur. Component bazlı geliştirmenin, kullanıcı arayüzleri oluşturmak için harika bir yol olduğu fikrine çoğu frontend geliştiricisinin karşı çıkmayacağını düşünüyorum. Kodunuzu belirli kullanım durumlarına bağlamayı, kodu yeniden kullanmayı, test ve analiz etmeyi ve çok daha fazlasını kolaylaştırırlar. Ancak uygulamanız büyüdükçe, componentler bile uygulamanızda olup biten her şeyi takip etmek için yeterli olmaz. Tam da bu noktada componentleri tek başına oluşturmaya ve aynı zamanda aralarındaki ilişkiyi incelemeye izin veren bir araç olsa çok güzel olurdu diye düşünebilirsiniz. Bu sayede tüm bu karmaşayı yönetilebilir hale getirebilirdik. İşte tam da bu gibi durumlar sonucunda Storybook gibi araçların hepimizin ihtiyaç duyduğu bir şey olduğunu gördük.
Storybook, kullanıcı arayüzü bileşenlerini ve sayfaları ayrı ayrı izole bir şekilde geliştirmek için açık kaynaklı bir araçtır. Arayüzü oluşturmayı, belgelemeyi ve test etmeyi basitleştirir.
Storybook kendi web sitesindeki tanımında bahsettiği gibi, arayüz bileşenlerini izole bir ortamda geliştirmeyi test etmeyi ve döküman haline getirmeyi kolaylaştırır. Bu şu anlama geliyor: Storybook ile componentlerinizi projenizin data, API ya da business logic kısımlarından ayırarak sadece arayüz kısımlarına odaklanıp yeniden kullanılabilir olacak şekilde bir style guide veya design system olarak kurgulayabilir ve bu doğrultuda kullanabilirsiniz. Bu sayede hem zamandan hem de karmaşadan tasarruf sağlayabilir ve işlerinizi büyük oranda hızlandırabilirsiniz.
Pekala, örnek bir uygulama üzerinden Storybook nasıl kullanılır şimdi bunu inceleyelim.
Proje Oluşturma ve İlk Aşamalar
Örnek projemizi create-react-app üzerinden uygulayacağım. Siz isterseniz Vue, Angular veya daha başka birçok library ve framework ile birlikte kullanabilirsiniz.
Öncelikle terminalimizi açıp:
komutlarını yazarak projemizi oluşturabiliriz. example-project yerine istediğiniz herhangi bir isim verebilirsiniz.
Daha sonra terminale aşağıdaki komutu yazarak projenizi ayağa kaldırabilirsiniz.
Örneğin bir buton componenti yaptığımızı varsayalım ve story’sini yazalım. Button.stories.jsadında bir dosya oluşturup içerisine ilk story’mizi ekleyelim.
Component Story Format
Story’leri, araçlar arasında yazması ve taşınabilir olması açısından daha kolay olan ES6 module tabanlı bir standart olan Component Story Format (CSF) şeklinde tanımlayarak ilerleyeceğiz.
default export, Storybook’un story’lerinizi nasıl listelediğini kontrol eder ve addons (daha sonra değineceğiz) tarafından kullanılan bilgileri almasını sağlar.
İsterseniz ihtiyacınız olan herhangi bir story’i yeniden adlandırabilirsiniz. Örneğin daha net bir isim vermek için Primary story’sinin adını aşağıdaki şekilde değiştirebilirsiniz:
Çoğu zaman bir component’in birden fazla varyasyonları farklı durumları olabilir. Bu durumlarda ise bir ana şablon tanımlayıp args ile ana şablonumuza farklı parametre ve proplar atayarak birden fazla kez story’mizi kullanabiliriz. Args kullanımını daha detaylı incelemek isterseniz buradan ulaşabilirsiniz.
Şablon, storyler arasında yeniden kullanılabilir. Template.bind({}) kod tekrarını azaltan fonksiyonun bir kopyasını oluşturur. Benzer şekilde,…Primary.args verilerin bir kopyasını oluşturarak veri tekrarını azaltır. İlk storylerimizi yazdığımıza göre şimdi farklı kullanımlara ve Storybook’un bize sağladığı diğer kolaylıklara da göz atalım.
İki Veya Daha Fazla Componentle Kullanma
Design system veya component library’ler oluşturuyorsanız, birlikte çalışmak üzere tasarlanmış iki veya daha fazla componente sahip olabilirsiniz. Örneğin, bir üst List componentiniz varsa, alt ListItem componenti de gerektirebilir.
Bu gibi durumlarda, her story için farklı bir fonksiyon sunmak mantıklıdır:
List componentinizdeki child ListItem öğesindeki storyleri de aynı şekilde yeniden kullanabilirsiniz. Aynı story tanımlarını birden çok yerde güncel tutmak zorunda olmadığınız için maintain etmesi de daha kolaydır.
Addons
Storybook’ta addons (eklentiler), isteğe bağlı olarak kullanıcı tarafından uygulanan ekstra özelliklerdir. Bu ekstra özellikler, story’leriniz için çok gerekli olabilecek şeylerdir. Storybook bazı temel eklentiler sağlar, ancak kullanım durumunuza uyacak eklentileri kurabilir ve hatta kendiniz de oluşturabilirsiniz. Storybook’ta temel olarak 6 eklenti bulunmaktadır. Bunlar Docs, Controls, Actions, Viewport, Backgrounds ve Toolbar & globals’dir.
Storybook’u en başta bahsetmiş olduğum şekilde projenize eklediyseniz ekstra olarak birşey yapmanıza gerek yok, temel eklentiler projenizde kurulu olarak gelmektedir. Eğer kurulu değilse
npm install — save-dev @storybook/addon-essentials (veya yarn kullanarak) eklentileri projenize dahil edebilirsiniz. Temel eklentilerle ilgili daha detaylı bilgi için döküman linkinden faydalanabilirsiniz.
- Docs : Docs, Storylerinizi birer component dokümantasyonuna dönüştürmeye olanak sağlar.
- Controls : bir componentin argümanlarıyla, kodlamaya gerek kalmadan dinamik olarak etkileşim kurmanız için size grafiksel bir kullanıcı arayüzü sunar. Component örneklerinizin yanında bir eklenti paneli oluşturur, böylece bunları canlı olarak düzenleyebilirsiniz.
- Actions : Actions eklentisi, story’lerinizdeki event handler (callback) argümanları tarafından alınan verileri görüntülemek için kullanılır.
- Viewport : Viewport eklentisi, story’nizin oluşturulduğu boyutları ayarlamanıza olanak tanır. Bu sayede, responsive arayüzler geliştirmeyi kolaylaştırır.
- Backgrounds : Arka plan eklentisi, Storybook’un kullanıcı arayüzü aracılığıyla story’nizin üzerinde oluşturulduğu arka planı ayarlamanıza olanak tanır.
- Toolbars & globals : Özel global değişkenleri kontrol etmek için kendi storybook araç çubuğu öğelerimizi oluşturabiliriz.
Eğer diğer eklentiler hakkında da daha fazla bilgi almak isterseniz buradan inceleyebilirsiniz.
Storyshots
Eğer automated test hayranıysanız, uygulamanıza snapshot testi eklemek için Jest veya başka bir araç kullanmayı duymuş olabilirsiniz.
StoryShots, Jest snapshot testini component sisteminize kolayca eklemenin bir yoludur. Oluşturduğunuz story’lere dayanarak snapshot’lar oluşturur, böylece componentlerinizin geliştirme sırasında temelde değişmediğinden (veya bozulmadığından) emin olabilirsiniz.
Genel itibariyle Storybook hangi ihtiyaçlardan ortaya çıktı nelere çözüm getirdi ve bize sunduğu kolaylıklar nelerdir tüm bunlardan kısaca bahsetmiş olduk. Tabi ki burada bahsedemediğim çok daha fazla özellikleri mevcut, ancak temel olarak bizlere sunduğu imkanlarla çok daha yönetilebilir, bakımı kolay ve kod karmaşasına sebep olmadan, tekrar kullanılabilir componentlerle design system’ler ve component library’ler oluşturmamıza yardımcı olduğunu öğrenmiş olduk. Çok daha detaylı bilgi için Storybook official dökümanlarını inceleyebilirsiniz.
Kaynakça:
https://blog.bam.tech/developer-news/use-storybook-react-project
https://haseebmajid.dev/blog/storybooks-with-mdx
https://medium.com/storybookjs/how-design-systems-use-storybook-2ed735ad07a9
https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
https://dev.to/lauracarballo/storybook-for-everyone-csf-vs-mdx-88b
