@fernir2/saas-kit-cli 0.1.4 → 0.1.5

package/packages/level2/meta/card-list/card/FdCard.jsx

@@ -1,44 +0,0 @@
-import { useMemo, useCallback, useState } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdCard as Card } from "@fd-component-toolbox/card/FdCard";
-import { cardListLayouts } from "@fd-toolbox/constants/card-list-configs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { getResourceUrl } from "@meta/services/meta-navigations";
-import { routes } from "@fd-toolbox/routing/routes";
-import { silentChangeUrl } from "@fd-toolbox/routing/routers";
-import { handleDialogResponse, initCard } from "@meta/card-list/card/FdCard.funcs";
-import { FdCardImage } from "@meta/card-list/card/image-block/FdCardImage";
-import { FdCardContentBlock } from "@meta/card-list/card/content-block/FdCardContentBlock";
-import { FdCardActionBlock } from "@meta/card-list/card/action-block/FdCardActionBlock";
-export function FdCard({ cardConfig, uiResourceMeta, resource, itemDeleted, onRefreshResources, displayMode, }) {
-    const [item, setItem] = useState();
-    const [imageUrl, setImageUrl] = useState();
-    const [shouldShowEditButton, setShouldShowEditButton] = useState(false);
-    const [shouldShowViewButton, setShouldShowViewButton] = useState(false);
-    const [shouldShowDeleteButton, setShouldShowDeleteButton] = useState(false);
-    const resourceName = uiResourceMeta.resourceMeta.resourceName;
-    const isHorizontal = useMemo(() => cardConfig.layout === cardListLayouts.horizontal, [cardConfig.layout]);
-    const isVertical = useMemo(() => cardConfig.layout === cardListLayouts.vertical, [cardConfig.layout]);
-    useAsyncEffect(async () => {
-        await initCard(uiResourceMeta, resource, setItem, setImageUrl, setShouldShowEditButton, setShouldShowViewButton, setShouldShowDeleteButton);
-    }, [uiResourceMeta, resource]);
-    const onDialogResponse = useCallback((isYes) => {
-        handleDialogResponse(isYes, resource, uiResourceMeta, resourceName, itemDeleted);
-    }, [itemDeleted, resourceName, uiResourceMeta, resource]);
-    const onViewClick = useCallback(() => {
-        if (item) {
-            const url = getResourceUrl(routes.view, resourceName, item.id);
-            silentChangeUrl(url);
-        }
-    }, [item, resourceName]);
-    return (<Card className={cn("relative flex rounded-sm shadow-sm", {
-            "flex-row": isHorizontal,
-            "w-64 flex-col": isVertical,
-        })}>
-            <FdCardImage imageUrl={imageUrl} isHorizontal={isHorizontal} isVertical={isVertical}/>
-
-            {item && <FdCardContentBlock uiResourceMeta={uiResourceMeta} item={item} resource={resource}/>}
-
-            {item && (<FdCardActionBlock resourceId={resource.id} uiResourceMeta={uiResourceMeta} shouldShowEditButton={shouldShowEditButton} shouldShowViewButton={shouldShowViewButton} shouldShowDeleteButton={shouldShowDeleteButton} onDialogResponse={onDialogResponse} onRefreshResources={onRefreshResources} onViewClick={onViewClick} actionType={displayMode}/>)}
-        </Card>);
-}

package/packages/level2/meta/card-list/card/action-block/FdCardActionBlock.jsx

