@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.8

package/dist/components/questions/types/look-picture-choose-correct-answer/LookPictureChooseCorrectAnswerCreator.js

@@ -1,230 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-import { Button } from '../../../../components/ui/button';
-import { Input } from '../../../../components/ui/input';
-import { Textarea } from '../../../../components/ui/textarea';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
-import { PointsInput } from '../../../../components/ui/points-input';
-import { RadioGroup } from '../../../../components/ui/radio-group';
-import { Pencil, Eye, Plus, Trash2, Image, CheckCircle2, Lightbulb, BookOpen } from 'lucide-react';
-import { FileUpload } from '../../../../components/ui/file-upload';
-import { ImagePreview } from '../../../../components/ui/image-preview';
-import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
-import { LookPictureChooseCorrectAnswerClient } from './LookPictureChooseCorrectAnswerClient';
-import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { lookPictureChooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/look-picture-choose-correct-answer.validation';
-function LookPictureChooseCorrectAnswerContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, optionCount = 2, validationRef, }) {
-    // Helper to normalize options - ensure they are always string[]
-    const normalizeOptions = (opts, defaultCount) => {
-        if (!opts || opts.length === 0) {
-            return Array.from({ length: defaultCount }, () => '');
-        }
-        // Options should always be string[] - convert each to string for safety
-        return opts.map((opt) => String(opt || ''));
-    };
-    // Use react-hook-form with Zod validation
-    // initialData can be in API format (content.imageUrl, correctAnswer.answer) or flat format
-    const apiData = initialData;
-    const rawOptions = apiData?.content?.options || apiData?.options || [];
-    const form = useReactHookForm({
-        defaultValues: {
-            // Support both API format (content.imageUrl) and flat format (imageUrl)
-            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
-            // Use normalizeOptions to ensure options are always string[]
-            options: normalizeOptions(rawOptions, optionCount),
-            // Support both API format (correctAnswer.answer) and flat format (correctAnswer as number)
-            correctAnswer: typeof apiData?.correctAnswer === 'object'
-                ? (apiData?.correctAnswer?.answer ?? -1)
-                : (apiData?.correctAnswer ?? -1),
-            explanation: apiData?.explanation || '',
-            points: apiData?.points ?? 1,
-        },
-        zodSchema: lookPictureChooseCorrectAnswerFormSchema,
-        mode: 'onBlur',
-    });
-    // UI State
-    const [isClientMode, setIsClientMode] = useState(false);
-    const [imagePreviewUrl, setImagePreviewUrl] = useState('');
-    // Track previous initialData to detect changes
-    const previousInitialDataRef = useRef(initialData);
-    const isInitializingRef = useRef(false);
-    const onChangeRef = useRef(onChange);
-    const previousPayloadRef = useRef('');
-    // Update onChange ref when it changes
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    // Debounced onChange callback to prevent excessive re-renders
-    const debouncedOnChange = useDebouncedCallback((data) => {
-        onChangeRef.current?.(data);
-    }, 300);
-    // Watch form values - MUST be declared before useEffects that use them
-    const watchedImageUrl = form.watch('imageUrl');
-    const watchedOptions = form.watch('options');
-    const watchedCorrectAnswer = form.watch('correctAnswer');
-    const watchedExplanation = form.watch('explanation');
-    const watchedPoints = form.watch('points');
-    // Custom hooks for presigned URL
-    const { previewUrl: generatedPreviewUrl } = usePresignedFileUrl(watchedImageUrl);
-    const displayPreviewUrl = imagePreviewUrl || generatedPreviewUrl || '';
-    // Expose validation function and getFormData via ref
-    useEffect(() => {
-        if (validationRef) {
-            validationRef.current = {
-                triggerValidation: async () => {
-                    const result = await form.trigger();
-                    // Also check correctAnswer
-                    if (watchedCorrectAnswer === -1) {
-                        form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-                        return false;
-                    }
-                    return result;
-                },
-                // Return current form data immediately (not debounced)
-                getFormData: () => ({
-                    imageUrl: watchedImageUrl,
-                    options: watchedOptions,
-                    correctAnswer: watchedCorrectAnswer,
-                    explanation: watchedExplanation,
-                    points: watchedPoints,
-                }),
-            };
-        }
-    }, [validationRef, form, watchedCorrectAnswer, watchedImageUrl, watchedOptions, watchedExplanation, watchedPoints]);
-    // Sync state from initialData when it changes from EXTERNAL sources only
-    useEffect(() => {
-        const apiData = initialData;
-        const normalizedInitialData = {
-            imageUrl: apiData?.content?.imageUrl || apiData?.imageUrl || '',
-            options: normalizeOptions(apiData?.content?.options || apiData?.options || [], optionCount),
-            correctAnswer: typeof apiData?.correctAnswer === 'object'
-                ? (apiData?.correctAnswer?.answer ?? -1)
-                : (apiData?.correctAnswer ?? -1),
-            explanation: apiData?.explanation || '',
-            points: apiData?.points ?? 1,
-        };
-        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
-        if (!initialDataChanged) {
-            return;
-        }
-        previousInitialDataRef.current = initialData;
-        const currentFormData = {
-            imageUrl: watchedImageUrl,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const isEchoFromOnChange = currentFormData.imageUrl === normalizedInitialData.imageUrl &&
-            currentFormData.correctAnswer === normalizedInitialData.correctAnswer &&
-            currentFormData.points === normalizedInitialData.points &&
-            currentFormData.explanation === normalizedInitialData.explanation &&
-            JSON.stringify(currentFormData.options) === JSON.stringify(normalizedInitialData.options);
-        const wasJustSaved = initialData?.isCompleted === true;
-        if (isEchoFromOnChange && wasJustSaved) {
-            return;
-        }
-        const shouldReset = !isEchoFromOnChange &&
-            normalizedInitialData.correctAnswer !== currentFormData.correctAnswer;
-        if (shouldReset && normalizedInitialData.correctAnswer !== -1) {
-            isInitializingRef.current = true;
-            form.reset(normalizedInitialData);
-            setTimeout(() => {
-                isInitializingRef.current = false;
-            }, 150);
-        }
-    }, [initialData, optionCount, form, watchedImageUrl, watchedOptions, watchedCorrectAnswer, watchedExplanation, watchedPoints]);
-    // Convert to payload format and call onChange
-    const watchedOptionsString = JSON.stringify(watchedOptions);
-    useEffect(() => {
-        if (isInitializingRef.current) {
-            const currentPayload = JSON.stringify({
-                imageUrl: watchedImageUrl,
-                options: watchedOptions,
-                correctAnswer: watchedCorrectAnswer,
-                explanation: watchedExplanation,
-                points: watchedPoints,
-            });
-            previousPayloadRef.current = currentPayload;
-            return;
-        }
-        const payload = {
-            imageUrl: watchedImageUrl,
-            options: watchedOptions,
-            correctAnswer: watchedCorrectAnswer,
-            explanation: watchedExplanation,
-            points: watchedPoints,
-        };
-        const payloadString = JSON.stringify(payload);
-        if (previousPayloadRef.current !== payloadString) {
-            previousPayloadRef.current = payloadString;
-            debouncedOnChange(payload);
-        }
-    }, [
-        watchedImageUrl,
-        watchedOptionsString,
-        watchedCorrectAnswer,
-        watchedExplanation,
-        watchedPoints,
-    ]);
-    // Handle save with validation
-    const handleSave = form.handleSubmit((data) => {
-        if (data.correctAnswer === -1 || data.correctAnswer >= data.options.length) {
-            form.setError('correctAnswer', { message: 'Vui lòng chọn đáp án đúng!' });
-            return;
-        }
-        onSave?.(data);
-    });
-    // Client mode preview
-    if (isClientMode) {
-        const questionData = {
-            subQuestions: [{
-                    id: 'preview-sq',
-                    imageUrl: displayPreviewUrl || watchedImageUrl,
-                    question: '',
-                    options: watchedOptions.map((text, index) => ({
-                        id: `opt-${index}`,
-                        text,
-                        isCorrect: index === watchedCorrectAnswer,
-                    })),
-                }],
-        };
-        const correctAnswers = watchedCorrectAnswer !== -1
-            ? { 'preview-sq': `opt-${watchedCorrectAnswer}` }
-            : {};
-        return (_jsx("div", { className: "space-y-6", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc - Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }), _jsx(CardContent, { children: _jsx(LookPictureChooseCorrectAnswerClient, { questionData: questionData, isReviewMode: true, userAnswer: correctAnswers, explanation: watchedExplanation }) })] }) }));
-    }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-cyan-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-cyan-500 via-teal-500 to-emerald-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-600 shadow-md", children: _jsx(Image, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: "Nh\u00ECn tranh, ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi v\u1EDBi h\u00ECnh \u1EA3nh v\u00E0 c\u00E1c l\u1EF1a ch\u1ECDn \u0111\u00E1p \u00E1n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { defaultValue: watchedPoints, onChange: (e) => form.setValue('points', Number(e.target.value) || 1) }) }), _jsxs("div", { className: "rounded-xl border-2 border-teal-100 bg-gradient-to-r from-teal-50/30 to-cyan-50/30 p-5", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(Image, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx("span", { className: "text-sm font-semibold text-teal-800", children: "H\u00ECnh \u1EA3nh c\u00E2u h\u1ECFi" })] }), _jsx(FileUpload, { id: "image-upload", label: "H\u00ECnh \u1EA3nh", accept: "image/*", value: watchedImageUrl, onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: (presignedUrl) => setImagePreviewUrl(presignedUrl), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", required: true, autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.formState.errors.imageUrl?.message })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview for question", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-sm font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                                        const currentOptions = form.getValues('options');
-                                        form.setValue('options', [...currentOptions, '']);
-                                    }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(RadioGroup, { value: watchedCorrectAnswer.toString(), onValueChange: (value) => {
-                                    form.setValue('correctAnswer', Number(value), { shouldValidate: true });
-                                }, children: watchedOptions.map((option, index) => {
-                                    const optionError = form.formState.errors.options?.[index];
-                                    const isCorrect = watchedCorrectAnswer === index;
-                                    const optionLetter = String.fromCharCode(65 + index);
-                                    return (_jsx("div", { className: `group relative rounded-xl border-2 p-4 transition-all duration-200 ${isCorrect
-                                            ? 'border-green-300 bg-gradient-to-r from-green-50 to-emerald-50 shadow-md shadow-green-100'
-                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}`, children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex h-10 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-xl font-bold transition-all ${isCorrect
-                                                        ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
-                                                        : 'bg-gray-100 text-gray-600 hover:bg-indigo-100 hover:text-indigo-600'}`, onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), children: optionLetter }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isCorrect && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => form.setValue('correctAnswer', index, { shouldValidate: true }), className: "text-gray-400 hover:text-green-600", title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) })), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
-                                                                const currentOptions = form.getValues('options');
-                                                                const newOptions = currentOptions.filter((_, i) => i !== index);
-                                                                form.setValue('options', newOptions);
-                                                                // Adjust correctAnswer if needed
-                                                                const currentCorrect = form.getValues('correctAnswer');
-                                                                if (currentCorrect === index) {
-                                                                    form.setValue('correctAnswer', -1);
-                                                                }
-                                                                else if (currentCorrect > index) {
-                                                                    form.setValue('correctAnswer', currentCorrect - 1);
-                                                                }
-                                                            }, className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }) }, index));
-                                }) }), watchedCorrectAnswer === -1 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "Ch\u01B0a ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "mt-0.5 text-amber-700", children: "Click v\u00E0o \u00F4 ch\u1EEF c\u00E1i ho\u1EB7c icon \u2713 \u0111\u1EC3 ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" })] })] })), form.hasError('correctAnswer') && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsx("div", { className: "text-sm text-red-600", children: form.formState.errors.correctAnswer?.message })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
-}
-export function LookPictureChooseCorrectAnswerCreator(props) {
-    return _jsx(LookPictureChooseCorrectAnswerContent, { ...props });
-}
-// Legacy export for backward compatibility
-export const LookPictureChooseCorrectAnswer = LookPictureChooseCorrectAnswerCreator;

package/dist/components/questions/types/look-picture-choose-correct-answer/index.d.ts

@@ -1 +0,0 @@
-export * from './LookPictureChooseCorrectAnswerCreator';

package/dist/components/questions/types/look-picture-choose-correct-answer/index.js

@@ -1 +0,0 @@
-export * from './LookPictureChooseCorrectAnswerCreator';

package/dist/components/questions/types/look-picture-choose-correct-answer/register.d.ts

@@ -1,2 +0,0 @@
-import type { QuestionTypeRegistration } from '../../creator/question-type-registry';
-export declare const lookPictureChooseCorrectAnswerRegistration: QuestionTypeRegistration;

package/dist/components/questions/types/look-picture-choose-correct-answer/register.js

@@ -1,66 +0,0 @@
-import { LookPictureChooseCorrectAnswer } from './LookPictureChooseCorrectAnswerCreator';
-export const lookPictureChooseCorrectAnswerRegistration = {
-    component: LookPictureChooseCorrectAnswer,
-    transformInitialData: (initialData) => {
-        let creatorData = undefined;
-        const content = initialData?.content;
-        const answer = initialData?.answer;
-        const apiPoints = initialData?.total_points
-            ? parseFloat(initialData.total_points)
-            : (initialData?.points || answer?.points || 1);
-        const normalizeOptions = (opts) => {
-            if (!Array.isArray(opts) || opts.length === 0)
-                return [];
-            return opts.map((opt) => String(opt || ''));
-        };
-        // Priority 1: Data from reverse transform or store
-        if (answer?.imageUrl !== undefined || answer?.options) {
-            creatorData = {
-                imageUrl: answer.imageUrl || '',
-                options: normalizeOptions(answer.options || []),
-                correctAnswer: typeof answer.correctAnswer === 'number' ? answer.correctAnswer : -1,
-                explanation: answer.explanation || initialData?.explanation || '',
-                points: answer.points || apiPoints,
-            };
-        }
-        // Priority 2: Raw API content format
-        else if (content && (content.imageUrl !== undefined || content.options)) {
-            let correctAnswer = -1;
-            if (typeof answer?.answer === 'number')
-                correctAnswer = answer.answer;
-            else if (typeof initialData?.correct_answer?.answer === 'number')
-                correctAnswer = initialData.correct_answer.answer;
-            creatorData = {
-                imageUrl: content.imageUrl || '',
-                options: normalizeOptions(content.options || []),
-                correctAnswer,
-                explanation: initialData?.explanation || '',
-                points: apiPoints,
-            };
-        }
-        return creatorData;
-    },
-    getExtraProps: (ctx) => ({
-        optionCount: ctx.optionCount ?? undefined,
-        onUnsavedChangesChange: ctx.onUnsavedChangesChange,
-        validationRef: ctx.validationRef,
-    }),
-    wrapOnSave: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-    wrapOnChange: (data, ctx) => ({
-        type: ctx.questionType,
-        content: ctx.state.content,
-        points: data?.points ?? ctx.state.points ?? 1,
-        level: ctx.state.level,
-        difficulty: ctx.state.difficulty,
-        skill: ctx.state.skill,
-        answer: data,
-    }),
-};

package/dist/components/questions/types/look-picture-choose-correct-answer/transform.d.ts

@@ -1,2 +0,0 @@
-import type { TransformHandler } from '../../../../shared/lib/utils/question-transform-types';
-export declare const transformLookPictureChooseCorrectAnswer: TransformHandler;

package/dist/components/questions/types/look-picture-choose-correct-answer/transform.js

@@ -1,42 +0,0 @@
-// LOOK_PICTURE_CHOOSE_CORRECT_ANSWER - flattened structure (always 1 question, no question text)
-// NEW FORMAT: content { imageUrl, options: string[] }, correct_answer { answer: number }
-export const transformLookPictureChooseCorrectAnswer = (question) => {
-    const answerData = question.answer;
-    // NEW format: { imageUrl, options: string[], correctAnswer: number, points }
-    if (answerData?.imageUrl !== undefined || answerData?.options) {
-        const options = (answerData.options || []).map((opt) => typeof opt === 'string' ? opt : (opt.text || ''));
-        let correctAnswer = -1;
-        if (typeof answerData.correctAnswer === 'number') {
-            correctAnswer = answerData.correctAnswer;
-        }
-        else if (Array.isArray(answerData.options)) {
-            correctAnswer = answerData.options.findIndex((opt) => opt.isCorrect === true);
-        }
-        return {
-            apiContent: {
-                imageUrl: answerData.imageUrl || '',
-                options,
-            },
-            apiCorrectAnswer: {
-                answer: correctAnswer,
-            },
-        };
-    }
-    // LEGACY format with subQuestions - convert to new format
-    const legacyData = answerData;
-    if (!legacyData?.subQuestions || legacyData.subQuestions.length === 0) {
-        return { apiContent: {}, apiCorrectAnswer: {} };
-    }
-    const sq = legacyData.subQuestions[0];
-    const options = (sq.options || []).map((opt) => opt.text || '');
-    const correctAnswerIndex = sq.options?.findIndex((opt) => opt.isCorrect) ?? -1;
-    return {
-        apiContent: {
-            imageUrl: sq.imageUrl || '',
-            options,
-        },
-        apiCorrectAnswer: {
-            answer: correctAnswerIndex,
-        },
-    };
-};

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient.d.ts

@@ -1,6 +0,0 @@
-import { LookAndChooseClientProps } from '../../_shared/types/look-and-choose-answer.type';
-interface ExtendedProps extends LookAndChooseClientProps {
-    explanation?: string;
-}
-export declare function LookPictureFillBlankChooseAnswerClient({ questionData, onSubmit, isReviewMode, userAnswer, correctAnswer, explanation, }: ExtendedProps): import("react").JSX.Element;
-export {};

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerClient.js

@@ -1,96 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Check, X, ImageIcon, Lightbulb } from 'lucide-react';
-import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
-import { cn } from '../../../../shared/lib/utils';
-export function LookPictureFillBlankChooseAnswerClient({ questionData, onSubmit, isReviewMode = false, userAnswer = '', correctAnswer = '', explanation, }) {
-    // Handle both flat structure and subQuestions structure
-    const flatData = questionData.subQuestions?.[0]
-        ? {
-            imageUrl: questionData.subQuestions[0].imageUrl,
-            question: questionData.subQuestions[0].question || '',
-            options: questionData.subQuestions[0].options.map(opt => ({ id: opt.id, text: opt.text })),
-        }
-        : {
-            imageUrl: questionData.imageUrl || '',
-            question: questionData.question || '',
-            options: questionData.options || [],
-        };
-    // State for selected answer
-    const initialAnswer = typeof userAnswer === 'string' ? userAnswer : userAnswer?.[questionData.subQuestions?.[0]?.id || ''] || '';
-    const [selectedAnswer, setSelectedAnswer] = useState(initialAnswer);
-    // Get presigned URL for image
-    const { previewUrl: imagePreviewUrl, isLoading } = usePresignedFileUrl(flatData.imageUrl || '');
-    // Check if answer is correct
-    const isAnswerCorrect = selectedAnswer === correctAnswer;
-    const hasAnswered = selectedAnswer !== '';
-    // Sync userAnswer when it changes
-    useEffect(() => {
-        const answer = typeof userAnswer === 'string' ? userAnswer : userAnswer?.[questionData.subQuestions?.[0]?.id || ''] || '';
-        setSelectedAnswer(answer);
-    }, [userAnswer, questionData.subQuestions]);
-    // Handle answer change
-    const handleAnswerChange = (optionId) => {
-        if (isReviewMode)
-            return;
-        setSelectedAnswer(optionId);
-        onSubmit?.(optionId);
-    };
-    // Replace {0} with styled blank for display
-    const renderQuestionWithBlank = () => {
-        const parts = flatData.question.split('{0}');
-        return (_jsx("span", { className: "text-gray-800", children: parts.map((part, idx) => (_jsxs("span", { children: [part, idx < parts.length - 1 && (_jsx("span", { className: "inline-flex items-center mx-1", children: _jsx("span", { className: "inline-block min-w-[80px] border-b-2 border-dashed border-blue-400 bg-blue-50/50 px-3 py-0.5 text-center text-blue-600 font-medium rounded", children: "___________" }) }))] }, idx))) }));
-    };
-    // Replace {0} with selected answer for preview
-    const renderQuestionWithAnswer = (answerText) => {
-        const parts = flatData.question.split('{0}');
-        return (_jsx("span", { children: parts.map((part, idx) => (_jsxs("span", { children: [part, idx < parts.length - 1 && (_jsx("span", { className: "inline-flex items-center mx-1", children: _jsx("span", { className: "inline-block rounded-md bg-gradient-to-r from-blue-500 to-indigo-500 px-3 py-0.5 text-white font-semibold shadow-sm", children: answerText }) }))] }, idx))) }));
-    };
-    // Get selected option text
-    const getSelectedOptionText = () => {
-        const option = flatData.options.find(opt => opt.id === selectedAnswer);
-        return option?.text || '';
-    };
-    // Get correct option text
-    const getCorrectOptionText = () => {
-        const option = flatData.options.find(opt => opt.id === correctAnswer);
-        return option?.text || '';
-    };
-    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm", children: _jsx(ImageIcon, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Nh\u00ECn tranh, \u0111i\u1EC1n t\u1EEB v\u00E0o ch\u1ED7 tr\u1ED1ng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAnswerCorrect
-                            ? 'bg-green-100 text-green-700'
-                            : 'bg-red-100 text-red-700'), children: [isAnswerCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [(imagePreviewUrl || flatData.imageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-purple-500" }) })) : (
-                                /* eslint-disable-next-line @next/next/no-img-element */
-                                _jsx("img", { src: imagePreviewUrl || flatData.imageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
-                                        const target = e.target;
-                                        target.onerror = null;
-                                        target.src = '/images/placeholder-image.svg';
-                                    } })) })] })), _jsx("div", { className: "rounded-lg bg-gradient-to-r from-gray-50 to-slate-50 p-4 border border-gray-100", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-purple-100 text-purple-600", children: _jsx("span", { className: "text-xs font-bold", children: "?" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "C\u00E2u h\u1ECFi" }), _jsx("p", { className: "mt-1 text-base font-medium leading-relaxed", children: renderQuestionWithBlank() })] })] }) }), _jsxs("div", { className: "space-y-2.5", children: [_jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n" }), flatData.options.map((option, optIndex) => {
-                                const isSelected = selectedAnswer === option.id;
-                                const isCorrectOption = option.id === correctAnswer;
-                                const letter = String.fromCharCode(65 + optIndex);
-                                return _jsxs("button", { type: "button", onClick: () => handleAnswerChange(option.id), disabled: isReviewMode, className: cn('group flex w-full items-center gap-3 rounded-lg border-2 p-3.5 text-left transition-all', isReviewMode
-                                        ? isCorrectOption
-                                            ? 'border-green-400 bg-green-50'
-                                            : isSelected
-                                                ? 'border-red-400 bg-red-50'
-                                                : 'border-gray-200 bg-gray-50'
-                                        : isSelected
-                                            ? 'border-purple-500 bg-purple-50 shadow-sm ring-2 ring-purple-100'
-                                            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all', isReviewMode
-                                                ? isCorrectOption
-                                                    ? 'bg-green-500 text-white'
-                                                    : isSelected
-                                                        ? 'bg-red-500 text-white'
-                                                        : 'bg-gray-200 text-gray-600'
-                                                : isSelected
-                                                    ? 'bg-gradient-to-br from-purple-500 to-indigo-600 text-white shadow-sm'
-                                                    : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), _jsx("div", { className: "flex-1", children: _jsx("span", { className: cn('text-sm font-medium', isReviewMode && isCorrectOption
-                                                    ? 'text-green-800'
-                                                    : isReviewMode && isSelected && !isCorrectOption
-                                                        ? 'text-red-800'
-                                                        : 'text-gray-700'), children: option.text }) }), isReviewMode && (isCorrectOption || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectOption ? 'bg-green-500' : 'bg-red-500'), children: isCorrectOption
-                                                ? _jsx(Check, { className: "h-4 w-4 text-white" })
-                                                : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, option.id);
-                            })] }), hasAnswered && !isReviewMode && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-purple-50 to-indigo-50 p-4 border border-purple-100", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-purple-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-purple-700 uppercase tracking-wider", children: "Preview c\u00E2u tr\u1EA3 l\u1EDDi" })] }), _jsx("p", { className: "text-sm text-gray-800 leading-relaxed", children: renderQuestionWithAnswer(getSelectedOptionText()) })] })), isReviewMode && hasAnswered && !isAnswerCorrect && (_jsxs("div", { className: "rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 border border-green-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-green-500 text-white", children: _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-xs font-semibold text-green-700 uppercase tracking-wider", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsx("p", { className: "text-sm text-gray-800 leading-relaxed", children: renderQuestionWithAnswer(getCorrectOptionText()) })] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: "Vui l\u00F2ng ch\u1ECDn m\u1ED9t \u0111\u00E1p \u00E1n" })] })), isReviewMode && explanation && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-200", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-xs font-semibold text-blue-700 uppercase tracking-wider", children: "Gi\u1EA3i th\u00EDch" }), _jsx("p", { className: "mt-1 text-sm text-gray-700 leading-relaxed", children: explanation })] })] }) }))] })] }));
-}

package/dist/components/questions/types/look-picture-fill-blank-choose-answer/LookPictureFillBlankChooseAnswerCreator.d.ts

@@ -1,15 +0,0 @@
-interface LookPictureFillBlankChooseAnswerCreatorProps {
-    initialData?: any;
-    onSave?: (data: any) => void;
-    onCancel?: () => void;
-    onChange?: (data: any) => void;
-    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
-    optionCount?: number;
-    validationRef?: React.MutableRefObject<{
-        triggerValidation: () => Promise<boolean>;
-        getFormData?: () => any;
-    } | null>;
-}
-export declare function LookPictureFillBlankChooseAnswerCreator(props: LookPictureFillBlankChooseAnswerCreatorProps): import("react").JSX.Element;
-export declare const LookPictureFillBlankChooseAnswer: typeof LookPictureFillBlankChooseAnswerCreator;
-export {};