@recruitnepal/shared-packages 1.7.1 → 1.7.4

package/dist/components/cv-builder/forms/ExperienceForm.js

@@ -0,0 +1,266 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { BulletListTextarea } from '@/components/ui/BulletListTextarea';
+import { monthsDropdown, yearsDropdown } from '@/utils/commonDropdownOptions';
+import { Plus, Trash2 } from 'lucide-react';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+import IndustrySelect from '@/components/common/IndustrySelect';
+import DesignationSelect from '@/components/common/DesignationSelect';
+import NoData from '@/components/common/no-data';
+const dateSchema = z.object({
+    year: z
+        .union([
+        z.number().int().gte(1000).lte(9999),
+        z.string().regex(/^\d{4}$/, 'Year must be a 4-digit number'),
+    ])
+        .transform((val) => (typeof val === 'string' ? Number(val) : val)),
+    month: z
+        .union([
+        z.number().int().gte(1).lte(12),
+        z.string().regex(/^([1-9]|1[0-2])$/, 'Month must be between 1 and 12'),
+    ])
+        .transform((val) => (typeof val === 'string' ? Number(val) : val)),
+    day: z
+        .union([
+        z.number().int().default(1),
+        z.string().transform((val) => Number(val)),
+    ])
+        .default(1),
+});
+const workExperienceSchema = z
+    .object({
+    id: z.string().optional(),
+    organization_name: z
+        .string()
+        .min(1, { message: 'Organization Name is required' }),
+    industry_id: z
+        .string()
+        .min(1, { message: 'Organization Industry is required' }),
+    designation: z.string().min(1, { message: 'Position is required' }),
+    still_working: z.boolean().default(false),
+    key_responsibilities: z
+        .array(z.string())
+        .min(1, { message: 'At least one key responsibility is required' })
+        .refine((arr) => arr.some((s) => String(s).trim().length > 0), { message: 'At least one key responsibility is required' }),
+    start: dateSchema,
+    end: z.union([dateSchema, z.null()]).optional(),
+})
+    .refine((data) => {
+    if (data.still_working) {
+        return data.end === null || data.end === undefined;
+    }
+    return data.end !== null && data.end !== undefined;
+}, {
+    message: 'End date is required when not currently working',
+    path: ['end'],
+});
+const workExperienceFormSchema = z.object({
+    workExpEntries: z
+        .array(workExperienceSchema)
+        .min(0, 'Work experience entries are optional'),
+});
+export default function ExperienceForm() {
+    const { live, setSections } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    // Removed direct hooks and state - now using IndustrySelect and DesignationSelect components
+    // Normalize highlights from API/live (highlights array or description string) to string[]
+    const normalizeHighlights = useCallback((exp) => {
+        if (Array.isArray(exp.highlights) && exp.highlights.length) {
+            return exp.highlights.map(String).filter(Boolean);
+        }
+        const text = exp.description || '';
+        if (!String(text).trim())
+            return [];
+        return String(text)
+            .split(/\r?\n|•|·|\u2022|;|-(?=\s)|\s*●\s*/g)
+            .map((s) => s.replace(/^[-–—•·●\s]+/, '').trim())
+            .filter(Boolean);
+    }, []);
+    const experienceList = useMemo(() => {
+        if (!live?.sections?.experience || !Array.isArray(live.sections.experience)) {
+            return [];
+        }
+        return live.sections.experience.map((exp) => {
+            const bullets = normalizeHighlights(exp);
+            return {
+                id: exp.id || `exp_${Date.now()}`,
+                organization_name: exp.company || '',
+                industry_id: '', // Industry ID - will be empty for old data
+                designation: exp.position || '', // Store designation title directly
+                still_working: exp.current || !exp.endDate,
+                key_responsibilities: bullets.length > 0 ? bullets : [''],
+                start: exp.startDate
+                    ? {
+                        year: new Date(exp.startDate).getFullYear(),
+                        month: new Date(exp.startDate).getMonth() + 1,
+                        day: 1,
+                    }
+                    : { year: new Date().getFullYear(), month: 1, day: 1 },
+                end: exp.endDate && !exp.current
+                    ? {
+                        year: new Date(exp.endDate).getFullYear(),
+                        month: new Date(exp.endDate).getMonth() + 1,
+                        day: 1,
+                    }
+                    : null,
+            };
+        });
+    }, [live?.sections?.experience, normalizeHighlights]);
+    const form = useForm({
+        resolver: zodResolver(workExperienceFormSchema),
+        defaultValues: {
+            workExpEntries: experienceList.length > 0 ? experienceList : [],
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name: 'workExpEntries',
+    });
+    // Track if we've initialized to prevent reset loops
+    const initializedRef = useRef(false);
+    const prevExperienceListRef = useRef('');
+    useEffect(() => {
+        const currentListStr = JSON.stringify(experienceList);
+        // Only reset if:
+        // 1. We haven't initialized yet AND there's data
+        // 2. OR the data actually changed from an external source (different structure)
+        if (!initializedRef.current && experienceList.length > 0) {
+            form.reset({ workExpEntries: experienceList });
+            initializedRef.current = true;
+            prevExperienceListRef.current = currentListStr;
+        }
+        else if (initializedRef.current && prevExperienceListRef.current !== currentListStr) {
+            // Only reset if the structure changed significantly (e.g., loading a draft)
+            const prevList = JSON.parse(prevExperienceListRef.current || '[]');
+            const currentIds = experienceList.map(e => e.id).sort().join(',');
+            const prevIds = prevList.map((e) => e.id).sort().join(',');
+            // Only reset if IDs changed (new draft loaded) or count changed significantly
+            if (currentIds !== prevIds || Math.abs(experienceList.length - prevList.length) > 0) {
+                form.reset({ workExpEntries: experienceList });
+                prevExperienceListRef.current = currentListStr;
+            }
+        }
+    }, [experienceList, form]);
+    useEffect(() => {
+        const subscription = form.watch((value, { name }) => {
+            if (name?.includes('still_working')) {
+                const index = name.split('.')[1];
+                const isStillWorking = value.workExpEntries?.[index]?.still_working;
+                if (isStillWorking) {
+                    form.setValue(`workExpEntries.${index}.end`, null);
+                }
+                else {
+                    form.setValue(`workExpEntries.${index}.end`, {
+                        year: new Date().getFullYear(),
+                        month: 1,
+                        day: 1,
+                    });
+                }
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [form]);
+    const getMonthName = (monthNumber) => {
+        const monthObj = monthsDropdown.find((m) => m.value === monthNumber);
+        return monthObj ? monthObj.label : '';
+    };
+    const formatWorkDateRange = (startDate, endDate, stillWorking) => {
+        if (!startDate || (!startDate.year && !startDate.month))
+            return '';
+        const startMonth = getMonthName(startDate.month);
+        const startYear = startDate.year;
+        const startDisplay = startMonth && startYear ? `${startMonth} ${startYear}` : startYear || '';
+        if (stillWorking)
+            return `${startDisplay} - Present`;
+        if (!endDate || (!endDate.year && !endDate.month))
+            return startDisplay;
+        const endMonth = getMonthName(endDate.month);
+        const endYear = endDate.year;
+        const endDisplay = endMonth && endYear ? `${endMonth} ${endYear}` : endYear || '';
+        return `${startDisplay} - ${endDisplay}`;
+    };
+    // ---- LIVE PREVIEW: Experience ----
+    const debRefExp = useRef(null);
+    const toIso = useCallback((d) => d?.year ? `${d.year}-${String(d.month || 1).padStart(2, '0')}-01` : '', []);
+    const mapExp = useCallback((rows) => rows.map((r) => {
+        const bullets = Array.isArray(r.key_responsibilities)
+            ? r.key_responsibilities.map(String).filter(Boolean)
+            : [];
+        const designationTitle = r.designation || '';
+        return {
+            id: r.id || `exp_${Date.now()}`,
+            company: r.organization_name || '',
+            position: designationTitle,
+            location: '',
+            startDate: toIso(r.start) || '',
+            endDate: r.still_working ? undefined : toIso(r.end),
+            current: r.still_working || false,
+            highlights: bullets,
+        };
+    }), [toIso]);
+    const pushExp = useCallback((payload) => {
+        clearTimeout(debRefExp.current);
+        debRefExp.current = setTimeout(() => setSections({ experience: payload }), 180);
+    }, [setSections]);
+    useEffect(() => {
+        const sub = form.watch((_v) => {
+            const vals = form.getValues().workExpEntries ?? [];
+            pushExp(mapExp(vals));
+        });
+        pushExp(mapExp(form.getValues().workExpEntries ?? []));
+        return () => sub.unsubscribe();
+    }, [form, pushExp, mapExp]);
+    // Update draft when data changes
+    useEffect(() => {
+        const currentDraft = getCurrentDraft();
+        if (currentDraft && live) {
+            updateDraft(currentDraft.id, {
+                cv_data: live,
+            });
+        }
+    }, [live, getCurrentDraft, updateDraft]);
+    return (_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "Work Experience" }), _jsx("p", { className: "text-sm mb-6", children: "Add your work experience. List your previous positions and responsibilities." }), _jsx(Form, { ...form, children: _jsxs("form", { className: "flex flex-col gap-3", children: [!fields.length && _jsx(NoData, {}), fields.map((field, index) => {
+                            const isStillWorking = form.watch(`workExpEntries.${index}.still_working`);
+                            const dateRange = formatWorkDateRange(field.start, field.end, isStillWorking);
+                            // Get designation and organization name for display
+                            const currentDesignation = form.watch(`workExpEntries.${index}.designation`);
+                            const organizationName = form.watch(`workExpEntries.${index}.organization_name`);
+                            return (_jsx("div", { className: "space-y-6", children: _jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: `work-${index}`, className: "border-none", children: [_jsxs("div", { className: "flex items-center justify-between bg-primary/10 py-3 px-4 rounded-xl", children: [_jsx(AccordionTrigger, { className: "min-h-[70px] flex-grow hover:no-underline p-0 text-left items-start", children: _jsxs("div", { className: "flex flex-col items-start w-full", children: [_jsx("p", { className: "text-base font-semibold line-clamp-1", children: organizationName || 'New Work Experience' }), _jsx("p", { className: "text-sm font-light line-clamp-1", children: currentDesignation || 'Position' }), dateRange && (_jsx("p", { className: "text-sm font-medium text-gray-600 line-clamp-1", children: dateRange }))] }) }), _jsx("div", { className: "pl-3 border-l border-black/60 ml-4", children: _jsx(Button, { variant: "link", type: "button", size: "sm", onClick: (e) => {
+                                                                e.stopPropagation();
+                                                                remove(index);
+                                                            }, className: "h-8 w-8 p-0 hover:text-destructive", children: _jsx(Trash2, { size: 20, className: "hover:text-destructive" }) }) })] }), _jsx(AccordionContent, { children: _jsxs("div", { className: "p-4 pt-0 space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsx(FormField, { control: form.control, name: `workExpEntries.${index}.organization_name`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Company/Organization" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Enter Company Name", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.designation`, render: ({ field }) => {
+                                                                        return (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Position/Designation" }), _jsx(FormControl, { children: _jsx(DesignationSelect, { value: field.value || '', onChange: field.onChange, placeholder: "Select Position / Designation", valueType: "title", className: "h-9" }) }), _jsx(FormMessage, {})] }));
+                                                                    } })] }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.industry_id`, render: ({ field }) => {
+                                                                return (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Industry" }), _jsx(FormControl, { children: _jsx(IndustrySelect, { value: field.value || '', onChange: field.onChange, placeholder: "Select Industry", className: "h-9" }) }), _jsx(FormMessage, {})] }));
+                                                            } }), _jsxs("div", { className: "md:flex gap-4", children: [_jsxs("div", { className: "flex gap-2 flex-col w-full sm:w-1/2 mb-3 sm:mb-0", children: [_jsx(FormLabel, { children: "Starting From" }), _jsxs("div", { className: "sm:flex gap-2 w-full space-y-2 sm:space-y-0", children: [_jsx(FormField, { control: form.control, name: `workExpEntries.${index}.start.month`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full sm:w-1/2", children: [_jsxs("select", { value: field.value || '', onChange: (e) => field.onChange(Number(e.target.value)), className: "border rounded-md h-9 px-2 text-sm w-full", children: [_jsx("option", { value: "", children: "Select Month" }), monthsDropdown.map((month) => (_jsx("option", { value: month.value, children: month.label }, month.value)))] }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.start.year`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full sm:w-1/2", children: [_jsxs("select", { value: field.value || '', onChange: (e) => field.onChange(Number(e.target.value)), className: "border rounded-md h-9 px-2 text-sm w-full", children: [_jsx("option", { value: "", children: "Select Year" }), yearsDropdown.map((year) => (_jsx("option", { value: year, children: year }, year)))] }), _jsx(FormMessage, {})] })) })] }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.still_working`, render: ({ field }) => (_jsxs(FormItem, { className: "flex flex-row items-center gap-2 mt-2", children: [_jsx(FormControl, { children: _jsx(Checkbox, { checked: field.value, onCheckedChange: field.onChange }) }), _jsx(FormLabel, { children: "Still Working" })] })) })] }), _jsxs("div", { className: "flex gap-2 flex-col w-full sm:w-1/2 mb-3 sm:mb-0", children: [_jsx(FormLabel, { className: isStillWorking ? 'text-gray-400' : '', children: "Ending In" }), _jsxs("div", { className: "sm:flex gap-2 w-full space-y-2 sm:space-y-0", children: [_jsx(FormField, { control: form.control, name: `workExpEntries.${index}.end.month`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full sm:w-1/2", children: [_jsxs("select", { value: field.value || '', onChange: (e) => field.onChange(Number(e.target.value)), disabled: isStillWorking, className: "border rounded-md h-9 px-2 text-sm w-full", children: [_jsx("option", { value: "", children: "Select Month" }), monthsDropdown.map((month) => (_jsx("option", { value: month.value, children: month.label }, month.value)))] }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.end.year`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full sm:w-1/2", children: [_jsxs("select", { value: field.value || '', onChange: (e) => field.onChange(Number(e.target.value)), disabled: isStillWorking, className: "border rounded-md h-9 px-2 text-sm w-full", children: [_jsx("option", { value: "", children: "Select Year" }), yearsDropdown.map((year) => (_jsx("option", { value: year, children: year }, year)))] }), _jsx(FormMessage, {})] })) })] })] })] }), _jsx(FormField, { control: form.control, name: `workExpEntries.${index}.key_responsibilities`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Key Responsibilities" }), _jsx(FormControl, { children: _jsx(BulletListTextarea, { value: field.value, onChange: field.onChange, placeholder: "\u2022 e.g. Developed and maintained search ranking features", hint: "Press Enter for a new bullet. Each line is one point." }) }), _jsx(FormMessage, {})] })) })] }) })] }) }) }, field.id));
+                        }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "text-primary w-fit", onClick: () => {
+                                append({
+                                    id: undefined,
+                                    organization_name: '',
+                                    industry_id: '',
+                                    designation: '',
+                                    key_responsibilities: [''],
+                                    start: {
+                                        year: new Date().getFullYear(),
+                                        month: 1,
+                                        day: 1,
+                                    },
+                                    end: {
+                                        year: new Date().getFullYear(),
+                                        month: 1,
+                                        day: 1,
+                                    },
+                                    still_working: false,
+                                });
+                            }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Add Experience"] })] }) })] }));
+}

package/dist/components/cv-builder/forms/PortfolioForm.d.ts

@@ -0,0 +1,2 @@
+export default function PortfolioForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PortfolioForm.d.ts.map

package/dist/components/cv-builder/forms/PortfolioForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortfolioForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/PortfolioForm.tsx"],"names":[],"mappings":"AAuGA,MAAM,CAAC,OAAO,UAAU,aAAa,4CAsNpC"}

package/dist/components/cv-builder/forms/PortfolioForm.js

@@ -0,0 +1,159 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+import { Facebook, Github, Instagram, Link2, Linkedin, Youtube, } from 'lucide-react';
+const uiFormSchema = z.object({
+    linkedin: z.string().url('Invalid Linkedin URL').or(z.literal('')),
+    github: z
+        .union([z.string().url('Invalid Github URL'), z.literal('')])
+        .optional(),
+    portfolio_link: z
+        .union([z.string().url('Invalid Portfolio URL'), z.literal('')])
+        .optional(),
+    facebook: z
+        .union([z.string().url('Invalid Facebook URL'), z.literal('')])
+        .optional(),
+    instagram: z
+        .union([z.string().url('Invalid Instagram URL'), z.literal('')])
+        .optional(),
+    youtube: z
+        .union([z.string().url('Invalid Youtube URL'), z.literal('')])
+        .optional(),
+});
+const IconInput = ({ icon: Icon, ...props }) => (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none", children: _jsx(Icon, { className: "h-5 w-5 text-[#4A90E2]" }) }), _jsx(Input, { className: "pl-12 h-14", ...props })] }));
+const buildLinksFromPortfolio = (p) => {
+    const normalize = (url) => {
+        const u = String(url ?? '').trim();
+        if (!u)
+            return '';
+        return /^https?:\/\//i.test(u) ? u : `https://${u}`;
+    };
+    const raw = [
+        p?.linkedin ? {
+            label: 'LinkedIn',
+            type: 'linkedin',
+            url: normalize(p.linkedin),
+        } : null,
+        p?.github ? { label: 'GitHub', type: 'github', url: normalize(p.github) } : null,
+        p?.portfolio_link ? {
+            label: 'Portfolio',
+            type: 'portfolio',
+            url: normalize(p.portfolio_link),
+        } : null,
+        p?.facebook ? {
+            label: 'Facebook',
+            type: 'website',
+            url: normalize(p.facebook),
+        } : null,
+        p?.instagram ? {
+            label: 'Instagram',
+            type: 'website',
+            url: normalize(p.instagram),
+        } : null,
+        p?.youtube ? {
+            label: 'YouTube',
+            type: 'website',
+            url: normalize(p.youtube),
+        } : null,
+    ];
+    const seen = new Set();
+    return raw
+        .filter(Boolean)
+        .map((l) => ({ ...l, url: l.url.trim() }))
+        .filter((l) => l.url.length > 0 && (seen.has(l.url) ? false : (seen.add(l.url), true)));
+};
+export default function PortfolioForm() {
+    const { live, setPersonal } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    // Transform links from live data to form format
+    const defaultValues = useMemo(() => {
+        const values = {
+            linkedin: '',
+            github: '',
+            portfolio_link: '',
+            facebook: '',
+            instagram: '',
+            youtube: '',
+        };
+        if (live?.personalInfo?.links) {
+            live.personalInfo.links.forEach((link) => {
+                const key = link.type?.toLowerCase() || link.label?.toLowerCase() || '';
+                if (key.includes('linkedin'))
+                    values.linkedin = link.url;
+                else if (key.includes('github'))
+                    values.github = link.url;
+                else if (key.includes('portfolio') || key.includes('behance') || key.includes('dribbble'))
+                    values.portfolio_link = link.url;
+                else if (key.includes('facebook'))
+                    values.facebook = link.url;
+                else if (key.includes('instagram'))
+                    values.instagram = link.url;
+                else if (key.includes('youtube'))
+                    values.youtube = link.url;
+            });
+        }
+        return values;
+    }, [live?.personalInfo?.links]);
+    const form = useForm({
+        resolver: zodResolver(uiFormSchema),
+        defaultValues,
+    });
+    // Track if we've initialized to prevent reset loops
+    const initializedRef = useRef(false);
+    const prevLinksRef = useRef('');
+    useEffect(() => {
+        const currentLinksStr = JSON.stringify(defaultValues);
+        if (!initializedRef.current) {
+            form.reset(defaultValues);
+            initializedRef.current = true;
+            prevLinksRef.current = currentLinksStr;
+        }
+        else if (prevLinksRef.current !== currentLinksStr) {
+            // Only reset if links actually changed (e.g., loading a draft)
+            form.reset(defaultValues);
+            prevLinksRef.current = currentLinksStr;
+        }
+    }, [defaultValues, form]);
+    // ---- LIVE PREVIEW ----
+    const debRef = useRef(null);
+    const pushLinks = useCallback((links) => {
+        if (debRef.current)
+            window.clearTimeout(debRef.current);
+        debRef.current = window.setTimeout(() => {
+            setPersonal({ links });
+            const currentDraft = getCurrentDraft();
+            if (currentDraft && live) {
+                updateDraft(currentDraft.id, {
+                    cv_data: {
+                        ...live,
+                        personalInfo: { ...live.personalInfo, links },
+                    },
+                });
+            }
+        }, 160);
+    }, [setPersonal, getCurrentDraft, updateDraft, live]);
+    // Update preview while editing
+    useEffect(() => {
+        const sub = form.watch((_value, { name }) => {
+            // Watch all portfolio-related fields
+            if (name === 'linkedin' || name === 'github' || name === 'portfolio_link' || name === 'facebook' || name === 'instagram' || name === 'youtube') {
+                pushLinks(buildLinksFromPortfolio(form.getValues()));
+            }
+        });
+        pushLinks(buildLinksFromPortfolio(form.getValues()));
+        return () => {
+            sub?.unsubscribe?.();
+            if (debRef.current)
+                window.clearTimeout(debRef.current);
+        };
+    }, [form, pushLinks]);
+    return (_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "Portfolio & Social Links" }), _jsx("p", { className: "text-sm mb-6", children: "Add links to your portfolio, GitHub, LinkedIn, or other professional profiles." }), _jsx(Form, { ...form, children: _jsxs("form", { className: "space-y-4 mb-6", children: [_jsxs("div", { className: "space-y-2 bg-primary/10 p-4 rounded-xl", children: [_jsx("p", { className: "text-sm font-semibold", children: "Required Professional Profile" }), _jsx(FormField, { control: form.control, name: "linkedin", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Linkedin, placeholder: "LinkedIn Profile Link", ...field }) }), _jsx(FormMessage, {})] })) })] }), _jsxs(Card, { className: "p-4 space-y-2", children: [_jsx("p", { className: "text-sm font-semibold", children: "Professional Profile" }), _jsxs("div", { className: "space-y-4", children: [_jsx(FormField, { control: form.control, name: "github", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Github, placeholder: "GitHub Profile Link", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "portfolio_link", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Link2, placeholder: "Behance / Dribbble / Portfolio", ...field }) }), _jsx(FormMessage, {})] })) })] })] }), _jsxs(Card, { className: "p-4 space-y-2", children: [_jsx("p", { className: "text-sm font-semibold", children: "Additional Link" }), _jsxs("div", { className: "space-y-4", children: [_jsx(FormField, { control: form.control, name: "facebook", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Facebook, placeholder: "Facebook Profile Link", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "instagram", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Instagram, placeholder: "Instagram Profile Link", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "youtube", render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormControl, { children: _jsx(IconInput, { icon: Youtube, placeholder: "YouTube Channel Link", ...field }) }), _jsx(FormMessage, {})] })) })] })] })] }) })] }));
+}