@@ -1,70 +0,0 @@
-import { useCallback, useState } from "react";
-import { FdDropdownMenu, FdDropdownMenuContent, FdDropdownMenuTrigger, } from "@fd-component-toolbox/dropdown-menu/FdDropdownMenu";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { YesOrNoDialog } from "@fd-component-toolbox/dialog/YesOrNoDialog";
-import { messages } from "@fd-toolbox-core/constants/messages-constants";
-import { tableActionTypes } from "@fd-toolbox/enums/enums";
-import { tabsNames } from "@meta/view/view-constants";
-import { resourceEditModes } from "@fd-toolbox/constants/resource-list-configs-enums";
-/**
- * Card action block displays a dropdown menu with available actions such as view, edit, and delete.
- *
- * @param props - {@link FdCardActionBlockProps}
- */
-export function FdCardActionBlock({ resourceId, uiResourceMeta, actionType, onDialogResponse, shouldShowDeleteButton, shouldShowEditButton, shouldShowViewButton, onRefreshResources, onViewClick, }) {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const resourceName = uiResourceMeta.resourceMeta.resourceName;
-    const onDropdownOpenChange = useCallback((open) => {
-        setDropdownOpen(open);
-    }, []);
-    return (<div className="absolute right-2 top-2">
-            {actionType === tableActionTypes.minimal &&
-            (shouldShowEditButton ?? shouldShowViewButton ?? shouldShowDeleteButton) && (<FdDropdownMenu open={dropdownOpen} onOpenChange={onDropdownOpenChange}>
-                        <FdDropdownMenuTrigger asChild>
-                            <FdButton size="icon" variant="ghost" className="size-5 p-1">
-                                <FdIcon name={iconNames.dotsVerticalIcon}/>
-                            </FdButton>
-                        </FdDropdownMenuTrigger>
-                        <FdDropdownMenuContent align="end" className="top-2 z-50 mt-2 box-border min-w-20 rounded-md border bg-background">
-                            {shouldShowViewButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                    <FdViewSheet id={resourceId} resourceName={resourceName} onRefreshResources={onRefreshResources} onEditClick={onViewClick} onCloseClick={setDropdownOpen} editMode={resourceEditModes.simple}>
-                                        <div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                            <FdIcon name={iconNames.visibility}/>
-                                            <p>View</p>
-                                        </div>
-                                    </FdViewSheet>
-                                </div>)}
-                            {shouldShowDeleteButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                    <YesOrNoDialog title={messages.deleteConfirmation} onResponse={onDialogResponse} onCloseClick={setDropdownOpen} trigger={<div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                                <FdIcon name={iconNames.trash}/>
-                                                <p>Delete</p>
-                                            </div>}/>
-                                </div>)}
-                        </FdDropdownMenuContent>
-                    </FdDropdownMenu>)}
-
-            {actionType === tableActionTypes.default && shouldShowDeleteButton && (<FdDropdownMenu open={dropdownOpen} onOpenChange={onDropdownOpenChange}>
-                    <FdDropdownMenuTrigger asChild>
-                        <FdButton size="icon" variant="ghost" className="size-5 p-1">
-                            <FdIcon name={iconNames.dotsVerticalIcon}/>
-                        </FdButton>
-                    </FdDropdownMenuTrigger>
-                    <FdDropdownMenuContent align="end" className="top-2 z-50 mt-2 box-border min-w-20 rounded-md border bg-background">
-                        <div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                            <FdViewSheet id={resourceId} resourceName={resourceName} onRefreshResources={onRefreshResources} onEditClick={onViewClick} defaultTab={tabsNames.comments} editMode={resourceEditModes.default}>
-                                <div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                    <p>Comments</p>
-                                </div>
-                            </FdViewSheet>
-                        </div>
-                        {shouldShowDeleteButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                <YesOrNoDialog title={messages.deleteConfirmation} onResponse={onDialogResponse} onCloseClick={setDropdownOpen} trigger={<div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                            <p>Delete</p>
-                                        </div>}/>
-                            </div>)}
-                    </FdDropdownMenuContent>
-                </FdDropdownMenu>)}
-        </div>);
-}

package/packages/level2/meta/card-list/card/content-block/FdCardContentBlock.jsx

