From b63d96f099ff221fff1dcaf1a24aac7e88f249a1 Mon Sep 17 00:00:00 2001
From: Guillaume NICOLAS <guin56@gmail.com>
Date: Thu, 27 Jul 2023 14:25:09 +0200
Subject: [PATCH] simplify code

---
 packages/storybook/.storybook/preview.js      | 22 +++++++-----
 .../.storybook/utils/ThemeSwitcher.hook.ts    | 36 -------------------
 .../.storybook-templates/preview.js           | 15 +-------
 3 files changed, 15 insertions(+), 58 deletions(-)
 delete mode 100644 packages/storybook/.storybook/utils/ThemeSwitcher.hook.ts

diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 94dd111f5e1..3dfdb7aed10 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -2,11 +2,9 @@ import React from 'react';
 
 import prettier from 'prettier/standalone';
 import prettierBabel from 'prettier/parser-babel';
-import { addons } from '@storybook/addons';
 
 import { DocsContainer } from '@storybook/blocks';
 
-import { SET_STORIES } from '@storybook/core-events';
 import '@talend/storybook-docs/dist/globalStyles.min.css';
 
 import {
@@ -31,7 +29,8 @@ import {
 } from '@talend/locales-tui-forms';
 
 import 'focus-outline-manager';
-import { useThemeSwitcher } from './utils/ThemeSwitcher.hook';
+import { create } from '@storybook/theming';
+import { themeDark, themeLight } from '@talend/storybook-docs';
 
 export const i18n = {
 	namespaces: [
@@ -90,17 +89,24 @@ export const parameters = {
 		// 		orderedList: false,
 		// 	},
 		// },
-		container: ({ theme, ...props }) => {
+		container: ({ children, context }) => {
 			// 	// useEffect(() => {
 			// 	// 	channel.emit('SET_STATUSES_BY_PAGE', statusByPage);
 			// 	// }, [statusByPage]);
 
-			const initialTheme = props.context.store.globals.globals.theme;
-			const { theme: previewTheme } = useThemeSwitcher(initialTheme);
+			const themeKey = context.store.globals.globals.theme || 'light';
+			const theme = create(
+				{
+					light: themeLight,
+					dark: themeDark,
+				}[themeKey],
+			);
 
 			return (
-				<div data-theme={previewTheme?.base || 'light'}>
-					<DocsContainer {...props} theme={previewTheme} />
+				<div data-theme={themeKey}>
+					<DocsContainer context={context} theme={theme}>
+						{children}
+					</DocsContainer>
 				</div>
 			);
 		},
diff --git a/packages/storybook/.storybook/utils/ThemeSwitcher.hook.ts b/packages/storybook/.storybook/utils/ThemeSwitcher.hook.ts
deleted file mode 100644
index 4b182409d72..00000000000
--- a/packages/storybook/.storybook/utils/ThemeSwitcher.hook.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-
-import { addons } from '@storybook/addons';
-
-import { GLOBALS_UPDATED } from '@storybook/core-events';
-
-import { create } from '@storybook/theming';
-import { themeDark, themeLight } from '@talend/storybook-docs';
-
-type ThemeKey = 'light' | 'dark';
-
-// here `any` is `ThemeVarsPartial` from `@storybook/theming`
-const themeByKey: Record<ThemeKey, any> = {
-	light: themeLight,
-	dark: themeDark,
-};
-
-export const useThemeSwitcher = (initialTheme?: ThemeKey) => {
-	const [theme, setTheme] = useState<ThemeKey | undefined>(initialTheme);
-
-	useEffect(() => {
-		const channel = addons.getChannel();
-		channel.on(GLOBALS_UPDATED, ({ globals: { theme } }) => setTheme(theme));
-		return () => channel.removeAllListeners(GLOBALS_UPDATED);
-	}, []);
-
-	const sbTheme = useMemo(() => {
-		if (theme) {
-			return create(themeByKey[theme]);
-		}
-	}, [theme]);
-
-	return {
-		theme: sbTheme,
-	};
-};
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
index 653691b76a6..f496e6ee01c 100644
--- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
+++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -77,17 +77,7 @@ const defaultPreview = {
 				dynamicTitle: true,
 			},
 		},
-		theme: {
-			name: 'Theme',
-			description: 'Choose a theme to apply to the design system',
-			toolbar: {
-				icon: 'paintbrush',
-				items: [
-					{ value: 'light', left: '⚪️', title: 'Default theme' },
-					{ value: 'dark', left: '⚫️', title: 'Dark theme' },
-				],
-			},
-		},
+		
 	},
 	loaders: [cmfLoader].filter(Boolean),
 	decorators: [
@@ -126,9 +116,6 @@ const defaultPreview = {
 		},
 		cmfDecorator
 	].filter(Boolean),
-	parameters:{
-		
-	}
 };