Change Tolgee integration

.storybook/preview.tsx

@@ -12,7 +12,7 @@ import {
 	Stories,
 } from '@storybook/blocks';
 
-import { tolgee, TolgeeProvider } from '@procyon/localization/tolgee';
+import { TolgeeProvider, useTolgee, TolgeeChain } from '@procyon/localization/tolgee';
 
 export const globalTypes = {
 	locale: {
@@ -29,19 +29,27 @@ export const globalTypes = {
 	},
 };
 
+const tolgee = TolgeeChain.init({
+	apiKey: process.env.TOLGEE_API_KEY,
+	apiUrl: process.env.TOLGEE_API_URL,
+	language: 'en',
+	ns: ['button', 'common'],
+});
+
 export const decorators = [
+	(Story, context) => {
+		const { locale } = context.globals;
+		const tolgee = useTolgee();
+		tolgee.changeLanguage(locale);
+		return <Story />;
+	},
 	(Story) => {
 		return (
-			<TolgeeProvider>
+			<TolgeeProvider tolgee={tolgee}>
 				<Story />
 			</TolgeeProvider>
 		);
 	},
-	(Story, context) => {
-		const { locale } = context.globals;
-		tolgee.changeLanguage(locale);
-		return <Story />;
-	},
 ];
 
 export const parameters = {

package.json

@@ -55,6 +55,7 @@
 		"@storybook/react": "7.6.12",
 		"@storybook/react-native": "7.6.12",
 		"@storybook/react-webpack5": "7.6.12",
+		"@storybook/types": "7.6.12",
 		"@types/jest": "29.5.12",
 		"@types/mdx": "2.0.10",
 		"@types/node": "18.18.2",

packages/localization/src/tolgee.tsx

@@ -3,22 +3,20 @@ import {
 	DevTools,
 	FormatSimple,
 	Tolgee,
+	TolgeeInstance,
 	TolgeeProvider as TolgeeTolgeeProvider,
 } from '@tolgee/react';
 
 export { T, useTranslate, useTolgee } from '@tolgee/react';
 
-export const tolgee = Tolgee()
-	.use(DevTools())
-	.use(FormatSimple())
-	.init({
-		language: 'cs',
-		apiUrl: process.env.TOLGEE_API_URL,
-		apiKey: process.env.TOLGEE_API_KEY,
-		ns: ['button'],
-	});
+export type TolgeeProviderProps = {
+	children: ReactNode;
+	tolgee: TolgeeInstance;
+};
 
-export const TolgeeProvider: FC<{ children: ReactNode }> = ({ children }) => (
+export const TolgeeChain = Tolgee().use(DevTools()).use(FormatSimple());
+
+export const TolgeeProvider: FC<TolgeeProviderProps> = ({ children, tolgee }) => (
 	<TolgeeTolgeeProvider tolgee={tolgee} fallback="Loading...">
 		{children}
 	</TolgeeTolgeeProvider>

pnpm-lock.yaml

@@ -90,6 +90,9 @@ importers:
       '@storybook/react-webpack5':
         specifier: 7.6.12
         version: 7.6.12(@babel/core@7.23.9)(@swc/core@1.4.2)(esbuild@0.18.20)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
+      '@storybook/types':
+        specifier: 7.6.12
+        version: 7.6.12
       '@types/jest':
         specifier: 29.5.12
         version: 29.5.12

stories/localization/Introduction.mdx

@@ -6,21 +6,32 @@ import { Meta } from '@storybook/blocks';
 
 As localization framework is used open source [Tolgee](https://tolgee.io).
 
-## How to connect
-
-Define two ENV variables:
-
-### TOLGEE_API_URL
-- url to your self-hosted instance or cloud
-
-### TOLGEE_API_KEY,
-- api key for communication
-
 ## Import to you project
 
-Import `import { tolgee, TolgeeProvider } from '@procyon/localization/tolgee';` and wrap your Application with `TolgeeProvider`.
+`import { TolgeeProvider, TolgeeChain } from '@procyon/localization/tolgee';` and wrap your application with `TolgeeProvider`.
 
-From `@procyon/localization/t` you can import whole Tolgee package or instance under `tolgee` variable.
+## How to connect
+
+Use `TolgeeChain`:
+
+```js
+const tolgee = TolgeeChain.init({
+	apiKey: process.env.TOLGEE_API_KEY,
+	apiUrl: process.env.TOLGEE_API_URL,
+	language: 'en',
+	ns: ['button', 'common']
+});
+```
+
+Then pass `tolgee` object to `TolgeeProvider`:
+
+```jsx
+<TolgeeProvider tolgee={tolgee}>
+...
+</TolgeeProvider>
+```
+
+For more information, check [tolgee documentation](https://tolgee.io/js-sdk/initialization).
 
 ## Usage