@saasquatch-themes/ringcentral-components v1.2.0
How to build and deploy custom widgets
- Copy the
widget-starter
folder and rename as needed 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
Before you begin:
- Edit stencil.config.ts - update namespace to
my-theme-components
- Edit package.json - update name to
@saasquatch/my-theme-components
- Edit stencil.config.ts - update namespace to
Develop Stencil components locally
npm start
- Edit html: index.html
Build and publish to NPM under personal user to
@saasquatch/my-theme-components@0.0.1
npm login
npm run build
2a. Navigate todist/my-theme-components/my-theme-components.js
and find + removewindow.location.origin
from the built file (only needed if loading these components in an iframe)npm publish --access public
Implement widget in portal widget editor
Reference deployed components in advanced section of the widget editor:
dependencies:
package: @saasquatch/mint-components version: 1.0.0 filePath: /dist/mint-components/mint-components.js
plugins:
package: @saasquatch/mint-components version: 1.0.0 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
), andjwt
fields for squatchinitObj
in config - jwt can be generated at https://jwt.io using the user object from config as the payload
and your tenant's API key in the Verify Signature section{ "user":{ "id":"my-user-id", "accountId":"my-account-id" } }
- Reload config
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago