@worthai/onboarding-sdk 2.0.0 → 2.0.2

package/README.md

@@ -1,4 +1,4 @@
-# @joinworth/onboarding-sdk
+# @worthai/onboarding-sdk
 
 A TypeScript SDK for seamless cross-origin communication between parent and child sites using iframe postMessage API. This SDK provides type-safe utilities for building onboarding flows with secure message passing between applications.
 
@@ -8,17 +8,17 @@ A TypeScript SDK for seamless cross-origin communication between parent and chil
 
 ```bash
 # Add as workspace dependency
-pnpm add @joinworth/onboarding-sdk@workspace:*
+pnpm add @worthai/onboarding-sdk@workspace:*
 ```
 
 ### External projects
 
 ```bash
 # Using npm
-npm install @joinworth/onboarding-sdk
+npm install @worthai/onboarding-sdk
 
 # Using pnpm
-pnpm install @joinworth/onboarding-sdk
+pnpm install @worthai/onboarding-sdk
 ```
 
 ## 🛠️ API Reference
@@ -32,7 +32,7 @@ Creates an onboarding app instance for parent-to-child communication with type-s
 > **Note**: The following example is illustrative code for vanilla TypeScript. Adapt to your framework's patterns when using React or other JavaScript frameworks.
 
 ```typescript
-import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingApp } from '@worthai/onboarding-sdk';
 
 // Create an onboarding app instance and communicate with it
 const onboardingApp = createOnboardingApp({
@@ -80,7 +80,7 @@ Creates an onboarding consumer app instance for child-to-parent communication wi
 > **Note**: The following example is illustrative code for vanilla TypeScript. Adapt to your framework's patterns when using React or other JavaScript frameworks.
 
 ```typescript
