note

This document applies to sfb-toolkit@5.x.x and sfb-theme-components@0.0.352 or newer.

Customize UI library components

If you want to customize some of our UI components (i.e. Carousel) you can easily do this by using the following command:

sfb-toolkit components-copy

Once the command is executed you will be provided with a list of components that you can copy and customize locally. A folder named sfb_theme_components_[sfbThemeComponentsVersionInstalled] (i.e. sfb_theme_components_0_0_352) will be created in the workspaceFolder/themes/[yourThemeName]/customComponents folder. The sfbThemeComponentsVersionInstalled refers to the version of @appdirect/sfb-theme-components@[version] that is installed in your theme.

After the component(s) are selected you will be given three options to choose from:

1. Comment out existing exported components and add those selected.
2. Replace existing components with those selected.
3. Do nothing. (Manual index update will be required)

Comment out existing exported components and add those selected

When choosing this option the workspaceFolder/themes/[yourThemeName]/customComponents/index.js file will be updated and any UI library component(s) with the same name already exported will be automatically commented out.

Example for when having selected the Carousel component:

Before (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
export { default as Carousel } from './sfb_theme_components_0_0_352/src/components/carousel/Carousel'

After (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
// export { default as Carousel } from './sfb_theme_components_0_0_352/src/components/carousel/Carousel'
export { default as Carousel } from './sfb_theme_components_0_0_356/src/components/carousel/Carousel'

Replace existing components with those selected

When choosing this option the customComponents/index.js file will be updated and any UI library component(s) with the same name already exported will be automatically replaced by the new component.

Example for when having selected the Carousel component:

Before (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
export { default as Carousel } from './sfb_theme_components_0_0_352/src/components/carousel/Carousel'

After (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
export { default as Carousel } from './sfb_theme_components_0_0_356/src/components/carousel/Carousel'

Do nothing (manual index update will be required)

When choosing this option the customComponents/index.js file will NOT be updated. Choose this option if you wish to use the UI library component copied as part of another component.

Example for when having selected the Carousel component:

Before (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
export { default as Carousel } from './sfb_theme_components_0_0_352/src/components/carousel/Carousel'

After (index.js):

export { default as HeroBanner } from './sfb_theme_components_0_0_352/src/components/hero-banner/HeroBanner'
export { default as Carousel } from './sfb_theme_components_0_0_352/src/components/carousel/Carousel'