Release Yamada UI v2

Transcript

1. Yamada UI v2をリリースする
2. Profile Produced Contributing Hirotomo Yamada Developer of Yamada UI. Designer, design system and UI engineer. I work for
3. Yamada UI v2をリリースする
4. リリースします
5. 🎉
6. Yamada UI とは 他は、省略します。 日本発のReact UIライブラリです
7. 新しい機能
8. CLI - セットアップ CLIを使用すると、プロジェクトで Yamada UIのセットアップを簡単に行うことができるようになりました。 initコマンドを実行すると、次のプロンプトが表示されます。
9. CLI - ダウンロード 2つの方法でコンポーネントを提供します。 1つは、CLIからコンポーネントをダウンロードする新しい方法。もう 1つは、 モジュールからコンポーネントをインポートする従来通りの方法です。 ソースコードをダウンロードすることにより、コンポーネントやフックの 初期値やロジックをカスタマイズすることがで き、ロジックなどで不具合があった場合は、直接修正する ことができます。
10. CLI - ダウンロード ソースコードをダウンロードしてカスタマイズしても、 CLIのdiffやupdateを行うことで、ソースコードを簡単に更新する ことができます。もし、あなたの修正と競合しても Gitの競合の提示方法と同じ ように表示され、簡単に解決することが できます。
11. コンポーネント - 名前空間インポート 名前空間を使用してコンポーネントをインポートすることができるようになりました。 従来のコンポーネントを個別にインポートすることは、引き続き可能です。 但し、名前空間の兼ね合いで名前が変更されたコンポーネントがあります。 例えば、Accordionの場合は、AccordionRootに変更されています。
12. コンポーネント - createComponent createComponentを使用すると、バリアントなど条件付きスタイル をサポートするコンポーネントを作成することがで きます。createSlotComponentを使用すると、スロット付きコンポーネントを簡単に作成できます。 • BEMの命名規則に準拠した classNameを自動で生成する。 • 柔軟な記述方法ができる。 • 条件付きスタイルの条件は、 OR・AND・正規表現が選択でき、柔軟にマッチさせることができる。 • 条件付きスタイルで使用する propsは、スタイルを計算した後、 自動的に除外される。 • propsを多段階計算する。 • propsは、mergePropsを使用して、消失を防ぎながらマージ される。 • コンテキストを生成するので、コンテキスト内の同コンポーネントに propsを一括設定できる。
13. defineComponentStyleでスタイルを定義し、 createComponentから提供されるメソッドでコンポーネントを作成しま す。 コンポーネント - createComponent
14. BEMの命名規則に準拠した classNameを自動で生成する。 コンポーネント - createComponent
15. コンポーネントは柔軟な記述ができます。 コンポーネント - createComponent 条件付きスタイルのみ使用し、ロジックを持たないコンポーネントは、 HTMLの要素を指定するだけです。 従来のような関数コンポーネントも定義できます。
16. 条件付きスタイルの条件は、 OR・AND・正規表現が選択でき、柔軟にマッチさせることができる。 コンポーネント - createComponent 配列にすることでORになります。 正規表現を使用できます。
17. propsを多段階計算する。 コンポーネント - createComponent 第一引数は、初期値の propsです。提供されるpropsによって上書きされるか、 マージされます。 今回のケースは、aria-labelは上書きされ、onClickの処理はマージされます。 第二引数以降は、オブジェクトまたは関数を設定されることで 多段階計算またはマージされます。 今回のケースの場合、 orientationはdata-orientationに変換され、DOMの要素にセットされません。
18. コンポーネント - createComponent 提供されたPropsContextを使用すると、子要素にあるコンポーネントの propsを一括で設定することができます。 上記の例では、BadgePropsContextの子要素にあるBadgeは、すべてvariantが”outline”になります。
19. コンポーネント - mergeProps mergePropsを使用すると、propsの消失を防ぎながらマージ を簡単に行うことができます。従来は、提供される props を配慮しながらコンポーネントを作成する必要がありました。 mergePropsを使用すると、提供される propsを配慮する ことなく、コンポーネントの作成に集中することができます。 Before After
20. コンポーネント - ポリモーフィズム 従来のasに加えて、asChildを追加しました。asは、コンポーネント自体の要素を変更するに対して、 asChildは、コン ポーネントの機能やスタイルを子要素に組み込む ために使用します。 as asChild
21. Style Props - CSSカスタムプロパティ・値関数 Style Propsで簡単にCSSカスタムプロパティを設定できるようになりました。 また、テーマのトークンを参照することができます。 Style Propsの値でCSS値関数を使用する場合に、各関数が対応するテーマの トークンを参照することができるように なりました。
22. Style Props - インターポレーション Style Propsの値で簡単にCSSカスタムプロパティを参照することができるようになりました。 また、テーマのトークンを参照することができます。これは、テーマのトークンと紐づいていないプロパティに、別の テーマのトークンを設定するのに便利です。 borderなどの一括指定プロパティ で使用すると便利です。
23. Style Props - アットルール Style Propsにアットルールが追加されました。 コンテナクエリもサポートしています。
24. Style Props - アニメーション 以前のアニメーションは、 useAnimationを使用していました。これからは、 Style Propsから直接設定することができる ようになりました。 After Before
25. アクセシビリティ - 国際化 アクセシビリティを向上させるため、すべてのコンポーネントで組み込まれている文字列から日付・数値のフォーマット まで、30以上の言語をサポートしました。 日本語（日本） 英語（イギリス） 英語（米国） アラビア語（アラブ首長国連邦） ブルガリア語（ブルガリア） クロアチア語（クロアチア） チェコ語（チェコ共和国） デンマーク語（デンマーク） オランダ語（オランダ） エストニア語（エストニア） フィンランド語（フィンランド） フランス語（カナダ） フランス語（フランス） ドイツ語（ドイツ） ギリシャ語（ギリシャ） ヘブライ語（イスラエル） ハンガリー語（ハンガリー） イタリア語（イタリア） ラトビア語（ラトビア） リトアニア語（リトアニア） ノルウェー語（ノルウェー） ポーランド語（ポーランド） ポルトガル語（ブラジル） ルーマニア語（ルーマニア） ロシア語（ロシア） セルビア語（セルビア） スロバキア語（スロバキア） スロベニア語（スロベニア） スペイン語（スペイン） スウェーデン語（スウェーデン） トルコ語（トルコ） ウクライナ語（ウクライナ） 中国語（簡体字） 中国語（繁体字） 韓国語（韓国） これらの言語は、I18nProviderの言語データから簡単に更新することができ、新しい言語データを追加することも可 能です。また、バンドルサイズは言語データを削除すれば最適化できます。
26. ありがとうございました X @hirotomoyamada https://x.com/hirotomoyamada GitHub リポジトリ https://github.com/yamada-ui/yamada-ui ドキュメントサイト https://yamada-ui.com