feat: add custom translations and theme patching in react.main.tsx

Refs: #7144

packages/samples/react/src/react.main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap, isInitialized } from '@public-ui/components';
+import { bootstrap, isInitialized, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
@@ -55,11 +55,46 @@ void (async () => {
 				translation: {
 					name: 'en',
 				},
+				/**
+				 * You can add your own translations here.
+				 */
+				translations: new Set([
+					(t) =>
+						t('en', {
+							// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/en.ts
+							'kol-error': 'My text has been overwritten.!',
+						}),
+					(t) =>
+						t('de', {
+							// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/de.ts
+							'kol-error': 'Mein Text wurde überschrieben.!',
+						}),
+				]),
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
 				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 			},
 		);
 
+		/**
+		 * You should patch the theme after the components and your default theme are registered.
+		 */
+		KoliBriDevHelper.patchTheme(
+			'default',
+			{
+				'KOL-SPIN': `
+					.bg-spin-2 {
+						background-color: red;
+					}
+					.bg-spin-3 {
+						background-color: gold;
+					}
+				`,
+			},
+			{
+				append: true,
+			},
+		);
+
 		console.info('bootstap is initialized: ', isInitialized());
 	} catch (error) {
 		console.warn('Theme registration failed:', error);