@@ -1,64 +0,0 @@
-import { useCallback } from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { FdCardFooter } from "@fd-component-toolbox/card/FdCard";
-import { getBackgroundColorClassName, getRelatedResourceImageUrl, isColorful, isDescriptionProperty, isExpandProperty, onViewClick, prepareDisplayableProperties, } from "@meta/card-list/card/content-block/FdCardContentBlock.funcs";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { isEmail, isUrl } from "@meta/core/property-types";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { getAbsoluteUrl, getMailToUrl } from "@fd-toolbox/routing/routers";
-import { FdBadge } from "@fd-component-toolbox/badge/FdBadge";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-import { getOptionalPropertyValue } from "@fd-toolbox/objects/property-value";
-export function FdCardContentBlock({ uiResourceMeta, item, resource }) {
-    const resourceName = uiResourceMeta.resourceMeta.resourceName;
-    const prepareDisplayablePropertiesCallback = useCallback(() => prepareDisplayableProperties(uiResourceMeta.properties, item, resource.id, uiResourceMeta.resourceMeta.properties), [item, uiResourceMeta.properties, uiResourceMeta.resourceMeta, resource]);
-    const renderPropertyValue = (property) => {
-        const relationName = property.propertyMeta.relation?.relatedResourceName;
-        const relationId = getOptionalPropertyValue(resource, property.name);
-        const imageUrl = getRelatedResourceImageUrl(resource, property.propertyMeta);
-        if (isEmail(property.propertyMeta.type, property.propertyMeta.typeFormat)) {
-            return (<FdLink className="cursor-pointer text-fd-accent hover:cursor-pointer" href={getMailToUrl(property.value)} openInNewTab>
-                    {property.value}
-                </FdLink>);
-        }
-        if (isColorful(property.propertyMeta, property.uiPropertyMeta)) {
-            return (<FdBadge className={`rounded-md px-1 py-px font-normal ${getBackgroundColorClassName(property.name, resource)}`}>
-                    {property.value}
-                </FdBadge>);
-        }
-        if (isUrl(property.propertyMeta.type, property.propertyMeta.typeFormat)) {
-            return (<FdLink className="cursor-pointer text-fd-accent hover:cursor-pointer" href={getAbsoluteUrl(property.value)} openInNewTab>
-                    {property.value}
-                </FdLink>);
-        }
-        if (isDescriptionProperty(uiResourceMeta.resourceMeta, property.name)) {
-            return (<div className="cursor-pointer text-fd-accent hover:cursor-pointer">
-                    <FdViewSheet id={resource.id} resourceName={resourceName} onEditClick={() => onViewClick(resourceName, item.id)}>
-                        <p>{property.value}</p>
-                    </FdViewSheet>
-                </div>);
-        }
-        if (isExpandProperty(property.propertyMeta, relationName, relationId)) {
-            return (<div className="flex cursor-pointer items-center text-fd-accent hover:cursor-pointer">
-                    {imageUrl && (<FdAvatar className="mr-2 size-5">
-                            <FdAvatarImage />
-                            <FdAvatarFallback>
-                                <FdFrameworkImage className="object-fill" src={imageUrl} alt="Resource image" width={40} height={40}/>
-                            </FdAvatarFallback>
-                        </FdAvatar>)}
-
-                    <FdViewSheet id={relationId} resourceName={relationName} onEditClick={() => onViewClick(relationName, relationId)}>
-                        <p>{property.value}</p>
-                    </FdViewSheet>
-                </div>);
-        }
-        return <p>{property.value}</p>;
-    };
-    return (<FdCardFooter className="relative w-full flex-col items-start p-2 text-sm">
-            {prepareDisplayablePropertiesCallback().map((property) => (<div key={property.key} className="flex w-full flex-row gap-2 text-xs text-subtle-500 lg:text-sm">
-                    <p>{property.displayName}:</p>
-                    <FdFadeOutText>{renderPropertyValue(property)}</FdFadeOutText>
-                </div>))}
-        </FdCardFooter>);
-}

package/packages/level2/meta/card-list/card/image-block/FdCardImage.jsx

@@ -1,10 +0,0 @@
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { cn } from "@fd-toolbox/lib/utils";
-export function FdCardImage({ imageUrl, isHorizontal, isVertical }) {
-    return (<div className="relative size-64 min-w-64">
-            <FdFrameworkImage src={imageUrl ?? "/images/no-image.png"} alt="image" priority layout="fill" className={cn("object-cover object-center", {
-            "rounded-s-sm": isHorizontal,
-            "rounded-t-sm": isVertical,
-        })}/>
-        </div>);
-}

package/packages/level2/meta/client/framework/hooks.jsx

