@companycam/saasquatch-custom-components

How to build and deploy custom widgets

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

  • Components should be built using the HVC pattern
  • Controller should match the name of the folder: sqh-my-component.tsx
  • View should match the controller name + "view": sqh-my-component-view.tsx
  • Hook should have the prefix "use" and the Controller's class name: useMyComponent.ts
  • 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

• Develop Stencil components locally

  • npm start
  • Edit html: index.html

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

  • Bump the version number in package.json
  • npm login
  • npm install
  • npm run build
  • Commit the version bump
  • npm publish --access public

• Implement widget in portal widget editor

  • 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
    

  • Import custom html from index.html

• Test widget in browser using squatch.js library

  • go to http://squathjs-demo.surge.sh
  • Fill out tenantAlias, domain, user, widgetType (p/[programId]/w/referrerWidget), and jwt fields for squatch initObj in config
  • 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
  • Reload config