Anvil/.storybook/preview.ts

/* Registering of global Storybook decorators.
 * Copyright (C) 2024 André Jaenisch
 * SPDX-FileCopyrightText: 2024 André Jaenisch
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import { initializeStores, storePopup } from '@skeletonlabs/skeleton';
import type { Preview } from '@storybook/svelte';
import { init, locale, register } from 'svelte-i18n';

import { mapLocaleToDir } from '../src/lib/i18n/index.ts';

// See src/routes/+layout.svelte
// Order is important!
import '../src/theme.postcss';
//import '@skeletonlabs/skeleton/styles/skeleton.css';
import '../src/app.postcss';
import './fix.css';

register('bg', () => import('../src/lib/i18n/locales/bg.json'));
register('de', () => import('../src/lib/i18n/locales/de.json'));
register('en', () => import('../src/lib/i18n/locales/en.json'));
register('he', () => import('../src/lib/i18n/locales/he.json'));
register('pl', () => import('../src/lib/i18n/locales/pl.json'));
init({ fallbackLocale: 'en', initialLocale: 'en' });
locale.set('en');

function withI18n(storyFn, context) {
	const l = context.globals.locale;

	locale.set(l);
	document.dir = mapLocaleToDir(l);

	return storyFn();
}

function withStores(storyFn) {
	// Globally initialize stores for Skeleton.dev contexts
	initializeStores();
	return storyFn();
}

function withPopup(storyFn) {
	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
	return storyFn();
}

const preview: Preview = {
	globalTypes: {
		locale: {
			description: 'Internationalization locale',
			defaultValue: 'en',
			toolbar: {
				icon: 'globe',
				items: [
					{
						value: 'bg',
						title: 'Bulgarian'
					},
					{
						value: 'de',
						title: 'German'
					},
					{
						value: 'en',
						title: 'English'
					},
					{
						value: 'he',
						title: 'Hebrew'
					},
					{
						value: 'pl',
						title: 'Polish'
					}
				]
			}
		}
	},
	parameters: {
		actions: { argTypesRegex: '^on[A-Z].*' },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i
			}
		}
	}
};

export const decorators = [withI18n, withPopup, withStores];

export default preview;