@@ -1,39 +0,0 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
-import { useIsClient } from "@fd-toolbox/hooks/use-is-client";
-import { createError } from "@fd-toolbox/errors/errors";
-const ssrRouterError = "Router method {0} is not implemented on the server.";
-const emptyRouter = {
-    push: () => {
-        throw createError(ssrRouterError.replace("{0}", "push"));
-    },
-    replace: () => {
-        throw createError(ssrRouterError.replace("{0}", "replace"));
-    },
-    refresh: () => {
-        throw createError(ssrRouterError.replace("{0}", "refresh"));
-    },
-    back: () => {
-        throw createError(ssrRouterError.replace("{0}", "back"));
-    },
-    forward: () => {
-        throw createError(ssrRouterError.replace("{0}", "forward"));
-    },
-    prefetch: async () => {
-        throw createError(ssrRouterError.replace("{0}", "prefetch"));
-    },
-};
-export function useFdRouter() {
-    const router = useRouter();
-    const isClient = useIsClient();
-    return isClient ? router : emptyRouter;
-}
-export function useFdPathname() {
-    const pathname = usePathname();
-    const isClient = useIsClient();
-    return isClient ? pathname : "";
-}
-export function useFdSearchParams() {
-    const searchParams = useSearchParams();
-    const isClient = useIsClient();
-    return isClient ? searchParams : new URLSearchParams();
-}

package/packages/level2/meta/comment/FdComment.jsx

@@ -1,16 +0,0 @@
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-const userImageUrlConstant = "/images/profile.png";
-/**
- * Comment component displaying user details and comment body.
- *
- * @param props - {@link FdCommentProps}
- */
-export function FdComment({ body, userImageUrl, userName }) {
-    return (<div className="flex gap-4">
-            <FdFrameworkImage src={userImageUrl ?? userImageUrlConstant} alt="User image" className="size-8 rounded-full bg-muted" width={32} height={32}/>
-            <div className="flex w-fit flex-col gap-1 rounded-md bg-muted px-3 py-2">
-                <div className="text-sm font-semibold text-muted-foreground">{userName}</div>
-                <div>{body}</div>
-            </div>
-        </div>);
-}

package/packages/level2/meta/comment/FdCommentList.jsx

@@ -1,32 +0,0 @@
-import { useState } from "react";
-import { getUserDisplayText, initCommentList } from "@meta/comment/FdCommentList.funcs";
-import { FdComment } from "@meta/comment/FdComment";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-/**
- * Displays a list of comments for a specific resource.
- *
- * @param props - {@link FdCommentListProps}
- *
- * @example
- * ```tsx
- * <FdCommentList
- *     resourceName={resourceNames.student}
- *     resourceId="123e4567-e89b-12d3-a456-426614174000"
- *     resources={studentComments}
- * />
- * ```
- */
-export function FdCommentList({ resources, uiResourceMeta, resourceName: resourceMetaId, resourceId, }) {
-    const [comments, setComments] = useState(resources);
-    const [uiResourceMetaState, setUiResourceMetaState] = useState(uiResourceMeta);
-    useAsyncEffect(async () => {
-        await initCommentList(setComments, setUiResourceMetaState, uiResourceMetaState, resourceId, resources, resourceMetaId);
-    });
-    return (<div className="flex w-full flex-col gap-4">
-            {comments?.map((comment) => {
-            const user = comment.user;
-            const userName = getUserDisplayText(user?.firstName, user?.lastName);
-            return (<FdComment key={comment.id} body={comment.body} userName={userName} userImageUrl={user?.imageUrl}/>);
-        })}
-        </div>);
-}

package/packages/level2/meta/components/edit-image/FdEditImage.jsx

