6e03027b4c
FINALLY! I can look into translated UIs in Storybook with Svelte! Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
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('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'));
|
|
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();
|
|
}
|
|
|
|
const preview: Preview = {
|
|
globalTypes: {
|
|
locale: {
|
|
description: 'Internationalization locale',
|
|
defaultValue: 'en',
|
|
toolbar: {
|
|
icon: 'globe',
|
|
items: [
|
|
{
|
|
value: 'de',
|
|
title: 'German'
|
|
},
|
|
{
|
|
value: 'en',
|
|
title: 'English'
|
|
},
|
|
{
|
|
value: 'he',
|
|
title: 'Hebrew'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
parameters: {
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
export const decorators = [withI18n];
|
|
|
|
export default preview;
|