@serendie/ui
v1.0.0
Published
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
Downloads
1,003
Readme
Serendie Design Systemは、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。 デザイントークンやSerendie Symbolsなど複数のリポジトリから構成され、本リポジトリはSerendie UIを扱います。
Serendie UI
Serendie UI Kit (Figma)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容がFigma Devモードでも確認できます。
使い方
インストール
デザイントークンも同梱されます。
npm install @serendie/uiプロジェクトへの導入
rootのCSSに対して下記を指定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。
@layer reset, base, tokens, recipes, utilities;
@import "@serendie/ui/styles.css";コンポーネントを使う
各Componentのpropsについては、ドキュメントや、Storybook、Figma Code Connectを参照してください。
import { Button } from "@serendie/ui";
<Button size="medium">Login</Button>;テーマ切り替え
Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、data-panda-theme属性 (konjo, asagi, sumire, tsutusji, kurikawa)を付与することでカラーテーマを切り替えることができます。
各テーマについてはこちらを参照してください。
<html data-panda-theme="asagi"></html>スタイリングライブラリと併用する
マージンを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用しているPanda CSSの例を紹介します。
SerendiePresetの追加
Panda CSS導入後に生成されるpanda.config.tsに下記を追記することで、Panda CSSのPresetとSerendie Design Systemのデザイントークンを繋ぎこみます。
+import { SerendiePreset } from "@serendie/ui";
export default defineConfig({
+ jsxFramework: "react",
+ presets: [SerendiePreset],
});より実践的な例は、こちらのサンプルプロジェクトを参考にしてください。
APIを詳しく知る
Serendie UIはヘッドレスUIとして、Ark UIを内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIのAPIリファレンスを合わせて参照してください。
Serendie UIの開発
Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
npm run dev
npm run buildFigma Code Connect
Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。
npm run connect:publishstoriesファイルに変更が入ると上記がGitHub Actionsによって実行されます。
Resources
Serendie Design Systemは、Serendie UI (本リポジトリ) のほか以下の関連リポジトリから構成されています。
| Package name | Location | Description |
| ------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @serendie/design-token | serendie/design-token | W3C Design Token Format Moduleの仕様で定義されたSerendie UIのベースとなるデザイントークン |
| @serendie/symbols | serendie/symbols | Serendieらしい300種類以上のSVGアイコン集 |
| @serendie/figma-utils | serendie/figma-utils | Figma REST APIを用いて、@serendie/design-tokenとFigma Variablesの同期を行うためのユーティリティー集 |
| @serendie/style-dictonary-formatter | serendie/style-dictonary-formatter | デザイントークンを各プラットフォームに展開するためのamzn/style-dictonaryのフォーマッタ |
Examples
主要パッケージの導入サンプルとして、serendie/bootcampを用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。
サブブランド対応
Serendie Design Systemは三菱電機の有する多様な事業に適応することがコンセプトの一つです。
@serendie/desigon-tokenおよび@serendie/uiは、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けにserendie/subbrands-templateを整備しています。
詳しくはSerendie Design Systemチームまでお問い合わせください。
License
各パッケージはMITライセンスの下で配布されています。 詳しくはLICENSEを参照してください。