feat: 月選択UI (MonthPicker) を追加したい

[zoshigayan]

関連URL

• 🍐

概要

• 任意の月 (年月) を選択するUIを追加したいです
• input[type=month] をラップしたものです

変更内容

• MonthPicker を追加しました
• 実装がほぼ TimePicker と同じになるので、同一ディレクトリにまとめて型定義やスタイルを共通化しています

確認方法

• storybookの確認のみでOKだと思います

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5030

commit: 3ef0f2c

[Qs-F]

ありがとうございます〜！挙動は良さそうでした！
少し気になったところを書いておきます！

• Pickerだと少し広い名前に感じてしまいました。DateTimePicker とかでまとめてもいいかも
• DatePickerもPickerに移動させてもいいかもと思いました！
  • 既にSlackで出てた結論でした！上記2つは無視で大丈夫です
• input[type=month] がSafariやFirefoxで対応していないようでただのテキストになってしまう雰囲気を感じたのですが、それは問題なさそうですか？

[Qs-F]

@uknmr 新規コンポーネント追加するときって新しいStorybookの形式にしてもらったほうがいいですかね？(とはいえドキュメントが充実しているわけではない気もするので若干やってもらう心苦しさはありつつ…)

[s-sasaki-0529]

あとこれも全然運用プロセスに乗せてないんですが、RSCに対応してるかどうかの定義追加もお願いしたいです。
コード見る限りはRSCでいけそうなので、以下に追加してテストが通ればOKです！

smarthr-ui/sandbox/next/e2e/rsc.test.ts

Lines 3 to 32 in b211123

	/**
	* サーバーコンポーネントとして利用できるコンポーネント一覧(アルファベット順)
	*/
	const SERVER_COMPONENTS = [
	'AnchorButton',
	'AppNaviAnchor',
	'AppNaviButton',
	'AppNaviCustomTag',
	'Badge',
	'Balloon',
	'Chip',
	'HeaderLink',
	'Icon',
	'Loader',
	'RangeSeparator',
	'ResponseMessage',
	'SmartHRLogo',
	'SpreadsheetTable',
	'SpreadsheetTableCorner',
	'StatusLabel',
	'Table',
	'Td',
	'Text',
	'TextLink',
	'Th',
	'TimePicker',
	'UnstyledButton',
	'UpwardLink',
	'VisuallyHiddenText',
	]

[zoshigayan]

@Qs-F #5030 (review)

input[type=month] がSafariやFirefoxで対応していないようでただのテキストになってしまう雰囲気を感じたのですが、それは問題なさそうですか？

あーすみません、ここ確認できてませんでした…！
いちおう SmartHRの動作環境 としているブラウザ (Chrome / Edge / iOS Safari / Android Chrome) が対応していそうなので社内プロダクトとしての利用に限って見れば大丈夫だと思います 💭
SmartHR UIの対応環境って特に明記されていないと思うので、上記で大丈夫なのかどうか…については皆さんにご意見いただきたいです 🙏

[s-sasaki-0529]

見ました！RSC検証の対応もありがとうございます！

個人的にはですが

• Storybook のリライト作業はチームミッションとしての取り組みなので、少なくとも期中はコアチームでやりきるで良さそう
• ブラウザサポートも SmartHR の範囲内では扱えてるし、Firefox などでもただのテキストボックスになるだけで辛うじて使えないこともないので良さそう

なお気持ちです。