Previewing a Language in Locale Development

In Storybook

To preview your component in different languages, create separate stories for each language. Example:

React

src/login/pages/Login.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { createKcPageStory } from "../KcPageStory";

const { KcPageStory } = createKcPageStory({ pageId: "login.ftl" });

const meta = {
    title: "login/login.ftl",
    component: KcPageStory
} satisfies Meta<typeof KcPageStory>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
    render: () => <KcPageStory />
};

export const French: Story = {
    render: ()=> (
        <KcPageStory
            kcContext={{
                locale: {
                    currentLanguageTag: "fr"
                }
            }}
        />
    )
};

export const Spanish: Story = {
    render: ()=> (
        <KcPageStory
            kcContext={{
                locale: {
                    currentLanguageTag: "es"
                }
            }}
        />
    )
};

// Other stories ...

Angular

src/login/pages/Login.stories.ts

import { Meta, StoryObj } from '@storybook/angular';
import { decorators, KcPageStory } from '../KcPageStory';

const meta: Meta<KcPageStory> = {
    title: 'login/login.ftl',
    component: KcPageStory,
    decorators: decorators,
    globals: {
        pageId: 'login.ftl'
    }
};

export default meta;
type Story = StoryObj<KcPageStory>;

export const Default: Story = {};

export const French: Story = {
    globals: {
        kcContext: {
             locale: {
                  currentLanguageTag: "fr"
            }
        }
    }
};
export const Spanish: Story = {
    globals: {
        kcContext: {
             locale: {
                  currentLanguageTag: "fr"
            }
        }
    }
};

Viewing the French story of the login page

If you want all your story to by by default in an other language you can edit:

React

src/login/KcPageStory.tsx

export const { getKcContextMock } = createGetKcContextMock({
  kcContextExtension,
  kcContextExtensionPerPage,
  overrides: {
    locale: {
      currentLanguageTag: "de",
    },
  },
  overridesPerPage: {},
});

Angular

src/login/KcPageStory.ts

export const { getKcContextMock } = createGetKcContextMock({
  kcContextExtension,
  kcContextExtensionPerPage,
  overrides: {
    locale: {
      currentLanguageTag: "de",
    },
  },
  overridesPerPage: {},
});

With the Vite or Webpack developement server

If, for previewing your pages, you don't use storybook but the dev mode of storybook or webpack, you can specify the language like so:

React

src/main.tsx

/* eslint-disable react-refresh/only-export-components */
import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import { KcPage } from "./kc.gen";

// The following block can be uncommented to test a specific page with `yarn dev`
// Don't forget to comment back or your bundle size will increase
import { getKcContextMock } from "./login/KcPageStory";

if (import.meta.env.DEV) {
    window.kcContext = getKcContextMock({
        pageId: "register.ftl",
        overrides: {
            locale: {
                currentLanguageTag: "es"
            }
        }
    });
}

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        {!window.kcContext ? (
            <h1>No Keycloak Context</h1>
        ) : (
            <KcPage kcContext={window.kcContext} />
        )}
    </StrictMode>
);

Angular

src/main.ts

// The following block can be uncommented to test a specific page with `ng serve`
// Don't forget to comment back or your bundle size will increase

import { isDevMode } from '@angular/core';
import { getKcContextMock } from './login/KcContextMock';

if (isDevMode()) {
    window.kcContext = getKcContextMock({
        pageId: 'register.ftl',
           locale: {
                currentLanguageTag: "es"
            }
        }
    });
}

Ok now let's see how to modify the base translation to best fit your usecase or create new translation messages:

Adding New Translation Messages Or Changing The Default Ones