chore: Add darkMode configuration to ui-client storybook

packages/ui-client/.storybook/DocsContainer.tsx

@@ -0,0 +1,21 @@
+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<typeof BaseContainer>) => {
+	const [isDark, setDark] = useState(false);
+
+	useEffect(() => {
+		channel.on(DARK_MODE_EVENT_NAME, setDark);
+		return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+	}, [setDark]);
+
+	return <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />;
+};
+
+export default DocsContainer;

packages/ui-client/.storybook/logo.svg.d.ts

@@ -0,0 +1,3 @@
+declare const path: string;
+
+export = path;

packages/ui-client/.storybook/main.ts

@@ -5,7 +5,9 @@ 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-dark-mode'),
 		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
 		getAbsolutePath('@storybook/addon-styling-webpack'),
 	],

packages/ui-client/.storybook/preview.tsx

@@ -1,28 +1,61 @@
+import { PaletteStyleTag } from '@rocket.chat/fuselage';
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import type { Decorator, Parameters } from '@storybook/react';
+import { themes } from '@storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
 
-import '../../../apps/meteor/app/theme/client/main.css';
-import 'highlight.js/styles/github.css';
+import manifest from '../package.json';
+import DocsContainer from './DocsContainer';
+import logo from './logo.svg';
+import '@rocket.chat/fuselage/dist/fuselage.css';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
 export const parameters: Parameters = {
-	controls: {
-		matchers: {
-			color: /(background|color)$/i,
-			date: /Date$/,
+	backgrounds: {
+		grid: {
+			cellSize: 4,
+			cellAmount: 4,
+			opacity: 0.5,
+		},
+	},
+	options: {
+		storySort: {
+			method: 'alphabetical',
+		},
+	},
+	layout: 'fullscreen',
+	docs: {
+		container: DocsContainer,
+	},
+	darkMode: {
+		dark: {
+			...themes.dark,
+			appBg: surface.surface.dark.sidebar,
+			appContentBg: surface.surface.dark.light,
+			appPreviewBg: 'transparent',
+			barBg: surface.surface.dark.light,
+			brandTitle: manifest.name,
+			brandImage: logo,
+		},
+		light: {
+			...themes.normal,
+			appPreviewBg: 'transparent',
+			brandTitle: manifest.name,
+			brandImage: logo,
 		},
 	},
 };
 
 export const decorators: Decorator[] = [
-	(Story) => (
-		<div>
-			<style>{`
-				body {
-					background-color: white;
-				}
-			`}</style>
-			<Story />
-		</div>
-	),
+	(Story) => {
+		const dark = useDarkMode();
+
+		return (
+			<>
+				<PaletteStyleTag theme={dark ? 'dark' : 'light'} />
+				<Story />
+			</>
+		);
+	},
 ];
 export const tags = ['autodocs'];

packages/ui-client/package.json

@@ -28,6 +28,7 @@
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/ui-avatar": "workspace:~",
 		"@rocket.chat/ui-contexts": "workspace:~",
+		"@storybook/addon-a11y": "^8.6.4",
 		"@storybook/addon-actions": "^8.6.4",
 		"@storybook/addon-docs": "^8.6.4",
 		"@storybook/addon-essentials": "^8.6.4",
@@ -53,6 +54,7 @@
 		"react-dom": "~18.3.1",
 		"react-hook-form": "~7.45.4",
 		"storybook": "^8.6.4",
+		"storybook-dark-mode": "^4.0.2",
 		"typescript": "~5.7.2"
 	},
 	"peerDependencies": {

yarn.lock

@@ -9775,6 +9775,7 @@ __metadata:
     "@rocket.chat/mock-providers": "workspace:^"
     "@rocket.chat/ui-avatar": "workspace:~"
     "@rocket.chat/ui-contexts": "workspace:~"
+    "@storybook/addon-a11y": "npm:^8.6.4"
     "@storybook/addon-actions": "npm:^8.6.4"
     "@storybook/addon-docs": "npm:^8.6.4"
     "@storybook/addon-essentials": "npm:^8.6.4"
@@ -9801,6 +9802,7 @@ __metadata:
     react-dom: "npm:~18.3.1"
     react-hook-form: "npm:~7.45.4"
     storybook: "npm:^8.6.4"
+    storybook-dark-mode: "npm:^4.0.2"
     typescript: "npm:~5.7.2"
   peerDependencies:
     "@react-aria/toolbar": "*"