fondue

FrontifyによるFondue Design System

@frontify/fondueを使用します

はじめる

Frontifyエコシステムの設計システムであるFondueへようこそ。

インストール

プロジェクトへの依存として、フォンデデザインシステムパッケージを追加します。

npm i @frontify/fondue
# or
pnpm i @frontify/fondue
# or
yarn add @frontify/fondue

コンポーネントの検索

Fondue Design Systemのストーリーブックインスタンスで、利用可能なすべてのコンポーネントを閲覧できます。このストーリーブックには、フォンデュモノレポのすべてのサブパッケージからのすべてのコンポーネントが含まれています。各コンポーネントには、現在のライフサイクル状態を示すトップバーにバッジがあります。

デザイナーの場合、DocumentationはWEAREのFondue Design Systemドキュメントで入手できます。

使用法

フォンデューコンポーネントをクリーンアップしている移行期間中、古いコンポーネントと新しいコンポーネントを並べて使用できます。

このコンポーネントはすでにリファクタリングされていましたか？

コンポーネントがリファクタリングされた場合、古い実装は非推奨としてマークされます。

これは、コンポーネントを消費すると、ストーリーブックストーリーの上部バーのバッジを介してコードに表示されます。

リファクタリングされたコンポーネントを使用します

リファクタリングされたコンポーネントを使用する場合は、Fondueパッケージの/componentsサブエクスポートを介して既にインポートできます。

 import { Button } from "@frontify/fondue/components" ;

const App = ( ) => < Button > Click Me </ Button > ;

古いコンポーネントを使用します

古いコンポーネントを使用している場合は、 @frontify/fondueパッケージから直接インポートし続けることができます。

 import { Button } from "@frontify/fondue" ;

const App = ( ) => < Button > Click Me </ Button > ; 

貢献

貢献ガイドラインと地域開発のヘルプを参照してください。

重要なリンク

• ストーリーブック - フォンデューコンポーネントのプレビューのためのストーリーブック
• フォンデュードキュメント - フォンデューデザインシステムのドキュメント
• Tailwind - Fondueで使用されるユーティリティファーストCSSフレームワーク