feat(SideNav): Composition できるように修正

[masa0527]

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1143

概要

SideNavのstoryの見直しをしました。

変更内容

確認方法

Chromaticで確認

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5157

commit: 5bc5ca6

[uknmr]

諸々コメントしましたが、items を deprecated し、SideNav と SideNavItem という composition で使う状態にしてから Story を書いたほうが良さそうに思いました（書き直しになってしまいそう）。

[masa0527]

@uknmr
composition に対応してみました！

[uknmr]

imo: Composition pattern の場合、SideNavItemButton に onClick を個別で渡せるので、onClick や id の仕組みを見直しても良さそうです。

[masa0527]

idについていい仕組みを思いつかなかったんですが
SideNavの onClickも持たせつつだとcontextとか使うイメージですかね？

export const SideNavItemButton: FC<Props & ElementProps> = ({
  id,
  onClick,
  isSelected = false,
  children,
}) => {
  const context = useContext(SideNavContext)

  const handleClick = onClick ?? context?.onClick
    ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
        (onClick ?? context?.onClick)?.(e, id)
    : undefined

[uknmr]

AppNavi や SideMenu と同じような扱いで、管理はプロダクト側でやるでも良いのではと思いました!

[masa0527]

propsにonClickがある場合はそちらを優先するようにしてみました
18492f4

[uknmr]

SideNavItemButton という名前を持っているのに li なのが気になる（上述の SideNav の方で組み立てれば解決しそう）

[uknmr]

漏れ

Suggested change

	export const OnClick: StoryObj<typeof SideNav> = {
	args: {
	export const OnClick: StoryObj<typeof SideNav> = {
	name: 'onClick',
	args: {

[uknmr]

ElementProps で型として定義されたので、Props からは消し & Story からも消しでよさそう。

Suggested change

	export const ClassName = {
	args: {
	className: 'shr-bg-white',
	},
	}

[masa0527]

classname消しました！

[uknmr]

効いてなさそう（消してもよさそう

[uknmr]

imo: items より SideNavItemButton の Story に見えるので、items={_items} とする Story でもよさそうです。
（default の render で items ?? _items.map((item) => <SIdeNavItemButton />) とするイメージ

[masa0527]

修正しました！

[uknmr]

この Story 以外で items の「Set object」を押すとエラーがでてしまうので、default に記述したい。

[masa0527]

defaultではitemのControlはfalseにして
itemsのstoryのみobjectとしました

objectいじるとエラーにはなるけど他もそうなので 🤔

[uknmr]

q: li で怒られる?

[masa0527]

<ul>をrenderに追加して対応

[uknmr]

hover と focusVisible が同時に発火してしまっているので分けたいです。
AppNavi などを見ると 1Story の中で分けるイメージがつかめるかも。 https://github.com/kufu/smarthr-ui/blob/master/packages/smarthr-ui/src/components/AppNavi/stories/VRTAppNavi.stories.tsx#L18