sasquatchtest v0.0.3
React components and Javascript utilities for the Lovepop personalize and send flow.
Contributing
Before getting started, read the contributing guide to get up to speed on how to make changes.
Dependencies
There are a couple of important things to be aware of at this time.
NPM Version
Github Actions will use npm version 6 for node version 14. For consistency, best to use npm version 6 when making changes locally. Target it with the following command:
npm i -g npm@6
Force Resolutions
We recently encountered a dependencies issue introduced by a breaking changes in the latest @types/react version. Basically, a dependency of material-ui v4 (react-transition-group) is now using the latest version of @types/react, which conflicts with our dependency on the previous version of react-types. Despite the breaking changes, npm is not preventing the update in the background. You can find a description of the issue on SO here and a similar one on the material-ui github here.
The latest version of npm supports an overrides
property for the package.json that works similarly to yarn's resolutions
. However, we're currently using
npm version 6 and need to rely on an external package to achieve the same behavior.
To fix this we used npm-force-resolutions to
ensure that @react/types@17
is used in sasquatch consistently. In order to build the package at
release time we had to commit the package-lock.json
. Until we find a way to resolve the dependency issue
for @types/react
changes to the lockfile will need to be committed.
If this problem occurs again, then to update with npm-force-resolution
follow the steps outlined
here.
DON'T commit the preinstall script after the install completes. Remove it from the pacakge.json. Otherwise,
it will complain about a missing package-lock.json
when installing on lovepop-storefront
.
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
Installation
Sasquatch is available as an npm package.
// with npm
npm install @lovepop/sasquatch
// with yarn
yarn add @lovepop/sasquatch
Usage
Here is a quick example to get you started (to be updated as implemented):
import * as React from 'react';
import ReactDOM from 'react-dom';
import ProductPersonalizationFlow from '@lovepop/sasquatch';
function App() {
return (
<ProductPersonalizationFlow
endpoint={'https://devapi.lovepopcards.com'}
onError={console.error}
product={{ title: 'Example Product', image: 'https://image.url' }}
/>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
Documentation
Storybook documentation for main
lives here. You need to login through Vercel. Preview links are generated for each commit, so docs for in-progress components or components only commited to the beta
branch can be found that way.