IntegrationsIntegrate your tools with Storybook to connect workflows and unlock advanced features.
Integrations | Storybook: Frontend workshop for UI development
IntegrationsIntegrate your tools with Storybook to connect workflows and unlock advanced features.
こんにちは、@takanoripです。 今回は最近導入したStoryshotsというやつを紹介していきたいと思います。 StoryshotsはStorybookのアドオンで、Storybookに登録されているコンポーネントのスナップショットテストをしてくれます。できることはjestのスナップショットテストとほぼ同じです。 Storyshotsを使うと、コンポーネントごとにテストファイルを用意しなくて良いので手軽にスナップショットテストを導入することができます。 すでにStorybookを導入していれば、下記ファイルを追加するだけでOKです。 簡単でしょ？ また、Storyshotsを使うと、スナップショットテストができること以上に良い効果をProjectにもたらすことができます。その効果について説明していきます。 Storybook Storybookは皆さんご存知だと思うので説明を省略し
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。
Announcing Storybook 3.0
Welcome to Storybook 3.0, a huge step forward for the world’s favorite UI component development environment. Functionally, 3.0 brings long-anticipated webpack2 support, create-react-native-app support, flexible snapshot testing, and a host of bugfixes and enhancements. Under the hood, Storybook 3.0 is a major overhaul of the Storybook project both organizationally and structurally. Organizationall
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
GitHub - Quramy/zisui: Yet another CLI to screenshot your 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.
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
デザイナーだけでは実装面に配慮したコンポーネント設計やデザインが難しかった 2018年1月。私たちはデザイナー2名でデザインシステムを作りはじめ、下記のような流れでデザインしていきました。 ① 各社が公表するデザインシステムやスタイルガイドの事例研究 ② Atomic Design などコンポーネント指向をインプット ③ プロダクトを構成するコンポーネントを収集・分類し、俯瞰的に観察する（Interface Inventory） ④ Interface Inventory で分類を元に、コンポーネントをリデザインする ⑤ スタイルガイドの実装（ここはコーダーさんに依頼） デザインが終わり、「いざ実装するぞ」という段階で、デザインに対してたくさんのフォードバックがあり、実装が足踏みしてしまう場面がありました。もちろんデザインについてフィードバックがあることは想定していたことですが、デザインと
本エントリでは、CircleCI と Storybook を組み合わせて、GitHub のプルリクエストから簡単に Storybook を表示する方法を紹介します。 はじめに Storybook は React をコンポーネント単位で開発することができる開発環境です1。 私の会社でも少し前から導入しているのですが、コードレビューの時に GitHub 上から Storybook が開けたらなあと思うことがありました。 やりかたは色々あると思いますが、今回は CircleCI を使って、手軽に Storybook を閲覧できる環境をつくる方法を紹介します。 説明は良いからサンプルが欲しい！という人は、 リポジトリを用意したのでご覧ください。 手順 さっそく導入方法に入りますが、Storybook が既に build-storybook という便利な機能を用意してくれているので、特別難しいことは
React Storybook: Develop Beautiful User Interfaces with Ease — SitePoint
When you start a new front-end project, the first thing you usually do is create a beautiful design. You carefully plan and draw all of your UI components, as well as each state or effect they may have. However, during development, things usually start to change. New requirements, as well as unforeseen use cases pop up here and there. The initial beautiful component library cannot cover all of the
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本家にマージする計画がありますので、今後もご注目よ
Webpack • Storybook docs
Storybook Webpack builder is the default builder for Storybook. This builder enables you to create a seamless development and testing experience for your components and provides an efficient way to develop UI components in isolation allowing you to leverage your existing Webpack configuration with Storybook. ConfigureBy default, Storybook provides zero-config support for Webpack and automatically
Announcing Storybook 3.4
It’s that time again folks: we’re excited to announce the latest iteration of Storybook, the award-winning software for developing, testing, and documenting UI components in React, React Native, Vue, Angular, and Polymer. 🍾🥂😅 Storybook 3.4 is on the NPM registry, and it’s a big one. It includes: New framework support: Polymer!Component testing: Storyshots image snapshots, Vue/Angular supportUI
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
GitHub - mthuret/storybook-addon-specifications: :book: Write tests next to your stories and display their results inside storybook interface
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
GitHub - storybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel.
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
まさあき( @masaakikunsan )です。 最近、Nuxtを使う機会が増えて来てSPA開発のスピードが以前より上がりNuxtありがとうと感じています。 今の案件で、既存のサービスをNuxtで作り直しているのですが、Storybookを導入しようと思ったところそれに関する記事が一つぐらいしかなかったので、今回はNuxtにStorybookを導入する方法を紹介します。 まぁ普通に導入すればいいので記事がないだけだとは思うのですが... はじめに この記事ではStorybookについてとNuxtについては取り扱いません。 参考資料にてStorybookとNuxtについてのオススメの記事を載せるのでそちらを読んでください。 Nuxtのプロジェクトを作成する まずはじめに、Nuxtのプロジェクトを作成しましょう。 今回はvue-cliを利用していきます。
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')(
Storybook を Vue.js で使っていきたいので、必要な箇所を翻訳します。 Introduction Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively. Storybook は UI Component のための開発環境です。これによって様々な状態の UI Component を視覚化し、インタラクティブな開発を可能にします。 Storybook runs outside of your app. So you can develop UI components in isolation without wo
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storyshotsが最高すぎる件 - Qiita
StorybookでバンドラーにViteを使う | miyauci.me
Storybook on-demand architecture
How Storybook helps designers & developers stay in sync
デザイナーだけで作りはじめたデザインシステムにまつわる失敗 2018 - Qiita
コードレビューに役立つ React Storybook の閲覧環境を作る - Qiita
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
Nuxt.jsにStorybookを導入する - Qiita
Component Story Format (CSF) • Storybook docs
Storybookを導入してみてわかった、導入おすすめプロジェクトの特徴 | Fintan
How to automate UI tests with Github Actions
@storybook/test を使って next/navigation をテストする
Storybook for vue.js ドキュメント 日本語翻訳 - Qiita
Storybook 7.0 design sneak peek
Declarative Storybook configuration