@@ -1,42 +0,0 @@
-"use client";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { imageNotFoundUrl } from "@fd-toolbox/constants/public-files";
-import { FdEditImageActionMenu } from "@meta/components/edit-image/FdEditImageActionMenu";
-import { getEditResourceEditImageId, handleDeleteImage, onEditImageUploadChange, } from "@meta/components/edit-image/FdEditImage.funcs";
-/**
- * Image editor component with upload, change and delete functionality
- *
- * @param props - {@link FdEditImageProps}
- *
- * @example
- * ```tsx
- * <FdEditImage
- *     form={...}
- *     parentContextName="user-profile"
- *     initialImageUrl="/images/avatar.jpg"
- *     onChange={...}
- * />
- * ```
- */
-export function FdEditImage({ form, parentContextName, initialImageUrl, onChange }) {
-    const [imageUrl, setImageUrl] = useState();
-    const ref = useRef(null);
-    useEffect(() => setImageUrl(initialImageUrl), [form, setImageUrl, initialImageUrl]);
-    const onFileUploaded = useCallback(async (e) => {
-        onEditImageUploadChange(form, setImageUrl, onChange, e.target.files?.[0]);
-    }, [form, onChange]);
-    const onChangeImage = useCallback(() => {
-        if (ref.current) {
-            ref.current.click();
-        }
-    }, [ref]);
-    const onDeleteImage = useCallback(() => {
-        handleDeleteImage(form, setImageUrl);
-    }, [form]);
-    return (<div className="group relative m-1 size-16 overflow-visible rounded-full">
-            <input ref={ref} type="file" className="hidden" onChange={onFileUploaded}/>
-            <FdFrameworkImage id={getEditResourceEditImageId(parentContextName)} src={imageUrl ?? imageNotFoundUrl} alt="Resource Image" width="64" height="64" className="size-16 rounded-full object-cover object-center transition-all hover:blur-xs"/>
-            <FdEditImageActionMenu imageUrl={imageUrl} onChange={onChangeImage} onDelete={onDeleteImage}/>
-        </div>);
-}

package/packages/level2/meta/components/edit-image/FdEditImageActionMenu.jsx

@@ -1,31 +0,0 @@
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { tooltipAligns, tooltipAlignsStrings } from "@fd-component-toolbox/tooltip/FdTooltip";
-import { Spinner } from "@fd-component-toolbox/spinner/Spinner";
-const buttonLabels = {
-    upload: "Upload",
-    edit: "Edit",
-    delete: "Delete",
-};
-export function FdEditImageActionMenu({ onChange, onDelete, imageUrl, isLoading, }) {
-    return (<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 gap-2 group-hover:flex">
-            {isLoading ? (<Spinner />) : (<FdEditImageActionMenuContent onChange={onChange} onDelete={onDelete} imageUrl={imageUrl}/>)}
-        </div>);
-}
-function FdEditImageActionMenuContent({ onChange, onDelete, imageUrl }) {
-    if (imageUrl) {
-        return (<>
-                <FdButton variant="icon" onClick={onChange} className="flex size-3 items-center justify-center rounded-sm bg-muted-foreground/45 p-2.5" tooltipText={buttonLabels.edit} tooltipClassName="mt-2" tooltipAlign={tooltipAlignsStrings[tooltipAligns.start]}>
-                    <FdIcon color="text-fd-tertiary-50" className="absolute" name={iconNames.edit}/>
-                </FdButton>
-                <FdButton variant="icon" onClick={onDelete} className="flex size-3 items-center justify-center rounded-sm bg-muted-foreground/45 p-2.5" tooltipClassName="mt-2" tooltipText={buttonLabels.delete}>
-                    <FdIcon className="absolute" name={iconNames.trash} color="text-fd-tertiary-50"/>
-                </FdButton>
-            </>);
-    }
-    else {
-        <FdButton onClick={onChange} variant="icon" className="flex size-6 items-center justify-center rounded-full bg-muted-foreground/45" tooltipText={buttonLabels.upload} tooltipClassName="mt-2">
-            <FdIcon color="text-fd-tertiary-50" className="absolute" name={iconNames.upload}/>
-        </FdButton>;
-    }
-}

package/packages/level2/meta/components/edit-image/FdEditImageDropdownMenu.jsx

