Storybook 5.0
We’re kicking off 2019 with Storybook 5.0 (SB5), our biggest release to date. Here’s what’s in it: 🎨 Complete overhaul of Storybook’s developer experience💅 Theme-ready component library🛠 Evolved front-end architecture for addons🖼 Brand new Storybook websiteRead on for a project update, tour of improvements, and upgrade instructions. Storybook’s progress and what’s nextStorybook is the world’s
Storybook による UI & Unit Testing のススメ | メルカリエンジニアリング
Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな
チームごとに色づいたピクシブのStorybook運用 - pixiv inside
こんにちは、pixivでUX/UIエンジニアをやっている@do7beです。今回はピクシブ株式会社の各チームで採用しているStorybookの運用体制についてご紹介したいと思います。 Storybookについて StorybookはUIのカタログようなツールで、コンポーネントの一覧表示や、デザインの保証や動作検証に役立ちます。 このStorybookを採用することが、割れ窓に対する解答なのではないかとこの頃は思っています。Storybookの詳細な説明については他のアドベントカレンダーなどの記事にまとまっていますので割愛して、今回は社内でのStorybookの運用についてお話したいと思います。 チームごとの特色が出る運用体制 まだ導入してから日は浅いですが、pixivだけでなくピクシブ株式会社の様々なサービスでStorybookを採用しています。Storyの設計、コンポーネントの分割、担保し
Pull RequestごとにStorybookがビルドされたら最高じゃね？ - Studio Andy
merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱えていました。 そこでソリューションチームの協力のもと、PRが作成されるたびにCIからGAE上にユニークなpathをもったStorybookを配信する仕組みが導入されたのが先週のこと。とてもめでたい👏👏 これによってPRのデザインをチェックする時もURLをクリックするだけでよくなりました。 UI開発の概念がひっくり返るほど便利だったので、この仕組みをプライベートの開発でも導入したいと思います。 やりたいこと Storybookをホスティングする環境(URLの共有だけで完結するもの)を作りたい Pull Requestが作成されるごとに自動で新しい
A brief look at Atomic Components[和訳] - Qiita
はじめに この記事はかの素晴らしいA brief look at Atomic Componentsの和訳です。 https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5 Vue.jsでアトミックデザインをやって上手く行かなかった時に出会った記事です。 著者から直接翻訳許可は得ています。 我々日本のフロントエンドエンジニアがわかりやすいように多少表現を変えている部分もあります。 それでは記事をお楽しみください。 Atomic Componentsの簡単な見方 モックアップを簡単にリアルタイムアプリに変える方法 Atomic Componentsは、扱うデータが多い、スケーラブルなWebアプリケーションとモバイルアプリケーションの作成と管理を容易にするためにPatternlab.ioのチームによ
![A brief look at Atomic Components[和訳] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c9e815a44f76b99a958b0808f60828205037fc9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QSUyMGJyaWVmJTIwbG9vayUyMGF0JTIwQXRvbWljJTIwQ29tcG9uZW50cyU1QiVFNSU5MiU4QyVFOCVBOCVCMyU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjllYWIyMTMzNGM0Y2MzMWQxNDU1YmUzNmVhMzI5N2M%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBrYWhpcm9rdW5uJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMGNhYjBlZjU5ZjZkYzEzMTBhY2QzNzM4YzE5Zjg1MQ%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4gQ3JhZnRzbWFuIFNvZnR3YXJl%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3Ddb0ea6c2c0ac7cd5386fac90e1a8322d)
Atomic Design powered by React @ AbemaTV
Atomic Design is a methodology for building user interfaces that advocates designing in isolation at the individual component level before assembling them into pages. The document provides examples of React component code for an announcement item, a divider, and a check toggle that demonstrate how to build reusable UI elements at an atomic level and compose them to build interfaces. It also shows
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
React＋AtomicDesign実践編 - Qiita
保守性の高い設計のために 今回業務上で、非常に保守性の高いUIをつくる必要が出てきました。 大きなシステムリプレイスをしなくても十分に拡張・改修が可能であること。（もちろん小さな改善を日々行えることが前提） こういった設計をするときは、横槍が入っても逃げ道があることが大事だと考えています。 挿げ替えや切り離しなど、コンポーネント設計はここに大きなメリットがあります。 アーキテクチャ選定 まずJavaScriptというベース知識さえあれば、あとは一般的なプログラミング手法の応用で拡張がしやすく、導入実績も豊富なReactをプロジェクトにおいて採用。 実際に保守ができるかどうかを決定付けるのはプロダクトのコードだけではなく、対応する人間が順応できるかも重要になります。 幸いにもES6以降のJavaScriptであれば他言語の経験者も入りやすそうですし、jQueryから入っているデザイナーにもあ
A brief look at Atomic Components – Joey Di Nardo – Medium
A brief look at Atomic ComponentsHow to easily turn your mockups into real-time appsAtomic Components is a conceptual fork of the Atomic Design principles established by the team behind Patternlab.io, designed to facilitate the creation and management of data-rich, scalable web and mobile applications. While Atomic Design is fantastic for working with fellow designers and static mockups given its
Home - Office UI Fabric
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Fin
Rebass
Rebass React primitive UI components built with Styled SystemStart your design system without boiling the oceanBuild consistent UI with design constraints and user-defined scalesBest-in-class developer ergonomics with Styled System propsFirst-class support for theming & fully compatible with Theme UIQuick, mobile-first responsive styles with array-based syntaxFlexbox layout with the Box and Flex c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - storybook-eol/addon-backgrounds: REPO/PACKAGE MOVED - A Storybook addon to customize the background of your preview
GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
GitHub - miukimiu/react-kawaii: Cute SVG React Components
GitHub - gabrielbull/react-desktop: React UI Components for macOS High Sierra and Windows 10
GitHub - avocode/react-shortcuts: Manage keyboard shortcuts from one place
GitHub - JedWatson/react-select: The Select Component for React.js
Rapid React Prototyping : React.jsでUIデザインプロトタイプを作る