Storybook'u Statik Bir Site Olarak Yayınlamak.md

Storybook'u Statik Bir Site Olarak Yayınlamak

Bir componenti hayata geçirirken tasarım ekibinin hazırladığı şemalara uyarak geliştirmeye başlarız bu şema bize compenentin belirli durumlarda(hover, focus vb.) vereceği tepkiler konusunda yol gösterir, fakat compenenti geliştirirken direkt proje içine yazmak iyi bir fikir değil birden fazla varyant olduğunda bunu proje içinde sürdürülebilir bir şekilde geliştrimek pek mümkün olmayacağı için storybook kullanıyoruz. Storybook framework'den(React, Vue, Angular vb) izole edilmiş bir ortamda geliştirme yapmamızı sağlayan bir araçtır.

Kurulum

npx sb init

Eğer bir bootstrap framework kurulumu kullanıyorsanız(cra, Vue-CLI, vb) storybook proje tipini tespit edip bütün ayarları otomatik olarak yapıp kurulumu tamamlayacaktır. Şimdi Storybook'u ayağa kaldıralım ve bize neler sunacak görelim, çalıştırmak için terminalde proje klasörüne gelip yarn storybook komutunu girelim. Ardından https://localhost:6006/ adresine gidelim.

başarılı bir şekilde kurulumu yaptıysanız http://localhost:6006/ ekran bu şekilde bizi karşılamış olmalı. Storybook kurulduktan sonra projemizin dizinine bazı dosyalar eklendiğini fark etmişsinizdir.

Ana dizinde olan .storybook klasörünün içinde olan main.js dosyası ile storybook sunucusunun davranışlarını kontrol edebilir, eklentiler kurabilirsiniz. src/stories klasöründe ise componentlerimizin durumlarını ve varyantlarına gore cıktı aldığımız kodlarımız bulunuyor. Bir component için nasıl story yazarız kısmını anlatmayacağım çünkü bu yazının amacı storylerimizi nasıl statik site olarak paylaşırız.

Görmüş olduğunuz üzere kurulumda ornek olması amacıyla konulmuş hali hazırda storyler var bunları Github Pages üzerinde yayına almak için bir pakete ihtiyacımız var indirmek için

npm i @storybook/storybook-deployer --save-dev

//or

yarn add @storybook/storybook-deployer -D

paketimizi indirdikten sonra yapmamız gerken şeylerden bir tanesi git repository'si oluşturmak ve bir remote origin adresi vermek bunu yapmak için

git init
// ardindan
git remote add origin <repository-url>

projemize bir git reposu oluşturduk ekledik ve origin adresi verdik şimdi sıra ise yayımlama işleminde bunu yapmak için package.json dosyasına script ekleyeceğiz

//package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
		"deploy-storybook": "storybook-to-ghpages"
  },

geriye tek bir adım kaldı o da yayımlamak terminal ekranına şimdi eklediğimiz scripti yazıyoruz

npm run deploy-storybook

//or

yarn deploy-storybook

Tebrikler Storybook'unuzu Github üstünden sunmaya başladınız yayımlanmış halini görmek için https://.github.io/repo-adi adresine gidebilirsiniz

Kaynakça

1. https://storybook.js.org/docs
2. https://github.com/storybookjs/storybook-deployer