The storefront project is pre-configured with Storybook. Storybook is an independent open source tool for developing and testing UI components in isolation. It also serves as a library for all UI components in a project and surfaces how they will render in various applications. The project also builds and makes use of React components developed by Elastic Path which may be used within the project, or for various other experience purposes.
Stories are usually single states of a component. Within the Reference Storefront, stories are provided for components within the
components/src directory for each component available.
You may create additional stories for custom components by following the structure provided in other available components. Mocks will aid to render the story in Storybook to simulate components. For more information on creating stories for components in the React PWA Reference Storefront, see the Creating New Storybook Stories in React section. You may refer to Storybooks documentation for more information on writing stories https://storybook.js.org/docs/basics/writing-stories/.
You may run storybook to view stories and manually test components.
# To run the Storybook project: cd storybook yarn storybook
The project provides the components used by the React PWA (Progressive Web App) Reference Storefront as open source deliverables. This component library is also available through NPM (Node Package Manager) at @elasticpath/store-components and may be used for other front-end implementations.
The published components come with base styling and data, which you can overwrite through properties.