procyon/.storybook/preview.tsx

import './styles/global.css';
import '@procyon/styles/unistyles';

import React from 'react';

import {
	Title,
	Subtitle,
	Description,
	Primary,
	Controls,
	Stories,
} from '@storybook/blocks';

import { TolgeeProvider, useTolgee, TolgeeChain } from '@procyon/localization/tolgee';

export const globalTypes = {
	locale: {
		name: 'Locale',
		defaultValue: 'en',
		toolbar: {
			icon: 'globe',
			showName: true,
			items: [
				{ value: 'en', right: '🇺🇸', title: 'English' },
				{ value: 'cs', right: '🇨🇿', title: 'Čeština' },
			],
		},
	},
};

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 tolgee={tolgee}>
				<Story />
			</TolgeeProvider>
		);
	},
];

export const parameters = {
	actions: {
		argTypesRegex: '^on[A-Z].*',
	},
	options: {
		storySort: {
			method: 'alphabetical-by-kind',
			order: [
				'Introduction',
				'Auth',
				'Api',
				['Introduction'],
				'components',
				['Inputs', 'Layout', 'Display', 'Utils', '*'],
				'Form',
				['Introduction', 'Implementation'],
				'Localization',
				['Introduction', 'Example'],
			],
		},
	},
	docs: {
		page: () => (
			<>
				<Title />
				<Subtitle />
				<Description />
				<Primary />
				<Controls />
				<Stories />
			</>
		),
	},
};