@companycam/saasquatch-custom-components

How to build and deploy custom widgets

1. Create new components in ./src/components as new folders, for example ./src/components/sqh-my-component

   1. Components should be built using the HVC pattern
   2. Controller should match the name of the folder: sqh-my-component.tsx
   3. View should match the controller name + "view": sqh-my-component-view.tsx
   4. Hook should have the prefix "use" and the Controller's class name: useMyComponent.ts
   5. Stories should be added to provide visuals of each possible state of the component (MyComponent.stories.tsx) and imported into sqh-stencilbook.tsx. Be sure to import any mixins used in your components into sqh-stencilbook.scss

2. Develop Stencil components locally

   1. npm start
   2. Edit html: index.html

3. Build and publish to NPM under @companycam/saasquatch-custom-components@x.y.z

   1. Bump the version number in package.json
   2. npm login
   3. npm install
   4. npm run build
   5. Commit the version bump
   6. npm publish --access public

4. Implement widget in portal widget editor

   1. Reference deployed components in advanced section of the widget editor:

      dependencies:

      package: @companycam/saasquatch-custom-components
      version: x.y.z
      filePath: /dist/saasquatch-custom-components/saasquatch-custom-components.js
      

      plugins:

      package: @companycam/saasquatch-custom-components
      version: x.y.z
      filePath: /grapesjs/grapesjs.js
      

   2. Import custom html from index.html

5. Test widget in browser using squatch.js library

   1. go to http://squathjs-demo.surge.sh
   2. Fill out tenantAlias, domain, user, widgetType (p/[programId]/w/referrerWidget), and jwt fields for squatch initObj in config
   3. jwt can be generated at https://jwt.io using the user object from config as the payload

      {
         "user":{
            "id":"my-user-id",
            "accountId":"my-account-id"
         }
      }
      

      and your tenant's API key in the Verify Signature section
   4. Reload config