feat: Update widget config and handlers

nepflow · Feb 4, 2024 · 779b191 · 779b191
1 parent 6c34169
commit 779b191
Show file tree

Hide file tree

Showing 16 changed files with 414 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # Integration Widget
 
-The widget allows your users to explore **6,000+ Zapier integrations** right inside your app.
+The widget allows your users to explore 6,000+ Zapier integrations right inside your app.
 
 [![Production Deployment](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml/badge.svg?branch=main)](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml)
 [![@nepflow/integration-widget.svg](https://img.shields.io/npm/v/@nepflow/integration-widget.svg)](https://www.npmjs.com/package/@nepflow/integration-widget)
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-[Get started](#installation) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
+[Get started](#installation) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/) • [NPM package](https://www.npmjs.com/package/@nepflow/integration-widget)
 
 <img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://raw.githubusercontent.com/nepflow/integration-widget/main/web/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin: 12px 0;" />
 
@@ -22,18 +22,18 @@ Install the package via NPM or Yarn
 npm i @nepflow/integration-widget --save
 ```
 
-Include module in your application
+Import module in your application
 
 ```
-import IntegrationWidget from '@nepflow/integration-widget';
+import NepflowIntegrationWidget from '@nepflow/integration-widget';
 ```
 
 ### Load from CDN
 
 You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@nepflow/integration-widget).
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/lib.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/bundle.js"></script>
 ```
 
 ## Configuration
@@ -58,12 +58,33 @@ const widget = new NepflowIntegrationWidget(
     cardColor: '#fff',
     cardBorderColor: '#fff',
     innerSpace: 24,
-    autoVerticalResize: true
+    autoVerticalResize: true,
+    onCardClick: function(id) {
+      console.log('card clicked:', id)
+    }
   }
 );
 ```
 
-You can use `customCards` parameter to show your native integrations:
+If your app is not integrated with Zapier:
+
+```javascript
+const widget = new NepflowIntegrationWidget(
+  'integration-widget', // Element ID
+  {
+    backgroundColor: '#f5f5f5',
+    cardColor: '#fff',
+    cardBorderColor: '#fff',
+    innerSpace: 24,
+    autoVerticalResize: true,
+    onCardClick: function(id) {
+      alert(id + ' clicked!')
+    }
+  }
+);
+```
+
+You can use `customCards` parameter to show your native integrations and replacing existing Zapier apps:
 
 ```javascript
 const widget = new NepflowIntegrationWidget(
@@ -98,27 +119,9 @@ const widget = new NepflowIntegrationWidget(
 );
 ```
 
-If your app is not integrated with Zapier yet:
-
-```javascript
-const widget = new NepflowIntegrationWidget(
-  'integration-widget', // Element ID
-  {
-    backgroundColor: '#f5f5f5',
-    cardColor: '#fff',
-    cardBorderColor: '#fff',
-    innerSpace: 24,
-    autoVerticalResize: true,
-    onCardClick: function(id) {
-      alert(id + ' clicked!')
-    }
-  }
-);
-```
-
-### Use with your existing framework
+<!-- ### Use with your existing framework
 
-- [**React JS**](https://github.com/nepflow/react-integration-widget/)
+- [**React JS**](https://github.com/nepflow/react-integration-widget/) -->
 
 ## Parameters
 
@@ -131,7 +134,7 @@ You can pass any of these parameters for your widget:
 | cardColor          | The color for the card components (hex)            | `string`                                           | #ffffff   |
 | cardBorderColor    | Card component border color (hex)                  | `string`                                           | #ffffff   |
 | innerSpace         | The padding inside the widget (px)                 | `number`                                           | 24        |
-| verticalAutoResize | Enables automatic vertical resizing for the iframe | `boolean`                                          | false     |
+| autoVerticalResize | Enables automatic vertical resizing for the iframe | `boolean`                                          | false     |
 | onCardClick        | Called when card is clicked                        | `(id: string) => void`                             | -         |
 | customIntegrations | Array of custom or native integrations             | `{ id: string; name: string; iconURL: string; replacedZapierAppId: string; }[]` | []        |
 

diff --git a/package/README.md b/package/README.md
@@ -1,12 +1,12 @@
 # Integration Widget
 
-The widget allows your users to explore **6,000+ Zapier integrations** right inside your app.
+The widget allows your users to explore 6,000+ Zapier integrations right inside your app.
 
 [![Production Deployment](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml/badge.svg?branch=main)](https://github.com/nepflow/integration-widget/actions/workflows/production.yaml)
 [![@nepflow/integration-widget.svg](https://img.shields.io/npm/v/@nepflow/integration-widget.svg)](https://www.npmjs.com/package/@nepflow/integration-widget)
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-[Get started](#installation) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
+[Get started](#installation) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/) • [NPM package](https://www.npmjs.com/package/@nepflow/integration-widget)
 
 <img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://raw.githubusercontent.com/nepflow/integration-widget/main/web/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin: 12px 0;" />
 
@@ -22,18 +22,18 @@ Install the package via NPM or Yarn
 npm i @nepflow/integration-widget --save
 ```
 
-Include module in your application
+Import module in your application
 
 ```
-import IntegrationWidget from '@nepflow/integration-widget';
+import NepflowIntegrationWidget from '@nepflow/integration-widget';
 ```
 
 ### Load from CDN
 
 You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@nepflow/integration-widget).
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/lib.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@nepflow/integration-widget@1/dist/bundle.js"></script>
 ```
 
 ## Configuration
@@ -58,12 +58,33 @@ const widget = new NepflowIntegrationWidget(
     cardColor: '#fff',
     cardBorderColor: '#fff',
     innerSpace: 24,
-    autoVerticalResize: true
+    autoVerticalResize: true,
+    onCardClick: function(id) {
+      console.log('card clicked:', id)
+    }
   }
 );
 ```
 
-You can use `customCards` parameter to show your native integrations:
+If your app is not integrated with Zapier:
+
+```javascript
+const widget = new NepflowIntegrationWidget(
+  'integration-widget', // Element ID
+  {
+    backgroundColor: '#f5f5f5',
+    cardColor: '#fff',
+    cardBorderColor: '#fff',
+    innerSpace: 24,
+    autoVerticalResize: true,
+    onCardClick: function(id) {
+      alert(id + ' clicked!')
+    }
+  }
+);
+```
+
+You can use `customCards` parameter to show your native integrations and replacing existing Zapier apps:
 
 ```javascript
 const widget = new NepflowIntegrationWidget(
@@ -98,27 +119,9 @@ const widget = new NepflowIntegrationWidget(
 );
 ```
 
-If your app is not integrated with Zapier yet:
-
-```javascript
-const widget = new NepflowIntegrationWidget(
-  'integration-widget', // Element ID
-  {
-    backgroundColor: '#f5f5f5',
-    cardColor: '#fff',
-    cardBorderColor: '#fff',
-    innerSpace: 24,
-    autoVerticalResize: true,
-    onCardClick: function(id) {
-      alert(id + ' clicked!')
-    }
-  }
-);
-```
-
-### Use with your existing framework
+<!-- ### Use with your existing framework
 
-- [**React JS**](https://github.com/nepflow/react-integration-widget/)
+- [**React JS**](https://github.com/nepflow/react-integration-widget/) -->
 
 ## Parameters
 
@@ -131,7 +134,7 @@ You can pass any of these parameters for your widget:
 | cardColor          | The color for the card components (hex)            | `string`                                           | #ffffff   |
 | cardBorderColor    | Card component border color (hex)                  | `string`                                           | #ffffff   |
 | innerSpace         | The padding inside the widget (px)                 | `number`                                           | 24        |
-| verticalAutoResize | Enables automatic vertical resizing for the iframe | `boolean`                                          | false     |
+| autoVerticalResize | Enables automatic vertical resizing for the iframe | `boolean`                                          | false     |
 | onCardClick        | Called when card is clicked                        | `(id: string) => void`                             | -         |
 | customIntegrations | Array of custom or native integrations             | `{ id: string; name: string; iconURL: string; replacedZapierAppId: string; }[]` | []        |
 

diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nepflow/integration-widget",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,6 +10,7 @@
     "url": "git+https://github.com/nepflow/integration-widget.git"
   },
   "scripts": {
+    "dev": "http-server ./dist",
     "build": "yarn build:esm && yarn build:cjs && yarn build:browser",
     "build:browser": "webpack",
     "build:esm": "tsc",
@@ -33,6 +34,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/react": "^18.2.52",
+    "http-server": "^14.1.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
     "webpack": "^5.90.1",

diff --git a/package/src/lib.ts → package/src/bundle.ts b/package/src/lib.ts → package/src/bundle.ts
diff --git a/package/src/models/IntegrationWidget.ts b/package/src/models/IntegrationWidget.ts
@@ -1,10 +1,17 @@
 import { IntegrationWidgetConfig } from "./IntegrationWidgetConfig";
 
+interface IframeConfig {
+  baseUrl?: string;
+  width?: string;
+  height?: string;
+  minHeight?: string;
+}
+
 export class IntegrationWidget {
   private readonly baseUrl: string;
 
-  constructor(elementId: string, params: IntegrationWidgetConfig) {
-    this.baseUrl = 'https://widget.nepflow.dev';
+  constructor(elementId: string, params: IntegrationWidgetConfig, iframeParams?: IframeConfig) {
+    this.baseUrl = iframeParams?.baseUrl ?? 'https://widget.nepflow.dev';
 
     const widgetElement = document.getElementById(elementId);
     if (!widgetElement) {
@@ -19,17 +26,19 @@ export class IntegrationWidget {
         searchParams.append(key, value ? 'true' : '');
       } else if (typeof value === 'object') {
         searchParams.append(key, JSON.stringify(value));
-      } else if (value) {
+      } else if (typeof value === 'number') {
         searchParams.append(key, value.toString());
+      } else if (typeof value === 'string') {
+        searchParams.append(key, value);
       }
     }
 
     // Create the iframe element
     const iframe = document.createElement('iframe');
     iframe.src = `${this.baseUrl}/${params.zapierAppId || ''}?${searchParams.toString()}`;
-    iframe.style.width = '100%'; 
-    iframe.style.height = '100%';
-    iframe.style.minHeight = '500px';
+    iframe.style.width = iframeParams?.width ?? '100%'; 
+    iframe.style.height = iframeParams?.height ?? '100%';
+    iframe.style.minHeight = iframeParams?.minHeight ?? '500px';
     iframe.frameBorder = '0';     
 
     // Append the iframe to the integration-widget element
@@ -52,7 +61,7 @@ export class IntegrationWidget {
           break;
         case 'handleCardClick':
           if (typeof params.onCardClick === 'function') {
-            params.onCardClick(data.serviceId);
+            params.onCardClick(data.id);
           };
           break;
       }

diff --git a/package/src/models/IntegrationWidgetConfig.ts b/package/src/models/IntegrationWidgetConfig.ts
@@ -2,7 +2,7 @@ interface CustomCard {
   id: string; 
   name: string; 
   iconURL: string; 
-  replacedZapierAppId: string;
+  replacedZapierAppId?: string;
 }
 
 export interface IntegrationWidgetConfig {

diff --git a/package/webpack.config.js b/package/webpack.config.js
@@ -2,7 +2,7 @@ const path = require("path")
 
 module.exports = {
   mode: "production",
-  entry : "./src/lib.ts",
+  entry : "./src/bundle.ts",
   module: {
     rules: [
       {
@@ -17,6 +17,6 @@ module.exports = {
   },
   output : {
     path: path.resolve(__dirname, "dist"),
-    filename: "lib.js"
+    filename: "bundle.js"
   }
 }