procyon/.storybook/preview.tsx

import './styles/global.css';

import React from 'react';
import { UnistylesRegistry } from 'react-native-unistyles';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

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

import { TolgeeProvider, useTolgee, TolgeeChain } from '@procyon/localization/tolgee';
import { procyonLightTheme } from '@procyon/styles/theme/light';
import { mergeDeepRight } from 'ramda';
import { procyonBreakpoints } from '@procyon/styles/theme/breakpoints';

// Init Unistyles
export const themes = { light: mergeDeepRight(procyonLightTheme, {}) };
export const breakpoints = mergeDeepRight(procyonBreakpoints, {});

UnistylesRegistry.addThemes(themes).addBreakpoints(breakpoints).addConfig({
	adaptiveThemes: true,
	initialTheme: 'light',
});

// Init Tolgee
export const tolgee = TolgeeChain.init({
	apiKey: process.env.TOLGEE_API_KEY,
	apiUrl: process.env.TOLGEE_API_URL,
	language: 'en',
	ns: ['procyon', 'button', 'calendar'],
});

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' },
			],
		},
	},
};

export const decorators = [
	(Story, context) => {
		const { locale } = context.globals;
		const tolgee = useTolgee();
		tolgee.changeLanguage(locale);
		return <Story />;
	},
	(Story) => {
		return (
			<TolgeeProvider tolgee={tolgee}>
				<Story />
			</TolgeeProvider>
		);
	},
	(Story) => {
		return (
			<GestureHandlerRootView>
				<Story />
			</GestureHandlerRootView>
		);
	},
];

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