Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI” such as shopping carts, dashboards, chat widg
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
理想的なStorybookのワークフローとは - Qiita
こちらの記事は、Dominic Nguyen 氏により2018年 5月に公開された『 The Delightful Storybook Workflow 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 あなたのチームのアドオン、コンフィギュレーション、APIといった一連のニーズに合わせてカスタマイズできる事は、Storybookの大きな利点です。しかし、Storybookは指先一つで様々なオプションが操れるが故に、全体像ーStorybookのワークフローを見失いがちです。 今回、私は4つのプロフェッショナルチームとStorybookのメンテナー達にインタビューを行い、彼らの「生産性、セットアップ、メンバーの満足度」のバランスを取るためのコアワークフローを要約しました。この記事では、StorybookでUIコンポーネントを生産するための効率的な反復プロセスについて説明
Storybook 駆動開発 @ CSF3.0
Storybook CSF3.0 の概要 単体テスト・結合テスト・Storybook を充実させるためには、多くの工数が必要です。堅牢なフロントエンド開発のためとはいえ、これらのメンテナンスは日に日に負担が増しています。似かよったテストケースでは、同じような下作業をそれぞれに用意する必要がありました。 Component Story Format（CSF）は、この課題への取り組みとして開発されました。「様々なソリューションで再利用可能な資材」 が用意できれば、開発は素早く・より楽しいものになります。リリース間近の CSF3.0 はより一層、そのゴールを明確に示してくれています。 testing-library で Story にインタラクションを CSF3.0 新機能の中で際立っているものが play 関数 です。@testing-library/user-eventを利用すると、Stor
プロダクト支援チームでkintoneのStorybookをホスティングした話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。 支援チームとプロダクトチームの関わり まずは私たち支援チームとプロダクトチームが社内でどのように関わり、開発しているのかを紹介します。 プロダクト支援チームはプロダクトチームに属しておらず、さまざまなプロダクトの課題解決のために動いています。 例えば、プロダクトチームが手の回っていない最新技術への追従や開発体験の改善を行っています。 生産性向上チームとフロントエンドエキスパートチームの詳細については、それぞれ以下の紹介記事を参照してください。 生産性向上チームの紹介 フロントエンドエキスパートチームの紹介 今回はその支援
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
Storybook 6.1
Storybook is the industry standard UI component workshop. It organizes components and their states to structure UI development, testing, and documentation. It's used by teams at Twitter, Slack, Airbnb, Shopify, Stripe, and Microsoft. As Storybook grows in popularity, companies are building more components in it than ever before. Atomic components, full blown pages, and everything in between. Perfo
Nuxt.jsのstorybookを見やすくカスタマイズする
module.exports = (baseConfig, env, defaultConfig) => { //nuxt.jsの'@'や'~'の読み込み defaultConfig.resolve.alias['@'] = rootPath; defaultConfig.resolve.alias['~'] = rootPath; // addon-storysourceの設定はここから defaultConfig.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }) return defaultConfig; }
Pull RequestごとにStorybookがビルドされたら最高じゃね？ - Studio Andy
merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱えていました。 そこでソリューションチームの協力のもと、PRが作成されるたびにCIからGAE上にユニークなpathをもったStorybookを配信する仕組みが導入されたのが先週のこと。とてもめでたい👏👏 これによってPRのデザインをチェックする時もURLをクリックするだけでよくなりました。 UI開発の概念がひっくり返るほど便利だったので、この仕組みをプライベートの開発でも導入したいと思います。 やりたいこと Storybookをホスティングする環境(URLの共有だけで完結するもの)を作りたい Pull Requestが作成されるごとに自動で新しい
react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog
こんにちは！Webアプリケーションエンジニアの id:amagitakayosi です。 今日はReactコンポーネントを手軽に開発するためのツールを紹介します。 前回のあらすじ react-storybookとは 導入してみる 初期設定 storyを作成する 起動 イベントを監視する Hot Module Reloadingの仕組み メリットとデメリット リアルタイム確認できる 導入が簡単 ストーリー駆動開発できる デメリット: Webpackの機能で動いてる まとめ 前回のあらすじ developer.hatenastaff.com 前回の記事では、Reactコンポーネントをnpmパッケージとして開発する方法を紹介しました。 対象としたのはこちらの無限スクロール用のReactコンポーネント。 http://www.npmjs.org/package/@fand/react-infini
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook Lazy Compilation for Webpack
Storybook CSF3.0 時代のテストに備える
Component Story Format 3.0
GitHub - Quramy/zisui: Yet another CLI to screenshot your Storybook
1粒で3度おいしいStorybook