@zwayam/apply-experience-library 0.0.7 → 0.0.8

package/README.md

@@ -1,22 +1,204 @@
-# Zwayam UI Libraries
+# Apply Experience Web SDK
 
-Shared UI libraries for Zwayam applications.
+Apply Experience is a reusable Add Profile widget for recruiter/admin web apps. It provides the popup UI for resume upload, candidate field capture, validations, phone fields, source/sub-source selection, and final profile submission flow.
 
-## Apply Experience Library
+This repository root is installable directly from GitHub. The host app provides job/user context and API functions; the SDK handles the Add Profile experience.
 
-`@zwayam/apply-experience-library` provides reusable Add Profile and Edit Profile widgets that can be mounted from Angular, React, Vue, or plain JavaScript host apps.
+## Install From GitHub
 
-Install directly from this GitLab repository:
+```bash
+npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#main
+```
+
+Or install a tagged version:
 
 ```bash
-npm install git+https://zwayam-gitlab.infoedge.com/zwayam/zwayam-ui-libraries.git#main
+npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#v0.2.1
+```
+
+Import styles once:
+
+```js
+import "@zwayam/apply-experience-library/styles.css";
+```
+
+## Required Inputs
+
+The host app must provide:
+
+- `container`: DOM element where the popup will mount.
+- `context`: current job, logged-in user, session, and optional environment data.
+- `api`: host-owned functions for loading config, parsing resume, submitting profile, and optional location suggestions.
+
+```js
+const context = {
+  job: {
+    id: "263294",
+    companyId: 16136,
+    jobTitle: "Java Developer",
+    jobCode: "13949",
+    location: "Kolkata",
+    departmentName: "All Departments",
+  },
+  user: {
+    id: 286813,
+    email: "user@example.com",
+    name: "Recruiter Name",
+  },
+  session: {
+    sessionId: "SESSION_ID",
+  },
+};
+
+const api = {
+  loadInitialData: async () => ({
+    applyFields: [],
+    supportedFiles: {
+      addProfile: {
+        fileFormat: ["pdf", "doc", "docx"],
+        fileSize: 3,
+      },
+    },
+    profileSources: [],
+    phoneConfiguration: {
+      countryIsoCode: "IN",
+      whatsAppEnabled: true,
+      maxCount: 3,
+    },
+  }),
+
+  parseResume: async (file) => {
+    const formData = new FormData();
+    formData.append("file", file);
+    return fetch("/parse-resume", { method: "POST", body: formData }).then((res) => res.json());
+  },
+
+  submitProfile: async (payload) => {
+    return fetch("/add-profile", { method: "POST", body: payload }).then((res) => res.json());
+  },
+};
+```
+
+## React
+
+```jsx
+import { useEffect, useRef } from "react";
+import { mountAddProfile } from "@zwayam/apply-experience-library";
+import "@zwayam/apply-experience-library/styles.css";
+
+export function AddProfile({ open, context, api, onClose }) {
+  const rootRef = useRef(null);
+  const mountedRef = useRef(null);
+
+  useEffect(() => {
+    if (!open || !rootRef.current) return;
+
+    mountedRef.current = mountAddProfile({
+      container: rootRef.current,
+      context,
+      api,
+      onClose,
+      onSuccess: onClose,
+    });
+
+    return () => mountedRef.current?.unmount();
+  }, [open, context, api, onClose]);
+
+  return <div ref={rootRef} />;
+}
+```
+
+## Angular
+
+Import styles in a global stylesheet:
+
+```scss
+@import "@zwayam/apply-experience-library/styles.css";
 ```
 
-Import the SDK and stylesheet:
+Mount from a component:
 
 ```ts
-import { mountAddProfile, mountEditProfile } from "@zwayam/apply-experience-library";
+import { mountAddProfile, MountedAddProfile } from "@zwayam/apply-experience-library";
+
+private mountedAddProfile?: MountedAddProfile;
+
+openAddProfile(container: Element, context: any, api: any) {
+  this.mountedAddProfile = mountAddProfile({
+    container,
+    context,
+    api,
+    onClose: () => this.mountedAddProfile?.unmount(),
+    onSuccess: () => {
+      this.mountedAddProfile?.unmount();
+      // refresh host data if needed
+    },
+  });
+}
+```
+
+## Vue
+
+```vue
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { mountAddProfile } from "@zwayam/apply-experience-library";
 import "@zwayam/apply-experience-library/styles.css";
+
+const root = ref(null);
+let mounted;
+
+onMounted(() => {
+  mounted = mountAddProfile({
+    container: root.value,
+    context,
+    api,
+    onClose: () => mounted?.unmount(),
+    onSuccess: () => mounted?.unmount(),
+  });
+});
+
+onBeforeUnmount(() => mounted?.unmount());
+</script>
+
+<template>
+  <div ref="root"></div>
+</template>
 ```
 
-The host application owns API calls and passes the required context/API handlers to the SDK. The implementation lives in `packages/apply-experience-sdk`.
+## Vanilla JavaScript
+
+```html
+<button id="open-add-profile">Add Profile</button>
+<div id="add-profile-root"></div>
+```
+
+```js
+import { mountAddProfile } from "@zwayam/apply-experience-library";
+import "@zwayam/apply-experience-library/styles.css";
+
+document.querySelector("#open-add-profile").addEventListener("click", () => {
+  const mounted = mountAddProfile({
+    container: document.querySelector("#add-profile-root"),
+    context,
+    api,
+    onClose: () => mounted.unmount(),
+    onSuccess: () => mounted.unmount(),
+  });
+});
+```
+
+## Development
+
+```bash
+npm install
+npm run build
+```
+
+The GitHub-installed package uses the built files from `packages/web/dist`, so keep `dist` committed when using GitHub installs.
+
+## Notes
+
+- The host app owns authentication, session handling, and API endpoints.
+- The SDK should be unmounted when the popup closes or the host component is destroyed.
+- The root package is configured for GitHub installation and exports the bundled web SDK.

