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のDocsBlockを触ってみる
Storybookは、Canvasタブの以外には「Docs」というタブが設けられています Docsには、以下のような文書を書くことができます 今回は、Docsの書き方について紹介しようと思います Docsの種類 Storybookの公式ページに行き、左パネルの「Write docs」の下の「Docs Blocks」を注目します 「Docs Blocks」の下には8つのページがあります、その8つはDocsBlockの全部の種類です さらに、Docsにの書き方は2種類存在しています 一つ目はMDX、ArgsTableを例えてみると ドキュメントは「Working with MDX」のセクションです もう一つ目はDocsPageです、ドキュメントは「Working with the DocsPage 」のセクションです MDXは、DocsPageより豊富で、多様なDocsを書くことができます 今
Storybook 7 を Vue 3 + TypeScript ではじめよう！
想定読者や使い方などについては「はじめに」の章をご覧ください。
Storybook でインタラクションテストを作成して Jest で再利用する
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 play() 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを Jest など他の領域においても再利用できることです。 この記事では Vite に Storybook を導入してインタラクションテストを作成して Jest で再利用するまでの手順をやってみたいと思います。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
storybookを理解する
この記事ではReact, Typescriptをベースにstorybookの全体像に触れていきます。 「storybook、名前は聞いたことある」というレベル感の人に対して、実務でstorybookを使う上での下地を作ることが目的です。そのため、「細かい」と判断した部分は割愛させてもらってます。（あくまで下地） 基本的には公式ドキュメントがベースになっていますので、詳しい説明は公式ドキュメントを確認してください。 storybookとは storybookとはUIのカタログを作るツールで、2022年現在、フロントエンド開発において必要不可欠です。 各componentのUIやpropsに応じた挙動の確認、component単位でドキュメントを用意することを可能にしてくれます。 導入方法 コマンドを打ちましょう。
Storybook for HTMLをインストール後に追加するべきアドオン一覧
Storybookにはアドオンが必要不可欠 Storybookはアドオンを追加することで機能を拡張できる。 例えばソースコードを表示・コピーするアドオンなどだ。 アドオンを追加していないStorybookはエディタで拡張機能が追加されていないくらい使い勝手が悪いので必ず追加したほうが良い。 https://storybook.js.org/addons/ StorybookのAddon Galleryにもアドオンの一覧がまとめられている。 https://storybook.js.org/docs/addons/addon-gallery/ 以下にStorybookのおすすめアドオンを記載した。 StorybookのアドオンのGitHubページには「add following content to .storybook/addons.js」などと記載されている場合があるが、以下のサンプルで
1分でわかるStorybook for HTML(スタイルガイドツール)の使い方
Storybookとは Storybookとは保守性の高いUIコンポーネント(スタイルガイド)を素速く簡単に構築するためのツール。 オープンソースなので商用でも無料で使用することが可能。 Storybook for HTMLといってもHTMLだけではなくCSSやJavaScriptのスタイルガイドも構築できる。 昔はFractal、sc5-styleguide、kss-nodeなどがよく使用されていたが、2020年現在では新規のプロジェクトの場合はStorybookが使用されることが多い。 React、Vue.js、Angular用などがあるが、この記事で説明するのは一番需要がありそうなHTML用のStorybook for HTMLのインストール手順と基本的な使い方。 Vue.jsなどの場合は公式サイトトップの右下のMADE FORのVueのリンク先にある説明手順に従ってインストールする
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 自動セット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
GitHub - hirotaka/storybook-addon-nuxt: This add-on makes it easier to set up Storybook in your Nuxt3 project.
@storybook/cli - Storybook
https://twitter.com/takepepe/status/1637834486477123587
https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
Support for Astro components · Issue #18356 · storybookjs/storybook
Component Encyclopedia | Storybook
https://twitter.com/hanetsuki_dev/status/1530499215914598400
NIFTY engineering - ニフティ株式会社のエンジニアたちのいまを伝えます
Storybook addons for CSS
Links Addon | Storybook: Frontend workshop for UI development