package/dist/components/cv-builder/forms/ProjectsForm.d.ts

@@ -0,0 +1,2 @@
+export default function ProjectsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectsForm.d.ts.map

package/dist/components/cv-builder/forms/ProjectsForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/ProjectsForm.tsx"],"names":[],"mappings":"AA6CA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAkQnC"}

package/dist/components/cv-builder/forms/ProjectsForm.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { useCvPreview } from '@/stores/cvPreview.store';
+import { useCvDraftsStore } from '@/stores/cvDrafts.store';
+import { MultiSelectOptions } from '@/components/multi-select';
+import { useSkills } from '@/hooks/api/useSkills';
+import { Plus, Trash2 } from 'lucide-react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '@/components/ui/accordion';
+import NoData from '@/components/common/no-data';
+const projectFormSchema = z.object({
+    id: z.string().optional(),
+    project_name: z.string().min(1, { message: 'Project Name is required' }),
+    project_description: z.string().min(1, { message: 'Project Description is required' }),
+    project_url: z.string().url().optional().or(z.literal('')),
+    skills_required: z.array(z.string()).default([]),
+});
+const projectFormArraySchema = z.object({
+    projectEntries: z.array(projectFormSchema).min(0),
+});
+export default function ProjectsForm() {
+    const { live, setSections } = useCvPreview();
+    const { getCurrentDraft, updateDraft } = useCvDraftsStore();
+    const { skillsQuery: infiniteSkillsQuery } = useSkills();
+    // Transform projects from live data to form format
+    const projectsList = useMemo(() => {
+        if (!live?.sections?.projects || !Array.isArray(live.sections.projects)) {
+            return [];
+        }
+        return live.sections.projects.map((proj) => ({
+            id: proj.id || `proj_${Date.now()}`,
+            project_name: proj.name || '',
+            project_description: proj.description || '',
+            project_url: proj.url || '',
+            skills_required: proj.technologies || [],
+        }));
+    }, [live?.sections?.projects]);
+    const form = useForm({
+        resolver: zodResolver(projectFormArraySchema),
+        defaultValues: {
+            projectEntries: projectsList.length > 0 ? projectsList : [],
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control: form.control,
+        name: 'projectEntries',
+    });
+    // Track if we've initialized to prevent reset loops
+    const initializedRef = useRef(false);
+    const prevProjectsListRef = useRef('');
+    useEffect(() => {
+        const currentListStr = JSON.stringify(projectsList);
+        // Only reset if:
+        // 1. We haven't initialized yet AND there's data
+        // 2. OR the data actually changed from an external source (different structure)
+        if (!initializedRef.current && projectsList.length > 0) {
+            form.reset({ projectEntries: projectsList });
+            initializedRef.current = true;
+            prevProjectsListRef.current = currentListStr;
+        }
+        else if (initializedRef.current && prevProjectsListRef.current !== currentListStr) {
+            // Only reset if the structure changed significantly (e.g., loading a draft)
+            const prevList = JSON.parse(prevProjectsListRef.current || '[]');
+            const currentIds = projectsList.map(e => e.id).sort().join(',');
+            const prevIds = prevList.map((e) => e.id).sort().join(',');
+            // Only reset if IDs changed (new draft loaded) or count changed significantly
+            if (currentIds !== prevIds || Math.abs(projectsList.length - prevList.length) > 0) {
+                form.reset({ projectEntries: projectsList });
+                prevProjectsListRef.current = currentListStr;
+            }
+        }
+    }, [projectsList, form]);
+    // ---- LIVE PREVIEW: Projects ----
+    const debRefProj = useRef(null);
+    const mapProjects = (rows) => rows.map((p, i) => ({
+        id: String(p.id ?? `tmp-proj-${i}`),
+        name: p.project_name || '',
+        description: p.project_description || '',
+        technologies: Array.isArray(p.skills_required) ? p.skills_required : [],
+        url: p.project_url || '',
+        startDate: undefined,
+        endDate: undefined,
+        highlights: [],
+    }));
+    const pushProjects = useCallback((payload) => {
+        if (debRefProj.current)
+            window.clearTimeout(debRefProj.current);
+        debRefProj.current = window.setTimeout(() => {
+            setSections({ projects: payload });
+        }, 160);
+    }, [setSections]);
+    useEffect(() => {
+        const sub = form.watch((_v, { name }) => {
+            if (!name?.startsWith('projectEntries'))
+                return;
+            pushProjects(mapProjects(form.getValues().projectEntries ?? []));
+        });
+        // bootstrap once on mount with defaults
+        pushProjects(mapProjects(form.getValues().projectEntries ?? []));
+        return () => {
+            sub?.unsubscribe?.();
+            if (debRefProj.current)
+                window.clearTimeout(debRefProj.current);
+        };
+    }, [form, pushProjects]);
+    // Update draft when data changes
+    useEffect(() => {
+        const currentDraft = getCurrentDraft();
+        if (currentDraft && live) {
+            updateDraft(currentDraft.id, {
+                cv_data: live,
+            });
+        }
+    }, [live, getCurrentDraft, updateDraft]);
+    return (_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl mb-2 font-medium", children: "Projects" }), _jsx("p", { className: "text-sm mb-6", children: "Add your projects and portfolio work. Showcase what you've built." }), _jsx(Form, { ...form, children: _jsxs("form", { className: "space-y-6 pb-24 lg:pb-0", children: [!fields.length && (_jsx(NoData, { description: "Click 'Add More' to add projects" })), fields.map((field, index) => (_jsx(Accordion, { type: "single", collapsible: true, children: _jsxs(AccordionItem, { value: `projects-${index}`, className: "border-none", children: [_jsxs("div", { className: "flex items-center justify-between bg-primary/10 py-3 px-4 rounded-xl accordion-grow", children: [_jsx(AccordionTrigger, { className: "min-h-[64px] flex-grow hover:no-underline p-0 text-left items-start", children: _jsxs("div", { className: "flex flex-col items-start w-full", children: [_jsx("p", { className: "text-base font-semibold line-clamp-1", children: form.watch(`projectEntries.${index}.project_name`) || 'New Project Entry' }), _jsx("p", { className: "text-sm font-light text-muted-foreground break-all line-clamp-1", children: form.watch(`projectEntries.${index}.project_url`) || 'www.website.com' })] }) }), _jsx("div", { className: "pl-3 border-l border-black/60 ml-4", children: _jsx(Button, { variant: "link", type: "button", size: "sm", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        remove(index);
+                                                    }, className: "h-8 w-8 p-0 hover:text-destructive", children: _jsx(Trash2, { size: 20, className: "text-text-primary hover:text-destructive" }) }) })] }), _jsx(AccordionContent, { children: _jsx("div", { className: "p-4 pt-0", children: _jsxs("div", { className: "space-y-4", children: [_jsx(FormField, { control: form.control, name: `projectEntries.${index}.project_name`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Project Name" }), _jsx(FormControl, { children: _jsx(Input, { placeholder: "Enter Project Name", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `projectEntries.${index}.project_url`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Project URL" }), _jsx(FormControl, { children: _jsx(Input, { type: "url", inputMode: "url", autoCapitalize: "none", autoCorrect: "off", placeholder: "https://example.com/project", className: "break-all", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `projectEntries.${index}.project_description`, render: ({ field }) => (_jsxs(FormItem, { className: "w-full", children: [_jsx(FormLabel, { children: "Project Description" }), _jsx(FormControl, { children: _jsx(Textarea, { placeholder: "Start typing\u2026", rows: 4, className: "resize-y", ...field }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: `projectEntries.${index}.skills_required`, render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: "Skills Required" }), _jsx(FormControl, { children: _jsx(MultiSelectOptions, { value: field.value || [], onChange: field.onChange, options: [], query: infiniteSkillsQuery }) }), _jsx(FormMessage, {})] })) })] }) }) })] }) }, field.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "text-primary w-fit", onClick: () => {
+                                append({
+                                    id: undefined,
+                                    project_description: '',
+                                    project_name: '',
+                                    project_url: '',
+                                    skills_required: [],
+                                });
+                            }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), " Add more"] })] }) })] }));
+}

package/dist/components/cv-builder/forms/SkillsForm.d.ts

@@ -0,0 +1,2 @@
+export default function SkillsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SkillsForm.d.ts.map

package/dist/components/cv-builder/forms/SkillsForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsForm.d.ts","sourceRoot":"","sources":["../../../../src/components/cv-builder/forms/SkillsForm.tsx"],"names":[],"mappings":"AA+EA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAygBjC"}