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.