@@ -1,42 +0,0 @@
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { useCallback, useRef } from "react";
-import { FdTooltip, FdTooltipContent, FdTooltipProvider, FdTooltipTrigger, } from "@fd-component-toolbox/tooltip/FdTooltip";
-const imageConst = {
-    change: "Change",
-    upload: "Upload",
-};
-export function FdEditImageDropdownMenu({ id, onEdit, onDelete, imageUrl }) {
-    const ref = useRef(null);
-    const onFileUploaded = useCallback((e) => {
-        if (e.target.files) {
-            onEdit?.(e.target.files[0]);
-            e.target.value = "";
-        }
-    }, [onEdit]);
-    return (<FdTooltipProvider>
-            <div className="relative flex size-full items-center justify-center rounded-full opacity-0 transition-all duration-300 hover:bg-fd-accent hover:opacity-60 [&>svg]:size-5">
-                <FdTooltip>
-                    <FdTooltipTrigger asChild>
-                        <FdButton variant="icon" className="p-1" onClick={() => ref.current?.click()}>
-                            <FdIcon size={iconSizes.medium} name={iconNames.edit} color="fd-secondary hover:block"/>
-                        </FdButton>
-                    </FdTooltipTrigger>
-                    <FdTooltipContent side="bottom" className="mt-4">
-                        {imageUrl ? imageConst.change : imageConst.upload}
-                    </FdTooltipContent>
-                </FdTooltip>
-                {imageUrl && (<FdTooltip>
-                        <FdTooltipTrigger asChild>
-                            <FdButton variant="icon" className="p-1" onClick={onDelete}>
-                                <FdIcon size={iconSizes.medium} name={iconNames.eraser} color="fd-secondary hover:block"/>
-                            </FdButton>
-                        </FdTooltipTrigger>
-                        <FdTooltipContent side="bottom" className="mt-4">
-                            Delete
-                        </FdTooltipContent>
-                    </FdTooltip>)}
-            </div>
-            <input ref={ref} type="file" className="hidden" onChange={onFileUploaded} id={id}/>
-        </FdTooltipProvider>);
-}

package/packages/level2/meta/components/file-upload/FileUpload.jsx

