@zwayam/apply-experience-library 0.0.1

package/README.md

@@ -0,0 +1,22 @@
+# Zwayam UI Libraries
+
+Shared UI libraries for Zwayam applications.
+
+## Apply Experience Library
+
+`@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 directly from this GitLab repository:
+
+```bash
+npm install git+https://zwayam-gitlab.infoedge.com/zwayam/zwayam-ui-libraries.git#main
+```
+
+Import the SDK and stylesheet:
+
+```ts
+import { mountAddProfile, mountEditProfile } from "@zwayam/apply-experience-library";
+import "@zwayam/apply-experience-library/styles.css";
+```
+
+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

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

package/packages/apply-experience-sdk/README.md

@@ -0,0 +1,204 @@
+# Apply Experience Web SDK
+
+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.
+
+## Install From GitHub
+
+```bash
+npm install github:YOUR_GITHUB_USERNAME/YOUR_REPO_NAME#main
+```
+
+Or install a tagged version:
+
+```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";
+```
+
+Mount from a component:
+
+```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(),
+  });
+});
+
+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.

package/packages/apply-experience-sdk/packages/web/dist/index.d.ts

@@ -0,0 +1,48 @@
+import type { AddProfileApi, AddProfileHostContext, EditProfileApi, EditProfileHostContext } from "./publicTypes";
+export type { AddProfileApi, AddProfileFieldDefinition, AddProfileHostContext, AddProfileInitializationData, AddProfileSubmitResult, EditProfileApi, EditProfileHostContext, EditProfileInitializationData, PhoneConfiguration, ProfileSourceRecord, ResumeParseResponse, SupportedFileRule, SupportedFilesMap, } from "./publicTypes";
+export interface MountAddProfileOptions {
+    container: Element;
+    api: AddProfileApi;
+    context: AddProfileHostContext;
+    title?: string;
+    onClose?(): void;
+    onSuccess?(result: unknown): void;
+    showSubmitToast?: boolean;
+}
+export interface MountedAddProfile {
+    update(nextOptions: Omit<MountAddProfileOptions, "container">): void;
+    unmount(): void;
+}
+export declare function mountAddProfile(options: MountAddProfileOptions): MountedAddProfile;
+export interface RegisterAddProfileElementOptions {
+    tagName?: string;
+    getApi(): AddProfileApi;
+    getContext(): AddProfileHostContext;
+    onClose?(): void;
+    onSuccess?(result: unknown): void;
+    showSubmitToast?: boolean;
+}
+export declare function registerAddProfileElement(options: RegisterAddProfileElementOptions): string;
+export interface MountEditProfileOptions {
+    container: Element;
+    api: EditProfileApi;
+    context: EditProfileHostContext;
+    title?: string;
+    onClose?(): void;
+    onSuccess?(result: unknown): void;
+    showSubmitToast?: boolean;
+}
+export interface MountedEditProfile {
+    update(nextOptions: Omit<MountEditProfileOptions, "container">): void;
+    unmount(): void;
+}
+export declare function mountEditProfile(options: MountEditProfileOptions): MountedEditProfile;
+export interface RegisterEditProfileElementOptions {
+    tagName?: string;
+    getApi(): EditProfileApi;
+    getContext(): EditProfileHostContext;
+    onClose?(): void;
+    onSuccess?(result: unknown): void;
+    showSubmitToast?: boolean;
+}
+export declare function registerEditProfileElement(options: RegisterEditProfileElementOptions): string;