@appcorp/fusion-storybook 0.2.3 → 0.2.5

package/base-modules/rbac/context.js

@@ -27,6 +27,7 @@ import { useDebounce } from "@react-pakistan/util-functions/hooks/use-debounce";
 import { createGenericModule } from "@react-pakistan/util-functions/factory/generic-module-factory";
 import { DRAWER_TYPES } from "@react-pakistan/util-functions/factory/generic-component-factory";
 import { generateThemeToast, TOAST_VARIANT, } from "@appcorp/shadcn/lib/toast-utils";
+import { USER_ROLE } from "../../type";
 import { RBAC_API_ROUTES, pageLimit } from "./constants";
 import { getCachedRoles, invalidateRolesCache } from "./cache";
 import { roleFormValidation } from "./validate";
@@ -452,13 +453,13 @@ export const useRbacModule = () => {
             order: 1,
         },
         {
-            enabled: true,
+            enabled: false,
             handleOnClick: handleEdit,
             label: t("actionsButtonEdit"),
             order: 2,
         },
         {
-            enabled: true,
+            enabled: false,
             handleOnClick: handleDelete,
             label: t("actionsButtonDelete"),
             order: 4,
@@ -479,7 +480,7 @@ export const useRbacModule = () => {
                     dispatch({
                         type: RBAC_ACTION_TYPES.SET_ITEMS,
                         payload: {
-                            items: items.filter((item) => item.name !== "SUPER_ADMIN") || [],
+                            items: items.filter((item) => item.userRole !== USER_ROLE.SUPER_ADMIN) || [],
                             count: count || 0,
                         },
                     });

package/base-modules/teacher/avatar-upload.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Teacher avatar upload utility
+ * Handles client-side file validation, WebP conversion, and upload orchestration
+ */
+/**
+ * Validation error type
+ */
+export interface AvatarUploadError {
+    type: "size" | "format" | "conversion" | "unknown";
+    message: string;
+}
+/**
+ * Result of avatar upload process
+ */
+export interface AvatarUploadResult {
+    success: true;
+    fileBase64: string;
+    contentType: "image/webp";
+    originalFileName: string;
+}
+/**
+ * Validate file size and format
+ */
+export declare function validateAvatarFile(file: File): AvatarUploadError | null;
+/**
+ * Convert image file to WebP format
+ */
+export declare function convertToWebPFormat(file: File): Promise<Blob | AvatarUploadError>;
+/**
+ * Convert blob to base64 string
+ */
+export declare function blobToBase64(blob: Blob): Promise<string>;
+/**
+ * Process avatar file: validate, convert to WebP, return base64
+ */
+export declare function processAvatarFile(file: File): Promise<AvatarUploadResult | AvatarUploadError>;

package/base-modules/teacher/avatar-upload.js

@@ -0,0 +1,103 @@
+/**
+ * Teacher avatar upload utility
+ * Handles client-side file validation, WebP conversion, and upload orchestration
+ */
+import { blobToWebP } from "webp-converter-browser";
+// Constants
+const MAX_FILE_SIZE = 100 * 1024; // 100KB in bytes
+const ALLOWED_MIME_TYPES = [
+    "image/webp",
+    "image/png",
+    "image/jpeg",
+    "image/jpg",
+    "image/gif",
+    "image/bmp",
+];
+/**
+ * Validate file size and format
+ */
+export function validateAvatarFile(file) {
+    // Check file size
+    if (file.size > MAX_FILE_SIZE) {
+        return {
+            type: "size",
+            message: `File size must be less than 100KB. Your file is ${Math.round(file.size / 1024)}KB.`,
+        };
+    }
+    // Check MIME type
+    if (!ALLOWED_MIME_TYPES.includes(file.type)) {
+        return {
+            type: "format",
+            message: `Unsupported image format. Allowed formats: PNG, JPEG, GIF, BMP, WebP.`,
+        };
+    }
+    return null;
+}
+/**
+ * Convert image file to WebP format
+ */
+export async function convertToWebPFormat(file) {
+    try {
+        // blobToWebP expects a Blob, so we use the file directly (File is a Blob)
+        const webpBlob = await blobToWebP(file, { quality: 0.8 });
+        return webpBlob;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error
+            ? error.message
+            : "Unknown error during WebP conversion";
+        return {
+            type: "conversion",
+            message: `Failed to convert image: ${errorMessage}`,
+        };
+    }
+}
+/**
+ * Convert blob to base64 string
+ */
+export function blobToBase64(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const base64String = reader.result;
+            // Remove "data:image/webp;base64," prefix
+            const base64 = base64String.split(",")[1];
+            resolve(base64);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
+}
+/**
+ * Process avatar file: validate, convert to WebP, return base64
+ */
+export async function processAvatarFile(file) {
+    // Validate file
+    const validationError = validateAvatarFile(file);
+    if (validationError) {
+        return validationError;
+    }
+    // Convert to WebP
+    const conversionResult = await convertToWebPFormat(file);
+    if ("type" in conversionResult) {
+        // It's an error
+        return conversionResult;
+    }
+    // Convert blob to base64
+    try {
+        const fileBase64 = await blobToBase64(conversionResult);
+        return {
+            success: true,
+            fileBase64,
+            contentType: "image/webp",
+            originalFileName: file.name,
+        };
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Unknown error";
+        return {
+            type: "unknown",
+            message: `Failed to encode image: ${errorMessage}`,
+        };
+    }
+}

package/base-modules/teacher/constants.d.ts

@@ -21,3 +21,5 @@ export declare const GENDER_OPTIONS: readonly [{
     readonly label: "Other";
     readonly value: "OTHER";
 }];
+export declare const AVATAR_MAX_FILE_SIZE: number;
+export declare const AVATAR_ALLOWED_MIME_TYPES: readonly ["image/webp", "image/png", "image/jpeg", "image/jpg", "image/gif", "image/bmp"];

package/base-modules/teacher/constants.js

@@ -14,7 +14,9 @@ export const pageLimit = Number(process.env.NEXT_PUBLIC_PAGE_LIMIT) || 10;
 // API ROUTES
 // ============================================================================
 export const TEACHER_API_ROUTES = {
+    LIST: "/api/v1/teacher",
     UNIT: "/api/v1/teacher",
+    AVATAR: "/api/v1/teacher-avatar",
 };
 // ============================================================================
 // GENDER OPTIONS
@@ -25,3 +27,15 @@ export const GENDER_OPTIONS = [
     { label: "Female", value: "FEMALE" },
     { label: "Other", value: "OTHER" },
 ];
+// ============================================================================
+// AVATAR UPLOAD CONFIGURATION
+// ============================================================================
+export const AVATAR_MAX_FILE_SIZE = 100 * 1024; // 100KB in bytes
+export const AVATAR_ALLOWED_MIME_TYPES = [
+    "image/webp",
+    "image/png",
+    "image/jpeg",
+    "image/jpg",
+    "image/gif",
+    "image/bmp",
+];

package/base-modules/teacher/context.d.ts

@@ -27,6 +27,7 @@ export declare const TEACHER_ACTION_TYPES: {
     disableSaveButton: boolean;
     drawer: string | null;
     errors: Record<string, string>;
+    avatarUploading: boolean;
     address: string | null;
     avatar: string | null;
     bio: string | null;
@@ -59,6 +60,7 @@ export declare const TEACHER_ACTION_TYPES: {
     disableSaveButton: boolean;
     drawer: string | null;
     errors: Record<string, string>;
+    avatarUploading: boolean;
     address: string | null;
     avatar: string | null;
     bio: string | null;
@@ -93,6 +95,7 @@ export declare const TEACHER_ACTION_TYPES: {
     disableSaveButton: boolean;
     drawer: string | null;
     errors: Record<string, string>;
+    avatarUploading: boolean;
     address: string | null;
     avatar: string | null;
     bio: string | null;
@@ -125,6 +128,7 @@ export declare const TEACHER_ACTION_TYPES: {
     disableSaveButton: boolean;
     drawer: string | null;
     errors: Record<string, string>;
+    avatarUploading: boolean;
     address: string | null;
     avatar: string | null;
     bio: string | null;
@@ -157,6 +161,7 @@ export declare const TEACHER_ACTION_TYPES: {
     disableSaveButton: boolean;
     drawer: string | null;
     errors: Record<string, string>;
+    avatarUploading: boolean;
     address: string | null;
     avatar: string | null;
     bio: string | null;
@@ -189,6 +194,7 @@ export declare const useTeacherModule: () => {
     closeDrawer: () => void;
     deleteLoading: boolean;
     handleAvatar: (files: File[]) => void;
+    handleAvatarUpload: (file: File) => Promise<void>;
     handleChange: (field: string, value: string | number | boolean | Date | null | undefined) => void;
     handleCreate: () => void;
     handleDelete: (row?: TableRow) => void;
@@ -220,6 +226,7 @@ export declare const useTeacherModule: () => {
         disableSaveButton: boolean;
         drawer: string | null;
         errors: Record<string, string>;
+        avatarUploading: boolean;
         address: string | null;
         avatar: string | null;
         bio: string | null;

package/base-modules/teacher/context.js

@@ -33,6 +33,7 @@ import { TEACHER_API_ROUTES, pageLimit } from "./constants";
 import { teacherFormValidation } from "./validate";
 import { getCachedTeachers, invalidateTeachersCache } from "./cache";
 import { getCachedWorkspaceSync } from "../workspace/cache";
+import { processAvatarFile } from "./avatar-upload";
 // ============================================================================
 // 1.1 DRAWER TYPES
 // ============================================================================
@@ -58,6 +59,7 @@ const teacherConfig = {
         disableSaveButton: false,
         drawer: null,
         errors: {},
+        avatarUploading: false,
         // Form State
         address: null,
         avatar: null,
@@ -352,6 +354,80 @@ export const useTeacherModule = () => {
             payload: { key: "avatar", value: url },
         });
     }, [dispatch]);
+    const handleAvatarUpload = useCallback(async (file) => {
+        try {
+            // Set uploading state
+            dispatch({
+                type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                payload: { key: "avatarUploading", value: true },
+            });
+            // Process avatar file (validate, convert to WebP)
+            const result = await processAvatarFile(file);
+            if ("type" in result) {
+                // Error result
+                const error = result;
+                showToast(error.message, TOAST_VARIANT.ERROR);
+                dispatch({
+                    type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                    payload: { key: "avatarUploading", value: false },
+                });
+                return;
+            }
+            // Get teacherId from current state (if creating, id will be empty)
+            const teacherId = state.id;
+            if (!teacherId) {
+                showToast("Please save the teacher record first before uploading an avatar", TOAST_VARIANT.ERROR);
+                dispatch({
+                    type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                    payload: { key: "avatarUploading", value: false },
+                });
+                return;
+            }
+            // Upload to S3 via teacher-avatar endpoint
+            const response = await fetch(TEACHER_API_ROUTES.AVATAR, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "x-api-token": process.env.NEXT_PUBLIC_API_KEY,
+                },
+                body: JSON.stringify({
+                    teacherId,
+                    fileBase64: result.fileBase64,
+                    contentType: result.contentType,
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const errorMessage = errorData.error || `Upload failed with status ${response.status}`;
+                showToast(errorMessage, TOAST_VARIANT.ERROR);
+                dispatch({
+                    type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                    payload: { key: "avatarUploading", value: false },
+                });
+                return;
+            }
+            const data = await response.json();
+            const avatarUrl = data.url;
+            // Update avatar field with presigned URL
+            dispatch({
+                type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                payload: { key: "avatar", value: avatarUrl },
+            });
+            showToast("Avatar uploaded successfully", TOAST_VARIANT.SUCCESS);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : "Unknown error uploading avatar";
+            showToast(errorMessage, TOAST_VARIANT.ERROR);
+        }
+        finally {
+            dispatch({
+                type: TEACHER_ACTION_TYPES.SET_INPUT_FIELD,
+                payload: { key: "avatarUploading", value: false },
+            });
+        }
+    }, [state.id, dispatch, showToast, theme]);
     const applyFilters = useCallback(() => {
         dispatch({
             type: TEACHER_ACTION_TYPES.SET_CURRENT_PAGE,
@@ -492,6 +568,7 @@ export const useTeacherModule = () => {
         closeDrawer,
         deleteLoading,
         handleAvatar,
+        handleAvatarUpload,
         handleChange,
         handleCreate,
         handleDelete,

package/base-modules/teacher/form.js

@@ -16,15 +16,18 @@ export const TeacherForm = () => {
     const context = useTeacherModule();
     const { address, avatar, bio, city, country, dateOfBirth, emergencyPhone, enabled, errors, experience, firstName, gender, joiningDate, lastName, phone, postalCode, qualification, specialization, teacherCode, userId, } = context.state;
     const stateValue = context.state.state;
-    const { handleChange } = context;
+    const { handleChange, handleAvatarUpload } = context;
     const users = getCachedUsersSync();
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { error: errors.teacherCode, id: "teacherCode", info: t("formUniqueTeacherIdentifierLabel"), label: t("formTeacherCodeLabel"), onChange: (e) => handleChange("teacherCode", e.target.value), placeholder: t("formTeacherCodePlaceholder"), required: true, value: teacherCode }), _jsx(EnhancedInput, { error: errors.firstName, id: "firstName", info: t("formTeachersFirstNameLabel"), label: t("formFirstNameLabel"), onChange: (e) => handleChange("firstName", e.target.value), placeholder: t("formFirstNamePlaceholder"), required: true, value: firstName }), _jsx(EnhancedInput, { error: errors.lastName, id: "lastName", info: t("formTeachersLastNameLabel"), label: t("formLastNameLabel"), onChange: (e) => handleChange("lastName", e.target.value), placeholder: t("formLastNamePlaceholder"), required: true, value: lastName }), _jsx(EnhancedInput, { error: errors.joiningDate, id: "joiningDate", info: t("formDateTeacherJoinedTheSchoolLabel"), label: t("formJoiningDateLabel"), onChange: (e) => handleChange("joiningDate", e.target.value), onClick: (e) => { var _a, _b; return (_b = (_a = e.currentTarget).showPicker) === null || _b === void 0 ? void 0 : _b.call(_a); }, required: true, type: "date", value: joiningDate ? new Date(joiningDate).toISOString().split("formTLabel")[0] : "" }), _jsx(EnhancedCombobox, { emptyText: t("formNoTeacherUsersEmpty"), error: errors.userId, id: "userId", info: t("formLinkedSystemUserLabel"), label: t("formTeacherUserPlaceholder"), onValueChange: (value) => handleChange("userId", value || null), options: (_a = users.items) === null || _a === void 0 ? void 0 : _a.filter(({ workspaces }) => workspaces === null || workspaces === void 0 ? void 0 : workspaces.filter(({ role }) => (role === null || role === void 0 ? void 0 : role.userRole) === USER_ROLE.TEACHER).length).map((u) => ({
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(EnhancedInput, { error: errors.teacherCode, id: "teacherCode", info: t("formUniqueTeacherIdentifierLabel"), label: t("formTeacherCodeLabel"), onChange: (e) => handleChange("teacherCode", e.target.value), placeholder: t("formTeacherCodePlaceholder"), required: true, value: teacherCode }), _jsx(EnhancedInput, { error: errors.firstName, id: "firstName", info: t("formTeachersFirstNameLabel"), label: t("formFirstNameLabel"), onChange: (e) => handleChange("firstName", e.target.value), placeholder: t("formFirstNamePlaceholder"), required: true, value: firstName }), _jsx(EnhancedInput, { error: errors.lastName, id: "lastName", info: t("formTeachersLastNameLabel"), label: t("formLastNameLabel"), onChange: (e) => handleChange("lastName", e.target.value), placeholder: t("formLastNamePlaceholder"), required: true, value: lastName }), _jsx(EnhancedInput, { error: errors.joiningDate, id: "joiningDate", info: t("formDateTeacherJoinedTheSchoolLabel"), label: t("formJoiningDateLabel"), onChange: (e) => handleChange("joiningDate", e.target.value), onClick: (e) => { var _a, _b; return (_b = (_a = e.currentTarget).showPicker) === null || _b === void 0 ? void 0 : _b.call(_a); }, required: true, type: "date", value: joiningDate
+                    ? new Date(joiningDate).toISOString().split("formTLabel")[0]
+                    : "" }), _jsx(EnhancedCombobox, { emptyText: t("formNoTeacherUsersEmpty"), error: errors.userId, id: "userId", info: t("formLinkedSystemUserLabel"), label: t("formTeacherUserPlaceholder"), onValueChange: (value) => handleChange("userId", value || null), options: (_a = users.items) === null || _a === void 0 ? void 0 : _a.filter(({ workspaces }) => workspaces === null || workspaces === void 0 ? void 0 : workspaces.filter(({ role }) => (role === null || role === void 0 ? void 0 : role.userRole) === USER_ROLE.TEACHER).length).map((u) => ({
                     label: (u === null || u === void 0 ? void 0 : u.name) || (u === null || u === void 0 ? void 0 : u.email) || u.id,
                     value: u.id,
-                })), placeholder: t("formSelectLinkedUserPlaceholder"), searchPlaceholder: t("formSearchUsersPlaceholder"), value: userId || "" }), _jsx(EnhancedCombobox, { error: errors.gender, id: "gender", info: t("formTeachersGenderPlaceholder"), label: t("formGenderLabel"), onValueChange: (value) => handleChange("gender", value || null), options: GENDER_OPTIONS.slice(1), value: gender || "" }), _jsx(EnhancedInput, { error: errors.dateOfBirth, id: "dateOfBirth", info: t("formTeachersDateOfBirthLabel"), label: t("formDateOfBirthLabel"), onChange: (e) => handleChange("dateOfBirth", e.target.value), onClick: (e) => { var _a, _b; return (_b = (_a = e.currentTarget).showPicker) === null || _b === void 0 ? void 0 : _b.call(_a); }, type: "date", value: dateOfBirth ? new Date(dateOfBirth).toISOString().split("formTLabel")[0] : "" }), _jsx(EnhancedInput, { error: errors.phone, id: "phone", info: t("formTeachersPhoneNumberLabel"), label: t("formPhoneLabel"), onChange: (e) => handleChange("phone", e.target.value), placeholder: t("formPhonePlaceholder"), type: "tel", value: phone || "" }), _jsx(EnhancedInput, { error: errors.emergencyPhone, id: "emergencyPhone", info: t("formEmergencyContactNumberLabel"), label: t("formEmergencyPhoneLabel"), onChange: (e) => handleChange("emergencyPhone", e.target.value), placeholder: t("formEmergencyPhonePlaceholder"), type: "tel", value: emergencyPhone || "" }), _jsx(EnhancedInput, { error: errors.qualification, id: "qualification", info: t("formTeachersEducationalQualificationLabel"), label: t("formQualificationLabel"), onChange: (e) => handleChange("qualification", e.target.value), placeholder: t("formQualificationPlaceholder"), value: qualification || "" }), _jsx(EnhancedInput, { error: errors.specialization, id: "specialization", info: t("formTeachersAreaOfSpecializationLabel"), label: t("formSpecializationLabel"), onChange: (e) => handleChange("specialization", e.target.value), placeholder: t("formSpecializationPlaceholder"), value: specialization || "" }), _jsx(EnhancedInput, { error: errors.experience, id: "experience", info: t("formYearsOfTeachingExperienceLabel"), label: t("formExperienceLabel"), onChange: (e) => handleChange("experience", parseInt(e.target.value) || null), placeholder: t("formExperiencePlaceholder"), type: "number", value: (experience === null || experience === void 0 ? void 0 : experience.toString()) || "" }), _jsx(EnhancedInput, { error: errors.address, id: "address", info: t("formStreetAddressLabel"), label: t("formAddressLabel"), onChange: (e) => handleChange("address", e.target.value), placeholder: t("formAddressPlaceholder"), value: address || "" }), _jsx(EnhancedInput, { error: errors.city, id: "city", info: t("formCityNameLabel"), label: t("formCityLabel"), onChange: (e) => handleChange("city", e.target.value), placeholder: t("formCityPlaceholder"), value: city || "" }), _jsx(EnhancedInput, { error: errors.state, id: "state", info: t("formStateOrProvinceLabel"), label: t("formStateProvinceLabel"), onChange: (e) => handleChange("state", e.target.value), placeholder: t("formStatePlaceholder"), value: stateValue || "" }), _jsx(EnhancedInput, { error: errors.country, id: "country", info: t("formCountryNameLabel"), label: t("formCountryLabel"), onChange: (e) => handleChange("country", e.target.value), placeholder: t("formCountryPlaceholder"), value: country || "" }), _jsx(EnhancedInput, { error: errors.postalCode, id: "postalCode", info: t("formPostalOrZipCodeLabel"), label: t("formPostalCodeLabel"), onChange: (e) => handleChange("postalCode", e.target.value), placeholder: t("formPostalCodePlaceholder"), value: postalCode || "" }), _jsx(EnhancedDropzone, { accept: ["image/*"], error: errors.avatar, id: "avatar", info: t("formUploadTeachersPhoto"), label: t("formAvatarLabel"), maxFiles: 1, maxSize: 1 * 1024 * 1024, onChange: (files) => {
+                })), placeholder: t("formSelectLinkedUserPlaceholder"), searchPlaceholder: t("formSearchUsersPlaceholder"), value: userId || "" }), _jsx(EnhancedCombobox, { error: errors.gender, id: "gender", info: t("formTeachersGenderPlaceholder"), label: t("formGenderLabel"), onValueChange: (value) => handleChange("gender", value || null), options: GENDER_OPTIONS.slice(1), value: gender || "" }), _jsx(EnhancedInput, { error: errors.dateOfBirth, id: "dateOfBirth", info: t("formTeachersDateOfBirthLabel"), label: t("formDateOfBirthLabel"), onChange: (e) => handleChange("dateOfBirth", e.target.value), onClick: (e) => { var _a, _b; return (_b = (_a = e.currentTarget).showPicker) === null || _b === void 0 ? void 0 : _b.call(_a); }, type: "date", value: dateOfBirth
+                    ? new Date(dateOfBirth).toISOString().split("formTLabel")[0]
+                    : "" }), _jsx(EnhancedInput, { error: errors.phone, id: "phone", info: t("formTeachersPhoneNumberLabel"), label: t("formPhoneLabel"), onChange: (e) => handleChange("phone", e.target.value), placeholder: t("formPhonePlaceholder"), type: "tel", value: phone || "" }), _jsx(EnhancedInput, { error: errors.emergencyPhone, id: "emergencyPhone", info: t("formEmergencyContactNumberLabel"), label: t("formEmergencyPhoneLabel"), onChange: (e) => handleChange("emergencyPhone", e.target.value), placeholder: t("formEmergencyPhonePlaceholder"), type: "tel", value: emergencyPhone || "" }), _jsx(EnhancedInput, { error: errors.qualification, id: "qualification", info: t("formTeachersEducationalQualificationLabel"), label: t("formQualificationLabel"), onChange: (e) => handleChange("qualification", e.target.value), placeholder: t("formQualificationPlaceholder"), value: qualification || "" }), _jsx(EnhancedInput, { error: errors.specialization, id: "specialization", info: t("formTeachersAreaOfSpecializationLabel"), label: t("formSpecializationLabel"), onChange: (e) => handleChange("specialization", e.target.value), placeholder: t("formSpecializationPlaceholder"), value: specialization || "" }), _jsx(EnhancedInput, { error: errors.experience, id: "experience", info: t("formYearsOfTeachingExperienceLabel"), label: t("formExperienceLabel"), onChange: (e) => handleChange("experience", parseInt(e.target.value) || null), placeholder: t("formExperiencePlaceholder"), type: "number", value: (experience === null || experience === void 0 ? void 0 : experience.toString()) || "" }), _jsx(EnhancedInput, { error: errors.address, id: "address", info: t("formStreetAddressLabel"), label: t("formAddressLabel"), onChange: (e) => handleChange("address", e.target.value), placeholder: t("formAddressPlaceholder"), value: address || "" }), _jsx(EnhancedInput, { error: errors.city, id: "city", info: t("formCityNameLabel"), label: t("formCityLabel"), onChange: (e) => handleChange("city", e.target.value), placeholder: t("formCityPlaceholder"), value: city || "" }), _jsx(EnhancedInput, { error: errors.state, id: "state", info: t("formStateOrProvinceLabel"), label: t("formStateProvinceLabel"), onChange: (e) => handleChange("state", e.target.value), placeholder: t("formStatePlaceholder"), value: stateValue || "" }), _jsx(EnhancedInput, { error: errors.country, id: "country", info: t("formCountryNameLabel"), label: t("formCountryLabel"), onChange: (e) => handleChange("country", e.target.value), placeholder: t("formCountryPlaceholder"), value: country || "" }), _jsx(EnhancedInput, { error: errors.postalCode, id: "postalCode", info: t("formPostalOrZipCodeLabel"), label: t("formPostalCodeLabel"), onChange: (e) => handleChange("postalCode", e.target.value), placeholder: t("formPostalCodePlaceholder"), value: postalCode || "" }), _jsx(EnhancedDropzone, { accept: ["image/*"], error: errors.avatar, id: "avatar", info: t("formUploadTeachersPhoto"), label: t("formAvatarLabel"), maxFiles: 1, maxSize: 100 * 1024, onChange: (files) => {
                     if (files.length > 0) {
-                        const fileUrl = URL.createObjectURL(files[0]);
-                        handleChange("avatar", fileUrl);
+                        handleAvatarUpload === null || handleAvatarUpload === void 0 ? void 0 : handleAvatarUpload(files[0]);
                     }
                 }, onRemoveRemote: () => handleChange("avatar", null), value: avatar ? [avatar] : [] }), _jsx(EnhancedTextarea, { error: errors.bio, id: "bio", info: t("formBriefBiographyOrDescriptionLabel"), label: t("formBioLabel"), onChange: (e) => handleChange("bio", e.target.value), placeholder: t("formBioPlaceholder"), rows: 4, value: bio || "" }), _jsx(EnhancedCheckbox, { checked: enabled, info: t("actionToggleActivateOrDeactivateTeacher"), label: t("formActiveTeacherLabel"), onCheckedChange: (checked) => handleChange("enabled", checked) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",