@@ -1,103 +0,0 @@
-"use client";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { useCallback, useRef, useState } from "react";
-import { supportedImageTypes, supportedVideoTypes, supportedImageExtensions, supportedVideoExtensions, } from "@fd-toolbox/constants/file-loader-data-types";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { handleFileDelete, onFileUploadHandler, onInitUpload, } from "@meta/components/file-upload/FileUpload.funcs";
-import { FdFormMessage } from "@fd-component-toolbox/form/FdForm";
-import FdLabelAnimation from "@fd-component-toolbox/animation/FdLabelAnimation";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { PreviewMedia } from "@meta/components/file-upload/PreviewMedia";
-/**
- * A component for uploading one or more files with a preview.
- *
- * This component supports drag-and-drop, file selection from the local system,
- * and displays previews for uploaded images and videos. It also includes
- * functionality to delete uploaded files and view them in full-screen.
- *
- * @param props - {@link FileUploadProps}
- *
- * @example
- * ```tsx
- * const form = useForm();
- *
- * <FileUpload
- *     label="Profile Picture"
- *     form={form}
- *     required={true}
- *     allowMultiple={false}
- * />
- * ```
- */
-export function FileUpload({ allowMultiple, value, required, label, form, formValue, isNew, relatedResourceId, propertyMeta, }) {
-    const [files, setFiles] = useState([]);
-    const [error, setError] = useState(undefined);
-    const [imageValue, setImageValue] = useState(value ?? "");
-    const [fullscreenFile, setFullscreenFile] = useState(null);
-    const fileInputRef = useRef(null);
-    const isMoreFilesAllowed = allowMultiple ?? (!allowMultiple && files.length === 0);
-    const hasFile = imageValue !== "" || files.length > 0;
-    const acceptedFileFormats = [
-        ...supportedImageTypes,
-        ...supportedVideoTypes,
-        ...supportedImageExtensions,
-        ...supportedVideoExtensions,
-    ].join(",");
-    useAsyncEffect(async () => {
-        if (formValue) {
-            onInitUpload(setFiles, formValue);
-        }
-    }, [formValue]);
-    const onFileUpload = useCallback((event) => {
-        onFileUploadHandler(isMoreFilesAllowed, setFiles, setError, fileInputRef?.current ?? undefined, event.target?.files ?? undefined, propertyMeta, relatedResourceId, form?.getValues, form?.setValue, isNew);
-    }, [
-        isMoreFilesAllowed,
-        setFiles,
-        setError,
-        fileInputRef,
-        propertyMeta,
-        relatedResourceId,
-        form?.getValues,
-        form?.setValue,
-        isNew,
-    ]);
-    const onDelete = useCallback(async (index) => {
-        handleFileDelete(index, files, setFiles, setImageValue);
-    }, [files, setFiles, setImageValue]);
-    return (<>
-            <div className="relative mt-1 flex w-full select-none flex-wrap items-center gap-4">
-                <FdLabelAnimation label={required ? `${label ?? ""} *` : (label ?? "")} className={cn("absolute left-1.5 -translate-y-5 scale-75", (required && !hasFile) ?? (error && "text-destructive"))}/>
-                <input type="file" ref={fileInputRef} multiple={allowMultiple} accept={acceptedFileFormats} id="uploadFileInput" className="hidden" onChange={onFileUpload} required={required}/>
-
-                {isMoreFilesAllowed && (<FdButton variant="icon" className="size-fit p-0">
-                        <label htmlFor="uploadFileInput" className="cursor-pointer">
-                            <div className="flex size-20 items-center justify-center gap-1 rounded-md border border-border bg-transparent hover:bg-muted">
-                                <FdIcon name={iconNames.upload} color="text-fd-accent"/>
-                                <span className="text-xs font-medium text-muted-foreground">Upload</span>
-                            </div>
-                        </label>
-                    </FdButton>)}
-
-                {files.map((file, index) => (<div key={file.url} className="group relative flex size-20 items-center justify-center rounded-md border border-border p-1.5 hover:border-transparent">
-                        <FdFrameworkImage src={file.preview ?? file.url} alt={`Uploaded file ${index}`} width={128} height={128} className="size-full rounded-md object-cover transition-all group-hover:blur-xs"/>
-
-                        <div className="absolute inset-0 flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
-                            <FdButton variant="icon" className="inset-0 size-full w-fit rounded-md p-0 opacity-0 transition-opacity group-hover:opacity-100" onClick={() => onDelete(index)}>
-                                <FdIcon name={iconNames.trash} size={iconSizes.extralarge} className="relative z-10 text-fd-tertiary-50 drop-shadow-md"/>
-                                <div className="absolute inset-0 size-full rounded-md bg-muted-foreground/45"/>
-                            </FdButton>
-                            <div className="flex cursor-pointer items-center justify-center rounded-md" onClick={() => setFullscreenFile(file)}>
-                                <div className="inset-0 rounded-sm bg-muted-foreground/45"/>
-                                <FdIcon name={file.preview ? iconNames.playIcon : iconNames.image} size={iconSizes.medium} className="relative z-10 text-fd-tertiary-50 drop-shadow-md"/>
-                            </div>
-                        </div>
-                    </div>))}
-            </div>
-            {required && !hasFile && (<div className="mt-3">
-                    <FdFormMessage className="-mt-6 text-destructive">{label} is required</FdFormMessage>
-                </div>)}
-            {fullscreenFile && <PreviewMedia file={fullscreenFile} onClose={() => setFullscreenFile(null)}/>}
-        </>);
-}

package/packages/level2/meta/components/file-upload/PreviewMedia.jsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-/**
- * A modal component for displaying a full-screen preview of an image or video file.
- *
- * This component overlays the current view to show a larger version of the media.
- * It includes a close button and can render either an `<img />` or a `<video />` element
- * based on the file type.
- *
- * @param props - {@link PreviewMediaProps}
- *
- * @example
- * ```tsx
- * const [fullscreenFile, setFullscreenFile] = useState<FileData | null>(null);
- *
- * // ... inside your component
- * {fullscreenFile && (
- *     <PreviewMedia
- *         file={fullscreenFile}
- *         onClose={() => setFullscreenFile(null)}
- *     />
- * )}
- * ```
- */
-export function PreviewMedia({ file, onClose }) {
-    return (<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75">
-            <div className="relative max-w-4xl">
-                <FdButton onClick={onClose} className="absolute right-4 top-4 z-10">
-                    <FdIcon name={iconNames.cross2}/>
-                </FdButton>
-                {file.preview ? (<video src={file.url} controls autoPlay playsInline className="pointer-events-auto max-h-screen max-w-full rounded-lg"/>) : (<FdFrameworkImage src={file.url} alt="Full-screen preview" width={800} height={600} className="rounded-lg"/>)}
-            </div>
-        </div>);
-}

package/packages/level2/meta/components/multi-list/FdMultiList.jsx

