Introduction

This is the Forward Accelerator component library. It's a React Component library to enhance projects built on SFCC pwa-kit. It uses rollup and babel to bundle and transpile React code to ES6 and CommonJS bundles. This has a few advantages and disadvantages

Advantages

• The transpiled code has flattened dependencies, so it cannot conflict with dependencies of the implementing project. Theoretically this means you can use different versions of dependencies in the implementing project compared to the library. For instance for the POC the demo implementation used Node version 14.17 while the library used Node version 19.3. However, to reduce the compiled size of the library, npm peerDependencies should be leveraged as much as possible.
• The implementing project has no control over the components in the component library. It either has to use the components as is (although it can of course take full advantage of flexibility offered through the components by way of prop injection, composition and higher order components)
• The transpiled code can be used in any project, doesn't have to be a pwa-kit or even React project

Disadvantages

• The development flow is a lot more clunky, see section "How to test changes"
• The transpiled code is very hard to debug, need to add log statements which is especially painful in combination with the previous issue

Installation

"generate": "cross-env-shell npm explore forward-accelerator -- plop -- --destinationPath $INIT_CWD"

TODOs

1. Evaluate effort to convert library to Typescript
2. ~~Fix linting errors (Currently all related to missing prop-types)~~
3. Setup precommit hooks to prevent linting errors from being commited
4. Analyze and add peerDependencies
5. Add unit testing -> https://xploregroup.atlassian.net/browse/FCSP-3
6. Setup team access on NPM
7. Define version control and way of working with publishing and testing NPM packages -> https://xploregroup.atlassian.net/browse/FCSP-222
8. Refactor buildLocals function to a hook or similar
9. Research and test component structure, setup a POC with Higher Order Component
10. Setup a POC with a custom page in the component library
11. Setup a POC with Chakra theme in implementation extending or overwriting library theme -> https://xploregroup.atlassian.net/browse/FCSP-185
12. Improve component styling
13. Maybe come up with a way to pass site and locale through context without needing to pass it through props every time

How to test changes

1. Switch to node version of forward-accelerator
2. Update version property in package.json
3. run 'npm run rollup'
4. run 'npm publish'
5. Go to project repository
6. Switch to node version of project repository
7. run 'npm install forward-accelerator@latest --save-dev'
8. run 'npm run start'

References

How to Create and Publish a React Component Library Build a React Component Library Rollup-based dev environment for JavaScript (part 1)