diff --git a/apps/meteor/.storybook/decorators.tsx b/apps/meteor/.storybook/decorators.tsx index 822f524e5b7ad..75d24df1195a4 100644 --- a/apps/meteor/.storybook/decorators.tsx +++ b/apps/meteor/.storybook/decorators.tsx @@ -8,33 +8,18 @@ import TranslationContextMock from '../client/stories/contexts/TranslationContex const MockedAppRoot = mockAppRoot().build(); -export const rocketChatDecorator: Decorator = (fn, { parameters }) => { - const linkElement = document.getElementById('theme-styles') || document.createElement('link'); - if (linkElement.id !== 'theme-styles') { - require('../app/theme/client/main.css'); - require('../app/theme/client/rocketchat.font.css'); - linkElement.setAttribute('id', 'theme-styles'); - linkElement.setAttribute('rel', 'stylesheet'); - linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css'); - document.head.appendChild(linkElement); - } - - return ( - - - - - - -
{fn()}
- - - - - - ); -}; +export const RocketChatDecorator: Decorator = (Story, { parameters }) => ( + + + + + +
+ +
+ + + + + +); diff --git a/apps/meteor/.storybook/logo.svg b/apps/meteor/.storybook/logo.svg deleted file mode 100644 index 6ae18fa4b93eb..0000000000000 --- a/apps/meteor/.storybook/logo.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/apps/meteor/.storybook/logo.svg.d.ts b/apps/meteor/.storybook/logo.svg.d.ts deleted file mode 100644 index 623caebae2b66..0000000000000 --- a/apps/meteor/.storybook/logo.svg.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const path: string; -export = path; diff --git a/apps/meteor/.storybook/main.ts b/apps/meteor/.storybook/main.ts index f3e6bb831c797..fb363e6de40b7 100644 --- a/apps/meteor/.storybook/main.ts +++ b/apps/meteor/.storybook/main.ts @@ -1,26 +1,15 @@ import { dirname, join, resolve } from 'path'; -import type { StorybookConfig } from '@storybook/react-webpack5'; +import baseConfig from '@rocket.chat/storybook-config/main'; import webpack from 'webpack'; -export default { - stories: ['../client/**/*.stories.{js,tsx}', '../app/**/*.stories.{js,tsx}', '../ee/app/**/*.stories.{js,tsx}'], - - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@storybook/addon-interactions'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-styling-webpack'), - getAbsolutePath('@storybook/addon-a11y'), - ], - - typescript: { - reactDocgen: 'react-docgen', - }, +export default baseConfig({ + stories: ['../client/**/*.stories.{js,tsx}'], webpackFinal: async (config) => { // Those aliases are needed because dependencies in the monorepo use another // dependencies that are not hoisted on this workspace + const swiperRoot = dirname(require.resolve('swiper/package.json')); config.resolve = { ...config.resolve, alias: { @@ -29,8 +18,16 @@ export default { // 'react/jsx-runtime': require.resolve('../../../node_modules/react/jsx-runtime'), '@tanstack/react-query': require.resolve('../../../node_modules/@tanstack/react-query'), '@rocket.chat/fuselage$': require.resolve('../../../node_modules/@rocket.chat/fuselage'), + // Meteor's bundler ignores the `exports` field, so source code reaches + // into swiper's internals via deep file paths. Webpack honors `exports` + // and rejects them, so map each subpath to the actual file. + 'swiper/swiper-react.mjs$': join(swiperRoot, 'swiper-react.mjs'), + 'swiper/swiper-react$': join(swiperRoot, 'swiper-react.d.ts'), + 'swiper/modules/index.mjs$': join(swiperRoot, 'modules/index.mjs'), + 'swiper/swiper.css$': join(swiperRoot, 'swiper.css'), + 'swiper/modules/zoom.css$': join(swiperRoot, 'modules/zoom.css'), }, - // This is only needed because of Fontello + // This is only needed because of Rocket.Chat's icon font. roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')], }; @@ -54,15 +51,4 @@ export default { return config; }, - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - docs: {}, -} satisfies StorybookConfig; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} +}); diff --git a/apps/meteor/.storybook/preview.ts b/apps/meteor/.storybook/preview.ts index 379c1f4a34647..fdcb2aba28ad6 100644 --- a/apps/meteor/.storybook/preview.ts +++ b/apps/meteor/.storybook/preview.ts @@ -1,22 +1,17 @@ -import type { Decorator, Parameters } from '@storybook/react'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; -import { rocketChatDecorator } from './decorators'; +import { RocketChatDecorator } from './decorators'; -export const decorators: Decorator[] = [rocketChatDecorator]; +import '../app/theme/client/main.css'; +import 'highlight.js/styles/github.css'; -export const parameters: Parameters = { - backgrounds: { - grid: { - cellSize: 4, - cellAmount: 4, - opacity: 0.5, - }, - }, - options: { - storySort: { - method: 'alphabetical', - order: ['Components', '*', 'Enterprise'], - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators, RocketChatDecorator], + tags: ['autodocs'], }; -export const tags = ['autodocs']; + +export default preview; diff --git a/apps/meteor/app/api/server/lib/getServerInfo.ts b/apps/meteor/app/api/server/lib/getServerInfo.ts index 4c65847c86ae6..adaf6ec6998c5 100644 --- a/apps/meteor/app/api/server/lib/getServerInfo.ts +++ b/apps/meteor/app/api/server/lib/getServerInfo.ts @@ -1,4 +1,5 @@ import type { IWorkspaceInfo } from '@rocket.chat/core-typings'; +import { License } from '@rocket.chat/license'; import { getTrimmedServerVersion } from './getTrimmedServerVersion'; import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission'; @@ -15,6 +16,8 @@ export async function getServerInfo(userId?: string): Promise { const cloudWorkspaceId = settings.get('Cloud_Workspace_Id'); return { + workspaceUrl: License.getWorkspaceUrl(), + hashedWorkspaceUrl: License.getHashedWorkspaceUrl(), version: getTrimmedServerVersion(), ...(hasPermissionToViewStatistics && { info: { diff --git a/apps/meteor/client/components/ABAC/ABACUpsellModal/ABACUpsellModal.stories.tsx b/apps/meteor/client/components/ABAC/ABACUpsellModal/ABACUpsellModal.stories.tsx index f82c261020522..40bdad068de7d 100644 --- a/apps/meteor/client/components/ABAC/ABACUpsellModal/ABACUpsellModal.stories.tsx +++ b/apps/meteor/client/components/ABAC/ABACUpsellModal/ABACUpsellModal.stories.tsx @@ -1,6 +1,6 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import ABACUpsellModal from './ABACUpsellModal'; diff --git a/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx b/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx index e36828a4a48d9..2a0643f8627ac 100644 --- a/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx +++ b/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import CreateDiscussion from './CreateDiscussion'; @@ -13,4 +13,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx index 0d26ce190b3d6..9697a73bd3c5e 100644 --- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx +++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import GenericUpsellModal from '.'; diff --git a/apps/meteor/client/components/ListItem.stories.tsx b/apps/meteor/client/components/ListItem.stories.tsx index bbeb1d830f3e0..bd9e412995a9d 100644 --- a/apps/meteor/client/components/ListItem.stories.tsx +++ b/apps/meteor/client/components/ListItem.stories.tsx @@ -1,5 +1,5 @@ import { Tile, OptionTitle, Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta, StoryFn } from '@storybook/react'; import ListItem from './Sidebar/ListItem'; @@ -27,6 +27,7 @@ export const ListWithIcon: StoryFn = () => { ); }; + export const NoIcon: StoryFn = () => { return ( @@ -41,44 +42,51 @@ export const NoIcon: StoryFn = () => { ); }; -export const MixedWithGap: StoryFn = () => { - return ( - - - Title - - - - - - - ); -}; -MixedWithGap.parameters = { - docs: { - description: { - story: - " When using `ListItem`, you can also use the `gap` prop to add spacing to the left. If the list is mixed with items **with and without** icons, it's recommended to add the gap.", +export const MixedWithGap: StoryObj = { + render: () => { + return ( + + + Title + + + + + + + ); + }, + + parameters: { + docs: { + description: { + story: + " When using `ListItem`, you can also use the `gap` prop to add spacing to the left. If the list is mixed with items **with and without** icons, it's recommended to add the gap.", + }, }, }, }; -export const MixedWithoutGap: StoryFn = () => { - return ( - - - Title - - - - - - - ); -}; -MixedWithoutGap.parameters = { - docs: { - description: { - story: 'Not recommended. Prefer adding the `gap` prop to the items without icons.', + +export const MixedWithoutGap: StoryObj = { + render: () => { + return ( + + + Title + + + + + + + ); + }, + + parameters: { + docs: { + description: { + story: 'Not recommended. Prefer adding the `gap` prop to the items without icons.', + }, }, }, }; diff --git a/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx b/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx index e77e938896f2e..3690f763a0b22 100644 --- a/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx +++ b/apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import SidebarTogglerButton from './SidebarTogglerButton'; @@ -13,11 +13,10 @@ export default { } satisfies Meta; export const Example: StoryFn = () => ; +export const Default = {}; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -export const WithBadge = Template.bind({}); -WithBadge.args = { - badge: 99, +export const WithBadge = { + args: { + badge: 99, + }, }; diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx index 381df8031b048..6b02c60dd4d63 100644 --- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx +++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import UserAvatarChip from './UserAvatarChip'; diff --git a/apps/meteor/client/components/UserCard/UserCard.stories.tsx b/apps/meteor/client/components/UserCard/UserCard.stories.tsx index 2e2aaf60d4467..d69a9eb65e3bb 100644 --- a/apps/meteor/client/components/UserCard/UserCard.stories.tsx +++ b/apps/meteor/client/components/UserCard/UserCard.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { UserCard, UserCardRole, UserCardAction } from '.'; @@ -32,73 +32,79 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Example = {}; -export const Example = Template.bind({}); - -export const Nickname = Template.bind({}); -Nickname.args = { - user: { - ...user, - nickname: 'nicknamenickname', - }, -} as any; +export const Nickname = { + args: { + user: { + ...user, + nickname: 'nicknamenickname', + }, + } as any, +}; -export const LargeName = Template.bind({}); -LargeName.args = { - user: { - ...user, - customStatus: '🛴 currently working on User Card on User Card on User Card on User Card on User Card ', - name: 'guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.', - }, -} as any; +export const LargeName = { + args: { + user: { + ...user, + customStatus: '🛴 currently working on User Card on User Card on User Card on User Card on User Card ', + name: 'guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.guilherme.gazzo.', + }, + } as any, +}; -export const NoRoles = Template.bind({}); -NoRoles.args = { - user: { - ...user, - roles: undefined, - }, -} as any; +export const NoRoles = { + args: { + user: { + ...user, + roles: undefined, + }, + } as any, +}; -export const NoActions = Template.bind({}); -NoActions.args = { - actions: undefined, -} as any; +export const NoActions = { + args: { + actions: undefined, + } as any, +}; -export const NoLocalTime = Template.bind({}); -NoLocalTime.args = { - user: { - ...user, - localTime: undefined, - }, -} as any; +export const NoLocalTime = { + args: { + user: { + ...user, + localTime: undefined, + }, + } as any, +}; -export const NoBio = Template.bind({}); -NoBio.args = { - user: { - ...user, - bio: undefined, - }, -} as any; +export const NoBio = { + args: { + user: { + ...user, + bio: undefined, + }, + } as any, +}; -export const NoBioAndNoLocalTime = Template.bind({}); -NoBioAndNoLocalTime.args = { - user: { - ...user, - bio: undefined, - localTime: undefined, - }, -} as any; +export const NoBioAndNoLocalTime = { + args: { + user: { + ...user, + bio: undefined, + localTime: undefined, + }, + } as any, +}; -export const NoBioNoLocalTimeNoRoles = Template.bind({}); -NoBioNoLocalTimeNoRoles.args = { - user: { - ...user, - bio: undefined, - localTime: undefined, - roles: undefined, - }, -} as any; +export const NoBioNoLocalTimeNoRoles = { + args: { + user: { + ...user, + bio: undefined, + localTime: undefined, + roles: undefined, + }, + } as any, +}; export const Loading = () => ; diff --git a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx index 65b94ed0d4445..81487409ddbb3 100644 --- a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx +++ b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx @@ -33,28 +33,39 @@ const defaultArgs = { const Template: StoryFn = (args) => ; -export const Default = Template.bind({}); +export const Default = { + render: Template, +}; + +export const WithVoiceCallExtension = { + render: Template, -export const WithVoiceCallExtension = Template.bind({}); -WithVoiceCallExtension.args = { - freeSwitchExtension: '1234567890', + args: { + freeSwitchExtension: '1234567890', + }, }; -export const WithABACAttributes = Template.bind({}); -WithABACAttributes.args = { - abacAttributes: [ - { - key: 'Classified', - values: ['Top Secret', 'Confidential'], - }, - { - key: 'Security_Clearance', - values: ['Top Secret', 'Confidential'], - }, - ], +export const WithABACAttributes = { + render: Template, + + args: { + abacAttributes: [ + { + key: 'Classified', + values: ['Top Secret', 'Confidential'], + }, + { + key: 'Security_Clearance', + values: ['Top Secret', 'Confidential'], + }, + ], + }, }; -export const InvitedUser = Template.bind({}); -InvitedUser.args = { - invitationDate: '2025-01-01T12:00:00Z', +export const InvitedUser = { + render: Template, + + args: { + invitationDate: '2025-01-01T12:00:00Z', + }, }; diff --git a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.stories.tsx b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.stories.tsx index 780f081e1837a..012c9a63c8a19 100644 --- a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.stories.tsx +++ b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.stories.tsx @@ -1,7 +1,7 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; import type { ServerContextValue } from '@rocket.chat/ui-contexts'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import ConnectionStatusBar from './ConnectionStatusBar'; @@ -23,47 +23,62 @@ const stateDecorator = (value: Partial) => const Template: StoryFn = () => ; -export const Connected = Template.bind({}); -Connected.decorators = [ - stateDecorator({ - connected: true, - status: 'connected', - retryTime: undefined, - }), -]; +export const Connected = { + render: Template, -export const Connecting = Template.bind({}); -Connecting.decorators = [ - stateDecorator({ - connected: false, - status: 'connecting', - retryTime: undefined, - }), -]; + decorators: [ + stateDecorator({ + connected: true, + status: 'connected', + retryTime: undefined, + }), + ], +}; -export const Failed = Template.bind({}); -Failed.decorators = [ - stateDecorator({ - connected: false, - status: 'failed', - retryTime: undefined, - }), -]; +export const Connecting = { + render: Template, -export const Waiting = Template.bind({}); -Waiting.decorators = [ - stateDecorator({ - connected: false, - status: 'waiting', - retryTime: Date.now() + 300000, - }), -]; + decorators: [ + stateDecorator({ + connected: false, + status: 'connecting', + retryTime: undefined, + }), + ], +}; -export const Offline = Template.bind({}); -Offline.decorators = [ - stateDecorator({ - connected: false, - status: 'offline', - retryTime: undefined, - }), -]; +export const Failed = { + render: Template, + + decorators: [ + stateDecorator({ + connected: false, + status: 'failed', + retryTime: undefined, + }), + ], +}; + +export const Waiting = { + render: Template, + + decorators: [ + stateDecorator({ + connected: false, + status: 'waiting', + retryTime: Date.now() + 300000, + }), + ], +}; + +export const Offline = { + render: Template, + + decorators: [ + stateDecorator({ + connected: false, + status: 'offline', + retryTime: undefined, + }), + ], +}; diff --git a/apps/meteor/client/components/dataView/Counter.stories.tsx b/apps/meteor/client/components/dataView/Counter.stories.tsx index da2b0ee343d1c..b260cbf543498 100644 --- a/apps/meteor/client/components/dataView/Counter.stories.tsx +++ b/apps/meteor/client/components/dataView/Counter.stories.tsx @@ -12,27 +12,29 @@ export default { export const Example: StoryFn = () => ; -const Template: StoryFn = (args) => ; - -export const WithoutVariation = Template.bind({}); -WithoutVariation.args = { - count: 123, +export const WithoutVariation = { + args: { + count: 123, + }, }; -export const WithPositiveVariation = Template.bind({}); -WithPositiveVariation.args = { - count: 123, - variation: 4, +export const WithPositiveVariation = { + args: { + count: 123, + variation: 4, + }, }; -export const WithNegativeVariation = Template.bind({}); -WithNegativeVariation.args = { - count: 123, - variation: -4, +export const WithNegativeVariation = { + args: { + count: 123, + variation: -4, + }, }; -export const WithDescription = Template.bind({}); -WithDescription.args = { - count: 123, - description: 'Description', +export const WithDescription = { + args: { + count: 123, + description: 'Description', + }, }; diff --git a/apps/meteor/client/components/dataView/CounterSet.stories.tsx b/apps/meteor/client/components/dataView/CounterSet.stories.tsx index ecfbe9bf9a0da..0b17d6a2e2193 100644 --- a/apps/meteor/client/components/dataView/CounterSet.stories.tsx +++ b/apps/meteor/client/components/dataView/CounterSet.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import CounterSet from './CounterSet'; @@ -10,12 +10,14 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CounterSet'; -Default.args = { - counters: [ - { count: 123, variation: 0 }, - { count: 456, variation: 7 }, - { count: 789, variation: -1, description: 'Description' }, - ], +export const Default: StoryObj = { + name: 'CounterSet', + + args: { + counters: [ + { count: 123, variation: 0 }, + { count: 456, variation: 7 }, + { count: 789, variation: -1, description: 'Description' }, + ], + }, }; diff --git a/apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx b/apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx index d01bc58f613a8..b49e9cbf5b5e4 100644 --- a/apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx +++ b/apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import NegativeGrowthSymbol from './NegativeGrowthSymbol'; import { useAutoSequence } from '../../stories/hooks/useAutoSequence'; @@ -19,7 +19,6 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.storyName = 'NegativeGrowthSymbol'; +export const Default = { + name: 'NegativeGrowthSymbol', +}; diff --git a/apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx b/apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx index b775d7bb068b7..4f6aad0e48368 100644 --- a/apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx +++ b/apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PositiveGrowthSymbol from './PositiveGrowthSymbol'; import { useAutoSequence } from '../../stories/hooks/useAutoSequence'; @@ -19,7 +19,6 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.storyName = 'PositiveGrowthSymbol'; +export const Default = { + name: 'PositiveGrowthSymbol', +}; diff --git a/apps/meteor/client/components/message/content/actions/MessageAction.stories.tsx b/apps/meteor/client/components/message/content/actions/MessageAction.stories.tsx index 2f15e0912b551..d6e042b62ec4a 100644 --- a/apps/meteor/client/components/message/content/actions/MessageAction.stories.tsx +++ b/apps/meteor/client/components/message/content/actions/MessageAction.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import MessageAction from './MessageAction'; @@ -10,9 +10,10 @@ export default { }, } satisfies Meta; -export const Example: StoryFn = (args) => ; -Example.args = { - icon: 'quote' as const, - i18nLabel: 'Quote' as const, - methodId: 'method-id', +export const Example: StoryObj = { + args: { + icon: 'quote' as const, + i18nLabel: 'Quote' as const, + methodId: 'method-id', + }, }; diff --git a/apps/meteor/client/components/message/header/MessageRoles.stories.tsx b/apps/meteor/client/components/message/header/MessageRoles.stories.tsx index 5b876d752cdbf..7129c916b953b 100644 --- a/apps/meteor/client/components/message/header/MessageRoles.stories.tsx +++ b/apps/meteor/client/components/message/header/MessageRoles.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import MessageRoles from './MessageRoles'; @@ -8,13 +8,15 @@ export default { decorators: [(fn) => {fn()}], // TODO: workaround for missing Fuselage default stylesheet } satisfies Meta; -export const AdministratorExample: StoryFn = (args) => ; -AdministratorExample.args = { - roles: ['admin', 'user'], +export const AdministratorExample: StoryObj = { + args: { + roles: ['admin', 'user'], + }, }; -export const BotExample: StoryFn = (args) => ; -BotExample.args = { - roles: ['user'], - isBot: true, +export const BotExample: StoryObj = { + args: { + roles: ['user'], + isBot: true, + }, }; diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.stories.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.stories.tsx index ed751617f86dd..43eae9aa4bbf7 100644 --- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.stories.tsx +++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.stories.tsx @@ -1,6 +1,6 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import DatePicker from './DatePicker'; import FormatSelector from './FormatSelector'; diff --git a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx index 8912538441c5a..151ac8b5cec5f 100644 --- a/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx +++ b/apps/meteor/client/components/message/variants/threadPreview/ThreadMessagePreviewBody.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; import ThreadMessagePreviewBody from './ThreadMessagePreviewBody'; @@ -25,4 +25,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn> = (args) => ; +export const Default: StoryObj> = {}; diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx index 9735b95bc8da9..ed9f9c1349110 100644 --- a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx @@ -1,7 +1,7 @@ import { Box, IconButton } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import Condensed from './Condensed'; import * as Status from '../../components/UserStatus'; @@ -33,39 +33,50 @@ const Template: StoryFn = (args) => ( /> ); -export const Normal = Template.bind({}); +export const Normal = { + render: Template, +}; + +export const Selected = { + render: Template, -export const Selected = Template.bind({}); -Selected.args = { - selected: true, + args: { + selected: true, + }, }; -export const Menu = Template.bind({}); -Menu.args = { - menuOptions: { - hide: { - label: { label: 'Hide', icon: 'eye-off' }, - action: action('action'), - }, - read: { - label: { label: 'Mark_read', icon: 'flag' }, - action: action('action'), - }, - favorite: { - label: { label: 'Favorite', icon: 'star' }, - action: action('action'), +export const Menu = { + render: Template, + + args: { + menuOptions: { + hide: { + label: { label: 'Hide', icon: 'eye-off' }, + action: action('action'), + }, + read: { + label: { label: 'Mark_read', icon: 'flag' }, + action: action('action'), + }, + favorite: { + label: { label: 'Favorite', icon: 'star' }, + action: action('action'), + }, }, }, }; -export const Actions = Template.bind({}); -Actions.args = { - actions: ( - <> - - - - - - ), +export const Actions = { + render: Template, + + args: { + actions: ( + <> + + + + + + ), + }, }; diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx index 2f8e13679e941..cd9ef1ba1bef6 100644 --- a/apps/meteor/client/sidebar/Item/Extended.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Extended.stories.tsx @@ -1,7 +1,7 @@ import { Box, IconButton, Badge } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import Extended from './Extended'; import * as Status from '../../components/UserStatus'; @@ -48,39 +48,50 @@ const Template: StoryFn = (args) => ( /> ); -export const Normal = Template.bind({}); +export const Normal = { + render: Template, +}; + +export const Selected = { + render: Template, -export const Selected = Template.bind({}); -Selected.args = { - selected: true, + args: { + selected: true, + }, }; -export const Menu = Template.bind({}); -Menu.args = { - menuOptions: { - hide: { - label: { label: 'Hide', icon: 'eye-off' }, - action: action('action'), - }, - read: { - label: { label: 'Mark_read', icon: 'flag' }, - action: action('action'), - }, - favorite: { - label: { label: 'Favorite', icon: 'star' }, - action: action('action'), +export const Menu = { + render: Template, + + args: { + menuOptions: { + hide: { + label: { label: 'Hide', icon: 'eye-off' }, + action: action('action'), + }, + read: { + label: { label: 'Mark_read', icon: 'flag' }, + action: action('action'), + }, + favorite: { + label: { label: 'Favorite', icon: 'star' }, + action: action('action'), + }, }, }, }; -export const Actions = Template.bind({}); -Actions.args = { - actions: ( - <> - - - - - - ), +export const Actions = { + render: Template, + + args: { + actions: ( + <> + + + + + + ), + }, }; diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx index ef99afbab404d..be5e6698400f5 100644 --- a/apps/meteor/client/sidebar/Item/Medium.stories.tsx +++ b/apps/meteor/client/sidebar/Item/Medium.stories.tsx @@ -1,7 +1,7 @@ import { Box, IconButton } from '@rocket.chat/fuselage'; import { UserAvatar } from '@rocket.chat/ui-avatar'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import Medium from './Medium'; import * as Status from '../../components/UserStatus'; @@ -32,39 +32,50 @@ const Template: StoryFn = (args) => ( /> ); -export const Normal = Template.bind({}); +export const Normal = { + render: Template, +}; + +export const Selected = { + render: Template, -export const Selected = Template.bind({}); -Selected.args = { - selected: true, + args: { + selected: true, + }, }; -export const Menu = Template.bind({}); -Menu.args = { - menuOptions: { - hide: { - label: { label: 'Hide', icon: 'eye-off' }, - action: action('action'), - }, - read: { - label: { label: 'Mark_read', icon: 'flag' }, - action: action('action'), - }, - favorite: { - label: { label: 'Favorite', icon: 'star' }, - action: action('action'), +export const Menu = { + render: Template, + + args: { + menuOptions: { + hide: { + label: { label: 'Hide', icon: 'eye-off' }, + action: action('action'), + }, + read: { + label: { label: 'Mark_read', icon: 'flag' }, + action: action('action'), + }, + favorite: { + label: { label: 'Favorite', icon: 'star' }, + action: action('action'), + }, }, }, }; -export const Actions = Template.bind({}); -Actions.args = { - actions: ( - <> - - - - - - ), +export const Actions = { + render: Template, + + args: { + actions: ( + <> + + + + + + ), + }, }; diff --git a/apps/meteor/client/sidebar/Sidebar.stories.tsx b/apps/meteor/client/sidebar/Sidebar.stories.tsx index b68c179155e4a..8d404efab60b2 100644 --- a/apps/meteor/client/sidebar/Sidebar.stories.tsx +++ b/apps/meteor/client/sidebar/Sidebar.stories.tsx @@ -1,7 +1,7 @@ import type { ISetting } from '@rocket.chat/core-typings'; import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts'; import { UserContext, SettingsContext } from '@rocket.chat/ui-contexts'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ObjectId } from 'mongodb'; import type { ContextType } from 'react'; @@ -100,11 +100,14 @@ const userContextValue: ContextType = { onLogout: () => () => undefined, }; -export const SidebarStory: StoryFn = () => ; -SidebarStory.decorators = [ - (fn) => ( - - {fn()} - - ), -]; +export const SidebarStory: StoryObj = { + render: () => , + + decorators: [ + (fn) => ( + + {fn()} + + ), + ], +}; diff --git a/apps/meteor/client/stories/contexts/ModalContextMock.tsx b/apps/meteor/client/stories/contexts/ModalContextMock.tsx index af58a5c5738b6..0692152d27a72 100644 --- a/apps/meteor/client/stories/contexts/ModalContextMock.tsx +++ b/apps/meteor/client/stories/contexts/ModalContextMock.tsx @@ -1,7 +1,7 @@ import { ModalContext } from '@rocket.chat/ui-contexts'; -import { action } from '@storybook/addon-actions'; import type { ContextType, ReactNode } from 'react'; import { useContext, useMemo } from 'react'; +import { action } from 'storybook/actions'; const logAction = action('ModalContext'); diff --git a/apps/meteor/client/stories/contexts/RouterContextMock.tsx b/apps/meteor/client/stories/contexts/RouterContextMock.tsx index fd986b392e51e..d52b2e28616f4 100644 --- a/apps/meteor/client/stories/contexts/RouterContextMock.tsx +++ b/apps/meteor/client/stories/contexts/RouterContextMock.tsx @@ -1,7 +1,7 @@ import { RouterContext } from '@rocket.chat/ui-contexts'; -import { action } from '@storybook/addon-actions'; import type { ContextType, ReactNode } from 'react'; import { useContext, useMemo } from 'react'; +import { action } from 'storybook/actions'; const logAction = action('RouterContext'); diff --git a/apps/meteor/client/stories/contexts/ServerContextMock.tsx b/apps/meteor/client/stories/contexts/ServerContextMock.tsx index 9602a21abe9d5..80d378b26075e 100644 --- a/apps/meteor/client/stories/contexts/ServerContextMock.tsx +++ b/apps/meteor/client/stories/contexts/ServerContextMock.tsx @@ -3,9 +3,9 @@ import type { ServerMethodName, ServerMethodParameters, ServerMethodReturn } fro import type { Method, OperationParams, OperationResult, PathFor, PathPattern } from '@rocket.chat/rest-typings'; import type { UploadResult } from '@rocket.chat/ui-contexts'; import { ServerContext } from '@rocket.chat/ui-contexts'; -import { action } from '@storybook/addon-actions'; import type { ContextType, ReactNode } from 'react'; import { useContext, useMemo } from 'react'; +import { action } from 'storybook/actions'; const logAction = action('ServerContext'); diff --git a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx index 2b34b06af71e2..9976e5f989612 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx @@ -1,6 +1,6 @@ import { Contextualbar } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import AttributesForm, { type AttributesFormFormData } from './AttributesForm'; @@ -27,53 +27,51 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const NewAttribute = Template.bind({}); +export const NewAttribute: StoryObj = { + decorators: [ + (fn) => { + const methods = useForm({ + defaultValues: { + name: '', + attributeValues: [{ value: '' }], + lockedAttributes: [], + }, + mode: 'onChange', + }); -NewAttribute.decorators = [ - (fn) => { - const methods = useForm({ - defaultValues: { - name: '', - attributeValues: [{ value: '' }], - lockedAttributes: [], - }, - mode: 'onChange', - }); + return ( + + + {fn()} + + + ); + }, + ], +}; - return ( - - - {fn()} - - - ); +export const WithLockedAttributes: StoryObj = { + args: { + description: 'Attribute values cannot be edited, but can be added or deleted.', }, -]; -export const WithLockedAttributes = Template.bind({}); + decorators: [ + (fn) => { + const methods = useForm({ + defaultValues: { + name: 'Room Type', + lockedAttributes: [{ value: 'Locked Value 1' }, { value: 'Locked Value 2' }, { value: 'Locked Value 3' }], + }, + mode: 'onChange', + }); -WithLockedAttributes.args = { - description: 'Attribute values cannot be edited, but can be added or deleted.', + return ( + + + {fn()} + + + ); + }, + ], }; - -WithLockedAttributes.decorators = [ - (fn) => { - const methods = useForm({ - defaultValues: { - name: 'Room Type', - lockedAttributes: [{ value: 'Locked Value 1' }, { value: 'Locked Value 2' }, { value: 'Locked Value 3' }], - }, - mode: 'onChange', - }); - - return ( - - - {fn()} - - - ); - }, -]; diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx index 00f42f3232059..8ee807633343e 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.stories.tsx @@ -1,8 +1,8 @@ import { Field } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; +import { action } from 'storybook/actions'; import type { RoomFormData } from './RoomForm'; import RoomFormAttributeField from './RoomFormAttributeField'; diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.stories.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.stories.tsx index 4345892d3cb34..84a81f2739b80 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.stories.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.stories.tsx @@ -1,6 +1,6 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import RoomFormAutocomplete from './RoomFormAutocomplete'; import { createFakeRoom } from '../../../../../tests/mocks/data'; diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx index ff6f215ba7de3..b8a293643ccaa 100644 --- a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx +++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx @@ -1,8 +1,8 @@ import { Margins } from '@rocket.chat/fuselage'; import { PageContent } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; import { useRef } from 'react'; +import { action } from 'storybook/actions'; import CustomSoundsTable from './CustomSoundsTable'; @@ -22,7 +22,10 @@ const Template: StoryFn = (args) => { return ; }; -export const Default = Template.bind({}); -Default.args = { - onClick: () => action('clicked'), +export const Default = { + render: Template, + + args: { + onClick: () => action('clicked'), + }, }; diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx index 729befbfbc867..f26287aeacc4f 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import EngagementDashboardPage from './EngagementDashboardPage'; @@ -7,5 +7,7 @@ export default { decorators: [(fn) =>
{fn()}
], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'EngagementDashboardPage'; +export const Default: StoryObj = { + render: () => , + name: 'EngagementDashboardPage', +}; diff --git a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx index 2456c122aecd2..de7539befddc4 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx @@ -1,5 +1,5 @@ import { Margins } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ChannelsTab from './ChannelsOverview'; @@ -8,5 +8,7 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'ChannelsTab'; +export const Default: StoryObj = { + render: () => , + name: 'ChannelsTab', +}; diff --git a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx index 5b57acaef630d..1ea3cdb66cd58 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx @@ -1,5 +1,5 @@ import { Margins } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import MessagesTab from './MessagesTab'; @@ -8,5 +8,7 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'MessagesTab'; +export const Default: StoryObj = { + render: () => , + name: 'MessagesTab', +}; diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx index f21f8e7e6ec86..d1505d8832664 100644 --- a/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx +++ b/apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx @@ -1,5 +1,5 @@ import { Margins } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import UsersTab from './UsersTab'; @@ -8,5 +8,7 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'UsersTab'; +export const Default: StoryObj = { + render: () => , + name: 'UsersTab', +}; diff --git a/apps/meteor/client/views/admin/import/ImportHistoryPage.stories.tsx b/apps/meteor/client/views/admin/import/ImportHistoryPage.stories.tsx index c93e95d506c75..b6939f0c5ec30 100644 --- a/apps/meteor/client/views/admin/import/ImportHistoryPage.stories.tsx +++ b/apps/meteor/client/views/admin/import/ImportHistoryPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ImportHistoryPage from './ImportHistoryPage'; @@ -10,5 +10,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'ImportHistoryPage'; +export const Default: StoryObj = { + render: () => , + name: 'ImportHistoryPage', +}; diff --git a/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx b/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx index f7f349899e65a..4952533fcc671 100644 --- a/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx +++ b/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx @@ -1,5 +1,5 @@ import { Table, TableBody } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentType } from 'react'; import ImportOperationSummary from './ImportOperationSummary'; @@ -22,6 +22,8 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; -export const Skeleton: StoryFn = (args) => ; +export const Skeleton: StoryObj = { + render: (args) => , +}; diff --git a/apps/meteor/client/views/admin/import/NewImportPage.stories.tsx b/apps/meteor/client/views/admin/import/NewImportPage.stories.tsx index f14db90c1bf2a..86c4c9af42f85 100644 --- a/apps/meteor/client/views/admin/import/NewImportPage.stories.tsx +++ b/apps/meteor/client/views/admin/import/NewImportPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import NewImportPage from './NewImportPage'; @@ -10,5 +10,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'NewImportPage'; +export const Default: StoryObj = { + render: () => , + name: 'NewImportPage', +}; diff --git a/apps/meteor/client/views/admin/mailer/Mailer.stories.tsx b/apps/meteor/client/views/admin/mailer/Mailer.stories.tsx index 8c1c487c36abf..7b581f8b003dd 100644 --- a/apps/meteor/client/views/admin/mailer/Mailer.stories.tsx +++ b/apps/meteor/client/views/admin/mailer/Mailer.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import MailerPage from './MailerPage'; @@ -9,5 +9,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'Mailer'; +export const Default: StoryObj = { + render: () => , + name: 'Mailer', +}; diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx index 6edd0faaed95d..921b58fb0762a 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx @@ -1,7 +1,7 @@ import type { IPermission, IRole } from '@rocket.chat/core-typings'; import { Margins } from '@rocket.chat/fuselage'; import { PageContent } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PermissionsTable from './PermissionsTable'; import { createMockedPagination } from '../../../../../tests/mocks/data'; @@ -109,22 +109,22 @@ const permissions: IPermission[] = [ const paginationData = createMockedPagination(permissions.length, 10); -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - total: 10, - permissions, - roleList: roles, - setFilter: () => undefined, - paginationData, +export const Default = { + args: { + total: 10, + permissions, + roleList: roles, + setFilter: () => undefined, + paginationData, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - total: 0, - permissions: [], - roleList: [], - setFilter: () => undefined, - paginationData, +export const Empty = { + args: { + total: 0, + permissions: [], + roleList: [], + setFilter: () => undefined, + paginationData, + }, }; diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx index afb666649cba9..4ae4639b93d70 100644 --- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx +++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx @@ -1,6 +1,6 @@ import { Margins } from '@rocket.chat/fuselage'; import { PageContent } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UsersInRoleTable from './UsersInRoleTable'; import { createMockedPagination } from '../../../../../../tests/mocks/data'; @@ -33,52 +33,54 @@ const mockedUsers = generateMockedUsers(5); const paginationData = createMockedPagination(mockedUsers.length, 30); -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - total: 30, - isLoading: false, - isError: false, - isSuccess: true, - users: mockedUsers, - onRemove: () => undefined, - refetch: () => undefined, - paginationData, +export const Default = { + args: { + total: 30, + isLoading: false, + isError: false, + isSuccess: true, + users: mockedUsers, + onRemove: () => undefined, + refetch: () => undefined, + paginationData, + }, }; -export const withLoading = Template.bind({}); -withLoading.args = { - total: 0, - isLoading: true, - isError: false, - isSuccess: false, - users: [], - onRemove: () => undefined, - refetch: () => undefined, - paginationData, +export const withLoading = { + args: { + total: 0, + isLoading: true, + isError: false, + isSuccess: false, + users: [], + onRemove: () => undefined, + refetch: () => undefined, + paginationData, + }, }; -export const withNoResults = Template.bind({}); -withNoResults.args = { - total: 0, - isLoading: false, - isError: false, - isSuccess: true, - users: [], - onRemove: () => undefined, - refetch: () => undefined, - paginationData, +export const withNoResults = { + args: { + total: 0, + isLoading: false, + isError: false, + isSuccess: true, + users: [], + onRemove: () => undefined, + refetch: () => undefined, + paginationData, + }, }; -export const withError = Template.bind({}); -withError.args = { - total: 0, - isLoading: false, - isError: true, - isSuccess: false, - users: [], - onRemove: () => undefined, - refetch: () => undefined, - paginationData, +export const withError = { + args: { + total: 0, + isLoading: false, + isError: true, + isSuccess: false, + users: [], + onRemove: () => undefined, + refetch: () => undefined, + paginationData, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx index bb887e539ec52..cb8fcd1aa0e6b 100644 --- a/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ResetSettingButton from './ResetSettingButton'; @@ -9,5 +9,6 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'ResetSettingButton'; +export const Default: StoryObj = { + name: 'ResetSettingButton', +}; diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx index ce888d591b252..38d15003bd633 100644 --- a/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx @@ -1,5 +1,5 @@ import { FieldGroup } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import MemoizedSetting from './MemoizedSetting'; import Setting from './Setting'; @@ -15,21 +15,27 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.args = { - _id: 'setting-id', - label: 'Label', - hint: 'Hint', - type: 'string', +export const Default: StoryObj = { + render: (args) => , + + args: { + _id: 'setting-id', + label: 'Label', + hint: 'Hint', + type: 'string', + }, }; -export const WithCallout: StoryFn = (args) => ; -WithCallout.args = { - _id: 'setting-id', - label: 'Label', - hint: 'Hint', - callout: 'Callout text', - type: 'string', +export const WithCallout: StoryObj = { + render: (args) => , + + args: { + _id: 'setting-id', + label: 'Label', + hint: 'Hint', + callout: 'Callout text', + type: 'string', + }, }; export const types = () => ( diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx index 54669af7fa5e7..fd19644a608a5 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx @@ -1,7 +1,7 @@ import type { ServerMethods } from '@rocket.chat/ddp-client'; import { Field } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ActionSettingInput from './ActionSettingInput'; @@ -10,27 +10,28 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - actionText: 'Action text' as TranslationKey, - value: 'methodName' as keyof ServerMethods, +export const Default = { + args: { + _id: 'setting_id', + actionText: 'Action text' as TranslationKey, + value: 'methodName' as keyof ServerMethods, + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - actionText: 'Action text' as TranslationKey, - value: 'methodName' as keyof ServerMethods, - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + actionText: 'Action text' as TranslationKey, + value: 'methodName' as keyof ServerMethods, + disabled: true, + }, }; -export const WithinChangedSection = Template.bind({}); -WithinChangedSection.args = { - _id: 'setting_id', - actionText: 'Action text' as TranslationKey, - value: 'methodName' as keyof ServerMethods, - sectionChanged: true, +export const WithinChangedSection = { + args: { + _id: 'setting_id', + actionText: 'Action text' as TranslationKey, + value: 'methodName' as keyof ServerMethods, + sectionChanged: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx index ee839b5c6fa0e..cacf469788675 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import AssetSettingInput from './AssetSettingInput'; @@ -16,24 +16,25 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: { url: 'https://rocket.chat/images/logo.svg' }, +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: { url: 'https://rocket.chat/images/logo.svg' }, + }, }; -export const WithFileConstraints = Template.bind({}); -WithFileConstraints.args = { - _id: 'setting_id', - label: 'Label', - fileConstraints: { extensions: ['png', 'jpg', 'gif'] }, +export const WithFileConstraints = { + args: { + _id: 'setting_id', + label: 'Label', + fileConstraints: { extensions: ['png', 'jpg', 'gif'] }, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx index d9e0ab80609b7..ffa84bd0ea966 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import BooleanSettingInput from './BooleanSettingInput'; @@ -13,31 +13,33 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + disabled: true, + }, }; -export const Checked = Template.bind({}); -Checked.args = { - _id: 'setting_id', - label: 'Label', - value: true, +export const Checked = { + args: { + _id: 'setting_id', + label: 'Label', + value: true, + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx index 1a7dfb614a29e..9e88a2863efc5 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import CodeSettingInput from './CodeSettingInput'; @@ -19,47 +19,50 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - code: 'javascript', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + code: 'javascript', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - code: 'javascript', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + code: 'javascript', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: 'console.log("Hello World!");', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'console.log("Hello World!");', + placeholder: 'Placeholder', + }, }; -export const WithDescription = Template.bind({}); -WithDescription.args = { - _id: 'setting_id', - label: 'Label', - hint: 'Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.', - value: 'console.log("Hello World!");', - placeholder: 'Placeholder', +export const WithDescription = { + args: { + _id: 'setting_id', + label: 'Label', + hint: 'Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + value: 'console.log("Hello World!");', + placeholder: 'Placeholder', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - value: 'console.log("Hello World!");', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'console.log("Hello World!");', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx index 945ab1b6c0b8a..806e84cf32162 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import ColorSettingInput from './ColorSettingInput'; @@ -13,53 +13,56 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - editor: 'color', - allowedTypes: ['color', 'expression'], - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + editor: 'color', + allowedTypes: ['color', 'expression'], + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - editor: 'color', - allowedTypes: ['color', 'expression'], - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + editor: 'color', + allowedTypes: ['color', 'expression'], + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - editor: 'color', - allowedTypes: ['color', 'expression'], - value: '#db2323', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + editor: 'color', + allowedTypes: ['color', 'expression'], + value: '#db2323', + placeholder: 'Placeholder', + }, }; -export const WithExpressionAsValue = Template.bind({}); -WithExpressionAsValue.args = { - _id: 'setting_id', - label: 'Label', - editor: 'expression', - allowedTypes: ['color', 'expression'], - value: 'var(--rc-color-primary)', - placeholder: 'Placeholder', +export const WithExpressionAsValue = { + args: { + _id: 'setting_id', + label: 'Label', + editor: 'expression', + allowedTypes: ['color', 'expression'], + value: 'var(--rc-color-primary)', + placeholder: 'Placeholder', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - editor: 'color', - allowedTypes: ['color', 'expression'], - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + editor: 'color', + allowedTypes: ['color', 'expression'], + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx index 573cae7209878..a777fed2bcc6b 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import FontSettingInput from './FontSettingInput'; @@ -13,35 +13,37 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - value: 'Roboto', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + value: 'Roboto', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx index be84ec59199ff..2153f6a232775 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import GenericSettingInput from './GenericSettingInput'; @@ -13,35 +13,37 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: 'Value', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'Value', + placeholder: 'Placeholder', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx index ea25cb68683ae..d07e427955b27 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import IntSettingInput from './IntSettingInput'; @@ -13,35 +13,37 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: '12345', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: '12345', + placeholder: 'Placeholder', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx index 0a8f890656388..0f15963b2f808 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import LanguageSettingInput from './LanguageSettingInput'; @@ -13,36 +13,38 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - value: 'en', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + value: 'en', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - value: '1', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + value: '1', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx index 208c04484bc8a..291a30ac5eb8c 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx @@ -1,6 +1,6 @@ import { Field } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import type { valuesOption } from './MultiSelectSettingInput'; import MultiSelectSettingInput from './MultiSelectSettingInput'; @@ -15,44 +15,46 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - const options: valuesOption[] = [ { key: '1', i18nLabel: '1' as TranslationKey }, { key: '2', i18nLabel: '2' as TranslationKey }, { key: '3', i18nLabel: '3' as TranslationKey }, ]; -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: options, +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: options, + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: options, - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: options, + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - value: ['1', 'Lorem Ipsum'], +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + value: ['1', 'Lorem Ipsum'], + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: options, - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: options, + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx index 4d0328acf6eaa..7ffd0fcc78c39 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import PasswordSettingInput from './PasswordSettingInput'; @@ -13,35 +13,30 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: '5w0rdf15h', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; -export const WithResetButton = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, -}; +export const WithResetButton = {}; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.stories.tsx index 8346b19a8ca3b..2e14b9ebf03e2 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.stories.tsx @@ -17,26 +17,40 @@ const Template: StoryFn = (args) => ( ); -export const Default = Template.bind({}); +export const Default = { + render: Template, +}; + +export const Disabled = { + render: Template, -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, + args: { + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - value: 50, +export const WithValue = { + render: Template, + + args: { + value: 50, + }, }; -export const WithHint = Template.bind({}); -WithHint.args = { - value: 50, - hint: 'This is a hint for the slider', +export const WithHint = { + render: Template, + + args: { + value: 50, + hint: 'This is a hint for the slider', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - value: 50, - hasResetButton: true, +export const WithResetButton = { + render: Template, + + args: { + value: 50, + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx index 23fd7ff5b9a10..e841048d948a1 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import RelativeUrlSettingInput from './RelativeUrlSettingInput'; @@ -13,35 +13,37 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: 'Value', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'Value', + placeholder: 'Placeholder', + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx index a2a2de20b6554..8e4d00ddf496f 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx @@ -1,6 +1,6 @@ import { Field } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import SelectSettingInput from './SelectSettingInput'; @@ -14,55 +14,57 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: [ - { key: '1', i18nLabel: '1' as TranslationKey }, - { key: '2', i18nLabel: '2' as TranslationKey }, - { key: '3', i18nLabel: '3' as TranslationKey }, - ], +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: [ + { key: '1', i18nLabel: '1' as TranslationKey }, + { key: '2', i18nLabel: '2' as TranslationKey }, + { key: '3', i18nLabel: '3' as TranslationKey }, + ], + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: [ - { key: '1', i18nLabel: '1' as TranslationKey }, - { key: '2', i18nLabel: '2' as TranslationKey }, - { key: '3', i18nLabel: '3' as TranslationKey }, - ], - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: [ + { key: '1', i18nLabel: '1' as TranslationKey }, + { key: '2', i18nLabel: '2' as TranslationKey }, + { key: '3', i18nLabel: '3' as TranslationKey }, + ], + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - value: '2', - values: [ - { key: '1', i18nLabel: '1' as TranslationKey }, - { key: '2', i18nLabel: '2' as TranslationKey }, - { key: '3', i18nLabel: '3' as TranslationKey }, - ], +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + value: '2', + values: [ + { key: '1', i18nLabel: '1' as TranslationKey }, + { key: '2', i18nLabel: '2' as TranslationKey }, + { key: '3', i18nLabel: '3' as TranslationKey }, + ], + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - values: [ - { key: '1', i18nLabel: '1' as TranslationKey }, - { key: '2', i18nLabel: '2' as TranslationKey }, - { key: '3', i18nLabel: '3' as TranslationKey }, - ], - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + values: [ + { key: '1', i18nLabel: '1' as TranslationKey }, + { key: '2', i18nLabel: '2' as TranslationKey }, + { key: '3', i18nLabel: '3' as TranslationKey }, + ], + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx index c9975a19f8539..44ce7c65d6162 100644 --- a/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx +++ b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx @@ -1,5 +1,5 @@ import { Field } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import StringSettingInput from './StringSettingInput'; @@ -13,44 +13,47 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', +export const Default = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + }, }; -export const Disabled = Template.bind({}); -Disabled.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - disabled: true, +export const Disabled = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + disabled: true, + }, }; -export const WithValue = Template.bind({}); -WithValue.args = { - _id: 'setting_id', - label: 'Label', - value: 'Value', - placeholder: 'Placeholder', +export const WithValue = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'Value', + placeholder: 'Placeholder', + }, }; -export const Multiline = Template.bind({}); -Multiline.args = { - _id: 'setting_id', - label: 'Label', - value: 'Value\n'.repeat(10), - placeholder: 'Placeholder', - multiline: true, +export const Multiline = { + args: { + _id: 'setting_id', + label: 'Label', + value: 'Value\n'.repeat(10), + placeholder: 'Placeholder', + multiline: true, + }, }; -export const WithResetButton = Template.bind({}); -WithResetButton.args = { - _id: 'setting_id', - label: 'Label', - placeholder: 'Placeholder', - hasResetButton: true, +export const WithResetButton = { + args: { + _id: 'setting_id', + label: 'Label', + placeholder: 'Placeholder', + hasResetButton: true, + }, }; diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx index bf35a4aabf91c..0c5e29a91506a 100644 --- a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx +++ b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta, StoryFn } from '@storybook/react'; import SettingsGroupPage from './SettingsGroupPage'; import SettingsGroupPageSkeleton from './SettingsGroupPageSkeleton'; @@ -11,12 +11,13 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; -export const WithGroup: StoryFn = (args) => ; -WithGroup.args = { - _id: 'General', - i18nLabel: 'General', +export const WithGroup: StoryObj = { + args: { + _id: 'General', + i18nLabel: 'General', + }, }; export const Skeleton: StoryFn = () => ; diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx index 2c7b4766dca0a..6fbcac01543d8 100644 --- a/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx +++ b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import SettingsGroupSelector from './SettingsGroupSelector'; @@ -10,5 +10,6 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'GroupSelector'; +export const Default: StoryObj = { + name: 'GroupSelector', +}; diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx index c1fd3ac6a5a0d..140aeb38f714c 100644 --- a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx +++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta, StoryFn } from '@storybook/react'; import SettingsSection from './SettingsSection'; import SettingsSectionSkeleton from './SettingsSectionSkeleton'; @@ -11,9 +11,10 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.args = { - groupId: 'General', +export const Default: StoryObj = { + args: { + groupId: 'General', + }, }; export const Skeleton: StoryFn = () => ; diff --git a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.stories.tsx b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.stories.tsx index ceb9cabe51726..8146fe3ade582 100644 --- a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.stories.tsx +++ b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.stories.tsx @@ -1,5 +1,5 @@ import colorTokens from '@rocket.chat/fuselage-tokens/colors.json'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; import UsagePieGraph from './UsagePieGraph'; @@ -12,57 +12,60 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Example = Template.bind({}); -Example.args = { - total: 321, - used: 123, - size: 128, - label: 'Example label', - color: colorTokens.p500, +export const Example = { + args: { + total: 321, + used: 123, + size: 128, + label: 'Example label', + color: colorTokens.p500, + }, }; -export const Unlimited = Template.bind({}); -Unlimited.args = { - used: 123, - size: 128, - label: 'Example label', - color: colorTokens.p500, +export const Unlimited = { + args: { + used: 123, + size: 128, + label: 'Example label', + color: colorTokens.p500, + }, }; -export const Animated: StoryFn, 'size' | 'label'>> = (args) => { - const props = useAutoSequence([ - { - total: 100, - used: 0, - color: colorTokens.g500, - }, - { - total: 100, - used: 25, - color: colorTokens.b500, - }, - { - total: 100, - used: 50, - color: colorTokens.y500, - }, - { - total: 100, - used: 75, - color: colorTokens.o500, - }, - { - total: 100, - used: 100, - color: colorTokens.r500, - }, - ]); +export const Animated: StoryObj, 'size' | 'label'>> = { + render: (args) => { + const props = useAutoSequence([ + { + total: 100, + used: 0, + color: colorTokens.g500, + }, + { + total: 100, + used: 25, + color: colorTokens.b500, + }, + { + total: 100, + used: 50, + color: colorTokens.y500, + }, + { + total: 100, + used: 75, + color: colorTokens.o500, + }, + { + total: 100, + used: 100, + color: colorTokens.r500, + }, + ]); - return ; -}; -Animated.args = { - size: 128, - label: 'Example label', + return ; + }, + + args: { + size: 128, + label: 'Example label', + }, }; diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx index 8be522d6143b3..6f24c90a1176d 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx @@ -1,5 +1,5 @@ import { UserStatus } from '@rocket.chat/core-typings'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UsersTable from './UsersTable'; import { createMockedPagination } from '../../../../../tests/mocks/data'; @@ -8,8 +8,6 @@ export default { component: UsersTable, } satisfies Meta; -const Template: StoryFn = (args) => ; - const mockedUsers = [ { _id: '1', @@ -65,28 +63,31 @@ const mockedUsers = [ const paginationData = createMockedPagination(mockedUsers.length, 5); -export const Default = Template.bind({}); -Default.args = { - users: mockedUsers, - total: 5, - isLoading: false, - isSuccess: true, - tab: 'all', - paginationData, +export const Default = { + args: { + users: mockedUsers, + total: 5, + isLoading: false, + isSuccess: true, + tab: 'all', + paginationData, + }, }; -export const Loading = Template.bind({}); -Loading.args = { - isLoading: true, - paginationData, +export const Loading = { + args: { + isLoading: true, + paginationData, + }, }; -export const NoResults = Template.bind({}); -NoResults.args = { - users: [], - total: 0, - isLoading: false, - isError: false, - isSuccess: true, - paginationData, +export const NoResults = { + args: { + users: [], + total: 0, + isLoading: false, + isError: false, + isSuccess: true, + paginationData, + }, }; diff --git a/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.stories.tsx b/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.stories.tsx index d3a4622b20e29..f686cf1ea6e0e 100644 --- a/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.stories.tsx +++ b/apps/meteor/client/views/admin/viewLogs/ViewLogsPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ViewLogsPage from './ViewLogsPage'; @@ -11,5 +11,7 @@ export default { decorators: [(fn) =>
{fn()}
], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'ViewLogsPage'; +export const Default: StoryObj = { + render: () => , + name: 'ViewLogsPage', +}; diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.stories.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.stories.tsx index 7aad52c6cdecd..df0c2b233e4bd 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.stories.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.stories.tsx @@ -1,5 +1,5 @@ import type { IStats } from '@rocket.chat/core-typings'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import DeploymentCard from './DeploymentCard'; @@ -52,7 +52,6 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Example = Template.bind({}); -Example.storyName = 'DeploymentCard'; +export const Example = { + name: 'DeploymentCard', +}; diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx index d9398865d7778..4fb8b68496764 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx @@ -17,7 +17,11 @@ type DeploymentCardProps = { statistics: IStats; }; -const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, instances }: DeploymentCardProps) => { +const DeploymentCard = ({ + serverInfo: { info, cloudWorkspaceId, workspaceUrl, hashedWorkspaceUrl }, + statistics, + instances, +}: DeploymentCardProps) => { const { t } = useTranslation(); const formatDateAndTime = useFormatDateAndTime(); const setModal = useSetModal(); @@ -39,6 +43,18 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in {statistics.version} + {workspaceUrl && ( + + + {workspaceUrl} + + )} + {hashedWorkspaceUrl && ( + + + {hashedWorkspaceUrl} + + )} {statistics.uniqueId} diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.stories.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.stories.tsx index d9bf64387a775..518f13f2dd8c6 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.stories.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/DescriptionList.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import DescriptionList from './DescriptionList'; import DescriptionListEntry from './DescriptionListEntry'; @@ -11,11 +11,14 @@ export default { decorators: [(fn) =>
{fn()}
], } satisfies Meta; -export const Default: StoryFn = (args) => ( - - Value - Value - Value - -); -Default.storyName = 'DescriptionList'; +export const Default: StoryObj = { + render: (args) => ( + + Value + Value + Value + + ), + + name: 'DescriptionList', +}; diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.stories.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.stories.tsx index 6c52749684d84..bd4b18c91dfa2 100644 --- a/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.stories.tsx +++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/components/InstancesModal/InstancesModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import InstancesModal from './InstancesModal'; @@ -12,41 +12,41 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Default = { + name: 'InstancesModal', -export const Default = Template.bind({}); -Default.storyName = 'InstancesModal'; -Default.args = { - instances: [ - { - address: 'http://localhost:3000', - broadcastAuth: false, - currentStatus: { - connected: true, - }, - instanceRecord: { - _createdAt: new Date(), - _id: 'instance-id', - name: 'instance-name', - pid: 123, - extraInformation: { - host: '127.0.0.1', - nodeVersion: 'v14.18.2', - port: '', - tcpPort: 123, - os: { - type: 'macOSX', - platform: '', - arch: 'x64', - release: '236', - uptime: 10, - loadavg: [123, 123], - totalmem: 123, - freemem: 123, - cpus: 8, + args: { + instances: [ + { + address: 'http://localhost:3000', + broadcastAuth: false, + currentStatus: { + connected: true, + }, + instanceRecord: { + _createdAt: new Date(), + _id: 'instance-id', + name: 'instance-name', + pid: 123, + extraInformation: { + host: '127.0.0.1', + nodeVersion: 'v14.18.2', + port: '', + tcpPort: 123, + os: { + type: 'macOSX', + platform: '', + arch: 'x64', + release: '236', + uptime: 10, + loadavg: [123, 123], + totalmem: 123, + freemem: 123, + cpus: 8, + }, }, }, }, - }, - ], + ], + }, }; diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.stories.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.stories.tsx index 3de222a485494..6604fc325c744 100644 --- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.stories.tsx +++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.stories.tsx @@ -1,5 +1,5 @@ import type { IStats } from '@rocket.chat/core-typings'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import MessagesRoomsCard from './MessagesRoomsCard'; @@ -23,8 +23,5 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Example = Template.bind({}); - -export const Vertical = Template.bind({}); +export const Example = {}; +export const Vertical = {}; diff --git a/apps/meteor/client/views/audit/components/AppInfoField.stories.tsx b/apps/meteor/client/views/audit/components/AppInfoField.stories.tsx index 8383a7544b2aa..e0609732a1972 100644 --- a/apps/meteor/client/views/audit/components/AppInfoField.stories.tsx +++ b/apps/meteor/client/views/audit/components/AppInfoField.stories.tsx @@ -1,6 +1,6 @@ import type { AppSubscriptionStatus } from '@rocket.chat/core-typings'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { AppInfoField } from './AppInfoField'; @@ -81,8 +81,8 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; -export const NoAppInfo: StoryFn = (args) => ; - -NoAppInfo.decorators = [mockAppRoot().withTranslations('en', 'core', { App_id: 'App Id' }).buildStoryDecorator()]; +export const NoAppInfo: StoryObj = { + decorators: [mockAppRoot().withTranslations('en', 'core', { App_id: 'App Id' }).buildStoryDecorator()], +}; diff --git a/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.stories.tsx b/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.stories.tsx index 928d5f0b9ca28..5b803f307080c 100644 --- a/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.stories.tsx +++ b/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import SecurityLogDisplayModal from './SecurityLogDisplayModal'; @@ -19,12 +19,12 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; -export const system: StoryFn = (args) => ( - -); +export const system: StoryObj = { + render: (args) => , +}; -export const app: StoryFn = (args) => ( - -); +export const app: StoryObj = { + render: (args) => , +}; diff --git a/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.stories.tsx b/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.stories.tsx index f5d560a47b7f2..7c97c3d7f7480 100644 --- a/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.stories.tsx +++ b/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.stories.tsx @@ -1,6 +1,6 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; +import { action } from 'storybook/actions'; import EnterE2EPasswordModal from '.'; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.stories.tsx index 4825b3f308347..62d2eae14899f 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; import AppLogsItem from './AppLogsItem'; @@ -39,4 +39,4 @@ export default { }, } satisfies Meta>; -export const Simple: StoryFn> = (args) => ; +export const Simple: StoryObj> = {}; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapsiblePanel.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapsiblePanel.stories.tsx index 8bc7052c0c556..6db1bb09bca0d 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapsiblePanel.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapsiblePanel.stories.tsx @@ -35,4 +35,6 @@ const Template: StoryFn = (args) => { ); }; -export const Default = Template.bind({}); +export const Default = { + render: Template, +}; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx index bbd2ffac4944f..71b68a625d2f2 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx @@ -1,8 +1,8 @@ import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; import { FormProvider } from 'react-hook-form'; +import { action } from 'storybook/actions'; import { AppLogsFilter } from './AppLogsFilter'; import { useAppLogsFilterForm } from '../useAppLogsFilterForm'; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx index 4838833d8192e..7982d5e63b04e 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx @@ -1,8 +1,8 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; +import { action } from 'storybook/actions'; import { AppLogsFilterContextualBar } from './AppLogsFilterContextualBar'; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx index 5d512cfb9f74b..97d14f60c7688 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx @@ -1,9 +1,9 @@ import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; import type { ComponentProps } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { action } from 'storybook/actions'; import { DateTimeModal } from './DateTimeModal'; diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx index 23447ac3dd5c9..b5942f7731970 100644 --- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx @@ -1,9 +1,9 @@ import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { action } from 'storybook/actions'; import { ExportLogsModal } from './ExportLogsModal'; @@ -36,4 +36,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn> = (args) => ; +export const Default: StoryObj> = {}; diff --git a/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.stories.tsx b/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.stories.tsx index d681101ffd8b5..c423529e85622 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import PrivateEmptyState from './PrivateEmptyState'; @@ -10,5 +10,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'PageEmptyPrivateApps'; +export const Default: StoryObj = { + render: () => , + name: 'PageEmptyPrivateApps', +}; diff --git a/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.stories.tsx b/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.stories.tsx index 728825b08f787..48ed76d2d575e 100644 --- a/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.stories.tsx +++ b/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import UnsupportedEmptyState from './UnsupportedEmptyState'; @@ -10,5 +10,7 @@ export default { }, } as Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'UnsupportedEmptyState'; +export const Default: StoryObj = { + render: () => , + name: 'UnsupportedEmptyState', +}; diff --git a/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.stories.tsx b/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.stories.tsx index aabec0af3e030..27c958f3948d2 100644 --- a/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.stories.tsx +++ b/apps/meteor/client/views/marketplace/components/AppInstallModal/AppInstallModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import AppInstallModal from './AppInstallModal'; @@ -9,12 +9,12 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Default = { + name: 'AppInstallModal', -export const Default = Template.bind({}); -Default.storyName = 'AppInstallModal'; -Default.args = { - enabled: 1, - limit: 3, - appName: 'Example-app-name', + args: { + enabled: 1, + limit: 3, + appName: 'Example-app-name', + }, }; diff --git a/apps/meteor/client/views/marketplace/components/UninstallGrandfatheredAppModal/UninstallGrandfatheredAppModal.stories.tsx b/apps/meteor/client/views/marketplace/components/UninstallGrandfatheredAppModal/UninstallGrandfatheredAppModal.stories.tsx index db1af5127aa32..171e3d414ebf5 100644 --- a/apps/meteor/client/views/marketplace/components/UninstallGrandfatheredAppModal/UninstallGrandfatheredAppModal.stories.tsx +++ b/apps/meteor/client/views/marketplace/components/UninstallGrandfatheredAppModal/UninstallGrandfatheredAppModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import UninstallGrandfatheredAppModal from './UninstallGrandfatheredAppModal'; @@ -9,10 +9,10 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Default = { + name: 'UninstallGrandfatheredAppModal', -export const Default = Template.bind({}); -Default.storyName = 'UninstallGrandfatheredAppModal'; -Default.args = { - appName: 'Example-App-Name', + args: { + appName: 'Example-App-Name', + }, }; diff --git a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.stories.tsx b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.stories.tsx index f9b551a7c7f98..9a02a9d6c00ad 100644 --- a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.stories.tsx +++ b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import NotAuthorizedPage from './NotAuthorizedPage'; @@ -9,5 +9,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'NotAuthorizedPage'; +export const Default: StoryObj = { + render: () => , + name: 'NotAuthorizedPage', +}; diff --git a/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx b/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx index 32c9e7a350774..c03dbab0ed819 100644 --- a/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx +++ b/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx @@ -1,5 +1,5 @@ import { Box, Skeleton } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import BusinessHoursMultiple from './BusinessHoursMultiple'; @@ -17,12 +17,14 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'BusinessHoursMultiple'; -Default.args = { - departmentList: [ - [1, 'Support'], - [2, 'Marketing'], - [3, ], - ], -} as any; +export const Default: StoryObj = { + name: 'BusinessHoursMultiple', + + args: { + departmentList: [ + [1, 'Support'], + [2, 'Marketing'], + [3, ], + ], + } as any, +}; diff --git a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.stories.tsx b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.stories.tsx index f882a8f8b5a9f..f29001308a3a2 100644 --- a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.stories.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import AnalyticsPage from './AnalyticsPage'; @@ -10,5 +10,7 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'AnalyticsPage'; +export const Default: StoryObj = { + render: () => , + name: 'AnalyticsPage', +}; diff --git a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.stories.tsx b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.stories.tsx index fc152ee4a6c3e..a17eb3bc8a609 100644 --- a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.stories.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import DateRangePicker from './DateRangePicker'; @@ -11,5 +11,6 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'DateRangePicker'; +export const Default: StoryObj = { + name: 'DateRangePicker', +}; diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.stories.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.stories.tsx index ac86765a4d439..483b98e0801af 100644 --- a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.stories.tsx +++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import AppearanceForm from './AppearanceForm'; @@ -6,5 +6,7 @@ export default { component: AppearanceForm, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'AppearanceForm'; +export const Default: StoryObj = { + render: () => , + name: 'AppearanceForm', +}; diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx index f01a366b108aa..f9368b0d0831c 100644 --- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx +++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import BusinessHoursForm from './BusinessHoursForm'; @@ -14,5 +14,6 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'BusinessHoursForm'; +export const Default: StoryObj = { + name: 'BusinessHoursForm', +}; diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx index 4cecb86cf5bbe..65f29058e7bda 100644 --- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx +++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import BusinessHoursTable from './BusinessHoursTable'; @@ -12,53 +12,57 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (_args) => ; -Default.storyName = 'BusinessHoursTable'; -Default.args = { - businessHours: [ - { - name: '', - timezone: { name: 'America/Sao_Paulo' }, - workHours: [ - { day: 'Monday', open: true }, - { day: 'Tuesday', open: true }, - { day: 'Wednesday', open: true }, - { day: 'Saturday', open: true }, - ], - }, - { - name: 'Extra', - timezone: { name: 'America/Sao_Paulo' }, - workHours: [ - { day: 'Monday', open: true }, - { day: 'Tuesday', open: true }, - { day: 'Saturday', open: true }, - ], - }, - { - name: 'Extra2', - timezone: { name: 'America/Sao_Paulo' }, - workHours: [ - { day: 'Saturday', open: true }, - { day: 'Sunday', open: true }, - { day: 'Monday', open: false }, - ], - }, - { - name: 'Extra3', - timezone: { name: 'America/Sao_Paulo' }, - workHours: [ - { day: 'Monday', open: true }, - { day: 'Saturday', open: true }, - ], - }, +export const Default: StoryObj = { + render: (_args) => , + name: 'BusinessHoursTable', + + args: { + businessHours: [ + { + name: '', + timezone: { name: 'America/Sao_Paulo' }, + workHours: [ + { day: 'Monday', open: true }, + { day: 'Tuesday', open: true }, + { day: 'Wednesday', open: true }, + { day: 'Saturday', open: true }, + ], + }, + { + name: 'Extra', + timezone: { name: 'America/Sao_Paulo' }, + workHours: [ + { day: 'Monday', open: true }, + { day: 'Tuesday', open: true }, + { day: 'Saturday', open: true }, + ], + }, + { + name: 'Extra2', + timezone: { name: 'America/Sao_Paulo' }, + workHours: [ + { day: 'Saturday', open: true }, + { day: 'Sunday', open: true }, + { day: 'Monday', open: false }, + ], + }, + { + name: 'Extra3', + timezone: { name: 'America/Sao_Paulo' }, + workHours: [ + { day: 'Monday', open: true }, + { day: 'Saturday', open: true }, + ], + }, + ], + params: {}, + }, + + decorators: [ + (fn) => ( + + {fn()} + + ), ], - params: {}, }; -Default.decorators = [ - (fn) => ( - - {fn()} - - ), -]; diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.stories.tsx index be3b264f6c83d..af4eee8ab13d0 100644 --- a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.stories.tsx +++ b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import CannedResponsesComposer from './CannedResponsesComposer'; @@ -6,5 +6,6 @@ export default { component: CannedResponsesComposer, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CannedResponsesComposer'; +export const Default: StoryObj = { + name: 'CannedResponsesComposer', +}; diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx index 4175b17f49e8a..1ce7b50935211 100644 --- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx +++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import CannedResponse from './CannedResponse'; @@ -12,23 +12,25 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CannedResponse'; -Default.args = { - allowEdit: true, - data: { - shortcut: 'test3 long long long long long long long long long', - text: 'simple canned response test3 long long long long long long long long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long', - scope: 'Customer Support long long long long long long long long long long', - tags: ['sales', 'support', 'long', 'long', 'long', 'long', 'long', 'long', 'long', 'long'], - departmentName: '', +export const Default: StoryObj = { + name: 'CannedResponse', + + args: { + allowEdit: true, + data: { + shortcut: 'test3 long long long long long long long long long', + text: 'simple canned response test3 long long long long long long long long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long', + scope: 'Customer Support long long long long long long long long long long', + tags: ['sales', 'support', 'long', 'long', 'long', 'long', 'long', 'long', 'long', 'long'], + departmentName: '', + }, }, -}; -Default.decorators = [ - (fn) => ( - - {fn()} - - ), -]; + decorators: [ + (fn) => ( + + {fn()} + + ), + ], +}; diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx index 538123afda88a..0579298a97bea 100644 --- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx +++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx @@ -1,6 +1,6 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import CannedResponseList from './CannedResponseList'; @@ -13,65 +13,68 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CannedResponseList'; -Default.args = { - options: [ - ['all', 'All'], - ['global', 'Public'], - ['user', 'Private'], - ], - cannedItems: [ - { - shortcut: 'test', - text: 'simple canned response test', - scope: 'global', - tags: ['sales', 'support'], - _createdAt: new Date(), - _id: 'test', - _updatedAt: new Date(), - createdBy: { - _id: 'rocket.cat', - username: 'rocket.cat', +export const Default: StoryObj = { + name: 'CannedResponseList', + + args: { + options: [ + ['all', 'All'], + ['global', 'Public'], + ['user', 'Private'], + ], + cannedItems: [ + { + shortcut: 'test', + text: 'simple canned response test', + scope: 'global', + tags: ['sales', 'support'], + _createdAt: new Date(), + _id: 'test', + _updatedAt: new Date(), + createdBy: { + _id: 'rocket.cat', + username: 'rocket.cat', + }, + departmentName: '', + userId: 'rocket.cat', + departmentId: '', }, - departmentName: '', - userId: 'rocket.cat', - departmentId: '', - }, - { - shortcut: 'test2', - text: 'simple canned response test2', - scope: 'Customer Support', - tags: [], - _createdAt: new Date(), - _id: 'test', - _updatedAt: new Date(), - createdBy: { - _id: 'rocket.cat', - username: 'rocket.cat', + { + shortcut: 'test2', + text: 'simple canned response test2', + scope: 'Customer Support', + tags: [], + _createdAt: new Date(), + _id: 'test', + _updatedAt: new Date(), + createdBy: { + _id: 'rocket.cat', + username: 'rocket.cat', + }, + departmentName: '', + userId: 'rocket.cat', + departmentId: '', }, - departmentName: '', - userId: 'rocket.cat', - departmentId: '', - }, - { - shortcut: 'test3 long long long long long long long long long', - text: 'simple canned response test3 long long long long long long long long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long', - scope: 'Customer Support long long long long long long long long long long', - tags: ['sales', 'support', 'long', 'long', 'long', 'long', 'long', 'long', 'long', 'long'], - _createdAt: new Date(), - _id: 'test', - _updatedAt: new Date(), - createdBy: { - _id: 'rocket.cat', - username: 'rocket.cat', + { + shortcut: 'test3 long long long long long long long long long', + text: 'simple canned response test3 long long long long long long long long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long', + scope: 'Customer Support long long long long long long long long long long', + tags: ['sales', 'support', 'long', 'long', 'long', 'long', 'long', 'long', 'long', 'long'], + _createdAt: new Date(), + _id: 'test', + _updatedAt: new Date(), + createdBy: { + _id: 'rocket.cat', + username: 'rocket.cat', + }, + departmentName: '', + userId: 'rocket.cat', + departmentId: '', }, - departmentName: '', - userId: 'rocket.cat', - departmentId: '', - }, - ], - itemCount: 3, - loadMoreItems: action('loadMoreItems'), + ], + itemCount: 3, + loadMoreItems: action('loadMoreItems'), + }, + + decorators: [(fn) => {fn()}], }; -Default.decorators = [(fn) => {fn()}]; diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx index e033cf5394512..148dc73fe039b 100644 --- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx +++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import Item from './Item'; @@ -12,24 +12,27 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'Item'; -Default.args = { - data: { - shortcut: 'test', - text: 'simple canned response test', - scope: 'global', - tags: ['sales', 'support'], - _createdAt: new Date(), - _id: 'test', - _updatedAt: new Date(), - createdBy: { - _id: 'rocket.cat', - username: 'rocket.cat', +export const Default: StoryObj = { + name: 'Item', + + args: { + data: { + shortcut: 'test', + text: 'simple canned response test', + scope: 'global', + tags: ['sales', 'support'], + _createdAt: new Date(), + _id: 'test', + _updatedAt: new Date(), + createdBy: { + _id: 'rocket.cat', + username: 'rocket.cat', + }, + departmentName: '', + userId: 'rocket.cat', + departmentId: '', }, - departmentName: '', - userId: 'rocket.cat', - departmentId: '', }, + + decorators: [(fn) => {fn()}], }; -Default.decorators = [(fn) => {fn()}]; diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.stories.tsx index 9bc93c6084c70..4a8b310fecca9 100644 --- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.stories.tsx +++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import CreateCannedResponseModal from './CreateCannedResponseModal'; @@ -11,6 +11,4 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); +export const Default = {}; diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.stories.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.stories.tsx index 6e825d06ac357..92413eebc5568 100644 --- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.stories.tsx +++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import { faker } from '@faker-js/faker/locale/af_ZA'; import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/MessageStep.stories.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/MessageStep.stories.tsx index 4960d4ac70299..27ffa02c5215e 100644 --- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/MessageStep.stories.tsx +++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/MessageStep.stories.tsx @@ -1,8 +1,7 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import { Box } from '@rocket.chat/fuselage'; import { WizardContext, StepsLinkedList } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import MessageStep from './MessageStep'; import { createFakeContact } from '../../../../../../../../tests/mocks/data'; diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RecipientStep.stories.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RecipientStep.stories.tsx index 003bf14150b13..e73426335eba1 100644 --- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RecipientStep.stories.tsx +++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RecipientStep.stories.tsx @@ -1,9 +1,8 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; import { WizardContext, StepsLinkedList } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import RecipientStep from './RecipientStep'; import { createFakeContact, createFakeContactChannel, createFakeContactWithManagerData } from '../../../../../../../../tests/mocks/data'; diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RepliesStep.stories.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RepliesStep.stories.tsx index 391ef96567ec4..1b999f9bbbf24 100644 --- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RepliesStep.stories.tsx +++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/steps/RepliesStep.stories.tsx @@ -1,10 +1,9 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import { faker } from '@faker-js/faker'; import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; import { WizardContext, StepsLinkedList } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import RepliesStep from './RepliesStep'; import { createFakeAgent, createFakeDepartment } from '../../../../../../../../tests/mocks/data'; diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageUpsellModal/OutboundMessageUpsellModal.stories.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageUpsellModal/OutboundMessageUpsellModal.stories.tsx index 04a05602521df..29caa31529006 100644 --- a/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageUpsellModal/OutboundMessageUpsellModal.stories.tsx +++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageUpsellModal/OutboundMessageUpsellModal.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import OutboundMessageUpsellModal from './OutboundMessageUpsellModal'; diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx index 0b4719244fda3..20ebc46771e13 100644 --- a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx +++ b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import EditCustomFields from './EditCustomFields'; @@ -14,5 +14,6 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CustomFieldsForm'; +export const Default: StoryObj = { + name: 'CustomFieldsForm', +}; diff --git a/apps/meteor/client/views/omnichannel/installation/Installation.stories.tsx b/apps/meteor/client/views/omnichannel/installation/Installation.stories.tsx index b499d39ae1153..e473cc5412a0e 100644 --- a/apps/meteor/client/views/omnichannel/installation/Installation.stories.tsx +++ b/apps/meteor/client/views/omnichannel/installation/Installation.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import Installation from './Installation'; @@ -6,5 +6,7 @@ export default { component: Installation, } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'Installation'; +export const Default: StoryObj = { + render: () => , + name: 'Installation', +}; diff --git a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.stories.tsx b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.stories.tsx index eb7f5b070f07f..79aa570895c6c 100644 --- a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.stories.tsx +++ b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ForwardChatModal from './ForwardChatModal'; import { createFakeOmnichannelRoom } from '../../../../tests/mocks/data'; @@ -16,4 +16,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; diff --git a/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx b/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx index 4d62542e92f20..9c12aa3584dcf 100644 --- a/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx +++ b/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ReturnChatQueueModal from './ReturnChatQueueModal'; @@ -14,4 +14,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx index 86b394a701be2..9f06056871060 100644 --- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx +++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterContainer.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import CounterContainer from './CounterContainer'; @@ -6,13 +6,15 @@ export default { component: CounterContainer, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'CounterContainer'; -Default.args = { - totals: [ - { title: 'Total_conversations', value: 10 }, - { title: 'Open_conversations', value: 10 }, - { title: 'Total_messages', value: 10 }, - { title: 'Total_visitors', value: 0 }, - ], +export const Default: StoryObj = { + name: 'CounterContainer', + + args: { + totals: [ + { title: 'Total_conversations', value: 10 }, + { title: 'Open_conversations', value: 10 }, + { title: 'Total_messages', value: 10 }, + { title: 'Total_visitors', value: 0 }, + ], + }, }; diff --git a/apps/meteor/client/views/omnichannel/triggers/TriggersForm.stories.tsx b/apps/meteor/client/views/omnichannel/triggers/TriggersForm.stories.tsx index f5be7d8faff14..3d3ac46c90a0d 100644 --- a/apps/meteor/client/views/omnichannel/triggers/TriggersForm.stories.tsx +++ b/apps/meteor/client/views/omnichannel/triggers/TriggersForm.stories.tsx @@ -1,5 +1,5 @@ import { FieldGroup, Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import EditTrigger from './EditTrigger'; @@ -14,4 +14,4 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; diff --git a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx index 5869da9ba0a2f..0753b45a29058 100644 --- a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx +++ b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import RoomAnnouncement from '.'; @@ -6,7 +6,8 @@ export default { component: RoomAnnouncement, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.args = { - announcement: 'Lorem Ipsum Indolor', +export const Default: StoryObj = { + args: { + announcement: 'Lorem Ipsum Indolor', + }, }; diff --git a/apps/meteor/client/views/room/body/RoomInviteBody.stories.tsx b/apps/meteor/client/views/room/body/RoomInviteBody.stories.tsx index 7e131a441f640..a5feeaafa1e15 100644 --- a/apps/meteor/client/views/room/body/RoomInviteBody.stories.tsx +++ b/apps/meteor/client/views/room/body/RoomInviteBody.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import RoomInvite from './RoomInviteBody'; diff --git a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.tsx b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.tsx index 2a11bc599fa83..83daacfa46e29 100644 --- a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.tsx @@ -1,5 +1,5 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import AutoTranslate from './AutoTranslate'; @@ -11,13 +11,15 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'AutoTranslate'; -Default.args = { - language: 'en', - languages: [ - ['en', 'English'], - ['jp', 'Japanese'], - ['pt', 'Portuguese'], - ], +export const Default: StoryObj = { + name: 'AutoTranslate', + + args: { + language: 'en', + languages: [ + ['en', 'English'], + ['jp', 'Japanese'], + ['pt', 'Portuguese'], + ], + }, }; diff --git a/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.stories.tsx index b104003144c10..3eb6b377711fe 100644 --- a/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.stories.tsx @@ -1,6 +1,6 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import BannedUsers from './BannedUsers'; diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.stories.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.stories.tsx index 30e64b52dc6d2..02595ea20c6be 100644 --- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.stories.tsx @@ -1,7 +1,7 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import type { UseInfiniteQueryResult } from '@tanstack/react-query'; +import { action } from 'storybook/actions'; import DiscussionsList from './DiscussionsList'; @@ -24,8 +24,6 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - const fakeDiscussions = Array.from({ length: 10 }, (_, i) => ({ _id: String(i), msg: `Discussion ${i}`, @@ -42,21 +40,24 @@ const fakeDiscussions = Array.from({ length: 10 }, (_, i) => ({ }, })); -export const Default = Template.bind({}); -Default.args = { - isSuccess: true, - discussions: fakeDiscussions, - itemCount: fakeDiscussions.length, +export const Default = { + args: { + isSuccess: true, + discussions: fakeDiscussions, + itemCount: fakeDiscussions.length, + }, }; -export const Loading = Template.bind({}); -Loading.args = { - isPending: true, +export const Loading = { + args: { + isPending: true, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - isSuccess: true, - discussions: [], - itemCount: 0, +export const Empty = { + args: { + isSuccess: true, + discussions: [], + itemCount: 0, + }, }; diff --git a/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.tsx b/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.tsx index b01754beccb21..a1158d7db0cc5 100644 --- a/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.tsx @@ -1,5 +1,5 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import ExportMessages from './index'; @@ -11,5 +11,7 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = () => ; -Default.storyName = 'ExportMessages'; +export const Default: StoryObj = { + render: () => , + name: 'ExportMessages', +}; diff --git a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.tsx b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.tsx index a8c7a06e47719..848db81c7421b 100644 --- a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.tsx @@ -1,7 +1,7 @@ import type { RoomType } from '@rocket.chat/core-typings'; import { mockAppRoot } from '@rocket.chat/mock-providers'; import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import RoomInfo from './RoomInfo'; import FakeRoomProvider from '../../../../../../tests/mocks/client/FakeRoomProvider'; @@ -45,48 +45,51 @@ const roomArgs = { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero', }; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - room: roomArgs, +export const Default = { + args: { + room: roomArgs, + }, }; -export const Archived = Template.bind({}); -Archived.args = { - ...Default.args, - room: { - ...roomArgs, - archived: true, +export const Archived = { + args: { + ...Default.args, + room: { + ...roomArgs, + archived: true, + }, }, }; -export const Broadcast = Template.bind({}); -Broadcast.args = { - ...Default.args, - room: { - ...roomArgs, - broadcast: true, +export const Broadcast = { + args: { + ...Default.args, + room: { + ...roomArgs, + broadcast: true, + }, }, }; -export const ABAC = Template.bind({}); -ABAC.decorators = [ - mockAppRoot().withSetting('ABAC_Enabled', true).withSetting('ABAC_ShowAttributesInRooms', true).buildStoryDecorator(), - (fn) => ( - - {fn()} - - ), -]; -ABAC.args = { - ...Default.args, - room: { - ...roomArgs, - abacAttributes: [ - { key: 'Chat-sensitivity', values: ['Classified', 'Top-Secret'] }, - { key: 'Country', values: ['US-only'] }, - { key: 'Project', values: ['Ruminator-2000'] }, - ], +export const ABAC: StoryObj = { + decorators: [ + mockAppRoot().withSetting('ABAC_Enabled', true).withSetting('ABAC_ShowAttributesInRooms', true).buildStoryDecorator(), + (fn) => ( + + {fn()} + + ), + ], + + args: { + ...Default.args, + room: { + ...roomArgs, + abacAttributes: [ + { key: 'Chat-sensitivity', values: ['Classified', 'Top-Secret'] }, + { key: 'Country', values: ['US-only'] }, + { key: 'Project', values: ['Ruminator-2000'] }, + ], + }, }, }; diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.tsx index 07fc1f52eb956..487e463d61fe7 100644 --- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.tsx @@ -1,6 +1,6 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import NotificationsPreferences from './NotificationPreferences'; @@ -12,18 +12,20 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'NotificationsPreferences'; -Default.args = { - handleClose: action('handleClose'), - handleSave: action('handleSaveButton'), - handlePlaySound: action('handlePlaySound'), - notificationOptions: { - alerts: [ - ['default', 'Default'], - ['all', 'All_messages'], - ['mentions', 'Mentions'], - ['nothing', 'Nothing'], - ], +export const Default: StoryObj = { + name: 'NotificationsPreferences', + + args: { + handleClose: action('handleClose'), + handleSave: action('handleSaveButton'), + handlePlaySound: action('handlePlaySound'), + notificationOptions: { + alerts: [ + ['default', 'Default'], + ['all', 'All_messages'], + ['mentions', 'Mentions'], + ['nothing', 'Nothing'], + ], + }, }, }; diff --git a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.tsx b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.tsx index fe83afc561191..4addf6128b86e 100644 --- a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.tsx @@ -1,5 +1,5 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { FormProvider, useForm } from 'react-hook-form'; import PruneMessages from './PruneMessages'; @@ -27,11 +27,10 @@ export default { ], } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Default = {}; -export const Default = Template.bind({}); - -export const WithCallout = Template.bind({}); -WithCallout.args = { - callOutText: 'This is a callout', +export const WithCallout = { + args: { + callOutText: 'This is a callout', + }, }; diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.tsx index 1d6e0977982b1..dc409378ee9f6 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.tsx @@ -1,6 +1,6 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import RoomFiles from './RoomFiles'; @@ -20,8 +20,6 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - const fakeItems = Array.from({ length: 10 }, (_, i) => ({ _id: String(i), name: `File ${i}`, @@ -34,21 +32,24 @@ const fakeItems = Array.from({ length: 10 }, (_, i) => ({ _updatedAt: new Date(), })); -export const Default = Template.bind({}); -Default.args = { - filesItems: fakeItems, - total: fakeItems.length, - isSuccess: true, +export const Default = { + args: { + filesItems: fakeItems, + total: fakeItems.length, + isSuccess: true, + }, }; -export const Loading = Template.bind({}); -Loading.args = { - isPending: true, +export const Loading = { + args: { + isPending: true, + }, }; -export const Empty = Template.bind({}); -Empty.args = { - isSuccess: true, - filesItems: [], - total: 0, +export const Empty = { + args: { + isSuccess: true, + filesItems: [], + total: 0, + }, }; diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.tsx index dde7696274477..da72c7d5fdc6f 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.tsx @@ -1,5 +1,5 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import FileItem from './FileItem'; @@ -11,18 +11,20 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'FileItem'; -Default.args = { - fileData: { - _id: '1', - name: 'Lorem Ipsum Indolor Dolor', - url: '#', - uploadedAt: new Date(), - user: { - _id: 'rocket.cat', - username: 'rocket.cat', +export const Default: StoryObj = { + name: 'FileItem', + + args: { + fileData: { + _id: '1', + name: 'Lorem Ipsum Indolor Dolor', + url: '#', + uploadedAt: new Date(), + user: { + _id: 'rocket.cat', + username: 'rocket.cat', + }, + _updatedAt: new Date(), }, - _updatedAt: new Date(), }, }; diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx index bd7fc832a759d..c4db096a361e6 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx @@ -1,5 +1,5 @@ import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import AddUsers from './AddUsers'; @@ -12,5 +12,6 @@ export default { decorators: [(fn) => {fn()}], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'AddUsers'; +export const Default: StoryObj = { + name: 'AddUsers', +}; diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx index 67af7834aeba4..5e3d1f75cc058 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx @@ -1,6 +1,6 @@ import { Box } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import InviteUsers from './InviteUsers'; import InviteUsersEdit from './InviteUsersEdit'; @@ -28,17 +28,23 @@ export default { ], } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'Invite Link'; -Default.args = { - linkText: links.go.invite, - captionText: 'Expire on February 4, 2020 4:45 PM.', +export const Default: StoryObj = { + name: 'Invite Link', + + args: { + linkText: links.go.invite, + captionText: 'Expire on February 4, 2020 4:45 PM.', + }, }; -export const InviteEdit: StoryFn = (args) => ( - -); +export const InviteEdit: StoryObj = { + render: (args) => , +}; -export const InviteLoading: StoryFn = (args) => ; +export const InviteLoading: StoryObj = { + render: (args) => , +}; -export const InviteError: StoryFn = (args) => ; +export const InviteError: StoryObj = { + render: (args) => , +}; diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.tsx index f41b215493693..15389727eeaee 100644 --- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.tsx +++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.tsx @@ -1,7 +1,7 @@ import { UserStatus } from '@rocket.chat/core-typings'; import { Contextualbar } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import RoomMembers from './RoomMembers'; @@ -25,71 +25,74 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - isSuccess: true, - members: [ - { - _id: 'rocket.cat', - username: 'rocket.cat', - status: UserStatus.ONLINE, - name: 'Rocket.Cat', - roles: ['user'], - subscription: { - _id: 'sub-rocket.cat', - ts: '2025-01-01T00:00:00Z', +export const Default = { + args: { + isSuccess: true, + members: [ + { + _id: 'rocket.cat', + username: 'rocket.cat', + status: UserStatus.ONLINE, + name: 'Rocket.Cat', + roles: ['user'], + subscription: { + _id: 'sub-rocket.cat', + ts: '2025-01-01T00:00:00Z', + }, }, - }, - ], + ], + }, }; -export const Loading = Template.bind({}); -Loading.args = { - isPending: true, +export const Loading = { + args: { + isPending: true, + }, }; -export const WithABACRoom = Template.bind({}); -WithABACRoom.args = { - isSuccess: true, - members: [ - { - _id: 'rocket.cat', - username: 'rocket.cat', - status: UserStatus.ONLINE, - name: 'Rocket.Cat', - roles: ['user'], - subscription: { - _id: 'sub-rocket.cat', - ts: '2025-01-01T00:00:00Z', +export const WithABACRoom = { + args: { + isSuccess: true, + members: [ + { + _id: 'rocket.cat', + username: 'rocket.cat', + status: UserStatus.ONLINE, + name: 'Rocket.Cat', + roles: ['user'], + subscription: { + _id: 'sub-rocket.cat', + ts: '2025-01-01T00:00:00Z', + }, }, - }, - ], - isABACRoom: true, + ], + isABACRoom: true, + }, }; -export const WithInvitedMember = Template.bind({}); -WithInvitedMember.args = { - isSuccess: true, - members: [ - { - _id: 'rocket.cat', - username: 'rocket.cat', - roles: ['user'], - subscription: { - _id: 'sub-rocket.cat', - status: 'INVITED', - ts: '2025-01-01T00:00:00Z', +export const WithInvitedMember = { + args: { + isSuccess: true, + members: [ + { + _id: 'rocket.cat', + username: 'rocket.cat', + roles: ['user'], + subscription: { + _id: 'sub-rocket.cat', + status: 'INVITED', + ts: '2025-01-01T00:00:00Z', + }, + name: 'Rocket.Cat', }, - name: 'Rocket.Cat', - }, - ], + ], + }, }; -export const Empty = Template.bind({}); -Empty.args = { - isSuccess: true, - members: [], - total: 0, +export const Empty = { + args: { + isSuccess: true, + members: [], + total: 0, + }, }; diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx index 7d731a4d87edb..2aaad70ae512f 100644 --- a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx +++ b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import FileUploadModal from '.'; @@ -14,5 +14,6 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'FileUploadModal'; +export const Default: StoryObj = { + name: 'FileUploadModal', +}; diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.stories.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.stories.tsx index 14fbdc629391c..db5e0fd9ab007 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.stories.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamModal.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import DeleteTeamModal from '.'; import DeleteTeamChannels from './DeleteTeamChannels'; @@ -12,45 +12,26 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'DeleteTeamModal'; -Default.args = { - teamId: '123', - onConfirm: action('onConfirm'), - onCancel: action('onCancel'), -}; +export const Default: StoryObj = { + name: 'DeleteTeamModal', -export const ChannelsStep: StoryFn = (args) => ; -ChannelsStep.args = { - rooms: Array.from({ length: 15 }).map((_, i) => ({ - _id: `${i}`, - fname: `Room #${i}`, - name: `room-${i}`, - usersCount: 10 * i, - type: 'p', - t: 'p', - msgs: 10, - u: { - _id: 'user', - }, - autoTranslateLanguage: 'english', - _updatedAt: '2022-02-02 09:00', - })), - selectedRooms: {}, - onConfirm: action('onConfirm'), - onCancel: action('onCancel'), - onChangeRoomSelection: action('onChangeRoomSelection'), - onToggleAllRooms: action('onToggleAllRooms'), + args: { + teamId: '123', + onConfirm: action('onConfirm'), + onCancel: action('onCancel'), + }, }; -export const ConfirmationStep: StoryFn = (args) => ; -ConfirmationStep.args = { - deletedRooms: { - test123: { - _id: `123`, - fname: `Room 123`, - name: `room-123`, - usersCount: 10, +export const ChannelsStep: StoryObj = { + render: (args) => , + + args: { + rooms: Array.from({ length: 15 }).map((_, i) => ({ + _id: `${i}`, + fname: `Room #${i}`, + name: `room-${i}`, + usersCount: 10 * i, + type: 'p', t: 'p', msgs: 10, u: { @@ -58,24 +39,51 @@ ConfirmationStep.args = { }, autoTranslateLanguage: 'english', _updatedAt: '2022-02-02 09:00', - }, + })), + selectedRooms: {}, + onConfirm: action('onConfirm'), + onCancel: action('onCancel'), + onChangeRoomSelection: action('onChangeRoomSelection'), + onToggleAllRooms: action('onToggleAllRooms'), }, - keptRooms: { - test123: { - _id: `123`, - fname: `Room 123`, - name: `room-123`, - usersCount: 10, - t: 'p', - msgs: 10, - u: { - _id: 'user', +}; + +export const ConfirmationStep: StoryObj = { + render: (args) => , + + args: { + deletedRooms: { + test123: { + _id: `123`, + fname: `Room 123`, + name: `room-123`, + usersCount: 10, + t: 'p', + msgs: 10, + u: { + _id: 'user', + }, + autoTranslateLanguage: 'english', + _updatedAt: '2022-02-02 09:00', + }, + }, + keptRooms: { + test123: { + _id: `123`, + fname: `Room 123`, + name: `room-123`, + usersCount: 10, + t: 'p', + msgs: 10, + u: { + _id: 'user', + }, + autoTranslateLanguage: 'english', + _updatedAt: '2022-02-02 09:00', }, - autoTranslateLanguage: 'english', - _updatedAt: '2022-02-02 09:00', }, + onConfirm: async (_roomsToDelete) => action('onConfirm'), + onCancel: action('onCancel'), + onReturn: action('onReturn'), }, - onConfirm: async (_roomsToDelete) => action('onConfirm'), - onCancel: action('onCancel'), - onReturn: action('onReturn'), }; diff --git a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModal.stories.tsx b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModal.stories.tsx index 411dc9891cc36..c5d8dd1d6d2a7 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModal.stories.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/LeaveTeam/LeaveTeamModal/LeaveTeamModal.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from 'storybook/actions'; import LeaveTeamModal from './LeaveTeamModal'; import LeaveTeamModalChannels from './LeaveTeamModalChannels'; @@ -12,35 +12,41 @@ export default { }, } satisfies Meta; -export const ChannelsStep: StoryFn = (args) => ; -ChannelsStep.storyName = 'LeaveTeamModalChannels'; -ChannelsStep.args = { - rooms: Array.from({ length: 15 }).map((_, i) => ({ - _id: `${i}`, - fname: `Room #${i}`, - name: `room-${i}`, - usersCount: 10 * i, - type: 'p', - t: 'p', - isLastOwner: false, - msgs: 10, - u: { - _id: 'user', - }, - autoTranslateLanguage: 'english', - _updatedAt: '2022-02-02 09:00', - })), - selectedRooms: {}, - onConfirm: action('onConfirm'), - onCancel: action('onCancel'), - onChangeRoomSelection: action('onChangeRoomSelection'), - onToggleAllRooms: action('onToggleAllRooms'), +export const ChannelsStep: StoryObj = { + render: (args) => , + name: 'LeaveTeamModalChannels', + + args: { + rooms: Array.from({ length: 15 }).map((_, i) => ({ + _id: `${i}`, + fname: `Room #${i}`, + name: `room-${i}`, + usersCount: 10 * i, + type: 'p', + t: 'p', + isLastOwner: false, + msgs: 10, + u: { + _id: 'user', + }, + autoTranslateLanguage: 'english', + _updatedAt: '2022-02-02 09:00', + })), + selectedRooms: {}, + onConfirm: action('onConfirm'), + onCancel: action('onCancel'), + onChangeRoomSelection: action('onChangeRoomSelection'), + onToggleAllRooms: action('onToggleAllRooms'), + }, }; -export const ConfirmationStep: StoryFn = (args) => ; -ConfirmationStep.storyName = 'StepTwo'; -ConfirmationStep.args = { - onConfirm: action('onConfirm'), - onCancel: action('onCancel'), - onClose: action('onClose'), +export const ConfirmationStep: StoryObj = { + render: (args) => , + name: 'StepTwo', + + args: { + onConfirm: action('onConfirm'), + onCancel: action('onCancel'), + onClose: action('onClose'), + }, }; diff --git a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.stories.tsx b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.stories.tsx index d4ac74b0f891c..1839260a5bd91 100644 --- a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.stories.tsx +++ b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.stories.tsx @@ -1,6 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Contextualbar } from '@rocket.chat/ui-client'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import TeamsInfo from './TeamsInfo'; @@ -27,16 +27,16 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; +export const Default = {}; -export const Default = Template.bind({}); - -export const Archived = Template.bind({}); -Archived.args = { - room: { ...room, archived: true }, +export const Archived = { + args: { + room: { ...room, archived: true }, + }, }; -export const Broadcast = Template.bind({}); -Broadcast.args = { - room: { ...room, broadcast: true }, +export const Broadcast = { + args: { + room: { ...room, broadcast: true }, + }, }; diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 074b8f0169d67..05097ad145eeb 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -325,14 +325,10 @@ "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/livechat": "workspace:^", "@rocket.chat/mock-providers": "workspace:^", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/tsconfig": "workspace:*", - "@storybook/addon-a11y": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-interactions": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/react": "^9.1.13", + "@storybook/react-webpack5": "^9.1.13", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", "@testing-library/user-event": "~14.6.1", @@ -444,7 +440,7 @@ "react-docgen-typescript-plugin": "^1.0.8", "sinon": "^19.0.5", "source-map": "~0.7.6", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "stylelint": "^16.10.0", "stylelint-config-standard": "^36.0.1", "stylelint-order": "^6.0.4", diff --git a/apps/meteor/server/lib/migrations.ts b/apps/meteor/server/lib/migrations.ts index fd8c1a468bab4..1812f0473a4c2 100644 --- a/apps/meteor/server/lib/migrations.ts +++ b/apps/meteor/server/lib/migrations.ts @@ -18,8 +18,8 @@ const log = new Logger('Migrations'); const migrations = new Set(); // sets the control record -function setControl(control: Pick): Pick { - void Migrations.updateMany( +async function setControl(control: Pick): Promise> { + await Migrations.updateOne( { _id: 'control', }, @@ -107,8 +107,8 @@ export function addMigration(migration: IMigration): void { } // Side effect: saves version. -function unlock(version: number): void { - setControl({ +async function unlock(version: number): Promise { + await setControl({ locked: false, version, }); @@ -173,7 +173,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma // version 0 means it is a fresh database, just set the control to latest known version and skip if (currentVersion === 0) { - setControl({ + await setControl({ locked: false, version: orderedMigrations[orderedMigrations.length - 1].version, }); @@ -239,7 +239,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma process.exit(1); } log.startup('Finished migrating.'); - unlock(currentVersion); + await unlock(currentVersion); return true; } @@ -248,7 +248,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma msg: 'Already at target migration version', version, }); - unlock(currentVersion); + await unlock(currentVersion); return true; } @@ -274,7 +274,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma for (let i = startIdx; i < endIdx; i++) { migrations.push(async () => { await migrate('up', orderedMigrations[i + 1]); - setControl({ + await setControl({ locked: true, version: orderedMigrations[i + 1].version, }); @@ -284,7 +284,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma for (let i = startIdx; i > endIdx; i--) { migrations.push(async () => { await migrate('down', orderedMigrations[i]); - setControl({ + await setControl({ locked: true, version: orderedMigrations[i - 1].version, }); @@ -300,7 +300,7 @@ export async function migrateDatabase(targetVersion: 'latest' | number, subcomma process.exit(1); } - unlock(orderedMigrations[endIdx].version); + await unlock(orderedMigrations[endIdx].version); log.startup('Finished migrating.'); // remember to run meteor with --once otherwise it will restart diff --git a/apps/meteor/server/startup/serverRunning.ts b/apps/meteor/server/startup/serverRunning.ts index 9408895221357..f1cc50f8950f1 100644 --- a/apps/meteor/server/startup/serverRunning.ts +++ b/apps/meteor/server/startup/serverRunning.ts @@ -1,6 +1,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { License } from '@rocket.chat/license'; // import { Users } from '@rocket.chat/models'; import { Meteor } from 'meteor/meteor'; import semver from 'semver'; @@ -48,7 +49,8 @@ Meteor.startup(async () => { ` MongoDB Engine: ${mongoStorageEngine}`, ` Platform: ${process.platform}`, ` Process Port: ${process.env.PORT}`, - ` Site URL: ${settings.get('Site_Url')}`, + ` Site URL: ${settings.get('Site_Url')}`, + ` Hashed Site URL: ${License.getHashedWorkspaceUrl()}`, ]; if (Info.commit?.hash) { diff --git a/apps/meteor/tests/end-to-end/api/abac.ts b/apps/meteor/tests/end-to-end/api/abac.ts index 0ec6f1ea0c15e..47f78fb6a3a43 100644 --- a/apps/meteor/tests/end-to-end/api/abac.ts +++ b/apps/meteor/tests/end-to-end/api/abac.ts @@ -3167,10 +3167,7 @@ const addAbacAttributesToUserDirectly = async (userId: string, abacAttributes: I await mockServerReset(); await seedDefaultMocks(); - await seedGetDecisionBulk([ - { resourceDecisions: [{ decision: 'DECISION_PERMIT', ephemeralResourceId: room._id }] }, - { resourceDecisions: [{ decision: 'DECISION_PERMIT', ephemeralResourceId: room._id }] }, - ]); + await seedBulkDecisionByEntity([], 'DECISION_PERMIT'); await request .post(`/api/v1/abac/rooms/${room._id}/attributes/${attrKey}`) diff --git a/ee/packages/abac/src/pdp/VirtruPDP.spec.ts b/ee/packages/abac/src/pdp/VirtruPDP.spec.ts index d869fa685f8ee..6ea93b7b1beef 100644 --- a/ee/packages/abac/src/pdp/VirtruPDP.spec.ts +++ b/ee/packages/abac/src/pdp/VirtruPDP.spec.ts @@ -1,5 +1,6 @@ import { OnlyCompliantCanBeAddedToRoomError, PdpHealthCheckError } from '../errors'; -import { VirtruPDP } from './VirtruPDP'; +import { getDeniedSubjects, VirtruPDP } from './VirtruPDP'; +import type { Decision } from './types'; const serverFetchMock = jest.fn(); jest.mock('@rocket.chat/server-fetch', () => ({ serverFetch: (...a: unknown[]) => serverFetchMock(...a) })); @@ -88,6 +89,35 @@ describe('VirtruPDP.isAvailable', () => { }); }); +describe('getDeniedSubjects', () => { + const pair = (userId: string) => ({ user: { _id: userId }, room: { _id: 'r1' } }); + const [a, b, c] = [pair('a'), pair('b'), pair('c')]; + const resp = (...decisions: Decision[]) => ({ + resourceDecisions: decisions.map((decision) => ({ ephemeralResourceId: 'r1', decision })), + }); + + it('collects subjects with an explicit DENY decision', () => { + const responses = [resp('DECISION_DENY'), resp('DECISION_PERMIT'), resp('DECISION_DENY')]; + expect(getDeniedSubjects(responses, [a, b, c])).toEqual([a, c]); + }); + + it('skips subjects when every decision is PERMIT', () => { + expect(getDeniedSubjects([resp('DECISION_PERMIT')], [a])).toEqual([]); + }); + + it('skips inconclusive subjects (UNSPECIFIED, empty decisions, missing response)', () => { + expect(getDeniedSubjects([resp('DECISION_UNSPECIFIED'), resp(), undefined], [a, b, c])).toEqual([]); + }); + + it('treats a DENY among PERMITs in one response as denied', () => { + expect(getDeniedSubjects([resp('DECISION_PERMIT', 'DECISION_DENY')], [a])).toEqual([a]); + }); + + it('ignores responses without a matching subject', () => { + expect(getDeniedSubjects([resp('DECISION_DENY'), resp('DECISION_DENY')], [a])).toEqual([a]); + }); +}); + describe('VirtruPDP.canAccessObject', () => { const room = { _id: 'r1', abacAttributes: [{ key: 'clearance', values: ['secret'] }] }; @@ -284,13 +314,39 @@ describe('VirtruPDP.onRoomAttributesChanged', () => { expect(result).toEqual([u2]); }); - it('treats empty resourceDecisions as non-compliant', async () => { + it('does not evict on empty resourceDecisions (inconclusive)', async () => { const u = user(); usersFindActiveByRoomIds.mockReturnValue(asyncIterable([u])); const apiCall = jest.fn().mockResolvedValue({ decisionResponses: [{ resourceDecisions: [] }] }); const pdp = new VirtruPDP(mkClient({ apiCall })); const result = await pdp.onRoomAttributesChanged(room, newAttrs); - expect(result).toEqual([u]); + expect(result).toEqual([]); + }); + + it('does not evict on DECISION_UNSPECIFIED (inconclusive)', async () => { + usersFindActiveByRoomIds.mockReturnValue(asyncIterable([user()])); + const apiCall = jest.fn().mockResolvedValue({ + decisionResponses: [{ resourceDecisions: [{ ephemeralResourceId: 'r1', decision: 'DECISION_UNSPECIFIED' }] }], + }); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const result = await pdp.onRoomAttributesChanged(room, newAttrs); + expect(result).toEqual([]); + }); + + it('still evicts entity-keyless users alongside DENY-only filtering of decided users', async () => { + const keyless = user({ _id: 'u0', emails: [] }); + const denied = user({ _id: 'u2', username: 'alice', emails: [{ address: 'a@x.com' }] }); + const unspecified = user({ _id: 'u3', username: 'carol', emails: [{ address: 'c@x.com' }] }); + usersFindActiveByRoomIds.mockReturnValue(asyncIterable([keyless, denied, unspecified])); + const apiCall = jest.fn().mockResolvedValue({ + decisionResponses: [ + { resourceDecisions: [{ ephemeralResourceId: 'r1', decision: 'DECISION_DENY' }] }, + { resourceDecisions: [{ ephemeralResourceId: 'r1', decision: 'DECISION_UNSPECIFIED' }] }, + ], + }); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const result = await pdp.onRoomAttributesChanged(room, newAttrs); + expect(result).toEqual([keyless, denied]); }); it('returns only entity-keyless users when ALL users lack entity keys (no API call)', async () => { @@ -346,6 +402,17 @@ describe('VirtruPDP.onSubjectAttributesChanged', () => { expect(result).toEqual([rooms[1]]); }); + it('still treats DECISION_UNSPECIFIED as non-compliant (LDAP-driven path cannot yield inconclusive decisions)', async () => { + const rooms = [{ _id: 'r1', abacAttributes: [{ key: 'k', values: ['v'] }] }]; + roomsFindPrivateRoomsByIdsWithAbacAttributes.mockReturnValue(cursor(rooms)); + const apiCall = jest.fn().mockResolvedValue({ + decisionResponses: [{ resourceDecisions: [{ ephemeralResourceId: 'r1', decision: 'DECISION_UNSPECIFIED' }] }], + }); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const result = await pdp.onSubjectAttributesChanged(user({ __rooms: ['r1'] }) as any, []); + expect(result).toEqual(rooms); + }); + it('splits >200 rooms into multiple decision batches', async () => { const total = 401; const rooms = Array.from({ length: total }, (_, i) => ({ _id: `r${i}`, abacAttributes: [{ key: 'k', values: ['v'] }] })); @@ -414,13 +481,51 @@ describe('VirtruPDP.evaluateUserRooms', () => { expect(result).toEqual([{ user: u, room: rooms[1] }]); }); - it('treats empty resourceDecisions as non-compliant', async () => { + it('does not evict on empty resourceDecisions (inconclusive)', async () => { const u = user(); const rooms = [{ _id: 'r1', abacAttributes: [{ key: 'k', values: ['v'] }] }]; const apiCall = jest.fn().mockResolvedValue({ decisionResponses: [{ resourceDecisions: [] }] }); const pdp = new VirtruPDP(mkClient({ apiCall })); const result = await pdp.evaluateUserRooms([{ user: u, rooms }]); - expect(result).toEqual([{ user: u, room: rooms[0] }]); + expect(result).toEqual([]); + }); + + it('does not evict on DECISION_UNSPECIFIED (inconclusive)', async () => { + const u = user(); + const rooms = [{ _id: 'r1', abacAttributes: [{ key: 'k', values: ['v'] }] }]; + const apiCall = jest.fn().mockResolvedValue({ + decisionResponses: [{ resourceDecisions: [{ ephemeralResourceId: 'r1', decision: 'DECISION_UNSPECIFIED' }] }], + }); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const result = await pdp.evaluateUserRooms([{ user: u, rooms }]); + expect(result).toEqual([]); + }); + + it('evicts only explicit DENY among mixed PERMIT/UNSPECIFIED/DENY decisions', async () => { + const u = user(); + const rooms = [ + { _id: 'rP', abacAttributes: [{ key: 'k', values: ['v'] }] }, + { _id: 'rU', abacAttributes: [{ key: 'k', values: ['v'] }] }, + { _id: 'rD', abacAttributes: [{ key: 'k', values: ['v'] }] }, + ]; + const apiCall = jest.fn().mockResolvedValue({ + decisionResponses: [ + { resourceDecisions: [{ ephemeralResourceId: 'rP', decision: 'DECISION_PERMIT' }] }, + { resourceDecisions: [{ ephemeralResourceId: 'rU', decision: 'DECISION_UNSPECIFIED' }] }, + { resourceDecisions: [{ ephemeralResourceId: 'rD', decision: 'DECISION_DENY' }] }, + ], + }); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const result = await pdp.evaluateUserRooms([{ user: u, rooms }]); + expect(result).toEqual([{ user: u, room: rooms[2] }]); + }); + + it('rejects when the decision call fails (no evictions, sweep retried next run)', async () => { + const apiCall = jest.fn().mockRejectedValue(new Error('pdp down')); + const pdp = new VirtruPDP(mkClient({ apiCall })); + const rooms = [{ _id: 'r1', abacAttributes: [{ key: 'k', values: ['v'] }] }]; + await expect(pdp.evaluateUserRooms([{ user: user(), rooms }])).rejects.toThrow('pdp down'); + expect(apiCall).toHaveBeenCalled(); }); }); @@ -460,14 +565,6 @@ describe('VirtruPDP — PDP unreachable (decision call rejects)', () => { await expect(pdp.onSubjectAttributesChanged(user({ __rooms: ['r1'] }) as any, [])).rejects.toThrow('pdp down'); expect(apiCall).toHaveBeenCalled(); }); - - it('evaluateUserRooms rejects when the decision call fails', async () => { - const apiCall = pdpDown(); - const pdp = new VirtruPDP(mkClient({ apiCall })); - const rooms = [{ _id: 'r1', abacAttributes: [{ key: 'k', values: ['v'] }] }]; - await expect(pdp.evaluateUserRooms([{ user: user(), rooms } as any])).rejects.toThrow('pdp down'); - expect(apiCall).toHaveBeenCalled(); - }); }); describe('reevaluateUsers', () => { diff --git a/ee/packages/abac/src/pdp/VirtruPDP.ts b/ee/packages/abac/src/pdp/VirtruPDP.ts index 5f72c3605ed5f..d3d37d93aef4f 100644 --- a/ee/packages/abac/src/pdp/VirtruPDP.ts +++ b/ee/packages/abac/src/pdp/VirtruPDP.ts @@ -6,13 +6,36 @@ import pLimit from 'p-limit'; import { OnlyCompliantCanBeAddedToRoomError, PdpHealthCheckError } from '../errors'; import { logger } from '../logger'; -import type { IPolicyDecisionPoint, IGetDecisionBulkRequest, IGetDecisionBulkResponse, IResourceDecision, ReevaluationUser } from './types'; +import type { + IPolicyDecisionPoint, + IGetDecisionBulkRequest, + IGetDecisionBulkResponse, + IResourceDecision, + NonCompliantPair, + ReevaluationUser, +} from './types'; import { HEALTH_CHECK_TIMEOUT } from '../clients/virtru/VirtruClient'; import type { VirtruClient } from '../clients/virtru/VirtruClient'; import { buildEntityIdentifier, buildAttributeFqns, getUserEntityKey } from '../clients/virtru/identity'; const pdpLogger = logger.section('VirtruPDP'); +export const getDeniedSubjects = ; room: Pick }>( + responses: Array<{ resourceDecisions?: IResourceDecision[] } | undefined>, + subjects: T[], +): T[] => { + return subjects.filter((subject, index) => { + const decisions = responses[index]?.resourceDecisions ?? []; + if (decisions.some((rd) => rd.decision === 'DECISION_DENY')) { + return true; + } + if (!decisions.length || decisions.some((rd) => rd.decision !== 'DECISION_PERMIT')) { + pdpLogger.warn({ msg: 'Inconclusive PDP decision, eviction skipped', rid: subject.room._id, userId: subject.user._id }); + } + return false; + }); +}; + export class VirtruPDP implements IPolicyDecisionPoint { private client: VirtruClient; @@ -250,7 +273,7 @@ export class VirtruPDP implements IPolicyDecisionPoint { const config = this.client.getConfig(); const nonCompliantUsers: IUser[] = []; const decisionRequests: IGetDecisionBulkRequest[] = []; - const requestUserIndex: IUser[] = []; + const requestIndex: Array<{ user: IUser; room: typeof room }> = []; const fqns = buildAttributeFqns(config.attributeNamespace, newAttributes); for await (const user of users) { @@ -261,7 +284,7 @@ export class VirtruPDP implements IPolicyDecisionPoint { continue; } - requestUserIndex.push(user); + requestIndex.push({ user, room }); decisionRequests.push({ entityIdentifier: { entityChain: { @@ -284,12 +307,7 @@ export class VirtruPDP implements IPolicyDecisionPoint { const responses = await this.getDecisionBulk(decisionRequests); - responses.forEach((resp, index) => { - const permitted = resp?.resourceDecisions?.length && resp.resourceDecisions.every((rd) => rd.decision === 'DECISION_PERMIT'); - if (!permitted && requestUserIndex[index]) { - nonCompliantUsers.push(requestUserIndex[index]); - } - }); + nonCompliantUsers.push(...getDeniedSubjects(responses, requestIndex).map(({ user }) => user)); return nonCompliantUsers; } @@ -299,19 +317,19 @@ export class VirtruPDP implements IPolicyDecisionPoint { user: Pick; rooms: AtLeast[]; }>, - ): Promise; room: IRoom }>> { - const requestIndex: Array<{ user: Pick; room: AtLeast }> = []; + ): Promise { + const requestIndex: NonCompliantPair[] = []; const allRequests: IGetDecisionBulkRequest[] = []; const config = this.client.getConfig(); - const nonCompliant: Array<{ user: Pick; room: IRoom }> = []; + const nonCompliant: NonCompliantPair[] = []; for (const { user, rooms } of entries) { const entityKey = getUserEntityKey(config.defaultEntityKey, user); if (!entityKey) { pdpLogger.warn({ msg: 'User has no entity key for Virtru PDP evaluation, treating as non-compliant', userId: user._id }); for (const room of rooms) { - nonCompliant.push({ user, room: room as IRoom }); + nonCompliant.push({ user, room }); } continue; } @@ -341,17 +359,12 @@ export class VirtruPDP implements IPolicyDecisionPoint { const responses = await this.getDecisionBulk(allRequests); - responses.forEach((resp, index) => { - const permitted = resp?.resourceDecisions?.length && resp.resourceDecisions.every((rd) => rd.decision === 'DECISION_PERMIT'); - if (!permitted && requestIndex[index]) { - nonCompliant.push({ user: requestIndex[index].user, room: requestIndex[index].room as IRoom }); - } - }); + nonCompliant.push(...getDeniedSubjects(responses, requestIndex)); return nonCompliant; } - async reevaluateUsers(users: ReevaluationUser[]): Promise; room: IRoom }>> { + async reevaluateUsers(users: ReevaluationUser[]): Promise { const roomIds = [...new Set(users.flatMap((u) => u.__rooms ?? []))]; if (!roomIds.length) { return []; diff --git a/ee/packages/abac/src/pdp/types.ts b/ee/packages/abac/src/pdp/types.ts index a405104ec2d76..4749d45f8f7e5 100644 --- a/ee/packages/abac/src/pdp/types.ts +++ b/ee/packages/abac/src/pdp/types.ts @@ -30,6 +30,11 @@ export interface IGetDecisionBulkResponse { export type ReevaluationUser = Pick; +export type NonCompliantPair = { + user: Pick; + room: AtLeast; +}; + export interface IPolicyDecisionPoint { isAvailable(): Promise; @@ -54,9 +59,9 @@ export interface IPolicyDecisionPoint { user: Pick; rooms: AtLeast[]; }>, - ): Promise; room: IRoom }>>; + ): Promise; - reevaluateUsers(users: ReevaluationUser[]): Promise; room: IRoom }>>; + reevaluateUsers(users: ReevaluationUser[]): Promise; } export interface IVirtruPDPConfig { diff --git a/ee/packages/license/src/license.ts b/ee/packages/license/src/license.ts index 0e92af730b1cf..a717f9475181e 100644 --- a/ee/packages/license/src/license.ts +++ b/ee/packages/license/src/license.ts @@ -1,3 +1,5 @@ +import crypto from 'node:crypto'; + import type { ILicenseTag, LicenseEvents, @@ -161,6 +163,20 @@ export abstract class LicenseManager extends Emitter { return this.workspaceUrl; } + public hashWorkspaceUrl(url: string) { + return crypto.createHash('sha256').update(url).digest('hex'); + } + + public getHashedWorkspaceUrl() { + const workspaceUrl = this.getWorkspaceUrl(); + + if (!workspaceUrl) { + return undefined; + } + + return this.hashWorkspaceUrl(workspaceUrl); + } + public async revalidateLicense(options: Omit = {}): Promise { if (!this.hasValidLicense()) { return; diff --git a/ee/packages/license/src/validation/validateLicenseUrl.spec.ts b/ee/packages/license/src/validation/validateLicenseUrl.spec.ts index c534fd887c047..6a714c424169e 100644 --- a/ee/packages/license/src/validation/validateLicenseUrl.spec.ts +++ b/ee/packages/license/src/validation/validateLicenseUrl.spec.ts @@ -127,4 +127,37 @@ describe('Url Validation', () => { ).toStrictEqual([]); }); }); + + describe('type mismatch', () => { + it('should validate as hash if the type is url but the value looks like a hash', async () => { + const licenseManager = await getReadyLicenseManager(); + + const hash = crypto.createHash('sha256').update('localhost:3000').digest('hex'); + const license = await new MockedLicenseBuilder().withServerUrls({ + value: hash, + type: 'url', + }); + await expect( + validateLicenseUrl.call(licenseManager, await license.build(), { + behaviors: ['invalidate_license', 'prevent_installation', 'start_fair_policy', 'disable_modules'], + suppressLog: false, + }), + ).toStrictEqual([]); + }); + + it('should validate as url if the type is hash but the value looks like a url', async () => { + const licenseManager = await getReadyLicenseManager(); + + const license = await new MockedLicenseBuilder().withServerUrls({ + value: 'localhost:3000', + type: 'hash', + }); + await expect( + validateLicenseUrl.call(licenseManager, await license.build(), { + behaviors: ['invalidate_license', 'prevent_installation', 'start_fair_policy', 'disable_modules'], + suppressLog: false, + }), + ).toStrictEqual([]); + }); + }); }); diff --git a/ee/packages/license/src/validation/validateLicenseUrl.ts b/ee/packages/license/src/validation/validateLicenseUrl.ts index b6ba078bc745a..dd18da952f77a 100644 --- a/ee/packages/license/src/validation/validateLicenseUrl.ts +++ b/ee/packages/license/src/validation/validateLicenseUrl.ts @@ -1,5 +1,3 @@ -import crypto from 'node:crypto'; - import type { ILicenseV3, BehaviorWithContext, LicenseValidationOptions } from '@rocket.chat/core-typings'; import { isBehaviorAllowed } from '../isItemAllowed'; @@ -20,9 +18,8 @@ const validateUrl = (licenseURL: string, url: string) => { return licenseURL.toLowerCase() === url.toLowerCase(); }; -const validateHash = (licenseURL: string, url: string) => { - const value = crypto.createHash('sha256').update(url).digest('hex'); - return licenseURL === value; +const validateHash = (licenseURL: string, hashedUrl: string) => { + return licenseURL === hashedUrl; }; export function validateLicenseUrl(this: LicenseManager, license: ILicenseV3, options: LicenseValidationOptions): BehaviorWithContext[] { @@ -41,25 +38,49 @@ export function validateLicenseUrl(this: LicenseManager, license: ILicenseV3, op return [getResultingBehavior({ behavior: 'invalidate_license' }, { reason: 'url' })]; } + const hashedWorkspaceUrl = this.hashWorkspaceUrl(workspaceUrl); + return serverUrls .filter((url) => { + if ( + url.type === 'url' && + url.value.length === 64 && + /^[a-f0-9]{64}$/i.test(url.value) && + validateHash(url.value, hashedWorkspaceUrl) + ) { + // If the url type is 'url' but the value looks like a hash, validate it as a hash to avoid invalidating licenses unnecessarily. + logger.warn( + `License URL with type 'url' is actually a hash. Validating as hash to avoid invalidating license unnecessarily. url: ${url.value}`, + ); + return false; + } + + if (url.type === 'hash' && !/^[a-f0-9]{64}$/i.test(url.value) && validateUrl(url.value, workspaceUrl)) { + // If the url type is 'hash' but the value looks like a url, validate it as a url to avoid invalidating licenses unnecessarily. + logger.warn( + `License URL with type 'hash' does not look like a hash. Validating as url to avoid invalidating license unnecessarily. url: ${url.value}`, + ); + return false; + } + switch (url.type) { case 'regex': return !validateRegex(url.value, workspaceUrl); case 'hash': - return !validateHash(url.value, workspaceUrl); + return !validateHash(url.value, hashedWorkspaceUrl); case 'url': return !validateUrl(url.value, workspaceUrl); default: - return false; + return true; // If the type is unknown, consider it invalid to be safe. } }) .map((url) => { if (!options.suppressLog) { logger.error({ msg: 'Url validation failed', - url, + licenseUrl: url, workspaceUrl, + hashedWorkspaceUrl, }); } return getResultingBehavior({ behavior: 'invalidate_license' }, { reason: 'url' }); diff --git a/packages/fuselage-ui-kit/.storybook/logo.svg b/ee/packages/pdf-worker/.storybook/logo.svg similarity index 100% rename from packages/fuselage-ui-kit/.storybook/logo.svg rename to ee/packages/pdf-worker/.storybook/logo.svg diff --git a/packages/fuselage-ui-kit/.storybook/logo.svg.d.ts b/ee/packages/pdf-worker/.storybook/logo.svg.d.ts similarity index 100% rename from packages/fuselage-ui-kit/.storybook/logo.svg.d.ts rename to ee/packages/pdf-worker/.storybook/logo.svg.d.ts diff --git a/ee/packages/pdf-worker/.storybook/main.ts b/ee/packages/pdf-worker/.storybook/main.ts index c11d791f99928..96b1ae9e9e268 100644 --- a/ee/packages/pdf-worker/.storybook/main.ts +++ b/ee/packages/pdf-worker/.storybook/main.ts @@ -1,39 +1,32 @@ -import { dirname, join, resolve } from 'path'; +import { resolve } from 'node:path'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -export default { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [getAbsolutePath('@storybook/addon-essentials'), getAbsolutePath('@storybook/addon-webpack5-compiler-swc')], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, +import baseConfig from '@rocket.chat/storybook-config/main'; +import webpack from 'webpack'; +export default baseConfig({ staticDirs: ['../src/public'], - typescript: { - reactDocgen: 'react-docgen', - }, - - docs: {}, - webpackFinal: (config) => { - // This is only needed because of Fontello + // This is only needed because of Rocket.Chat's icon font. config.resolve = { ...config.resolve, roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../../apps/meteor/public')], fallback: { ...config.resolve?.fallback, buffer: require.resolve('buffer/'), + path: require.resolve('path-browserify'), }, }; + // Webpack 5 does not handle `node:` URI imports out of the box. Strip the + // prefix so the corresponding `resolve.fallback` entries (above) kick in. + config.plugins = [ + ...(config.plugins ?? []), + new webpack.NormalModuleReplacementPlugin(/^node:/, (resource: { request: string }) => { + resource.request = resource.request.replace(/^node:/, ''); + }), + ]; + return config; }, -} satisfies StorybookConfig; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} +}); diff --git a/ee/packages/pdf-worker/.storybook/preview.tsx b/ee/packages/pdf-worker/.storybook/preview.tsx index 2b3aa9284d90c..42cacbe1b54b2 100644 --- a/ee/packages/pdf-worker/.storybook/preview.tsx +++ b/ee/packages/pdf-worker/.storybook/preview.tsx @@ -1,28 +1,27 @@ -import type { Decorator, Parameters } from '@storybook/react'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; import '../../../../apps/meteor/app/theme/client/main.css'; import 'highlight.js/styles/github.css'; +import logo from './logo.svg'; -export const parameters: Parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, +const preview: Preview = { + parameters: { + ...parameters, + darkMode: { + ...parameters.darkMode, + dark: { + ...parameters.darkMode?.dark, + brandImage: logo, + }, + light: { + ...parameters.darkMode?.light, + brandImage: logo, + }, }, }, + decorators: [...decorators], + tags: ['autodocs'], }; -export const decorators: Decorator[] = [ - (Story) => ( -
- - -
- ), -]; - -export const tags = ['autodocs']; +export default preview; diff --git a/ee/packages/pdf-worker/package.json b/ee/packages/pdf-worker/package.json index d3ea6ac804534..9c37255555010 100644 --- a/ee/packages/pdf-worker/package.json +++ b/ee/packages/pdf-worker/package.json @@ -30,11 +30,10 @@ "devDependencies": { "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/message-parser": "workspace:~", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/tsconfig": "workspace:*", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/react": "^9.1.13", + "@storybook/react-webpack5": "^9.1.13", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", "@types/emojione": "^2.2.9", @@ -45,8 +44,9 @@ "eslint": "~9.39.4", "i18next": "~23.4.9", "jest": "~30.2.0", + "path-browserify": "^1.0.1", "react-dom": "~18.3.1", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3" }, "volta": { diff --git a/ee/packages/pdf-worker/src/templates/ChatTranscript/ChatTranscript.stories.tsx b/ee/packages/pdf-worker/src/templates/ChatTranscript/ChatTranscript.stories.tsx index 2c89689392b4a..b39ab60e02336 100644 --- a/ee/packages/pdf-worker/src/templates/ChatTranscript/ChatTranscript.stories.tsx +++ b/ee/packages/pdf-worker/src/templates/ChatTranscript/ChatTranscript.stories.tsx @@ -1,5 +1,5 @@ import { Font, PDFViewer } from '@react-pdf/renderer'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import i18next from 'i18next'; import { ChatTranscriptPDF } from '.'; @@ -26,14 +26,15 @@ Font.register({ Font.registerHyphenationCallback((word) => [word]); export default { - title: 'ChatTranscriptPDFTemplate', component: ChatTranscriptPDF, } satisfies Meta; const data = new ChatTranscript().parseTemplateData(exampleData, i18next); -export const ChatTranscriptPDFTemplate: StoryFn = () => ( - - - -); +export const ChatTranscriptPDFTemplate: StoryObj = { + render: () => ( + + + + ), +}; diff --git a/package.json b/package.json index 5795c2b5dec00..fed1c24fe8044 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "brace-expansion@npm:^2.0.1": "^2.0.3", "brace-expansion@npm:^5.0.2": "^5.0.5", "@meteorjs/crypto-browserify/pbkdf2": "3.1.3", - "@storybook/core/esbuild": "^0.27.0", "browserify-sign/elliptic": "6.6.1", "create-ecdh/elliptic": "6.6.1", "parse-asn1/pbkdf2": "3.1.3", diff --git a/packages/core-typings/src/IWorkspaceInfo.ts b/packages/core-typings/src/IWorkspaceInfo.ts index c918e2126d08f..cdc9ac80ea53c 100644 --- a/packages/core-typings/src/IWorkspaceInfo.ts +++ b/packages/core-typings/src/IWorkspaceInfo.ts @@ -1,6 +1,8 @@ import type { IServerInfo } from './IServerInfo'; export interface IWorkspaceInfo { + workspaceUrl?: string; + hashedWorkspaceUrl?: string; info?: IServerInfo; supportedVersions?: { signed: string }; minimumClientVersions: { desktop: string; mobile: string }; diff --git a/packages/fuselage-ui-kit/.storybook/DocsContainer.tsx b/packages/fuselage-ui-kit/.storybook/DocsContainer.tsx deleted file mode 100644 index 217b6b05910d1..0000000000000 --- a/packages/fuselage-ui-kit/.storybook/DocsContainer.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { DocsContainer as BaseContainer } from '@storybook/blocks'; -import { addons } from '@storybook/preview-api'; -import { themes } from '@storybook/theming'; -import type { ComponentPropsWithoutRef } from 'react'; -import { useEffect, useState } from 'react'; -import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; - -const channel = addons.getChannel(); - -const DocsContainer = (props: ComponentPropsWithoutRef) => { - const [isDark, setDark] = useState(false); - - useEffect(() => { - channel.on(DARK_MODE_EVENT_NAME, setDark); - return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); - }, [setDark]); - - return ; -}; - -export default DocsContainer; diff --git a/packages/fuselage-ui-kit/.storybook/helpers.ts b/packages/fuselage-ui-kit/.storybook/helpers.ts deleted file mode 100644 index 748b7609c0ca6..0000000000000 --- a/packages/fuselage-ui-kit/.storybook/helpers.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const surface = { - sidebar: '#2F343D', - main: '#262931', -}; diff --git a/packages/fuselage-ui-kit/.storybook/main.ts b/packages/fuselage-ui-kit/.storybook/main.ts index 052c9a31a2aa6..c8018c9f6f243 100644 --- a/packages/fuselage-ui-kit/.storybook/main.ts +++ b/packages/fuselage-ui-kit/.storybook/main.ts @@ -1,29 +1,5 @@ -import { dirname, join } from 'path'; +import baseConfig from '@rocket.chat/storybook-config/main'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -export default { +export default baseConfig({ stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'], - - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('storybook-dark-mode'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-styling-webpack'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - typescript: { - reactDocgen: 'react-docgen', - }, - - docs: {}, -} satisfies StorybookConfig; - -function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, 'package.json'))); -} +}); diff --git a/packages/fuselage-ui-kit/.storybook/preview.tsx b/packages/fuselage-ui-kit/.storybook/preview.tsx index 77bd05598cf73..439321bc59242 100644 --- a/packages/fuselage-ui-kit/.storybook/preview.tsx +++ b/packages/fuselage-ui-kit/.storybook/preview.tsx @@ -1,68 +1,15 @@ -import { PaletteStyleTag } from '@rocket.chat/fuselage'; -import type { Decorator, Parameters } from '@storybook/react'; -import { themes } from '@storybook/theming'; +import { parameters as baseParameters, decorators as baseDecorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { useDarkMode } from 'storybook-dark-mode'; -import manifest from '../package.json'; -import DocsContainer from './DocsContainer'; -import { surface } from './helpers'; -import logo from './logo.svg'; - -import '@rocket.chat/fuselage/dist/fuselage.css'; -import '@rocket.chat/icons/dist/rocketchat.css'; import 'normalize.css/normalize.css'; -export const parameters: Parameters = { - backgrounds: { - grid: { - cellSize: 4, - cellAmount: 4, - opacity: 0.5, - }, - }, - options: { - storySort: { - method: 'alphabetical', - }, - }, - layout: 'fullscreen', - docs: { - container: DocsContainer, - }, - darkMode: { - dark: { - ...themes.dark, - appBg: surface.sidebar, - appContentBg: surface.main, - barBg: surface.main, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, - light: { - ...themes.normal, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, - }, -}; - const queryClient = new QueryClient(); -export const decorators: Decorator[] = [ - (fn) => { - const dark = useDarkMode(); - - return ( - <> - - {fn()} - - ); - }, - (fn) => {fn()}, -]; +const preview: Preview = { + parameters: { ...baseParameters }, + decorators: [...baseDecorators, (fn) => {fn()}], + tags: ['autodocs'], +}; -export const tags = ['autodocs']; +export default preview; diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index f8888607ade29..d14341167d731 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -52,19 +52,15 @@ "@rocket.chat/icons": "~0.47.0", "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/mock-providers": "workspace:^", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/styled": "^0.33.0", "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-avatar": "workspace:^", "@rocket.chat/ui-contexts": "workspace:^", "@rocket.chat/ui-kit": "workspace:~", "@rocket.chat/ui-video-conf": "workspace:^", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/blocks": "^8.6.18", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", - "@storybook/theming": "^8.6.18", + "@storybook/react": "^9.1.13", + "@storybook/react-webpack5": "^9.1.13", "@tanstack/react-query": "~5.65.1", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", @@ -83,8 +79,7 @@ "react-i18next": "~13.2.2", "react-virtuoso": "~4.12.8", "rimraf": "^6.0.1", - "storybook": "^8.6.18", - "storybook-dark-mode": "^4.0.2", + "storybook": "^9.1.13", "typescript": "~5.9.3", "webpack": "~5.104.1" }, diff --git a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx index baa4ad55b0e62..8f6e281ecd5f8 100644 --- a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx @@ -1,13 +1,19 @@ /* eslint-disable new-cap */ import { Banner, Icon } from '@rocket.chat/fuselage'; import type * as UiKit from '@rocket.chat/ui-kit'; -import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import { UiKitContext, UiKitBanner } from '..'; import * as payloads from './payloads'; +type StoryArgs = { + blocks: readonly UiKit.LayoutBlock[]; + type: 'neutral' | 'info' | 'success' | 'warning' | 'danger'; + errors: Record; +}; + export default { - title: 'Surfaces/Banner', argTypes: { blocks: { control: 'object' }, type: { @@ -15,22 +21,13 @@ export default { type: 'radio', }, options: ['neutral', 'info', 'success', 'warning', 'danger'], - defaultValue: 'neutral', }, errors: { control: 'object' }, }, -}; - -const createStory = (blocks: readonly UiKit.LayoutBlock[], errors = {}) => { - const story = ({ - blocks, - type, - errors, - }: { - blocks: readonly UiKit.LayoutBlock[]; - type: 'neutral' | 'info' | 'success' | 'warning' | 'danger'; - errors: Record; - }) => ( + args: { + type: 'neutral', + }, + render: ({ blocks, type, errors }) => ( { {UiKitBanner(blocks)} - ); - story.args = { + ), +} satisfies Meta; + +const createStory = (blocks: readonly UiKit.LayoutBlock[], errors: Record = {}): StoryObj => ({ + args: { blocks, errors, - }; - - return story; -}; + }, +}); export const Divider = createStory(payloads.divider); diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx index f6303c2c86d7e..707c0a7e0c095 100644 --- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx @@ -16,20 +16,19 @@ import { Avatar, } from '@rocket.chat/fuselage'; import type * as UiKit from '@rocket.chat/ui-kit'; -import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import { UiKitContext, UiKitMessage } from '..'; import * as payloads from './payloads'; +type StoryArgs = { blocks: readonly UiKit.LayoutBlock[]; errors: Record }; + export default { - title: 'Surfaces/Message', argTypes: { blocks: { control: 'object' }, }, -}; - -const createStory = (blocks: readonly UiKit.LayoutBlock[]) => { - const story = ({ blocks, errors }: { blocks: readonly UiKit.LayoutBlock[]; errors: Record }) => ( + render: ({ blocks, errors }) => ( { - ); - story.args = { - blocks, - }; + ), +} satisfies Meta; - return story; -}; +const createStory = (blocks: readonly UiKit.LayoutBlock[]): StoryObj => ({ + args: { + blocks, + errors: {}, + }, +}); export const Divider = createStory(payloads.divider); diff --git a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx index 588e42f37b598..dde0e425d3d7b 100644 --- a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx @@ -12,8 +12,9 @@ import { ModalClose, } from '@rocket.chat/fuselage'; import type * as UiKit from '@rocket.chat/ui-kit'; -import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; import type { ReactNode } from 'react'; +import { action } from 'storybook/actions'; import { UiKitContext, UiKitModal } from '..'; import * as payloads from './payloads'; @@ -41,25 +42,22 @@ const DemoModal = ({ children, visible }: { children?: ReactNode; visible: boole ); +type StoryArgs = { + blocks: readonly UiKit.LayoutBlock[]; + errors: Record; + visible: boolean; +}; + export default { - title: 'Surfaces/Modal', argTypes: { blocks: { control: 'object' }, errors: { control: 'object' }, - visible: { control: 'boolean', defaultValue: true }, + visible: { control: 'boolean' }, }, -}; - -const createStory = (blocks: readonly UiKit.LayoutBlock[], errors = {}) => { - const story = ({ - blocks, - errors, - visible, - }: { - blocks: readonly UiKit.LayoutBlock[]; - errors: Record; - visible: boolean; - }) => ( + args: { + visible: true, + }, + render: ({ blocks, errors, visible }) => ( { {UiKitModal(blocks)} - ); - story.args = { + ), +} satisfies Meta; + +const createStory = (blocks: readonly UiKit.LayoutBlock[], errors: Record = {}): StoryObj => ({ + args: { blocks, errors, - }; - - return story; -}; + }, +}); export const Divider = createStory(payloads.divider); diff --git a/packages/gazzodown/.storybook/main.ts b/packages/gazzodown/.storybook/main.ts index c1d4f6c4c1e68..c5f4b24de8b46 100644 --- a/packages/gazzodown/.storybook/main.ts +++ b/packages/gazzodown/.storybook/main.ts @@ -1,26 +1,10 @@ -import { dirname, join, resolve } from 'path'; +import { resolve } from 'node:path'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-styling-webpack'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - typescript: { - reactDocgen: 'react-docgen', - }, +import baseConfig from '@rocket.chat/storybook-config/main'; +export default baseConfig({ webpackFinal: (config) => { - // This is only needed because of Fontello + // This is only needed because of Rocket.Chat's icon font. config.resolve = { ...config.resolve, roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')], @@ -28,12 +12,4 @@ const config: StorybookConfig = { return config; }, - - docs: {}, -}; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} - -export default config; +}); diff --git a/packages/gazzodown/.storybook/preview.tsx b/packages/gazzodown/.storybook/preview.tsx index b8e7113474ab7..2e5284dc8941c 100644 --- a/packages/gazzodown/.storybook/preview.tsx +++ b/packages/gazzodown/.storybook/preview.tsx @@ -1,27 +1,14 @@ -import type { Decorator, Parameters } from '@storybook/react'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; import '../../../apps/meteor/app/theme/client/main.css'; import 'highlight.js/styles/github.css'; -export const parameters: Parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators], }; -export const decorators: Decorator[] = [ - (Story) => ( -
- - -
- ), -]; -export const tags = ['autodocs']; +export default preview; diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json index a850c4993ef11..f183d9e44abaf 100644 --- a/packages/gazzodown/package.json +++ b/packages/gazzodown/package.json @@ -37,19 +37,14 @@ "@rocket.chat/icons": "~0.47.0", "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/message-parser": "workspace:^", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/styled": "^0.33.0", "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-client": "workspace:^", "@rocket.chat/ui-contexts": "workspace:^", - "@storybook/addon-actions": "^8.6.18", - "@storybook/addon-docs": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-interactions": "^8.6.18", - "@storybook/addon-links": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/addon-links": "^9.1.13", + "@storybook/react": "^9.1.13", + "@storybook/react-webpack5": "^9.1.13", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", "@types/jest": "~30.0.0", @@ -67,7 +62,7 @@ "react-dom": "~18.3.1", "react-i18next": "~13.2.2", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3", "webpack": "~5.104.1" }, diff --git a/packages/gazzodown/src/Markup.stories.tsx b/packages/gazzodown/src/Markup.stories.tsx index 2b33ae15c78be..1170c2aab9a5d 100644 --- a/packages/gazzodown/src/Markup.stories.tsx +++ b/packages/gazzodown/src/Markup.stories.tsx @@ -3,7 +3,7 @@ import { Box, MessageBody, MessageContainer } from '@rocket.chat/fuselage'; import colors from '@rocket.chat/fuselage-tokens/colors.json'; import type { Options } from '@rocket.chat/message-parser'; import { parse } from '@rocket.chat/message-parser'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import outdent from 'outdent'; import { Suspense } from 'react'; @@ -11,7 +11,6 @@ import Markup from './Markup'; import { MarkupInteractionContext } from './MarkupInteractionContext'; export default { - title: 'Markup', component: Markup, decorators: [ (Story) => ( @@ -72,17 +71,15 @@ export default { }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Empty = Template.bind({}); -Empty.args = { - tokens: [], +export const Empty: StoryObj = { + args: { + tokens: [], + }, }; -export const Timestamp = Template.bind({}); - -Timestamp.args = { - tokens: parse(`Short time: Math.floor(Date.now() / 1000))()}:t> +export const Timestamp: StoryObj = { + args: { + tokens: parse(`Short time: Math.floor(Date.now() / 1000))()}:t> Long time: Math.floor(Date.now() / 1000))()}:T> Short date: Math.floor(Date.now() / 1000))()}:d> Long date: Math.floor(Date.now() / 1000))()}:D> @@ -105,157 +102,170 @@ Timestamp.args = { })()}:R> `), + }, }; -export const BigEmoji = Template.bind({}); -BigEmoji.args = { - tokens: [ - { - type: 'BIG_EMOJI', - value: [ - { type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: 'smile' }, shortCode: 'smile' }, - { type: 'EMOJI', value: undefined, unicode: '😀' }, - { type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: 'smile' }, shortCode: 'smile' }, - ], - }, - ], +export const BigEmoji: StoryObj = { + args: { + tokens: [ + { + type: 'BIG_EMOJI', + value: [ + { type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: 'smile' }, shortCode: 'smile' }, + { type: 'EMOJI', value: undefined, unicode: '😀' }, + { type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: 'smile' }, shortCode: 'smile' }, + ], + }, + ], + }, }; -export const Paragraph = Template.bind({}); -Paragraph.args = { - tokens: [ - { - type: 'PARAGRAPH', - value: [{ type: 'PLAIN_TEXT', value: 'Hello' }], - }, - ], +export const Paragraph: StoryObj = { + args: { + tokens: [ + { + type: 'PARAGRAPH', + value: [{ type: 'PLAIN_TEXT', value: 'Hello' }], + }, + ], + }, }; -export const Heading = Template.bind({}); -Heading.args = { - tokens: [ - { - type: 'HEADING', - level: 2, - value: [{ type: 'PLAIN_TEXT', value: 'Hello' }], - }, - ], +export const Heading: StoryObj = { + args: { + tokens: [ + { + type: 'HEADING', + level: 2, + value: [{ type: 'PLAIN_TEXT', value: 'Hello' }], + }, + ], + }, }; -export const UnorderedList = Template.bind({}); -UnorderedList.args = { - tokens: [ - { - type: 'UNORDERED_LIST', - value: [ - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hello' }] }, - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hola' }] }, - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: '你好' }] }, - ], - }, - ], +export const UnorderedList: StoryObj = { + args: { + tokens: [ + { + type: 'UNORDERED_LIST', + value: [ + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hello' }] }, + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hola' }] }, + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: '你好' }] }, + ], + }, + ], + }, }; -export const OrderedList = Template.bind({}); -OrderedList.args = { - tokens: [ - { - type: 'ORDERED_LIST', - value: [ - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hello' }] }, - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hola' }] }, - { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: '你好' }] }, - ], - }, - ], +export const OrderedList: StoryObj = { + args: { + tokens: [ + { + type: 'ORDERED_LIST', + value: [ + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hello' }] }, + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: 'Hola' }] }, + { type: 'LIST_ITEM', value: [{ type: 'PLAIN_TEXT', value: '你好' }] }, + ], + }, + ], + }, }; -export const TaskList = Template.bind({}); -TaskList.args = { - tokens: [ - { - type: 'TASKS', - value: [ - { type: 'TASK', status: true, value: [{ type: 'PLAIN_TEXT', value: 'Chores' }] }, - { type: 'TASK', status: false, value: [{ type: 'PLAIN_TEXT', value: 'Dishes' }] }, - { type: 'TASK', status: true, value: [{ type: 'PLAIN_TEXT', value: 'Laundry' }] }, - ], - }, - ], +export const TaskList: StoryObj = { + args: { + tokens: [ + { + type: 'TASKS', + value: [ + { type: 'TASK', status: true, value: [{ type: 'PLAIN_TEXT', value: 'Chores' }] }, + { type: 'TASK', status: false, value: [{ type: 'PLAIN_TEXT', value: 'Dishes' }] }, + { type: 'TASK', status: true, value: [{ type: 'PLAIN_TEXT', value: 'Laundry' }] }, + ], + }, + ], + }, }; -export const Blockquote = Template.bind({}); -Blockquote.args = { - tokens: [ - { - type: 'QUOTE', - value: [ - { - type: 'PARAGRAPH', - value: [{ type: 'PLAIN_TEXT', value: 'Cogito ergo sum.' }], - }, - { - type: 'PARAGRAPH', - value: [{ type: 'PLAIN_TEXT', value: 'Sit amet, consectetur adipiscing elit.' }], - }, - { - type: 'PARAGRAPH', - value: [{ type: 'PLAIN_TEXT', value: 'Donec eget ex euismod, euismod nisi euismod, vulputate nisi.' }], - }, - ], - }, - ], +export const Blockquote: StoryObj = { + args: { + tokens: [ + { + type: 'QUOTE', + value: [ + { + type: 'PARAGRAPH', + value: [{ type: 'PLAIN_TEXT', value: 'Cogito ergo sum.' }], + }, + { + type: 'PARAGRAPH', + value: [{ type: 'PLAIN_TEXT', value: 'Sit amet, consectetur adipiscing elit.' }], + }, + { + type: 'PARAGRAPH', + value: [{ type: 'PLAIN_TEXT', value: 'Donec eget ex euismod, euismod nisi euismod, vulputate nisi.' }], + }, + ], + }, + ], + }, }; -export const Code = Template.bind({}); -Code.args = { - tokens: [ - { - type: 'CODE', - value: [{ type: 'CODE_LINE', value: { type: 'PLAIN_TEXT', value: 'const foo = bar;' } }], - language: undefined, - }, - ], +export const Code: StoryObj = { + args: { + tokens: [ + { + type: 'CODE', + value: [{ type: 'CODE_LINE', value: { type: 'PLAIN_TEXT', value: 'const foo = bar;' } }], + language: undefined, + }, + ], + }, }; -export const CodeWithLanguage = Template.bind({}); -CodeWithLanguage.args = { - tokens: [ - { - type: 'CODE', - value: [{ type: 'CODE_LINE', value: { type: 'PLAIN_TEXT', value: 'const foo = bar;' } }], - language: 'javascript', - }, - ], +export const CodeWithLanguage: StoryObj = { + args: { + tokens: [ + { + type: 'CODE', + value: [{ type: 'CODE_LINE', value: { type: 'PLAIN_TEXT', value: 'const foo = bar;' } }], + language: 'javascript', + }, + ], + }, }; -export const Katex = Template.bind({}); -Katex.args = { - tokens: [ - { - type: 'KATEX', - value: 'x^2 + y^2 = z^2', - }, - ], +export const Katex: StoryObj = { + args: { + tokens: [ + { + type: 'KATEX', + value: 'x^2 + y^2 = z^2', + }, + ], + }, }; -export const LineBreak = Template.bind({}); -LineBreak.args = { - tokens: [ - { - type: 'LINE_BREAK', - value: undefined, - }, - ], +export const LineBreak: StoryObj = { + args: { + tokens: [ + { + type: 'LINE_BREAK', + value: undefined, + }, + ], + }, }; -export const Example: StoryFn<{ msg: string }> = ({ msg }) => { - const parseOptions: Options = { katex: { dollarSyntax: true, parenthesisSyntax: true }, colors: true, emoticons: true }; +export const Example: StoryObj<{ msg: string }> = { + render: ({ msg }) => { + const parseOptions: Options = { katex: { dollarSyntax: true, parenthesisSyntax: true }, colors: true, emoticons: true }; - return ; -}; -Example.args = { - msg: outdent` + return ; + }, + args: { + msg: outdent` :smile:😀:smile: Hello, world! @@ -293,4 +303,5 @@ Example.args = { const x = 1; \`\`\` `, + }, }; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index ad0223251b0e2..91e07ed476b09 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -2538,6 +2538,7 @@ "HTML": "HTML", "Hang_up_and_transfer_call": "Hang up and transfer call", "Hash": "Hash", + "Hashed_Site_Url": "Hashed Site URL", "Header": "Header", "Header_and_Footer": "Header and Footer", "Healthcare": "Healthcare", diff --git a/packages/livechat/.storybook/helpers.tsx b/packages/livechat/.storybook/helpers.tsx index 0e5c0407ed38a..49cf9b647fc4e 100644 --- a/packages/livechat/.storybook/helpers.tsx +++ b/packages/livechat/.storybook/helpers.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Decorator } from '@storybook/preact'; import { loremIpsum as originalLoremIpsum } from 'lorem-ipsum'; +import { action } from 'storybook/actions'; import gazzoAvatar from './assets/gazzo.jpg'; import martinAvatar from './assets/martin.jpg'; diff --git a/packages/livechat/.storybook/logo.svg b/packages/livechat/.storybook/logo.svg deleted file mode 100644 index 9f732657872d4..0000000000000 --- a/packages/livechat/.storybook/logo.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/packages/livechat/.storybook/logo.svg.d.ts b/packages/livechat/.storybook/logo.svg.d.ts deleted file mode 100644 index 27c0914b230f0..0000000000000 --- a/packages/livechat/.storybook/logo.svg.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare const path: string; - -export = path; diff --git a/packages/livechat/.storybook/main.ts b/packages/livechat/.storybook/main.ts index c8b54b8d0bcf4..5178876666e4e 100644 --- a/packages/livechat/.storybook/main.ts +++ b/packages/livechat/.storybook/main.ts @@ -1,3 +1,5 @@ +import { dirname, join } from 'path'; + import type { StorybookConfig } from '@storybook/preact-webpack5'; import type { RuleSetRule } from 'webpack'; @@ -5,7 +7,7 @@ const config: StorybookConfig = { stories: ['../src/**/{*.story,story,*.stories,stories}.tsx'], addons: [ - '@storybook/addon-essentials', + '@storybook/addon-docs', { name: '@storybook/addon-styling-webpack', options: { @@ -56,11 +58,16 @@ const config: StorybookConfig = { typescript: {}, webpackFinal: async (config) => { + const dateFnsRoot = dirname(require.resolve('date-fns/package.json')); config.resolve = { ...config.resolve, alias: { ...config.resolve?.alias, [require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit.ts'), + // date-fns v4's `exports` map doesn't expose the `./locale` directory + // for enumeration, so webpack's dynamic `import()` context fails. Alias + // to the on-disk folder to bypass `exports`. + 'date-fns/locale$': join(dateFnsRoot, 'locale'), }, }; diff --git a/packages/livechat/.storybook/mocks/uiKit.ts b/packages/livechat/.storybook/mocks/uiKit.ts index a7c7dbd5025c0..18cf062beb73c 100644 --- a/packages/livechat/.storybook/mocks/uiKit.ts +++ b/packages/livechat/.storybook/mocks/uiKit.ts @@ -1,4 +1,4 @@ -import { action } from '@storybook/addon-actions'; +import { action } from 'storybook/actions'; export const UIKitInteractionType = { MODAL_OPEN: 'modal.open', diff --git a/packages/livechat/.storybook/preview.tsx b/packages/livechat/.storybook/preview.tsx index 5054c12e45417..7429978405bc6 100644 --- a/packages/livechat/.storybook/preview.tsx +++ b/packages/livechat/.storybook/preview.tsx @@ -1,39 +1,12 @@ -import type { Parameters } from '@storybook/preact'; -import { themes } from '@storybook/theming'; +import type { Preview } from '@storybook/preact'; -import manifest from '../package.json'; -import logo from './logo.svg'; import 'emoji-mart/css/emoji-mart.css'; import '../src/styles/index.scss'; -export const parameters: Parameters = { - backgrounds: { - grid: { - cellSize: 4, - cellAmount: 4, - opacity: 0.5, - }, - }, - options: { - storySort: { - method: 'alphabetical', - }, - }, - layout: 'fullscreen', - darkMode: { - dark: { - ...themes.dark, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, - light: { - ...themes.normal, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, +const preview: Preview = { + parameters: { + layout: 'fullscreen', }, }; -export const tags = []; +export default preview; diff --git a/packages/livechat/package.json b/packages/livechat/package.json index d26898e33b0a9..e8919628115d4 100644 --- a/packages/livechat/package.json +++ b/packages/livechat/package.json @@ -48,7 +48,6 @@ "query-string": "^7.1.3", "react-hook-form": "~7.45.4", "react-i18next": "~13.2.2", - "storybook-dark-mode": "^4.0.2", "whatwg-fetch": "^3.6.20" }, "devDependencies": { @@ -62,12 +61,11 @@ "@rocket.chat/fuselage-tokens": "~0.33.2", "@rocket.chat/logo": "^0.32.5", "@rocket.chat/ui-contexts": "workspace:^", - "@storybook/addon-essentials": "^8.6.18", + "@storybook/addon-docs": "^9.1.13", "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/preact": "^8.6.18", - "@storybook/preact-webpack5": "^8.6.18", - "@storybook/theming": "^8.6.18", + "@storybook/addon-webpack5-compiler-swc": "^4.0.3", + "@storybook/preact": "9.0.0-alpha.11", + "@storybook/preact-webpack5": "9.0.0-alpha.11", "@types/crypto-js": "~4.2.2", "@types/mini-css-extract-plugin": "~2.5.1", "@types/react": "~18.3.28", @@ -100,7 +98,8 @@ "rimraf": "^6.0.1", "sass": "~1.80.7", "sass-loader": "~16.0.7", - "storybook": "^8.6.18", + "storybook": "^9.1.13", + "storybook-dark-mode": "^5.0.0", "style-loader": "^1.3.0", "stylelint": "^16.10.0", "stylelint-order": "^6.0.4", diff --git a/packages/livechat/src/components/Alert/stories.tsx b/packages/livechat/src/components/Alert/stories.tsx index 712bbe0343b9d..f9eeb2a3b2138 100644 --- a/packages/livechat/src/components/Alert/stories.tsx +++ b/packages/livechat/src/components/Alert/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import Alert from '.'; import { loremIpsum, screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/components/Avatar/Avatar.stories.tsx b/packages/livechat/src/components/Avatar/Avatar.stories.tsx index 29f56eb8003a5..9bf6be9c9b381 100644 --- a/packages/livechat/src/components/Avatar/Avatar.stories.tsx +++ b/packages/livechat/src/components/Avatar/Avatar.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { Avatar } from '.'; import { gazzoAvatar } from '../../../.storybook/helpers'; export default { - title: 'Components/Avatar', component: Avatar, args: { src: gazzoAvatar, @@ -26,41 +25,48 @@ export default { }, } satisfies Meta>; -const Template: StoryFn> = (args) => ; +type Story = StoryObj>; -export const Default = Template.bind({}); -Default.storyName = 'default'; +export const Default: Story = { + name: 'default', +}; -export const Large = Template.bind({}); -Large.storyName = 'large'; -Large.args = { - large: true, +export const Large: Story = { + name: 'large', + args: { + large: true, + }, }; -export const Small = Template.bind({}); -Small.storyName = 'small'; -Small.args = { - small: true, +export const Small: Story = { + name: 'small', + args: { + small: true, + }, }; -export const AsPlaceholder: StoryFn> = (args) => ( -
- - - -
-); -AsPlaceholder.storyName = 'as placeholder'; -AsPlaceholder.args = { - src: '', +export const AsPlaceholder: Story = { + name: 'as placeholder', + args: { + src: '', + }, + render: (args) => ( +
+ + + +
+ ), }; -export const WithStatusIndicator: StoryFn> = (args) => ( -
- - - - -
-); -WithStatusIndicator.storyName = 'with status indicator'; +export const WithStatusIndicator: Story = { + name: 'with status indicator', + render: (args) => ( +
+ + + + +
+ ), +}; diff --git a/packages/livechat/src/components/Button/stories.tsx b/packages/livechat/src/components/Button/stories.tsx index 2c14df3d41509..119f1566036d5 100644 --- a/packages/livechat/src/components/Button/stories.tsx +++ b/packages/livechat/src/components/Button/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Button } from '.'; import { gazzoAvatar } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx index cd0a5b1551181..bf79ffad1b485 100644 --- a/packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/livechat/src/components/ButtonGroup/ButtonGroup.stories.tsx @@ -1,62 +1,70 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { ButtonGroup } from '.'; import { Button } from '../Button'; -/** @type {import('@storybook/preact').Meta>} */ export default { - title: 'Components/ButtonGroup', component: ButtonGroup, parameters: { layout: 'centered', }, } satisfies Meta>; -export const WithButtonsOfSameSize: StoryFn> = (args) => ( - - - - - -); -WithButtonsOfSameSize.storyName = 'with buttons of same size'; +type Story = StoryObj>; -export const WithButtonsOfDifferentSizes: StoryFn> = (args) => ( - - - - - -); -WithButtonsOfDifferentSizes.storyName = 'with buttons of different sizes'; +export const WithButtonsOfSameSize: Story = { + name: 'with buttons of same size', + render: (args) => ( + + + + + + ), +}; -export const WithOnlySmallButtons: StoryFn> = (args) => ( - - - - - -); -WithOnlySmallButtons.storyName = 'with only small buttons'; +export const WithButtonsOfDifferentSizes: Story = { + name: 'with buttons of different sizes', + render: (args) => ( + + + + + + ), +}; -export const WithStackedButtons: StoryFn> = (args) => ( - - - - - -); -WithStackedButtons.storyName = 'with stacked buttons'; +export const WithOnlySmallButtons: Story = { + name: 'with only small buttons', + render: (args) => ( + + + + + + ), +}; + +export const WithStackedButtons: Story = { + name: 'with stacked buttons', + render: (args) => ( + + + + + + ), +}; diff --git a/packages/livechat/src/components/Composer/stories.tsx b/packages/livechat/src/components/Composer/stories.tsx index fe680aa16e8b6..e9b286643fc2e 100644 --- a/packages/livechat/src/components/Composer/stories.tsx +++ b/packages/livechat/src/components/Composer/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Composer, ComposerActions, ComposerAction } from '.'; import PlusIcon from '../../icons/plus.svg'; diff --git a/packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx b/packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx index 1562b174a98f6..f6f46fb2ad64c 100644 --- a/packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx +++ b/packages/livechat/src/components/FilesDropTarget/FilesDropTarget.stories.tsx @@ -1,7 +1,7 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { createRef } from 'preact'; +import { action } from 'storybook/actions'; import { FilesDropTarget } from '.'; import { Button } from '../Button'; @@ -23,7 +23,6 @@ const DummyContent = () => ( ); export default { - title: 'Components/FilesDropTarget', component: FilesDropTarget, args: { overlayed: false, @@ -35,60 +34,67 @@ export default { parameters: { layout: 'fullscreen', }, + render: (args) => ( + + + + ), } satisfies Meta>; -const Template: StoryFn> = (args) => ( - - - -); +type Story = StoryObj>; -export const Default = Template.bind({}); -Default.storyName = 'default'; -Default.args = {}; +export const Default: Story = { + name: 'default', + args: {}, +}; -export const Overlayed = Template.bind({}); -Overlayed.storyName = 'overlayed'; -Overlayed.args = { - overlayed: true, +export const Overlayed: Story = { + name: 'overlayed', + args: { + overlayed: true, + }, }; -export const OverlayedWithText = Template.bind({}); -OverlayedWithText.storyName = 'overlayed with text'; -OverlayedWithText.args = { - overlayed: true, - overlayText: 'You can release your files now', +export const OverlayedWithText: Story = { + name: 'overlayed with text', + args: { + overlayed: true, + overlayText: 'You can release your files now', + }, }; -export const AcceptingOnlyImages = Template.bind({}); -AcceptingOnlyImages.storyName = 'accepting only images'; -AcceptingOnlyImages.args = { - accept: 'image/*', +export const AcceptingOnlyImages: Story = { + name: 'accepting only images', + args: { + accept: 'image/*', + }, }; -export const AcceptingMultipleFiles = Template.bind({}); -AcceptingMultipleFiles.storyName = 'accepting multiple files'; -AcceptingMultipleFiles.args = { - multiple: true, +export const AcceptingMultipleFiles: Story = { + name: 'accepting multiple files', + args: { + multiple: true, + }, }; -export const TriggeringBrowseAction = Template.bind({}); -TriggeringBrowseAction.storyName = 'triggering browse action'; const inputRef = createRef(); -TriggeringBrowseAction.args = { - children: ( -
- -
- ), - inputRef, +export const TriggeringBrowseAction: Story = { + name: 'triggering browse action', + args: { + children: ( +
+ +
+ ), + inputRef, + }, }; diff --git a/packages/livechat/src/components/Footer/Footer.stories.tsx b/packages/livechat/src/components/Footer/Footer.stories.tsx index e5b13ea62cd9c..5dd754a52247f 100644 --- a/packages/livechat/src/components/Footer/Footer.stories.tsx +++ b/packages/livechat/src/components/Footer/Footer.stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import ChangeIcon from '../../icons/change.svg'; import FinishIcon from '../../icons/finish.svg'; @@ -15,7 +15,6 @@ import PoweredBy from './PoweredBy'; import '../../i18next'; export default { - title: 'Components/Footer', component: Footer, decorators: [ (storyFn) => ( @@ -32,36 +31,42 @@ export default { }, } satisfies Meta>; -export const Simple: StoryFn> = (args) => ( -
- - - -
-); -Simple.storyName = 'simple'; +type Story = StoryObj>; -export const WithComposerAndOptions: StoryFn> = (args) => ( -
- - - - - - - - Change department - - - Forget/Remove my personal data - - - Finish this chat - - - - - -
-); -WithComposerAndOptions.storyName = 'with Composer and options'; +export const Simple: Story = { + name: 'simple', + render: (args) => ( +
+ + + +
+ ), +}; + +export const WithComposerAndOptions: Story = { + name: 'with Composer and options', + render: (args) => ( +
+ + + + + + + + Change department + + + Forget/Remove my personal data + + + Finish this chat + + + + + +
+ ), +}; diff --git a/packages/livechat/src/components/Form/DateInput/stories.tsx b/packages/livechat/src/components/Form/DateInput/stories.tsx index 93c65f4041ce3..af2055c3b19b2 100644 --- a/packages/livechat/src/components/Form/DateInput/stories.tsx +++ b/packages/livechat/src/components/Form/DateInput/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import DateInput from '.'; import { Form, FormField } from '..'; diff --git a/packages/livechat/src/components/Form/HookFormExample/stories.tsx b/packages/livechat/src/components/Form/HookFormExample/stories.tsx index 9229b3c19cd12..e6badf499712f 100644 --- a/packages/livechat/src/components/Form/HookFormExample/stories.tsx +++ b/packages/livechat/src/components/Form/HookFormExample/stories.tsx @@ -1,8 +1,8 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import type { JSXInternal } from 'preact/src/jsx'; import { Controller, useForm } from 'react-hook-form'; +import { action } from 'storybook/actions'; import { Form, PasswordInput, SelectInput, TextInput, FormField } from '..'; import { Button } from '../../Button'; diff --git a/packages/livechat/src/components/Form/MultilineTextInput/stories.tsx b/packages/livechat/src/components/Form/MultilineTextInput/stories.tsx index d093a6804c01b..b5cfca2cafe34 100644 --- a/packages/livechat/src/components/Form/MultilineTextInput/stories.tsx +++ b/packages/livechat/src/components/Form/MultilineTextInput/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { MultilineTextInput } from '.'; import { Form, FormField } from '..'; diff --git a/packages/livechat/src/components/Form/PasswordInput/stories.tsx b/packages/livechat/src/components/Form/PasswordInput/stories.tsx index b41bae674ea04..304d048900885 100644 --- a/packages/livechat/src/components/Form/PasswordInput/stories.tsx +++ b/packages/livechat/src/components/Form/PasswordInput/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { PasswordInput } from '.'; import { Form, FormField } from '..'; diff --git a/packages/livechat/src/components/Form/SelectInput/stories.tsx b/packages/livechat/src/components/Form/SelectInput/stories.tsx index 369ea35b2412d..993e8395c4c3f 100644 --- a/packages/livechat/src/components/Form/SelectInput/stories.tsx +++ b/packages/livechat/src/components/Form/SelectInput/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { SelectInput } from '.'; import { Form, FormField } from '..'; diff --git a/packages/livechat/src/components/Form/TextInput/stories.tsx b/packages/livechat/src/components/Form/TextInput/stories.tsx index b563e35a74deb..67bb4539f054f 100644 --- a/packages/livechat/src/components/Form/TextInput/stories.tsx +++ b/packages/livechat/src/components/Form/TextInput/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { TextInput } from '.'; import { Form, FormField } from '..'; diff --git a/packages/livechat/src/components/Form/stories.tsx b/packages/livechat/src/components/Form/stories.tsx index d18a0cdea0fe0..789ca2c83881f 100644 --- a/packages/livechat/src/components/Form/stories.tsx +++ b/packages/livechat/src/components/Form/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Form, PasswordInput, SelectInput, TextInput } from '.'; import { Button } from '../Button'; diff --git a/packages/livechat/src/components/Header/Header.stories.tsx b/packages/livechat/src/components/Header/Header.stories.tsx index 36fcc90267dad..928056c68d4f4 100644 --- a/packages/livechat/src/components/Header/Header.stories.tsx +++ b/packages/livechat/src/components/Header/Header.stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Header, @@ -21,7 +21,6 @@ import Alert from '../Alert'; import { Avatar } from '../Avatar'; export default { - title: 'Components/Header', component: Header, args: { theme: { @@ -35,198 +34,220 @@ export default { }, } satisfies Meta>; -export const WithTextContent: StoryFn> = (args) => ( -
- Need Help? -
-); -WithTextContent.storyName = 'with text content'; +type Story = StoryObj>; -export const WithLongTextContent: StoryFn> = (args) => ( -
- {'Need Help? '.repeat(100)} -
-); -WithLongTextContent.storyName = 'with long text content'; +export const WithTextContent: Story = { + name: 'with text content', + render: (args) => ( +
+ Need Help? +
+ ), +}; -export const WithTitleAndSubtitle: StoryFn> = (args) => ( -
- - Rocket.Chat - Livechat - -
-); -WithTitleAndSubtitle.storyName = 'with title and subtitle'; +export const WithLongTextContent: Story = { + name: 'with long text content', + render: (args) => ( +
+ {'Need Help? '.repeat(100)} +
+ ), +}; -export const WithPicture: StoryFn> = (args) => ( -
- - - - Notification settings -
-); -WithPicture.storyName = 'with picture'; +export const WithTitleAndSubtitle: Story = { + name: 'with title and subtitle', + render: (args) => ( +
+ + Rocket.Chat + Livechat + +
+ ), +}; -export const WithActions: StoryFn> = (args) => ( -
- Chat finished - - +export const WithPicture: Story = { + name: 'with picture', + render: (args) => ( +
+ - - - - - -
-); -WithActions.storyName = 'with actions'; + + Notification settings +
+ ), +}; -export const WithMultiplesAlerts: StoryFn> = (args) => ( -
- Success - Warning - Error - - Custom color - - - } - > - Chat finished - - - - - - - - -
-); -WithMultiplesAlerts.storyName = 'with multiples alerts'; +export const WithActions: Story = { + name: 'with actions', + render: (args) => ( +
+ Chat finished + + + + + + + + +
+ ), +}; -export const ForUserChat: StoryFn> = (args) => ( -
- - - - - @guilherme.gazzo - guilherme.gazzo@rocket.chat - - - - - - - - - - - - -
-); -ForUserChat.storyName = 'for user chat'; +export const WithMultiplesAlerts: Story = { + name: 'with multiples alerts', + render: (args) => ( +
+ Success + Warning + Error + + Custom color + + + } + > + Chat finished + + + + + + + + +
+ ), +}; -export const WithCustomField: StoryFn> = (args) => ( -
- - - - - Guilherme Gazzo - guilherme.gazzo@rocket.chat - + 55 42423 24242 - - - - - - - - - - - - -
-); -WithCustomField.storyName = 'with custom field'; -WithCustomField.args = { - large: true, +export const ForUserChat: Story = { + name: 'for user chat', + render: (args) => ( +
+ + + + + @guilherme.gazzo + guilherme.gazzo@rocket.chat + + + + + + + + + + + + +
+ ), }; -export const WithCustomFieldAndAlert: StoryFn> = (args) => ( -
- Success - Warning - - } - > - - - - - Guilherme Gazzo - guilherme.gazzo@rocket.chat - + 55 42423 24242 - - - - - - - - - - - - -
-); -WithCustomFieldAndAlert.storyName = 'with custom field and alert'; -WithCustomFieldAndAlert.args = { - large: true, +export const WithCustomField: Story = { + name: 'with custom field', + args: { + large: true, + }, + render: (args) => ( +
+ + + + + Guilherme Gazzo + guilherme.gazzo@rocket.chat + + 55 42423 24242 + + + + + + + + + + + + +
+ ), }; -export const WithTheme: StoryFn> = (args) => ( -
- - - - - Guilherme Gazzo - guilherme.gazzo@rocket.chat - + 55 42423 24242 - - - - - - - - - - - - -
-); -WithTheme.storyName = 'with theme'; -WithTheme.args = { - large: true, - theme: { - color: 'darkred', - fontColor: 'peachpuff', +export const WithCustomFieldAndAlert: Story = { + name: 'with custom field and alert', + args: { + large: true, + }, + render: (args) => ( +
+ Success + Warning + + } + > + + + + + Guilherme Gazzo + guilherme.gazzo@rocket.chat + + 55 42423 24242 + + + + + + + + + + + + +
+ ), +}; + +export const WithTheme: Story = { + name: 'with theme', + args: { + large: true, + theme: { + color: 'darkred', + fontColor: 'peachpuff', + }, }, + render: (args) => ( +
+ + + + + Guilherme Gazzo + guilherme.gazzo@rocket.chat + + 55 42423 24242 + + + + + + + + + + + + +
+ ), }; diff --git a/packages/livechat/src/components/Menu/Group.stories.tsx b/packages/livechat/src/components/Menu/Group.stories.tsx index c2261a9888446..84937c3010017 100644 --- a/packages/livechat/src/components/Menu/Group.stories.tsx +++ b/packages/livechat/src/components/Menu/Group.stories.tsx @@ -1,48 +1,55 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { Menu, MenuGroup, MenuItem } from '.'; export default { - title: 'Components/Menu/Group', component: MenuGroup, parameters: { layout: 'centered', }, } satisfies Meta>; -export const Single: StoryFn> = (args) => ( - - - A menu item - Another menu item - - -); -Single.storyName = 'single'; +type Story = StoryObj>; -export const Multiple: StoryFn> = (args) => ( - - - A menu item - Another menu item - - - Report - - -); -Multiple.storyName = 'multiple'; +export const Single: Story = { + name: 'single', + render: (args) => ( + + + A menu item + Another menu item + + + ), +}; + +export const Multiple: Story = { + name: 'multiple', + render: (args) => ( + + + A menu item + Another menu item + + + Report + + + ), +}; -export const WithTitle: StoryFn> = (args) => ( - - - A menu item - Another menu item - - -); -WithTitle.storyName = 'with title'; -WithTitle.args = { - title: 'Are you sure?', +export const WithTitle: Story = { + name: 'with title', + args: { + title: 'Are you sure?', + }, + render: (args) => ( + + + A menu item + Another menu item + + + ), }; diff --git a/packages/livechat/src/components/Menu/Item.stories.tsx b/packages/livechat/src/components/Menu/Item.stories.tsx index 05e11ddfbb0ce..3de2d62fcca9f 100644 --- a/packages/livechat/src/components/Menu/Item.stories.tsx +++ b/packages/livechat/src/components/Menu/Item.stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Menu, MenuGroup, MenuItem } from '.'; import BellIcon from '../../icons/bell.svg'; @@ -9,7 +9,6 @@ import CloseIcon from '../../icons/close.svg'; import FinishIcon from '../../icons/finish.svg'; export default { - title: 'Components/Menu/Item', component: MenuItem, args: { children: 'A menu item', @@ -20,73 +19,85 @@ export default { }, } satisfies Meta>; -export const Simple: StoryFn> = (args) => ( - - - - Another menu item - - -); -Simple.storyName = 'simple'; +type Story = StoryObj>; -export const Primary: StoryFn> = (args) => ( - - - - Another menu item - - -); -Primary.storyName = 'primary'; -Primary.args = { - primary: true, +export const Simple: Story = { + name: 'simple', + render: (args) => ( + + + + Another menu item + + + ), }; -export const Danger: StoryFn> = (args) => ( - - - - Another menu item - - -); -Danger.storyName = 'danger'; -Danger.args = { - danger: true, +export const Primary: Story = { + name: 'primary', + args: { + primary: true, + }, + render: (args) => ( + + + + Another menu item + + + ), +}; + +export const Danger: Story = { + name: 'danger', + args: { + danger: true, + }, + render: (args) => ( + + + + Another menu item + + + ), }; -export const Disabled: StoryFn> = (args) => ( - - - - Another menu item - - -); -Disabled.storyName = 'disabled'; -Disabled.args = { - disabled: true, +export const Disabled: Story = { + name: 'disabled', + args: { + disabled: true, + }, + render: (args) => ( + + + + Another menu item + + + ), }; -export const WithIcon: StoryFn> = (args) => ( - - - - - Primary - - - Danger - - - Disabled - - - -); -WithIcon.storyName = 'with icon'; -WithIcon.args = { - children: 'Simple', - icon: CloseIcon, +export const WithIcon: Story = { + name: 'with icon', + args: { + children: 'Simple', + icon: CloseIcon, + }, + render: (args) => ( + + + + + Primary + + + Danger + + + Disabled + + + + ), }; diff --git a/packages/livechat/src/components/Menu/Menu.stories.tsx b/packages/livechat/src/components/Menu/Menu.stories.tsx index 6fec46d9fc7bc..6389d8ea95937 100644 --- a/packages/livechat/src/components/Menu/Menu.stories.tsx +++ b/packages/livechat/src/components/Menu/Menu.stories.tsx @@ -1,12 +1,11 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Menu, MenuGroup, MenuItem } from '.'; import { Button } from '../Button'; export default { - title: 'Components/Menu', component: Menu, args: { hidden: false, @@ -24,39 +23,46 @@ export default { }, } satisfies Meta>; -export const Empty: StoryFn> = (args) => ; -Empty.storyName = 'empty'; +type Story = StoryObj>; -export const Simple: StoryFn> = (args) => ( - - - A menu item - Another menu item - - -); -Simple.storyName = 'simple'; -Simple.args = { - children: ( - - A menu item - Another menu item - - ), +export const Empty: Story = { + name: 'empty', }; -export const Placement: StoryFn> = (args) => ( -
- +export const Simple: Story = { + name: 'simple', + args: { + children: ( + + A menu item + Another menu item + + ), + }, + render: (args) => ( A menu item Another menu item -
-); -Placement.storyName = 'placement'; -Placement.args = { - placement: 'right-bottom', + ), +}; + +export const Placement: Story = { + name: 'placement', + args: { + placement: 'right-bottom', + }, + render: (args) => ( +
+ + + + A menu item + Another menu item + + +
+ ), }; diff --git a/packages/livechat/src/components/Menu/PopoverMenu.stories.tsx b/packages/livechat/src/components/Menu/PopoverMenu.stories.tsx index 9925d6cfb1da2..5e81153874774 100644 --- a/packages/livechat/src/components/Menu/PopoverMenu.stories.tsx +++ b/packages/livechat/src/components/Menu/PopoverMenu.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { MenuGroup, MenuItem, MenuPopover } from '.'; @@ -6,7 +6,6 @@ import { Button } from '../Button'; import { PopoverContainer } from '../Popover'; export default { - title: 'Components/Menu/PopoverMenu', component: MenuPopover, args: {}, decorators: [ @@ -21,25 +20,31 @@ export default { }, } satisfies Meta>; -export const Default: StoryFn> = (args) => ( - }> - - Reload - Delete... - - -); -Default.storyName = 'default'; +type Story = StoryObj>; -export const WithOverlay: StoryFn> = (args) => ( - }> - - Reload - Delete... - - -); -WithOverlay.storyName = 'with overlay'; -WithOverlay.args = { - overlayed: true, +export const Default: Story = { + name: 'default', + render: (args) => ( + }> + + Reload + Delete... + + + ), +}; + +export const WithOverlay: Story = { + name: 'with overlay', + args: { + overlayed: true, + }, + render: (args) => ( + }> + + Reload + Delete... + + + ), }; diff --git a/packages/livechat/src/components/Messages/Message/Message.stories.tsx b/packages/livechat/src/components/Messages/Message/Message.stories.tsx index 3e97f0fd6ab3b..cde8046dfd150 100644 --- a/packages/livechat/src/components/Messages/Message/Message.stories.tsx +++ b/packages/livechat/src/components/Messages/Message/Message.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import Message from '.'; @@ -54,7 +54,6 @@ const defaultUser = { const now = new Date(Date.parse('2021-01-01T00:00:00.000Z')); export default { - title: 'Messages/Message', component: Message, parameters: { layout: 'centered', @@ -94,84 +93,7 @@ export default { attachments: [], blocks: [], }, -} satisfies Meta>; - -export const Default: StoryFn> = (args) => ( - -); -Default.storyName = 'default'; - -export const System: StoryFn> = (args) => ( - -); -System.storyName = 'system'; -System.args = { - msg: '', - t: MESSAGE_TYPE_WELCOME, -}; - -export const Me: StoryFn> = (args) => ( - -); -Me.storyName = 'me'; -Me.args = { - me: true, -}; - -export const Markdown: StoryFn> = (args) => ( - -); -Markdown.storyName = 'markdown'; -Markdown.args = { - msg: defaultMarkdownMessage, -}; - -export const Grouping: StoryFn> = (args) => ( -
+ render: (args) => ( > = (args) => ( attachments={args.attachments} blocks={args.blocks} /> - -
-); -Grouping.storyName = 'grouping'; -Grouping.args = { - msg: defaultMessageExtra, - compact: true, + ), +} satisfies Meta>; + +type Story = StoryObj>; + +export const Default: Story = { + name: 'default', }; -export const WithQuotation: StoryFn> = (args) => ( - -); -WithQuotation.storyName = 'with quotation'; -WithQuotation.args = { - attachments: [ - { - message_link: 'http://localhost:3000/live/SqouQyJ7wDsK8KPnc?msg=EWrxmazqYbEf3rFzd', - text: defaultMessageExtra, - }, - ], +export const System: Story = { + name: 'system', + args: { + msg: '', + t: MESSAGE_TYPE_WELCOME, + }, }; -export const WithAudioAttachment: StoryFn> = (args) => ( - -); -WithAudioAttachment.storyName = 'with audio attachment'; -WithAudioAttachment.args = { - attachments: [ - { - audio_url: sampleAudio, - }, - ], +export const Me: Story = { + name: 'me', + args: { + me: true, + }, }; -export const WithVideoAttachment: StoryFn> = (args) => ( - -); -WithVideoAttachment.storyName = 'with video attachment'; -WithVideoAttachment.args = { - attachments: [ - { - video_url: sampleVideo, - }, - ], +export const Markdown: Story = { + name: 'markdown', + args: { + msg: defaultMarkdownMessage, + }, }; -export const WithImageAttachment: StoryFn> = (args) => ( - -); -WithImageAttachment.storyName = 'with image attachment'; -WithImageAttachment.args = { - attachments: [ - { - image_url: sampleImage, - }, - ], +export const Grouping: Story = { + name: 'grouping', + args: { + msg: defaultMessageExtra, + compact: true, + }, + render: (args) => ( +
+ + +
+ ), }; -export const WithFilesAttachments: StoryFn> = (args) => ( - -); -WithFilesAttachments.storyName = 'with files attachments'; -WithFilesAttachments.args = { - attachments: ['pdf', 'doc', 'ppt', 'xls', 'zip', 'abc'].map((extension) => ({ - title_link: `http://example.com/demo.${extension}`, - title: `Untitled ${extension} file`, - })), +export const WithQuotation: Story = { + name: 'with quotation', + args: { + attachments: [ + { + message_link: 'http://localhost:3000/live/SqouQyJ7wDsK8KPnc?msg=EWrxmazqYbEf3rFzd', + text: defaultMessageExtra, + }, + ], + }, }; -export const WithMultipleAttachments: StoryFn> = (args) => ( - -); -WithMultipleAttachments.storyName = 'with mutiple attachments'; -WithMultipleAttachments.args = { - attachments: [ - { - audio_url: sampleAudio, - }, - { - video_url: sampleVideo, - }, - { - image_url: sampleImage, - }, - { - title_link: 'http://example.com/demo.pdf', - title: 'Untitled pdf file', - }, - ], +export const WithAudioAttachment: Story = { + name: 'with audio attachment', + args: { + attachments: [ + { + audio_url: sampleAudio, + }, + ], + }, }; -export const WithUiKitBlocks: StoryFn> = (args) => ( - -); -WithUiKitBlocks.storyName = 'with UiKit blocks'; -WithUiKitBlocks.args = { - msg: '', - blocks: [ - { - type: 'section', - text: { - type: 'plain_text', - text: 'This is a plain text section block.', - emoji: true, +export const WithVideoAttachment: Story = { + name: 'with video attachment', + args: { + attachments: [ + { + video_url: sampleVideo, }, - }, - ], + ], + }, +}; + +export const WithImageAttachment: Story = { + name: 'with image attachment', + args: { + attachments: [ + { + image_url: sampleImage, + }, + ], + }, +}; + +export const WithFilesAttachments: Story = { + name: 'with files attachments', + args: { + attachments: ['pdf', 'doc', 'ppt', 'xls', 'zip', 'abc'].map((extension) => ({ + title_link: `http://example.com/demo.${extension}`, + title: `Untitled ${extension} file`, + })), + }, +}; + +export const WithMultipleAttachments: Story = { + name: 'with mutiple attachments', + args: { + attachments: [ + { + audio_url: sampleAudio, + }, + { + video_url: sampleVideo, + }, + { + image_url: sampleImage, + }, + { + title_link: 'http://example.com/demo.pdf', + title: 'Untitled pdf file', + }, + ], + }, +}; + +export const WithUiKitBlocks: Story = { + name: 'with UiKit blocks', + args: { + msg: '', + blocks: [ + { + type: 'section', + text: { + type: 'plain_text', + text: 'This is a plain text section block.', + emoji: true, + }, + }, + ], + }, }; diff --git a/packages/livechat/src/components/Messages/MessageList/stories.tsx b/packages/livechat/src/components/Messages/MessageList/stories.tsx index 7d6d82aba7eb7..e8eeed2f3db16 100644 --- a/packages/livechat/src/components/Messages/MessageList/stories.tsx +++ b/packages/livechat/src/components/Messages/MessageList/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { MessageList } from '.'; import { avatarResolver, loremIpsum } from '../../../../.storybook/helpers'; diff --git a/packages/livechat/src/components/Modal/Modal.stories.tsx b/packages/livechat/src/components/Modal/Modal.stories.tsx index f24adee851e28..d7580acce923d 100644 --- a/packages/livechat/src/components/Modal/Modal.stories.tsx +++ b/packages/livechat/src/components/Modal/Modal.stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import AlertModal from './AlertModal'; import ConfirmationModal from './ConfirmationModal'; @@ -8,7 +8,6 @@ import Modal from './Modal'; import { loremIpsum } from '../../../.storybook/helpers'; export default { - title: 'Components/Modal', decorators: [ (storyFn) => (
@@ -28,58 +27,70 @@ export default { }, } satisfies Meta; -export const Normal: StoryFn> = (args) => ; -Normal.storyName = 'normal'; -Normal.args = { - children: loremIpsum({ count: 1, units: 'paragraphs' }), - open: true, - animated: false, - onDismiss: action('dismiss'), +export const Normal: StoryObj> = { + name: 'normal', + args: { + children: loremIpsum({ count: 1, units: 'paragraphs' }), + open: true, + animated: false, + onDismiss: action('dismiss'), + }, + render: (args) => , }; -export const Animated: StoryFn> = (args) => ; -Animated.storyName = 'animated'; -Animated.args = { - children: loremIpsum({ count: 1, units: 'paragraphs' }), - open: true, - animated: true, - onDismiss: action('dismiss'), +export const Animated: StoryObj> = { + name: 'animated', + args: { + children: loremIpsum({ count: 1, units: 'paragraphs' }), + open: true, + animated: true, + onDismiss: action('dismiss'), + }, + render: (args) => , }; -export const Timeout: StoryFn> = (args) => ; -Timeout.storyName = 'timeout'; -Timeout.args = { - children: loremIpsum({ count: 1, units: 'paragraphs' }), - open: true, - animated: false, - timeout: 3000, - onDismiss: action('dismiss'), +export const Timeout: StoryObj> = { + name: 'timeout', + args: { + children: loremIpsum({ count: 1, units: 'paragraphs' }), + open: true, + animated: false, + timeout: 3000, + onDismiss: action('dismiss'), + }, + render: (args) => , }; -export const DisallowDismissByOverlay: StoryFn> = (args) => ; -DisallowDismissByOverlay.storyName = 'disallow dismiss by overlay'; -DisallowDismissByOverlay.args = { - children: loremIpsum({ count: 1, units: 'paragraphs' }), - open: true, - animated: false, - dismissByOverlay: false, - onDismiss: action('dismiss'), +export const DisallowDismissByOverlay: StoryObj> = { + name: 'disallow dismiss by overlay', + args: { + children: loremIpsum({ count: 1, units: 'paragraphs' }), + open: true, + animated: false, + dismissByOverlay: false, + onDismiss: action('dismiss'), + }, + render: (args) => , }; -export const Confirm: StoryFn> = (args) => ; -Confirm.storyName = 'confirm'; -Confirm.args = { - text: 'Are you ok?', - confirmButtonText: 'Yes', - cancelButtonText: 'No', - onConfirm: action('confirm'), - onCancel: action('cancel'), +export const Confirm: StoryObj> = { + name: 'confirm', + args: { + text: 'Are you ok?', + confirmButtonText: 'Yes', + cancelButtonText: 'No', + onConfirm: action('confirm'), + onCancel: action('cancel'), + }, + render: (args) => , }; -export const Alert: StoryFn> = (args) => ; -Alert.storyName = 'alert'; -Alert.args = { - text: 'You look great today.', - buttonText: 'OK', - onConfirm: action('confirm'), +export const Alert: StoryObj> = { + name: 'alert', + args: { + text: 'You look great today.', + buttonText: 'OK', + onConfirm: action('confirm'), + }, + render: (args) => , }; diff --git a/packages/livechat/src/components/Popover/Popover.stories.tsx b/packages/livechat/src/components/Popover/Popover.stories.tsx index e21c0bf95ad75..5fdb11ce546a1 100644 --- a/packages/livechat/src/components/Popover/Popover.stories.tsx +++ b/packages/livechat/src/components/Popover/Popover.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import { PopoverContainer } from '.'; @@ -6,7 +6,6 @@ import { Button } from '../Button'; import PopoverTrigger from './PopoverTrigger'; export default { - title: 'Components/Popover', component: PopoverTrigger, decorators: [ (storyFn) => ( @@ -20,26 +19,32 @@ export default { }, } satisfies Meta>; -export const ArbitraryRenderer: StoryFn> = () => ( - - {({ pop }) => } - {({ dismiss, triggerBounds = {} }) => ( - - )} - -); -ArbitraryRenderer.storyName = 'arbitrary renderer'; +type Story = StoryObj>; -export const WithOverlayProps: StoryFn> = () => ( - - {({ pop }) => } - {({ dismiss, triggerBounds = {} }) => ( - - )} - -); -WithOverlayProps.storyName = 'with overlay props'; +export const ArbitraryRenderer: Story = { + name: 'arbitrary renderer', + render: () => ( + + {({ pop }) => } + {({ dismiss, triggerBounds = {} }) => ( + + )} + + ), +}; + +export const WithOverlayProps: Story = { + name: 'with overlay props', + render: () => ( + + {({ pop }) => } + {({ dismiss, triggerBounds = {} }) => ( + + )} + + ), +}; diff --git a/packages/livechat/src/components/Screen/Footer.stories.tsx b/packages/livechat/src/components/Screen/Footer.stories.tsx index 2526d19cb65ff..6d6882ebbe990 100644 --- a/packages/livechat/src/components/Screen/Footer.stories.tsx +++ b/packages/livechat/src/components/Screen/Footer.stories.tsx @@ -1,7 +1,7 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import i18next from 'i18next'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Screen, ScreenContent, ScreenFooter } from '.'; import { screenDecorator } from '../../../.storybook/helpers'; @@ -9,7 +9,6 @@ import { FooterOptions } from '../Footer'; import { MenuGroup, MenuItem } from '../Menu'; export default { - title: 'Components/Screen/Footer', component: ScreenFooter, decorators: [ (storyFn) => ( @@ -25,27 +24,33 @@ export default { }, } satisfies Meta>; -export const Empty: StoryFn> = () => ; -Empty.storyName = 'empty'; +type Story = StoryObj>; -export const WithChildren: StoryFn> = () => ( - Lorem ipsum dolor sit amet, his id atqui repudiare. -); -WithChildren.storyName = 'with children'; +export const Empty: Story = { + name: 'empty', + render: () => , +}; -export const WithOptions: StoryFn> = () => ( - - - {i18next.t('change_department')} - {i18next.t('forget_remove_my_data')} - - {i18next.t('finish_this_chat')} - - - - } - /> -); -WithOptions.storyName = 'with options'; +export const WithChildren: Story = { + name: 'with children', + render: () => Lorem ipsum dolor sit amet, his id atqui repudiare., +}; + +export const WithOptions: Story = { + name: 'with options', + render: () => ( + + + {i18next.t('change_department')} + {i18next.t('forget_remove_my_data')} + + {i18next.t('finish_this_chat')} + + + + } + /> + ), +}; diff --git a/packages/livechat/src/components/Sound/stories.tsx b/packages/livechat/src/components/Sound/stories.tsx index fc765820c1e51..38e719b61f9d2 100644 --- a/packages/livechat/src/components/Sound/stories.tsx +++ b/packages/livechat/src/components/Sound/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import { Sound } from '.'; import { beepAudio, sampleAudio } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/components/Tooltip/Tooltip.stories.tsx b/packages/livechat/src/components/Tooltip/Tooltip.stories.tsx index c63cb2a886685..36e02ee8e09f6 100644 --- a/packages/livechat/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/livechat/src/components/Tooltip/Tooltip.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import type { ComponentProps } from 'preact'; import Tooltip from './Tooltip'; @@ -9,7 +9,6 @@ import { Button } from '../Button'; const placements = [null, 'left', 'top', 'right', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] as const; export default { - title: 'Components/Tooltip', component: Tooltip, args: { children: 'A simple tool tip', @@ -28,25 +27,30 @@ export default { }, } satisfies Meta>; -export const Inline: StoryFn> = (args) => ; -Inline.storyName = 'inline'; +export const Inline: StoryObj> = { + name: 'inline', +}; -export const Placements: StoryFn> = (args) => ( -
- {placements.map((placement, i) => ( - - ))} -
-); -Placements.storyName = 'placements'; +export const Placements: StoryObj> = { + name: 'placements', + render: (args) => ( +
+ {placements.map((placement, i) => ( + + ))} +
+ ), +}; -export const ConnectedToAnotherComponent: StoryFn> = (args) => ( - - - -); -ConnectedToAnotherComponent.storyName = 'connected to another component'; -ConnectedToAnotherComponent.args = { - content: 'A simple tool tip', +export const ConnectedToAnotherComponent: StoryObj> = { + name: 'connected to another component', + args: { + content: 'A simple tool tip', + }, + decorators: [(storyFn) => {storyFn()}], + render: (args) => ( + + + + ), }; -ConnectedToAnotherComponent.decorators = [(storyFn) => {storyFn()}]; diff --git a/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx index 37d4ebfdab10c..26f9877bfa3ab 100644 --- a/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx +++ b/packages/livechat/src/components/uiKit/message/ActionsBlock.stories.tsx @@ -1,11 +1,10 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; +import { action } from 'storybook/actions'; import { renderMessageBlocks } from '.'; import Surface from './Surface'; export default { - title: 'UiKit/Message/Actions block', parameters: { layout: 'centered', }, @@ -24,175 +23,200 @@ export default { ], } satisfies Meta; -export const AllSelects = () => - renderMessageBlocks([ - { - type: 'actions', - elements: [ +export const AllSelects: StoryObj = { + name: 'all selects', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'conversations_select', - placeholder: { - type: 'plain_text', - text: 'Select a conversation', - emoji: true, - }, - }, - { - type: 'channels_select', - placeholder: { - type: 'plain_text', - text: 'Select a channel', - emoji: true, - }, - }, - { - type: 'users_select', - placeholder: { - type: 'plain_text', - text: 'Select a user', - emoji: true, - }, - }, - { - type: 'static_select', - placeholder: { - type: 'plain_text', - text: 'Select an item', - emoji: true, - }, - options: [ + type: 'actions', + elements: [ { - text: { + type: 'conversations_select', + placeholder: { type: 'plain_text', - text: '*this is plain_text text*', + text: 'Select a conversation', emoji: true, }, - value: 'value-0', }, { - text: { + type: 'channels_select', + placeholder: { type: 'plain_text', - text: '*this is plain_text text*', + text: 'Select a channel', emoji: true, }, - value: 'value-1', }, { - text: { + type: 'users_select', + placeholder: { + type: 'plain_text', + text: 'Select a user', + emoji: true, + }, + }, + { + type: 'static_select', + placeholder: { type: 'plain_text', - text: '*this is plain_text text*', + text: 'Select an item', emoji: true, }, - value: 'value-2', + options: [ + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-0', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-1', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-2', + }, + ], }, ], }, - ], - }, - ]); -AllSelects.storyName = 'all selects'; + ])} + + ), +}; -export const FilteredConversationsSelect = () => - renderMessageBlocks([ - { - type: 'actions', - elements: [ +export const FilteredConversationsSelect: StoryObj = { + name: 'filtered conversations select', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'conversations_select', - placeholder: { - type: 'plain_text', - text: 'Select private conversation', - emoji: true, - }, - filter: { - include: ['private'], - }, + type: 'actions', + elements: [ + { + type: 'conversations_select', + placeholder: { + type: 'plain_text', + text: 'Select private conversation', + emoji: true, + }, + filter: { + include: ['private'], + }, + }, + ], }, - ], - }, - ]); -FilteredConversationsSelect.storyName = 'filtered conversations select'; + ])} + + ), +}; -export const SelectsWithInitialOptions = () => - renderMessageBlocks([ - { - type: 'actions', - elements: [ - { - type: 'conversations_select', - placeholder: { - type: 'plain_text', - text: 'Select a conversation', - emoji: true, - }, - initialConversation: 'D123', - }, +export const SelectsWithInitialOptions: StoryObj = { + name: 'selects with initial options', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'users_select', - placeholder: { - type: 'plain_text', - text: 'Select a user', - emoji: true, - }, - initialUser: 'U123', - }, - { - type: 'channels_select', - placeholder: { - type: 'plain_text', - text: 'Select a channel', - emoji: true, - }, - initialChannel: 'C123', + type: 'actions', + elements: [ + { + type: 'conversations_select', + placeholder: { + type: 'plain_text', + text: 'Select a conversation', + emoji: true, + }, + initialConversation: 'D123', + }, + { + type: 'users_select', + placeholder: { + type: 'plain_text', + text: 'Select a user', + emoji: true, + }, + initialUser: 'U123', + }, + { + type: 'channels_select', + placeholder: { + type: 'plain_text', + text: 'Select a channel', + emoji: true, + }, + initialChannel: 'C123', + }, + ], }, - ], - }, - ]); -SelectsWithInitialOptions.storyName = 'selects with initial options'; + ])} + + ), +}; -export const Button = () => - renderMessageBlocks([ - { - type: 'actions', - elements: [ +export const Button: StoryObj = { + name: 'button', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'button', - text: { - type: 'plain_text', - text: 'Click Me', - emoji: true, - }, - value: 'click_me_123', + type: 'actions', + elements: [ + { + type: 'button', + text: { + type: 'plain_text', + text: 'Click Me', + emoji: true, + }, + value: 'click_me_123', + }, + ], }, - ], - }, - ]); -Button.storyName = 'button'; + ])} + + ), +}; -export const DatePicker = () => - renderMessageBlocks([ - { - type: 'actions', - elements: [ - { - type: 'datepicker', - initialDate: '1990-04-28', - placeholder: { - type: 'plain_text', - text: 'Select a date', - emoji: true, - }, - }, +export const DatePicker: StoryObj = { + name: 'datepicker', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'datepicker', - initialDate: '1990-04-28', - placeholder: { - type: 'plain_text', - text: 'Select a date', - emoji: true, - }, + type: 'actions', + elements: [ + { + type: 'datepicker', + initialDate: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select a date', + emoji: true, + }, + }, + { + type: 'datepicker', + initialDate: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select a date', + emoji: true, + }, + }, + ], }, - ], - }, - ]); -DatePicker.storyName = 'datepicker'; + ])} + + ), +}; diff --git a/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx b/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx index e06d5ea36c75b..12817a97c4f6e 100644 --- a/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx +++ b/packages/livechat/src/components/uiKit/message/ButtonElement/stories.tsx @@ -1,7 +1,7 @@ import { BlockContext } from '@rocket.chat/ui-kit'; -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import ButtonElement from '.'; import { parser } from '..'; diff --git a/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx index 04ad34ed012fe..b237e9c5ff751 100644 --- a/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx +++ b/packages/livechat/src/components/uiKit/message/ContextBlock.stories.tsx @@ -1,80 +1,94 @@ -import type { Meta } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import { renderMessageBlocks } from '.'; import { accessoryImage } from '../../../../.storybook/helpers'; export default { - title: 'UiKit/Message/Context block', parameters: { layout: 'centered', }, decorators: [(storyFn) =>
{storyFn()}
], } satisfies Meta; -export const PlainText = () => - renderMessageBlocks([ - { - type: 'context', - elements: [ +export const PlainText: StoryObj = { + name: 'plain_text', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'plain_text', - text: 'Author: Manuel Puig', - emoji: true, + type: 'context', + elements: [ + { + type: 'plain_text', + text: 'Author: Manuel Puig', + emoji: true, + }, + ], }, - ], - }, - ]); -PlainText.storyName = 'plain_text'; + ])} + + ), +}; -export const Mrkdwn = () => - renderMessageBlocks([ - { - type: 'context', - elements: [ +export const Mrkdwn: StoryObj = { + name: 'mrkdwn', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'image', - imageUrl: accessoryImage, - altText: 'Photo by Julian Schultz on Unsplash', + type: 'context', + elements: [ + { + type: 'image', + imageUrl: accessoryImage, + altText: 'Photo by Julian Schultz on Unsplash', + }, + { + type: 'mrkdwn', + text: '*Julian Schultz* has approved this message.', + }, + ], }, - { - type: 'mrkdwn', - text: '*Julian Schultz* has approved this message.', - }, - ], - }, - ]); -Mrkdwn.storyName = 'mrkdwn'; + ])} + + ), +}; -export const TextAndImages = () => - renderMessageBlocks([ - { - type: 'context', - elements: [ - { - type: 'mrkdwn', - text: '*This* is :smile: markdown', - }, - { - type: 'image', - imageUrl: accessoryImage, - altText: 'Photo by Julian Schultz on Unsplash', - }, - { - type: 'image', - imageUrl: accessoryImage, - altText: 'Photo by Julian Schultz on Unsplash', - }, - { - type: 'image', - imageUrl: accessoryImage, - altText: 'Photo by Julian Schultz on Unsplash', - }, +export const TextAndImages: StoryObj = { + name: 'text and images', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'plain_text', - text: 'Author: Manuel Puig', - emoji: true, + type: 'context', + elements: [ + { + type: 'mrkdwn', + text: '*This* is :smile: markdown', + }, + { + type: 'image', + imageUrl: accessoryImage, + altText: 'Photo by Julian Schultz on Unsplash', + }, + { + type: 'image', + imageUrl: accessoryImage, + altText: 'Photo by Julian Schultz on Unsplash', + }, + { + type: 'image', + imageUrl: accessoryImage, + altText: 'Photo by Julian Schultz on Unsplash', + }, + { + type: 'plain_text', + text: 'Author: Manuel Puig', + emoji: true, + }, + ], }, - ], - }, - ]); -TextAndImages.storyName = 'text and images'; + ])} + + ), +}; diff --git a/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx index 03cdf0485f238..d6d6439bb2a02 100644 --- a/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx +++ b/packages/livechat/src/components/uiKit/message/DividerBlock.stories.tsx @@ -1,19 +1,23 @@ -import type { Meta } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import { renderMessageBlocks } from '.'; export default { - title: 'UiKit/Message/Divider block', parameters: { layout: 'centered', }, decorators: [(storyFn) =>
{storyFn()}
], } satisfies Meta; -export const Default = () => - renderMessageBlocks([ - { - type: 'divider', - }, - ]); -Default.storyName = 'default'; +export const Default: StoryObj = { + name: 'default', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'divider', + }, + ])} + + ), +}; diff --git a/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx index 46a304d5f08bd..a75e6751cda15 100644 --- a/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx +++ b/packages/livechat/src/components/uiKit/message/ImageBlock.stories.tsx @@ -1,37 +1,46 @@ -import type { Meta } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; import { renderMessageBlocks } from '.'; import { imageBlock } from '../../../../.storybook/helpers'; export default { - title: 'UiKit/Message/Image block', parameters: { layout: 'centered', }, decorators: [(storyFn) =>
{storyFn()}
], } satisfies Meta; -export const WithTitle = () => - renderMessageBlocks([ - { - type: 'image', - title: { - type: 'plain_text', - text: 'SpaceX Falcon Heavy Launch', - emoji: true, - }, - imageUrl: imageBlock, - altText: 'Photo by SpaceX on Unsplash', - }, - ]); -WithTitle.storyName = 'with title'; +export const WithTitle: StoryObj = { + name: 'with title', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'image', + title: { + type: 'plain_text', + text: 'SpaceX Falcon Heavy Launch', + emoji: true, + }, + imageUrl: imageBlock, + altText: 'Photo by SpaceX on Unsplash', + }, + ])} + + ), +}; -export const WithNoTitle = () => - renderMessageBlocks([ - { - type: 'image', - imageUrl: imageBlock, - altText: 'Photo by SpaceX on Unsplash', - }, - ]); -WithNoTitle.storyName = 'with no title'; +export const WithNoTitle: StoryObj = { + name: 'with no title', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'image', + imageUrl: imageBlock, + altText: 'Photo by SpaceX on Unsplash', + }, + ])} + + ), +}; diff --git a/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx b/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx index a108c31da7652..5b0bfc8790da5 100644 --- a/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx +++ b/packages/livechat/src/components/uiKit/message/SectionBlock.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta } from '@storybook/preact'; +import type { Meta, StoryObj } from '@storybook/preact'; +import { action } from 'storybook/actions'; import { renderMessageBlocks } from '.'; import Surface from './Surface'; @@ -7,7 +7,6 @@ import { accessoryImage } from '../../../../.storybook/helpers'; import { PopoverContainer } from '../../Popover'; export default { - title: 'UiKit/Message/Section block', parameters: { layout: 'centered', }, @@ -27,178 +26,213 @@ export default { ], } satisfies Meta; -export const TextAsPlainText = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'plain_text', - text: 'This is a plain text section block.', - emoji: true, - }, - }, - ]); -TextAsPlainText.storyName = 'text as plain_text'; - -export const TextAsMarkdown = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and [this is a link](https://google.com)', - }, - }, - ]); -TextAsMarkdown.storyName = 'text as mrkdwn'; - -export const TextFields = () => - renderMessageBlocks([ - { - type: 'section', - fields: [ - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true, - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true, - }, +export const TextAsPlainText: StoryObj = { + name: 'text as plain_text', + render: () => ( + <> + {renderMessageBlocks([ { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true, - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true, - }, - { - type: 'plain_text', - text: '*this is plain_text text*', - emoji: true, + type: 'section', + text: { + type: 'plain_text', + text: 'This is a plain text section block.', + emoji: true, + }, }, - ], - }, - ]); -TextFields.storyName = 'text fields'; + ])} + + ), +}; -export const AccessoryAsButton = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'This is a section block with a button.', - }, - accessory: { - type: 'button', - text: { - type: 'plain_text', - text: 'Click Me', - emoji: true, +export const TextAsMarkdown: StoryObj = { + name: 'text as mrkdwn', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and [this is a link](https://google.com)', + }, }, - value: 'click_me_123', - }, - }, - ]); -AccessoryAsButton.storyName = 'accessory as button'; - -export const AccessoryAsImage = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'This is a section block with an accessory image.', - }, - accessory: { - type: 'image', - imageUrl: accessoryImage, - altText: 'Photo by Julian Schultz on Unsplash', - }, - }, - ]); -AccessoryAsImage.storyName = 'accessory as image'; + ])} + + ), +}; -export const AccessoryAsOverflowMenu = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'This is a section block with an overflow menu.', - }, - accessory: { - type: 'overflow', - options: [ - { - text: { +export const TextFields: StoryObj = { + name: 'text fields', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + fields: [ + { type: 'plain_text', text: '*this is plain_text text*', emoji: true, }, - value: 'value-0', - }, - { - text: { + { type: 'plain_text', text: '*this is plain_text text*', emoji: true, }, - value: 'value-1', - }, - { - text: { + { type: 'plain_text', text: '*this is plain_text text*', emoji: true, }, - value: 'value-2', - }, - { - text: { + { type: 'plain_text', text: '*this is plain_text text*', emoji: true, }, - value: 'value-3', + { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + ], + }, + ])} + + ), +}; + +export const AccessoryAsButton: StoryObj = { + name: 'accessory as button', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'This is a section block with a button.', }, - { + accessory: { + type: 'button', text: { type: 'plain_text', - text: '*this is plain_text text*', + text: 'Click Me', emoji: true, }, - value: 'value-4', + value: 'click_me_123', }, - ], - }, - }, - ]); -AccessoryAsOverflowMenu.storyName = 'accessory as overflow menu'; + }, + ])} + + ), +}; + +export const AccessoryAsImage: StoryObj = { + name: 'accessory as image', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'This is a section block with an accessory image.', + }, + accessory: { + type: 'image', + imageUrl: accessoryImage, + altText: 'Photo by Julian Schultz on Unsplash', + }, + }, + ])} + + ), +}; -export const AccessoryAsDatePicker = () => - renderMessageBlocks([ - { - type: 'section', - text: { - type: 'mrkdwn', - text: 'Pick a date for the deadline.', - }, - accessory: { - type: 'datepicker', - initial_date: '1990-04-28', - placeholder: { - type: 'plain_text', - text: 'Select a date', - emoji: true, +export const AccessoryAsOverflowMenu: StoryObj = { + name: 'accessory as overflow menu', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'This is a section block with an overflow menu.', + }, + accessory: { + type: 'overflow', + options: [ + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-0', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-1', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-2', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-3', + }, + { + text: { + type: 'plain_text', + text: '*this is plain_text text*', + emoji: true, + }, + value: 'value-4', + }, + ], + }, + }, + ])} + + ), +}; + +export const AccessoryAsDatePicker: StoryObj = { + name: 'accessory as datepicker', + render: () => ( + <> + {renderMessageBlocks([ + { + type: 'section', + text: { + type: 'mrkdwn', + text: 'Pick a date for the deadline.', + }, + accessory: { + type: 'datepicker', + initial_date: '1990-04-28', + placeholder: { + type: 'plain_text', + text: 'Select a date', + emoji: true, + }, + }, }, - }, - }, - ]); -AccessoryAsDatePicker.storyName = 'accessory as datepicker'; + ])} + + ), +}; diff --git a/packages/livechat/src/routes/Chat/stories.tsx b/packages/livechat/src/routes/Chat/stories.tsx index 54e5168e5bd74..6e2888827fe0b 100644 --- a/packages/livechat/src/routes/Chat/stories.tsx +++ b/packages/livechat/src/routes/Chat/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import Chat from './component'; import { avatarResolver, beepAudio, screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/routes/ChatFinished/stories.tsx b/packages/livechat/src/routes/ChatFinished/stories.tsx index 5d9644bcfba1a..bbac988b6a934 100644 --- a/packages/livechat/src/routes/ChatFinished/stories.tsx +++ b/packages/livechat/src/routes/ChatFinished/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import ChatFinished from './component'; import { loremIpsum, screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/routes/GDPRAgreement/stories.tsx b/packages/livechat/src/routes/GDPRAgreement/stories.tsx index 5e318948f1823..95f0b349489ae 100644 --- a/packages/livechat/src/routes/GDPRAgreement/stories.tsx +++ b/packages/livechat/src/routes/GDPRAgreement/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import GDPRAgreement from './component'; import { screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/routes/SwitchDepartment/stories.tsx b/packages/livechat/src/routes/SwitchDepartment/stories.tsx index e22479c39c5cd..47e3d39c62357 100644 --- a/packages/livechat/src/routes/SwitchDepartment/stories.tsx +++ b/packages/livechat/src/routes/SwitchDepartment/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import SwitchDepartment from './index'; import { screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/livechat/src/routes/TriggerMessage/stories.tsx b/packages/livechat/src/routes/TriggerMessage/stories.tsx index d0eb6500c4cc3..6f19976eac768 100644 --- a/packages/livechat/src/routes/TriggerMessage/stories.tsx +++ b/packages/livechat/src/routes/TriggerMessage/stories.tsx @@ -1,6 +1,6 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/preact'; import type { ComponentProps } from 'preact'; +import { action } from 'storybook/actions'; import TriggerMessage from './component'; import { screenDecorator } from '../../../.storybook/helpers'; diff --git a/packages/mock-providers/package.json b/packages/mock-providers/package.json index 7b576204bb875..75f813664e2b9 100644 --- a/packages/mock-providers/package.json +++ b/packages/mock-providers/package.json @@ -19,7 +19,6 @@ "@rocket.chat/emitter": "^0.32.0", "@rocket.chat/i18n": "workspace:~", "@rocket.chat/ui-contexts": "workspace:^", - "@storybook/react": "^8.6.18", "i18next": "~23.4.9", "react-i18next": "~13.2.2" }, @@ -29,6 +28,7 @@ "@rocket.chat/mongo-adapter": "workspace:~", "@rocket.chat/tools": "workspace:~", "@rocket.chat/ui-video-conf": "workspace:*", + "@storybook/react": "^9.1.13", "@tanstack/react-query": "~5.65.1", "@testing-library/dom": "~10.4.1", "@testing-library/jest-dom": "~6.8.0", @@ -39,10 +39,11 @@ "jest": "~30.2.0", "react": "~18.3.1", "react-dom": "~18.3.1", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3" }, "peerDependencies": { + "@storybook/react": "*", "@tanstack/react-query": "*", "react": "*" }, diff --git a/packages/storybook-config/package.json b/packages/storybook-config/package.json index 63c9740ddde9a..04bcc756a7d19 100644 --- a/packages/storybook-config/package.json +++ b/packages/storybook-config/package.json @@ -22,24 +22,21 @@ "@rocket.chat/emitter": "^0.32.0", "@rocket.chat/fuselage-hooks": "^0.41.0", "@rocket.chat/fuselage-tokens": "~0.33.2", - "@storybook/addon-a11y": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/blocks": "^8.6.18", - "@storybook/preview-api": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", - "@storybook/theming": "^8.6.18", + "@storybook/addon-a11y": "^9.1.13", + "@storybook/addon-docs": "^9.1.13", + "@storybook/addon-styling-webpack": "^2.0.0", + "@storybook/addon-webpack5-compiler-swc": "^4.0.3", + "@storybook/react-webpack5": "^9.1.13", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", - "storybook-dark-mode": "^4.0.2", + "storybook": "^9.1.13", + "storybook-dark-mode": "^5.0.0", "webpack": "~5.104.1" }, "devDependencies": { "@rocket.chat/fuselage": "^0.78.0", "@rocket.chat/icons": "~0.47.0", "@rocket.chat/tsconfig": "workspace:*", - "@storybook/react": "^8.6.18", + "@storybook/react": "^9.1.13", "eslint": "~9.39.4", "react": "~18.3.1", "react-dom": "~18.3.1", diff --git a/packages/storybook-config/src/DocsContainer.tsx b/packages/storybook-config/src/DocsContainer.tsx index 217b6b05910d1..59bc81570a441 100644 --- a/packages/storybook-config/src/DocsContainer.tsx +++ b/packages/storybook-config/src/DocsContainer.tsx @@ -1,8 +1,8 @@ -import { DocsContainer as BaseContainer } from '@storybook/blocks'; -import { addons } from '@storybook/preview-api'; -import { themes } from '@storybook/theming'; +import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks'; import type { ComponentPropsWithoutRef } from 'react'; import { useEffect, useState } from 'react'; +import { addons } from 'storybook/preview-api'; +import { themes } from 'storybook/theming'; import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; const channel = addons.getChannel(); diff --git a/packages/storybook-config/src/main.ts b/packages/storybook-config/src/main.ts index f41781ed0c9c6..0f63732e0acf4 100644 --- a/packages/storybook-config/src/main.ts +++ b/packages/storybook-config/src/main.ts @@ -6,12 +6,12 @@ function getAbsolutePath(value: any): string { return dirname(require.resolve(join(value, 'package.json'))); } -const baseConfig = (customConfig?: StorybookConfig): StorybookConfig => { +const baseConfig = (customConfig?: Partial): StorybookConfig => { return { stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-essentials'), + getAbsolutePath('@storybook/addon-docs'), getAbsolutePath('storybook-dark-mode'), getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), getAbsolutePath('@storybook/addon-styling-webpack'), diff --git a/packages/storybook-config/src/preview.tsx b/packages/storybook-config/src/preview.tsx index 421a356707618..b6893ce2e6db3 100644 --- a/packages/storybook-config/src/preview.tsx +++ b/packages/storybook-config/src/preview.tsx @@ -1,7 +1,7 @@ import { PaletteStyleTag } from '@rocket.chat/fuselage'; import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; import type { Parameters, Decorator } from '@storybook/react'; -import { themes } from '@storybook/theming'; +import { themes } from 'storybook/theming'; import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; @@ -48,11 +48,16 @@ export const parameters: Parameters = { }; export const decorators: Decorator[] = [ - (Story) => { + function DarkModeDecorator(Story) { const dark = useDarkMode(); return ( <> + diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json index 1b9e32d2de599..82a3d15eebb0f 100644 --- a/packages/ui-client/package.json +++ b/packages/ui-client/package.json @@ -40,8 +40,7 @@ "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-avatar": "workspace:~", "@rocket.chat/ui-contexts": "workspace:~", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/react": "^9.1.13", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", "@types/jest": "~30.0.0", @@ -58,7 +57,7 @@ "react-hook-form": "~7.45.4", "react-i18next": "~13.2.2", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3" }, "peerDependencies": { diff --git a/packages/ui-client/src/components/AnchorPortal.spec.tsx b/packages/ui-client/src/components/AnchorPortal.spec.tsx index 20423f777e157..7a019f6de7be7 100644 --- a/packages/ui-client/src/components/AnchorPortal.spec.tsx +++ b/packages/ui-client/src/components/AnchorPortal.spec.tsx @@ -1,3 +1,4 @@ +/* eslint-disable testing-library/no-node-access */ import { render, screen } from '@testing-library/react'; import AnchorPortal from './AnchorPortal'; @@ -13,19 +14,19 @@ it('should render children', () => { }); it('should not recreate the anchor element', () => { - render( + const { baseElement } = render(
, ); - const anchorA = document.getElementById('test-anchor'); + const anchorA = baseElement.querySelector('#test-anchor'); render(
, ); - const anchorB = document.getElementById('test-anchor'); + const anchorB = baseElement.querySelector('#test-anchor'); expect(anchorA).toBe(anchorB); expect(screen.getByRole('presentation', { name: 'example A' })).toBeInTheDocument(); @@ -33,24 +34,24 @@ it('should not recreate the anchor element', () => { }); it('should remove the anchor element when unmounted', () => { - const { unmount } = render( + const { baseElement, unmount } = render(
, ); - expect(document.getElementById('test-anchor')).toBeInTheDocument(); + expect(baseElement.querySelector('#test-anchor')).toBeInTheDocument(); unmount(); - expect(document.getElementById('test-anchor')).not.toBeInTheDocument(); + expect(baseElement.querySelector('#test-anchor')).not.toBeInTheDocument(); }); it('should not remove the anchor element after unmounting if there are other portals with the same id', () => { - const { unmount } = render( + const { baseElement, unmount } = render(
, ); - expect(document.getElementById('test-anchor')).toBeInTheDocument(); + expect(baseElement.querySelector('#test-anchor')).toBeInTheDocument(); render( @@ -59,5 +60,5 @@ it('should not remove the anchor element after unmounting if there are other por ); unmount(); - expect(document.getElementById('test-anchor')).toBeInTheDocument(); + expect(baseElement.querySelector('#test-anchor')).toBeInTheDocument(); }); diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx index 0c58ce6d4876a..7223f1390ecfa 100644 --- a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx +++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './AnnouncementBanner.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx index 4459c7d419c25..4fa4cad3fd696 100644 --- a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx +++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx @@ -1,28 +1,27 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import AnnouncementBanner from './AnnouncementBanner'; export default { - title: 'Components/AnnouncementBanner', component: AnnouncementBanner, args: { onClick: action('clicked'), }, } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - children: 'Announcement', +export const Default: StoryObj = { + args: { + children: 'Announcement', + }, }; -export const WithLink = Template.bind({}); -WithLink.args = { - children: ( - - Announcement - - ), +export const WithLink: StoryObj = { + args: { + children: ( + + Announcement + + ), + }, }; diff --git a/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap b/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap index 8aa4030017b5e..2cc8916dce5ab 100644 --- a/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap +++ b/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap @@ -31,6 +31,7 @@ exports[`renders WithLink without crashing 1`] = ` > Announcement diff --git a/packages/ui-client/src/components/DotLeader.stories.tsx b/packages/ui-client/src/components/DotLeader.stories.tsx index 5bac732351f56..c283b8d918825 100644 --- a/packages/ui-client/src/components/DotLeader.stories.tsx +++ b/packages/ui-client/src/components/DotLeader.stories.tsx @@ -1,18 +1,19 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import DotLeader from './DotLeader'; export default { - title: 'Components/DotLeader', component: DotLeader, } satisfies Meta; -export const Default: StoryFn = (args) => ( - - Label - - 12345 - -); -Default.storyName = 'DotLeader'; +export const Default: StoryObj = { + name: 'DotLeader', + render: (args) => ( + + Label + + 12345 + + ), +}; diff --git a/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx b/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx index 57a1ed1c4a991..10417eda5492d 100644 --- a/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx +++ b/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx @@ -1,5 +1,5 @@ import { TextInput, Box, Icon } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { GenericTable, @@ -43,31 +43,35 @@ const filter = ( ); -export const Default: StoryFn = () => ( - <> - {filter} - - {headers} - - {results?.map(({ _id, name, email }: any) => ( - - {name} - {email} - - ))} - - - -); +export const Default: StoryObj = { + render: () => ( + <> + {filter} + + {headers} + + {results?.map(({ _id, name, email }: any) => ( + + {name} + {email} + + ))} + + + + ), +}; -export const Loading: StoryFn = () => ( - <> - {filter} - - {headers} - - - - - -); +export const Loading: StoryObj = { + render: () => ( + <> + {filter} + + {headers} + + + + + + ), +}; diff --git a/packages/ui-client/src/components/Header/Header.stories.tsx b/packages/ui-client/src/components/Header/Header.stories.tsx index 380e691069f16..5c03b8e5d80d5 100644 --- a/packages/ui-client/src/components/Header/Header.stories.tsx +++ b/packages/ui-client/src/components/Header/Header.stories.tsx @@ -1,9 +1,9 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { Avatar, Box, IconButton } from '@rocket.chat/fuselage'; import { SettingsContext } from '@rocket.chat/ui-contexts'; -import { action } from '@storybook/addon-actions'; -import type { Meta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentPropsWithoutRef, ComponentType } from 'react'; +import { action } from 'storybook/actions'; import { Header, @@ -23,7 +23,6 @@ const avatarUrl = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; export default { - title: 'Components/HeaderV2', component: Header, subcomponents: { HeaderToolbar: HeaderToolbar as ComponentType, @@ -90,82 +89,8 @@ const room: IRoom = { const CustomAvatar = (props: Omit, 'url'>) => ; const icon = { name: 'hash' } as const; -export const Default = () => ( -
- - - - - - {icon && } - {room.name} - - - - - - - - - - -
-); - -export const WithBurger = () => ( -
- - - - - - - - - {icon && } - {room.name} - - - - - - - - - - -
-); - -export const WithActionBadge = () => ( -
- - - - - - {icon && } - {room.name} - - - - - - 1 - - - 2 - - - 99 - - - -
-); - -export const WithTopic = () => ( - <> +export const Default: StoryObj = { + render: () => (
@@ -174,10 +99,9 @@ export const WithTopic = () => ( {icon && } {room.name} - + - {room.topic} @@ -186,12 +110,15 @@ export const WithTopic = () => (
- -); + ), +}; -export const WithAnnouncement = () => ( - <> +export const WithBurger: StoryObj = { + render: () => (
+ + + @@ -210,6 +137,88 @@ export const WithAnnouncement = () => (
- {room.announcement} - -); + ), +}; + +export const WithActionBadge: StoryObj = { + render: () => ( +
+ + + + + + {icon && } + {room.name} + + + + + + 1 + + + 2 + + + 99 + + + +
+ ), +}; + +export const WithTopic: StoryObj = { + render: () => ( + <> +
+ + + + + + {icon && } + {room.name} + + + + {room.topic} + + + + + + + +
+ + ), +}; + +export const WithAnnouncement: StoryObj = { + render: () => ( + <> +
+ + + + + + {icon && } + {room.name} + + + + + + + + + + +
+ {room.announcement} + + ), +}; diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanel.stories.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanel.stories.tsx index 442a4a20caec0..b89a67fba1301 100644 --- a/packages/ui-client/src/components/InfoPanel/InfoPanel.stories.tsx +++ b/packages/ui-client/src/components/InfoPanel/InfoPanel.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentType } from 'react'; import { @@ -27,34 +27,36 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = () => ( - - - - - - - - Description - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit - libero - - - - Announcement - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit - libero - - - - Topic - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit - libero - - - - -); +export const Default: StoryObj = { + render: () => ( + + + + + + + + Description + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit + libero + + + + Announcement + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit + libero + + + + Topic + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit + libero + + + + + ), +}; diff --git a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.stories.tsx b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.stories.tsx index 663e9a3580266..ae23ff1891295 100644 --- a/packages/ui-client/src/components/Modal/GenericModal/GenericModal.stories.tsx +++ b/packages/ui-client/src/components/Modal/GenericModal/GenericModal.stories.tsx @@ -1,11 +1,10 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentType } from 'react'; +import { action } from 'storybook/actions'; import GenericModal, { GenericModalDoNotAskAgain } from './GenericModal'; export default { - title: 'Components/GenericModal', component: GenericModal, subcomponents: { GenericModalDoNotAskAgain: GenericModalDoNotAskAgain as ComponentType }, args: { @@ -18,41 +17,38 @@ export default { }, } satisfies Meta; -export const Example: StoryFn = () => ( - - The quick brown fox jumps over the lazy dog. - -); - -const Template: StoryFn = (args) => ; - -export const Info = Template.bind({}); -Info.args = { variant: 'info' }; - -export const Danger = Template.bind({}); -Danger.args = { variant: 'danger' }; - -export const Warning = Template.bind({}); -Warning.args = { variant: 'warning' }; - -export const Success = Template.bind({}); -Success.args = { variant: 'success' }; - -export const DangerSecondary = Template.bind({}); -DangerSecondary.args = { variant: 'secondary-danger' }; - -export const WithDontAskAgain: StoryFn = (args) => ; -WithDontAskAgain.args = { - dontAskAgain: { - action: 'action', - label: 'label', +export const Example: StoryObj = { + render: () => ( + + The quick brown fox jumps over the lazy dog. + + ), +}; + +export const Info: StoryObj = { args: { variant: 'info' } }; + +export const Danger: StoryObj = { args: { variant: 'danger' } }; + +export const Warning: StoryObj = { args: { variant: 'warning' } }; + +export const Success: StoryObj = { args: { variant: 'success' } }; + +export const DangerSecondary: StoryObj = { args: { variant: 'secondary-danger' } }; + +export const WithDontAskAgain: StoryObj = { + render: (args) => , + args: { + dontAskAgain: { + action: 'action', + label: 'label', + }, }, }; diff --git a/packages/ui-client/src/components/Page/Page.stories.tsx b/packages/ui-client/src/components/Page/Page.stories.tsx index e77b0db9d6ba2..847f9d38ee18b 100644 --- a/packages/ui-client/src/components/Page/Page.stories.tsx +++ b/packages/ui-client/src/components/Page/Page.stories.tsx @@ -1,5 +1,5 @@ import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Page from './Page'; import PageContent from './PageContent'; @@ -31,47 +31,55 @@ const DummyContent = ({ rows = 10 }: { rows?: number }) => ( ); -export const Example: StoryFn = () => ( - - - - - Say goodbye to inefficient email threads and managing multiple guest accounts. Enable teams to communicate safely with partners, - vendors, and suppliers directly from Rocket.Chat regardless of which collaboration platform they use. - - - -); +export const Example: StoryObj = { + render: () => ( + + + + + Say goodbye to inefficient email threads and managing multiple guest accounts. Enable teams to communicate safely with partners, + vendors, and suppliers directly from Rocket.Chat regardless of which collaboration platform they use. + + + + ), +}; -export const WithButtonsAtTheHeader: StoryFn = () => ( - - - - - - - - - - -); +export const WithButtonsAtTheHeader: StoryObj = { + render: () => ( + + + + + + + + + + + ), +}; -export const WithScrollableContent: StoryFn = () => ( - - - - - - -); +export const WithScrollableContent: StoryObj = { + render: () => ( + + + + + + + ), +}; -export const WithScrollableContentWithShadow: StoryFn = () => ( - - - - - - -); +export const WithScrollableContentWithShadow: StoryObj = { + render: () => ( + + + + + + + ), +}; diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.stories.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.stories.tsx index c9896d0075beb..3199fdd17ea00 100644 --- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.stories.tsx +++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.stories.tsx @@ -1,10 +1,9 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { PasswordVerifier } from './PasswordVerifier'; export default { - title: 'Components/PasswordVerifier', component: PasswordVerifier, decorators: [ mockAppRoot() @@ -41,4 +40,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Default: StoryObj = {}; diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx index d69753cb6f293..613d91f6ac9ee 100644 --- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx +++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx @@ -8,7 +8,7 @@ afterEach(() => { jest.restoreAllMocks(); }); -it('should render no policy if its disabled ', () => { +it('should render no policy if its disabled', () => { render(, { wrapper: mockAppRoot().withSetting('Accounts_Password_Policy_Enabled', false).build(), }); diff --git a/packages/ui-client/src/components/SidebarToggler/SidebarTogglerButton.stories.tsx b/packages/ui-client/src/components/SidebarToggler/SidebarTogglerButton.stories.tsx index e77e938896f2e..58849e5615db2 100644 --- a/packages/ui-client/src/components/SidebarToggler/SidebarTogglerButton.stories.tsx +++ b/packages/ui-client/src/components/SidebarToggler/SidebarTogglerButton.stories.tsx @@ -1,5 +1,5 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import SidebarTogglerButton from './SidebarTogglerButton'; @@ -12,12 +12,14 @@ export default { }, } satisfies Meta; -export const Example: StoryFn = () => ; +export const Example: StoryObj = { + render: () => , +}; -const Template: StoryFn = (args) => ; +export const Default: StoryObj = {}; -export const Default = Template.bind({}); -export const WithBadge = Template.bind({}); -WithBadge.args = { - badge: 99, +export const WithBadge: StoryObj = { + args: { + badge: 99, + }, }; diff --git a/packages/ui-client/src/components/TextSeparator.stories.tsx b/packages/ui-client/src/components/TextSeparator.stories.tsx index 7ed0ddda9193f..a2d5d89f2697f 100644 --- a/packages/ui-client/src/components/TextSeparator.stories.tsx +++ b/packages/ui-client/src/components/TextSeparator.stories.tsx @@ -1,9 +1,8 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import TextSeparator from './TextSeparator'; export default { - title: 'Components/TextSeparator', component: TextSeparator, parameters: { layout: 'centered', @@ -11,11 +10,10 @@ export default { decorators: [(fn) =>
{fn()}
], } satisfies Meta; -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.storyName = 'TextSeparator'; -Default.args = { - label: 'Example label', - value: 'Example value', +export const Default: StoryObj = { + name: 'TextSeparator', + args: { + label: 'Example label', + value: 'Example value', + }, }; diff --git a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.stories.tsx b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.stories.tsx index a2ecfd88d11ec..e08d62c8db317 100644 --- a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.stories.tsx +++ b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.stories.tsx @@ -1,14 +1,14 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import UserAutoComplete from '.'; export default { - title: 'Components/UserAutoComplete', component: UserAutoComplete, parameters: { layout: 'centered', }, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.storyName = 'UserAutoComplete'; +export const Default: StoryObj = { + name: 'UserAutoComplete', +}; diff --git a/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx b/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx index 0c8126b2902e9..ce89d0d94f030 100644 --- a/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx +++ b/packages/ui-client/src/components/UserStatus/UserStatus.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentType } from 'react'; import * as UserStatus from '.'; import { useAutoSequence } from '../../hooks/useAutoSequence'; export default { - title: 'Components/UserStatus', component: UserStatus.UserStatus, subcomponents: { 'UserStatus.Online': UserStatus.Online as ComponentType, @@ -19,14 +18,16 @@ export default { }, } satisfies Meta; -export const Example: StoryFn = () => { - const status = useAutoSequence(['online', 'away', 'busy', 'offline'] as const); +export const Example: StoryObj = { + render: () => { + const status = useAutoSequence(['online', 'away', 'busy', 'offline'] as const); - return ; + return ; + }, }; -export const Loading: StoryFn = () => ; -export const Online: StoryFn = () => ; -export const Away: StoryFn = () => ; -export const Busy: StoryFn = () => ; -export const Offline: StoryFn = () => ; +export const Loading: StoryObj = { render: () => }; +export const Online: StoryObj = { render: () => }; +export const Away: StoryObj = { render: () => }; +export const Busy: StoryObj = { render: () => }; +export const Offline: StoryObj = { render: () => }; diff --git a/packages/ui-client/src/components/Wizard/Wizard.stories.tsx b/packages/ui-client/src/components/Wizard/Wizard.stories.tsx index b84904f9fe841..a835615083ecc 100644 --- a/packages/ui-client/src/components/Wizard/Wizard.stories.tsx +++ b/packages/ui-client/src/components/Wizard/Wizard.stories.tsx @@ -1,5 +1,5 @@ import { Box, Button, States, StatesIcon, StatesTitle } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Wizard from './Wizard'; import WizardActions from './WizardActions'; @@ -10,7 +10,6 @@ import WizardTabs from './WizardTabs'; import { useWizard } from './useWizard'; export default { - title: 'Components/Wizard', component: Wizard, subcomponents: { WizardActions, @@ -87,6 +86,6 @@ const WizardExample = ({ ordered = false }: { ordered?: boolean }) => { ); }; -export const BasicWizard: StoryFn = () => ; +export const BasicWizard: StoryObj = { render: () => }; -export const OrderedTabsWizard: StoryFn = () => ; +export const OrderedTabsWizard: StoryObj = { render: () => }; diff --git a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx index eb53ed6155006..35411b028e90b 100644 --- a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx +++ b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx @@ -1,15 +1,13 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Wizard from './Wizard'; -import type { WizardActionsProps } from './WizardActions'; import WizardActions from './WizardActions'; import WizardBackButton from './WizardBackButton'; import WizardNextButton from './WizardNextButton'; import { useWizard } from './useWizard'; export default { - title: 'Components/Wizard/WizardActions', component: WizardActions, decorators: (Story) => { const wizardApi = useWizard({ @@ -31,19 +29,20 @@ export default { parameters: { layout: 'centered', }, + render: (args) => ( + + + + + ), } satisfies Meta; -const Template: StoryFn = (args) => ( - - - - -); - -export const Default = Template.bind({}); -Default.args = {}; +export const Default: StoryObj = { + args: {}, +}; -export const WithAnnotation = Template.bind({}); -WithAnnotation.args = { - annotation: 'This is a sample annotation', +export const WithAnnotation: StoryObj = { + args: { + annotation: 'This is a sample annotation', + }, }; diff --git a/packages/ui-composer/.storybook/main.ts b/packages/ui-composer/.storybook/main.ts index 2f6a7e963dc2f..a053f2d23692b 100644 --- a/packages/ui-composer/.storybook/main.ts +++ b/packages/ui-composer/.storybook/main.ts @@ -1,40 +1,3 @@ -import { dirname, join, resolve } from 'path'; +import baseConfig from '@rocket.chat/storybook-config/main'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-styling-webpack'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - typescript: { - reactDocgen: 'react-docgen', - }, - - docs: {}, - - webpackFinal: (config) => { - // This is only needed because of Fontello - config.resolve = { - ...config.resolve, - roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')], - }; - - return config; - }, -}; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} - -export default config; +export default baseConfig(); diff --git a/packages/ui-composer/.storybook/preview.tsx b/packages/ui-composer/.storybook/preview.tsx index 3a2059e5bf012..5d10253c071e6 100644 --- a/packages/ui-composer/.storybook/preview.tsx +++ b/packages/ui-composer/.storybook/preview.tsx @@ -1,26 +1,11 @@ -import type { Decorator, Parameters } from '@storybook/react'; -import '../../../apps/meteor/app/theme/client/main.css'; -import 'highlight.js/styles/github.css'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; -export const parameters: Parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators], }; -export const decorators: Decorator[] = [ - (Story) => ( -
- - -
- ), -]; -export const tags = ['autodocs']; +export default preview; diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json index dc800fb0b108d..b4865dcace484 100644 --- a/packages/ui-composer/package.json +++ b/packages/ui-composer/package.json @@ -27,16 +27,13 @@ "@rocket.chat/fuselage-tokens": "~0.33.2", "@rocket.chat/icons": "~0.47.0", "@rocket.chat/jest-presets": "workspace:~", + "@rocket.chat/mock-providers": "workspace:~", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-client": "workspace:~", - "@storybook/addon-a11y": "^8.6.18", - "@storybook/addon-actions": "^8.6.18", - "@storybook/addon-docs": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/react": "^9.1.13", + "@testing-library/react": "~16.3.2", + "@testing-library/user-event": "~14.6.1", "@types/jest": "~30.0.0", "@types/react": "~18.3.28", "@types/react-dom": "~18.3.7", @@ -45,7 +42,7 @@ "react": "~18.3.1", "react-dom": "~18.3.1", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3", "webpack": "~5.104.1" }, diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.spec.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.spec.tsx index 32de84a9685cd..197f0973fe377 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposer.spec.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposer.spec.tsx @@ -1,3 +1,4 @@ +import { mockAppRoot } from '@rocket.chat/mock-providers'; import { composeStories } from '@storybook/react'; import { render } from '@testing-library/react'; import { axe } from 'jest-axe'; @@ -7,8 +8,10 @@ import * as stories from './MessageComposer.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(, { + wrapper: mockAppRoot().build(), + }); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx index 0a41d71b4658e..815d122d71ec6 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx @@ -1,8 +1,7 @@ import { Button, IconButton } from '@rocket.chat/fuselage'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; -import '@rocket.chat/icons/dist/rocketchat.css'; import { MessageComposer, MessageComposerAction, @@ -20,7 +19,6 @@ import { } from '.'; export default { - title: 'Components/MessageComposer', component: MessageComposer, } satisfies Meta; @@ -44,108 +42,122 @@ const MessageToolbarActions = () => ( ); -export const Default: StoryFn = () => ( - - - - - - -); +export const Default: StoryObj = { + render: () => ( + + + + + + + ), +}; -export const Expandable: StoryFn = () => ( - - - - - - -); +export const Expandable: StoryObj = { + render: () => ( + + + + + + + ), +}; + +export const ToolbarActions: StoryObj = { + render: () => , +}; -export const ToolbarActions: StoryFn = () => ; +export const WithHints: StoryObj = { + render: () => ( + <> + + esc to cancel · enter to save + + } + > + Editing message + + + + + + + + + + + + ), +}; -export const WithHints: StoryFn = () => ( - <> - - esc to cancel · enter to save - - } - > - Editing message - +export const WithSubmit: StoryObj = { + render: () => ( - + + - -); - -export const WithSubmit: StoryFn = () => ( - - - - - - - - - - -); + ), +}; -export const WithFiles: StoryFn = () => ( - - - - } - onClick={action('click')} - /> - } - onClick={action('click')} - /> - } - onClick={action('click')} - /> - - - - - - - - - -); +export const WithFiles: StoryObj = { + render: () => ( + + + + } + onClick={action('click')} + /> + } + onClick={action('click')} + /> + } + onClick={action('click')} + /> + + + + + + + + + + ), +}; -export const Loading: StoryFn = () => ; +export const Loading: StoryObj = { + render: () => , +}; diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerHint.spec.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerHint.spec.tsx index 57603e72cb3f4..1bf0894a5041e 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerHint.spec.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerHint.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './MessageComposerHint.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx index ed0e821509750..8f0529bc26e77 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerHint.stories.tsx @@ -1,31 +1,31 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { MessageComposerHint } from '.'; -import '@rocket.chat/icons/dist/rocketchat.css'; export default { - title: 'Components/MessageComposerHint', component: MessageComposerHint, } as Meta; -export const HintWithIconAndHelperText: StoryFn = () => { - const helperText = ( - <> - esc to cancel · enter to save - - ); +export const HintWithIconAndHelperText: StoryObj = { + render: () => { + const helperText = ( + <> + esc to cancel · enter to save + + ); - return ( - - Editing message - - ); + return ( + + Editing message + + ); + }, }; -export const HintWithIcon: StoryFn = () => ( - This room is read only -); +export const HintWithIcon: StoryObj = { + render: () => This room is read only, +}; -export const HintWithText: StoryFn = () => ( - You're sending an unencrypted message -); +export const HintWithText: StoryObj = { + render: () => You're sending an unencrypted message, +}; diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx index 804c21b9bba3a..9ad31e2e3019e 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx @@ -1,4 +1,6 @@ -import { render, screen, fireEvent } from '@testing-library/react'; +import { mockAppRoot } from '@rocket.chat/mock-providers'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import MessageComposerInputExpandable from './MessageComposerInputExpandable'; @@ -11,6 +13,7 @@ test('should show expand button when dimensions.blockSize > 100', () => { }} placeholder='Type a message...' />, + { wrapper: mockAppRoot().build() }, ); const expandButton = screen.getByRole('button'); @@ -27,13 +30,14 @@ test('should not show expand button when dimensions.blockSize <= 100', () => { }} placeholder='Type a message...' />, + { wrapper: mockAppRoot().build() }, ); const expandButton = screen.queryByRole('button'); expect(expandButton).not.toBeInTheDocument(); }); -test('should expand input when expand button is clicked', () => { +test('should expand input when expand button is clicked', async () => { render( { }} placeholder='Type a message...' />, + { wrapper: mockAppRoot().build() }, ); const expandButton = screen.getByRole('button'); @@ -51,7 +56,7 @@ test('should expand input when expand button is clicked', () => { expect(textarea).not.toHaveStyle({ height: '500px' }); // Click to expand - fireEvent.click(expandButton); + await userEvent.click(expandButton); // Should be expanded now expect(textarea).toHaveStyle({ height: '500px' }); @@ -59,7 +64,7 @@ test('should expand input when expand button is clicked', () => { expect(expandButton).toHaveAttribute('title', 'Collapse'); }); -test('should collapse input when collapse button is clicked', () => { +test('should collapse input when collapse button is clicked', async () => { render( { }} placeholder='Type a message...' />, + { wrapper: mockAppRoot().build() }, ); const expandButton = screen.getByRole('button'); const textarea = screen.getByRole('textbox'); // Expand first - fireEvent.click(expandButton); + await userEvent.click(expandButton); expect(textarea).toHaveStyle({ height: '500px' }); // Click to collapse - fireEvent.click(expandButton); + await userEvent.click(expandButton); // Should be collapsed now expect(textarea).not.toHaveStyle({ height: '500px' }); @@ -86,7 +92,7 @@ test('should collapse input when collapse button is clicked', () => { expect(expandButton).toHaveAttribute('title', 'Expand'); }); -test('should auto-collapse when input is cleared', () => { +test('should auto-collapse when input is cleared', async () => { render( { }} placeholder='Type a message...' />, + { wrapper: mockAppRoot().build() }, ); const expandButton = screen.getByRole('button'); const textarea = screen.getByRole('textbox'); // Expand first - fireEvent.click(expandButton); + await userEvent.click(expandButton); expect(textarea).toHaveStyle({ height: '500px' }); // Type some text - fireEvent.change(textarea, { target: { value: 'Some text' } }); + await userEvent.type(textarea, 'Some text'); expect(textarea).toHaveStyle({ height: '500px' }); // Clear the text - fireEvent.change(textarea, { target: { value: '' } }); + await userEvent.clear(textarea); // Should auto-collapse expect(textarea).not.toHaveStyle({ height: '500px' }); diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.spec.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.spec.tsx index 76f3bca2a145c..5ef012066fb14 100644 --- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.spec.tsx +++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './MessageFooterCallout.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.stories.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.stories.tsx index c7893d8248e66..e7d918d085172 100644 --- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.stories.tsx +++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { MessageFooterCallout, MessageFooterCalloutAction } from '.'; import MessageFooterCalloutContent from './MessageFooterCalloutContent'; @@ -6,49 +6,54 @@ import MessageFooterCalloutDivider from './MessageFooterCalloutDivider'; import MessageComposer from '../MessageComposer/MessageComposer'; import MessageComposerIcon from '../MessageComposer/MessageComposerIcon'; -import '@rocket.chat/icons/dist/rocketchat.css'; - export default { - title: 'Components/MessageComposerCallout', component: MessageComposer, } satisfies Meta; -export const MessageComposerBlocked: StoryFn = () => ( - - - Feedback text - -); +export const MessageComposerBlocked: StoryObj = { + render: () => ( + + + Feedback text + + ), +}; -export const MessageComposerBlockedLargeText: StoryFn = () => ( - - - - Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback - text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text Feedback text Feedback - text Feedback text text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text - Feedback text Feedback text Feedback text - - undefined}>Button - -); +export const MessageComposerBlockedLargeText: StoryObj = { + render: () => ( + + + + Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text + Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text Feedback text + Feedback text Feedback text text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback + text Feedback text Feedback text Feedback text + + undefined}>Button + + ), +}; -export const MessageComposerBlockedLargeTextDashed: StoryFn = () => ( - - - - Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback - text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text Feedback text Feedback - text Feedback text text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text - Feedback text Feedback text Feedback text - - undefined}>Button - -); +export const MessageComposerBlockedLargeTextDashed: StoryObj = { + render: () => ( + + + + Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text + Feedback text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback text Feedback text + Feedback text Feedback text text Feedback text Feedback text Feedback text Feedback text Feedback text text Feedback text Feedback + text Feedback text Feedback text Feedback text + + undefined}>Button + + ), +}; -export const _MessageFooterCalloutAction: StoryFn = () => ( - - Feedback text - undefined}>Button - -); +export const _MessageFooterCalloutAction: StoryObj = { + render: () => ( + + Feedback text + undefined}>Button + + ), +}; diff --git a/packages/ui-video-conf/.storybook/main.ts b/packages/ui-video-conf/.storybook/main.ts index c23cca0484942..a053f2d23692b 100644 --- a/packages/ui-video-conf/.storybook/main.ts +++ b/packages/ui-video-conf/.storybook/main.ts @@ -1,40 +1,3 @@ -import { dirname, join, resolve } from 'path'; +import baseConfig from '@rocket.chat/storybook-config/main'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-styling-webpack'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - typescript: { - reactDocgen: 'react-docgen', - }, - - docs: {}, - - webpackFinal: (config) => { - // This is only needed because of Fontello - config.resolve = { - ...config.resolve, - roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')], - }; - - return config; - }, -}; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} - -export default config; +export default baseConfig(); diff --git a/packages/ui-video-conf/.storybook/preview.tsx b/packages/ui-video-conf/.storybook/preview.tsx index cf4bb4404ab06..5d10253c071e6 100644 --- a/packages/ui-video-conf/.storybook/preview.tsx +++ b/packages/ui-video-conf/.storybook/preview.tsx @@ -1,28 +1,11 @@ -import type { Decorator } from '@storybook/react'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; -import '../../../apps/meteor/app/theme/client/main.css'; -import 'highlight.js/styles/github.css'; -import '@rocket.chat/icons/dist/rocketchat.css'; - -export const parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators], }; -export const decorators: Decorator[] = [ - (Story) => ( -
- - -
- ), -]; -export const tags = ['autodocs']; +export default preview; diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json index d752582797aea..235c1561269ce 100644 --- a/packages/ui-video-conf/package.json +++ b/packages/ui-video-conf/package.json @@ -27,18 +27,12 @@ "@rocket.chat/fuselage-tokens": "~0.33.2", "@rocket.chat/icons": "~0.47.0", "@rocket.chat/jest-presets": "workspace:~", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/styled": "^0.33.0", "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-avatar": "workspace:^", "@rocket.chat/ui-contexts": "workspace:^", - "@storybook/addon-a11y": "^8.6.18", - "@storybook/addon-actions": "^8.6.18", - "@storybook/addon-docs": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", + "@storybook/react": "^9.1.13", "@types/jest": "~30.0.0", "@types/jest-axe": "~3.5.9", "@types/react": "~18.3.28", @@ -49,7 +43,7 @@ "react": "~18.3.1", "react-dom": "~18.3.1", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3", "webpack": "~5.104.1" }, diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx index b2a5c0fdfde8a..e287d3111ab65 100644 --- a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx +++ b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './VideoConfButton.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx index 73a66f0e1172a..56a1c39b1f8a2 100644 --- a/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx +++ b/packages/ui-video-conf/src/VideoConfButton/VideoConfButton.stories.tsx @@ -1,11 +1,12 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import VideoConfButton from './VideoConfButton'; export default { - title: 'Components/VideoConfButton', component: VideoConfButton, decorators: [], } satisfies Meta; -export const Default: StoryFn = (args) => Button; +export const Default: StoryObj = { + render: (args) => Button, +}; diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx index 0e18c058e7bf5..006a32124749e 100644 --- a/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx +++ b/packages/ui-video-conf/src/VideoConfController/VideoConfController.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './VideoConfController.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx b/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx index be3e6f30edf7d..1ab647a58edd6 100644 --- a/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx +++ b/packages/ui-video-conf/src/VideoConfController/VideoConfController.stories.tsx @@ -1,14 +1,14 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import VideoConfController from './VideoConfController'; export default { - title: 'Components/VideoConfController', component: VideoConfController, } satisfies Meta; -export const Default: StoryFn = (args) => ; -Default.args = { - 'icon': 'info', - 'aria-label': 'info', +export const Default: StoryObj = { + args: { + 'icon': 'info', + 'aria-label': 'info', + }, }; diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx index 4b064d48bd3c6..6e5cbae0c4f82 100644 --- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx +++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './VideoConfMessage.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx index 3a253694cf347..00ae577cea7e2 100644 --- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx +++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx @@ -12,7 +12,7 @@ import { Avatar, Box, } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.'; import VideoConfMessageAction from './VideoConfMessageAction'; @@ -25,7 +25,6 @@ import VideoConfMessageSkeleton from './VideoConfMessageSkeleton'; import VideoConfMessageUserStack from './VideoConfMessageUserStack'; export default { - title: 'Components/VideoConfMessage', component: VideoConfMessage, decorators: [ (Story) => ( @@ -65,96 +64,108 @@ const fakeUsers = Array.from({ length: 10 }).map((_, i) => ({ avatarETag: '', })); -export const CallingDM: StoryFn = () => ( - - - - - Calling... - - - - - - - Join - Waiting for answer - - -); +export const CallingDM: StoryObj = { + render: () => ( + + + + + Calling... + + + + + + + Join + Waiting for answer + + + ), +}; -export const CallEndedDM: StoryFn = () => ( - - - - - Call ended - - - - - - - Call Back - Call was not answered - - -); +export const CallEndedDM: StoryObj = { + render: () => ( + + + + + Call ended + + + + + + + Call Back + Call was not answered + + + ), +}; -export const CallOngoing: StoryFn = () => ( - - - - - Call ongoing - - - - - - - Join - - joined - - -); +export const CallOngoing: StoryObj = { + render: () => ( + + + + + Call ongoing + + + + + + + Join + + joined + + + ), +}; -export const CallEnded: StoryFn = () => ( - - - - - Call ended - - - - - - - - joined - - -); +export const CallEnded: StoryObj = { + render: () => ( + + + + + Call ended + + + + + + + + joined + + + ), +}; -export const Loading: StoryFn = () => ; +export const Loading: StoryObj = { + render: () => , +}; -export const NoAvatars: StoryFn = () => ( - - - - - Call ongoing - - - - - - - Join - - {fakeUsers.length} joined - - -); +export const NoAvatars: StoryObj = { + render: () => ( + + + + + Call ongoing + + + + + + + Join + + {fakeUsers.length} joined + + + ), +}; diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx index 730156449d591..b952ed1013744 100644 --- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx +++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.spec.tsx @@ -7,8 +7,8 @@ import * as stories from './VideoConfPopup.stories'; const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { - const tree = render(); - expect(tree.baseElement).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx index 0782c5f52916a..fdb829620b5f5 100644 --- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx +++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.stories.tsx @@ -1,6 +1,6 @@ import { Avatar, Icon } from '@rocket.chat/fuselage'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import VideoConfButton from '../VideoConfButton'; import VideoConfController from '../VideoConfController'; @@ -16,7 +16,6 @@ import VideoConfPopupSkeleton from './VideoConfPopupSkeleton'; import VideoConfPopupTitle from './VideoConfPopupTitle'; export default { - title: 'Components/VideoConfPopup', component: VideoConfPopup, decorators: [ (Story) => ( @@ -30,28 +29,32 @@ export default { const avatarUrl = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; -export const StartCall: StoryFn = () => ( - - - - - - - - - - } icon={}> - Room Name - - - - - - Start Call - - - - -); +export const StartCall: StoryObj = { + render: () => ( + + + + + + + + + + } icon={}> + Room Name + + + + + + Start Call + + + + + ), +}; -export const Skeleton: StoryFn = () => ; +export const Skeleton: StoryObj = { + render: () => , +}; diff --git a/packages/ui-voip/.storybook/main.ts b/packages/ui-voip/.storybook/main.ts index 293d39612b888..a053f2d23692b 100644 --- a/packages/ui-voip/.storybook/main.ts +++ b/packages/ui-voip/.storybook/main.ts @@ -1,40 +1,3 @@ -import { dirname, join, resolve } from 'path'; +import baseConfig from '@rocket.chat/storybook-config/main'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -const config: StorybookConfig = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - getAbsolutePath('@storybook/addon-interactions'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - typescript: { - reactDocgen: 'react-docgen', - }, - - docs: {}, - - webpackFinal: (config) => { - // This is only needed because of Fontello - config.resolve = { - ...config.resolve, - roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')], - }; - - return config; - }, -}; - -function getAbsolutePath(value: any): string { - return dirname(require.resolve(join(value, 'package.json'))); -} - -export default config; +export default baseConfig(); diff --git a/packages/ui-voip/.storybook/preview.tsx b/packages/ui-voip/.storybook/preview.tsx index b3288aea1925c..5d10253c071e6 100644 --- a/packages/ui-voip/.storybook/preview.tsx +++ b/packages/ui-voip/.storybook/preview.tsx @@ -1,29 +1,11 @@ -import type { Decorator, Parameters } from '@storybook/react'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; -import '../../../apps/meteor/app/theme/client/main.css'; -import 'highlight.js/styles/github.css'; -import '@rocket.chat/icons/dist/rocketchat.css'; - -export const parameters: Parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators], }; -export const decorators: Decorator[] = [ - (Story) => ( -
- - -
- ), -]; - -export const tags = ['autodocs']; +export default preview; diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json index fcedfdc7d2e3a..6ea0b297cbdd8 100644 --- a/packages/ui-voip/package.json +++ b/packages/ui-voip/package.json @@ -37,21 +37,14 @@ "@rocket.chat/icons": "~0.47.0", "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/mock-providers": "workspace:~", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/styled": "^0.33.0", "@rocket.chat/tsconfig": "workspace:*", "@rocket.chat/ui-avatar": "workspace:^", "@rocket.chat/ui-client": "workspace:^", "@rocket.chat/ui-contexts": "workspace:^", "@rocket.chat/ui-kit": "workspace:^", - "@storybook/addon-a11y": "^8.6.18", - "@storybook/addon-actions": "^8.6.18", - "@storybook/addon-docs": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-interactions": "^8.6.18", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", - "@storybook/test": "^8.6.18", + "@storybook/react": "^9.1.13", "@storybook/test-runner": "^0.22.1", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", @@ -68,7 +61,7 @@ "react": "~18.3.1", "react-dom": "~18.3.1", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", + "storybook": "^9.1.13", "typescript": "~5.9.3" }, "peerDependencies": { diff --git a/packages/ui-voip/src/components/Actions/ActionStrip.stories.tsx b/packages/ui-voip/src/components/Actions/ActionStrip.stories.tsx index 14f19c5adb98c..9710f5e6ea6ee 100644 --- a/packages/ui-voip/src/components/Actions/ActionStrip.stories.tsx +++ b/packages/ui-voip/src/components/Actions/ActionStrip.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -10,7 +10,6 @@ import ToggleButton from '../ToggleButton'; import ActionToggleChat from './ActionToggleChat'; export default { - title: 'V2/Components/Actions/ActionStrip', component: ActionStrip, decorators: [ mockAppRoot() @@ -28,29 +27,31 @@ export default { const NOOP = () => undefined; -export const ActionStripStory: StoryFn = (args) => { - const { t } = useTranslation(); - const [pressed, setPressed] = useState(false); - return ( - } rightSlot={ setPressed(!pressed)} />} {...args}> - - - - - - {/* */} - - ); +export const ActionStripStory: StoryObj = { + render: (args) => { + const { t } = useTranslation(); + const [pressed, setPressed] = useState(false); + return ( + } rightSlot={ setPressed(!pressed)} />} {...args}> + + + + + + {/* */} + + ); + }, }; diff --git a/packages/ui-voip/src/components/Cards/CardContainers.stories.tsx b/packages/ui-voip/src/components/Cards/CardContainers.stories.tsx index 7a0f7aa8d4b86..9147ba5afe671 100644 --- a/packages/ui-voip/src/components/Cards/CardContainers.stories.tsx +++ b/packages/ui-voip/src/components/Cards/CardContainers.stories.tsx @@ -1,6 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; -import type { ComponentType, ReactNode } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import CardList from './CardList'; import CardListSection from './CardListSection'; @@ -19,77 +18,53 @@ const avatarUrl = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBg SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z`; -type StoryComponentType = ComponentType<{ - getPeerCardProps: (index: number) => { - displayName: string; - avatarUrl: string; - muted: boolean; - held: boolean; - sharing: boolean; - }; - getStreamCardProps: (index: number) => { - children: ReactNode; - own: boolean; - onClickFocusStream: () => void; - focused: boolean; - autoHeight: boolean; - }; -}>; - export default { - title: 'V2/Components/CardContainers', component: CardList, - args: { - getPeerCardProps: (index: number) => ({ - displayName: `John Doe ${index}`, - avatarUrl, - muted: index % 3 !== 0, - held: index % 2 === 0, - sharing: index % 2 !== 0, - variant: index % 2 === 0 ? 'highlighted' : 'default', - }), - getStreamCardProps: (index: number) => ({ - children: ( - - test - - ), - own: index % 2 === 0, - onClickFocusStream: () => undefined, - focused: index % 4 === 0, - autoHeight: index % 4 === 0, - onClickStopSharing: () => undefined, - }), - }, decorators: [ (Story) => ( - + ), ], -} satisfies Meta; +} satisfies Meta; -export const CardListStory: StoryFn = (args) => { - return ( +export const CardListStory: StoryObj = { + render: (args) => ( - - - - + + + + - ); + ), }; -export const StreamCardListStory: StoryFn = (args) => { - return ( +export const StreamCardListStory: StoryObj = { + render: (args) => ( - - - - + undefined} onClickStopSharing={() => undefined}> + + test + + + undefined} onClickStopSharing={() => undefined}> + + test + + + undefined} onClickStopSharing={() => undefined}> + + test + + + undefined} onClickStopSharing={() => undefined}> + + test + + - ); + ), }; diff --git a/packages/ui-voip/src/components/Cards/Cards.stories.tsx b/packages/ui-voip/src/components/Cards/Cards.stories.tsx index 2c4638d5de9b4..27b43cb98d09b 100644 --- a/packages/ui-voip/src/components/Cards/Cards.stories.tsx +++ b/packages/ui-voip/src/components/Cards/Cards.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Card from './Card'; import CardSlot from './CardSlot'; import { PeerCard, PeerCardSlot } from './PeerCard'; export default { - title: 'V2/Components/Cards', component: Card, args: { title: 'Generic Card', @@ -25,21 +24,23 @@ const avatarUrl = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBg SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z`; -export const CardStory: StoryFn = (args) => ( - - - - Bottom Right - - - Top Left - - - Top Right - - -); +export const CardStory: StoryObj = { + render: (args) => ( + + + + Bottom Right + + + Top Left + + + Top Right + + + ), +}; -export const PeerCardStory: StoryFn = (args) => ( - -); +export const PeerCardStory: StoryObj = { + render: (args) => , +}; diff --git a/packages/ui-voip/src/components/Keypad/Keypad.stories.tsx b/packages/ui-voip/src/components/Keypad/Keypad.stories.tsx index a0b9cb5d2f4fc..343fef26ab936 100644 --- a/packages/ui-voip/src/components/Keypad/Keypad.stories.tsx +++ b/packages/ui-voip/src/components/Keypad/Keypad.stories.tsx @@ -1,17 +1,20 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import Keypad from './Keypad'; import { useTonePlayer } from '../../hooks/useTonePlayer'; export default { - title: 'V2/Components/Keypad', component: Keypad, } satisfies Meta; -export const KeypadStory: StoryFn = () => console.log(key)} />; -export const KeypadStoryWithTone: StoryFn = () => { - const playTone = useTonePlayer(); - return playTone(key as any)} />; +export const KeypadStory: StoryObj = { + render: () => console.log(key)} />, }; -KeypadStoryWithTone.tags = ['skip']; +export const KeypadStoryWithTone: StoryObj = { + tags: ['skip'], + render: () => { + const playTone = useTonePlayer(); + return playTone(key as any)} />; + }, +}; diff --git a/packages/ui-voip/src/components/PeerInfo/PeerInfo.stories.tsx b/packages/ui-voip/src/components/PeerInfo/PeerInfo.stories.tsx index d5398d933ab9d..8b3f6beb64039 100644 --- a/packages/ui-voip/src/components/PeerInfo/PeerInfo.stories.tsx +++ b/packages/ui-voip/src/components/PeerInfo/PeerInfo.stories.tsx @@ -1,16 +1,15 @@ import { UserStatus } from '@rocket.chat/core-typings'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { PeerInfo } from '.'; export default { - title: 'V2/Components/PeerInfo', component: PeerInfo, decorators: [(Story) => ], } satisfies Meta; -export const InternalUser: StoryFn = () => { - return ( +export const InternalUser: StoryObj = { + render: () => ( = () => { SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z' /> - ); + ), }; -export const InternalUserWithRemoteStatus: StoryFn = () => { - return ( +export const InternalUserWithRemoteStatus: StoryObj = { + render: () => ( = () => { SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z' /> - ); + ), }; -export const ExternalUser: StoryFn = () => { - return ; +export const ExternalUser: StoryObj = { + render: () => , }; diff --git a/packages/ui-voip/src/components/ToggleButton.stories.tsx b/packages/ui-voip/src/components/ToggleButton.stories.tsx index 4632efa24a2ed..c3c27d9831bcd 100644 --- a/packages/ui-voip/src/components/ToggleButton.stories.tsx +++ b/packages/ui-voip/src/components/ToggleButton.stories.tsx @@ -1,22 +1,23 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import ToggleButton from './ToggleButton'; export default { - title: 'V2/Components/ToggleButton', component: ToggleButton, } satisfies Meta; -export const ToggleButtonStory: StoryFn = () => { - const [pressed, setPressed] = useState(false); - return ( - setPressed(!pressed)} - /> - ); +export const ToggleButtonStory: StoryObj = { + render: () => { + const [pressed, setPressed] = useState(false); + return ( + setPressed(!pressed)} + /> + ); + }, }; diff --git a/packages/ui-voip/src/components/Widget/Widget.stories.tsx b/packages/ui-voip/src/components/Widget/Widget.stories.tsx index 86f1d28df503b..40c357efd36ff 100644 --- a/packages/ui-voip/src/components/Widget/Widget.stories.tsx +++ b/packages/ui-voip/src/components/Widget/Widget.stories.tsx @@ -1,16 +1,15 @@ import { ButtonGroup, Button, IconButton } from '@rocket.chat/fuselage'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Widget, WidgetHeader, WidgetFooter, WidgetHandle, WidgetInfo, WidgetContent } from '.'; export default { - title: 'V2/Components/Widget', component: Widget, decorators: [(Story) => ], } satisfies Meta; -export const FullWidget: StoryFn = () => { - return ( +export const FullWidget: StoryObj = { + render: () => ( @@ -34,5 +33,5 @@ export const FullWidget: StoryFn = () => { - ); + ), }; diff --git a/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx b/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx index 2cdc1302e184d..b176c6ec30b5b 100644 --- a/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx +++ b/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx @@ -1,8 +1,8 @@ import { Box, Button } from '@rocket.chat/fuselage'; import { AnchorPortal } from '@rocket.chat/ui-client'; import type { Meta, StoryObj } from '@storybook/react'; -import { within, fireEvent, waitFor, expect, userEvent } from '@storybook/test'; import { useEffect, useLayoutEffect, useState, type Ref } from 'react'; +import { within, fireEvent, waitFor, expect, userEvent } from 'storybook/test'; import { useDraggable, DEFAULT_BOUNDING_ELEMENT_OPTIONS } from './DraggableCore'; @@ -188,7 +188,6 @@ export const DraggableBoxWithControls: Story = { }; const meta = { - title: 'hooks/useDraggable', component: DraggableBox, parameters: { layout: 'fullscreen', diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx index d49ef679fbe88..244767d366803 100644 --- a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx +++ b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryActions.stories.tsx @@ -9,7 +9,6 @@ import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; const noop = () => undefined; const meta = { - title: 'V2/Views/CallHistoryContextualbar/CallHistoryActions', component: CallHistoryActions, decorators: [ mockAppRoot() diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx index 2b471c936cde1..ad65847c12149 100644 --- a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx +++ b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.stories.tsx @@ -7,7 +7,6 @@ import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; const noop = () => undefined; const meta = { - title: 'V2/Views/CallHistoryContextualbar', component: CallHistoryContextualbar, decorators: [ mockAppRoot() diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/useFullStartDate.stories.tsx b/packages/ui-voip/src/views/CallHistoryContextualbar/useFullStartDate.stories.tsx index 0c732041f32e1..8959fe673d295 100644 --- a/packages/ui-voip/src/views/CallHistoryContextualbar/useFullStartDate.stories.tsx +++ b/packages/ui-voip/src/views/CallHistoryContextualbar/useFullStartDate.stories.tsx @@ -8,7 +8,6 @@ const FullStartDate = ({ date }: { date: Date }) => { }; const meta = { - title: 'V2/Views/CallHistoryContextualbar/useFullStartDate', component: FullStartDate, } satisfies Meta; diff --git a/packages/ui-voip/src/views/MediaCallHistoryTable/MediaCallHistoryTable.stories.tsx b/packages/ui-voip/src/views/MediaCallHistoryTable/MediaCallHistoryTable.stories.tsx index bee2a792854db..3d813f0911449 100644 --- a/packages/ui-voip/src/views/MediaCallHistoryTable/MediaCallHistoryTable.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallHistoryTable/MediaCallHistoryTable.stories.tsx @@ -1,7 +1,7 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; import { GenericMenu, useSort } from '@rocket.chat/ui-client'; -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { action } from 'storybook/actions'; import type { CallHistoryTableRowProps } from './CallHistoryTableRow'; import CallHistoryTableRow from './CallHistoryTableRow'; @@ -25,7 +25,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/MediaCallHistoryTable', component: MediaCallHistoryTable, decorators: [mockedContexts], } satisfies Meta; @@ -92,13 +91,15 @@ const results = Array.from({ length: 100 }).map( }), ); -export const MediaCallHistoryTableStory: StoryFn = () => { - const sort = useSort<'contact' | 'type' | 'status' | 'timestamp'>('contact'); - return ( - - {results.map((result) => ( - - ))} - - ); +export const MediaCallHistoryTableStory: StoryObj = { + render: () => { + const sort = useSort<'contact' | 'type' | 'status' | 'timestamp'>('contact'); + return ( + + {results.map((result) => ( + + ))} + + ); + }, }; diff --git a/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.stories.tsx index 9c4059ff026fc..640751d78cb0c 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/IncomingCall.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import IncomingCall from './IncomingCall'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -13,7 +13,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/IncomingCall', component: IncomingCall, decorators: [ mockedContexts, @@ -25,6 +24,4 @@ export default { ], } satisfies Meta; -export const IncomingCallStory: StoryFn = () => { - return ; -}; +export const IncomingCallStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx index 13d3fec28ecae..8c6cd25362ca4 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/IncomingCallTransfer.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import IncomingCallTransfer from './IncomingCallTransfer'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -14,7 +14,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/IncomingCallTransfer', component: IncomingCallTransfer, decorators: [ mockedContexts, @@ -26,6 +25,4 @@ export default { ], } satisfies Meta; -export const IncomingCallTransferStory: StoryFn = () => { - return ; -}; +export const IncomingCallTransferStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx index 7e7bca4ceacd0..04a0ff128baa0 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx @@ -1,6 +1,6 @@ import { Button } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import MediaCallWidget from './MediaCallWidget'; import { useMediaCallView, useWidgetExternalControls } from '../../context'; @@ -18,7 +18,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); const meta = { - title: 'V2/MediaCallWidget', component: MediaCallWidget, args: { state: 'closed', @@ -36,21 +35,23 @@ export default meta; type Story = StoryObj; -export const MediaCallWidgetManualTesting: StoryFn = () => { - const { sessionState, onCall } = useMediaCallView(); - const { toggleWidget } = useWidgetExternalControls(); - const { state } = sessionState; - return ( - <> - - - - - ); +export const MediaCallWidgetManualTesting: Story = { + render: () => { + const { sessionState, onCall } = useMediaCallView(); + const { toggleWidget } = useWidgetExternalControls(); + const { state } = sessionState; + return ( + <> + + + + + ); + }, }; export const NewCall: Story = { diff --git a/packages/ui-voip/src/views/MediaCallWidget/NewCall.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/NewCall.stories.tsx index 1605852d62231..5455577d112c7 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/NewCall.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/NewCall.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NewCall from './NewCall'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -13,7 +13,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/NewCall', component: NewCall, decorators: [ mockedContexts, @@ -25,6 +24,4 @@ export default { ], } satisfies Meta; -export const NewCallStory: StoryFn = () => { - return ; -}; +export const NewCallStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.stories.tsx index 8293131eba59f..6f0e0a64df547 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import OngoingCall from './OngoingCall'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -7,7 +7,6 @@ import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; const mockedContexts = mockAppRoot().buildStoryDecorator(); export default { - title: 'V2/Views/OngoingCall', component: OngoingCall, decorators: [ mockedContexts, @@ -19,54 +18,52 @@ export default { ], } satisfies Meta; -export const OngoingCallStory: StoryFn = () => { - return ; -}; +export const OngoingCallStory: StoryObj = {}; -export const OngoingCallWithSlots: StoryFn = () => { - return ( +export const OngoingCallWithSlots: StoryObj = { + render: () => ( - ); + ), }; -export const OngoingCallWithRemoteStatus: StoryFn = () => { - return ( +export const OngoingCallWithRemoteStatus: StoryObj = { + render: () => ( - ); + ), }; -export const OngoingCallWithRemoteStatusMuted: StoryFn = () => { - return ( +export const OngoingCallWithRemoteStatusMuted: StoryObj = { + render: () => ( - ); + ), }; -export const OngoingCallWithRemoteStatusHeld: StoryFn = () => { - return ( +export const OngoingCallWithRemoteStatusHeld: StoryObj = { + render: () => ( - ); + ), }; -export const OngoingCallWithSlotsAndRemoteStatus: StoryFn = () => { - return ( +export const OngoingCallWithSlotsAndRemoteStatus: StoryObj = { + render: () => ( - ); + ), }; -export const OngoingCallWithDmButton: StoryFn = () => { - return ( +export const OngoingCallWithDmButton: StoryObj = { + render: () => ( undefined}> - ); + ), }; diff --git a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.stories.tsx index 2bef2ebca5e0d..8ff4462f62596 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCall.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import OutgoingCall from './OutgoingCall'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -12,7 +12,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/OutgoingCall', component: OutgoingCall, decorators: [ mockedContexts, @@ -24,6 +23,4 @@ export default { ], } satisfies Meta; -export const OutgoingCallStory: StoryFn = () => { - return ; -}; +export const OutgoingCallStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx index a9f56940bbd5f..7bc401d5c8821 100644 --- a/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx +++ b/packages/ui-voip/src/views/MediaCallWidget/OutgoingCallTransfer.stories.tsx @@ -1,5 +1,5 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import OutgoingCallTransfer from './OutgoingCallTransfer'; import MockedMediaCallProvider from '../../providers/MockedMediaCallProvider'; @@ -13,7 +13,6 @@ const mockedContexts = mockAppRoot() .buildStoryDecorator(); export default { - title: 'V2/Views/OutgoingCallTransfer', component: OutgoingCallTransfer, decorators: [ mockedContexts, @@ -25,6 +24,4 @@ export default { ], } satisfies Meta; -export const OutgoingCallTransferStory: StoryFn = () => { - return ; -}; +export const OutgoingCallTransferStory: StoryObj = {}; diff --git a/packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx b/packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx index c71cb6dc6a1f6..a4dc3085d2113 100644 --- a/packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx +++ b/packages/ui-voip/src/views/PermissionFlow/PermissionFlowModal.stories.tsx @@ -6,7 +6,6 @@ import PermissionFlowModal from './PermissionFlowModal'; const noop = () => undefined; const meta = { - title: 'Components/Permission Flow', component: PermissionFlowModal, decorators: [ mockAppRoot() diff --git a/packages/web-ui-registration/.storybook/logo.svg b/packages/web-ui-registration/.storybook/logo.svg deleted file mode 100644 index 6ae18fa4b93eb..0000000000000 --- a/packages/web-ui-registration/.storybook/logo.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/packages/web-ui-registration/.storybook/logo.svg.d.ts b/packages/web-ui-registration/.storybook/logo.svg.d.ts deleted file mode 100644 index 27c0914b230f0..0000000000000 --- a/packages/web-ui-registration/.storybook/logo.svg.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare const path: string; - -export = path; diff --git a/packages/web-ui-registration/.storybook/main.ts b/packages/web-ui-registration/.storybook/main.ts index 1eca7fa8f87cc..a053f2d23692b 100644 --- a/packages/web-ui-registration/.storybook/main.ts +++ b/packages/web-ui-registration/.storybook/main.ts @@ -1,23 +1,3 @@ -import { dirname, join } from 'path'; +import baseConfig from '@rocket.chat/storybook-config/main'; -import type { StorybookConfig } from '@storybook/react-webpack5'; - -export default { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - getAbsolutePath('@storybook/addon-essentials'), - getAbsolutePath('storybook-dark-mode'), - getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), - ], - - framework: { - name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, - }, - - docs: {}, -} satisfies StorybookConfig; - -function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, 'package.json'))); -} +export default baseConfig(); diff --git a/packages/web-ui-registration/.storybook/preview.tsx b/packages/web-ui-registration/.storybook/preview.tsx index 5cd3e45119f71..5d10253c071e6 100644 --- a/packages/web-ui-registration/.storybook/preview.tsx +++ b/packages/web-ui-registration/.storybook/preview.tsx @@ -1,39 +1,11 @@ -import type { Parameters } from '@storybook/react'; -import { themes } from '@storybook/theming'; +import { parameters, decorators } from '@rocket.chat/storybook-config/preview'; +import type { Preview } from '@storybook/react'; -import manifest from '../package.json'; -import logo from './logo.svg'; -import '@rocket.chat/fuselage/dist/fuselage.css'; -import '@rocket.chat/icons/dist/rocketchat.css'; - -export const parameters: Parameters = { - backgrounds: { - grid: { - cellSize: 4, - cellAmount: 4, - opacity: 0.5, - }, - }, - options: { - storySort: { - method: 'alphabetical', - }, - }, - layout: 'fullscreen', - darkMode: { - dark: { - ...themes.dark, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, - light: { - ...themes.normal, - brandTitle: manifest.name, - brandImage: logo, - brandUrl: manifest.homepage, - }, +const preview: Preview = { + parameters: { + ...parameters, }, + decorators: [...decorators], }; -export const tags = []; +export default preview; diff --git a/packages/web-ui-registration/package.json b/packages/web-ui-registration/package.json index ef5eab4ab38b0..6a10fdde434d6 100644 --- a/packages/web-ui-registration/package.json +++ b/packages/web-ui-registration/package.json @@ -31,16 +31,11 @@ "@rocket.chat/layout": "^0.34.2", "@rocket.chat/mock-providers": "workspace:~", "@rocket.chat/rest-typings": "workspace:~", + "@rocket.chat/storybook-config": "workspace:~", "@rocket.chat/tools": "workspace:~", "@rocket.chat/ui-client": "workspace:^", "@rocket.chat/ui-contexts": "workspace:^", - "@storybook/addon-actions": "^8.6.18", - "@storybook/addon-docs": "^8.6.18", - "@storybook/addon-essentials": "^8.6.18", - "@storybook/addon-webpack5-compiler-swc": "~3.0.0", - "@storybook/react": "^8.6.18", - "@storybook/react-webpack5": "^8.6.18", - "@storybook/theming": "^8.6.18", + "@storybook/react": "^9.1.13", "@tanstack/react-query": "~5.65.1", "@testing-library/dom": "~10.4.1", "@testing-library/react": "~16.3.2", @@ -53,8 +48,7 @@ "react-hook-form": "~7.45.4", "react-i18next": "~13.2.2", "react-virtuoso": "~4.12.8", - "storybook": "^8.6.18", - "storybook-dark-mode": "^4.0.2", + "storybook": "^9.1.13", "typescript": "~5.9.3" }, "peerDependencies": { diff --git a/packages/web-ui-registration/src/ResetPassword/ResetPassword.stories.tsx b/packages/web-ui-registration/src/ResetPassword/ResetPasswordPage.stories.tsx similarity index 67% rename from packages/web-ui-registration/src/ResetPassword/ResetPassword.stories.tsx rename to packages/web-ui-registration/src/ResetPassword/ResetPasswordPage.stories.tsx index 196cae6988b64..a4b7e472968d5 100644 --- a/packages/web-ui-registration/src/ResetPassword/ResetPassword.stories.tsx +++ b/packages/web-ui-registration/src/ResetPassword/ResetPasswordPage.stories.tsx @@ -1,12 +1,11 @@ import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import ResetPasswordPage from './ResetPasswordPage'; export default { - title: 'Login/ResetPassword', component: ResetPasswordPage, decorators: [mockAppRoot().buildStoryDecorator()], } satisfies Meta; -export const Basic = () => ; +export const Basic: StoryObj = {}; diff --git a/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.stories.tsx b/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.stories.tsx index bc545019d25bf..f0144c0158fe6 100644 --- a/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.stories.tsx +++ b/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.stories.tsx @@ -1,26 +1,30 @@ import { Box, Tile } from '@rocket.chat/fuselage'; import { mockAppRoot } from '@rocket.chat/mock-providers'; -import type { Meta, StoryFn } from '@storybook/react'; -import { createElement } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import type { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import LoginSwitchLanguageFooter from './LoginSwitchLanguageFooter'; +function ExampleTranslationDecorator({ children }: { children: ReactNode }) { + const { t } = useTranslation(); + + return ( + + {t('example.text')} + {children} + + ); +} + export default { - title: 'components/LoginSwitchLanguageFooter', component: LoginSwitchLanguageFooter, decorators: [ - (fn) => - createElement(function ExampleTranslationDecorator() { - const { t } = useTranslation(); - - return ( - - {t('example.text')} - {fn()} - - ); - }), + (Story) => ( + + + + ), mockAppRoot() .withSetting('Language', 'fi') .withTranslations('en', 'registration', { 'component.switchLanguage': 'Change to <1>{{ name }}' }) @@ -39,4 +43,4 @@ export default { }, } satisfies Meta; -export const Default: StoryFn = (args) => ; +export const Example: StoryObj = {}; diff --git a/yarn.lock b/yarn.lock index deaa9f73e82cf..6054dd5e7fa35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2545,7 +2545,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6": version: 7.26.10 resolution: "@babel/runtime@npm:7.26.10" dependencies: @@ -9426,19 +9426,15 @@ __metadata: "@rocket.chat/icons": "npm:~0.47.0" "@rocket.chat/jest-presets": "workspace:~" "@rocket.chat/mock-providers": "workspace:^" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/styled": "npm:^0.33.0" "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-avatar": "workspace:^" "@rocket.chat/ui-contexts": "workspace:^" "@rocket.chat/ui-kit": "workspace:~" "@rocket.chat/ui-video-conf": "workspace:^" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/blocks": "npm:^8.6.18" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" - "@storybook/theming": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" + "@storybook/react-webpack5": "npm:^9.1.13" "@tanstack/react-query": "npm:~5.65.1" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" @@ -9457,8 +9453,7 @@ __metadata: react-i18next: "npm:~13.2.2" react-virtuoso: "npm:~4.12.8" rimraf: "npm:^6.0.1" - storybook: "npm:^8.6.18" - storybook-dark-mode: "npm:^4.0.2" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -9514,19 +9509,14 @@ __metadata: "@rocket.chat/icons": "npm:~0.47.0" "@rocket.chat/jest-presets": "workspace:~" "@rocket.chat/message-parser": "workspace:^" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/styled": "npm:^0.33.0" "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-client": "workspace:^" "@rocket.chat/ui-contexts": "workspace:^" - "@storybook/addon-actions": "npm:^8.6.18" - "@storybook/addon-docs": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-interactions": "npm:^8.6.18" - "@storybook/addon-links": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/addon-links": "npm:^9.1.13" + "@storybook/react": "npm:^9.1.13" + "@storybook/react-webpack5": "npm:^9.1.13" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" "@types/jest": "npm:~30.0.0" @@ -9549,7 +9539,7 @@ __metadata: react-i18next: "npm:~13.2.2" react-stately: "npm:~3.17.0" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -9715,12 +9705,11 @@ __metadata: "@rocket.chat/random": "workspace:~" "@rocket.chat/ui-contexts": "workspace:^" "@rocket.chat/ui-kit": "workspace:~" - "@storybook/addon-essentials": "npm:^8.6.18" + "@storybook/addon-docs": "npm:^9.1.13" "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/preact": "npm:^8.6.18" - "@storybook/preact-webpack5": "npm:^8.6.18" - "@storybook/theming": "npm:^8.6.18" + "@storybook/addon-webpack5-compiler-swc": "npm:^4.0.3" + "@storybook/preact": "npm:9.0.0-alpha.11" + "@storybook/preact-webpack5": "npm:9.0.0-alpha.11" "@types/crypto-js": "npm:~4.2.2" "@types/mini-css-extract-plugin": "npm:~2.5.1" "@types/react": "npm:~18.3.28" @@ -9768,8 +9757,8 @@ __metadata: rimraf: "npm:^6.0.1" sass: "npm:~1.80.7" sass-loader: "npm:~16.0.7" - storybook: "npm:^8.6.18" - storybook-dark-mode: "npm:^4.0.2" + storybook: "npm:^9.1.13" + storybook-dark-mode: "npm:^5.0.0" style-loader: "npm:^1.3.0" stylelint: "npm:^16.10.0" stylelint-order: "npm:^6.0.4" @@ -10002,6 +9991,7 @@ __metadata: "@rocket.chat/server-cloud-communication": "workspace:^" "@rocket.chat/server-fetch": "workspace:^" "@rocket.chat/sha256": "workspace:^" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/string-helpers": "npm:~0.32.0" "@rocket.chat/styled": "npm:^0.33.0" "@rocket.chat/tools": "workspace:^" @@ -10017,13 +10007,8 @@ __metadata: "@rocket.chat/web-ui-registration": "workspace:^" "@slack/bolt": "npm:^3.22.0" "@slack/rtm-api": "npm:~7.0.4" - "@storybook/addon-a11y": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-interactions": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" + "@storybook/react-webpack5": "npm:^9.1.13" "@tanstack/react-query": "npm:~5.65.1" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" @@ -10262,7 +10247,7 @@ __metadata: sodium-plus: "npm:^0.9.0" source-map: "npm:~0.7.6" speakeasy: "npm:^2.0.0" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" stream-buffers: "npm:^3.0.3" strict-uri-encode: "npm:^2.0.0" string-strip-html: "npm:^8.5.0" @@ -10314,7 +10299,7 @@ __metadata: "@rocket.chat/tools": "workspace:~" "@rocket.chat/ui-contexts": "workspace:^" "@rocket.chat/ui-video-conf": "workspace:*" - "@storybook/react": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" "@tanstack/react-query": "npm:~5.65.1" "@testing-library/dom": "npm:~10.4.1" "@testing-library/jest-dom": "npm:~6.8.0" @@ -10327,9 +10312,10 @@ __metadata: react: "npm:~18.3.1" react-dom: "npm:~18.3.1" react-i18next: "npm:~13.2.2" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" peerDependencies: + "@storybook/react": "*" "@tanstack/react-query": "*" react: "*" languageName: unknown @@ -10584,11 +10570,10 @@ __metadata: "@rocket.chat/fuselage-tokens": "npm:~0.33.2" "@rocket.chat/jest-presets": "workspace:~" "@rocket.chat/message-parser": "workspace:~" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/tsconfig": "workspace:*" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" + "@storybook/react-webpack5": "npm:^9.1.13" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" "@types/emojione": "npm:^2.2.9" @@ -10602,10 +10587,11 @@ __metadata: jest: "npm:~30.2.0" moment: "npm:^2.30.1" moment-timezone: "npm:^0.5.48" + path-browserify: "npm:^1.0.1" react: "npm:~18.3.1" react-dom: "npm:~18.3.1" react-i18next: "npm:~13.2.2" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" languageName: unknown linkType: soft @@ -10849,21 +10835,18 @@ __metadata: "@rocket.chat/fuselage-tokens": "npm:~0.33.2" "@rocket.chat/icons": "npm:~0.47.0" "@rocket.chat/tsconfig": "workspace:*" - "@storybook/addon-a11y": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/blocks": "npm:^8.6.18" - "@storybook/preview-api": "npm:^8.6.18" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" - "@storybook/theming": "npm:^8.6.18" + "@storybook/addon-a11y": "npm:^9.1.13" + "@storybook/addon-docs": "npm:^9.1.13" + "@storybook/addon-styling-webpack": "npm:^2.0.0" + "@storybook/addon-webpack5-compiler-swc": "npm:^4.0.3" + "@storybook/react": "npm:^9.1.13" + "@storybook/react-webpack5": "npm:^9.1.13" eslint: "npm:~9.39.4" react: "npm:~18.3.1" react-dom: "npm:~18.3.1" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" - storybook-dark-mode: "npm:^4.0.2" + storybook: "npm:^9.1.13" + storybook-dark-mode: "npm:^5.0.0" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -10984,8 +10967,7 @@ __metadata: "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-avatar": "workspace:~" "@rocket.chat/ui-contexts": "workspace:~" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" "@types/jest": "npm:~30.0.0" @@ -11003,7 +10985,7 @@ __metadata: react-hook-form: "npm:~7.45.4" react-i18next: "npm:~13.2.2" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" peerDependencies: "@react-aria/toolbar": "*" @@ -11032,16 +11014,13 @@ __metadata: "@rocket.chat/fuselage-tokens": "npm:~0.33.2" "@rocket.chat/icons": "npm:~0.47.0" "@rocket.chat/jest-presets": "workspace:~" + "@rocket.chat/mock-providers": "workspace:~" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-client": "workspace:~" - "@storybook/addon-a11y": "npm:^8.6.18" - "@storybook/addon-actions": "npm:^8.6.18" - "@storybook/addon-docs": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" + "@testing-library/react": "npm:~16.3.2" + "@testing-library/user-event": "npm:~14.6.1" "@types/jest": "npm:~30.0.0" "@types/react": "npm:~18.3.28" "@types/react-dom": "npm:~18.3.7" @@ -11050,7 +11029,7 @@ __metadata: react: "npm:~18.3.1" react-dom: "npm:~18.3.1" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -11134,18 +11113,12 @@ __metadata: "@rocket.chat/fuselage-tokens": "npm:~0.33.2" "@rocket.chat/icons": "npm:~0.47.0" "@rocket.chat/jest-presets": "workspace:~" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/styled": "npm:^0.33.0" "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-avatar": "workspace:^" "@rocket.chat/ui-contexts": "workspace:^" - "@storybook/addon-a11y": "npm:^8.6.18" - "@storybook/addon-actions": "npm:^8.6.18" - "@storybook/addon-docs": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-styling-webpack": "npm:^1.0.1" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" "@types/jest": "npm:~30.0.0" "@types/jest-axe": "npm:~3.5.9" "@types/react": "npm:~18.3.28" @@ -11156,7 +11129,7 @@ __metadata: react: "npm:~18.3.1" react-dom: "npm:~18.3.1" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -11190,21 +11163,14 @@ __metadata: "@rocket.chat/jest-presets": "workspace:~" "@rocket.chat/media-signaling": "workspace:~" "@rocket.chat/mock-providers": "workspace:~" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/styled": "npm:^0.33.0" "@rocket.chat/tsconfig": "workspace:*" "@rocket.chat/ui-avatar": "workspace:^" "@rocket.chat/ui-client": "workspace:^" "@rocket.chat/ui-contexts": "workspace:^" "@rocket.chat/ui-kit": "workspace:^" - "@storybook/addon-a11y": "npm:^8.6.18" - "@storybook/addon-actions": "npm:^8.6.18" - "@storybook/addon-docs": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-interactions": "npm:^8.6.18" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" - "@storybook/test": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" "@storybook/test-runner": "npm:^0.22.1" "@tanstack/react-query": "npm:~5.65.1" "@testing-library/dom": "npm:~10.4.1" @@ -11223,7 +11189,7 @@ __metadata: react-dom: "npm:~18.3.1" react-i18next: "npm:~13.2.2" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" peerDependencies: "@rocket.chat/css-in-js": "*" @@ -11299,16 +11265,11 @@ __metadata: "@rocket.chat/layout": "npm:^0.34.2" "@rocket.chat/mock-providers": "workspace:~" "@rocket.chat/rest-typings": "workspace:~" + "@rocket.chat/storybook-config": "workspace:~" "@rocket.chat/tools": "workspace:~" "@rocket.chat/ui-client": "workspace:^" "@rocket.chat/ui-contexts": "workspace:^" - "@storybook/addon-actions": "npm:^8.6.18" - "@storybook/addon-docs": "npm:^8.6.18" - "@storybook/addon-essentials": "npm:^8.6.18" - "@storybook/addon-webpack5-compiler-swc": "npm:~3.0.0" - "@storybook/react": "npm:^8.6.18" - "@storybook/react-webpack5": "npm:^8.6.18" - "@storybook/theming": "npm:^8.6.18" + "@storybook/react": "npm:^9.1.13" "@tanstack/react-query": "npm:~5.65.1" "@testing-library/dom": "npm:~10.4.1" "@testing-library/react": "npm:~16.3.2" @@ -11322,8 +11283,7 @@ __metadata: react-hook-form: "npm:~7.45.4" react-i18next: "npm:~13.2.2" react-virtuoso: "npm:~4.12.8" - storybook: "npm:^8.6.18" - storybook-dark-mode: "npm:^4.0.2" + storybook: "npm:^9.1.13" typescript: "npm:~5.9.3" peerDependencies: "@rocket.chat/layout": "*" @@ -12412,161 +12372,47 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-a11y@npm:8.6.18" +"@storybook/addon-a11y@npm:^9.1.13": + version: 9.1.20 + resolution: "@storybook/addon-a11y@npm:9.1.20" dependencies: - "@storybook/addon-highlight": "npm:8.6.18" "@storybook/global": "npm:^5.0.0" - "@storybook/test": "npm:8.6.18" axe-core: "npm:^4.2.0" peerDependencies: - storybook: ^8.6.18 - checksum: 10/5cef9b97337d7bc57b0cc94eadbab5bd18a3226ed4a5b83208c91b822d0a68cc7c252c274207014402e2c741352c97a36d96d93f2155e238971a23f843fb7d79 - languageName: node - linkType: hard - -"@storybook/addon-actions@npm:8.6.18, @storybook/addon-actions@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-actions@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - "@types/uuid": "npm:^9.0.1" - dequal: "npm:^2.0.2" - polished: "npm:^4.2.2" - uuid: "npm:^9.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/d2c9209775b772b21c2f45d60be1a72fe3d28520f816614b53e9a50e40ee0476a614cec05a6b0cf1d069bf668c559a19422f4447c164d0a0a369a053fb85bcd4 - languageName: node - linkType: hard - -"@storybook/addon-backgrounds@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-backgrounds@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - memoizerific: "npm:^1.11.3" - ts-dedent: "npm:^2.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/de69ac2241add38e7095f3d9ce410cdbc956f2205073aa33b0d53bff41ce0f699fd0ea33b7bda7d8359bfd3b2642804dffdb97beeeb3703ced4fb3f418db71b3 - languageName: node - linkType: hard - -"@storybook/addon-controls@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-controls@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - dequal: "npm:^2.0.2" - ts-dedent: "npm:^2.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/c76bd6a789bb318ee092e986b6801259de2d90044d6a3df94e63157c009ad82f28f389ec9bfa33141cac6a186d8ef67d922cd1a14a355d5f813ad910e03639e2 + storybook: ^9.1.20 + checksum: 10/f4abdac66261a031d9870a2d55d4881107541d89ed684fc47aa37ab2dc9ab43fc6fd0f2e6f1ffdbf0d2b2f3715a2b2352cd3be45b6662eb1028fd1bcaaad3be8 languageName: node linkType: hard -"@storybook/addon-docs@npm:8.6.18, @storybook/addon-docs@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-docs@npm:8.6.18" +"@storybook/addon-docs@npm:^9.1.13": + version: 9.1.20 + resolution: "@storybook/addon-docs@npm:9.1.20" dependencies: "@mdx-js/react": "npm:^3.0.0" - "@storybook/blocks": "npm:8.6.18" - "@storybook/csf-plugin": "npm:8.6.18" - "@storybook/react-dom-shim": "npm:8.6.18" + "@storybook/csf-plugin": "npm:9.1.20" + "@storybook/icons": "npm:^1.4.0" + "@storybook/react-dom-shim": "npm:9.1.20" react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.6.18 - checksum: 10/3f241f610865cc368dfad98c74323fd04fde979cb4ea08aec3ff92535f11251d44feff39b1c81439b790bbb432cc441ee78f8508222df4cd037f5b2cdd4d5ac2 - languageName: node - linkType: hard - -"@storybook/addon-essentials@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-essentials@npm:8.6.18" - dependencies: - "@storybook/addon-actions": "npm:8.6.18" - "@storybook/addon-backgrounds": "npm:8.6.18" - "@storybook/addon-controls": "npm:8.6.18" - "@storybook/addon-docs": "npm:8.6.18" - "@storybook/addon-highlight": "npm:8.6.18" - "@storybook/addon-measure": "npm:8.6.18" - "@storybook/addon-outline": "npm:8.6.18" - "@storybook/addon-toolbars": "npm:8.6.18" - "@storybook/addon-viewport": "npm:8.6.18" - ts-dedent: "npm:^2.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/76507ddcba17cef78048b2d191a43eb3d13e078a930c4ab2b494b9b37000a0b794a5b26096835a5991272dde795280d5a9fb07109e42426e194502e810ee0bae + storybook: ^9.1.20 + checksum: 10/5f67138fa398d400831160ffdefaacf9679441bd84890890e2da7ab94112773a49e0846b3db6b6700eb92e4509928543086345d7c9ab78d3bd23df22b9933b9c languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-highlight@npm:8.6.18" +"@storybook/addon-links@npm:^9.1.13": + version: 9.1.20 + resolution: "@storybook/addon-links@npm:9.1.20" dependencies: "@storybook/global": "npm:^5.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/a764c949026190ba45c515e2f2e3955114340f249fbeb7c11379c568fad464d3335dfa744fbc678f5b21ad9ceca929b231ebdb635d12e1996fd7b7263671c0d6 - languageName: node - linkType: hard - -"@storybook/addon-interactions@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-interactions@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.6.18" - "@storybook/test": "npm:8.6.18" - polished: "npm:^4.2.2" - ts-dedent: "npm:^2.2.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/586597a1aa98cd3bf1c261fb7b4da651afefc76e5e2a97e0ebc2410669bb4b16d8e7df675b8f5aee862456e3be85b44ddfe21d1b777aa31cc9f1bcaec1da5970 - languageName: node - linkType: hard - -"@storybook/addon-links@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-links@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - ts-dedent: "npm:^2.0.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.18 + storybook: ^9.1.20 peerDependenciesMeta: react: optional: true - checksum: 10/2abd52a9b3628000331101326a9d1158daad27389b84a88deb4e4232eaf14ccdcf44c9d512857c0a8a60b421297015cf686e1410dc9dfdee47f18c4a8642ecce - languageName: node - linkType: hard - -"@storybook/addon-measure@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-measure@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - tiny-invariant: "npm:^1.3.1" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/d56825395e8a4316aea1cec7de03635616d0591d0686b0ea7462f6bbdba7fd2d53d9378688e3fbc412a27199a04cf6e19ecd4c8e0a3ea65722bc222aaea30eca - languageName: node - linkType: hard - -"@storybook/addon-outline@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-outline@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - ts-dedent: "npm:^2.0.0" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/35dbe22bfc9a6d1964ce16de63067f46fece44fac2b49cf2d981247fd17f11cf0802dbe397c16690e84b866a9590c343a4f5dedc0ea6d8eb51044c758c9cc447 + checksum: 10/18726de95d1c2a187e63f61488505d164f0afe84830652b231ee55ba8c3809b3c87baefd4b5d803b5383a0d93b2c636fcf0dee343bfa03e7db7702c7add86909 languageName: node linkType: hard @@ -12581,60 +12427,33 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-toolbars@npm:8.6.18" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/85ec5922bf9b2467db2d9a723caf68d6156dc36fa220898be1bbb5351e2321bfc96189b357d8a206b4e2740a15c7c40db13dc89acf424f47dad0dd0b30200e53 - languageName: node - linkType: hard - -"@storybook/addon-viewport@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/addon-viewport@npm:8.6.18" - dependencies: - memoizerific: "npm:^1.11.3" +"@storybook/addon-styling-webpack@npm:^2.0.0": + version: 2.0.0 + resolution: "@storybook/addon-styling-webpack@npm:2.0.0" peerDependencies: - storybook: ^8.6.18 - checksum: 10/b1989f7740e8f4b65fdaea8fa8a8d9a546c483f7282f92373e2b8c89818b80c566342d9c5cd0f6142cd610a878cdfc99e5221aaa31f410741acd226329e254a0 + storybook: ^9.0.0 + webpack: ^5.0.0 + checksum: 10/ce72b1ac76b969dabea45838ad197bc03912c3d21c99baa9178a403df2c6df4d72b67301e25c8a6d69fc9fe21a40364a3eb3747c7dd6539eff63c9508a6130dc languageName: node linkType: hard -"@storybook/addon-webpack5-compiler-swc@npm:~3.0.0": - version: 3.0.0 - resolution: "@storybook/addon-webpack5-compiler-swc@npm:3.0.0" +"@storybook/addon-webpack5-compiler-swc@npm:^4.0.3": + version: 4.0.3 + resolution: "@storybook/addon-webpack5-compiler-swc@npm:4.0.3" dependencies: - "@swc/core": "npm:^1.10.8" + "@swc/core": "npm:^1.13.5" swc-loader: "npm:^0.2.6" - checksum: 10/c2b0c26d8bf54875297c82d2159aeb62846048dc71d8e953a6d6301d8a5aedc4eb979cc75877b24a2f7e1667a5baa7116286c1da29bff4a1510d2b6ec657392c - languageName: node - linkType: hard - -"@storybook/blocks@npm:8.6.18, @storybook/blocks@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/blocks@npm:8.6.18" - dependencies: - "@storybook/icons": "npm:^1.2.12" - ts-dedent: "npm:^2.0.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - storybook: ^8.6.18 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true - checksum: 10/eb63a94b8dac61a009a7a83ed45e598cc7ba5c47f8f7212155d44a20d9cd8be8da42b000cd667c703bb76a598e1cfbffa14e4db1437cfef16610d4bb0623b4c0 + storybook: ^9.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0 + checksum: 10/3c062c08254cf896030dded773e5f80e9471733a6b3c3d6afa467ff59fe991a06a52155b3ae9936f741beb9bacfd8f11ff908e38dc6ee31955db628e67260486 languageName: node linkType: hard -"@storybook/builder-webpack5@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/builder-webpack5@npm:8.6.18" +"@storybook/builder-webpack5@npm:9.0.0-alpha.11": + version: 9.0.0-alpha.11 + resolution: "@storybook/builder-webpack5@npm:9.0.0-alpha.11" dependencies: - "@storybook/core-webpack": "npm:8.6.18" + "@storybook/core-webpack": "npm:9.0.0-alpha.11" "@types/semver": "npm:^7.3.4" browser-assert: "npm:^1.2.1" case-sensitive-paths-webpack-plugin: "npm:^2.4.0" @@ -12659,84 +12478,72 @@ __metadata: webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.6.0" peerDependencies: - storybook: ^8.6.18 + storybook: ^9.0.0-alpha.11 peerDependenciesMeta: typescript: optional: true - checksum: 10/1444a39e9847a64d68f0fa8871fde70adf6cdc0b9713391c42bd97244b1af54eca95b47ea4fe15d17d65bb0c7ddb401ac8b4f3a443a5a6e3e05d2398ecab5544 - languageName: node - linkType: hard - -"@storybook/components@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/components@npm:8.6.18" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/5f14142b7c1ebdc91873f4d530ec50ce67ae264e9ffc1359fa9731139a1de4c77bb43188a894c211bdd631747c0931529d1df1c681bcf49a17c717553d5b4f3a - languageName: node - linkType: hard - -"@storybook/components@npm:^8.0.0": - version: 8.6.14 - resolution: "@storybook/components@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/d3647505510313aa3c32fd1f8f202eda723ad99bd353b20aa929c5ecab4edc3c86ad06d0eac02f3c6d948e88f13f65ca5fa35ef27c079ef1b92abe8692f23699 + checksum: 10/328eb54177d6184b92d6cb4a7d5d45e5d9aa3e2f073518a349a33afa0d84dd91b380162b39700862b07aac03af31c695ec1585e8699944a5ac9f427f1b49bf49 languageName: node linkType: hard -"@storybook/core-events@npm:^8.0.0": - version: 8.3.5 - resolution: "@storybook/core-events@npm:8.3.5" +"@storybook/builder-webpack5@npm:9.1.20": + version: 9.1.20 + resolution: "@storybook/builder-webpack5@npm:9.1.20" + dependencies: + "@storybook/core-webpack": "npm:9.1.20" + case-sensitive-paths-webpack-plugin: "npm:^2.4.0" + cjs-module-lexer: "npm:^1.2.3" + css-loader: "npm:^6.7.1" + es-module-lexer: "npm:^1.5.0" + fork-ts-checker-webpack-plugin: "npm:^8.0.0" + html-webpack-plugin: "npm:^5.5.0" + magic-string: "npm:^0.30.5" + style-loader: "npm:^3.3.1" + terser-webpack-plugin: "npm:^5.3.1" + ts-dedent: "npm:^2.0.0" + webpack: "npm:5" + webpack-dev-middleware: "npm:^6.1.2" + webpack-hot-middleware: "npm:^2.25.1" + webpack-virtual-modules: "npm:^0.6.0" peerDependencies: - storybook: ^8.3.5 - checksum: 10/46a93e621fbddfff797750521b4fb4899a47e6a3a2a67137b3c28afe42bb02414f6fe8279259ac8beedd30f98f7937c09ea20747f5673029c31aa313c3079a21 + storybook: ^9.1.20 + peerDependenciesMeta: + typescript: + optional: true + checksum: 10/ba9d758fca8ef6e56a72bbb16360da47971d54fc7610ce28694ba8434adda1ed7ddd36c7da8ccb61a761dda1d7808c68abf5198354dace330826c6f29685f522 languageName: node linkType: hard -"@storybook/core-webpack@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/core-webpack@npm:8.6.18" +"@storybook/core-webpack@npm:9.0.0-alpha.11": + version: 9.0.0-alpha.11 + resolution: "@storybook/core-webpack@npm:9.0.0-alpha.11" dependencies: ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.6.18 - checksum: 10/a8e055b4afcdc08a440585ce9983de7de9df36f6a77a22fcf472546dd0932033b7a3ce3665d4c11f4f86a73c0e12b8bdcbd85d5447f79026da3de88cf611814f + storybook: ^9.0.0-alpha.11 + checksum: 10/26a66cb9203375920d919dd12425a2355a6d6bca11d2c23bb11c8276cd43842f834ff2ec12b0874cd44684bce48c2420c4dded0582fe08f84d6fc04a213aee32 languageName: node linkType: hard -"@storybook/core@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/core@npm:8.6.18" +"@storybook/core-webpack@npm:9.1.20": + version: 9.1.20 + resolution: "@storybook/core-webpack@npm:9.1.20" dependencies: - "@storybook/theming": "npm:8.6.18" - better-opn: "npm:^3.0.2" - browser-assert: "npm:^1.2.1" - esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" - esbuild-register: "npm:^3.5.0" - jsdoc-type-pratt-parser: "npm:^4.0.0" - process: "npm:^0.11.10" - recast: "npm:^0.23.5" - semver: "npm:^7.6.2" - util: "npm:^0.12.5" - ws: "npm:^8.2.3" + ts-dedent: "npm:^2.0.0" peerDependencies: - prettier: ^2 || ^3 - peerDependenciesMeta: - prettier: - optional: true - checksum: 10/ba9014903155d3bc0c0eb481bf1aeb634503822c9d6f7a16278e0a3f36d6f2e302906f2320c6fc320d43fa6e009638c31ecae5d67a77ca8a502dde3a87f04f08 + storybook: ^9.1.20 + checksum: 10/71f361cb0f21b293ae3c3f5f7f9816252b5b9f5bbef479ebbaf1c89ad2b7496582d338ba06f1faf9bca899acb84d3e6f0fefaa5b70174c24101a6401889dd01b languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/csf-plugin@npm:8.6.18" +"@storybook/csf-plugin@npm:9.1.20": + version: 9.1.20 + resolution: "@storybook/csf-plugin@npm:9.1.20" dependencies: unplugin: "npm:^1.3.1" peerDependencies: - storybook: ^8.6.18 - checksum: 10/e47b36c43329cb74a8f97b8620fe418bf1298e7cc193d643884816b4c5fa7462e4de27a03dba926b0a289fe8b22f48cf6a39a7d0bbca9b68d9651480c9371329 + storybook: ^9.1.20 + checksum: 10/bc53ad292a0abcadd0cb3e7a5d5da3fc2580db5b52d8ffa617aad4dda7cd666d700337d76588db61d388ccc8b0ed54ab95f16b0f96949b331ae1134c43035406 languageName: node linkType: hard @@ -12756,43 +12563,23 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^1.2.12, @storybook/icons@npm:^1.2.5": - version: 1.2.12 - resolution: "@storybook/icons@npm:1.2.12" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5df56f0856764ed7e4bb24ef7a08a8a9c93f8eedcb16dac062f1dfd3bd1fe6cb4a0aa5a0794083d95e31c04960d126a4d2028cfb4c53681bf05513bb38eae9d2 - languageName: node - linkType: hard - -"@storybook/instrumenter@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/instrumenter@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - "@vitest/utils": "npm:^2.1.1" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/d6115f9f62eca5855a357299491b04a3ccf5a7963e952b74fddf54d7b53b2d1b3b00e3590236a4cfbbedae4ff393ad21a1fcacd8e21786711db10ecf6d5f357b - languageName: node - linkType: hard - -"@storybook/manager-api@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/manager-api@npm:8.6.18" +"@storybook/icons@npm:^1.4.0": + version: 1.6.0 + resolution: "@storybook/icons@npm:1.6.0" peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/40176c8536671fd6506062bdd6bf3eabcf1a664d7fadbab11fab389558ec5a1e094835e35fa771de0bbe4817ce5672af40703908fcc3e00c54a0586b7af653d1 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + checksum: 10/f9036ca3b0d2904778eb4e202305f2780b549434380f9760f0bc704fe3ee19d7332f9560a66435ebb2156346cee9a863e40fa5e4b27790bf993b0c1180a3146d languageName: node linkType: hard -"@storybook/manager-api@npm:^8.0.0": - version: 8.6.14 - resolution: "@storybook/manager-api@npm:8.6.14" +"@storybook/icons@npm:^2.0.1": + version: 2.0.2 + resolution: "@storybook/icons@npm:2.0.2" peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/4544b317050b81574f1cd6f911dcb99ee2adbd7190555209171a7dd2233cd331165fa11c16a5977ebe58eeaf26c86bbfcb23f701cfd79a10f0d034dae65197bd + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: 10/e470c2e1a59211f9f0da7e39cf1cee6c4f62b72b3c2489d75e869840dabffb7ca84227e17f5d3657f459cc082a01b76482c111792ab5586ba9235be5c6199e29 languageName: node linkType: hard @@ -12805,60 +12592,55 @@ __metadata: languageName: node linkType: hard -"@storybook/preact-webpack5@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/preact-webpack5@npm:8.6.18" +"@storybook/preact-webpack5@npm:9.0.0-alpha.11": + version: 9.0.0-alpha.11 + resolution: "@storybook/preact-webpack5@npm:9.0.0-alpha.11" dependencies: - "@storybook/builder-webpack5": "npm:8.6.18" - "@storybook/preact": "npm:8.6.18" - "@storybook/preset-preact-webpack": "npm:8.6.18" + "@storybook/builder-webpack5": "npm:9.0.0-alpha.11" + "@storybook/preact": "npm:9.0.0-alpha.11" + "@storybook/preset-preact-webpack": "npm:9.0.0-alpha.11" peerDependencies: preact: ">=10.0.0" - storybook: ^8.6.18 - checksum: 10/2c01519bcd6b574d3e2ae98fc96120f890826a17d0ac5a3e0a7c27dc07e1d5c09542e85433b1d802287fdcbc7fbde81bf7526d148bf9a21221443bb377932cb2 + storybook: ^9.0.0-alpha.11 + checksum: 10/4844d1454b645153d4ea591a2d314b385e713a6005c37b594fc3cea2dad5d219f787cdb3dedbcfabc7150d1010eec77f96d9bd689a5b6ff5892703c4776ab5a3 languageName: node linkType: hard -"@storybook/preact@npm:8.6.18, @storybook/preact@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/preact@npm:8.6.18" +"@storybook/preact@npm:9.0.0-alpha.11": + version: 9.0.0-alpha.11 + resolution: "@storybook/preact@npm:9.0.0-alpha.11" dependencies: - "@storybook/components": "npm:8.6.18" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:8.6.18" - "@storybook/preview-api": "npm:8.6.18" - "@storybook/theming": "npm:8.6.18" ts-dedent: "npm:^2.0.0" peerDependencies: preact: ^8.0.0||^10.0.0 - storybook: ^8.6.18 - checksum: 10/bb5cb1cbc45eac11e65da43611e32a0374630b1c09c3d61f349dfe81cc7be8e9303bbfa20e66d016f7b8b27440b05ffdea2b1ae0374b2a02f12896a47665a007 + storybook: ^9.0.0-alpha.11 + checksum: 10/680a56382ed9353827121cc9287917515a1239de015d65ccd3170defc02357bc210dc401c14cf99439073a9739bc208e257f2002da1359896bf2dfb7df29c2ef languageName: node linkType: hard -"@storybook/preset-preact-webpack@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/preset-preact-webpack@npm:8.6.18" +"@storybook/preset-preact-webpack@npm:9.0.0-alpha.11": + version: 9.0.0-alpha.11 + resolution: "@storybook/preset-preact-webpack@npm:9.0.0-alpha.11" dependencies: - "@storybook/core-webpack": "npm:8.6.18" + "@storybook/core-webpack": "npm:9.0.0-alpha.11" peerDependencies: preact: ^8.0.0||^10.0.0 - storybook: ^8.6.18 - checksum: 10/0f732b4354cd9c928b73129488bca6c768350088f28890339c3e4bc851adbbcfae7470338bd0d473eb94795ba9843aef544b55da65715f0025c6e6ac17034eba + storybook: ^9.0.0-alpha.11 + checksum: 10/adde25f6672aca158dee3b48cc0e2e687f24ee6bd3c7fd8ef6217761fe1368d731444e53e1cb839c74898439a1ad2004392a78665670dbbc4f8a581cfdb46fa7 languageName: node linkType: hard -"@storybook/preset-react-webpack@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/preset-react-webpack@npm:8.6.18" +"@storybook/preset-react-webpack@npm:9.1.20": + version: 9.1.20 + resolution: "@storybook/preset-react-webpack@npm:9.1.20" dependencies: - "@storybook/core-webpack": "npm:8.6.18" - "@storybook/react": "npm:8.6.18" + "@storybook/core-webpack": "npm:9.1.20" "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0" "@types/semver": "npm:^7.3.4" - find-up: "npm:^5.0.0" + find-up: "npm:^7.0.0" magic-string: "npm:^0.30.5" - react-docgen: "npm:^7.0.0" + react-docgen: "npm:^7.1.1" resolve: "npm:^1.22.8" semver: "npm:^7.3.7" tsconfig-paths: "npm:^4.2.0" @@ -12866,20 +12648,11 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.18 + storybook: ^9.1.20 peerDependenciesMeta: typescript: optional: true - checksum: 10/e8ac548258323afd3693aa407a21965ce8b63b4bd0cd238bef826dafc727f62dc90c3ded7e4d8d76379373d5a797014c09401a77bd7aa8c6945cb0c0f82c906e - languageName: node - linkType: hard - -"@storybook/preview-api@npm:8.6.18, @storybook/preview-api@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/preview-api@npm:8.6.18" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/4d2ca71644f2fd1ccb5d5277aab5a29651749304f733c2a814b98a1bc63d020f4d50459128b3f619c7e4fdef24af732a17bcab52ea388ee3eb678aded8d9fe29 + checksum: 10/357525baea99e4fafea017054064ea94fad8e493d95287090fb728549e5f8ba88aa8221d5b92507375ba141113a3bd737726d5dc882727079768876c8266ce5b languageName: node linkType: hard @@ -12901,58 +12674,51 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.6.18": - version: 8.6.18 - resolution: "@storybook/react-dom-shim@npm:8.6.18" +"@storybook/react-dom-shim@npm:9.1.20": + version: 9.1.20 + resolution: "@storybook/react-dom-shim@npm:9.1.20" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.18 - checksum: 10/a3ca6030d480ce316c52e498b2b9e984566c8145e0dfa82d1a100900d5219c0aadf315133cdc9a978ffbda73beb660cf05a5c967a92260485e3310ad26b0548c + storybook: ^9.1.20 + checksum: 10/7a341d5ec846e27752a8719f84c025a7d2d890a92631f83f48387b4408d8afe3fa7e5940b51ab007515bfd94c2d4c74692c3d9793e3b3140d79de91870a9d7ac languageName: node linkType: hard -"@storybook/react-webpack5@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/react-webpack5@npm:8.6.18" +"@storybook/react-webpack5@npm:^9.1.13": + version: 9.1.20 + resolution: "@storybook/react-webpack5@npm:9.1.20" dependencies: - "@storybook/builder-webpack5": "npm:8.6.18" - "@storybook/preset-react-webpack": "npm:8.6.18" - "@storybook/react": "npm:8.6.18" + "@storybook/builder-webpack5": "npm:9.1.20" + "@storybook/preset-react-webpack": "npm:9.1.20" + "@storybook/react": "npm:9.1.20" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.18 - typescript: ">= 4.2.x" + storybook: ^9.1.20 + typescript: ">= 4.9.x" peerDependenciesMeta: typescript: optional: true - checksum: 10/fd8ad7b0690f259a4393e81cfc7f8b41e56f1738510a593a4f3b66fe93e337a6568aa70d00d906ef57de8c4f9436757d57e8174902f70509e2169c76fe173873 + checksum: 10/3dc99ec39f23e8ec9fa9e0ef773216b33f9ac6032436defe7c8d9002b788308609bf5c7b8fcbe8ef8b545353792b1783c257f5fb1101ec5a64ca9a8cd7408361 languageName: node linkType: hard -"@storybook/react@npm:8.6.18, @storybook/react@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/react@npm:8.6.18" +"@storybook/react@npm:9.1.20, @storybook/react@npm:^9.1.13": + version: 9.1.20 + resolution: "@storybook/react@npm:9.1.20" dependencies: - "@storybook/components": "npm:8.6.18" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:8.6.18" - "@storybook/preview-api": "npm:8.6.18" - "@storybook/react-dom-shim": "npm:8.6.18" - "@storybook/theming": "npm:8.6.18" + "@storybook/react-dom-shim": "npm:9.1.20" peerDependencies: - "@storybook/test": 8.6.18 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.18 - typescript: ">= 4.2.x" + storybook: ^9.1.20 + typescript: ">= 4.9.x" peerDependenciesMeta: - "@storybook/test": - optional: true typescript: optional: true - checksum: 10/430c4dfb1ff0aab03454eef289dfd0cb80b57273085b4aa8367e05125b0950b02ccc8ce51099b4d676ae70b0a739567999182f3d1805a71963b3d6b54e6d80b1 + checksum: 10/9a9f442fae46e225b1fc8701ca1bbfce6c0486cda5fdc185f494da495ce99e54e7ac2400353a4c3903eadb1d045508fa6a6e560ed2a4b495eb0e6e531518e015 languageName: node linkType: hard @@ -12987,41 +12753,6 @@ __metadata: languageName: node linkType: hard -"@storybook/test@npm:8.6.18, @storybook/test@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/test@npm:8.6.18" - dependencies: - "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.6.18" - "@testing-library/dom": "npm:10.4.0" - "@testing-library/jest-dom": "npm:6.5.0" - "@testing-library/user-event": "npm:14.5.2" - "@vitest/expect": "npm:2.0.5" - "@vitest/spy": "npm:2.0.5" - peerDependencies: - storybook: ^8.6.18 - checksum: 10/90940aa7015122f393dc68aae9c2de490e3481706e69e771cf7c3779d2e568afd8559a4a18ec2363fcb8d52b4731e90682a2cf4d117da21d905cc663a0488317 - languageName: node - linkType: hard - -"@storybook/theming@npm:8.6.18, @storybook/theming@npm:^8.6.18": - version: 8.6.18 - resolution: "@storybook/theming@npm:8.6.18" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/e6f02c449a11ba7eea7ada81b17b4442c557f0fac0238f34706ca95ff1a1852014c5c56be07c5e6f43ee75ab4e8a3071e8372901b17674c4a82bfe9f48b425e1 - languageName: node - linkType: hard - -"@storybook/theming@npm:^8.0.0": - version: 8.6.14 - resolution: "@storybook/theming@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/6936ea3348968fe598ad47421c11a78c6ee2ce62336ea1ce9cb8257e9faa2553d3ac3e443f8a36d35a41b0d60eb169231516649c710582ec68fdead4f23ffc0e - languageName: node - linkType: hard - "@swc/core-darwin-arm64@npm:1.12.4": version: 1.12.4 resolution: "@swc/core-darwin-arm64@npm:1.12.4" @@ -13029,16 +12760,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-darwin-arm64@npm:1.15.3" +"@swc/core-darwin-arm64@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-darwin-arm64@npm:1.15.30" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-darwin-arm64@npm:1.15.30" +"@swc/core-darwin-arm64@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-darwin-arm64@npm:1.15.40" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -13050,16 +12781,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-darwin-x64@npm:1.15.3" +"@swc/core-darwin-x64@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-darwin-x64@npm:1.15.30" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-darwin-x64@npm:1.15.30" +"@swc/core-darwin-x64@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-darwin-x64@npm:1.15.40" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -13071,16 +12802,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.15.3" +"@swc/core-linux-arm-gnueabihf@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.15.30" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.15.30" +"@swc/core-linux-arm-gnueabihf@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.15.40" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -13092,16 +12823,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-linux-arm64-gnu@npm:1.15.3" +"@swc/core-linux-arm64-gnu@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-linux-arm64-gnu@npm:1.15.30" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-linux-arm64-gnu@npm:1.15.30" +"@swc/core-linux-arm64-gnu@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-arm64-gnu@npm:1.15.40" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard @@ -13113,16 +12844,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-linux-arm64-musl@npm:1.15.3" +"@swc/core-linux-arm64-musl@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-linux-arm64-musl@npm:1.15.30" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-linux-arm64-musl@npm:1.15.30" +"@swc/core-linux-arm64-musl@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-arm64-musl@npm:1.15.40" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard @@ -13134,6 +12865,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-ppc64-gnu@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-ppc64-gnu@npm:1.15.40" + conditions: os=linux & cpu=ppc64 & libc=glibc + languageName: node + linkType: hard + "@swc/core-linux-s390x-gnu@npm:1.15.30": version: 1.15.30 resolution: "@swc/core-linux-s390x-gnu@npm:1.15.30" @@ -13141,6 +12879,13 @@ __metadata: languageName: node linkType: hard +"@swc/core-linux-s390x-gnu@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-s390x-gnu@npm:1.15.40" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + "@swc/core-linux-x64-gnu@npm:1.12.4": version: 1.12.4 resolution: "@swc/core-linux-x64-gnu@npm:1.12.4" @@ -13148,16 +12893,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-linux-x64-gnu@npm:1.15.3" +"@swc/core-linux-x64-gnu@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-linux-x64-gnu@npm:1.15.30" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-linux-x64-gnu@npm:1.15.30" +"@swc/core-linux-x64-gnu@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-x64-gnu@npm:1.15.40" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard @@ -13169,16 +12914,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-linux-x64-musl@npm:1.15.3" +"@swc/core-linux-x64-musl@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-linux-x64-musl@npm:1.15.30" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-linux-x64-musl@npm:1.15.30" +"@swc/core-linux-x64-musl@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-linux-x64-musl@npm:1.15.40" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard @@ -13190,16 +12935,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-win32-arm64-msvc@npm:1.15.3" +"@swc/core-win32-arm64-msvc@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-win32-arm64-msvc@npm:1.15.30" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-win32-arm64-msvc@npm:1.15.30" +"@swc/core-win32-arm64-msvc@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-win32-arm64-msvc@npm:1.15.40" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -13211,16 +12956,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-win32-ia32-msvc@npm:1.15.3" +"@swc/core-win32-ia32-msvc@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-win32-ia32-msvc@npm:1.15.30" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-win32-ia32-msvc@npm:1.15.30" +"@swc/core-win32-ia32-msvc@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-win32-ia32-msvc@npm:1.15.40" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -13232,16 +12977,16 @@ __metadata: languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.15.3": - version: 1.15.3 - resolution: "@swc/core-win32-x64-msvc@npm:1.15.3" +"@swc/core-win32-x64-msvc@npm:1.15.30": + version: 1.15.30 + resolution: "@swc/core-win32-x64-msvc@npm:1.15.30" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.15.30": - version: 1.15.30 - resolution: "@swc/core-win32-x64-msvc@npm:1.15.30" +"@swc/core-win32-x64-msvc@npm:1.15.40": + version: 1.15.40 + resolution: "@swc/core-win32-x64-msvc@npm:1.15.40" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -13298,22 +13043,24 @@ __metadata: languageName: node linkType: hard -"@swc/core@npm:^1.10.8": - version: 1.15.3 - resolution: "@swc/core@npm:1.15.3" +"@swc/core@npm:^1.13.5": + version: 1.15.40 + resolution: "@swc/core@npm:1.15.40" dependencies: - "@swc/core-darwin-arm64": "npm:1.15.3" - "@swc/core-darwin-x64": "npm:1.15.3" - "@swc/core-linux-arm-gnueabihf": "npm:1.15.3" - "@swc/core-linux-arm64-gnu": "npm:1.15.3" - "@swc/core-linux-arm64-musl": "npm:1.15.3" - "@swc/core-linux-x64-gnu": "npm:1.15.3" - "@swc/core-linux-x64-musl": "npm:1.15.3" - "@swc/core-win32-arm64-msvc": "npm:1.15.3" - "@swc/core-win32-ia32-msvc": "npm:1.15.3" - "@swc/core-win32-x64-msvc": "npm:1.15.3" + "@swc/core-darwin-arm64": "npm:1.15.40" + "@swc/core-darwin-x64": "npm:1.15.40" + "@swc/core-linux-arm-gnueabihf": "npm:1.15.40" + "@swc/core-linux-arm64-gnu": "npm:1.15.40" + "@swc/core-linux-arm64-musl": "npm:1.15.40" + "@swc/core-linux-ppc64-gnu": "npm:1.15.40" + "@swc/core-linux-s390x-gnu": "npm:1.15.40" + "@swc/core-linux-x64-gnu": "npm:1.15.40" + "@swc/core-linux-x64-musl": "npm:1.15.40" + "@swc/core-win32-arm64-msvc": "npm:1.15.40" + "@swc/core-win32-ia32-msvc": "npm:1.15.40" + "@swc/core-win32-x64-msvc": "npm:1.15.40" "@swc/counter": "npm:^0.1.3" - "@swc/types": "npm:^0.1.25" + "@swc/types": "npm:^0.1.26" peerDependencies: "@swc/helpers": ">=0.5.17" dependenciesMeta: @@ -13327,6 +13074,10 @@ __metadata: optional: true "@swc/core-linux-arm64-musl": optional: true + "@swc/core-linux-ppc64-gnu": + optional: true + "@swc/core-linux-s390x-gnu": + optional: true "@swc/core-linux-x64-gnu": optional: true "@swc/core-linux-x64-musl": @@ -13340,7 +13091,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10/280330d82328818138ed64fdcf9ea9abde6b6f16eca65a9d4db27dde06a8dfffd2649f3447d2243387277513c7430fa4142cafcfd64e943d682ce6a713cb8c2d + checksum: 10/8e915694f387898f4330896970c5261bfb801c7fc21324d2a8da19f37f42f7ed15eefdbe71968164d5c41637b9566da80f7912ecc9f2120435608dbd9578a99e languageName: node linkType: hard @@ -13450,15 +13201,6 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.25": - version: 0.1.25 - resolution: "@swc/types@npm:0.1.25" - dependencies: - "@swc/counter": "npm:^0.1.3" - checksum: 10/f6741450224892d12df43e5ca7f3cc0287df644dcd672626eb0cc2a3a8e3e875f4b29eb11336f37c7240cf6e010ba59eb3a79f4fb8bee5cbd168dfc1326ff369 - languageName: node - linkType: hard - "@swc/types@npm:^0.1.26": version: 0.1.26 resolution: "@swc/types@npm:0.1.26" @@ -13486,22 +13228,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:10.4.0": - version: 10.4.0 - resolution: "@testing-library/dom@npm:10.4.0" - dependencies: - "@babel/code-frame": "npm:^7.10.4" - "@babel/runtime": "npm:^7.12.5" - "@types/aria-query": "npm:^5.0.1" - aria-query: "npm:5.3.0" - chalk: "npm:^4.1.0" - dom-accessibility-api: "npm:^0.5.9" - lz-string: "npm:^1.5.0" - pretty-format: "npm:^27.0.2" - checksum: 10/05825ee9a15b88cbdae12c137db7111c34069ed3c7a1bd03b6696cb1b37b29f6f2d2de581ebf03033e7df1ab7ebf08399310293f440a4845d95c02c0a9ecc899 - languageName: node - linkType: hard - "@testing-library/dom@npm:~10.4.1": version: 10.4.1 resolution: "@testing-library/dom@npm:10.4.1" @@ -13518,18 +13244,17 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:6.5.0": - version: 6.5.0 - resolution: "@testing-library/jest-dom@npm:6.5.0" +"@testing-library/jest-dom@npm:^6.6.3": + version: 6.9.1 + resolution: "@testing-library/jest-dom@npm:6.9.1" dependencies: "@adobe/css-tools": "npm:^4.4.0" aria-query: "npm:^5.0.0" - chalk: "npm:^3.0.0" css.escape: "npm:^1.5.1" dom-accessibility-api: "npm:^0.6.3" - lodash: "npm:^4.17.21" + picocolors: "npm:^1.1.1" redent: "npm:^3.0.0" - checksum: 10/3d2080888af5fd7306f57448beb5a23f55d965e265b5e53394fffc112dfb0678d616a5274ff0200c46c7618f293520f86fc8562eecd8bdbc0dbb3294d63ec431 + checksum: 10/409b4f519e4c68f4d31e3b0317338cc19098b9029513fca61aa2af8270086ae3956a1eaedd19bbce2d2c9e2cf9ff27a616c06556be7a26e101c0d529a0062233 languageName: node linkType: hard @@ -13567,16 +13292,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/user-event@npm:14.5.2": - version: 14.5.2 - resolution: "@testing-library/user-event@npm:14.5.2" - peerDependencies: - "@testing-library/dom": ">=7.21.4" - checksum: 10/49821459d81c6bc435d97128d6386ca24f1e4b3ba8e46cb5a96fe3643efa6e002d88c1b02b7f2ec58da593e805c59b78d7fdf0db565c1f02ba782f63ee984040 - languageName: node - linkType: hard - -"@testing-library/user-event@npm:~14.6.1": +"@testing-library/user-event@npm:^14.6.1, @testing-library/user-event@npm:~14.6.1": version: 14.6.1 resolution: "@testing-library/user-event@npm:14.6.1" peerDependencies: @@ -13854,6 +13570,16 @@ __metadata: languageName: node linkType: hard +"@types/chai@npm:^5.2.2": + version: 5.2.3 + resolution: "@types/chai@npm:5.2.3" + dependencies: + "@types/deep-eql": "npm:*" + assertion-error: "npm:^2.0.1" + checksum: 10/e79947307dc235953622e65f83d2683835212357ca261389116ab90bed369ac862ba28b146b4fed08b503ae1e1a12cb93ce783f24bb8d562950469f4320e1c7c + languageName: node + linkType: hard + "@types/chalk@npm:^2.2.4": version: 2.2.4 resolution: "@types/chalk@npm:2.2.4" @@ -14255,6 +13981,13 @@ __metadata: languageName: node linkType: hard +"@types/deep-eql@npm:*": + version: 4.0.2 + resolution: "@types/deep-eql@npm:4.0.2" + checksum: 10/249a27b0bb22f6aa28461db56afa21ec044fa0e303221a62dff81831b20c8530502175f1a49060f7099e7be06181078548ac47c668de79ff9880241968d43d0c + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.9": version: 0.0.9 resolution: "@types/doctrine@npm:0.0.9" @@ -15339,13 +15072,6 @@ __metadata: languageName: node linkType: hard -"@types/uuid@npm:^9.0.1": - version: 9.0.8 - resolution: "@types/uuid@npm:9.0.8" - checksum: 10/b8c60b7ba8250356b5088302583d1704a4e1a13558d143c549c408bf8920535602ffc12394ede77f8a8083511b023704bc66d1345792714002bfa261b17c5275 - languageName: node - linkType: hard - "@types/wait-on@npm:^5.2.0": version: 5.3.4 resolution: "@types/wait-on@npm:5.3.4" @@ -15758,65 +15484,64 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/expect@npm:2.0.5" - dependencies: - "@vitest/spy": "npm:2.0.5" - "@vitest/utils": "npm:2.0.5" - chai: "npm:^5.1.1" - tinyrainbow: "npm:^1.2.0" - checksum: 10/ca9a218f50254b2259fd16166b2d8c9ccc8ee2cc068905e6b3d6281da10967b1590cc7d34b5fa9d429297f97e740450233745583b4cc12272ff11705faf70a37 - languageName: node - linkType: hard - -"@vitest/pretty-format@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/pretty-format@npm:2.0.5" +"@vitest/expect@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/expect@npm:3.2.4" dependencies: - tinyrainbow: "npm:^1.2.0" - checksum: 10/70bf452dd0b8525e658795125b3f11110bd6baadfaa38c5bb91ca763bded35ec6dc80e27964ad4e91b91be6544d35e18ea7748c1997693988f975a7283c3e9a0 + "@types/chai": "npm:^5.2.2" + "@vitest/spy": "npm:3.2.4" + "@vitest/utils": "npm:3.2.4" + chai: "npm:^5.2.0" + tinyrainbow: "npm:^2.0.0" + checksum: 10/dc69ce886c13714dfbbff78f2d2cb7eb536017e82301a73c42d573a9e9d2bf91005ac7abd9b977adf0a3bd431209f45a8ac2418029b68b0a377e092607c843ce languageName: node linkType: hard -"@vitest/pretty-format@npm:2.1.4": - version: 2.1.4 - resolution: "@vitest/pretty-format@npm:2.1.4" +"@vitest/mocker@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/mocker@npm:3.2.4" dependencies: - tinyrainbow: "npm:^1.2.0" - checksum: 10/434e6a7903f72a3796f26516ad728aca92724909e18fd3f2cd4b9b8b0ae2cc7b4cd86e92ab9f2ac7bc005c7a7ef0bcb9d768c0264b4b0625f1f0748cc615f1f6 + "@vitest/spy": "npm:3.2.4" + estree-walker: "npm:^3.0.3" + magic-string: "npm:^0.30.17" + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + checksum: 10/5e92431b6ed9fc1679060e4caef3e4623f4750542a5d7cd944774f8217c4d231e273202e8aea00bab33260a5a9222ecb7005d80da0348c3c829bd37d123071a8 languageName: node linkType: hard -"@vitest/spy@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/spy@npm:2.0.5" +"@vitest/pretty-format@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/pretty-format@npm:3.2.4" dependencies: - tinyspy: "npm:^3.0.0" - checksum: 10/ed19f4c3bb4d3853241e8070979615138e24403ce4c137fa48c903b3af2c8b3ada2cc26aca9c1aa323bb314a457a8130a29acbb18dafd4e42737deefb2abf1ca + tinyrainbow: "npm:^2.0.0" + checksum: 10/8dd30cbf956e01fbab042fe651fb5175d9f0cd00b7b569a46cd98df89c4fec47dab12916201ad6e09a4f25f2a2ec8927a4bfdc61118593097f759c90b18a51d4 languageName: node linkType: hard -"@vitest/utils@npm:2.0.5": - version: 2.0.5 - resolution: "@vitest/utils@npm:2.0.5" +"@vitest/spy@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/spy@npm:3.2.4" dependencies: - "@vitest/pretty-format": "npm:2.0.5" - estree-walker: "npm:^3.0.3" - loupe: "npm:^3.1.1" - tinyrainbow: "npm:^1.2.0" - checksum: 10/d631d56d29c33bc8de631166b2b6691c470187a345469dfef7048befe6027e1c6ff9552f2ee11c8a247522c325c4a64bfcc73f8f0f0c525da39cb9f190f119f8 + tinyspy: "npm:^4.0.3" + checksum: 10/7d38c299f42a8c7e5e41652b203af98ca54e63df69c3b072d0e401d5a57fbbba3e39d8538ac1b3022c26718a6388d0bcc222bc2f07faab75942543b9247c007d languageName: node linkType: hard -"@vitest/utils@npm:^2.1.1": - version: 2.1.4 - resolution: "@vitest/utils@npm:2.1.4" +"@vitest/utils@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/utils@npm:3.2.4" dependencies: - "@vitest/pretty-format": "npm:2.1.4" - loupe: "npm:^3.1.2" - tinyrainbow: "npm:^1.2.0" - checksum: 10/aaaf5310943abca0f0080d9638e67838f7e519d5670ec32e61184915efdfa5ec61d9b495cad6cb7dc492e8caeed14593e78dda77c8ea59c1671a231661f57142 + "@vitest/pretty-format": "npm:3.2.4" + loupe: "npm:^3.1.4" + tinyrainbow: "npm:^2.0.0" + checksum: 10/7f12ef63bd8ee13957744d1f336b0405f164ade4358bf9dfa531f75bbb58ffac02bf61aba65724311ddbc50b12ba54853a169e59c6b837c16086173b9a480710 languageName: node linkType: hard @@ -18232,7 +17957,7 @@ __metadata: languageName: node linkType: hard -"chai@npm:>1.9.0, chai@npm:^5.1.1": +"chai@npm:>1.9.0": version: 5.1.1 resolution: "chai@npm:5.1.1" dependencies: @@ -18260,6 +17985,19 @@ __metadata: languageName: node linkType: hard +"chai@npm:^5.2.0": + version: 5.3.3 + resolution: "chai@npm:5.3.3" + dependencies: + assertion-error: "npm:^2.0.1" + check-error: "npm:^2.1.1" + deep-eql: "npm:^5.0.1" + loupe: "npm:^3.1.0" + pathval: "npm:^2.0.0" + checksum: 10/0d0ef63106083b05c7ba510697cd9991a02b8df5984a7d010ab4af10205c7a1f27d1c06bfa4679540894295ac4dcc22aa2a281e2e4cfe5133c1db379626689a2 + languageName: node + linkType: hard + "chalk@npm:*, chalk@npm:^5.2.0": version: 5.4.1 resolution: "chalk@npm:5.4.1" @@ -18288,16 +18026,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^3.0.0": - version: 3.0.0 - resolution: "chalk@npm:3.0.0" - dependencies: - ansi-styles: "npm:^4.1.0" - supports-color: "npm:^7.1.0" - checksum: 10/37f90b31fd655fb49c2bd8e2a68aebefddd64522655d001ef417e6f955def0ed9110a867ffc878a533f2dafea5f2032433a37c8a7614969baa7f8a1cd424ddfc - languageName: node - linkType: hard - "change-case@npm:^4.1.2": version: 4.1.2 resolution: "change-case@npm:4.1.2" @@ -20267,7 +19995,7 @@ __metadata: languageName: node linkType: hard -"dequal@npm:^2.0.2, dequal@npm:^2.0.3": +"dequal@npm:^2.0.3": version: 2.0.3 resolution: "dequal@npm:2.0.3" checksum: 10/6ff05a7561f33603df87c45e389c9ac0a95e3c056be3da1a0c4702149e3a7f6fe5ffbb294478687ba51a9e95f3a60e8b6b9005993acd79c292c7d15f71964b6b @@ -21345,36 +21073,36 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.27.0, esbuild@npm:~0.27.0, esbuild@npm:~0.27.3": - version: 0.27.7 - resolution: "esbuild@npm:0.27.7" +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0, esbuild@npm:~0.25.10": + version: 0.25.12 + resolution: "esbuild@npm:0.25.12" dependencies: - "@esbuild/aix-ppc64": "npm:0.27.7" - "@esbuild/android-arm": "npm:0.27.7" - "@esbuild/android-arm64": "npm:0.27.7" - "@esbuild/android-x64": "npm:0.27.7" - "@esbuild/darwin-arm64": "npm:0.27.7" - "@esbuild/darwin-x64": "npm:0.27.7" - "@esbuild/freebsd-arm64": "npm:0.27.7" - "@esbuild/freebsd-x64": "npm:0.27.7" - "@esbuild/linux-arm": "npm:0.27.7" - "@esbuild/linux-arm64": "npm:0.27.7" - "@esbuild/linux-ia32": "npm:0.27.7" - "@esbuild/linux-loong64": "npm:0.27.7" - "@esbuild/linux-mips64el": "npm:0.27.7" - "@esbuild/linux-ppc64": "npm:0.27.7" - "@esbuild/linux-riscv64": "npm:0.27.7" - "@esbuild/linux-s390x": "npm:0.27.7" - "@esbuild/linux-x64": "npm:0.27.7" - "@esbuild/netbsd-arm64": "npm:0.27.7" - "@esbuild/netbsd-x64": "npm:0.27.7" - "@esbuild/openbsd-arm64": "npm:0.27.7" - "@esbuild/openbsd-x64": "npm:0.27.7" - "@esbuild/openharmony-arm64": "npm:0.27.7" - "@esbuild/sunos-x64": "npm:0.27.7" - "@esbuild/win32-arm64": "npm:0.27.7" - "@esbuild/win32-ia32": "npm:0.27.7" - "@esbuild/win32-x64": "npm:0.27.7" + "@esbuild/aix-ppc64": "npm:0.25.12" + "@esbuild/android-arm": "npm:0.25.12" + "@esbuild/android-arm64": "npm:0.25.12" + "@esbuild/android-x64": "npm:0.25.12" + "@esbuild/darwin-arm64": "npm:0.25.12" + "@esbuild/darwin-x64": "npm:0.25.12" + "@esbuild/freebsd-arm64": "npm:0.25.12" + "@esbuild/freebsd-x64": "npm:0.25.12" + "@esbuild/linux-arm": "npm:0.25.12" + "@esbuild/linux-arm64": "npm:0.25.12" + "@esbuild/linux-ia32": "npm:0.25.12" + "@esbuild/linux-loong64": "npm:0.25.12" + "@esbuild/linux-mips64el": "npm:0.25.12" + "@esbuild/linux-ppc64": "npm:0.25.12" + "@esbuild/linux-riscv64": "npm:0.25.12" + "@esbuild/linux-s390x": "npm:0.25.12" + "@esbuild/linux-x64": "npm:0.25.12" + "@esbuild/netbsd-arm64": "npm:0.25.12" + "@esbuild/netbsd-x64": "npm:0.25.12" + "@esbuild/openbsd-arm64": "npm:0.25.12" + "@esbuild/openbsd-x64": "npm:0.25.12" + "@esbuild/openharmony-arm64": "npm:0.25.12" + "@esbuild/sunos-x64": "npm:0.25.12" + "@esbuild/win32-arm64": "npm:0.25.12" + "@esbuild/win32-ia32": "npm:0.25.12" + "@esbuild/win32-x64": "npm:0.25.12" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -21430,40 +21158,40 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10/262b16c4a33cb70e9f054759a7ce420541649315eef7b064172c795021ccce322e56c3f5fd52e8842873f1c23745f3ab62311a24860950bd5406ba77b36b8529 + checksum: 10/bc9c03d64e96a0632a926662c9d29decafb13a40e5c91790f632f02939bc568edc9abe0ee5d8055085a2819a00139eb12e223cfb8126dbf89bbc569f125d91fd languageName: node linkType: hard -"esbuild@npm:~0.25.10": - version: 0.25.12 - resolution: "esbuild@npm:0.25.12" +"esbuild@npm:~0.27.0, esbuild@npm:~0.27.3": + version: 0.27.7 + resolution: "esbuild@npm:0.27.7" dependencies: - "@esbuild/aix-ppc64": "npm:0.25.12" - "@esbuild/android-arm": "npm:0.25.12" - "@esbuild/android-arm64": "npm:0.25.12" - "@esbuild/android-x64": "npm:0.25.12" - "@esbuild/darwin-arm64": "npm:0.25.12" - "@esbuild/darwin-x64": "npm:0.25.12" - "@esbuild/freebsd-arm64": "npm:0.25.12" - "@esbuild/freebsd-x64": "npm:0.25.12" - "@esbuild/linux-arm": "npm:0.25.12" - "@esbuild/linux-arm64": "npm:0.25.12" - "@esbuild/linux-ia32": "npm:0.25.12" - "@esbuild/linux-loong64": "npm:0.25.12" - "@esbuild/linux-mips64el": "npm:0.25.12" - "@esbuild/linux-ppc64": "npm:0.25.12" - "@esbuild/linux-riscv64": "npm:0.25.12" - "@esbuild/linux-s390x": "npm:0.25.12" - "@esbuild/linux-x64": "npm:0.25.12" - "@esbuild/netbsd-arm64": "npm:0.25.12" - "@esbuild/netbsd-x64": "npm:0.25.12" - "@esbuild/openbsd-arm64": "npm:0.25.12" - "@esbuild/openbsd-x64": "npm:0.25.12" - "@esbuild/openharmony-arm64": "npm:0.25.12" - "@esbuild/sunos-x64": "npm:0.25.12" - "@esbuild/win32-arm64": "npm:0.25.12" - "@esbuild/win32-ia32": "npm:0.25.12" - "@esbuild/win32-x64": "npm:0.25.12" + "@esbuild/aix-ppc64": "npm:0.27.7" + "@esbuild/android-arm": "npm:0.27.7" + "@esbuild/android-arm64": "npm:0.27.7" + "@esbuild/android-x64": "npm:0.27.7" + "@esbuild/darwin-arm64": "npm:0.27.7" + "@esbuild/darwin-x64": "npm:0.27.7" + "@esbuild/freebsd-arm64": "npm:0.27.7" + "@esbuild/freebsd-x64": "npm:0.27.7" + "@esbuild/linux-arm": "npm:0.27.7" + "@esbuild/linux-arm64": "npm:0.27.7" + "@esbuild/linux-ia32": "npm:0.27.7" + "@esbuild/linux-loong64": "npm:0.27.7" + "@esbuild/linux-mips64el": "npm:0.27.7" + "@esbuild/linux-ppc64": "npm:0.27.7" + "@esbuild/linux-riscv64": "npm:0.27.7" + "@esbuild/linux-s390x": "npm:0.27.7" + "@esbuild/linux-x64": "npm:0.27.7" + "@esbuild/netbsd-arm64": "npm:0.27.7" + "@esbuild/netbsd-x64": "npm:0.27.7" + "@esbuild/openbsd-arm64": "npm:0.27.7" + "@esbuild/openbsd-x64": "npm:0.27.7" + "@esbuild/openharmony-arm64": "npm:0.27.7" + "@esbuild/sunos-x64": "npm:0.27.7" + "@esbuild/win32-arm64": "npm:0.27.7" + "@esbuild/win32-ia32": "npm:0.27.7" + "@esbuild/win32-x64": "npm:0.27.7" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -21519,7 +21247,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10/bc9c03d64e96a0632a926662c9d29decafb13a40e5c91790f632f02939bc568edc9abe0ee5d8055085a2819a00139eb12e223cfb8126dbf89bbc569f125d91fd + checksum: 10/262b16c4a33cb70e9f054759a7ce420541649315eef7b064172c795021ccce322e56c3f5fd52e8842873f1c23745f3ab62311a24860950bd5406ba77b36b8529 languageName: node linkType: hard @@ -22773,6 +22501,17 @@ __metadata: languageName: node linkType: hard +"find-up@npm:^7.0.0": + version: 7.0.0 + resolution: "find-up@npm:7.0.0" + dependencies: + locate-path: "npm:^7.2.0" + path-exists: "npm:^5.0.0" + unicorn-magic: "npm:^0.1.0" + checksum: 10/7e6b08fbc05a10677e25e74bb0a020054a86b31d1806c5e6a9e32e75472bbf177210bc16e5f97453be8bda7ae2e3d97669dbb2901f8c30b39ce53929cbea6746 + languageName: node + linkType: hard + "findup-sync@npm:^5.0.0": version: 5.0.0 resolution: "findup-sync@npm:5.0.0" @@ -26626,13 +26365,6 @@ __metadata: languageName: node linkType: hard -"jsdoc-type-pratt-parser@npm:^4.0.0": - version: 4.1.0 - resolution: "jsdoc-type-pratt-parser@npm:4.1.0" - checksum: 10/30d88f95f6cbb4a1aa6d4b0d0ae46eb1096e606235ecaf9bab7a3ed5da860516b5d1cd967182765002f292c627526db918f3e56d34637bcf810e6ef84d403f3f - languageName: node - linkType: hard - "jsdom-global@npm:^3.0.2": version: 3.0.2 resolution: "jsdom-global@npm:3.0.2" @@ -27404,6 +27136,15 @@ __metadata: languageName: node linkType: hard +"locate-path@npm:^7.2.0": + version: 7.2.0 + resolution: "locate-path@npm:7.2.0" + dependencies: + p-locate: "npm:^6.0.0" + checksum: 10/1c6d269d4efec555937081be964e8a9b4a136319c79ca1d45ac6382212a8466113c75bd89e44521ca8ecd1c47fb08523b56eee5c0712bc7d14fec5f729deeb42 + languageName: node + linkType: hard + "lodash.camelcase@npm:^4.3.0": version: 4.3.0 resolution: "lodash.camelcase@npm:4.3.0" @@ -27627,13 +27368,20 @@ __metadata: languageName: node linkType: hard -"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2": +"loupe@npm:^3.1.0": version: 3.1.2 resolution: "loupe@npm:3.1.2" checksum: 10/8f5734e53fb64cd914aa7d986e01b6d4c2e3c6c56dcbd5428d71c2703f0ab46b5ab9f9eeaaf2b485e8a1c43f865bdd16ec08ae1a661c8f55acdbd9f4d59c607a languageName: node linkType: hard +"loupe@npm:^3.1.4": + version: 3.2.1 + resolution: "loupe@npm:3.2.1" + checksum: 10/a4d78ec758aaa04e0e35d5cd1c15e970beb9cdbfd3d0f34f98b9bcda489f896a7190b3b6cc40b7a6dcb8e97e82e96eafaae10096aaa469804acdba6f7c2bde5f + languageName: node + linkType: hard + "lower-case@npm:^2.0.2": version: 2.0.2 resolution: "lower-case@npm:2.0.2" @@ -29836,6 +29584,15 @@ __metadata: languageName: node linkType: hard +"p-locate@npm:^6.0.0": + version: 6.0.0 + resolution: "p-locate@npm:6.0.0" + dependencies: + p-limit: "npm:^4.0.0" + checksum: 10/2bfe5234efa5e7a4e74b30a5479a193fdd9236f8f6b4d2f3f69e3d286d9a7d7ab0c118a2a50142efcf4e41625def635bd9332d6cbf9cc65d85eb0718c579ab38 + languageName: node + linkType: hard + "p-map@npm:^2.0.0": version: 2.1.0 resolution: "p-map@npm:2.1.0" @@ -30147,6 +29904,13 @@ __metadata: languageName: node linkType: hard +"path-exists@npm:^5.0.0": + version: 5.0.0 + resolution: "path-exists@npm:5.0.0" + checksum: 10/8ca842868cab09423994596eb2c5ec2a971c17d1a3cb36dbf060592c730c725cd524b9067d7d2a1e031fef9ba7bd2ac6dc5ec9fb92aa693265f7be3987045254 + languageName: node + linkType: hard + "path-expression-matcher@npm:^1.1.3, path-expression-matcher@npm:^1.4.0, path-expression-matcher@npm:^1.5.0": version: 1.5.0 resolution: "path-expression-matcher@npm:1.5.0" @@ -30564,15 +30328,6 @@ __metadata: languageName: node linkType: hard -"polished@npm:^4.2.2": - version: 4.2.2 - resolution: "polished@npm:4.2.2" - dependencies: - "@babel/runtime": "npm:^7.17.8" - checksum: 10/da71b15c1e1d98b7f55e143bbf9ebb1b0934286c74c333522e571e52f89e42a61d7d44c5b4f941dc927355c7ae09780877aeb8f23707376fa9f006ab861e758b - languageName: node - linkType: hard - "polka@npm:^0.5.2": version: 0.5.2 resolution: "polka@npm:0.5.2" @@ -32177,9 +31932,9 @@ __metadata: languageName: node linkType: hard -"react-docgen@npm:^7.0.0": - version: 7.0.3 - resolution: "react-docgen@npm:7.0.3" +"react-docgen@npm:^7.1.1": + version: 7.1.1 + resolution: "react-docgen@npm:7.1.1" dependencies: "@babel/core": "npm:^7.18.9" "@babel/traverse": "npm:^7.18.9" @@ -32191,7 +31946,7 @@ __metadata: doctrine: "npm:^3.0.0" resolve: "npm:^1.22.1" strip-indent: "npm:^4.0.0" - checksum: 10/53eaed76cceb55606584c6ab603f04ec78c066cfb9ed983e1f7b388a75bfb8c2fc9c6b7ab299bac311b3daeca95adb8076b58ca96b41907b33c518299268831f + checksum: 10/501e5fa0d00e32ee27559f44462a34e9531018ccb46c51efbe60b98a4c077f43dbe8999da5bb91d2ab45a83a34099436a3b725fdabd3f218dbb4493c0b1c9f95 languageName: node linkType: hard @@ -34593,37 +34348,43 @@ __metadata: languageName: node linkType: hard -"storybook-dark-mode@npm:^4.0.2": - version: 4.0.2 - resolution: "storybook-dark-mode@npm:4.0.2" +"storybook-dark-mode@npm:^5.0.0": + version: 5.0.0 + resolution: "storybook-dark-mode@npm:5.0.0" dependencies: - "@storybook/components": "npm:^8.0.0" - "@storybook/core-events": "npm:^8.0.0" - "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.5" - "@storybook/manager-api": "npm:^8.0.0" - "@storybook/theming": "npm:^8.0.0" + "@storybook/icons": "npm:^2.0.1" fast-deep-equal: "npm:^3.1.3" memoizerific: "npm:^1.11.3" - checksum: 10/c9ef7bc6734df7486ff763c9da3c69505269eaf5fd7b5b489553f023b363ea892862241e6d701ad647ca5d1e64fd9a2646b8985c7ea8ac97a3bca87891db6fe5 + peerDependencies: + storybook: ^10.0.0 + checksum: 10/ae2940c92dc81327b048ff4f0dc7953c60d0da1f90e18a37baf41eefcfc1942581e942894334ced1bf01d41fda3a999afc01d95f8fbfe08c4e42f0c03d2ccff4 languageName: node linkType: hard -"storybook@npm:^8.6.18": - version: 8.6.18 - resolution: "storybook@npm:8.6.18" +"storybook@npm:^9.1.13": + version: 9.1.20 + resolution: "storybook@npm:9.1.20" dependencies: - "@storybook/core": "npm:8.6.18" + "@storybook/global": "npm:^5.0.0" + "@testing-library/jest-dom": "npm:^6.6.3" + "@testing-library/user-event": "npm:^14.6.1" + "@vitest/expect": "npm:3.2.4" + "@vitest/mocker": "npm:3.2.4" + "@vitest/spy": "npm:3.2.4" + better-opn: "npm:^3.0.2" + esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" + esbuild-register: "npm:^3.5.0" + recast: "npm:^0.23.5" + semver: "npm:^7.6.2" + ws: "npm:^8.18.0" peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: prettier: optional: true bin: - getstorybook: ./bin/index.cjs - sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 10/157c26d611e849d1551940e9d07416a978bf9f8f38bedd0caa810f72c03f077a38f16c5bb186a01a5722bbe5422302a72b0cbd23d651dd02407060b96d053846 + checksum: 10/e09f29cd5fd0a635df10298b650143e4145feb63e8b217b71a20eae6162112decf3a3715655aec5fa57c9ed08c86886944c9b93551f041b9b60e151b343d1f7c languageName: node linkType: hard @@ -35635,7 +35396,7 @@ __metadata: languageName: node linkType: hard -"tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3": +"tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.3": version: 1.3.3 resolution: "tiny-invariant@npm:1.3.3" checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe @@ -35676,17 +35437,17 @@ __metadata: languageName: node linkType: hard -"tinyrainbow@npm:^1.2.0": - version: 1.2.0 - resolution: "tinyrainbow@npm:1.2.0" - checksum: 10/2924444db6804355e5ba2b6e586c7f77329d93abdd7257a069a0f4530dff9f16de484e80479094e3f39273462541b003a65ee3a6afc2d12555aa745132deba5d +"tinyrainbow@npm:^2.0.0": + version: 2.0.0 + resolution: "tinyrainbow@npm:2.0.0" + checksum: 10/94d4e16246972614a5601eeb169ba94f1d49752426312d3cf8cc4f2cc663a2e354ffc653aa4de4eebccbf9eeebdd0caef52d1150271fdfde65d7ae7f3dcb9eb5 languageName: node linkType: hard -"tinyspy@npm:^3.0.0": - version: 3.0.2 - resolution: "tinyspy@npm:3.0.2" - checksum: 10/5db671b2ff5cd309de650c8c4761ca945459d7204afb1776db9a04fb4efa28a75f08517a8620c01ee32a577748802231ad92f7d5b194dc003ee7f987a2a06337 +"tinyspy@npm:^4.0.3": + version: 4.0.4 + resolution: "tinyspy@npm:4.0.4" + checksum: 10/858a99e3ded2fba8fe7c243099d9e58e926d6525af03d19cdf86c1a9a30398161fb830b4f77890d266bcc1c69df08fa6f4baf29d089385e4cdaa98d7b6296e7c languageName: node linkType: hard @@ -35904,7 +35665,7 @@ __metadata: languageName: node linkType: hard -"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0": +"ts-dedent@npm:^2.0.0": version: 2.2.0 resolution: "ts-dedent@npm:2.2.0" checksum: 10/93ed8f7878b6d5ed3c08d99b740010eede6bccfe64bce61c5a4da06a2c17d6ddbb80a8c49c2d15251de7594a4f93ffa21dd10e7be75ef66a4dc9951b4a94e2af @@ -36565,6 +36326,13 @@ __metadata: languageName: node linkType: hard +"unicorn-magic@npm:^0.1.0": + version: 0.1.0 + resolution: "unicorn-magic@npm:0.1.0" + checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f + languageName: node + linkType: hard + "unified@npm:9.2.2": version: 9.2.2 resolution: "unified@npm:9.2.2"