インストール完了後、pagesとstylesをsrcディレクトリに移動してください。この先の手順は、src配下にpagesやstylesディレクトリが配置されていることを前提に進めています。 Prettier + Stylelint + ESLintを含めたNext.jsの環境構築は以下を参考にしてみてください🌟 Storybookのインストール プロジェクトのルートディレクトリで以下コマンドを実行します。
【CSF3.0対応】Next.js + CSS Modules（Sass）にStorybookを導入し、諸々のセットアップを済まそう
インストール完了後、pagesとstylesをsrcディレクトリに移動してください。この先の手順は、src配下にpagesやstylesディレクトリが配置されていることを前提に進めています。 Prettier + Stylelint + ESLintを含めたNext.jsの環境構築は以下を参考にしてみてください🌟 Storybookのインストール プロジェクトのルートディレクトリで以下コマンドを実行します。
Storybook DocsPage
I’m excited to announce DocsPage, available today in Storybook 5.2. Storybook is the de facto standard UI component workshop. It powers frontend dev workflows at Airbnb, Lyft, Squarespace, Slack, & Dropbox, in addition to more than 25,000 public Github projects. DocsPage is a zero-configuration way to turn your Storybook into a rich, readable document. It’s the first step towards transforming your
Vue, Storybook, TypeScript—starting a new project with the best practices in mind (originally published on Medium) I like writing React code. This might be an odd introduction to a story about Vue, but you need to understand my background to understand why I’m here discussing Vue. I like writing React code and I hate reading it. JSX is a neat idea for assembling the pieces together fast, Material-
背景 最近コンポーネント駆動開発に興味があり、お手軽にFigmaやAdobeXDとの連携でデザインとコードの分離ができそうなStorybookに目を付けました。 早速、Storybookを使ってみようと公式ドキュメントを読み進めていましたが、どうしてもコンパイルが遅いのがストレスでした。 そこでBuilderにVite(esbuild)を指定できることを知り、@storybook/builder-viteのアドオンを試したのですが、そのまま素直に動かず、つまずく箇所が2つあったので回避策をメモします。 動作環境 next.js: 12.1.6 react: 18.1.0 storybook: 6.5.6 @storybook/addon-interactions: 6.5.6 @storybook/builder-vite: 0.1.36 問題1: mdx-js/xxxxのパッケージのイン
Storybook8.1からSubpath importsを使ったモジュールのモックができるように
- import { type GetExamplesResponse, getExamples } from "../../api/example"; + import { type GetExamplesResponse, getExamples } from "#src/api/example"; Node.js が提供する Subpath imports は Vite と Webpack、また TypeScript5.4 でサポートされている。実際に次の環境で試すと、型の補完も効くし、モジュールがモックされた。tsconfig も Vite の config もいじってないのに。 Storybook: 8.1.6 Vite: 5.2.8 TypeScript: 5.4.5 @storybook/testのfnと Story のbeforeEachを使うことで、Jest や Vite
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」などと記載されている場合があるが、以下のサンプルで
TypeScript x React x Storybook のプロジェクトを CSF3.0 対応させようとして型問題でテンパったら読む記事 - Qiita
TypeScript x React x Storybook のプロジェクトを CSF3.0 対応させようとして型問題でテンパったら読む記事TypeScriptReactstorybook はじめに 先日 Storybook 6.4 がリリースされ、CSF 3.0 がフィーチャーフラグなしで使えるようになりました。 意気揚々と移行を試みたものの、story object に適用できる型がかなり増えており、どれを使うのが正解か理解するのに時間がかかりました。 同じように悩んでいる方の助けになればと思い、備忘録として調べた内容を残しておきます。 TL;DR Storybook 6.4 であることが前提ですが、とりあえず CSF 3.0 なら ComponentStoryObj, CSF 2.0 なら ComponentStoryFn 使っておけば間違いないでしょう。 Meta と Story
Vue の Component はもう import しなくていい【Storybook 対応】 - Qiita
はじめに ユニークビジョン株式会社 では Vue.js + Vite Storybook + Vite な環境でフロントエンドを開発しています。 開発していると、コンポーネントを手動で import する単純作業が何度も発生してしまいます。 面倒なので import しなくて済む方法を探しました。 unplugin-vue-components 有名な plugin です。 導入はドキュメント通りに
10 Storybook Best PracticesThis is a post about Storybook and conventions. It is based on my experience using Storybook over several years and from the experiences of other developers. The best practices I define here aren’t silver bullets that will fix and improve every project. They’re a baseline of ideas and conventions that I think are worth trying. Hopefully, they…
本記事は Design Week 2023 5日目の記事です。 🌈 4日目 ▶▶ 本記事 ▶▶ 6日目 💐 はじめまして。フロントエンドエンジニアを目指して日々奮闘中の中平です。この春でNRIネットコムに入社して2年目になります。 昨年の8月に現場配属され、9月頃からはコーダーとしてWeb画面リニューアルの案件に参画しました。初めて参画したこの案件では、画面上に表示するボタンやチェックボックス等のUIパーツ（以下、UIコンポーネントと記載）がStorybookを使って管理されていました。 私自身は途中からの参画だったこともあり、案件参画中はStorybookの導入方法や活用方法をあまり理解しておらず、サイトで使われているUIコンポーネントが一覧で見られるもの程度の認識でした。しかしうまく活用できていれば、さらにスムーズにページのコーディングができていたということに気づき、もう少しSto
Storybook Tutorials
So far, we have created isolated stateless components-–great for Storybook, but ultimately not helpful until we give them some data in our app. This tutorial doesn’t focus on the particulars of building an app, so we won’t dig into those details here. But we will take a moment to look at a common pattern for wiring in data with container components. Container components Our TaskList component as c
こんにちは！フリージアの東山です。 前回の続きとして、今回はVuetify2をStorybookで動かしてみようと思います。 今回のゴールは以下になります。 Storybookの導入 (※ 前編) VueコンポーネントをStorybookに登録 (※ 前編) Vuetify2のコンポーネントをStorybookに登録 (※ 後編) 本記事にて、Vuetify2のコンポーネントをStorybookに登録するところまで書ければと考えていたのですが、記事が長くなってしまうため、前編、後編に分けて投稿します。 Storybookの導入 Storybookとは？ Storybookとは、一言で言うとUIコンポーネントカタログです。 UIコンポーネントを一覧化し、各UIコンポーネントの仕様・挙動を確認できます。 Storybookを導入することで、UIコンポーネントに関してチームで共通の認識を持つこと
こちらの記事は、Dominic Nguyen 氏により2018年 5月に公開された『 The Delightful Storybook Workflow 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 あなたのチームのアドオン、コンフィギュレーション、APIといった一連のニーズに合わせてカスタマイズできる事は、Storybookの大きな利点です。しかし、Storybookは指先一つで様々なオプションが操れるが故に、全体像ーStorybookのワークフローを見失いがちです。 今回、私は4つのプロフェッショナルチームとStorybookのメンテナー達にインタビューを行い、彼らの「生産性、セットアップ、メンバーの満足度」のバランスを取るためのコアワークフローを要約しました。この記事では、StorybookでUIコンポーネントを生産するための効率的な反復プロセスについて説明
Storybook is the most popular UI component explorer. It powers frontend infrastructure for Shopify, IBM, Salesforce, and Airbnb, and 30,000+ public GitHub projects. In the beginning, Storybook was used to help developers build components in isolation. Developers created component libraries containing hundreds of components and thousands of stories. But large Storybooks can be tough for teams to ma
GitHub - atlassian-labs/storybook-addon-performance: 🚧 A storybook addon to help better understand and debug performance for React components.
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の「インタラクションテスト」でフロントエンドのテストをシンプルに管理する！｜SHIFT Group 技術ブログ
はじめにこんにちは。 株式会社SHIFTのブラッドフォード です。 ついに Storybook の v7.0 が正式リリースされましたね！ 早速利用していますが、設定や記法がシンプルになり使いやすくなりました。 Storybook といえば、コンポーネント管理を目的としたライブラリですが、最近はテストもこなせるようになりました。 公式では「インタラクションテスト」という名前で紹介されています。 今回はこの「インタラクションテスト」を使ったフロントエンドのテストを紹介します。 うまく活用できれば、単体テストや結合テストは「インタラクションテスト」に集約できるかもしれません。 執筆者プロフィール：ブラッドフォード 株式会社SHIFT DAAE部所属のフロントエンドエンジニアです。 最近は keyball を使って仕事しています。 おさらい｜フロントエンドのテストまずはフロントエンドのテストにつ
GitHub - storybookjs/eslint-plugin-storybook: 🎗Official ESLint plugin for 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
Zero-config Storybook
Storybook’s greatest strength is also its weakness. Thousands of leading teams from Airbnb to BBC choose Storybook because it works with diverse frameworks and tech stacks. Unfortunately, the abundance of configuration options can make Storybook tough to set up. As maintainers, our goal is to get you setup quickly while preserving robust config options for advanced teams. That’s why I’m excited to
How to remove preview body padding in SB 6.0? · Issue #12109 · 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
お、pullreqきてる。コンポーネント生やしたのかなるほど。storybookにも追加されてるな。 ...ちらっとでいいからstorybookの画面でも触りたいなぁ。 TL;DR webアクセスをIP制限したS3バケットを用意し、pullreqごとにgithub actionsでstorybookをビルド・S3にアップ・pullreqにURLをコメント、という仕組みを作った やりたいこと pullreqごとにstorybookの画面を見たい テスト環境にアップしてもらったり、checkoutしてビルドして、とかは面倒 プレビューはインターネットに公開したくない（アクセス制限したい） ちらっと見れればよいのです。pullreqにスッと置かれたリンクをおもむろに押して、軽く触ってみて、うんうん、と頷くくらいがよいのです。 なお成果物のリポジトリはこちら: https://github.com
これはなに pnpm workspaces で構築した monorepo プロジェクトで Storybook による UI カタログを構築するまでの手順をまとめたものです。 2023 年 4 月 3 日に Storybook v7 がリリースされました。このメジャーアップデートにより pnpm が正式にサポートされ、monorepo 構成下でも正常に動作するようになりました。 Storybook 6.5 でも pnpm + monorepo 構成にて動作させることは可能でしたが、 v6.5 は TypeScript 5.x を正式にサポートしておらず、ビルドに失敗することがあります。これを解消するには Storybook を v7 にマイグレーションする必要があります。 本稿では、必要な node モジュールをイチから手動でインストールしてセットアップする手順と、既存の Storybook
Loading...
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上でユーザーのクリックやフォーム入力のようなインタラクションな操作を表現できます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行できるようですのでこちらを試してみます。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。 $ npm init vite@latest my-vue-app -- --template vue-ts $ cd my-vue-app $ npm install Storybook のインストール 続
How to actually test UIs
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 print. How do leading front-end teams keep up? What's their testing strategy, and what methods do they use? I researched ten teams from the Storybook commu
Lost Pixel
Visual Testing for Your FrontendHolistic, fast & convenient tests that come at almost no writing and maintenance costs. Your existing Storybook, App, and Marketing Page is your testing suite.
こんにちは、エンジニアリングマネージャーの岡村です。 社員全員テレワークの環境にも慣れてきて、ワークフロー改善と共にREADYFORの開発環境も日々改善しております。 概要 StorybookをNetlifyへホスティングすることで、PR単位でデプロイされるためデザインの確認・レビューがとても楽になったので紹介です。 導入の背景 READYFORのアーキテクチャ上もっとも有効だった ざっくりREADYFORのフロントエンドアーキテクチャはReact On RailsとElements(UI Library)で構成されており、デザイン手法にAtomicDesignが採用されています。 Elements(UI Library)はDesignSystemの一部として構成され、ドメインに依存しないコンポーネントはElementsへ開発しています。 そのため、確認をする際にはElementsのコンポ
Add Storybook to your Nuxt Applications.Welcome to @nuxtjs/storybook module documentation to help you set up Storybook in your Nuxt application in seconds, with many goodies 🍬.
サイトの規模やスケジュールに応じてスタイルガイドを作成した方が効率良く進められるケースもあるかと思います。スタイルガイドを作成するメリットにはデザインの統一、テストや運用の効率化などが挙げられます。 とくにスタイルガイドを用いてプロジェクトに関わるメンバー（ディレクター、エンジニア、デザイナー）間の認識を共通化することはプロジェクト進行において非常に重要な意味を持ちます。 スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用：Webデザインのスタイルガイドの作り方 ただし、スタイルガイド導入にはメリット、デメリットがあります。導入するべきプロジェクトなのかは見極めが必要になります。 質の高いスタイルガ
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のリンク先にある説明手順に従ってインストールする
Angular Advent Calendar 2020 24日目の記事です。 Angular を使ってチーム開発するときに Storybook を使うと捗るという話です。今年8月に登場した Storybook 6.0 で大幅に使い勝手が良くなっているので、そこについても紹介します。 Storybook について 開発者が複数人いて、デザイナーもいる環境だとします。昨今はデザインシステムの登場で、デザインの時点でコンポーネントが意識されていることもあります。そうなってくると、コンポーネント単位で見た目を確認したいという需要が出てきます。そこで役に立つのが Storybook です。 Storybook は公式には「UIコンポーネント開発ツール」と表現されています。言葉で説明より先に、まずは Docs の Get Started > Examples > Storybook Design S
# ディレクトリ構成 # Storybook の設定ファイル .storybook ├── main.js └── preview.js # Storybook のデフォルトファイル # baseUrl が src ディレクトリの場合は /stories -> /src/stories /stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Header.tsx ├── Introduction.stories.mdx ├── Page.stories.tsx ├── Page.tsx ├── assets │ ├── code-brackets.svg │ ├── colors.svg │ ├── comments.svg │ ├── direction.svg │ ├── flow.svg │
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
こんにちは森田です。 タイトル通りですが React/Vue を使わない案件でも UIコンポーネントカタログの Storybook を使いたいことがあります。 そんな時は Storybook for HTML を使えば html ファイルもStorybookで導入することが可能です。 今回はStorybook for HTML の導入について説明させていただきます。 ちなみに、UIコンポーネントカタログにつきましては、弊社茶木の書いた記事が熱いので是非お読みいただきたいです。 Storybook for HTML とはIntroduction to Storybook for HTMLその名の通りですが HTML でも Storybook を使えるようにしたものです。 基本的に stories.js などの書き方は従来のものと変わりませんが、html ファイルを import して使うこと
はじめに Storybook の公式アドオンである Addon Docs は、5.3 から Vue(や Angular や Web Components)におけるコンポーネントドキュメントの自動生成機能がサポートされるようになりました。 これは、コンポーネントを指定するだけでその Props や Events, Slots の型やコメントがドキュメントとして生成できる、というものです。 この記事では、如何にして Vue 版のドキュメントが自動生成されているのか、またその仕組みを Storybook 以外で使うことについて説明します。 コンポーネントの情報抽出 ドキュメントを自動生成するには、まずどうにかしてコンポーネントの(Props 等)を取得、またそれらに対して書かれたコメントを抽出する必要があります(メタ情報の抽出)。 この工程をまるっと行ってくれるのが、Vue Styleguidi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue, Storybook, TypeScript—starting a new project with the best practices in mind
StorybookがViteのBuilderで動かない問題の回避策
Storybook for HTMLをインストール後に追加するべきアドオン一覧
10 Storybook Best Practices
Storybookを活用したUIコンポーネントの管理について紹介します - NRIネットコムBlog
Vuetify2をStorybookで動かしてみた (前編) - Freegian
理想的なStorybookのワークフローとは - Qiita
Discover Dependencies in Storybook
pullreq毎にprivateなstorybook(や静的webサイト)プレビューを作る
pnpm workspaces (monorepo) 上に Storybook 7.0 を導入する
Storybook 単体でインタラクションテストを実施する
Storybookをホスティングしてレビューが爆速になった話 - READYFOR Tech Blog
Storybook Integration for Nuxt
Vue CLI と Storybookでスタイルガイドを作成しよう ｜ Tips Note by TAM
1分でわかるStorybook for HTML(スタイルガイドツール)の使い方
チーム開発に効く Angular x Storybook 6
Next.js + Tailwind CSS に Storybook を導入する方法 | fwywd（フュード）powered by キカガク
Storybook for HTML で React/Vue 以外の案件でもUIコンポーネントカタログを使う
Storybook for VueのDocs Addonの裏側: コンポーネントの自動ドキュメント生成について