Enable custom components

You can use the Plaza theme to create themes with our React components library, which is included in the Storefront Toolkit as of version 2.0.5. To create custom components, ensure that your theme is the current Toolkit default, and use the following sfb-toolkit commands on the command line:

• sfb-toolkit components
• sfb-toolkit storybook

These commands are discussed in more detail below.

note

If you have recently upgraded your Toolkit to version 4.0 from an earlier version, you may receive warnings and error messages related to custom components when you start it. For instructions on how to resolve these warnings and errors, see Upgrading to 4.0 and later.

Enable custom components for a theme

Run the following command to enable theme developers to build custom components in their current theme:

sfb-toolkit components

When you run the command, the toolkit:

• Installs the latest @appdirect/sfb-theme-components in your current theme.
• Creates a customComponents folder in your current theme with two AtomsShowcase components as examples.
• Bundles both sfb-theme-components and custom components into one package in the current theme assets folder.

By default, the sfb-theme-components library is bundled and deployed in a CDN (Content Delivery Network) and referenced in your theme. To use custom components, sfb-theme-components are bundled together with the user-defined custom components into a single package.

Therefore, when you run sfb-theme-components, the toolkit creates a customComponents folder in your current theme where you can start building custom components. Then, when you start your sfb-toolkit server with the sfb-toolkit start command and you make a change inside your customComponents folder, the toolkit bundles your components into a single package and puts it in your theme assets folder so you can preview the changes in your browser using hot module replacement.

Enable the Storybook utility

Run the following command to enable theme developers to visualize all available component documentation through Storybook UI:

sfb-toolkit storybook

The Storybook includes both sfb-theme-components and the custom components that you have created.

Reuse existing sfb-theme-components

You can reuse existing components (atoms or components) from the library for your custom components. For example, if you want to reuse the Button atom in your custom component, add the following import:

import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';

For all component documentation in Storybook UI, a Usage Example provides an example of how you can reuse a component in your custom components.

Availability

To use custom components, you must have at least the following version of the Storefront Toolkit:

• @appdirect/sfb-toolkit@2.0.5

You can check your current version by using the -v or -version option:

sfb-toolkit -version

This command returns the version number.