Introduction to Storybook
Update 2018: I cowrote LearnStorybook.com, a free 9 chapter tutorial on getting started with Storybook. Read the announcement » Storybook is a Component Explorer — a tool for working on a single component in isolation — built for React and React Native. As of this article, it’s likely the most popular and fullest featured component explorer out there. The team here at Chroma, along with others at
実践StorybookでVuexに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。最近熱があるのはSVGと相変わらずにStorybookです。あと弁当男子始めました。 前置きStorybookとはいわばコンポーネントのカタログを作成することができる開発ツールです。 今回は実践の紹介ということで詳細は省略しますが、VueやReactを導入したコンポーネント指向な開発をしているのであれば、開発効率の向上は間違い無しなので是非とも取り入れてみていただきたいです。 実践Storybook vs Vuexコンポーネントの複雑さの基準storyの作りやすさは、当然のことですが、コンポーネントの複雑さに応じて変化します。大雑把ですが私はstoryの作りやすさの基準として、作り易い順に以下のような基準を設けています。 外部とのインタフェースがない親コンポーネントとのインタフェースは存在するがstoreにアクセスしないstoreにアクセ
Use the Storybook CLI to install it in a single command. Run this inside your project’s root directory: Install a specific versionThe init command will use whichever version you specify. For example: storybook@latest init will initialize the latest versionstorybook@7.6.10 init will initialize 7.6.10storybook@latest init will initialize the newest 7.x.x versionStorybook will look into your project'
私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ
Storybook is the workshop environment where all UI code gets built, tested and documented. It's used by front-end teams at Shopify, Workday, Adobe, The Guardian and many more to ship robust UIs. As Storybook usage has grown, performance has become a top priority. A central theme for our 6.x release series has been to re-architect Storybook to reduce build and load times. We started by optimizing p
StoryBooks.io
We Do It All Our previous projects include both new construction and repairs/restorations. Occupied and fully operational job sites are never a problem. And, we can also plan, manage, and build multi-phase jobs for all sorts of clients. We do it all. Working Together We offer an end-to-end client experience that includes seamless communication, budgeting, staffing, on-site organization, and solid,
Storyshotsを止めてスナップショットテストの仕組みを自作した話 | Wantedly Engineer Blog
Storybook はWebフロントエンド向けのUIモックアップのフレームワークです。 あらかじめUIコンポーネントをデータストア非依存で作っておけば、そのモックアップを作ることができます。(モックアップといっても、バックエンドに繋がっていないだけで、ユーザーの操作には反応するというものを考えています。) Storybookでは、このようなモックアップのことをStoryと呼んでいます。Storyがあらわすコンポーネントの粒度もまちまちで、汎用のボタン1つに対するStoryもあれば、ページ全体に対するStoryも考えられます。 モックアップを動かしながら作業することで、余計な手間をかけずにUIの動作確認をできるというのがStorybookの基本的な使い方です。 StoryshotsとはStoryshots はStorybookをユニットテストで利用する方法のひとつです。 Storyshots
最近Storybookを会社で導入していて、環境設定についてまとめました。 基本的には、公式サイトのとおりですが、コンポーネントの例の記載がなかったり、ReactとVueでできるものが異なったりして、困った部分が合ったので、すぐに動く環境を作りました。 github.com 本エントリのコードはNode v8.9.4の環境で動作を確認しています。 Storybook？ https://storybook.js.org/ The UI Development Environment ReactやVueなどのUIライブラリで作成したコンポーネントの動作やデザインをエンジニア、デザイナ間で共有、閲覧できるツールです。 Storybookという名前の通り、あるコンポーネントやコンポーネントの集合に対して、storyを複数用意し、storyごとの振る舞いを閲覧することができます。 環境構築 Stor
Storybook + StoryShotsでReactをスタイルガイド運用、CIしていく知見 - Qiita
2016/10/07追記：StorybookとStoryShotsについて説明してくれている記事が出てきたため、こちらの記事はもう少し深入りした部分にフォーカスするように（install関連のとこなどを主にばっさり削除）しました React Storybook で変わるUI開発フロー (Redux Flavor) Storybookとは Reactのためのスタイルガイドジェネレータ。 基本的な所は結構先人が記事を残してくれている。 特に今回この記事ではstoriesそのものの記載については言及しないので、そこらへんは下記の記事などを参考にするのが良いだろう react-storybookを用いたReactコンポーネント開発 React Storybook入門：コンポーネントカタログがさくさく作れちゃうかもしれないオシャレサンドボックス環境 だいぶ手に馴染んできてたので、自分がよく使う部分中
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
Announcing Storybook 3.3
Happy new year! The Storybook elves have been hard at work this holiday season and we’re excited to announce Storybook 3.3, the latest instalment in our quest to bring awesomeness to the world’s favorite UI component development environment. With Storybook 3.3 you can: Use storybook on your Angular projects (v4+)Adjust the preview viewport to simulate different device sizesPreview test results in
Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
Storybook has been known as “React Storybook” since the beginning, but it was rebranded to “Storybook” during the 3.0.0 release. As described in our roadmap, this change was made to support more UI libraries than just React. And today, with the release of Storybook 3.2, we’re excited to introduce the first of many new “Storybook for <insert framework here>”! And it’s “Storybook for Vue”! The choic
Retty Advent Calendar 2018 6日目の記事です。 昨日は @tkngue で CircleCI as a Resource でした。 CircleCIをビルド環境以外にも使い倒していこうという内容でしたが、今日はそれをフロントエンドで実践してみた事例紹介になります。 TL;DR PRごとにStorybookビルドするの、CircleCIで完結して簡単だからやるといいよ ほんでデザイナーもPRのフローに乗ってもらうと実装された細かい動作も確認できていいよ はじめに Rettyではお店会員様が 店舗情報の編集 検索結果にどう広告を出すかの設定 Retty予約にまつわる在庫登録・確認などの設定 アクセス解析 など多種多様な設定・確認を行える管理画面があります。 そちらを通常の開発とは別でフロントエンドのリニューアルを小さなプロジェクトチームで目下進行中です。 古き良きサー
Designers and developers work hand in hand to create beautiful products. We build these products together, with UI components in code and UI libraries in design — our design system. In design, these UI libraries might be composed of symbols or components from Sketch, Figma or Adobe XD. In code, these components might be built in React, React Native or Preact. So, how do we recognize our React comp
storybook for htmlを使って簡単にコンポーネントのカタログを作成する - Qiita
対象読者 React.js,Vue.jsを使っていないプロジェクトでstorybookを導入したいけどやり方がわからない人 マークアップ言語 + JavaScriptちょっとわかる人 storybookの勉強はしたいけど、React.js,Vue.jsの勉強まではやりたくない人 成果物 URL GitHub 現在作成中です。 対応環境 言語 HTML SCSS cssで行いたい場合、「既存のscssファイルの読み込み」の部分などのscssをcssに変えたり、「storybook上でscssファイルが読み込まれるように設定」の部分を飛ばすなどで対応することができると思います。(未検証) バージョン node: v12.16.1 @storybook/html: "^5.3.18" node-sass: "^4.13.1" セットアップ 参考: Storybook for HTML 自動セット
プロダクト支援チームでkintoneのStorybookをホスティングした話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。 支援チームとプロダクトチームの関わり まずは私たち支援チームとプロダクトチームが社内でどのように関わり、開発しているのかを紹介します。 プロダクト支援チームはプロダクトチームに属しておらず、さまざまなプロダクトの課題解決のために動いています。 例えば、プロダクトチームが手の回っていない最新技術への追従や開発体験の改善を行っています。 生産性向上チームとフロントエンドエキスパートチームの詳細については、それぞれ以下の紹介記事を参照してください。 生産性向上チームの紹介 フロントエンドエキスパートチームの紹介 今回はその支援
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
reg-suit と storycap で行う Visual Regression Testing の高速化 - wadackel.me
はじめに 過去このブログでは Visual Regression Testing（以降 VRT）に関連した記事をいくつか書いてきました。 Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った - wadackel.me reg-viz のリブランディングをした - wadackel.me reg-cli の Report UI をリニューアルした - wadackel.me Storybook と reg-suit で気軽にはじめる Visual Regression Testing - wadackel.me 関連ツールへのコントリビュートから始まり、現在業務でも活用しています。業務で扱うプロジェクトでは、検証対象となるケースが約 2,500 程度になっていて、実行時間に不満が出るようになりました。 今年の 1 月頃にその不満を解消するため高
GitHub - lost-pixel/lost-pixel: Open source alternative to Percy, Chromatic, Applitools.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Storybook for Vite
Remember Javascript fatigue? It was 2015, and every few hours a new framework/boilerplate/build tool would burst onto the scene, one-upping the previous contender and shooting to the top of Hacker News. Eventually, React and Webpack became a de facto standard and a relative peace fell across the land. Frontend devs were able to relax and get real work done rather than frantically switching tools e
Vue on Storybook
Node gakuen #26 in Japan
💡Update, March 12: Storybook 8 and Visual Tests addon are out now! Learn more in the Storybook 8 launch announcement or Visual Tests addon’s launch announcement.Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes through Storybook’s Visual Tests addon! Learn how it works and try the beta today. Why visual testing?The challenge of testing UI is tha
TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker 目次 テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを使って見た目を含めてテストする。 ブラックボックステスト - 機能の実際の振る舞いをベースにテストする手法 ホワイトボックステスト - 機能のロジックや入出力をベースにテストする手法 これに加えて、フロントエンドのテストではブラウザ環境かNode環境かという違いも
Welcome to the latest iteration of Storybook, the world’s favorite UI component workshop. Storybook improves component development, testing, and documentation for React/React Native/Vue/Angular and more. It’s used by engineering powerhouses like Airbnb, Slack, Squarespace, and Lyft. Storybook 4.0 (SB4) supports six new view layers and introduces improvements at every level: 🖼 View layers: Ember,
2023/01/10 追記 Storybook 7 + Vue 3 版を別途公開しました。使用するバージョンにあわせてどちらかを参照してください。 https://zenn.dev/sa2knight/books/storybook-7-with-vue-3 ---------- Storybook は、UIコンポーネントをサンドボックス上で動作させることで、デザインや振る舞いを開発環境を立ち上げずに確認できるUIカタログを作成するためのツールです。 本書では、現状(2020/10/26 時点) 最新版である Storybook 6.0.7 と、 Vue 2.6.11 を用いて、 CSF(Component Story Format) によるUIカタログの作成を行います。 内容のベースは公式ドキュメントのままですが、日本語で噛み砕きつつ、全体を俯瞰するよりも、ハンズオンでステップアップ学習
Storybook is the best way to build and test your UI components in isolation. Storybook 7.6 (now in alpha) takes Storybook's testing even further with the introduction of @storybook/test. It brings a set of new utilities for spying on your components, interacting with them in the browser, and asserting the results. Plus better performance and smaller size. The new hotness@storybook/test consolidate
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
Storybook is the industry-standard UI component workshop. Thousands of application and design system teams worldwide spend most of their day working inside Storybook—building, documenting, and testing their UI components. Therefore, Storybook needs to run as fast as possible, so it does not slow down their workflow. Storybook's performance when first booting up or rebuilding a changed file largely
StorybookはアプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるUIツールです。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができます。この説明が最初は”?”の人でも本文書では公式のドキュメントよりもさらにシンプルなコードを利用して動作確認を行なっているのでStorybookの基礎的な利用方法や機能を短時間で理解することができます。 Storybookが利用できるJavaScriptのフレームワーク/ライブラリにはReact以外にもVue.js, React Native, Svelte, Amber, Angularなどがありますが本文書ではReactを利用しています。本文書で動作確認を行なっているStorybookのバージョ
Storybook is the industry-standard tool for building component-driven user interfaces. It enables you to capture component use cases as stories and render them in a browser. During development, you can quickly cycle through them to verify UI appearance. But there's more to a component than just looks. Teams at Target, Adobe, and Shopify import stories in their tests to verify component behavior. N
OverviewDesign systems power the frontend teams of Shopify, IBM, Salesforce, Airbnb, Twitter, and many more. This guide for professional developers examines how the smartest teams engineer design systems at scale and why they use the tools they use. We'll walk through setting up core services, libraries, and workflows to develop a design system from scratch. Table of Contents
Component Story Format
Storybook is the world’s most popular UI component workshop. It enables structured UI development and testing for every major view layer including React, Vue, Angular, and many more. Storybook 5.2 introduces Component Story Format (CSF), a new way to author stories based on ES6 modules. Component Stories are simple, easy to read, and decoupled from Storybook’s internal API so you can use them anyw
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
全体の流れ まず、今回使用するメインツールであるLOKIとREG-SUITの紹介をします。 次に目指す全体像を共有し、最後にそれを実現するための方法を説明します。 利用技術の説明 LOKI Visualized Testを実施するためにはStorybookのページにアクセスし、キャプチャする仕組みが必要です。 この機能を持ったツールがLOKIです。 上記に Visual Regression Testing for Storybook とある通り、LOKIはリグレッションテストまで実施することのできるツールです。 しかし、以下の理由から差分比較部分は別のツールを使うことにしています。 画像をGitにコミットしなくてはいけない 出力結果が画像のみのため結果が一目で分からない 差分の表示方法が好みではない REG-SUIT CUIでVisual regression testingを実施するツ
Structuring your Storybook
The more information you have, the harder it is to find what you're looking for. At first, your Storybook has a handful of components, so it's easy to keep track of things. But as the number of components grows, so does the organizational complexity. You end up with questions like “Where did we put that component again?” and “Is there a story for this state?” That leads to confusion, or worse, dup
Storybook 5.0
We’re kicking off 2019 with Storybook 5.0 (SB5), our biggest release to date. Here’s what’s in it: 🎨 Complete overhaul of Storybook’s developer experience💅 Theme-ready component library🛠 Evolved front-end architecture for addons🖼 Brand new Storybook websiteRead on for a project update, tour of improvements, and upgrade instructions. Storybook’s progress and what’s nextStorybook is the world’s
You need to keep a lot of details in your head when developing UI components—prop names, styling, state management, event handlers, etc. By using TypeScript to build your components, you can capture those details better and automate your workflow. Your code editor will type-check your code and offer better autocomplete, saving significant development time and effort. You get the same improved ergo
Storybookの3.4.0とAngularCLI対応のお話
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Install Storybook • Storybook docs
デザインシステムのStorybookとChromatic活用の紹介
Storybook Lazy Compilation for Webpack
Storybookをまず動かす！ReactとVueの最小環境を作った - zuckey blog
Release v6.0.0 · storybookjs/storybook
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
Introducing: Storybook for Vue 🎉
PRごとにCIでStorybookをビルドしてデザイナーとインタラクションまで作っていく話 - Qiita
Connect Zeplin with React and Storybook
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
Storybook’s Visual Tests addon enters beta
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 | MMMブログ
Storybook 4.0 is here! – Storybook – Medium
Vue と CSF によるモダンな Storybook 6 のはじめかた
@storybook-test: more streamlined and powerful testing
Storybook Performance: Vite vs Webpack
ゼロから始めるStorybook入門(React編) | アールエフェクト
Interaction Testing with Storybook
Design Systems for Developers
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
React Storybookを使用したVisual regression testingの導入
Writing stories in TypeScript
Storybook and AngularCLI