Toolkit Commands

Introduction

This section contains details on the various toolkit commands that can be executed.

Install custom components to a theme

sfb-toolkit components

The above command will setup the current theme such that you can create your own custom components. When you run the command, the toolkit:

• Installs a version of @appdirect/sfb-theme-components in your current theme. The version installed depends on the toolkit version. Older toolkit versions will install older versions of @appdirect/sfb-theme-components.
• 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 is bundled together with the user-defined custom components into a single package.

Therefore, when you run sfb-toolkit 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.

Check a theme for use of custom components

note

This command is only available starting from @appdirect/sfb-toolkit@4.0.13.

sfb-toolkit components-info

This command will help you identify which custom components / customizations override our UI library and should be tested before uploading a new theme. This command will display a (none-exhaustive) list of components grouped into three sections:

• Overrides Components JS will show a list of custom components defined in the current theme which override the components in our UI library. When components are identified that potentially override JavaScript, please thoroughly test their functionality to ensure there are no unexpected behaviours.
• Overrides Components SCSS will show a list of custom components defined in the current theme which override our UI library. When components are identified that override scss/css (styling), it is important to thoroughly test the UI to ensure that those components continue to display correctly.
• User Defined Components/Atoms will show a list of custom components that are defined by the user and should not override our UI library.

caution

Currently Atoms are not added to Overrides Components SCSS although they might override the SCSS (styling) of our UI library leading to display issues. Improving this behavior is on our feature roadmap.