@zwayam/apply-experience-library 0.2.1 → 0.2.3

package/README.md

@@ -1,28 +1,14 @@
 # Apply Experience Library
 
-`@zwayam/apply-experience-library` is a host-facing SDK for launching **Add Profile** and **Edit Profile** popups inside recruiter or admin web applications.
+This package is the bundled web entrypoint for `@zwayam/apply-experience-library`.
 
-It is designed for hosts that already own authentication, API orchestration, and business rules, but want a reusable profile collection UI.
+It exposes framework-friendly mount helpers for launching **Add Profile** and **Edit Profile** popups from:
 
-## What the SDK Handles
-
-- resume upload and resume parsing flow
-- manual profile creation flow
-- add profile and edit profile popup UI
-- dynamic field rendering from backend `applyFields`
-- required validation, pattern validation, dependent field visibility
-- country code + phone input handling
-- source / source type / sub-source flow
-- optional location autosuggestions
-- final submit flow and success callbacks
-
-## What the Host App Handles
-
-- authentication and session
-- current job and user context
-- backend API calls
-- route-level state management
-- refresh / navigation after success
+- Angular
+- React
+- Vue
+- Vanilla JavaScript
+- Custom elements
 
 ## Install
 
@@ -30,457 +16,42 @@ It is designed for hosts that already own authentication, API orchestration, and
 npm install @zwayam/apply-experience-library
 ```
 
-Import styles once in your host app:
+Import styles once:
 
 ```ts
 import "@zwayam/apply-experience-library/styles.css";
 ```
 
-## Exported API
-
-The package exposes:
-
-- `mountAddProfile(options)`
-- `mountEditProfile(options)`
-- `registerAddProfileElement(options)`
-- `registerEditProfileElement(options)`
-
-Use `mount*` for direct framework integration. Use `register*Element` if you prefer custom elements.
-
-## How It Is Built
-
-The SDK is made in two layers:
-
-1. `packages/react`
-   - React implementation of Add Profile / Edit Profile
-   - field rendering, validations, workflow logic
-
-2. `packages/web`
-   - bundled host-facing package
-   - exports mount helpers that work in Angular, React, Vue, and vanilla JS
-
-This means host apps do not need to know the internal React implementation details. They only provide `context`, `api`, and a DOM `container`.
-
-## Add Profile Context
-
-```ts
-type AddProfileHostContext = {
-  job: {
-    id: string;
-    companyId: number | string;
-    departmentId?: number | string;
-    jobTitle: string;
-    jobCode: string;
-    location?: string;
-    minYearOfExperience?: number;
-    maxYearOfExperience?: number;
-    departmentName?: string;
-  };
-  user: {
-    id: string | number;
-    email: string;
-    name: string;
-    uuid?: string;
-  };
-  session: {
-    sessionId: string;
-  };
-  environment?: Record<string, string>;
-};
-```
-
-### Example
+## Main Exports
 
-```ts
-const addProfileContext = {
-  job: {
-    id: "263294",
-    companyId: 16136,
-    departmentId: 12,
-    jobTitle: "Java Developer",
-    jobCode: "16667",
-    location: "Pune, Maharashtra, India",
-    minYearOfExperience: 2,
-    maxYearOfExperience: 5,
-    departmentName: "Engineering",
-  },
-  user: {
-    id: 286813,
-    email: "recruiter@example.com",
-    name: "Recruiter Name",
-    uuid: "host-user-uuid",
-  },
-  session: {
-    sessionId: "SESSION_ID",
-  },
-  environment: {
-    tenant: "prod",
-  },
-};
-```
-
-## Edit Profile Context
+- `mountAddProfile`
+- `mountEditProfile`
+- `registerAddProfileElement`
+- `registerEditProfileElement`
 
-Edit Profile uses everything from Add Profile, plus:
+## Quick Example
 
 ```ts
