@zwayam/apply-experience-library 0.1.2 → 0.1.4

package/packages/web/README.md

@@ -1,18 +1,14 @@
-# Apply Experience Web SDK
+# Apply Experience Library
 
-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 package is the bundled web entrypoint for `@zwayam/apply-experience-library`.
 
-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.
+It exposes framework-friendly mount helpers for launching **Add Profile** and **Edit Profile** popups from:
 
-## Package Options
-
-Use this package for Angular, Vue, plain JavaScript, or any host that wants a fully bundled widget:
-
-```bash
-npm install @zwayam/apply-experience-library
-```
-
-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.
+- Angular
+- React
+- Vue
+- Vanilla JavaScript
+- Custom elements
 
 ## Install
 
@@ -22,185 +18,40 @@ npm install @zwayam/apply-experience-library
 
 Import styles once:
 
-```js
+```ts
 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 (context) => ({
-    applyFields: [],
-    supportedFiles: {
-      addProfile: {
-        fileFormat: ["pdf", "doc", "docx"],
-        fileSize: 3,
-      },
-    },
-    profileSources: [],
-    phoneConfiguration: {
-      countryIsoCode: "IN",
-      whatsAppEnabled: true,
-      maxCount: 3,
-    },
-  }),
-
-  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, 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 || []);
-  },
-};
-```
-
-## React
+## Main Exports
 
-```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} />;
-}
-```
+- `mountAddProfile`
+- `mountEditProfile`
+- `registerAddProfileElement`
+- `registerEditProfileElement`
 
-## Angular
-
-Import styles in a global stylesheet:
-
-```scss
-@import "@zwayam/apply-experience-library/styles.css";
-```
-
-Mount from a component:
+## Quick Example
 
 ```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 "@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(),
-  });
+const mounted = mountAddProfile({
+  container: document.getElementById("add-profile-root"),
+  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>
-```
+## Context and API
 
-```js
-import { mountAddProfile } from "@zwayam/apply-experience-library";
-import "@zwayam/apply-experience-library/styles.css";
+The host must provide:
 
-document.querySelector("#open-add-profile").addEventListener("click", () => {
-  const mounted = mountAddProfile({
-    container: document.querySelector("#add-profile-root"),
-    context,
-    api,
-    onClose: () => mounted.unmount(),
-    onSuccess: () => mounted.unmount(),
-  });
-});
-```
+- job context
+- logged-in user context
+- session context
+- host-owned API functions for loading fields, parsing resume, submitting profile, and optionally fetching location suggestions
 
-## Notes
+For the full API contract and framework-specific examples, see:
 
-- 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.
+- [../../README.md](../../README.md)