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
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 7日目の記事です。 今北産業 ファイル component.test.tsx を置くと、Storybook test runnerのように全部のStoryのスモークテストとインタラクションテストがVitestとjsdomでできるよ！ ヘッドレスブラウザを使わずにテストできるので、CIやGit hookなど実行時間を少なくしたいシチュエーションで使えるよ！ でもブラウザで実行していないから複雑なインタラクションテストやアクセシビリティテストなど、一部のテストが不安定になるかもね！ 考えて使い分けよう Storybook をテストとして動かす Storybookでは、Storyファイルのplay 関数内にユーザのインタラクション（振る舞い）やアサーション（期待する結果）を記述することで、インタラクションテストを行うこ
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
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
Interactive stories (beta)
Building components in isolation allows you to stress test them to find edge cases. With Storybook, you write stories for each of these cases by supplying props to your component. But not all component variations can be reproduced with props alone. Some UI states can only be reached via user interaction like dropdowns, modals, and hidden form elements. In the past, you interacted with the componen
React Server Components (RSC) are a new programming model for React-based web UIs. In contrast to traditional React “client” components, they only render on the server. This leads to a variety of performance and security benefits, but it is also a huge departure from the React tools and libraries we use today. One of the most impacted areas is component-driven development and testing. Tools like S
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 play() 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを Jest など他の領域においても再利用できることです。 この記事では Vite に Storybook を導入してインタラクションテストを作成して Jest で再利用するまでの手順をやってみたいと思います。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。
7.0 design alpha
Storybook supports every major view layer, countless workflows, and legions of frontend developers. Despite giant leaps in functionality over the last few years, the core user experience hasn’t changed since version 5.0. Till now. Last month, I shared a sneak peek of Storybook 7.0’s design that streamlines core UI patterns that devs use every day. I’m thrilled to announce that these updates are no
Update October 2019: Learn how to build a design system from scratch with a free 9 chapter guide Design Systems for Developers (includes real code commits!) Storybook is the most popular component explorer on the planet. It’s used by 20,000+ GitHub projects and maintained by over 700 contributors. As the team and project scale new UI challenges are unearthed. More developers means higher communica
Interactive storiesを使ってStorybook上でユーザー操作の状態を確認する | サイボウズ フロントエンドエキスパートチーム
Storybook の 6.4.0 がリリースされ、Interactive storiesが新機能として追加されました。詳細はStorybook のブログでも記載されています。 概要 Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。 次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。 導入手順 パッケージを追加する Storybook のmain.jsに設定を追加する Interactive stories 用の story をstories.tsxに追加する 1. パッケージを追加する Interactive addon を利用するには次のパッケージが必要です。 (今回は React のコンポ
Storybook is the industry standard tool for building component driven user interfaces. It enables structured UI development, documentation, and testing. I’m thrilled to share a preview of Storybook’s supercharged testing features. Stories capture key states of your components. Leading teams like Shopify, Adobe, and O’Reilly Media already import stories in their test files to expand UI test coverag
26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
Webフロントエンド エンジニアの大須賀です。 Pairsのブラウザ版(以下Pairs)ではいくつかの理由のためにStorybookを使ったページ単位のVisual Regression Test(以下VRT)を導入しました。 なんとなく「すごいコスパいいんじゃないか？」と思ってやってみたらやっぱりコスパよくて満足してます。 この記事は以下の人に読んでもらえたらいいかなと思って書いています。 VRT 良さそうだけど大変なんじゃない？って思ってやってないひとなんか楽にテストのカバレッジ上がらんかな？って思ってるひとStorybookを普通に使ってるひとTesting Trophy 良さそうだけど実際にやるとどうなん？って気になってるひと内容には以下を含みます。 よかったこと・わるかったことPairsのアーキテクチャ概要の紹介VRTするところ・しないところ実際にやったこと参考実装 (in Co
Storybook 7.0 beta
Our mission is to improve the UX of the internet. So far, we’ve made a lot of progress. Teams around the world use Storybook to power their frontend workflows. Microsoft documents their universal design system, Fluent. Firefox develops pages for their web apps in isolation. While BBC automates testing for their component library across dozens of international locales. I’m excited to share an early
記事のターゲット 基本的に私です Storybookを触ってみたは良いけど公式アドオンの選定に迷っている人 公式アドオン各々の利点がわかっていない人 フロントエンド初心者だけどStorybook知ってそうな雰囲気出してドヤりたい人 Storybook とは UIコンポーネントを分離して開発するためのオープンソースツールで、Web上のサンドボックス環境を提供してくれます。 ローカルホストで立ち上げ、ブラウザ上で細かな動作確認を行えるので細かいコンポーネント単位で開発がしやすくなります。 また、サンドボックスではUIコンポーネントのカタログを検索・閲覧する機能を提供することでUIの再利用性を高めることができます。 ビジネスロジックに寄らないコンポーネント実装やMockingもお手軽なのでAtomicDesignベースの開発では必需品かもしれません。 ただし、サンドボックス環境も開発者の手でコン
現在着手中の案件ではReactを使ったtoC向けのWebアプリの開発を行なっています。かなりデザインに重点を置いているため、一定間隔でデザインチームとアプリのデザイン周りのフィードバック会を設けるのですが、STG環境をフィードバックの対象にするとThemeの切り替えやユーザーデータの更新をAPI越しに行う必要があり面倒な場面が出てきます。 そこでThemeやデータを柔軟に切り替えて確認できるStorybookをChromaticを使って簡単にチームメンバーと共有できるようにしました。 CI環境 案件ではGithub Actionsを使ってアプリのビルド、デプロイが終わったタイミングでスクリプトを流してChromatic上にStorybookをデプロイしています。 Chromaticとは Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化することで
2023 UPDATE: Storybook created a zero-config integration with NextJS. Learn how to use it here. Next.js is a fantastic framework for building high-performance applications in React. But as it becomes more advanced — with features like next/image — it becomes more difficult to integrate with documentation and testing environments like Storybook. I dove in deep to learn how to make Storybook the bes
Lookbook | Lookbook v2 Docs
Lookbook is a UI development environment for Ruby on Rails applications. It combines a powerful component browser and preview system with an integrated documentation engine to help teams build robust, modular, maintainable user interfaces.
GitHub Actionsで実行するstorycap / reg-suit の高速化 - ROUTE06 Tech Blog
こんにちは！ROUTE06 プロダクトデベロップメント本部の @mh4gf です。 現在僕が関わっているプロジェクトでは、実装の変更に伴う UI のデグレードを検知するためにstorycapとreg-suitを利用した Visual Regression Test を GitHub Actions で実施しています。 運用を進める中で撮影対象のスクリーンショット数も増え、テスト実行時間の増加に悩まされてきました。テスト高速化に取り組みいくつかの改善に成功したため、この記事でその方法を紹介します。 3 行まとめ まず最初に取り組むべき並列実行の基本についてはこの記事を参照してください https://blog.wadackel.me/2022/vrt-performance-optimize/ turborepo を利用し storybook の差分ビルドを行う GitHub Actions
Component design systems let teams collaborate to introduce a consistent user visual and functional experience across different products and applications. On the designer's side, a predefined style guide and set of reusable master components enable consistent design and brand presented to users across all different instances (products etc) built by the organization. This is why great teams like Ub
Next.js + TypeScript + Tailwind + Storybook プロジェクトセットアップ
はじめに 以下の設定を適応したプロジェクトセットアップを行います。 Next.js TypeScript Tailwind Storybook ESLint Prettier husky セットアップ済みのプロジェクトはこちらのリポジトリから「Use this template」をクリックすると以下の手順をベースとしたリポジトリを新規作成することが出来ます。 動作環境 node, yarn はインストール済みとします。
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
目次 はじめに Storybookとは メリット 導入方法 サンプルの解説 アドオンの紹介 おわりに はじめに 初めまして。 株式会社スタメンのフロントエンドグループでエンジニアをしている神尾です。 普段は弊社が運営しているエンゲージメントプラットフォームTUNAGの開発をしています。 今回の記事では、フロントエンドの開発で使用されるStorybookのメリットや導入方法、使い方についてお話したいと思います。 Storybookとは UIコンポーネントの管理・テストをすることが出来るオープンソースツール。 サンドボックス環境を構築し、その環境下でコンポーネントの挙動や表示を確認できる他、カタログのようにコンポーネントを一目で見ることができる。 React、Vue、Angularなどの主要なJSフレームワークで導入でき、利用範囲も広い。 などの特徴があります。 メリット UIコンポーネントの
2021年に3サービスをリリースしたSHEにラブグラフCTO横江が質問し、スミからスミまで聞き出す「【CTO対談】ラブグラフCTOが訊く！『SHEの爆速開発の裏側』」。ここでSHE株式会CTOの村下氏、株式会社ラブグラフCTOの横江氏が登壇。最後に過去の反省と、今後のSHEの爆速開発に向けてやっていこうとしていることについて話します。 消耗してしまったメンバーが増えた時期があった 横江亮佑氏（以下、横江）：組織もなにか工夫したところはあるんですか？ 村下瑛氏（以下、村下）：当時は5人のチームだったので、組織みたいな要素はほぼゼロというか。 横江：じゃあ、この開発を進めていく上でハレーションとかも特になかったんですか？ 村下：でも、それでいうとやはりあって。 横江：この人数であったんですね。 村下：5人で小規模なチームではあったんですが、僕が開発にフルコミットみたいな感じではなくなりつつある
State of Storybook 2019
Storybook is the most popular UI component workshop on the planet. It powers front-end development for teams at Airbnb, Lyft, Slack, Twitter, and thousands more companies. It’s used to build top design systems like Shopify Polaris, IBM Carbon, and Salesforce Lightning. Thanks to our vibrant community, the project is growing like gangbusters by every measure. Our product is improving rapidly and on
Storybook 6.5
Teams at GitHub, Adobe, BBC, and many others use Storybook because it streamlines your frontend workflow. You write stories for granular UI states and then use them to verify component appearance during development. From there, you can reuse stories to run snapshot, visual, and accessibility tests during QA. Storybook can even analyze stories to auto-generate documentation. Storybook 6.5 is our bi
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた | DevelopersIO
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた Storybookとは、React、Vue、Angular 用の UI コンポーネントを開発・管理するためのオープンソースツールです。 公式ページにあるチュートリアルを、普段の業務で使用しているReact Native for WebとTypeScriptを使ってやってみたのでご紹介します。 実装するもの Storybook 公式ページのチュートリアルの タスク管理アプリ（当記事では、タスク一覧の表示までをご紹介します。） 今回作成したソースコードの一式はこちらにあります。 実装方針 Create React App を使ってプロジェクトを作成する TypeScript を使用する 画面の作成に、React Native for Webのコンポーネントを使用する チ
Component Encyclopedia
How do you build UIs that are accessible, responsive, performant, and multifaceted all at the same time? There are plenty of learning resources available, but most are for beginners. Few of them consider a real team’s requirements and the tradeoffs therein. The fastest way to level up in UI development is to observe what your peers do. That way, you can experiment with their techniques in your own
ファンタラクティブのエンジニアの 太田 です。 OpenAPIスキーマで定義したレスポンスに対するexampleをmswとstorybookでも使用してAPIスキーマで想定したレスポンスをStorybookで確認できるようにする試みについて紹介します。 やりたいこと OpenAPIスキーマで定義したexamplesを参照してmswでAPIモックを定義、定義したAPIモックをstorybookで使用 嬉しいこと APIで想定したレスポンスに対してフロントの挙動をStorybook上で確認できるのでAPIとフロントの認識のずれが改善されます。 エラーの表示や、権限によるUIの出し分けなど大変な確認を、APIスキーマで定義した内容を網羅する形でStorybook上で確認できます。 逆にAPIスキーマに定義されていないものはStoryを作らないので、確認するべきものはすべてAPIスキーマで定義しま
個人的にNuxtのソースファイルはsrcディレクトリに入れるのが好きなので、 assets, components, layouts, middleware, pages, plugins, static, store のディレクトリは src に移動。 nuxt.config に srcDir: 'src' を追加。 nuxt.config.js を nuxt.config.ts に変更。 import { Configuration } from '@nuxt/types' const config: Configuration = { // Config設定の記述 // ... buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module', '@nuxt/
Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド - Qiita
アプリを開発する前に予め、開発の全体像を把握するためにプロトタイプを作成します。 プロトタイピングツールで作成したUIは、実際のアプリ開発にも流用できるため効率的です。 今回は簡単な写真共有Webブラウザアプリを制作すると仮定して、 プロトタイピングツールFigmaでプロトタイプ作成 Reactコンポーネントへの落とし込み Storybookでの管理 という一連の流れを実際に実装しながらFigmaやStorybookを導入することでどういったメリットがあるのか・どういったことができるのかの検証を行います。 作成したプロトタイプの全体像 最初にどんなアプリなのかをスクリーンショットで提示してから、詳細な解説を進めていきます。 基本的なアプリに最低限必要な認証・一覧表示・登録・編集 機能をプロトタイピングで再現しました。 マテリアルデザイン（Material-ui）をベースとしています。 ログ
Next.js is used in tens of thousands of websites and apps. With the recent release of v13, it’s more capable than ever, including many improvements to key features like routing and image optimization. But with all this change, it can be tough to migrate your existing Next app, much less everything it integrates with. Storybook is the de facto standard for isolated component development. We're exci
Figma plugin beta
Over time, implementation and design tend to drift apart. As apps get more complex, teams lose track of what’s been developed in Storybook and what’s been designed in Figma. This ambiguity slows you down. I’m thrilled to announce that Storybook Connect for Figma is now in beta. It’s a Figma plugin which brings your stories into the design workspace. That streamlines design handoff and UI review be
StorybookでバンドラーにViteを使うStorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。 はじめにStorybook で Vite を使ってビルドできるようになったので紹介します。 iframe 内のビルドを Webpack から vite に切り替えることで次の利点があります。 ビルド速度の改善HMR の高速化アセット処理の自動化Vite プロジェクト設定との互換性Vite のプラグインエコシステムへのアクセスコンポーネントが少ない場合、速度の恩恵はあまり感じられない可能性があります。 Webpack と比較すると、ブラウザが表示されるまでのスピードは劇的に向上しますが、 ブラウザ上での読み込みに時間がかかるためです1。
As the number of stories grows, it gets trickier to load them all in a performant way. That ends up bogging down the developer experience. We use Storybook to build Storybook so we also feel that pain. In recent releases, performance has become a top priority. The latest versions include incremental yet noticeable improvements in build time and bundle size. I am excited to share Storybook's new on
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook Performance: Vite vs Webpack
ゼロから始めるStorybook入門(React編) | アールエフェクト
Interaction Testing with Storybook
Design Systems for Developers
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
Vitest(jsdom)でStorybookのStory全部テストする大作戦
Writing stories in TypeScript
Storybook for React Server Components
Storybook でインタラクションテストを作成して Jest で再利用する
Introducing Storybook Design System
Interaction Testing sneak peek
Accessibility testing with Storybook
Pairsブラウザ版でページ丸ごとVisual Regression Testしたらやっぱりコスパ良かった
Storybook公式アドオンをまとめてみた - Qiita
Chromaticを使って爆速でStorybookをチームと共有する | DevelopersIO
Get started with Storybook and Next.js
UI Component Design System: A Developer’s Guide
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Storybookについて調べてみました。 - stmn tech blog
StorybookとChromaticの導入、GraphQLのSchema Stitchingの活用… これからの爆速開発に向けた「無駄をなくす」技術投資
OpenAPIとMSWを使用しAPIレスポンスに対するStorybookを作成する
3分でつくる2019年版 Nuxt.js TypeScript 開発環境設定 - Qiita
Integrate Next.js and Storybook automatically
StorybookでバンドラーにViteを使う | miyauci.me
Storybook on-demand architecture