Sasquatch

<h1 align="center">Sasquatch</h1>

<div align="center">

React components and Javascript utilities for the Lovepop personalize and send flow.

![build](https://github.com/lovepopcards/sasquatch/actions/workflows/node.js.yml/badge.svg)
![release](https://github.com/lovepopcards/sasquatch/actions/workflows/release.yml/badge.svg)

</div>

## Contributing

Before getting started, read the [contributing guide](/CONTRIBUTING.md) 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](https://www.npmjs.com/package/@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](https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component) and
a similar one on the material-ui github [here](https://github.com/mui/material-ui/issues/32660).

The latest version of npm supports an [overrides](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#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](https://www.npmjs.com/package/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](https://www.npmjs.com/package/npm-force-resolutions).
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](https://www.npmjs.com/package/@lovepop/sasquatch).

```sh
// 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):

```jsx
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](http://sasquatch.vercel.app/). 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.