Store SDK structure

The Store SDK contains all the components, widgets, UI forms, and so on, that are required to start developing your custom React store.

The Store SDK provides a development environment with Reference Store applications for a B2C-based store called Emerald and a B2B-based store called Sapphire. The Reference Store applications themselves share common code and differ only in styling, messages, and page flows. The applications use common React libraries available for front end developers for various capabilities including for routing and display. The visual design of the React application gives control of pages and layouts to the React front end developer while interacting with marketing content, products and category data, and SEO page metadata managed by business users from HCL Commerce Management Center tools.

HCL Commerce Version 9.1.7.0 or later
Note: From 9.1.7.0 onwards, storybook is removed from React store SDK project and it is added in UI component SDK package. Hence you cannot run npm run storybook from React store SDK project.
HCL Commerce Version 9.1.10.0 or laterNote: From HCL Commerce Version 9.1.10.0 and onwards, the tar-gzip packages are not provided with the git bundle. The source code from these packages are available in individual folders in the packages sub-folder.
The following table describes the files and folders in the Store SDK.
Table 1. Folder structure for the Store SDK
Folder Description
mocks Mock JSON response files for running the store in mock mode. Mock server uses this folder as input and provides the mock responses according to the REST API URL.
src/mocks Mock data file for use in unit testing.
assets Digital assets including sample catalog images, marketing contents, .env file templates, and so on. HCL Commerce Version 9.1.7.0 or laterFrom 9.1.7.0, Internationalization(i18n) or translation strings are moved to this folder.
docs The document folder contains annotated storefront mockups, generic information about build process, unit test tips, and recommendations.
src/_foundation Contains the core logic that is used by the React app. For example, components for consuming REST APIs, axios HTTP service and its configurations, SEO services, and so on.

