How to integrate with Storybook?

[xeho91]

Hi there! 👋

I'm on a mission to integrate the Paraglide JS with Storybook in our project.
I couldn't find a guide nor find anything useful under the storybook on your GitHub & Discord, so I thought it would be worth to ask. For the future reference.

Let me give a quick preview on our architecture setup firstly.

We have a monorepo, and we have two front-end applications:

• landing pages website powered by Astro
• client application powered by SvelteKit
  Both of those apps use the shared library containing UI components written in Svelte - and that's where we use Storybook (v8).

---

So, how I attempted so far to make it work:

1. I've setup Vite's config for Storybook with : https://github.com/opral/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-vite
2. I attempted to configure integration with i18n addon, to toggle between available setup locales storybook-i18n

And on the second point is where I am stuck.
This addon - storybook-i18n - requires to write your own decorator, with a provider. Is worth to note that the provider has to be written in Svelte.
And, as far I have observed & tested, I cannot use useGlobals() from the @storybook/manager-api, because is for React based frameworks.

Is there any better way to attempt at integrating it? If so, I would appreciate if someone could point me in the right direction. 🙏

[xeho91]

Actually, I think I've figured it out. There's no need to use @storybook/manager-api.

With the following code:

// .storybook/main.ts
import type { Decorator, Preview } from "@storybook/svelte";
import i18n from "storybook-i18n/preview";
import { type AvailableLanguageTag } from "path/to/your/paraglide/runtime.js";

import I18nProvider from "path/to/your/provider/I18nProvider.svelte";

// @ts-ignore
const decorators = i18n?.decorators || [];

export const globals = {
	locale: "en",
	locales: {
		en: "English",
		"zh-TW": "Mandarin (Taiwan)",
		pl: "Polish",
	} satisfies Record<AvailableLanguageTag, string>,
};

export const decorators: Decorator[] = [
	...decorators,
	(Story, context) => ({
		Component: I18nProvider,
		props: {
			locale: context.globals["locale"],
		},
	}),
];

export const preview: Preview = {
	...i18n,
	decorators,
	globals,
	parameters,
};

And then, the custom provider:

<script lang="ts">
// I18nProvider.svelte
	import {
		setLanguageTag,
		onSetLanguageTag,
		type AvailableLanguageTag,
	} from "../../../libs/i18n/src/runtime.js";

	export let locale: AvailableLanguageTag = "en";

	onSetLanguageTag((lang) => {
		window.document.documentElement.lang = lang;
	});

	$: {
		setLanguageTag(locale);
	}
</script>

{#key locale}
	<slot />
{/key}

It almost works, except that the updated locale is not passed down to the components. The UI components when using a call to languageTag() doesn't detect change. Re-render happens, but the value remains at en (default).

EDIT. Silly me, I wasn't using the same path to runtime on both sides, it works now.