-type EditProfileHostContext = AddProfileHostContext & {
-  applyId: string | number;
-  application?: Record<string, unknown>;
-};
-```
-
-### Example
-
-```ts
-const editProfileContext = {
-  ...addProfileContext,
-  applyId: 987654,
-  application: {
-    applyId: 987654,
-    candidateId: 12345,
-  },
-};
-```
-
-## Add Profile API Contract
-
-```ts
-type AddProfileApi = {
-  loadInitialData(
-    context: AddProfileHostContext,
-  ): Promise<{
-    applyFields: AddProfileFieldDefinition[];
-    supportedFiles: {
-      addProfile?: {
-        fileFormat: string[];
-        fileSize?: number;
-      };
-    };
-    profileSources: Array<{
-      sourceOfProfile?: string;
-      profileSource: string;
-      subSourceValues?: string | null;
-    }>;
-    phoneConfiguration: {
-      countryIsoCode: string | null;
-      whatsAppEnabled: boolean;
-      maxCount: number;
-    };
-    resumeOptional?: boolean;
-  }>;
-
-  parseResume(
-    file: File,
-    context: AddProfileHostContext,
-  ): Promise<{
-    responseCode?: number;
-    reponseObject?: {
-      parsedObjectId?: string;
-      parsedResult?: {
-        profile?: Record<string, unknown>;
-      };
-      jobApplication?: Record<string, unknown>;
-    };
-  }>;
-
-  submitProfile(
-    payload: FormData,
-    context: AddProfileHostContext,
-  ): Promise<{
-    code?: number;
-    message?: string;
-    [key: string]: unknown;
-  }>;
-
-  getLocationSuggestions?(
-    query: string,
-    context: AddProfileHostContext,
-  ): Promise<string[]>;
-};
-```
-
-## Edit Profile API Contract
-
-```ts
-type EditProfileApi = {
-  loadInitialData(
-    context: EditProfileHostContext,
-  ): Promise<{
-    jobApplication: Record<string, unknown>;
-    applyFieldsObject: Record<string, unknown>;
-    applyFields: AddProfileFieldDefinition[];
-    phoneConfiguration: {
-      countryIsoCode: string | null;
-      whatsAppEnabled: boolean;
-      maxCount: number;
-    };
-    phoneNumbers?: Array<Record<string, unknown>>;
-    supportedFiles?: {
-      addProfile?: {
-        fileFormat: string[];
-        fileSize?: number;
-      };
-    };
-  }>;
-
-  submitProfile(
-    payload: Record<string, unknown>,
-    context: EditProfileHostContext,
-  ): Promise<{
-    code?: number;
-    message?: string;
-    [key: string]: unknown;
-  }>;
-
-  getLocationSuggestions?(
-    query: string,
-    context: EditProfileHostContext,
-  ): Promise<string[]>;
-};
-```
-
-## Field Definitions
-
-The SDK renders fields from backend `applyFields`.
-
-Common field types include:
-
-- `T` for text-like inputs
-- `D` for searchable dropdowns
-- `date`
-- `phone`
-- `checkbox`
-- `location`
-- `email`
-- `consent`
-
-Notes:
-
-- `field.errorMessage` is used as first priority for validation messages when present.
-- Generated SDK validation messages are used as fallback when API does not provide one.
-- Currency formatting follows field metadata type such as `INRCURRENCY` / `CURRENCY`, matching host behavior.
-
-## React Usage
-
-```tsx
-import { useEffect, useRef } from "react";
-import {
-  mountAddProfile,
-  type MountedAddProfile,
-  type AddProfileApi,
-  type AddProfileHostContext,
-} from "@zwayam/apply-experience-library";
-import "@zwayam/apply-experience-library/styles.css";
+import { mountAddProfile } from "@zwayam/apply-experience-library";
 
