feat: Move widget to ./web

.github/workflows/production.yaml

@@ -18,22 +18,26 @@ jobs:
       - name: Cache node_modules
         uses: actions/cache@v2
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ./web/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/web/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
       
       - name: Install Dependencies
         run: npm install
+        working-directory: ./web
 
       - name: Build React App
         run: npm run build
+        working-directory: ./web
 
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
       - name: Pull Vercel Environment Information
         run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+        working-directory: ./web
 
       - name: Deploy Project Artifacts to Vercel
-        run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
+        working-directory: ./web

.gitignore

@@ -1,25 +1 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-.vercel
+.DS_Store

README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/nepflow/integration-widget/raw/main/assets/intro-v2.png" style="max-width: 800px; width: 100%; margin-bottom: 24px;" />
+<img alt="Nepflow widget with 6,000+ Zapier integrations" src="https://github.com/nepflow/integration-widget/raw/main/assets/intro-v3.png" style="max-width: 800px; width: 100%; margin-bottom: 24px;" />
 
 # Integration Widget
 
@@ -7,11 +7,11 @@ The widget allows your users to explore **6,000+ Zapier integrations** right ins
 [![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)
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
 
-[Get started](#getting-started) • [Build Widget](https://get-widget.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
+[Get started](#getting-started) • [Live Demo](https://demo.nepflow.dev/) • [Build Widget](https://demo.nepflow.dev/) • [Documentation](https://docs.nepflow.dev/)
 
 ## Getting started
 
-You can use [the online builder](https://get-widget.nepflow.dev) to customize the widget and get the installation code.
+You can use [the online builder](https://demo.nepflow.dev) to customize the widget and get the installation code.
 
 ### Use installation script
 
@@ -27,33 +27,50 @@ If your app is integrated with [Zapier](https://zapier.com/):
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
-    innerSpace: '24px',
+    innerSpace: 24,
     autoVerticalResize: true
   });
 </script>
 ```
 
-If your app is not integrated with Zapier yet:
+You can use `customIntegrations` parameter to show your native integrations:
 
 ```html
 <div id="integration-widget"></div>
 
 <script src="https://widget.nepflow.dev/loader-v1.js"></script>
 <script>
   nepflowWidget.load('integration-widget', {
+    zapierAppId: '<ZAPIER APP ID>', // Your Zapier app ID or slug
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
     innerSpace: '24px',
     autoVerticalResize: true,
+    customIntegrations: [
+      // Showing a new integration in the catalog
+      { 
+        id: 'new_integration', 
+        name: 'New Integration', 
+        iconURL: 'https://example.com/new_integration.png' 
+      },
+
+      // Replacing an existing Zapier app in the catalog
+      {
+        id: 'gmail', 
+        name: 'Gmail', 
+        iconURL: 'https://example.com/gmail.png',
+        replacedZapierAppId: 'gmail'
+      },
+    ],
     onCardClick: function(id) {
       alert(id + ' clicked!')
     }
   });
 </script>
 ```
 
-You can use `nativeIntegrations` parameter to show your native integrations:
+If your app is not integrated with Zapier yet:
 
 ```html
 <div id="integration-widget"></div>
@@ -64,11 +81,8 @@ You can use `nativeIntegrations` parameter to show your native integrations:
     backgroundColor: '#f5f5f5',
     cardColor: '#fff',
     cardBorderColor: '#fff',
-    innerSpace: '24px',
+    innerSpace: 24,
     autoVerticalResize: true,
-    nativeIntegrations: [
-      { id: 'msgcore', name: 'MsgCore', iconURL: 'https://app.msgcore.com/favicon-96x96.png' },
-    ],
     onCardClick: function(id) {
       alert(id + ' clicked!')
     }
@@ -90,10 +104,10 @@ You can pass any of these parameters for your widget:
 | backgroundColor    | The widget's background color (hex)                | `string`                                           | #ffffff   |
 | 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`                                           | 24px      |
+| innerSpace         | The padding inside the widget (px)                 | `number`                                           | 24        |
 | verticalAutoResize | Enables automatic vertical resizing for the iframe | `boolean`                                          | false     |
 | onCardClick        | Called when card is clicked                        | `(id: string) => void`                             | -         |
-| nativeIntegrations | Array of native integrations                       | `{ id: string; name: string; iconURL: string; }[]` | -         |
+| customIntegrations | Array of custom or native integrations             | `{ id: string; name: string; iconURL: string; replacedZapierAppId: string; }[]` | []        |
 
 ## Technical Support or Questions
 

package/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn-error.log

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "integration-widget",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nepflow/integration-widget.git"
+  },
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+
+    "prepare": "npm run build"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "integration",
+    "zapier",
+    "integrations",
+    "widget"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@types/react": "^18.2.52",
+    "typescript": "^5.3.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import load from './utils/load'
+
+export { load }

package/src/models/IntegrationWidgetConfig.ts

@@ -0,0 +1,7 @@
+export interface IntegrationWidgetConfig {
+  backgroundColor: string;
+  cardColor: string;
+  cardBorderColor: string;
+  innerSpace: number;
+  autoVerticalResize: boolean;
+}

package/src/utils/load.ts

@@ -0,0 +1,7 @@
+import { IntegrationWidgetConfig } from "../models/IntegrationWidgetConfig";
+
+const load = (elementId: string, config: IntegrationWidgetConfig) => {
+  console.debug('load', elementId, config);
+}
+
+export default load;

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["src"],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+  }
+}

package/yarn.lock

@@ -0,0 +1,32 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/prop-types@*":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
+"@types/react@^18.2.52":
+  version "18.2.52"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.52.tgz#83ca0c62bd1ff31464dac4cf1937e55c78f77aa2"
+  integrity sha512-E/YjWh3tH+qsLKaUzgpZb5AY0ChVa+ZJzF7ogehVILrFpdQk6nC/WXOv0bfFEABbXbgNxLBGU7IIZByPKb6eBw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+typescript@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==

web/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vercel

package.json → web/package.json

@@ -1,8 +1,9 @@
 {
-  "name": "nepflow-integration-widget",
+  "name": "nepflow-integration-widget-web",
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "license": "Apache-2.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

scripts/loader-v1.js → web/scripts/loader-v1.js

@@ -15,6 +15,8 @@ class NepflowWidget {
     for (const [key, value] of Object.entries(params)) {
       if (typeof value === 'boolean') {
         searchParams.append(key, value ? 'true' : '');
+      } else if (typeof value === 'object') {
+        searchParams.append(key, JSON.stringify(value));
       } else if (value) {
         searchParams.append(key, value.toString());
       }