package/package.json

@@ -1,24 +1,42 @@
 {
   "name": "@zwayam/apply-experience-library",
-  "version": "0.0.7",
-  "description": "Host-facing Apply Experience SDK for Angular, React, Vue, and plain JavaScript apps.",
+  "version": "0.0.8",
+  "description": "Host-facing Apply Experience SDK for Angular, React, Vue, and other frameworks.",
   "type": "module",
-  "main": "./packages/apply-experience-sdk/packages/web/dist/index.js",
-  "module": "./packages/apply-experience-sdk/packages/web/dist/index.js",
-  "types": "./packages/apply-experience-sdk/packages/web/dist/index.d.ts",
+  "main": "./packages/web/dist/index.js",
+  "module": "./packages/web/dist/index.js",
+  "types": "./packages/web/dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./packages/apply-experience-sdk/packages/web/dist/index.d.ts",
-      "default": "./packages/apply-experience-sdk/packages/web/dist/index.js"
+      "types": "./packages/web/dist/index.d.ts",
+      "default": "./packages/web/dist/index.js"
     },
-    "./styles.css": "./packages/apply-experience-sdk/packages/web/dist/styles.css",
+    "./styles.css": "./packages/web/dist/styles.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "packages/apply-experience-sdk/packages/web/dist",
-    "packages/apply-experience-sdk/README.md"
+    "packages/web/dist",
+    "README.md"
   ],
   "sideEffects": [
-    "./packages/apply-experience-sdk/packages/web/dist/styles.css"
-  ]
+    "./packages/web/dist/styles.css"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "esbuild": "^0.28.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "react-icons": "^5.5.0",
+    "tailwindcss": "^3.4.17"
+  },
+  "workspaces": [
+    "packages/react",
+    "packages/web",
+    "packages/playground"
+  ],
+  "scripts": {
+    "build": "npm run build -w @react-apply-experience/react && npm run build -w @zwayam/apply-experience-library",
+    "playground": "npm run dev -w @react-apply-experience/playground",
+    "playground:build": "npm run build -w @react-apply-experience/playground"
+  }
 }

package/packages/{apply-experience-sdk → web}/README.md

@@ -2,18 +2,22 @@
 
 Apply Experience is a reusable Add Profile widget for recruiter/admin web apps. It provides the popup UI for resume upload, candidate field capture, validations, phone fields, source/sub-source selection, and final profile submission flow.
 
-This repository root is installable directly from GitHub. The host app provides job/user context and API functions; the SDK handles the Add Profile experience.
+The SDK is framework-friendly. It can be mounted from React, Angular, Vue, or plain JavaScript. The host app provides job/user context and API functions; the SDK handles the Add Profile experience.
 
-## Install From GitHub
+## Package Options
+
+Use this package for Angular, Vue, plain JavaScript, or any host that wants a fully bundled widget:
 
 ```bash
-npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#main
+npm install @zwayam/apply-experience-library
 ```
 
-Or install a tagged version:
+For React host apps, a lighter React package can be used when available. It treats `react` and `react-dom` as peer dependencies, so the host app's React runtime is reused instead of bundled again.
+
+## Install
 
 ```bash
-npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#v0.2.1
+npm install @zwayam/apply-experience-library
 ```
 
 Import styles once:
@@ -51,7 +55,7 @@ const context = {
 };
 
 const api = {
-  loadInitialData: async () => ({
+  loadInitialData: async (context) => ({
     applyFields: [],
     supportedFiles: {
       addProfile: {
@@ -67,15 +71,21 @@ const api = {
     },
   }),
 
-  parseResume: async (file) => {
+  parseResume: async (file, context) => {
     const formData = new FormData();
     formData.append("file", file);
     return fetch("/parse-resume", { method: "POST", body: formData }).then((res) => res.json());
   },
 
-  submitProfile: async (payload) => {
+  submitProfile: async (payload, context) => {
     return fetch("/add-profile", { method: "POST", body: payload }).then((res) => res.json());
   },
+
+  getLocationSuggestions: async (query, context) => {
+    return fetch(`/locations?q=${encodeURIComponent(query)}`)
+      .then((res) => res.json())
+      .then((data) => data.suggestions || []);
+  },
 };
 ```
 
@@ -188,17 +198,9 @@ document.querySelector("#open-add-profile").addEventListener("click", () => {
 });
 ```
 
-## Development
-
-```bash
-npm install
-npm run build
-```
-
-The GitHub-installed package uses the built files from `packages/web/dist`, so keep `dist` committed when using GitHub installs.
-
 ## Notes
 
 - The host app owns authentication, session handling, and API endpoints.
 - The SDK should be unmounted when the popup closes or the host component is destroyed.
-- The root package is configured for GitHub installation and exports the bundled web SDK.
+- The web package is fully bundled for non-React hosts.
+- React-specific builds should use peer dependencies for `react` and `react-dom` to keep host bundles smaller.