Storybook (Interactive Demo)

Storybook for Kigo Loyalty Web Wallet

Overview

The Kigo Loyalty Web Wallet SDK includes a comprehensive Storybook that serves as a interactive demo environment. This Storybook showcases the various components of the SDK and demonstrates how they can be integrated and customized within your application.

Mock Service Worker

To provide a seamless demonstration experience, the Storybook utilizes Mock Service Worker (MSW) to simulate API calls. This allows you to explore the functionality of the Kigo Loyalty Web Wallet without needing a live backend service. MSW intercepts network requests and returns predefined responses, enabling you to focus on the component behavior and customization.

Customization Options

The SDK offers extensive customization capabilities, allowing you to tailor the components to fit your application's branding and functionality needs. You can modify aspects such as themes, localization, and component properties through the KigoContext.

Testing with Storybook

Storybook serves as an excellent tool for testing changes to the KigoContext. By using Storybook, you can visualize how different configurations affect the appearance and behavior of components in real-time. The kigoContext is available as a control within Storybook, allowing you to adjust its properties dynamically and see the results immediately.

To modify the KigoContext:

Open the Storybook interface.
Locate the kigoContext control in the panel.
Adjust the properties as needed to test different configurations.
Observe the live updates in the component preview area.

This interactive approach makes it easier to fine-tune your settings and ensure that your customizations meet your application's requirements.

For more detailed information on customization, refer to the following sections in the documentation:

Theme Customization: Learn how to adjust the color palette and typography to match your brand's design guidelines.
Locale Customization: Customize the language and terminology used in the wallet interface.
Component Properties: Explore the default properties of each component and how they can be customized via the KigoContext.

By leveraging the Storybook and the customization options provided by the SDK, you can create a user experience that aligns with your application's unique requirements.