Initial Commit

packages/localization/i18n/react-i18n/src/components/trans/trans.stories.tsx

@@ -0,0 +1,182 @@
+/**
+ * Storybook stories for `<Trans>`.
+ *
+ * The package does not declare a `@storybook/react` dependency (Storybook
+ * lives in the testbed app, not in library packages). The story-meta
+ * shapes are inlined as `interface Meta` / `interface StoryObj` so the
+ * file can be consumed by any Storybook 7+/8+ config that auto-discovers
+ * stories without forcing every library package to depend on the full
+ * Storybook toolchain at install time.
+ */
+
+import type { TranslationRecord } from "@suaveplan/i18n";
+import { createI18n, type I18nInstance } from "@suaveplan/i18n/plugin";
+import type { ReactNode } from "react";
+import { TranslationProvider } from "../../provider/provider.js";
+import { Trans } from "./trans.js";
+import type { TransProps } from "./trans.types.js";
+
+interface Meta<T> {
+    readonly component: T;
+    readonly title: string;
+    readonly tags?: readonly string[];
+}
+
+interface StoryObj<T> {
+    readonly args?: Partial<TransProps>;
+    readonly decorators?: ReadonlyArray<(Story: () => ReactNode) => ReactNode>;
+    readonly render?: () => ReactNode;
+    readonly name?: string;
+    readonly _component?: T;
+}
+
+type LocaleKey = "en-GB" | "zh-CN" | "ar-AE" | "cy-GB" | "ru-RU";
+
+const messages: Partial<Record<LocaleKey, TranslationRecord>> = {
+    "en-GB": {
+        welcome: "Hello <b>{name}</b>!",
+        items: { one: "{count} item", other: "{count} items" },
+    },
+    "zh-CN": {
+        welcome: "<b>{name}</b>，你好！",
+        items: { one: "{count} 项", other: "{count} 项" },
+    },
+    "ar-AE": {
+        welcome: "مرحبا <b>{name}</b>!",
+        items: { one: "{count} عنصر", other: "{count} عناصر" },
+    },
+    "cy-GB": {
+        welcome: "Helo <b>{name}</b>!",
+        items: { one: "{count} eitem", other: "{count} eitemau" },
+    },
+    "ru-RU": {
+        welcome: "Привет, <b>{name}</b>!",
+        items: { one: "{count} элемент", other: "{count} элементов" },
+    },
+};
+
+function withProviderFor(locale: LocaleKey) {
+    return function Wrapper(props: { children: ReactNode }) {
+        const i18n = createI18n({
+            defaultLocale: locale,
+            messages,
+        }) as I18nInstance;
+        return (
+            <TranslationProvider i18n={i18n}>
+                {props.children}
+            </TranslationProvider>
+        );
+    };
+}
+
+const meta: Meta<typeof Trans> = {
+    component: Trans,
+    title: "react-i18n/Trans",
+    tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof Trans>;
+
+export const Default: Story = {
+    args: {
+        i18nKey: "welcome",
+        values: { name: "Alice" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("en-GB");
+            return <W>{Story()}</W>;
+        },
+    ],
+};
+
+export const Playground: Story = {
+    args: { i18nKey: "items", count: 3 },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("en-GB");
+            return <W>{Story()}</W>;
+        },
+    ],
+};
+
+export const WithI18nEnglish: Story = {
+    name: "WithI18n / en-GB",
+    args: {
+        i18nKey: "welcome",
+        values: { name: "Alice" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("en-GB");
+            return <W>{Story()}</W>;
+        },
+    ],
+};
+
+export const WithI18nChinese: Story = {
+    name: "WithI18n / zh-CN",
+    args: {
+        i18nKey: "welcome",
+        values: { name: "爱丽丝" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("zh-CN");
+            return <W>{Story()}</W>;
+        },
+    ],
+};
+
+export const WithI18nArabic: Story = {
+    name: "WithI18n / ar-AE (RTL)",
+    args: {
+        i18nKey: "welcome",
+        values: { name: "أليس" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("ar-AE");
+            return (
+                <W>
+                    <div dir="rtl">{Story()}</div>
+                </W>
+            );
+        },
+    ],
+};
+
+export const WithI18nWelsh: Story = {
+    name: "WithI18n / cy-GB",
+    args: {
+        i18nKey: "welcome",
+        values: { name: "Alys" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("cy-GB");
+            return <W>{Story()}</W>;
+        },
+    ],
+};
+
+export const WithI18nRussian: Story = {
+    name: "WithI18n / ru-RU",
+    args: {
+        i18nKey: "welcome",
+        values: { name: "Алиса" },
+        components: { b: <strong /> },
+    },
+    decorators: [
+        (Story) => {
+            const W = withProviderFor("ru-RU");
+            return <W>{Story()}</W>;
+        },
+    ],
+};