fix: toggleswitch and storybook config

.changeset/bright-zoos-hug.md

@@ -0,0 +1,6 @@
+---
+'@talend/scripts-config-storybook-lib': patch
+---
+
+fix: add keys on all items in the decorators
+fix: improve build performance copy/pasted from #4931

packages/design-system/src/components/Form/ToggleSwitch/Primitive/ToggleSwitchPrimitive.tsx

@@ -41,7 +41,7 @@ const ToggleSwitchPrimitive = forwardRef(
 			<span
 				className={classnames(styles.switch, {
 					[styles.switch_readOnly]: !!readOnly,
-					[styles.switch_checked]: !!checked,
+					[styles.switch_checked]: controlled.value,
 					[styles.switch_disabled]: !!disabled,
 					[styles.switch_inline]: !!isInline,
 				})}
@@ -53,7 +53,7 @@ const ToggleSwitchPrimitive = forwardRef(
 						disabled={disabled}
 						readOnly={readOnly}
 						required={required}
-						aria-checked={checked}
+						aria-checked={controlled.value}
 						checked={controlled.value}
 						onChange={e => controlled.onChange(e)}
 						{...rest}

packages/design-system/src/components/Form/ToggleSwitch/index.ts

@@ -1 +1 @@
-export { ToggleSwitch } from './ToggleSwitch';
+export * from './ToggleSwitch';

packages/design-system/src/useControl.ts

@@ -9,6 +9,7 @@ type UseControlOptions = {
 };
 
 export function useControl<T>(props: any, opts: UseControlOptions) {
+	const isControlled = props[opts.valueKey] !== undefined && props[opts.onChangeKey] !== undefined;
 	let defaultValue = props[opts.defaultValueKey];
 	if (defaultValue === undefined) {
 		if (props[opts.valueKey] !== undefined) {
@@ -18,7 +19,6 @@ export function useControl<T>(props: any, opts: UseControlOptions) {
 		}
 	}
 	const [state, setState] = useState<T>(defaultValue);
-	const isControlled = props[opts.valueKey] !== undefined && props[opts.onChangeKey] !== undefined;
 
 	const onChange = (value: any) => {
 		let safeValue = value;
@@ -31,9 +31,12 @@ export function useControl<T>(props: any, opts: UseControlOptions) {
 			setState(safeValue);
 		}
 	};
-
+	let value = isControlled ? props[opts.valueKey] : state;
+	if (value === undefined) {
+		value = defaultValue;
+	}
 	return {
-		value: isControlled ? props[opts.valueKey] : state,
+		value,
 		onChange: isControlled ? props[opts.onChangeKey] : onChange,
 	};
 }

tools/scripts-config-storybook-lib/.storybook-templates/main.js

@@ -26,11 +26,19 @@ const defaultMain = {
 		name: '@storybook/react-webpack5',
 		options: {
 			builder: {
-				disableTelemetry: true,
-				enableCrashReports: false,
+				fsCache: true,
+				//lazyCompilation: true
 			},
 		},
 	},
+	typescript: {
+		reactDocgen: false,
+		check: false,
+	},
+	core: {
+		enableCrashReports: false,
+		disableTelemetry: true,
+	},
 	features: {
 		buildStoriesJson: true,
 	},
@@ -43,12 +51,12 @@ const defaultMain = {
 		'@storybook/addon-interactions',
 		'@storybook/addon-storysource',
 	],
-	webpackFinal: async (config) => {
+	webpackFinal: async (config, { configType }) => {
 		// by default storybook do not support scss without css module
 		// here we remove storybook scss config and replace it by our config
 		const rules = [
 			...config.module.rules.filter(rule => {
-				return !rule.test?.toString().includes('s[ca]ss');
+				return !rule.te?.toString().includes('s[ca]ss');
 			}),
 			{
 				test: /\.scss$/,
@@ -60,6 +68,14 @@ const defaultMain = {
 				use: getSassLoaders(true, '', true),
 			},
 		];
+		// commented to have devtools back
+		// if (configType === 'PRODUCTION') {
+		// 	config.mode = 'production';
+		// }
+		// config.optimization = {
+		// 	minimize: false,
+		// 	minimizer: [],
+		// };
 		const mergedConfig = {
 			...config,
 			module: {
@@ -95,11 +111,12 @@ module.exports  = {
 	stories,
 	addons: [...defaultMain.addons, ...(userMain.addons || [])],
 	core: merge(defaultMain.core, userMain.core),
+	typescript: merge(defaultMain.typescript, userMain.typescript),
 	staticDirs: fixWindowsPaths([...(defaultMain.staticDirs|| []), ...(userMain.staticDirs || [])]),
-	webpackFinal: async (config) => {
-		let finalConfig = await defaultMain.webpackFinal(config);
+	webpackFinal: async (config, options) => {
+		let finalConfig = await defaultMain.webpackFinal(config, options);
 		if(userMain.webpackFinal) {
-			finalConfig = await userMain.webpackFinal(finalConfig);
+			finalConfig = await userMain.webpackFinal(finalConfig, options);
 		}
 		return finalConfig
 	}

tools/scripts-config-storybook-lib/.storybook-templates/preview.js

@@ -98,6 +98,7 @@ const defaultPreview = {
 				}),
 				React.createElement(ToggleBootstrap, {
 					disabled: context.globals.bootstrapTheme === 'false',
+					key: 'toggle-bootstrap-decorator'
 				}),
 				React.createElement(ThemeProvider, {
 					key: 'theme-provider-decorator',