-import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingConsumerApp } from '@worthai/onboarding-sdk';
 
 // Create an onboarding consumer app instance for child-to-parent communication
 const consumerApp = createOnboardingConsumerApp({
@@ -137,7 +137,7 @@ const subscription = consumerApp.subscribe((event) => {
 ### Parent Site Implementation
 
 ```typescript
-import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingApp } from '@worthai/onboarding-sdk';
 
 // Initialize the onboarding app
 const onboardingApp = createOnboardingApp({
@@ -169,7 +169,7 @@ onboardingApp.prev();
 ### Child Site Implementation
 
 ```typescript
-import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingConsumerApp } from '@worthai/onboarding-sdk';
 
 // Initialize the consumer app
 const consumerApp = createOnboardingConsumerApp({
@@ -200,7 +200,7 @@ The SDK allows parent sites to inject custom CSS styles into the child iframe. T
 #### Parent Site: Sending Custom CSS
 
 ```typescript
-import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingApp } from '@worthai/onboarding-sdk';
 
 const onboardingApp = createOnboardingApp({
   origin: 'https://onboarding.example.com',
@@ -227,7 +227,7 @@ onboardingApp.postMessage({
 #### Child Site: Receiving and Applying Custom CSS
 
 ```typescript
-import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+import { createOnboardingConsumerApp } from '@worthai/onboarding-sdk';
 
 const consumerApp = createOnboardingConsumerApp({
   allowedOrigins: ['https://parent.example.com'],

package/dist/index.js

@@ -29,8 +29,12 @@ const createChildSite = /* @__PURE__ */ __name((args) => {
   }, "buildIframeSrc");
   const subscribe = /* @__PURE__ */ __name((callback) => {
     const handler = /* @__PURE__ */ __name((event) => {
-      if (event.origin !== origin) {
-        console.warn("Blocked message from unauthorized origin:", event.origin);
+      if (event.origin !== origin && event.origin !== window.location.origin) {
+        console.warn(
+          "Blocked message from unauthorized origin:",
+          `Given: ${event.origin}`,
+          `Expected: ${origin}`
+        );
         return;
       }
       callback(event);
@@ -94,6 +98,14 @@ const createOnboardingApp = /* @__PURE__ */ __name((args) => {
   const setCustomCss = /* @__PURE__ */ __name((css) => {
     postMessage({ type: "SET_CUSTOM_CSS", payload: { css } });
   }, "setCustomCss");
+  const setSkipPages = /* @__PURE__ */ __name((skipPages) => {
+    postMessage({
+      type: "SKIP_PAGES_SENT",
+      payload: {
+        skipPages
+      }
+    });
+  }, "setSkipPages");
   const onIframeInitialized = /* @__PURE__ */ __name(() => {
     const subscription = subscribe((event) => {
       if (event.data.type === "IFRAME_INITIALIZED") {
@@ -107,6 +119,7 @@ const createOnboardingApp = /* @__PURE__ */ __name((args) => {
     subscribe,
     setMode,
     setCustomCss,
+    setSkipPages,
     iframe: childApp.iframe,
     next,
     prev,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/utils/createChildSite/index.ts","../src/utils/createOnboardingApp/index.ts","../src/utils/getURLQueryParams/index.ts","../src/utils/createParentSite/index.ts","../src/utils/createOnboardingConsumerApp/index.ts"],"sourcesContent":["import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { ParentSiteMessage } from '@/interfaces/ParentSiteMessage';\n\nexport const createChildSite = (args: {\n  origin: string;\n  initialRoute?: string;\n  queryParams?: IframeQueryParams;\n  mode?: IframeMode;\n}) => {\n  const { origin, initialRoute = '', mode } = args;\n  const queryParams = args.queryParams;\n  const iframe = document.createElement('iframe');\n\n  const setMode = (mode: IframeMode) => {\n    postMessage<ParentSiteMessage>({\n      type: 'SET_IFRAME_MODE',\n      payload: { mode },\n    });\n  };\n\n  const refreshSize = () => {\n    postMessage<ParentSiteMessage>({ type: 'REFRESH_SIZE' });\n  };\n\n  const buildIframeSrc = () => {\n    let srcUrl: URL;\n    if (initialRoute) {\n      srcUrl = new URL(initialRoute.replace(/^\\//, ''), origin);\n    } else {\n      srcUrl = new URL(origin);\n    }\n\n    for (const [key, value] of Object.entries(queryParams || {})) {\n      if (typeof value === 'string') {\n        srcUrl.searchParams.set(key, value);\n      }\n    }\n\n    return srcUrl;\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (event.origin !== origin) {\n        console.warn('Blocked message from unauthorized origin:', event.origin);\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const initializeChildSite = () => {\n    iframe.style.width = '100%';\n    iframe.style.height = '100%';\n    iframe.style.border = 'none';\n    iframe.src = buildIframeSrc().toString();\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'IFRAME_RESIZE':\n          iframe.style.border = 'none';\n          iframe.style.height = `${event.data.payload.height}px`;\n          break;\n        case 'IFRAME_INITIALIZED':\n          setMode(mode);\n          postMessage<ParentSiteMessage>({\n            type: 'IFRAME_RENDERED_ON_PARENT_SITE',\n          });\n          break;\n      }\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(\n    message: TMessage,\n    transfer?: Transferable[]\n  ) => {\n    iframe.contentWindow?.postMessage(message, origin, transfer);\n  };\n\n  initializeChildSite();\n\n  return { iframe, subscribe, postMessage, setMode, refreshSize };\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingAppMode } from '@/interfaces/OnboardingAppMode';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createChildSite } from '@/utils/createChildSite';\n\nexport const createOnboardingApp = (args: {\n  origin: string;\n  inviteToken: string;\n  mode?: OnboardingAppMode;\n}) => {\n  const queryParams: IframeQueryParams = {};\n  const { inviteToken, ...restArgs } = args;\n  const childApp = createChildSite({\n    ...restArgs,\n    queryParams,\n  });\n\n  const postMessage = (message: OnboardingConsumerAppMessage) => {\n    childApp.postMessage(message as unknown as AnyMessage);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingAppMessage>) => void\n  ) => {\n    return childApp.subscribe(callback);\n  };\n\n  const skip = () => {\n    postMessage({ type: 'SKIP_STAGE' });\n  };\n\n  const next = () => {\n    postMessage({ type: 'NEXT_STAGE' });\n  };\n\n  const prev = () => {\n    postMessage({ type: 'PREV_STAGE' });\n  };\n\n  const setMode = (mode: OnboardingAppMode) => {\n    postMessage({ type: 'SET_IFRAME_MODE', payload: { mode } });\n  };\n\n  const setCustomCss = (css: string) => {\n    postMessage({ type: 'SET_CUSTOM_CSS', payload: { css } });\n  };\n\n  const onIframeInitialized = () => {\n    const subscription = subscribe((event) => {\n      if (event.data.type === 'IFRAME_INITIALIZED') {\n        postMessage({ type: 'INVITE_TOKEN_SENT', payload: { inviteToken } });\n        subscription.unsubscribe();\n      }\n    });\n  };\n\n  onIframeInitialized();\n\n  return {\n    subscribe,\n    setMode,\n    setCustomCss,\n    iframe: childApp.iframe,\n    next,\n    prev,\n    skip,\n    refreshSize: childApp.refreshSize,\n  };\n};\n","import type { QueryParams } from '@/interfaces/QueryParams';\n\nexport const getURLQueryParams = <T extends QueryParams>() => {\n  const urlSearchParams = new URLSearchParams(window.location.search);\n  const queryParams: QueryParams = {};\n  urlSearchParams.forEach((value, key) => {\n    queryParams[key] = value;\n  });\n\n  return queryParams as T;\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { ChildSiteMessage } from '@/interfaces/ChildSiteMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport { getURLQueryParams } from '@/utils/getURLQueryParams';\n\nexport const createParentSite = (args: { allowedOrigins: string[] }) => {\n  const { allowedOrigins } = args;\n  const queryParams = getURLQueryParams<IframeQueryParams>();\n\n  const notifyHeight = () => {\n    const height = document.body.scrollHeight;\n    postMessage<ChildSiteMessage>({\n      type: 'IFRAME_RESIZE',\n      payload: { height },\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(message: TMessage) => {\n    for (const origin of allowedOrigins) {\n      window.parent.postMessage(message, origin);\n    }\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (!allowedOrigins.includes(event.origin)) {\n        console.warn('Blocked message from unauthorized origin:', event.origin);\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const notifySize = () => {\n    notifyHeight();\n  };\n\n  const initializeParentSite = () => {\n    const observer = new ResizeObserver(notifySize);\n    observer.observe(document.body);\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'SET_IFRAME_MODE':\n          const mode = event.data.payload.mode as IframeMode;\n          document.body.style.overflow =\n            mode === 'embedded' ? 'hidden' : 'auto';\n          break;\n        case 'REFRESH_SIZE':\n          notifySize();\n          break;\n        default:\n          break;\n      }\n    });\n\n    postMessage<ChildSiteMessage>({ type: 'IFRAME_INITIALIZED' });\n  };\n\n  initializeParentSite();\n\n  return {\n    notifySize,\n    subscribe,\n    postMessage,\n    queryParams,\n  };\n};\n","import type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createParentSite } from '@/utils/createParentSite';\n\nexport const createOnboardingConsumerApp = (args: {\n  allowedOrigins: string[];\n}) => {\n  const parentApp = createParentSite(args);\n\n  const postMessage = (message: OnboardingAppMessage) => {\n    parentApp.postMessage(message);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingConsumerAppMessage>) => void\n  ) => {\n    return parentApp.subscribe(callback);\n  };\n\n  return {\n    postMessage,\n    subscribe,\n    notifySize: parentApp.notifySize,\n  };\n};\n"],"names":["mode"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/utils/createChildSite/index.ts","../src/utils/createOnboardingApp/index.ts","../src/utils/getURLQueryParams/index.ts","../src/utils/createParentSite/index.ts","../src/utils/createOnboardingConsumerApp/index.ts"],"sourcesContent":["import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { ParentSiteMessage } from '@/interfaces/ParentSiteMessage';\n\nexport const createChildSite = (args: {\n  origin: string;\n  initialRoute?: string;\n  queryParams?: IframeQueryParams;\n  mode?: IframeMode;\n}) => {\n  const { origin, initialRoute = '', mode } = args;\n  const queryParams = args.queryParams;\n  const iframe = document.createElement('iframe');\n\n  const setMode = (mode: IframeMode) => {\n    postMessage<ParentSiteMessage>({\n      type: 'SET_IFRAME_MODE',\n      payload: { mode },\n    });\n  };\n\n  const refreshSize = () => {\n    postMessage<ParentSiteMessage>({ type: 'REFRESH_SIZE' });\n  };\n\n  const buildIframeSrc = () => {\n    let srcUrl: URL;\n    if (initialRoute) {\n      srcUrl = new URL(initialRoute.replace(/^\\//, ''), origin);\n    } else {\n      srcUrl = new URL(origin);\n    }\n\n    for (const [key, value] of Object.entries(queryParams || {})) {\n      if (typeof value === 'string') {\n        srcUrl.searchParams.set(key, value);\n      }\n    }\n\n    return srcUrl;\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (event.origin !== origin && event.origin !== window.location.origin) {\n        console.warn(\n          'Blocked message from unauthorized origin:',\n          `Given: ${event.origin}`,\n          `Expected: ${origin}`\n        );\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const initializeChildSite = () => {\n    iframe.style.width = '100%';\n    iframe.style.height = '100%';\n    iframe.style.border = 'none';\n    iframe.src = buildIframeSrc().toString();\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'IFRAME_RESIZE':\n          iframe.style.border = 'none';\n          iframe.style.height = `${event.data.payload.height}px`;\n          break;\n        case 'IFRAME_INITIALIZED':\n          setMode(mode);\n          postMessage<ParentSiteMessage>({\n            type: 'IFRAME_RENDERED_ON_PARENT_SITE',\n          });\n          break;\n      }\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(\n    message: TMessage,\n    transfer?: Transferable[]\n  ) => {\n    iframe.contentWindow?.postMessage(message, origin, transfer);\n  };\n\n  initializeChildSite();\n\n  return { iframe, subscribe, postMessage, setMode, refreshSize };\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingAppMode } from '@/interfaces/OnboardingAppMode';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createChildSite } from '@/utils/createChildSite';\n\nexport const createOnboardingApp = (args: {\n  origin: string;\n  inviteToken: string;\n  mode?: OnboardingAppMode;\n}) => {\n  const queryParams: IframeQueryParams = {};\n  const { inviteToken, ...restArgs } = args;\n  const childApp = createChildSite({\n    ...restArgs,\n    queryParams,\n  });\n\n  const postMessage = (message: OnboardingConsumerAppMessage) => {\n    childApp.postMessage(message as unknown as AnyMessage);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingAppMessage>) => void\n  ) => {\n    return childApp.subscribe(callback);\n  };\n\n  const skip = () => {\n    postMessage({ type: 'SKIP_STAGE' });\n  };\n\n  const next = () => {\n    postMessage({ type: 'NEXT_STAGE' });\n  };\n\n  const prev = () => {\n    postMessage({ type: 'PREV_STAGE' });\n  };\n\n  const setMode = (mode: OnboardingAppMode) => {\n    postMessage({ type: 'SET_IFRAME_MODE', payload: { mode } });\n  };\n\n  const setCustomCss = (css: string) => {\n    postMessage({ type: 'SET_CUSTOM_CSS', payload: { css } });\n  };\n\n  const setSkipPages = (skipPages: string[]) => {\n    postMessage({\n      type: 'SKIP_PAGES_SENT',\n      payload: {\n        skipPages,\n      },\n    });\n  };\n\n  const onIframeInitialized = () => {\n    const subscription = subscribe((event) => {\n      if (event.data.type === 'IFRAME_INITIALIZED') {\n        postMessage({ type: 'INVITE_TOKEN_SENT', payload: { inviteToken } });\n        subscription.unsubscribe();\n      }\n    });\n  };\n\n  onIframeInitialized();\n\n  return {\n    subscribe,\n    setMode,\n    setCustomCss,\n    setSkipPages,\n    iframe: childApp.iframe,\n    next,\n    prev,\n    skip,\n    refreshSize: childApp.refreshSize,\n  };\n};\n","import type { QueryParams } from '@/interfaces/QueryParams';\n\nexport const getURLQueryParams = <T extends QueryParams>() => {\n  const urlSearchParams = new URLSearchParams(window.location.search);\n  const queryParams: QueryParams = {};\n  urlSearchParams.forEach((value, key) => {\n    queryParams[key] = value;\n  });\n\n  return queryParams as T;\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { ChildSiteMessage } from '@/interfaces/ChildSiteMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport { getURLQueryParams } from '@/utils/getURLQueryParams';\n\nexport const createParentSite = (args: { allowedOrigins: string[] }) => {\n  const { allowedOrigins } = args;\n  const queryParams = getURLQueryParams<IframeQueryParams>();\n\n  const notifyHeight = () => {\n    const height = document.body.scrollHeight;\n    postMessage<ChildSiteMessage>({\n      type: 'IFRAME_RESIZE',\n      payload: { height },\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(message: TMessage) => {\n    for (const origin of allowedOrigins) {\n      window.parent.postMessage(message, origin);\n    }\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (!allowedOrigins.includes(event.origin)) {\n        console.warn('Blocked message from unauthorized origin:', event.origin);\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const notifySize = () => {\n    notifyHeight();\n  };\n\n  const initializeParentSite = () => {\n    const observer = new ResizeObserver(notifySize);\n    observer.observe(document.body);\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'SET_IFRAME_MODE':\n          const mode = event.data.payload.mode as IframeMode;\n          document.body.style.overflow =\n            mode === 'embedded' ? 'hidden' : 'auto';\n          break;\n        case 'REFRESH_SIZE':\n          notifySize();\n          break;\n        default:\n          break;\n      }\n    });\n\n    postMessage<ChildSiteMessage>({ type: 'IFRAME_INITIALIZED' });\n  };\n\n  initializeParentSite();\n\n  return {\n    notifySize,\n    subscribe,\n    postMessage,\n    queryParams,\n  };\n};\n","import type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createParentSite } from '@/utils/createParentSite';\n\nexport const createOnboardingConsumerApp = (args: {\n  allowedOrigins: string[];\n}) => {\n  const parentApp = createParentSite(args);\n\n  const postMessage = (message: OnboardingAppMessage) => {\n    parentApp.postMessage(message);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingConsumerAppMessage>) => void\n  ) => {\n    return parentApp.subscribe(callback);\n  };\n\n  return {\n    postMessage,\n    subscribe,\n    notifySize: parentApp.notifySize,\n  };\n};\n"],"names":["mode"],"mappings":"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"}

package/dist/interfaces/OnboardingAppMessage.d.ts

@@ -12,7 +12,7 @@ export type OnboardingAppMessage = {
 } | {
     type: 'ONBOARDING_STARTED';
 } | {
-    type: 'AUTHENTICATION_FAILED';
+    type: 'ERROR';
     payload: {
         error: unknown;
     };

package/dist/interfaces/OnboardingConsumerAppMessage.d.ts

@@ -10,4 +10,9 @@ export type OnboardingConsumerAppMessage = {
     payload: {
         inviteToken: string;
     };
+} | {
+    type: 'SKIP_PAGES_SENT';
+    payload: {
+        skipPages: string[];
+    };
 } | ParentSiteMessage;

package/dist/utils/createOnboardingApp/index.d.ts

@@ -10,6 +10,7 @@ export declare const createOnboardingApp: (args: {
     };
     setMode: (mode: OnboardingAppMode) => void;
     setCustomCss: (css: string) => void;
+    setSkipPages: (skipPages: string[]) => void;
     iframe: HTMLIFrameElement;
     next: () => void;
     prev: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worthai/onboarding-sdk",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "source": "./src",
   "types": "./dist/index.d.ts",
@@ -15,14 +15,21 @@
       "import": "./dist/index.js"
     }
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joinworth/onboarding-sdk-poc"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "bump-patch-version": "npm version patch -m 'chore: bump patch version to %s'",
-    "publish-to-github": "npm publish --access public"
+    "bump-patch-version": "npm version patch -m 'chore: bump patch version to %s'"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.10",