Even when other parts of the store are customized, this folder must be retained. However, the files in this store are not sufficient to run a minimal store on their own.
src/_foundation/apis The HTTP REST API client service file generated via Open API generator (https://openapi-generator.tech/).
src/_foundation/axios We are using Axios library (https://www.npmjs.com/package/axios) for calling REST API services. This folder contains the configurations & settings for Axios.
src/_foundation/constants Static constants which are used in and related to foundation module.

HCL Commerce Version 9.1.7.0 or later/src/_foundation/context

 Context provider for e-spot and product pages.

HCL Commerce Version 9.1.4.0 or latersrc/_foundation/gtm

 Google Analytics Tagging related REST services.
src/_foundation/guard LoginGuard component file for page protection from users like guest users, registered users etc.
src/_foundation/hooks Custom hooks which are used in page composer widgets, site services and so on.
src/_foundation/seo SEO component responsible for calling URLs API, redirecting to correct page layout, setting the meta data for SEO and so on.
src/_foundation/utils Util component responsible for read/write operations on browser local & session storages.
src/components/StyledUI/ Styled UI components. Though most of the Styled UI components were moved to NPM local SDK react-component package, these are leftovers. In future, the remaining components will be moved to NPM local packages and this folder will be removed.
src/_tests_ React component unit test file. The unit test file is here: sample/reference file.

HCL Commerce Version 9.1.4.0 or latersrc/_dev/api-diagram

 showAPIFlow development extension folder contains the implementation logic for showing API flow diagram.
/src/components/footer Store footer component.
src/components/header Store header component.

HCL Commerce Version 9.1.7.0 or latersrc/components/commerce-layouts

 Page composer layouts.
src/components/layouts Layouts other than page composer layouts which are used for displaying Accounts, Dashboard, sign-in pages and so on..
src/components/pages Static URL page components like Account, AddressBook, Cart Checkout and so on.
src/components/pages-seo Catalog browsing page components including the category, product listing, and product details pages.

When the SEO component handles a URL and routes to the proper page component in order to display the page contents, it redirects to the pages present in this folder.

HCL Commerce Version 9.1.7.0 or latersrc/components/commerce-widgets

 Page composer widgets.
src/components/widgets Widget components used in pages like Account, AddressBook, Checkout and so on.

HCL Commerce Version 9.1.4.0 or latersrc/components/extensions

 The development mode extension folder. The extension component is responsible for calling API digram. This file will be overwritten during production build by the template under assets\template\production\src\components\extensions.
src/pages Common pages shared by both Emerald (B2C) and Sapphire (B2B) Reference Store applications.
src/pages/_emerald/ Pages applicable only for the Emerald (B2C) Reference Store application.
src/pages/_sapphire Pages applicable only for the Sapphire (B2B) Reference Store application.

src/components/pages/home/homeConstant.ts

src/components/pages-seo/category/categoryConstant.ts

src/components/header/headerConstant.ts

src/components/footer/footerConstant.ts

 eSpotNames for e-Marketing spots that are displayed in the sample store.
src/configs Configuration files. For example, route configurations for react router, default layouts for page composer, etc.
src/constants Static constants which are commonly used across React store SDK.
src/redux Redux and Redux Saga components, state management logic related files.
src/redux/action-types All action types referenced by the Redux actions
src/redux/actions All Redux actions.
src/redux/reducers All Redux reducers including the interface definition and initial states.
src/redux/sagas Redux Saga library related logic to handle asynch side effects.
src/redux/sagas/watchers Redux Saga watchers to watch for dispatched actions.
src/redux/sagas/workers Redux Saga workers to handle actions.
src/redux/selectors Selectors for the Redux states.
src/redux/store Redux store creation and middleware configuration.
src/testing Mock REST server configuration & REST handler for unit testing. Unit test util component which overrides the default render function of react testing library.
src/themes Themes for both the Emerald (B2C) and Sapphire (B2B) Reference Store application.
src/utils Common utilities used across both the stores.
src/App.tsx, App.scss The main App component and scss file of the React application for the store.
src/animate.css The animate.css file library from http://daneden.me/animate.
src/i18n.ts Internationalization file to handle support for multiple languages for the UI and messages.
src/index.tsx, src/index.scss The main entry point for the React application for the store.
src/react-app-env.d.ts react-app-env.d.ts references the types of react-scripts and helps with things like allowing for SVG imports.
src/serviceWorker.ts Auto-generated file which is a script that the client (browser) runs in the background, separate from the web page. Is can also be used for PWAs, for the app to work offline and to load faster.

For more information, see https://bit.ly/CRA-PWA.

src/setupProxy.js Proxy and mock setup files for running the Reference Store applications in development mode.
src/setupTests.ts JEST mock implementaitons for SiteInfoService which is used in unit testing .
tools Various utility scrips for running the mock sever and building and starting the React sample stores.
src/logo.svg React logo
.env, .env.test All environment variable files that are referenced by the Node server while running the React Store application in development mode.
.prettierrc.yaml

.prettierignore

 Prettier Code formatter Visual Studio Code plugin related settings file.
package-lock.json

package.json

 File used by npm/node to manage project dependencies, running and building projects, and other project related configurations.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-react-component-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/react-component

HCL Commerce Version 9.1.7.0 or laterIt is the NPM local package source file for the Styled UI, Page Composer Layouts, Widgets, Themes, Elements, Other components etc. Here {{version}} represents the HCL Commerce fixpack version i.e. 9.1.7, 9.1.8, or 9.1.9

HCL Commerce Version 9.1.10.0 or laterIt is the NPM workspace folder that contains the source file for the Styled UI, Page Composer Layouts, Widgets, Themes, Elements, Other components etc.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-typescript-axios-es-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/typescript-axios-es

HCL Commerce Version 9.1.7.0 or laterIt is the NPM local package source file for the Elastic search REST client service file generated by the open API generator. Here {{version}} represents the HCL Commerce fixpack version i.e. 9.1.7, 9.1.8, or 9.1.9

HCL Commerce Version 9.1.10.0 or laterIt is the NPM workspace folder that contains the source file for the Elastic search REST client service file generated by the open API generator.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-typescript-axios-transaction-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/typescript-axios-transaction

HCL Commerce Version 9.1.7.0 or laterIt is the NPM local package source file for the Transaction server REST client service file generated by open API generator. Here {{version}} represents the HCL Commerce fixpack version i.e. 9.1.7, 9.1.8, or 9.1.9

HCL Commerce Version 9.1.10.0 or laterIt is the NPM workspace folder that contains the source file for the Transaction server REST client service file generated by open API generator.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-utils-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/utils

HCL Commerce Version 9.1.7.0 or laterIt is the NPM local package source file for the Utility components. Here {{version}} represents the HCL Commerce fixpack version i.e. 9.1.7, 9.1.8, or 9.1.9

HCL Commerce Version 9.1.10.0 or laterIt is the NPM workspace folder that contains the source file for the Utility components.
tsconfig.json TypeScript configuration file.
.storybook In React store SDK, storybook setup is provided with one or two sample components and basic UI elements. It is an optional function which allows you to add new stories by referring to official documentation link https://storybook.js.org/.
husky.config.js Husky npm library config file.

Husky can prevent a bad git commit, git push and so on. For more details see, https://www.npmjs.com/package/husk
.husky Husky npm library configuration folder. For more details, see https://www.npmjs.com/package/husky.
license HCL Commerce License and agreement files.
README.md The Readme file which is the starting point for how to setup and use the React Store Store SDK.
UPDATES.md The React Store Store SDK change history and release updates information file.
readmeImages This folder contains images used in Readme file.
.gitattributes, .gitignore Git related configuration files.
.eslintrc ESlint configuration file. For more details about ESlint, please check official website https://eslint.org/.