-export function AddProfileLauncher({
-  open,
+const mounted = mountAddProfile({
+  container: document.getElementById("add-profile-root"),
   context,
   api,
-  onClose,
-}: {
-  open: boolean;
-  context: AddProfileHostContext;
-  api: AddProfileApi;
-  onClose(): void;
-}) {
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const mountedRef = useRef<MountedAddProfile | null>(null);
-
-  useEffect(() => {
-    if (!open || !rootRef.current) return;
-
-    mountedRef.current = mountAddProfile({
-      container: rootRef.current,
-      context,
-      api,
-      title: "Add Profile",
-      onClose,
-      onSuccess: () => {
-        mountedRef.current?.unmount();
-        onClose();
-      },
-    });
-
-    return () => mountedRef.current?.unmount();
-  }, [open, context, api, onClose]);
-
-  return <div ref={rootRef} />;
-}
-```
-
-## Angular Usage
-
-Import styles once in a global stylesheet:
-
-```scss
-@import "@zwayam/apply-experience-library/styles.css";
-```
-
-Mount from a component or service:
-
-```ts
-import {
-  mountAddProfile,
-  type MountedAddProfile,
-  type AddProfileApi,
-  type AddProfileHostContext,
-} from "@zwayam/apply-experience-library";
-
-private mountedAddProfile?: MountedAddProfile;
-
-openAddProfile(container: Element, context: AddProfileHostContext, api: AddProfileApi) {
-  this.mountedAddProfile = mountAddProfile({
-    container,
-    context,
-    api,
-    title: "Add Profile",
-    onClose: () => this.mountedAddProfile?.unmount(),
-    onSuccess: () => {
-      this.mountedAddProfile?.unmount();
-      // refresh host data here
-    },
-  });
-}
-```
-
-## Vue Usage
-
-```vue
-<script setup lang="ts">
-import { onBeforeUnmount, watch, ref } from "vue";
-import { mountAddProfile } from "@zwayam/apply-experience-library";
-import "@zwayam/apply-experience-library/styles.css";
-
-const props = defineProps<{
-  open: boolean;
-  context: any;
-  api: any;
-}>();
-
-const root = ref<HTMLElement | null>(null);
-let mounted: ReturnType<typeof mountAddProfile> | null = null;
-
-watch(
-  () => props.open,
-  (open) => {
-    if (!open || !root.value) return;
-
-    mounted = mountAddProfile({
-      container: root.value,
-      context: props.context,
-      api: props.api,
-      onClose: () => mounted?.unmount(),
-      onSuccess: () => mounted?.unmount(),
-    });
-  },
-);
-
-onBeforeUnmount(() => mounted?.unmount());
-</script>
-
-<template>
-  <div ref="root"></div>
-</template>
-```
-
-## Vanilla JavaScript Usage
-
-```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.getElementById("open-add-profile").addEventListener("click", () => {
-  const mounted = mountAddProfile({
-    container: document.getElementById("add-profile-root"),
-    context: addProfileContext,
-    api: addProfileApi,
-    onClose: () => mounted.unmount(),
-    onSuccess: () => mounted.unmount(),
-  });
+  onClose: () => mounted.unmount(),
+  onSuccess: () => mounted.unmount(),
 });
 ```
 
-## Custom Element Usage
+## Context and API
 
-```ts
-import {
-  registerAddProfileElement,
-  registerEditProfileElement,
-} from "@zwayam/apply-experience-library";
+The host must provide:
 
-registerAddProfileElement({
-  getApi: () => addProfileApi,
-  getContext: () => addProfileContext,
-});
+- job context
+- logged-in user context
+- session context
+- host-owned API functions for loading fields, parsing resume, submitting profile, and optionally fetching location suggestions
 
-registerEditProfileElement({
-  getApi: () => editProfileApi,
-  getContext: () => editProfileContext,
-});
-```
-
-Then use:
-
-```html
-<apply-experience-add-profile></apply-experience-add-profile>
-<apply-experience-edit-profile></apply-experience-edit-profile>
-```
-
-## Example API Object
+For the full API contract and framework-specific examples, see:
 
-```ts
-const addProfileApi = {
-  loadInitialData: async (context) => {
-    const response = await fetch(`/api/apply-fields?jobId=${context.job.id}`);
-    return response.json();
-  },
-
-  parseResume: async (file, context) => {
-    const formData = new FormData();
-    formData.append("file", file);
-    formData.append("sessionId", context.session.sessionId);
-    const response = await fetch("/api/parse-resume", {
-      method: "POST",
-      body: formData,
-    });
-    return response.json();
-  },
-
-  submitProfile: async (payload, context) => {
-    payload.append("sessionId", context.session.sessionId);
-    const response = await fetch("/api/add-profile", {
-      method: "POST",
-      body: payload,
-    });
-    return response.json();
-  },
-
-  getLocationSuggestions: async (query) => {
-    if (!query.trim()) return [];
-    const response = await fetch(`/api/location-suggestions?q=${encodeURIComponent(query)}`);
-    const data = await response.json();
-    return data.suggestions || [];
-  },
-};
-```
-
-## Development
-
-```bash
-npm install
-npm run build
-npm run playground
-```
-
-## Publish
-
-```bash
-npm run build
-npm publish --access public
-```
+- [../../README.md](../../README.md)

package/{packages/web/dist → dist}/index.d.ts

@@ -28,6 +28,7 @@ export interface MountEditProfileOptions {
     api: EditProfileApi;
     context: EditProfileHostContext;
     title?: string;
+    candidateSettingsUrl?: string;
     onClose?(): void;
     onSuccess?(result: unknown): void;
     showSubmitToast?: boolean;