React store NPM package structure

As a part of Page Composer support, React store is widgetized and re-structured component code. Some of the components are moved into different NPM local packages.

The NPM package structure is updated as shown in the image below:

Local NPM packages are HCL private NPM packages. The packages have source code attached for user to reference. React store use following HCL managed NPM local packages:

@hcl-commerce-store-sdk/react-component - the React components that to be consumed by Store
@hcl-commerce-store-sdk/typescript-axios-es - the HCL Commerce ElasticSearch REST service typescipt client generated using OpenApi Generator - https://github.com/OpenAPITools/openapi-generator
@hcl-commerce-store-sdk/typescript-axios-transaction- the HCL Commerce Transaction Server REST service typescript client generated using OpenApi Generator - https://github.com/OpenAPITools/openapi-generator
@hcl-commerce-store-sdk/utils - common utils

The packages are shipped in a tarball file as part of the React Store git bundle:

hcl-commerce-store-sdk-react-component-{{version}}.tgz
hcl-commerce-store-sdk-typescript-axios-es-{{version}}.tgz
hcl-commerce-store-sdk-typescript-axios-transaction-{{version}}.tgz
hcl-commerce-store-sdk-utils-{{version}}.tgz

For HCL Commerce Version 9.1.10.0 and onwards, the above mentioned packages are part of the NPM workspace packages and are provided in the individual folders in your root package folder as follows

@hcl-commerce-store-sdk/react-component is provided under {{root}}/packages/react-component
@hcl-commerce-store-sdk/typescript-axios-es is provided under {{root}}/packages/typescript-axios-es
@hcl-commerce-store-sdk/typescript-axios-transaction is provided under {{root}}/packages/typescript-axios-transaction
@hcl-commerce-store-sdk/utils is provided under {{root}}/packages/utils

Same as other third party npm packages, npm install will install these packages into your local node module folder.

These packages are maintained by HCL and not suppose to be customized directly. To customize, it is recommended to make a copy of source component into a new file first and then add customization into the new component file.

On receiving the package, user will have to install the service and component package using React store application. This installs dependencies required for build process. This will require external connectivity to react libraries and internet. User will also have to get registered layouts and components on react store application. All the scrips and dependencies gets installed.