コンポーネント
SmartHRのUIコンポーネント「SmartHR UI」は、オープンソースとして開発しています。
Data Display（データ表示）
Dialog（ダイアログ）
Forms（フォーム）
Layouts（レイアウト）
Media（メディア）
Navigation（ナビゲーション）
Page Templates（ページテンプレート）
States（状態）
Text（テキスト）
Hooks
SmartHR UIが大切にしていること
SmartHR UIの開発における価値観や行動指針を以下のように定めています。これらはただ大切にしているだけでなく、開発コミュニケーションやタスクの優先順位づけなどにおける判断基準としても使っています。
使い勝手を損なわないこと
UIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要です。
ユーザーエージェントの振る舞いからかけ離れないようにすることやアクセシビリティに取り組むことも使い勝手に関わります。もちろんプログレッシブエンハンスメントな考え方も大切にしています。
またコンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはいけません。
開発者の生産性を損なわないこと
私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしています。その状態に早く到達するためにも、質の良いプロダクトを早く開発し早くリリースする必要があります。
SmartHR UIはそんな開発を支えるためのプロダクトとして、質が高く、使いやすいコンポーネントを、早く、提供し続けます。コンポーネントの先にあるプロダクトの開発サイクルを妨げないためにSmartHR UI自体の開発サイクルも素早く行なっていきます。
複数プロダクトに組み込まれて使われる“プロダクト”だから、良くも悪くもその影響は大きく、単一のプロダクトだけでなく幅広い視野で捉えることも必要です。各プロダクトの意見をまとめてコンポーネントとして展開することで、SmartHR製品全体の質を高める触媒として機能します。
オープンソースであること
SmartHRのプラットフォーム化構想に向けて、サードパーティの開発者がSmartHR APIとSmartHR UIを利用して開発できる状態を目指してオープンソースとしています。
また私たちはウェブが開かれていたから今の自分たちがあると考えているため、日々の仕事で得た知見を積極的に公開していきます。
SmartHRのために作られたコンポーネントではあるものの、社会の価値に繋がるのであれば競合を含めた他社のtoB SaaSプロダクトで使われることも望んでいます。
コンポーネントの作り方
（WIP）
リソース
SmartHR UIのGitHubリポジトリ
https://github.com/kufu/smarthr-ui
Storybookでカタログを確認できます。
https://story.smarthr-ui.dev/
Figma Communityでも、SmartHR UIを公開しています。
https://www.figma.com/community/file/978607227374353992