Shipping UIs is lossy. It requires constant back and forth between design and development. Designs help you get an overview of the UX, but are often limited to the happy path. It’s up to developers to hunt for all the un-specced edge cases. Meanwhile, development is never perfect the first time around. It’s up to designers to give feedback and sign off on the implementation before it ships. We res
Storybook 6.3
Storybook is the industry-standard UI development workshop for components and pages. It's used by Dropbox, Shopify, Stripe, and thousands more teams. Developers choose Storybook because it helps them focus on one thing: the user interface. There's already a mountain of complexity in app development, Storybook makes your job simpler by isolating UI concerns from the noise of backend, APIs, and data
GitHub - storybookjs/testing-react: Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
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
実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社
🔗 コンポーネントを徹底的に強化する ViewComponentはやるべきことをうまくやってくれますが、Railsほど手取り足取り懇切丁寧にやってくれるわけではありません。この方面の規約がまだ不足しているため、自分で考える以外に切り抜ける方法がない場面もちょくちょくあります。 しかし心配ご無用です。本章ではEvil Martiansがビューコンポーネント周りのコードを構築するときの方法を紹介し、すぐにでも皆さんが生産性を高めて貴重な時間を節約できるようにしたいと思います。 注意: 本記事で紹介するテクニックには「非標準」のものも多くありますのでご了承ください。ビューコンポーネントのEvil Martians流クッキングレシピにつき、当然ながら賛否が大きく分かれることになるでしょう。しかしその中のいくつかについてはViewComponent本家にマージする計画がありますので、今後もご注目よ
State of Storybook 2021
Storybook is the industry-standard UI development workshop for components and pages. It's used by BBC, Netflix, Twitter, and thousands more teams. Since the beginning, our goal was to make the tools and techniques used by the best frontend teams available to everyone. Today, Storybook has established itself as the best practice for component development, testing, and documentation. It supports eve
GitHub - storybookjs/builder-vite: A builder plugin to run and build Storybooks with Vite
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
GitHub - histoire-dev/histoire: ⚡ Fast and beautiful interactive component playgrounds, powered by Vite
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
Visual Regression Testingで安心できるフロントエンド環境を作る - Sansan Tech Blog
こんにちは。Eight事業部で主にフロントエンドを担当している青山です。 今回はEightのWebフロントエンドコンポーネント集にVisual Regression Testingを導入した事例を紹介します。 他社さんの事例や勉強会を見るに敷居も下がってきているようで、遅ればせながらDX(開発者体験)向上を見据えて環境を構築していきました。 Visual Regression Testing とは Visual Regression Testing (以下、VRT) は日本語で画像回帰テストと呼ばれています。対象の修正前後の画像を比較し、差分がないこと、もしくは差分が正しいことをチェックします。 GUIアプリケーションの場合、最終的にユーザーが触れるのは画面であり、この状態をスナップショットでチェックできるのはとても安心できるものだと思います。 Eightのコンポーネント集 今回導入対象と
React+Cypress+StorybookでVisualRegressionTestする - resqnet's blog
はじめに React＋CypressでVisualRegressionを実現するのにやったこと 環境構築 react/storybook導入 npx create-react-app my-app npx -p @storybook/cli sb init Cypress導入 yarn add cypress @testing-library/cypress -D // 不要なテストを削除 rm -rf cypress/integration/examples Storybookのpreview-iframeを取得 Storybookのiframeを取得する cypress/support/command.js import '@testing-library/cypress/add-commands'; Cypress.Commands.add('getIframeBody', () =
Storybookのテストランナー
はじめに Storybook test runner turns all of your stories into executable tests. https://github.com/storybookjs/test-runner Storybookの全てのStoryをテスト可能にする@storybook/test-runnerについてのメモ。 Storybookの公式ドキュメントではv6.5からテストランナーについてのページが設けられている。 何をテストするものか テスト対象についてはplay関数の有無によって異なる。 For those without a play function: it verifies whether the story renders without any errors. For those with a play function: it also
Storybook is the best way to develop UI components in isolation. Teams write hundreds or even thousands of stories to catalog all their key component states. This is incredibly useful for prototyping, documentation, review, and more. So useful that it’s used by teams at Github, Netflix, and Spotify and many others. Today, I’m excited to introduce @storybook/testing-react, a new library that makes
Components fetch data, respond to user interactions, and manage app state. To verify this functional behavior, developers rely on automated tests. But most testing tools are Node and JSDOM based. That means you’re forced to debug visual UIs in a textual command line. At Storybook, we’re improving component testing by using the browser to run tests. Over the past six months, we introduced several f
Stories visualize how a component behaves in different scenarios. Component Story Format (CSF) is the universal file format for stories. Component Story Format 3 marks an evolution in stories that trims boilerplate code and improves ergonomics. This makes stories more concise and faster to write. I'm excited to announce the full release of CSF3. During the 18 month beta period, the community helpe
VueVueJS で Storybook を使うモジュラーと再利用可能なコンポーネントを作るために Vue と Storybook でコンポーネント ライブラリを構築する方法を学びましょう。 Storybook はインタラクティブに開発し、ユーザー インターフェイス コンポーネントをアプリケーションを実行しないでテストできます。Storybook は独自の Webpack 構成でコンポーネント ライブラリとしての役目を果たすので、プロジェクト依存関係や要件を気にせずに個別に開発できます。 本投稿では、チームメートの Steve Hobbs 氏が作成した人気のカンバンボード プログレッシブ Web アプリケーション（PWA）（GitHub で入手可能）を使って、Storybook を既存の Vue.js プロジェクトに統合する方法を学んでいきます。このプロセスは新しい Vue プロジェクトに
NuxtプロジェクトへのStorybookの導入2019.11.17 StorybookのNuxtを使っているプロジェクトへの導入と所感をまとめました。 * 2020/04/14 @storybook/vue 5.3.0以降のアップデートを追記しました。 最近フロントエンドのチーム開発環境の整備の一環として、Storybookの導入を行いました。 Storybook 5.3の公開により、設定方法が変更されましたので、追記・修正いたしました。 参考： https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78 導入背景背景としては、現在弊社チームとしてはデザイナー、フロントエンドエンジニアの他に、インターン的にマークアップを手伝ってくれている人がいます。 デザイナー、エンジニア間では過去に何度も
storybook/MIGRATION.md at next · storybookjs/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
One of the most exciting developments in design for me in the past few years was the launch of the GOV.UK design system. Of course, the real power of a design system comes from the community of designers who maintain it, but GOV.UK does so much right that it made me want to raise the bar on my own projects. I wanted to make something that was: easily reused in any website or app by installing it a
Presentational components like Avatar, Button, and Tooltip receive inputs exclusively via props and have no internal state. This makes it straightforward to isolate and write stories for them. However, components higher up in the application tree are trickier to build in isolation with Storybook. Connected components like Forms, List, and Cards track application state then pass behaviours down the
We recommend that all export names to start with a capital letter. Story objects can be annotated with a few different fields to define story-level decorators and parameters, and also to define the name of the story. Storybook's name configuration element is helpful in specific circumstances. Common use cases are names with special characters or Javascript restricted words. If not specified, Story
はじめに 西日本テクノロジー＆イノベーション室の山田です。 現在私が所属しているプロジェクトでStorybookを導入しました。 導入前に期待していた利点のほかにも、導入してはじめて気づいたStorybookの良さがありました。 また、導入して気づいた点をもとにStorybookの導入に向いているプロジェクトの特徴を考えました。 本記事ではその2点の紹介をします。 Storybookの概要 StorybookはUIのコンポーネントをアプリケーションに組み込まず独立して開発できるツールです。 ReactなどのUIを構築するライブラリを使用してアプリケーション開発を行う場合、コンポーネントを画面に組み込み、画面全体の動作を確認しながら開発を進めていきます。 それに対し、Storybookを使用することで個別のコンポーネント単体の動作・UIの確認ができます。 Storybookを起動すると以下の
Developers spend 4-8 hrs a week fixing bugs. Things only get worse if a bug sneaks its way into production. It takes 5-10x longer to fix it. UI testing is integral to delivering high-quality experiences but can be a huge time sink. It's too much work to run all your tests manually after every change. Leading UI engineering teams at Twilio, Target and Adobe automate UI testing. Tests are triggered
Storybook の play function や test-runner が登場し、Storybook をコンポーネントカタログの用途だけでなく、テストに活用するプロジェクトは増えていると思います。 今回は play function を使って next/navigation および next/router のテストをする方法を紹介します。 結論 .storybook/preview.tsx を以下のようにしてください。 import { action } from '@storybook/addon-actions' import { fn } from '@storybook/test'; const defaultNavigationContext = { push: fn((...args: any[]) => { action('nextNavigation.push')(
Every morning thousands of developers spin up Storybook to start the work day. Storybook underpins the frontend workflow of Netflix, Adobe, and the European Union. But with growing usage, comes more exposure to UX edge cases and inconsistencies. For the past 3 years, we’ve researched usability and collected UX feedback. I’m thrilled to share a sneak peek of Storybook 7.0’s design. It refreshes the
Everyone benefits when dev tools integrate to unlock new workflows. Storybook is an open source platform for UI development that has hundreds of addons and is used by Airbnb, Lyft, Slack, and Twitter. I’m excited to share the new simpler, more declarative way to configure Storybook in 5.3. This makes it easier to accomplish common configuration tasks like adding addons and decorators. It also make
Storybookの可能性を見せびらかしたい
本当は登壇時にこのgifを思う存分に見せびらかしたかったのですが、無念の時間切れです。この記事は実はこのgifを見せびらかすためだけの場である可能性がなくもないです。 さて話を戻して、このgifでどういうことが起きているのかざっと分かってもらえたでしょうか。要点としてはこのあたりです。 Storybook上で動いている画面まるごと表示している画面遷移ができるどれも見れば分かるし何がそんなにすごいのかと思われるかもしれませんが、私のような一部界隈の人間には、実はこれはとても感動的なことなのです。 Storybook上で動いている何よりも重要なのはこの点です。アプリケーションとしてのバックエンドはRailsですが、このgifで見ているものは全てStorybook上で動いています。つまり、Railsは起動する必要がありません。 これが何を意味しているかというと、フロントエンドはRailsから完全
GitHub - storybookjs/design-system: 🗃 Storybook Design System
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 Tutorials
professional developers experienced with JavaScript, React and Storybook. If you're not quite there yet, visit Intro to Storybook to learn the basics! Testing UIs is awkward. Users expect frequent releases packed with features. But every new feature introduces more UI and new states that you then have to test. Every testing tool promises “easy, not flaky, fast”, but has trade-offs in the fine prin
Controls
🚀 Get started🖋 Write stories📖 Write docs🔬 Testing🔖 Sharing🧩 Essential addonsIntroductionActionsBackgroundsControlsHighlightInteractionsMeasure & OutlineToolbars & globalsViewport🔧 Addons⚙️ Configure🧰 Builders🔌 API🛠 Contribute❓ FAQ↗️ Migrate to 7.0 Watch a video tutorial on the Storybook channelStorybook Controls gives you a graphical UI to interact with a component's arguments dynamicall
Atomic Design by Brad Frost inspired frontend developers to create design systems. It shifted our focus from implementing UIs one page at a time to creating reusable, atomic components. Design systems went from "nice to have" to "must have". But a majority of design systems ended up imploding. According to the 2021 Design Systems Survey, only 40% of the systems were successful. Why do some design
これは、Nuxt.js Advent Calendar 2019 1日目の記事です。 今の職場では、Vue Fes 2018で発表した 1年間単体テストを書き続けた現場から送る Vue Component のテスト の通り、Storybook + reg-suit を利用したVisual Regression Testingを今でも継続してやっています。 Storybookの本来の用途である、いわゆるcomponentのカタログとして使うよりも、pageなど大きな粒度のcomponentの見た目のテストのためにStroybookを利用しています。これはテストに利用するということを考えると、設計の可動域を確保し今後のリファクタリングなど変更のしやすさを考えると、より大きな粒度のテストにしておいたほうがよいだろうという判断をしています。(もちろん、それだけで全てのテストケースを網羅するのではな
Storybook 6.4
Storybook is the leading UI development workshop for components and pages. Over the past five years, it's grown from niche tool to standard fixture in frontend that's used by teams at Twitter, Github, BBC, and the New York Times. As Storybook's user base has grown, so have its use cases. Early adopters used Storybook to develop components for design systems and libraries. Now, teams use it to buil
Why Storybook in 2022?
Teams around the world use Storybook to power their frontend workflows. But how it is used can vary immensely. Microsoft documents their Fluent design system. Mozilla develops pages for their web apps in isolation. While BBC automates testing for readers in every locale. The breadth of Storybook’s use cases makes it tricky for new folks to understand the core value. Why do developers actually use
プロダクト開発において欠かせないE2Eテスト問題。アジャイル開発によるリリースサイクルの増加にともない、自動化に挑む開発者も増えてきた。そんな中、デブサミ2021では「ソフトウェアテスト自動化ジャーニー」と題し、ソフトウェアテスト自動化プラットフォーム「Autify」を提供するオーティファイ株式会社 CEO & Co-Founderの近澤良氏が登壇。E2Eテスト自動化を成功に導く鍵をひもといた。 オーティファイ株式会社 CEO & Co-Founder 近澤良氏 あなたはE2Eテスト自動化ジャーニーの第一歩を踏み出すべきか？ 10年以上エンジニアとしてソフトウェア開発に従事してきた近澤氏。日本／シンガポール／アメリカの3カ国でエンジニアとして開発してきた中で、どこの国でもテストに苦労していたことから、Autifyの開発に踏み切った背景がある。 AIを用いたWeb／モバイルアプリのE2Eテス
StorybookをReact, Typescriptな環境に導入する - RoadMovie
StorybookをReact, Typescript, Atomic Designな環境に導入する手順を紹介します。 Why Storybook? Frontendの開発を行っていると、再利用性を高めたいという意識が湧いてくると思うのですが、それをチーム間で共有したり、デザイナーさんと認識を合わせるのが容易でなかったりします。また、開発者も「このコンポーネントどこでどう使ってたっけ？」と言うように、視認性を持ちながら検索性も高くするというのがなかなか難しかったりします。 そこで、Storybook ( https://storybook.js.org ) の出番です。 How to install Storybook in my environment? まず、先にも記述しましたが、今回は、下記の要件のアプリへの導入を紹介します。 React.js yarn npmな方は適宜読み替えてく
Storybook is the standard tool for UI component development. It’s used to build the most popular design systems on the web, including Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, and Airbnb Lunar. Quality documentation like this is crucial to help people re-use your UI components, but it’s also a huge pain to get right. In practice, you spend more time maintaining your document
挫折しないStorybookの始め方（前半）
僕自身初学者だった頃に（今もそうだけど）「Storybookいいよ！」と言われた使ってみたかったけど、使い方も良さもわからなくて3回くらい挫折したので、そんな人をこれ以上生みださないために書きました。 【内容】 [前半] - Storybookに作成したComponentを表示する - Storybookのaddonの使い方を掴む - Storybook上でのグローバルなCSSを対応させる - 画像ファイルをStorybookに反映させる [後半] - styled-componentsでStorybookを使う - TypeScriptでComponentsを作る - Next.jsでStorybookを使う - 作ったComponentを公開する
storybook for htmlがあまりにも使いづらいのでpugを使って上手く利用する方法を考えてみた - Qiita
storybook for htmlを利用する場合ってvueとか使わないと思うのですが、実制作で素のHTMLで書くケースなんてほぼ無いですよね。pugで書かれる事が多いかと思います。 そんな中でstorybookを利用したい場合【コード補完の利かない環境でHTMLを書く】か【ビルドしてコピペ】、しかも書いたところでpugとして再利用できる内容ではないのです。 下手したら仕事が増えるだけでハッキリ言って使えません。検索にも殆ど引っかからない状態です。 かと言ってstorybookを使うためにnuxtを利用するってのも違うと思うので、上手く使う方法を考えてみました。 20/02/26 環境作ってみました。gitも置いてあるのでこちらの方を参考にしてください。 静的なWEBサイト用にも使えるstorybookのpug環境を作ってみた 前準備 今回説明する内容はpugの利用方法を説明するだけなので
Storybookリリース6.0 ライブ編集、Storybook Composition、ゼロ構成を備えたUIコンポーネントエクスプローラー
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How Storybook helps designers & developers stay in sync
How to efficiently reuse stories in your React tests
Test component interactions with Storybook
Component Story Format 3 is here
VueJS で Storybook を使う
NuxtプロジェクトへのStorybookの導入 | GiFT（ギフト）株式会社
Building a design system out of React components
How to build connected components in Storybook
Component Story Format (CSF) • Storybook docs
Storybookを導入してみてわかった、導入おすすめプロジェクトの特徴 | Fintan
How to automate UI tests with Github Actions
@storybook/test を使って next/navigation をテストする
Storybook 7.0 design sneak peek
Declarative Storybook configuration
Why most design systems implode
@storybook/cli - Storybook
Nuxt.jsのPage ComponentのStorybook化 | tsuchikazu blog
今こそE2Eテスト自動化ジャーニーへ踏み出そう——「Autify」で実践するE2Eテスト自動化のリアル【デブサミ2021】
Rich docs with Storybook MDX
https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma