1. Developing Open Storefront Framework Applications for Commerce Experience
  2. Visualize Components Using Storybook

Visualize Components Using Storybook

Use Storybook to visualize and build UI components for your communications storefront and self-care application.

Storybook helps you visualize components in the various configurations. You can have a quick visual reference of the components in this reference application and understand the various properties that can be passed to each component.

To display the components that are connected to the Redux state through the connect function, use the following utility components:

  • @oracle-dx4c-buying/test/test-store: The test-store component accepts a state object. This component is used to predefine the Redux state without explicitly calling the actions or reducers.

  • @oracle-dx4c-buying/test/storybook-container: The storybook-container component replicates the layout mechanism of the open storefront framework so that container-style components can be displayed in Storybook. These components can be used to only create stories for the Storybook UI. You can't use them for building the UI for your application.

To start Storybook, enter the following command from your workspace: 

yarn storybook

Storybook is configured to use the port 3001 by default. You can modify the port (if needed) by updating the storybook script in the root package.json file of your workspace. For example:

"storybook": "start-storybook -p 3001"

The Storybook UI automatically runs on your default browser once it finishes compiling. You can then browse the various communications storefront and self-care components in this UI. You can find all the stories created for a given component in the __stories__ folder of each component. For example, the stories for the Plans component are located in the @oracle-dx4c-buying/components/plans/__stories__/plans.stories file.

For more information on Storybook, visit https://storybook.js.org/.