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
これでもろもろのセットアップが完了し、Storybookが立ち上がります。 step2 自動作成されたファイルを削除する。 上記のキャプチャにある<Button/>・<Header/>・<Page/>は自動作成されたExampleなのでそれに関わるファイルを削除しておきましょう。(ノイズだから削除するだけですので、ご自由に！) src/stories/以下のファイルを全て削除します。 一旦エラーが出ますが、表示するStoryがないだけなので無視してOKです。Step3以降でStoryを作成していきましょう。 Step3 対象のコンポーネントとそのStoryファイルを作成する。 お好きなコンポーネントと、そのStoryファイルを手書きしましょう。 (下記のコンポーネントはとても適当です...。) type Props = { children: string; disabled: boole
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
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')(
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
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
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
Storybookの可能性を見せびらかしたい
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
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
Apollo Client 3.8 から useFragment という React hook が導入されました。 今回はこの useFragment を利用している Component を対象としたテストや Storybook の書き方についての覚書です。 先日に別のエンジニアから、Storybook の記述に際して相談を受けた際のやり取りを元ネタとしています。 なお、途中のコードが長くなりそうなため、先に記事で取り扱いたいトピックを挙げておきます。 useFragment を利用している Component の Storybook が記述できるようになることStorybook で扱う Fragment のスタブデータの構築に一定の柔軟性を持たせること各トピックに対応する解として、この記事では以下の方式について解説します。 Apollo Cache を用意し、Story 描画前に所望の状
これは、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 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リリース6.0 ライブ編集、Storybook Composition、ゼロ構成を備えたUIコンポーネントエクスプローラー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Storybook8.1】ワンクリックでStory作成！俺たちはもうStoryを書かなくていいのかもしれない。
How to efficiently reuse stories in your React tests
Test component interactions with Storybook
Component Story Format 3 is here
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 をテストする
Declarative Storybook configuration
Storybook 7.0 design sneak peek
Why most design systems implode
Storybook で Apollo Client の useFragment を扱う
@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