0.0.12 • Published 3 years ago

@companycam/saasquatch-custom-components v0.0.12

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

flowchart