@zwayam/apply-experience-library 0.0.2 → 0.0.3

package/README.md

@@ -1,204 +1,22 @@
-# Apply Experience Web SDK
+# Zwayam UI Libraries
 
-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.
+Shared UI libraries for Zwayam applications.
 
-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.
+## Apply Experience Library
 
-## Install From GitHub
+`@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.
 
-```bash
-npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#main
-```
-
-Or install a tagged version:
+Install directly from this GitLab repository:
 
 ```bash
-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";
+npm install git+https://zwayam-gitlab.infoedge.com/zwayam/zwayam-ui-libraries.git#main
 ```
 
-Mount from a component:
+Import the SDK and stylesheet:
 
 ```ts
-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 { mountAddProfile, mountEditProfile } 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>
 ```
 
-## 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.
+The host application owns API calls and passes the required context/API handlers to the SDK. The implementation lives in `packages/apply-experience-sdk`.

package/package.json

@@ -1,42 +1,24 @@
 {
   "name": "@zwayam/apply-experience-library",
-  "version": "0.0.2",
-  "description": "Host-facing Apply Experience SDK for Angular, React, Vue, and other frameworks.",
+  "version": "0.0.3",
+  "description": "Host-facing Apply Experience SDK for Angular, React, Vue, and plain JavaScript apps.",
   "type": "module",
-  "main": "./packages/web/dist/index.js",
-  "module": "./packages/web/dist/index.js",
-  "types": "./packages/web/dist/index.d.ts",
+  "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",
   "exports": {
     ".": {
-      "types": "./packages/web/dist/index.d.ts",
-      "default": "./packages/web/dist/index.js"
+      "types": "./packages/apply-experience-sdk/packages/web/dist/index.d.ts",
+      "default": "./packages/apply-experience-sdk/packages/web/dist/index.js"
     },
-    "./styles.css": "./packages/web/dist/styles.css",
+    "./styles.css": "./packages/apply-experience-sdk/packages/web/dist/styles.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "packages/web/dist",
-    "README.md"
+    "packages/apply-experience-sdk/packages/web/dist",
+    "packages/apply-experience-sdk/README.md"
   ],
   "sideEffects": [
-    "./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"
-  }
+    "./packages/apply-experience-sdk/packages/web/dist/styles.css"
+  ]
 }

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

@@ -2,22 +2,18 @@
 
 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.
 
-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.
+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.
 
-## Package Options
-
-Use this package for Angular, Vue, plain JavaScript, or any host that wants a fully bundled widget:
+## Install From GitHub
 
 ```bash
-npm install @zwayam/apply-experience-library
+npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#main
 ```
 
-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
+Or install a tagged version:
 
 ```bash
-npm install @zwayam/apply-experience-library
+npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#v0.2.1
 ```
 
 Import styles once:
@@ -55,7 +51,7 @@ const context = {
 };
 
 const api = {
-  loadInitialData: async (context) => ({
+  loadInitialData: async () => ({
     applyFields: [],
     supportedFiles: {
       addProfile: {
@@ -71,21 +67,15 @@ const api = {
     },
   }),
 
-  parseResume: async (file, context) => {
+  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, context) => {
+  submitProfile: async (payload) => {
     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 || []);
-  },
 };
 ```
 
@@ -198,9 +188,17 @@ 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 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.
+- The root package is configured for GitHub installation and exports the bundled web SDK.