@@ -1,65 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-import { fdMultiListTypes, } from "@meta/components/multi-list/multi-list-types";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { getItemsListConfig, getMultiListConfig } from "@meta/components/multi-list/FdMultiList.funcs";
-import { useCallback, useMemo, useState } from "react";
-import { ResourceList } from "@meta/resource-list/ResourceList";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { fetchUiResourceMeta } from "@meta/ui-meta-providers";
-import { resourceNames } from "@fd-toolbox/resources/resource-names";
-import { FdCommentList } from "@meta/comment/FdCommentList";
-import FdMultiListEditResource from "@meta/components/multi-list/FdMultiListEditResource";
-import { ManyToOneTableHeaderCellTemplate } from "@meta/view/view-resource/templates/ManyToOneTableHeaderCellTemplate";
-/**
- * Component for displaying multiple related resource lists with support for different display modes
- *
- * @param FdMultiListProps {@link FdMultiListProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [multiListItems, setMultiListItems] = useState([]);
- *
- *     return (
- *         <FdMultiList
- *             multiListItems={multiListItems}
- *             tableConfig={{excludeColumns: [], customActions: [], editMode: 0}}
- *             type={0}
- *         />
- *     );
- * }
- * ```
- */
-export function FdMultiList({ multiListItems, className, type, onCustomAction, onMultiListResourceRelationChange, tableConfig: tableConfigProp, commentList, onSavingStarting, onSavingEnding, }) {
-    const config = useMemo(() => getMultiListConfig(multiListItems, tableConfigProp), [multiListItems, tableConfigProp]);
-    const [uiResourceMeta, setUiResourceMeta] = useState();
-    useAsyncEffect(async () => {
-        setUiResourceMeta(await fetchUiResourceMeta(resourceNames.comment));
-    }, []);
-    const getResourceListConfig = useCallback((multiListItem) => {
-        return getItemsListConfig(config, multiListItem, RenderManyToOneHeaderCell, onCustomAction, onMultiListResourceRelationChange);
-    }, [config, onCustomAction, onMultiListResourceRelationChange]);
-    const resourceListConfigs = useMemo(() => {
-        return config.items.map(getResourceListConfig);
-    }, [config, getResourceListConfig]);
-    return (<div className={cn("flex flex-col gap-6 pb-5 lg:pb-0", className)}>
-            {type === fdMultiListTypes.resource &&
-            config.items.map((multiListItem, index) => (<div key={`${multiListItem.resourceId}_${multiListItem.relatedResourceElementId}_${index}`} id={multiListItem.relatedResourceElementId} className="flex flex-col">
-                        <ResourceList resourceListConfig={resourceListConfigs[index]} resourceName={multiListItem.resourceName} showFilters={false} filters={multiListItem.filters} displayMode={tableDisplayModes.minimal} isTableRequired={false} pluralName={multiListItem.name}/>
-                    </div>))}
-            {type === fdMultiListTypes.editResource &&
-            config.items?.map((multiListItem) => (<FdMultiListEditResource key={`${multiListItem.resourceId}_${multiListItem.relatedResourceElementId}`} multiListItem={multiListItem} onSavingStarting={onSavingStarting} onSavingEnding={onSavingEnding}/>))}
-            {commentList && commentList.length > 0 && uiResourceMeta && (<>
-                    <h1 className="py-3 text-sm font-semibold text-muted-foreground">
-                        {uiResourceMeta.resourceMeta.display.pluralName}
-                    </h1>
-                    <div className="w-full px-0 lg:px-4">
-                        <FdCommentList resources={commentList} resourceId={uiResourceMeta.resourceMeta.id} resourceName={resourceNames.comment}/>
-                    </div>
-                </>)}
-        </div>);
-}
-export default FdMultiList;
-function RenderManyToOneHeaderCell(props, multiListItem, onMultiListResourceRelationChange) {
-    return (<ManyToOneTableHeaderCellTemplate parentResourcePropertyMeta={multiListItem.parentResourcePropertyMeta} resourceId={multiListItem.resourceId} multiListItem={multiListItem} onViewMultiListRelationChange={onMultiListResourceRelationChange} onCustomAction={props.onCustomAction}/>);
-}