snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

packages/livechat/.storybook/helpers.tsx

@@ -0,0 +1,85 @@
+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';
+import tassoAvatar from './assets/tasso.jpg';
+import type { ScreenContextValue } from '../src/components/Screen/ScreenProvider';
+import { ScreenContext } from '../src/components/Screen/ScreenProvider';
+import store, { StoreContext, type StoreState } from '../src/store';
+
+export const screenDecorator: Decorator = (storyFn) => (
+	<div style={{ display: 'flex', width: 365, height: 500 }}>
+		<ScreenContext.Provider value={screenProps()}>{storyFn()}</ScreenContext.Provider>
+	</div>
+);
+
+export const screenProps = (): ScreenContextValue => ({
+	hideWatermark: false,
+	livechatLogo: undefined,
+	notificationsEnabled: true,
+	minimized: false,
+	expanded: false,
+	windowed: false,
+	sound: undefined,
+	alerts: [],
+	modal: null,
+	onEnableNotifications: action('enableNotifications'),
+	onDisableNotifications: action('disableNotifications'),
+	onMinimize: action('minimize'),
+	onRestore: action('restore'),
+	onOpenWindow: action('openWindow'),
+	onDismissAlert: action('dismissAlert'),
+	dismissNotification: action('dismissNotification'),
+	theme: {
+		color: '',
+		fontColor: '',
+		iconColor: '',
+		hideAgentAvatar: false,
+		hideGuestAvatar: true,
+		hideExpandChat: false,
+	},
+});
+
+// Feeds arbitrary store data from a story's args into StoreContext, so container components that
+// read from `useStore()` render against it. Args are treated as a partial store state override.
+export const storeDecorator: Decorator<Partial<StoreState>> = (storyFn, { args }) => (
+	<StoreContext.Provider
+		value={{
+			...store.state,
+			...args,
+			dispatch: store.setState.bind(store),
+			on: store.on.bind(store),
+			off: store.off.bind(store),
+		}}
+	>
+		{storyFn()}
+	</StoreContext.Provider>
+);
+
+export const avatarResolver = (username: string) =>
+	({
+		'guilherme.gazzo': gazzoAvatar,
+		'martin.schoeler': martinAvatar,
+		'tasso.evangelista': tassoAvatar,
+	})[username];
+
+export const attachmentResolver = (url: string) => url;
+
+const createRandom = (s: number) => () => {
+	s = Math.sin(s) * 10000;
+	return s - Math.floor(s);
+};
+const loremIpsumRandom = createRandom(42);
+export const loremIpsum = (options: Parameters<typeof originalLoremIpsum>[0]) =>
+	originalLoremIpsum({ random: loremIpsumRandom, ...options });
+
+export { gazzoAvatar, martinAvatar, tassoAvatar };
+
+export { default as sampleAudio } from './assets/sample-audio.mp3';
+export { default as sampleImage } from './assets/sample-image.jpg';
+export { default as sampleVideo } from './assets/sample-video.mp4';
+export { default as accessoryImage } from './assets/accessoryImage.png';
+export { default as imageBlock } from './assets/imageBlock.png';
+export { default as beepAudio } from './assets/beep.mp3';

packages/livechat/.storybook/main.ts

@@ -0,0 +1,127 @@
+import { dirname, join } from 'path';
+
+import type { StorybookConfig } from '@storybook/preact-webpack5';
+import webpack, { type RuleSetRule } from 'webpack';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/{*.story,story,*.stories,stories}.tsx'],
+
+	addons: [
+		'@storybook/addon-docs',
+		{
+			name: '@storybook/addon-styling-webpack',
+			options: {
+				rules: [
+					{
+						test: /\.css$/,
+						sideEffects: true,
+						use: [
+							'style-loader',
+							{
+								loader: 'css-loader',
+								options: {
+									importLoaders: 1,
+									sourceMap: true,
+								},
+							},
+							{
+								loader: 'postcss-loader',
+								options: {
+									implementation: 'postcss',
+								},
+							},
+						],
+					},
+					{
+						test: /\.scss$/,
+						sideEffects: true,
+						use: [
+							'style-loader',
+							{
+								loader: 'css-loader',
+								options: {
+									modules: {
+										localIdentName: '[local]__[hash:base64:5]',
+									},
+									importLoaders: 1,
+									sourceMap: true,
+								},
+							},
+							{
+								loader: 'postcss-loader',
+								options: {
+									implementation: 'postcss',
+								},
+							},
+							{
+								loader: 'sass-loader',
+								options: {
+									implementation: 'sass',
+									sourceMap: true,
+									sassOptions: {},
+								},
+							},
+						],
+					},
+				],
+			},
+		},
+		'@storybook/addon-webpack5-compiler-swc',
+		'@rocket.chat/storybook-dark-mode',
+	],
+
+	framework: {
+		name: '@storybook/preact-webpack5',
+		options: {},
+	},
+
+	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'),
+			},
+		};
+
+		const isRuleSetRule = (rule: any): rule is RuleSetRule => typeof rule === 'object';
+
+		config.module?.rules?.filter(isRuleSetRule).forEach((rule) => {
+			if (String(rule.test) === String(/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/)) {
+				rule.test = /\.(ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+			}
+		});
+
+		config.module?.rules?.push({
+			test: /\.svg$/,
+			exclude: /logo\.svg/,
+			use: ['desvg-loader/preact', 'svg-loader'],
+		});
+
+		config.module?.rules?.push({
+			test: /logo\.svg(\?.*)?$/,
+			type: 'asset/resource',
+			generator: { filename: 'static/media/[path][name][ext]' },
+		});
+
+		// webpack 5 doesn't handle the `node:` scheme, so `node:stream` (pulled in by the
+		// preact `react-dom/server` shim) bypasses the `stream: false` resolve fallback and
+		// throws. Strip the prefix so those specifiers hit the existing node-core fallbacks.
+		config.plugins?.push(
+			new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
+				resource.request = resource.request.replace(/^node:/, '');
+			}),
+		);
+
+		return config;
+	},
+};
+
+export default config;

packages/livechat/.storybook/mocks/uiKit.ts

@@ -0,0 +1,24 @@
+import { action } from 'storybook/actions';
+
+export const UIKitInteractionType = {
+	MODAL_OPEN: 'modal.open',
+	MODAL_CLOSE: 'modal.close',
+	MODAL_UPDATE: 'modal.update',
+	ERRORS: 'errors',
+};
+
+export const UIKitIncomingInteractionType = {
+	BLOCK: 'blockAction',
+	VIEW_SUBMIT: 'viewSubmit',
+	VIEW_CLOSED: 'viewClosed',
+};
+
+export const UIKitIncomingInteractionContainerType = {
+	MESSAGE: 'message',
+	VIEW: 'view',
+};
+
+export const triggerAction = async (payload: unknown) => {
+	await new Promise((resolve) => setTimeout(resolve, 1000));
+	action('dispatchAction')(payload);
+};

packages/livechat/.storybook/preview.tsx

@@ -0,0 +1,12 @@
+import type { Preview } from '@storybook/preact';
+
+import 'emoji-mart/css/emoji-mart.css';
+import '../src/styles/index.scss';
+
+const preview: Preview = {
+	parameters: {
+		layout: 'fullscreen',
+	},
+};
+
+export default preview;