Multi-Language Support for Component Library

Build a component library story configuration that demonstrates internationalization (i18n) support using a global language selector. The solution should allow users to switch between multiple languages globally across all stories in the Storybook, with the language selection persisted through the toolbar.

Requirements

Global Language State

Create a global state system that:

• Defines available languages (English, Spanish, and French)
• Sets English as the default language
• Provides a toolbar dropdown for language selection
• Makes the current language accessible to all stories

Story Implementation

Create two component stories that demonstrate the language switching:

1. A greeting card component that displays:

   • A welcome message in the selected language
   • A subtitle text in the selected language

2. A button component that displays:

   • Button label text in the selected language

The translations should be:

For English:

• Welcome message: "Welcome to our app"
• Subtitle: "We're glad to have you here"
• Button: "Get Started"

For Spanish:

• Welcome message: "Bienvenido a nuestra aplicación"
• Subtitle: "Nos alegra tenerte aquí"
• Button: "Comenzar"

For French:

• Welcome message: "Bienvenue dans notre application"
• Subtitle: "Nous sommes heureux de vous avoir ici"
• Button: "Commencer"

Test Cases

• When the language is set to Spanish, the greeting card displays "Bienvenido a nuestra aplicación" as the welcome message @test
• When the language is set to French, the button displays "Commencer" as its label @test
• The default language is English, showing "Welcome to our app" in the greeting card @test

Implementation

@generates

API

/**
 * Preview configuration that defines the global language state system
 * and sets up the greeting card and button stories.
 */

Dependencies { .dependencies }

@storybook/react { .dependency }

Provides React renderer and story APIs for Storybook.

react { .dependency }

React library for building UI components.