From 0a9d34fec136d588aa4c83137a2b9a61407f11b9 Mon Sep 17 00:00:00 2001 From: Baek EunSeo Date: Thu, 2 May 2024 13:58:47 +0900 Subject: [PATCH] feat: Make a common Header component (#1078) [CLNP-2869](https://sendbird.atlassian.net/browse/CLNP-2869) ### ChangeLog & Features * Made a common ui Header component & Applied it to the every module header components --- rollup.module-exports.mjs | 1 + .../ChannelSettingsHeader.tsx | 48 ++-- .../channel-settings-ui.scss | 7 +- .../GroupChannelHeaderView.tsx | 122 ++++----- .../components/GroupChannelHeader/index.tsx | 8 +- .../GroupChannelListHeader/index.scss | 6 +- .../GroupChannelListHeader/index.tsx | 98 +++---- src/modules/MessageSearch/index.scss | 26 +- src/modules/MessageSearch/index.tsx | 109 ++++---- .../Thread/components/ThreadHeader/index.scss | 45 --- .../Thread/components/ThreadHeader/index.tsx | 62 ++--- .../Thread/components/ThreadUI/index.scss | 2 +- src/ui/Header/index.scss | 76 ++++++ src/ui/Header/index.tsx | 163 +++++++++++ src/ui/Icon/index.tsx | 4 +- src/ui/TextButton/index.tsx | 2 +- yarn.lock | 258 +++++++++--------- 17 files changed, 585 insertions(+), 452 deletions(-) delete mode 100644 src/modules/Thread/components/ThreadHeader/index.scss create mode 100644 src/ui/Header/index.scss create mode 100644 src/ui/Header/index.tsx diff --git a/rollup.module-exports.mjs b/rollup.module-exports.mjs index 555f276b6..1eb935551 100644 --- a/rollup.module-exports.mjs +++ b/rollup.module-exports.mjs @@ -182,6 +182,7 @@ export default { 'ui/EmojiReactions': 'src/ui/EmojiReactions/index.tsx', 'ui/FileMessageItemBody': 'src/ui/FileMessageItemBody/index.tsx', 'ui/FileViewer': 'src/ui/FileViewer/index.tsx', + 'ui/Header': 'src/ui/Header/index.tsx', 'ui/Icon': 'src/ui/Icon/index.tsx', 'ui/IconButton': 'src/ui/IconButton/index.tsx', 'ui/ImageRenderer': 'src/ui/ImageRenderer/index.tsx', diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx b/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx index ff66b8a00..32cedecfa 100644 --- a/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx +++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/ChannelSettingsHeader.tsx @@ -3,37 +3,41 @@ import React, { MouseEvent } from 'react'; import { useLocalization } from '../../../../lib/LocalizationContext'; import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; -import Label, { LabelColors, LabelTypography } from '../../../../ui/Label'; -import IconButton from '../../../../ui/IconButton'; -import Icon, { IconTypes } from '../../../../ui/Icon'; +import { IconTypes } from '../../../../ui/Icon'; +import Header, { type HeaderCustomProps } from '../../../../ui/Header'; -export interface ChannelSettingsHeaderProps { - onCloseClick?: (e: MouseEvent) => void; +export interface ChannelSettingsHeaderProps extends HeaderCustomProps { + onCloseClick?: (e: MouseEvent) => void; } export const ChannelSettingsHeader = ({ onCloseClick, + // Header custom props + renderLeft, + renderMiddle, + renderRight, }: ChannelSettingsHeaderProps) => { const { stringSet } = useLocalization(); const { config } = useSendbirdStateContext(); const { logger } = config; return ( -
- -
- { - logger.info('ChannelSettings: Click close'); - onCloseClick(e); - }} - > - - -
-
+
( + + ))} + renderRight={renderRight ?? (() => ( +
+ { + logger.info('ChannelSettings: Click close'); + onCloseClick(e); + }} + /> +
+ ))} + /> ); }; diff --git a/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss b/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss index 92bd27205..800069853 100644 --- a/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss +++ b/src/modules/ChannelSettings/components/ChannelSettingsUI/channel-settings-ui.scss @@ -15,9 +15,6 @@ .sendbird-channel-settings__header-icon { cursor: pointer; - position: absolute; - top: 16px; - right: 16px; .sendbird-channel-settings__close-icon { path { @include themed() { @@ -37,7 +34,9 @@ height: 64px; min-height: 64px; position: relative; - padding: 20px 24px; + padding-left: 24px; + // padding-right: 24px; including the Icon's padding-right + padding-right: 20px; box-sizing: border-box; @include themed() { border-bottom: solid 1px t(on-bg-4); diff --git a/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx b/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx index 8c0443af4..e9f2fdba8 100644 --- a/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx +++ b/src/modules/GroupChannel/components/GroupChannelHeader/GroupChannelHeaderView.tsx @@ -2,16 +2,15 @@ import './index.scss'; import React from 'react'; import type { GroupChannel } from '@sendbird/chat/groupChannel'; -import IconButton from '../../../../ui/IconButton'; -import Icon, { IconColors, IconTypes } from '../../../../ui/Icon'; -import Label, { LabelColors, LabelTypography } from '../../../../ui/Label'; +import { IconColors, IconTypes } from '../../../../ui/Icon'; import ChannelAvatar from '../../../../ui/ChannelAvatar'; import { getChannelTitle } from './utils'; import { useMediaQueryContext } from '../../../../lib/MediaQueryContext'; import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; import { useLocalization } from '../../../../lib/LocalizationContext'; +import Header, { type HeaderCustomProps } from '../../../../ui/Header'; -export interface GroupChannelHeaderViewProps { +export interface GroupChannelHeaderViewProps extends HeaderCustomProps { className?: string; currentChannel: GroupChannel; showSearchIcon?: boolean; @@ -27,6 +26,10 @@ export const GroupChannelHeaderView = ({ onBackClick, onSearchClick, onChatHeaderActionClick, + // Header custom props + renderLeft, + renderMiddle, + renderRight, }: GroupChannelHeaderViewProps) => { const { config } = useSendbirdStateContext(); const { userId, theme } = config; @@ -35,90 +38,65 @@ export const GroupChannelHeaderView = ({ const { stringSet } = useLocalization(); const isMuted = currentChannel?.myMutedState === 'muted'; - const subTitle = (currentChannel?.members - && currentChannel?.members?.length !== 2); + const channelTitle = getChannelTitle(currentChannel, userId, stringSet); return ( -
-
- { - isMobile && ( - ( + <> + {isMobile && ( + - ) - } - - - -
-
- { - isMuted && ( - + + ))} + renderMiddle={renderMiddle ?? (() => ( + + ))} + renderRight={renderRight ?? (() => ( + <> + {isMuted && ( + - ) - } - { - (showSearchIcon && !currentChannel?.isEphemeral) && ( - - - - ) - } - - } + /> + )} + } /> - -
-
+ + ))} + /> ); }; diff --git a/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx b/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx index b01112e73..045b9bb43 100644 --- a/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx +++ b/src/modules/GroupChannel/components/GroupChannelHeader/index.tsx @@ -1,18 +1,20 @@ import React from 'react'; + +import type { HeaderCustomProps } from '../../../../ui/Header'; import GroupChannelHeaderView from './GroupChannelHeaderView'; import { useGroupChannelContext } from '../../context/GroupChannelProvider'; -export interface GroupChannelHeaderProps { +export interface GroupChannelHeaderProps extends HeaderCustomProps { className?: string; } -export const GroupChannelHeader = ({ className }: GroupChannelHeaderProps) => { +export const GroupChannelHeader = (props: GroupChannelHeaderProps) => { const context = useGroupChannelContext(); return ( ); diff --git a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss index ed9c12000..81927f95f 100644 --- a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss +++ b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.scss @@ -12,7 +12,10 @@ height: 64px; min-height: 64px; width: 320px; - padding: 8px 64px 8px 8px; + + padding-left: 8px; + padding-right: 16px; + box-sizing: border-box; @include themed() { border-bottom: 1px solid t(on-bg-4); @@ -31,7 +34,6 @@ .sendbird-channel-header__title { display: flex; flex-direction: row; - width: 260px; height: 48px; border-radius: 4px; diff --git a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx index a48cf280b..c0e64dce0 100644 --- a/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx +++ b/src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx @@ -5,8 +5,10 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext'; import { useLocalization } from '../../../../lib/LocalizationContext'; import Avatar from '../../../../ui/Avatar'; import Label, { LabelColors, LabelTypography } from '../../../../ui/Label'; +import Header, { HeaderCustomProps } from '../../../../ui/Header'; -export interface GroupChannelListHeaderProps { +export interface GroupChannelListHeaderProps extends HeaderCustomProps { + /** @deprecated Use the props `renderMiddle` instead */ renderTitle?: () => React.ReactElement; renderIconButton?: (props: void) => React.ReactElement; onEdit?: (props: void) => void; @@ -18,61 +20,63 @@ export const GroupChannelListHeader = ({ renderIconButton, onEdit, allowProfileEdit, + // Header custom props + renderLeft, + renderMiddle, + renderRight, }: GroupChannelListHeaderProps) => { const { stores } = useSendbirdStateContext(); const { user } = stores.userStore; const { stringSet } = useLocalization(); + const renderProfile = renderMiddle ?? renderTitle; return ( -
- {renderTitle?.() || ( -
{ - onEdit?.(); - }} - onKeyDown={() => { - onEdit?.(); - }} - tabIndex={0} - > -
- +
( + renderProfile?.() ?? ( +
{ + onEdit?.(); + }} + onKeyDown={() => { + onEdit?.(); + }} + tabIndex={0} + > +
+ +
+
+ + +
-
- - -
-
+ ) )} -
- {renderIconButton?.()} -
-
+ renderRight={renderRight ?? renderIconButton} + /> ); }; diff --git a/src/modules/MessageSearch/index.scss b/src/modules/MessageSearch/index.scss index 5934ef3ad..129c90ba3 100644 --- a/src/modules/MessageSearch/index.scss +++ b/src/modules/MessageSearch/index.scss @@ -31,30 +31,8 @@ } .sendbird-message-search-pannel__header { - position: relative; - display: flex; - width: 100%; - height: 64px; - min-height: 64px; - box-sizing: border-box; - @include themed() { - border-bottom: 1px solid t(on-bg-4); - } - - .sendbird-message-search-pannel__header__title { - position: absolute; - top: 20px; - left: 24px; - width: calc(100% - 74px); - overflow-x: hidden; - word-break: keep-all; - text-overflow: ellipsis; - } - - .sendbird-message-search-pannel__header__close-button { - position: absolute; - top: 16px; - right: 16px; + .sendbird-ui-header__middle__title { + margin-left: 4px; } } diff --git a/src/modules/MessageSearch/index.tsx b/src/modules/MessageSearch/index.tsx index 7b6787462..b755d71a9 100644 --- a/src/modules/MessageSearch/index.tsx +++ b/src/modules/MessageSearch/index.tsx @@ -4,10 +4,9 @@ import './index.scss'; import MessageSearch, { MessageSearchUIProps } from './components/MessageSearchUI'; import { LocalizationContext } from '../../lib/LocalizationContext'; import Icon, { IconTypes, IconColors } from '../../ui/Icon'; -import IconButton from '../../ui/IconButton'; -import Label, { LabelTypography, LabelColors } from '../../ui/Label'; import Loader from '../../ui/Loader'; import { MessageSearchProvider, MessageSearchProviderProps } from './context/MessageSearchProvider'; +import Header from '../../ui/Header'; export interface MessageSearchPannelProps extends MessageSearchUIProps, MessageSearchProviderProps { @@ -63,71 +62,63 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element { return (
-
- - - ( + + )} + renderRight={() => ( + - -
+ )} + />
- - - { - inputString && loading && ( - - - - ) - } - { - !loading && inputString && ( + + + { + inputString && loading && ( + - ) - } + + ) + } + { + !loading && inputString && ( + + ) + }
diff --git a/src/modules/Thread/components/ThreadHeader/index.scss b/src/modules/Thread/components/ThreadHeader/index.scss deleted file mode 100644 index 485f06f17..000000000 --- a/src/modules/Thread/components/ThreadHeader/index.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import '../../../../styles/variables'; - -.sendbird-thread-header { - position: relative; - min-width: 320px; - width: 320px; - min-height: 64px; - height: 64px; - - display: inline; - padding: 13px 24px; - box-sizing: border-box; -} - -.sendbird-thread-header__title { - position: relative; - max-width: 254px; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.sendbird-thread-header__channel-name { - position: relative; - max-width: 254px; - height: 12px; - - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.sendbird-thread-header__action { - position: absolute; - top: 0px; - right: 0px; - width: 56px; - height: 100%; - - display: inline-flex; - align-items: center; - justify-content: center; -} diff --git a/src/modules/Thread/components/ThreadHeader/index.tsx b/src/modules/Thread/components/ThreadHeader/index.tsx index a830bafdc..24233d946 100644 --- a/src/modules/Thread/components/ThreadHeader/index.tsx +++ b/src/modules/Thread/components/ThreadHeader/index.tsx @@ -1,15 +1,12 @@ import React, { useMemo } from 'react'; +import type { MouseEvent, KeyboardEvent, TouchEvent } from 'react'; -import './index.scss'; - -import IconButton from '../../../../ui/IconButton'; -import Icon, { IconTypes, IconColors } from '../../../../ui/Icon'; -import Label, { LabelTypography, LabelColors } from '../../../../ui/Label'; -import TextButton from '../../../../ui/TextButton'; +import { IconTypes, IconColors } from '../../../../ui/Icon'; import { useLocalization } from '../../../../lib/LocalizationContext'; +import Header from '../../../../ui/Header'; -type EventType = React.MouseEvent | React.KeyboardEvent; +type EventType = MouseEvent | KeyboardEvent | TouchEvent; export interface ThreadHeaderProps { className?: string; @@ -34,45 +31,28 @@ export default function ThreadHeader({ } return null; }, [renderActionIcon]); + return ( -
- - onChannelNameClick?.(e)} - disableUnderline - > - - - { +
( + + )} + renderRight={() => ( MemoizedActionIcon || (
- onActionIconClick(e)} - > - - + type={IconTypes.CLOSE} + color={IconColors.ON_BACKGROUND_1} + />
) - } -
+ )} + /> ); } diff --git a/src/modules/Thread/components/ThreadUI/index.scss b/src/modules/Thread/components/ThreadUI/index.scss index 1eedbe3b9..334d69bdb 100644 --- a/src/modules/Thread/components/ThreadUI/index.scss +++ b/src/modules/Thread/components/ThreadUI/index.scss @@ -17,7 +17,7 @@ } .sendbird-thread-ui__header { - width: 100%; + width: 320px; @include themed() { border-top: 1px solid t(on-bg-4); } diff --git a/src/ui/Header/index.scss b/src/ui/Header/index.scss new file mode 100644 index 000000000..8c7182f62 --- /dev/null +++ b/src/ui/Header/index.scss @@ -0,0 +1,76 @@ +@import '../../styles/variables'; + +.sendbird-ui-header { + position: relative; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + height: 64px; + min-height: 64px; + + padding-left: 16px; + padding-right: 16px; + + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + + @include themed() { + border-bottom: 1px solid t(on-bg-4); + background-color: t(bg-0); + } +} + +.sendbird-ui-header--is-desktop { + max-width: 176px; +} +.sendbird-ui-header--is-mobile { + max-width: 80px; +} + +.sendbird-ui-header__left { + position: relative; + left: 0px; + + flex: 0 0 auto; + display: inline-flex; + align-items: center; + + margin-right: 8px; +} + +.sendbird-ui-header__middle { + flex: 1; + display: inline-flex; + flex-direction: column; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.sendbird-ui-header__middle__subtitle__container { + display: flex; + width: 100%; +} +.sendbird-ui-header__middle__title, +.sendbird-ui-header__middle__subtitle { + overflow: hidden; + text-wrap: nowrap; + text-overflow: ellipsis; + width: 100%; +} + +.sendbird-ui-header__right { + position: relative; + right: 0px; + + flex: 0 0 auto; + display: inline-flex; + align-items: center; + + margin-left: 8px; +} diff --git a/src/ui/Header/index.tsx b/src/ui/Header/index.tsx new file mode 100644 index 000000000..8681d5459 --- /dev/null +++ b/src/ui/Header/index.tsx @@ -0,0 +1,163 @@ +import React from 'react'; +import type { MouseEvent, KeyboardEvent, TouchEvent, ReactNode, ReactElement } from 'react'; +import './index.scss'; + +import Label, { LabelColors, LabelTypography } from '../Label'; +import { useMediaQueryContext } from '../../lib/MediaQueryContext'; +import TextButton from '../TextButton'; +import UIIcon from '../Icon'; +import type { Types as IconTypes } from '../Icon/type'; +import type { Colors as IconColors } from '../Icon/colors'; +import UIIconButton from '../IconButton'; +import { noop } from '../../utils/utils'; + +export interface HeaderCustomProps { + renderLeft?: () => ReactNode; + renderRight?: () => ReactNode; + renderMiddle?: () => ReactNode; +} +export interface HeaderProps extends HeaderCustomProps { + className?: string; +} + +export const Header = ({ + className, + renderLeft, + renderRight, + renderMiddle, +}: HeaderProps) => { + let isMobile = false; + try { + isMobile = useMediaQueryContext?.()?.isMobile; + } catch (err) { + // TODO: handle it + } + + return ( +
+ { + renderLeft ? ( +
+ {renderLeft?.()} +
+ ) : null + } +
+ {renderMiddle?.()} +
+ { + renderRight ? ( +
+ {renderRight?.()} +
+ ) : null + } +
+ ); +}; + +export interface HeaderTitleProps { + title?: string; + subtitle?: string; + onClickSubtitle?: (e: MouseEvent | TouchEvent | KeyboardEvent) => void; +} +export const Title = ({ + title, + subtitle, + onClickSubtitle, +}: HeaderTitleProps) => { + return ( +
+ {title && ( + + )} + {subtitle && ( + onClickSubtitle ? ( + + + + ) : ( + + ) + )} +
+ ); +}; + +export interface HeaderIconButtonProps { + className?: string; + onClick?: (e: MouseEvent) => void; + type: IconTypes; + color?: IconColors; + width?: string; + height?: string; + renderIcon?: (props: HeaderIconProps) => ReactElement; +} +export const IconButton = ({ + className, + onClick, + type, + color, + width = '32px', + height = '32px', + renderIcon = (props) => , +}: HeaderIconButtonProps) => ( + + {renderIcon({ type, color })} + +); + +export interface HeaderIconProps { + className?: string; + type: IconTypes; + color?: IconColors; + width?: string; + height?: string; + onClick?: (e: MouseEvent) => void; +} +export const Icon = ({ + className, + type, + color, + width = '22px', + height = '22px', + onClick = noop, +}: HeaderIconProps) => ( + onClick?.(e)} + /> +); + +export default Object.assign(Header, { Title, IconButton, Icon }); diff --git a/src/ui/Icon/index.tsx b/src/ui/Icon/index.tsx index fbf5e3fdd..80903068c 100644 --- a/src/ui/Icon/index.tsx +++ b/src/ui/Icon/index.tsx @@ -137,7 +137,7 @@ function changeTypeToIconComponent(type: Types) { } } -type IconProps = { +export interface IconProps { className?: string | string[]; /** Type: Use strings from below list */ type: Types; @@ -147,7 +147,7 @@ type IconProps = { height?: string | number; onClick?: React.MouseEventHandler & React.KeyboardEventHandler; children?: React.ReactNode; -}; +} export default function Icon({ className = '', type, diff --git a/src/ui/TextButton/index.tsx b/src/ui/TextButton/index.tsx index db3b9b3ff..add43a81c 100644 --- a/src/ui/TextButton/index.tsx +++ b/src/ui/TextButton/index.tsx @@ -12,7 +12,7 @@ export interface TextButtonProps { color?: Colors; disabled?: boolean; disableUnderline?: boolean; - onClick?: (e: (MouseEvent | KeyboardEvent)) => void; + onClick?: (e: (MouseEvent | KeyboardEvent)) => void; children: ReactElement; } diff --git a/yarn.lock b/yarn.lock index 0d1f19cb4..609e5dee5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2356,10 +2356,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.15.3": - version: 1.15.3 - resolution: "@remix-run/router@npm:1.15.3" - checksum: 9e70bd334d99fdf9285f0885c10353d7e25f66369080f551d997e3ce204e1af3a12d6f12b091f94a2dc9a54c80598bbe3c5194b57cbae17b7b40ab815dcd49a0 +"@remix-run/router@npm:1.16.0": + version: 1.16.0 + resolution: "@remix-run/router@npm:1.16.0" + checksum: c8afdf90b19a5a9dfb14425d57de029cadf4bbb51d668885b10df5ea2f82279d7552a9939274b519de0da40550f48e5a6c07e5d4049dbd3838fcaa29819bd641 languageName: node linkType: hard @@ -2511,114 +2511,114 @@ __metadata: languageName: node linkType: hard -"@rollup/rollup-android-arm-eabi@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-android-arm-eabi@npm:4.16.3" +"@rollup/rollup-android-arm-eabi@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.16.4" conditions: os=android & cpu=arm languageName: node linkType: hard -"@rollup/rollup-android-arm64@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-android-arm64@npm:4.16.3" +"@rollup/rollup-android-arm64@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-android-arm64@npm:4.16.4" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-arm64@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-darwin-arm64@npm:4.16.3" +"@rollup/rollup-darwin-arm64@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-darwin-arm64@npm:4.16.4" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-x64@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-darwin-x64@npm:4.16.3" +"@rollup/rollup-darwin-x64@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-darwin-x64@npm:4.16.4" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rollup/rollup-linux-arm-gnueabihf@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.16.3" +"@rollup/rollup-linux-arm-gnueabihf@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.16.4" conditions: os=linux & cpu=arm & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm-musleabihf@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.16.3" +"@rollup/rollup-linux-arm-musleabihf@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.16.4" conditions: os=linux & cpu=arm & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-arm64-gnu@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.16.3" +"@rollup/rollup-linux-arm64-gnu@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.16.4" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm64-musl@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-arm64-musl@npm:4.16.3" +"@rollup/rollup-linux-arm64-musl@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.16.4" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-powerpc64le-gnu@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.16.3" +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.16.4" conditions: os=linux & cpu=ppc64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-riscv64-gnu@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.16.3" +"@rollup/rollup-linux-riscv64-gnu@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.16.4" conditions: os=linux & cpu=riscv64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-s390x-gnu@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.16.3" +"@rollup/rollup-linux-s390x-gnu@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.16.4" conditions: os=linux & cpu=s390x & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-gnu@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-x64-gnu@npm:4.16.3" +"@rollup/rollup-linux-x64-gnu@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.16.4" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-musl@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-linux-x64-musl@npm:4.16.3" +"@rollup/rollup-linux-x64-musl@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.16.4" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-win32-arm64-msvc@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.16.3" +"@rollup/rollup-win32-arm64-msvc@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.16.4" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-win32-ia32-msvc@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.16.3" +"@rollup/rollup-win32-ia32-msvc@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.16.4" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rollup/rollup-win32-x64-msvc@npm:4.16.3": - version: 4.16.3 - resolution: "@rollup/rollup-win32-x64-msvc@npm:4.16.3" +"@rollup/rollup-win32-x64-msvc@npm:4.16.4": + version: 4.16.4 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.16.4" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -3235,11 +3235,11 @@ __metadata: linkType: hard "@storybook/csf@npm:^0.1.4": - version: 0.1.4 - resolution: "@storybook/csf@npm:0.1.4" + version: 0.1.5 + resolution: "@storybook/csf@npm:0.1.5" dependencies: type-fest: ^2.19.0 - checksum: d41bd50eca6570a6c7815c5d8a948bab853167c963723a64ec8313bbc108493760f52ca53deaee5ae347c0586b44544e8d8b2ce0950cd668ddd5a66c887e1d87 + checksum: 8504e8b89936a62f9b5710122070a9317d998a4dc06ad5e75bdc5e7d804cf2135e95e4660e3d15696637587f8094066cf6c82ce1e71e5ecda63eea7090ba9604 languageName: node linkType: hard @@ -4136,21 +4136,21 @@ __metadata: linkType: hard "@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.22": - version: 18.2.25 - resolution: "@types/react-dom@npm:18.2.25" + version: 18.3.0 + resolution: "@types/react-dom@npm:18.3.0" dependencies: "@types/react": "*" - checksum: 85f9278d6456c6cdc76da6806a33b472588cdd029b08dde32e8b5636b25a3eae529b4ac2e08c848a3d7ca44e4e97ee9a3df406c96fa0768de935c8eed6e07590 + checksum: a0cd9b1b815a6abd2a367a9eabdd8df8dd8f13f95897b2f9e1359ea3ac6619f957c1432ece004af7d95e2a7caddbba19faa045f831f32d6263483fc5404a7596 languageName: node linkType: hard "@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.2.66": - version: 18.2.79 - resolution: "@types/react@npm:18.2.79" + version: 18.3.0 + resolution: "@types/react@npm:18.3.0" dependencies: "@types/prop-types": "*" csstype: ^3.0.2 - checksum: 85aa96e0e88725c84d8fc5f04f10a4da6a1f507dde33557ac9cc211414756867721264bfefd9e02bae1288ce2905351d949b652b931e734ea24519ee5c625138 + checksum: 6addfffcf6220157217fd1487d831b41e725e170887a83bd4379e00b67c553dbb7b283c5f4555102f56536539f1f712635d27e27f377d17c2c0f171b66bc2f2d languageName: node linkType: hard @@ -6967,9 +6967,9 @@ __metadata: linkType: hard "electron-to-chromium@npm:^1.4.668": - version: 1.4.746 - resolution: "electron-to-chromium@npm:1.4.746" - checksum: 1fa8fad55ddf94ac8d7aa53b451ced4eec08cee0b765fe37fd70d2c560e4c4eff8bbd0ccf64bc6aa069484243c14ddda512974f770206a0b5e858b66cdd16768 + version: 1.4.749 + resolution: "electron-to-chromium@npm:1.4.749" + checksum: 30bffd43cf198c3b71afa0696da6ce37b31dad789419580d90cd086bb935b4894c6aa153a1dd37d8d379c845a1a8b3abe6aba89e0dc71082d0f032fb7351a045 languageName: node linkType: hard @@ -7072,7 +7072,7 @@ __metadata: languageName: node linkType: hard -"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.1, es-abstract@npm:^1.23.2": +"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3": version: 1.23.3 resolution: "es-abstract@npm:1.23.3" dependencies: @@ -7160,12 +7160,12 @@ __metadata: linkType: hard "es-iterator-helpers@npm:^1.0.15, es-iterator-helpers@npm:^1.0.17": - version: 1.0.18 - resolution: "es-iterator-helpers@npm:1.0.18" + version: 1.0.19 + resolution: "es-iterator-helpers@npm:1.0.19" dependencies: call-bind: ^1.0.7 define-properties: ^1.2.1 - es-abstract: ^1.23.0 + es-abstract: ^1.23.3 es-errors: ^1.3.0 es-set-tostringtag: ^2.0.3 function-bind: ^1.1.2 @@ -7177,7 +7177,7 @@ __metadata: internal-slot: ^1.0.7 iterator.prototype: ^1.1.2 safe-array-concat: ^1.1.2 - checksum: 1594324ff3ca8890fe30c98b2419d3007d2b14b35f9773f188114408ff973e13c526f6045d88209e932f58dc0c55fc9a4ae1554636f8938ed7d926ffc27d3e1a + checksum: 7ae112b88359fbaf4b9d7d1d1358ae57c5138768c57ba3a8fb930393662653b0512bfd7917c15890d1471577fb012fee8b73b4465e59b331739e6ee94f961683 languageName: node linkType: hard @@ -7499,11 +7499,11 @@ __metadata: linkType: hard "eslint-plugin-react-hooks@npm:^4.6.0": - version: 4.6.0 - resolution: "eslint-plugin-react-hooks@npm:4.6.0" + version: 4.6.1 + resolution: "eslint-plugin-react-hooks@npm:4.6.1" peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 - checksum: 23001801f14c1d16bf0a837ca7970d9dd94e7b560384b41db378b49b6e32dc43d6e2790de1bd737a652a86f81a08d6a91f402525061b47719328f586a57e86c3 + checksum: 77f3a53f6dd09968062f79e5f873b6a8b22346860bf5874acb08f36f6dff754f061c99e486f83b4946b89127d423f5498b1326f1f95997264e2b9817afce6272 languageName: node linkType: hard @@ -8163,9 +8163,9 @@ __metadata: linkType: hard "flow-parser@npm:0.*": - version: 0.234.0 - resolution: "flow-parser@npm:0.234.0" - checksum: 6a68d073316dcc689da0eb6114b676c8538bb66cd53f62cb1e1a96bfdddb8377b124e21c8b1a27c80029d412bb37092bede05c507cbfb1fd96e3c9bc79379604 + version: 0.235.1 + resolution: "flow-parser@npm:0.235.1" + checksum: fa890b0b184eb45217ecf6faa620227632e0138fe851e1f5d59672c5bfc4ff8ea5fd0f957982c668e3818a6c495cef9964eb7718d5e166cda37fa0822a196979 languageName: node linkType: hard @@ -10994,9 +10994,9 @@ __metadata: linkType: hard "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0": - version: 10.2.0 - resolution: "lru-cache@npm:10.2.0" - checksum: eee7ddda4a7475deac51ac81d7dd78709095c6fa46e8350dc2d22462559a1faa3b81ed931d5464b13d48cbd7e08b46100b6f768c76833912bc444b99c37e25db + version: 10.2.1 + resolution: "lru-cache@npm:10.2.1" + checksum: ae81586eaeb92389fc9a05790d7efd424a29334daa4e513196d6e138a069d0afad1738cfa67773f05b9cb8666fb076f8af88a1b5cc4c7e569202f18a0c032a35 languageName: node linkType: hard @@ -13312,14 +13312,14 @@ __metadata: linkType: hard "react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.2.0": - version: 18.2.0 - resolution: "react-dom@npm:18.2.0" + version: 18.3.0 + resolution: "react-dom@npm:18.3.0" dependencies: loose-envify: ^1.1.0 - scheduler: ^0.23.0 + scheduler: ^0.23.1 peerDependencies: - react: ^18.2.0 - checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc + react: ^18.3.0 + checksum: 04dc715fdedee89754c9c2cd627cf8bc5914dbb678d053ceecaf6feb11566fc653763781aefd82c240f264c87b1643ab1328ca6565b8b449ce79fbb2912fd1c7 languageName: node linkType: hard @@ -13359,49 +13359,49 @@ __metadata: linkType: hard "react-is@npm:^18.0.0": - version: 18.2.0 - resolution: "react-is@npm:18.2.0" - checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e + version: 18.3.0 + resolution: "react-is@npm:18.3.0" + checksum: 97a920d66547984632965458ca3951b23800e0258cb1b4aaeafc0f40f6f37c5fae00ec27fbb8b03f2b9d53505eb67e7c55d9e2254b42920cedc307230cdd2c5c languageName: node linkType: hard "react-refresh@npm:^0.14.0": - version: 0.14.0 - resolution: "react-refresh@npm:0.14.0" - checksum: dc69fa8c993df512f42dd0f1b604978ae89bd747c0ed5ec595c0cc50d535fb2696619ccd98ae28775cc01d0a7c146a532f0f7fb81dc22e1977c242a4912312f4 + version: 0.14.1 + resolution: "react-refresh@npm:0.14.1" + checksum: 6ec7f04b1e793b70a3522ec67f5e26dda33aac0991d46ba9920d27415f7c4273258710afaf4d916cc3b6bed3a25f80bab542ac1ba0d4f06e2e3a1c84efe0f508 languageName: node linkType: hard "react-router-dom@npm:^6.22.3": - version: 6.22.3 - resolution: "react-router-dom@npm:6.22.3" + version: 6.23.0 + resolution: "react-router-dom@npm:6.23.0" dependencies: - "@remix-run/router": 1.15.3 - react-router: 6.22.3 + "@remix-run/router": 1.16.0 + react-router: 6.23.0 peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 5ae3759a70e4123cd4b8efbb82199a69f5d8c4a7a434d186d2ec7b532b6ef3302df2a98e5c27db977d3f0d725c7a279010a16ae77a3bf6257f1fee96123d8b77 + checksum: 071b4859fa97d501e4de68fdcf46bd7c88138e65149dadd9557559e4acc7ca31d091af24844c7f305625969cc20a1970450a7cde229642c4e654ca14346a982b languageName: node linkType: hard -"react-router@npm:6.22.3": - version: 6.22.3 - resolution: "react-router@npm:6.22.3" +"react-router@npm:6.23.0": + version: 6.23.0 + resolution: "react-router@npm:6.23.0" dependencies: - "@remix-run/router": 1.15.3 + "@remix-run/router": 1.16.0 peerDependencies: react: ">=16.8" - checksum: 1f7d9a5a849761ff69ef8f3d3131b4c1c25d18b76317ba5ad6f0d9421192c0b8b71ab0cc818c57aad7b81ada725559e513307d0ab43296a460262f0358602672 + checksum: 224838bc099637c586eaaf62b9607f6b72577ad760bf2d7a51c316e56eb8697d875e88878ec8e12fe949ef9b866655c74d82f913c6acb501bc8868f25e2b0897 languageName: node linkType: hard "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0": - version: 18.2.0 - resolution: "react@npm:18.2.0" + version: 18.3.0 + resolution: "react@npm:18.3.0" dependencies: loose-envify: ^1.1.0 - checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b + checksum: f1389bf7f9cc9295fded895635e54c4bf73626a8ea51afaa2da4988f89e71b68f249c1782f832d5912ba7d437da9292fc44ecf7c3dff072879253df93d703a10 languageName: node linkType: hard @@ -13950,25 +13950,25 @@ __metadata: linkType: hard "rollup@npm:^4.13.0, rollup@npm:^4.9.2": - version: 4.16.3 - resolution: "rollup@npm:4.16.3" - dependencies: - "@rollup/rollup-android-arm-eabi": 4.16.3 - "@rollup/rollup-android-arm64": 4.16.3 - "@rollup/rollup-darwin-arm64": 4.16.3 - "@rollup/rollup-darwin-x64": 4.16.3 - "@rollup/rollup-linux-arm-gnueabihf": 4.16.3 - "@rollup/rollup-linux-arm-musleabihf": 4.16.3 - "@rollup/rollup-linux-arm64-gnu": 4.16.3 - "@rollup/rollup-linux-arm64-musl": 4.16.3 - "@rollup/rollup-linux-powerpc64le-gnu": 4.16.3 - "@rollup/rollup-linux-riscv64-gnu": 4.16.3 - "@rollup/rollup-linux-s390x-gnu": 4.16.3 - "@rollup/rollup-linux-x64-gnu": 4.16.3 - "@rollup/rollup-linux-x64-musl": 4.16.3 - "@rollup/rollup-win32-arm64-msvc": 4.16.3 - "@rollup/rollup-win32-ia32-msvc": 4.16.3 - "@rollup/rollup-win32-x64-msvc": 4.16.3 + version: 4.16.4 + resolution: "rollup@npm:4.16.4" + dependencies: + "@rollup/rollup-android-arm-eabi": 4.16.4 + "@rollup/rollup-android-arm64": 4.16.4 + "@rollup/rollup-darwin-arm64": 4.16.4 + "@rollup/rollup-darwin-x64": 4.16.4 + "@rollup/rollup-linux-arm-gnueabihf": 4.16.4 + "@rollup/rollup-linux-arm-musleabihf": 4.16.4 + "@rollup/rollup-linux-arm64-gnu": 4.16.4 + "@rollup/rollup-linux-arm64-musl": 4.16.4 + "@rollup/rollup-linux-powerpc64le-gnu": 4.16.4 + "@rollup/rollup-linux-riscv64-gnu": 4.16.4 + "@rollup/rollup-linux-s390x-gnu": 4.16.4 + "@rollup/rollup-linux-x64-gnu": 4.16.4 + "@rollup/rollup-linux-x64-musl": 4.16.4 + "@rollup/rollup-win32-arm64-msvc": 4.16.4 + "@rollup/rollup-win32-ia32-msvc": 4.16.4 + "@rollup/rollup-win32-x64-msvc": 4.16.4 "@types/estree": 1.0.5 fsevents: ~2.3.2 dependenciesMeta: @@ -14008,7 +14008,7 @@ __metadata: optional: true bin: rollup: dist/bin/rollup - checksum: c9f39f94cf6562a698e05f2b3cb28849e66761e2b93807578e3315622058881f212dddc33e9d841e3827e13647edb767832898ef7fb4304d73903a256db62ccf + checksum: fe19998a00401e7c2a41171e7d42af549176c6abfb6b20c4d0f401c973a3c7ad368605a722194bb21fe32775563eac06b53c9d96b24ef3d0ac95f69c5a3b67c8 languageName: node linkType: hard @@ -14119,12 +14119,12 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.23.0": - version: 0.23.0 - resolution: "scheduler@npm:0.23.0" +"scheduler@npm:^0.23.1": + version: 0.23.1 + resolution: "scheduler@npm:0.23.1" dependencies: loose-envify: ^1.1.0 - checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a + checksum: 8a5d140ee7e1f0927b64883544794043ebcaf57fe3f3541040535d1cb841640c389674838d3a25050227c20f8606cdeb1172c83e711523c689d428146ed8efcb languageName: node linkType: hard @@ -15267,9 +15267,9 @@ __metadata: linkType: hard "tocbot@npm:^4.20.1": - version: 4.27.0 - resolution: "tocbot@npm:4.27.0" - checksum: 7d06a989713ebea3d14867f0920f9f0bcef2b42fcfaf75b8ec7af7a0d2520e55599a8e30a8fbef9c7f1a927194b1eb97473ae0f29eb7dc62029fccbf342a5c2e + version: 4.27.13 + resolution: "tocbot@npm:4.27.13" + checksum: 1e0423d8c3e4a7bb8b1983261ff2903c089f2e8392009432ec406c87eb5f461ae08a1d213e4d9e89ab6b91497a62aa1840cdbc34680d60798690ed5f3acc156c languageName: node linkType: hard