@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/meta/table/body-cell/FdBodyCellValue.jsx

@@ -1,59 +0,0 @@
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-import { FdBadge } from "@fd-component-toolbox/badge/FdBadge";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { FdViewCell } from "@meta/table/body-cell/FdViewCell";
-import { FdBlobBodyCell } from "@meta/table/body-cell/FdBlobBodyCell";
-import FdBodyExpandPropertyCell from "@meta/table/body-cell/FdBodyExpandPropertyCell";
-import { getAbsoluteUrl, getMailToUrl } from "@fd-toolbox/routing/routers";
-import { getLabelUrl, getBodyBackgroundColorClassNameByCellContext, isColorfulCell, } from "@meta/table/body-cell/FdBodyCell.funcs";
-import { isBlobCell, isBrowserTable, isDescriptionPropertyCell, isEmailCell, isExpandPropertyCell, isImageCell, isUrlCell, } from "@meta/table/services/fd-table-private-cell";
-import { isMarkdown, isRichText } from "@meta/core/property-types";
-export function FdBodyCellValue({ cellContext, onRefreshItems, cellValue, imageSrc, onViewClick, parsedMarkdown, parsedRichText, }) {
-    switch (true) {
-        case isExpandPropertyCell(cellContext):
-            if (isBlobCell(cellContext)) {
-                return <FdBlobBodyCell cellContext={cellContext}/>;
-            }
-            else if (!isBrowserTable(cellContext)) {
-                return (<FdBodyExpandPropertyCell cellContext={cellContext} onRefreshItems={onRefreshItems}>
-                        <div>{cellValue}</div>
-                    </FdBodyExpandPropertyCell>);
-            }
-            else {
-                return <div>{cellValue}</div>;
-            }
-        case isDescriptionPropertyCell(cellContext):
-            return !isBrowserTable(cellContext) ? (<FdViewCell cellContext={cellContext} onRefreshResources={onRefreshItems} onViewClick={onViewClick}>
-                    <div className="flex items-center">
-                        {isImageCell(cellContext) && (<FdAvatar className="mr-2 size-5">
-                                <FdAvatarImage />
-                                <FdAvatarFallback>
-                                    <FdFrameworkImage className="object-fill" src={imageSrc} alt="Resource image" width={40} height={40} loading="lazy"/>
-                                </FdAvatarFallback>
-                            </FdAvatar>)}
-                        <p>{cellValue}</p>
-                    </div>
-                </FdViewCell>) : (<p>{cellValue}</p>);
-        case isUrlCell(cellContext):
-            return (cellValue && (<FdLink href={getAbsoluteUrl(cellValue)} openInNewTab>
-                        {getLabelUrl(cellContext) ?? cellValue}
-                    </FdLink>));
-        case isEmailCell(cellContext):
-            return (<FdLink href={getMailToUrl(cellValue)} openInNewTab>
-                    {cellValue}
-                </FdLink>);
-        case isColorfulCell(cellContext):
-            return (<FdBadge className={cn("rounded-md px-1 py-px font-normal", getBodyBackgroundColorClassNameByCellContext(cellContext))}>
-                    {cellValue}
-                </FdBadge>);
-        case isMarkdown(cellContext.internalTableColumn.propertyType, cellContext.internalTableColumn.propertyTypeFormat):
-            return <div dangerouslySetInnerHTML={{ __html: parsedMarkdown }}></div>;
-        case isRichText(cellContext.internalTableColumn.propertyType, cellContext.internalTableColumn.propertyTypeFormat):
-            return parsedRichText[0] ?? <p>{cellValue}</p>;
-        case true:
-        default:
-            return <p>{cellValue}</p>;
-    }
-}

package/packages/level2/meta/table/body-cell/FdBodyExpandCell.jsx

@@ -1,6 +0,0 @@
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-export function FdBodyExpandCell({ cellContext, children, onRefreshResources, onViewClick, }) {
-    return (<FdViewSheet id={cellContext.row.item.id} resourceName={cellContext.tableInstance.uiResourceMeta?.resourceMeta.resourceName} onRefreshResources={onRefreshResources} onEditClick={onViewClick} editMode={cellContext.tableInstance.editMode}>
-            {children}
-        </FdViewSheet>);
-}

package/packages/level2/meta/table/body-cell/FdBodyExpandPropertyCell.jsx

@@ -1,22 +0,0 @@
-import React, { useCallback } from "react";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { getResourceUrl } from "@meta/services/meta-navigations";
-import { routes } from "@fd-toolbox/routing/routes";
-import { silentChangeUrl } from "@fd-toolbox/routing/routers";
-import { getOptionalPropertyValue } from "@fd-toolbox/objects/property-value";
-export default function FdBodyExpandPropertyCell({ cellContext, onRefreshItems, children, }) {
-    const expandInfo = cellContext.internalTableColumn.expandInfo;
-    const item = cellContext.row.item;
-    const expandedItem = getOptionalPropertyValue(item, expandInfo.expandPropertyName);
-    const resourceId = expandedItem?.id;
-    const resourceName = expandInfo.resourceMeta.resourceName;
-    const handleViewClick = useCallback(() => {
-        if (cellContext) {
-            const url = getResourceUrl(routes.view, resourceName, resourceId);
-            silentChangeUrl(url);
-        }
-    }, [cellContext, resourceName, resourceId]);
-    return (<FdViewSheet id={resourceId} resourceName={resourceName} onRefreshResources={onRefreshItems} onEditClick={handleViewClick}>
-            {children}
-        </FdViewSheet>);
-}

package/packages/level2/meta/table/body-cell/FdCustomActionLink.jsx

@@ -1,16 +0,0 @@
-import { useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-/**
- * Wrapper component for {@link FdLink} that dynamically generates URLs based on table cell context.
- * Used in table actions to create links whose destinations depend on row data.
- *
- * @param props - See {@link FdCustomActionLinkProps}
- */
-export function FdCustomActionLink({ text, cellContext, dynamicLink }) {
-    const [href, setHref] = useState("");
-    useAsyncEffect(async () => {
-        setHref(await dynamicLink(cellContext));
-    });
-    return <FdLink href={href}>{text}</FdLink>;
-}

package/packages/level2/meta/table/body-cell/FdMultiselectCellTemplate.jsx

@@ -1,39 +0,0 @@
-"use client";
-import React, { useEffect, useMemo, useState } from "react";
-import { getOptionalPropertyValue } from "@fd-toolbox/objects/property-value";
-import { FdMultiselect, FdMultiselectContent, FdMultiselectInput, FdMultiselectItem, FdMultiselectList, FdMultiselectTrigger, } from "@fd-component-toolbox/multiselect/FdMultiselect";
-import { cn } from "@fd-toolbox/lib/utils";
-import { prepareMultiselectCellDisplayValues } from "@meta/table/body-cell/FdBodyCell.funcs";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { getMultiselectCellTemplateValuesArray } from "@meta/table/body-cell/FdMultiselectCellTemplate.funcs";
-export default function FdMultiselectCellTemplate({ resource, entityPath, valueProperty, transformValues, }) {
-    const multiselectItems = useMemo(() => {
-        return getOptionalPropertyValue(resource[entityPath] ?? {}, valueProperty);
-    }, [resource, entityPath, valueProperty]);
-    const valuesArray = useMemo(() => {
-        return getMultiselectCellTemplateValuesArray(multiselectItems, transformValues);
-    }, [multiselectItems, transformValues]);
-    const displayValues = useMemo(() => prepareMultiselectCellDisplayValues(valuesArray), [valuesArray]);
-    const [selectedValues, setSelectedValues] = useState([]);
-    useEffect(() => {
-        if (displayValues && displayValues.size > 0) {
-            setSelectedValues(Array.from(displayValues.keys()));
-        }
-    }, [displayValues]);
-    return displayValues && displayValues.size !== 0 ? (<div>
-            {displayValues.size === 1 ? (<FdFadeOutText>
-                    <p>{displayValues.get("0")}</p>
-                </FdFadeOutText>) : (<FdMultiselect values={selectedValues} onValuesChange={setSelectedValues} disabled={false} displayValues={displayValues} variant="float" withSelectAll>
-                    <FdMultiselectTrigger>
-                        <FdMultiselectInput className="mt-0 w-full"/>
-                    </FdMultiselectTrigger>
-                    <FdMultiselectContent className="absolute">
-                        <FdMultiselectList className="top-9 z-50">
-                            {[...displayValues].map(([key, value]) => (<FdMultiselectItem className={cn("min-h-6 whitespace-nowrap")} key={key} value={key}>
-                                    {value}
-                                </FdMultiselectItem>))}
-                        </FdMultiselectList>
-                    </FdMultiselectContent>
-                </FdMultiselect>)}
-        </div>) : null;
-}

package/packages/level2/meta/table/body-cell/FdViewCell.jsx

@@ -1,12 +0,0 @@
-import { useEffect, useState } from "react";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { findAndSetCustomViewCellAction } from "@meta/table/body-cell/FdViewCell.funcs";
-export function FdViewCell({ cellContext, children, onRefreshResources, onViewClick }) {
-    const [customAction, setCustomAction] = useState();
-    useEffect(() => {
-        findAndSetCustomViewCellAction(cellContext, setCustomAction);
-    }, [cellContext]);
-    return customAction ? (<div onClick={() => customAction.cellAction?.(cellContext)}>{children}</div>) : (<FdViewSheet id={cellContext.row.item.id} resourceName={cellContext.tableInstance.uiResourceMeta?.resourceMeta.resourceName} onRefreshResources={onRefreshResources} onEditClick={onViewClick} editMode={cellContext.tableInstance.editMode}>
-            {children}
-        </FdViewSheet>);
-}

package/packages/level2/meta/table/body-row/FdTableBodyRow.jsx

@@ -1,49 +0,0 @@
-import React, { useCallback, useEffect, useState, useRef, useContext } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { onInitTableBody, handleRowClick, getRowId, applyResizableTableBodyLayout, } from "@meta/table/body-row/FdTableBodyRow.funcs";
-import { FdBodyCell } from "@meta/table/body-cell/FdBodyCell";
-import { FdResizablePanelGroup, FdResizablePanel, FdResizableHandle, } from "@meta/table/header-cell/FdResizable";
-import { internalTableColumnTypes } from "@meta/table/table-models";
-import { FdTableContext } from "@meta/table/table-context";
-import { tableElementSuffixes } from "@fd-component-toolbox/table-element-suffixes";
-import { calculateDefaultSize } from "@meta/table/services/fd-table-private-column-calculation";
-import { getColumnSize } from "@meta/table/header/FdTableHeader.funcs";
-export function FdTableBodyRow({ rowContext, displayMode, onRefreshItems, itemDeleted, cellClick, className, tableActionType, }) {
-    const [bodyCellClasses, setBodyCellClasses] = useState([]);
-    const [bodyCellTestGroup, setBodyCellTestGroup] = useState("");
-    const [cellContexts, setCellContexts] = useState([]);
-    const [isHovered, setIsHovered] = useState(false);
-    const { columnWidths } = useContext(FdTableContext);
-    const resizableRef = useRef(null);
-    const onRowClickCallback = useCallback(() => {
-        handleRowClick(rowContext, cellClick);
-    }, [rowContext, cellClick]);
-    useEffect(() => {
-        onInitTableBody(bodyCellTestGroup, setBodyCellTestGroup, setCellContexts, setBodyCellClasses, rowContext, displayMode);
-    }, [bodyCellTestGroup, displayMode, rowContext]);
-    useEffect(() => {
-        if (resizableRef.current) {
-            applyResizableTableBodyLayout(columnWidths, resizableRef.current.setLayout);
-        }
-    }, [columnWidths]);
-    return rowContext ? (<div id={getRowId(rowContext.row.index, rowContext, tableElementSuffixes.row)} onClick={onRowClickCallback} className={cn("relative w-full overflow-visible border-input py-1.5 transition duration-200 ease-linear hover:bg-muted/50", className)} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} onBlur={() => setIsHovered(false)}>
-            <span hidden={true} data-id={rowContext.row.item?.id} data-row-index={rowContext.row.index}></span>
-            <FdResizablePanelGroup autoSaveId="persistence" direction={"horizontal"} className="flex h-full min-h-5 flex-row items-center !overflow-visible" ref={resizableRef}>
-                {rowContext.tableInstance.internalTableColumns.map((column, i) => (<React.Fragment key={column.index}>
-                        <FdResizablePanel style={{
-                overflow: "visible",
-            }} defaultSize={calculateDefaultSize(columnWidths[i]) || undefined} className={cn("flex min-w-0 justify-center", rowContext.tableInstance.internalTableColumns[i].type ===
-                internalTableColumnTypes.checkBox && "max-w-8", rowContext.tableInstance.internalTableColumns[i].type ===
-                internalTableColumnTypes.action &&
-                i < 2 &&
-                "min-w-12 max-w-12", rowContext.tableInstance.internalTableColumns[i].type ===
-                internalTableColumnTypes.customHeaderAction && "min-w-5 max-w-16")} minSize={getColumnSize(rowContext.tableInstance.internalTableColumns[i], rowContext.tableInstance, displayMode, rowContext.tableInstance.internalTableColumns)}>
-                            <FdBodyCell cellContext={cellContexts[i]} data-test-group={bodyCellTestGroup} className={bodyCellClasses[i]} onRefreshItems={onRefreshItems} itemDeleted={itemDeleted} actionType={tableActionType} isHovered={isHovered}/>
-                        </FdResizablePanel>
-                        {i === rowContext.tableInstance.internalTableColumns.length - 1 ? null : (<FdResizableHandle disabled className="w-0 border-0"/>)}
-                    </React.Fragment>))}
-
-                <FdResizablePanel order={rowContext.tableInstance.internalTableColumns.length}/>
-            </FdResizablePanelGroup>
-        </div>) : (<FdBodyCell className={bodyCellClasses.join(" ")}/>);
-}

package/packages/level2/meta/table/header/FdTableHeader.jsx

@@ -1,54 +0,0 @@
-import React, { useCallback, useState, useContext, useMemo, useEffect, useRef } from "react";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { onTableHeaderSort, getColumnSize, shouldHideResizableHandle, shouldFadeOutHandle, isFirstOrSecondIndexColumn, initTableHeaderPanelLayout, } from "@meta/table/header/FdTableHeader.funcs";
-import { cn } from "@fd-toolbox/lib/utils";
-import { useHover } from "@fd-toolbox/hooks/use-hover";
-import { FdResizablePanelGroup, FdResizablePanel, FdResizableHandle, } from "@meta/table/header-cell/FdResizable";
-import { FdTableHeaderCell } from "@meta/table/header-cell/FdTableHeaderCell";
-import { internalTableColumnTypes } from "@meta/table/table-models";
-import { FdTableContext } from "@meta/table/table-context";
-import { FdResizableEdgeHandle } from "@meta/table/header-cell/FdResizableEdgeHandle";
-import { isSortableColumn } from "@meta/table/services/fd-table-private-cell";
-export function FdTableHeader({ tableInstance, displayMode, tableSorted, onRefreshItems, className, isTableHovered, columnToWidthPercent, }) {
-    const [isHovered, hoverHandlers] = useHover();
-    const [activeIndex, setActiveIndex] = useState(0);
-    const onOnSortCallback = useCallback((column) => onTableHeaderSort(column, tableSorted), [tableSorted]);
-    const { setColumnWidths } = useContext(FdTableContext);
-    const onLayoutCallback = useCallback((val) => setColumnWidths?.(val), [setColumnWidths]);
-    const internalTableColumns = useMemo(() => tableInstance.internalTableColumns, [tableInstance]);
-    const calculateDefaultSize = useCallback((width) => Math.ceil(width), []);
-    const resizableHandleClasses = cn("m-auto h-4 w-0 border-0 border-r border-muted-foreground", isHovered ? "animate-fade-in" : "animate-fade-out");
-    const panelGroupRef = useRef(null);
-    useEffect(() => {
-        if (panelGroupRef.current) {
-            initTableHeaderPanelLayout(columnToWidthPercent, internalTableColumns, panelGroupRef.current.setLayout);
-        }
-    }, [columnToWidthPercent, internalTableColumns]);
-    return (<div className={cn("relative flex w-full flex-row", className)} {...hoverHandlers}>
-            {internalTableColumns?.length > 0 && (<FdResizablePanelGroup key={`panel-group-${internalTableColumns.map((col) => col.name).join("-")}`} autoSaveId="header" onLayout={onLayoutCallback} direction={"horizontal"} className="flex h-full flex-row items-stretch" ref={panelGroupRef}>
-                    {internalTableColumns.map((internalTableColumn) => (<React.Fragment key={internalTableColumn.index}>
-                            <FdResizablePanel id={`panel-${internalTableColumn.index}`} order={internalTableColumn.index} defaultSize={calculateDefaultSize(internalTableColumn.width) || undefined} className={cn("flex items-center justify-between", internalTableColumn.type === internalTableColumnTypes.checkBox &&
-                    "max-w-8", internalTableColumn.type === internalTableColumnTypes.action &&
-                    isFirstOrSecondIndexColumn(internalTableColumn.index) &&
-                    "min-w-12 max-w-12", internalTableColumn.type === internalTableColumnTypes.customHeaderAction &&
-                    "min-w-5 max-w-16")} minSize={getColumnSize(internalTableColumn, tableInstance, displayMode, internalTableColumns)}>
-                                <FdTableHeaderCell onActiveHandlerIndexChange={() => setActiveIndex(internalTableColumn.index)} cellContext={{
-                    tableInstance,
-                    internalTableColumn,
-                }} tableSorted={onOnSortCallback} onRefreshItems={onRefreshItems} display={displayMode} isTableHovered={isTableHovered} hidden={displayMode === tableDisplayModes.default ? false : !isTableHovered} isColumnSortable={isSortableColumn({
-                    tableInstance,
-                    internalTableColumn,
-                })}/>
-                            </FdResizablePanel>
-
-                            <FdResizableHandle className={cn(resizableHandleClasses, shouldHideResizableHandle(internalTableColumn, tableInstance) && "hidden", shouldFadeOutHandle(activeIndex, internalTableColumn.index) &&
-                    "animate-fade-out")}/>
-
-                            {shouldHideResizableHandle(internalTableColumn, tableInstance) && (<FdResizableEdgeHandle className={cn(resizableHandleClasses, shouldFadeOutHandle(activeIndex, internalTableColumn.index) &&
-                        "animate-fade-out", "cursor-pointer")}/>)}
-                        </React.Fragment>))}
-
-                    <FdResizablePanel order={internalTableColumns.length}/>
-                </FdResizablePanelGroup>)}
-        </div>);
-}

package/packages/level2/meta/table/header-cell/FdResizable.jsx

@@ -1,18 +0,0 @@
-"use client";
-import * as React from "react";
-import * as ResizablePrimitive from "react-resizable-panels";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-function FdResizablePanelGroup({ className, ref, ...props }) {
-    return (<ResizablePrimitive.PanelGroup ref={ref} className={cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className)} {...props}/>);
-}
-FdResizablePanelGroup.displayName = ResizablePrimitive.PanelGroup.displayName;
-const FdResizablePanel = ResizablePrimitive.Panel;
-function FdResizableHandle({ withHandle, className, ...props }) {
-    return (<ResizablePrimitive.PanelResizeHandle className={cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2", "after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary", "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full", "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1", "data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2", "data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className)} {...props}>
-            {withHandle && (<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-                    <FdIcon name={iconNames.dragHandleDots2} size={iconSizes.extraSmall}/>
-                </div>)}
-        </ResizablePrimitive.PanelResizeHandle>);
-}
-export { FdResizablePanelGroup, FdResizablePanel, FdResizableHandle };

package/packages/level2/meta/table/header-cell/FdResizableEdgeHandle.jsx

@@ -1,4 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-export function FdResizableEdgeHandle({ className }) {
-    return <div className={cn(className)}/>;
-}

package/packages/level2/meta/table/header-cell/FdTableHeaderActionCell.jsx

@@ -1,49 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { resourceEditModes } from "@fd-toolbox/constants/resource-list-configs-enums";
-import { internalTableColumnTypes, tableCustomActionTypes, } from "@meta/table/table-models";
-import { onInitTableHeader, setOverlayVisibility, } from "@meta/table/header-cell/FdTableHeaderActionCell.funcs";
-import { FdTableHeaderActionButton } from "@meta/table/header-cell/FdTableHeaderCellActionButton";
-import { navigate } from "@fd-toolbox/redirect/redirect-functions";
-import { routes } from "@fd-toolbox/routing/routes";
-export function FdTableHeaderActionCell({ cellContext, onRefreshItems, setIsEditSheetOpen, ref, }) {
-    const [activePlan, setActivePlan] = useState();
-    const [isOverlayVisible, setIsOverlayVisible] = useState(false);
-    const customAction = useMemo(() => {
-        return cellContext.tableInstance?.customActions?.find((action) => action.actionType === tableCustomActionTypes.create);
-    }, [cellContext.tableInstance?.customActions]);
-    useAsyncEffect(async () => {
-        await onInitTableHeader(cellContext, setActivePlan);
-    }, []);
-    useEffect(() => {
-        setOverlayVisibility(cellContext, setIsOverlayVisible, activePlan);
-    }, [activePlan, cellContext]);
-    const onCustomAction = useCallback((result) => {
-        if (result.shouldRefresh)
-            onRefreshItems?.();
-    }, [onRefreshItems]);
-    const onEditActionButtonClick = useCallback(() => {
-        customAction?.headerCellAction?.(cellContext);
-        onCustomAction({
-            shouldRefresh: customAction?.shouldRefresh ?? true,
-        });
-    }, [cellContext, customAction, onCustomAction]);
-    const onCloseClick = useCallback((open) => {
-        setIsEditSheetOpen(open);
-    }, [setIsEditSheetOpen]);
-    if (customAction) {
-        return (<FdTableHeaderActionButton onClick={onEditActionButtonClick} tooltipText={customAction?.name}/>);
-    }
-    return (<div ref={ref} className="relative">
-            {cellContext.internalTableColumn.type === internalTableColumnTypes.customHeaderAction &&
-            isOverlayVisible}
-            {cellContext.internalTableColumn.type === internalTableColumnTypes.customHeaderAction &&
-            !isOverlayVisible && <FdTableHeaderActionButton onClick={() => navigate(routes.contact)}/>}
-            {cellContext.internalTableColumn.type !== internalTableColumnTypes.customHeaderAction &&
-            !isOverlayVisible && (<FdViewSheet resourceName={cellContext.tableInstance.uiResourceMeta?.resourceMeta.resourceName} uiResourceMeta={cellContext.tableInstance.uiResourceMeta} onRefreshResources={onRefreshItems} onCloseClick={onCloseClick} editMode={resourceEditModes.simple}>
-                        <FdTableHeaderActionButton onClick={() => setIsEditSheetOpen(false)}/>
-                    </FdViewSheet>)}
-        </div>);
-}
-FdTableHeaderActionCell.displayName = "FdTableHeaderActionCell";

package/packages/level2/meta/table/header-cell/FdTableHeaderCell.jsx

@@ -1,89 +0,0 @@
-"use client";
-import React, { createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { fdTableSortDirections, } from "@fd-toolbox/enums/enums";
-import { shouldShowHeaderText, shouldShowHeaderAction, isColumnCheckbox, handleInit, handleSortDirectionChange, updateTableHeaderCellHoverState, getActiveSortPaddingClass, runSelectAllCheckboxes, checkIfAllSelected, } from "@meta/table/header-cell/FdTableHeaderCell.funcs";
-import { useHover } from "@fd-toolbox/hooks/use-hover";
-import { internalTableColumnTypes, tableCustomActionTypes, } from "@meta/table/table-models";
-import { cn } from "@fd-toolbox/lib/utils";
-import { isRightAlignColumn } from "@meta/table/body-cell/FdBodyCell.funcs";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { FdTableHeaderActionCell } from "@meta/table/header-cell/FdTableHeaderActionCell";
-import { FdCheckbox } from "@fd-component-toolbox/checkbox/FdCheckbox";
-import { FdTableContext } from "@meta/table/table-context";
-export function FdTableHeaderCell({ cellContext, tableSorted, onRefreshItems, onActiveHandlerIndexChange, display, isTableHovered: isTableHoveredProp, hidden, isColumnSortable, }) {
-    const [headerText, setHeaderText] = useState("");
-    const [headerId, setHeaderId] = useState("");
-    const [fullHeaderText, setFullHeaderText] = useState("");
-    const [sortDirection, setSortDirection] = useState(cellContext.internalTableColumn.sortDirection ?? fdTableSortDirections.desc);
-    const [isTableHovered, setIsTableHovered] = useState(false);
-    const [isHovered, hoverHandlers] = useHover();
-    const [isEditSheetOpen, setIsEditSheetOpen] = useState(false);
-    useEffect(() => {
-        updateTableHeaderCellHoverState(isEditSheetOpen, isTableHoveredProp, setIsTableHovered);
-    }, [isEditSheetOpen, isTableHoveredProp]);
-    useEffect(() => {
-        handleInit(cellContext, setHeaderText, setFullHeaderText, setHeaderId);
-    }, [cellContext]);
-    const onHeaderSortClickCallback = useCallback(() => {
-        if (isColumnSortable) {
-            handleSortDirectionChange(setSortDirection, tableSorted, cellContext, sortDirection);
-        }
-    }, [cellContext, sortDirection, tableSorted, isColumnSortable]);
-    const alignmentClass = useMemo(() => {
-        return isRightAlignColumn(cellContext?.internalTableColumn) ? "flex-row-reverse" : "";
-    }, [cellContext?.internalTableColumn]);
-    const activeSortPaddingClass = useMemo(() => {
-        return getActiveSortPaddingClass(cellContext?.internalTableColumn);
-    }, [cellContext?.internalTableColumn]);
-    const alignmentArrowClass = useMemo(() => {
-        return isRightAlignColumn(cellContext?.internalTableColumn) ? "" : "right-0";
-    }, [cellContext?.internalTableColumn]);
-    const { tableRows = [], setTableRows } = useContext(FdTableContext);
-    const onSelectAllCheckboxes = useCallback(() => {
-        return runSelectAllCheckboxes(setTableRows);
-    }, [setTableRows]);
-    const isAllSelected = useMemo(() => {
-        return checkIfAllSelected(tableRows);
-    }, [tableRows]);
-    const customAction = useMemo(() => {
-        return cellContext.tableInstance?.customActions?.find((action) => action.actionType === tableCustomActionTypes.template);
-    }, [cellContext.tableInstance?.customActions]);
-    const onCustomAction = useCallback((result) => {
-        if (result.shouldRefresh)
-            onRefreshItems?.();
-    }, [onRefreshItems]);
-    return (<div {...hoverHandlers} onMouseMove={onActiveHandlerIndexChange} className="size-full">
-            {isColumnCheckbox(cellContext) ? (<div className={cn("relative flex size-full cursor-pointer items-center justify-center p-0 text-xs lg:text-sm")}>
-                    <FdCheckbox checked={Boolean(isAllSelected)} onCheckedChange={onSelectAllCheckboxes}/>
-                </div>) : (<div className={cn("relative flex size-full cursor-pointer items-center justify-center p-2 text-xs lg:text-sm")}>
-                    {(cellContext.internalTableColumn.type === internalTableColumnTypes.action ||
-                cellContext.internalTableColumn.type ===
-                    internalTableColumnTypes.customHeaderAction) && (<div className={cn("flex size-4 items-center justify-center", shouldShowHeaderAction(cellContext, isTableHovered, display)
-                    ? "animate-fade-in"
-                    : "animate-fade-out")}>
-                            {cellContext.tableInstance.uiResourceMeta && customAction?.template ? (<>
-                                    {createElement(customAction.template, {
-                        onCustomAction: () => onCustomAction({
-                            shouldRefresh: customAction.shouldRefresh,
-                        }),
-                        internalTableColumn: cellContext.internalTableColumn,
-                        resourceName: cellContext.tableInstance.uiResourceMeta.resourceMeta
-                            .resourceName,
-                    })}
-                                </>) : (<FdTableHeaderActionCell cellContext={cellContext} onRefreshItems={onRefreshItems} setIsEditSheetOpen={setIsEditSheetOpen}/>)}
-                        </div>)}
-                    {shouldShowHeaderText(cellContext) && (<div className={cn("flex w-full flex-row items-center justify-between gap-1 text-xs text-subtle-500 lg:text-sm", alignmentClass, isColumnSortable ? "cursor-pointer" : "cursor-default")}>
-                            <FdFadeOutText className={activeSortPaddingClass} isRightAlign={isRightAlignColumn(cellContext?.internalTableColumn)} id={headerId} onTooltipClick={onHeaderSortClickCallback} tooltipContent={fullHeaderText}>
-                                {headerText}
-                            </FdFadeOutText>
-                            <div className={cn("flex size-4 min-w-4 items-center justify-center rounded-full bg-background", alignmentArrowClass, !hidden && (isHovered || cellContext.internalTableColumn.isActiveSort)
-                    ? "animate-fade-in"
-                    : "animate-fade-out")} onClick={onHeaderSortClickCallback}>
-                                {isColumnSortable &&
-                    (sortDirection === fdTableSortDirections.asc ? (<FdIcon name={iconNames.chevronUp} size={iconSizes.extraSmall}/>) : (<FdIcon name={iconNames.chevronDown} size={iconSizes.extraSmall}/>))}
-                            </div>
-                        </div>)}
-                </div>)}
-        </div>);
-}

package/packages/level2/meta/table/header-cell/FdTableHeaderCellActionButton.jsx

@@ -1,23 +0,0 @@
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { tableElementSuffixes } from "@fd-component-toolbox/table-element-suffixes";
-import { FdTooltipProvider, FdTooltip, FdTooltipTrigger, FdTooltipContent, } from "@fd-component-toolbox/tooltip/FdTooltip";
-import { index } from "drizzle-orm/mysql-core";
-export const FdTableHeaderActionButton = ({ onClick, icon, showTooltip, tooltipText, ref, }) => {
-    const tooltip = showTooltip ?? true;
-    const buttonContent = (<FdButton ref={ref} id={tableElementSuffixes.addButton} variant="icon" size="icon" className="size-4 pt-1.5" onClick={onClick} tooltipText={tooltipText ?? "Add"} tooltipClassName="mb-1" tooltipSide="top">
-            <FdIcon name={icon ?? iconNames.plus} size={iconSizes.small} color="text-fd-accent" className="mt-1 stroke-fd-accent stroke-0.65"/>
-        </FdButton>);
-    if (tooltip) {
-        return (<div className="relative">
-                <FdTooltipProvider key={`tableHeaderCellActionButton${index}`}>
-                    <FdTooltip>
-                        <FdTooltipTrigger asChild>{buttonContent}</FdTooltipTrigger>
-                        {tooltipText && <FdTooltipContent>{tooltipText}</FdTooltipContent>}
-                    </FdTooltip>
-                </FdTooltipProvider>
-            </div>);
-    }
-    return buttonContent;
-};
-FdTableHeaderActionButton.displayName = "FdTableHeaderActionButton";

package/packages/level2/meta/table/pager/FdPager.jsx

@@ -1,72 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { goToNextPage, goToPreviousPage, handlePageSizeChange, shouldDisabledNextPageButton, } from "@meta/table/pager/FdPager.funcs";
-import { FdSelect, FdSelectTrigger, FdSelectValue, FdSelectContent, FdSelectGroup, FdSelectItem, } from "@fd-component-toolbox/select/FdSelect";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { cn } from "@fd-toolbox/lib/utils";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { elements } from "@fd-toolbox/constants/elements";
-import { elementPrefixes } from "@meta/constants/element-prefixes";
-export const pageSizeOptions = [1, 3, 6, 10, 25, 50, 100];
-/**
- * An interactive pagination component used for navigating data tables.
- * Includes controls for changing page number and selecting number of rows per page.
- *
- * @param props - {@link FdPagerProps}
- *
- */
-export function FdPager({ displayMode, pageSize: pageSizeProp, rowCount, onPaging, setIsActive, setPageNumber, pageNumber, }) {
-    const [pageSize, setPageSize] = useState(pageSizeProp);
-    const [isOpened, setIsOpened] = useState(false);
-    useEffect(() => {
-        setPageSize(pageSizeProp);
-    }, [pageSizeProp]);
-    const onGoToPreviousPage = useCallback(() => {
-        goToPreviousPage(pageNumber, pageSize, onPaging, setPageNumber);
-    }, [onPaging, pageNumber, setPageNumber, pageSize]);
-    const onGoToNextPage = useCallback(() => {
-        goToNextPage(pageNumber, pageSize, onPaging, setPageNumber);
-    }, [onPaging, pageNumber, setPageNumber, pageSize]);
-    const onPageSizeChange = useCallback((newSize) => {
-        handlePageSizeChange(newSize, setPageSize, pageNumber, onPaging, setPageNumber, setIsOpened);
-    }, [pageNumber, setPageNumber, onPaging]);
-    return (<div className={cn("flex select-none items-center gap-1 pt-2 text-sm")} onFocus={() => setIsActive(true)} onBlur={() => setIsActive(false)}>
-            {(displayMode ?? tableDisplayModes.default) !== tableDisplayModes.minimal && (<DropdownMenu.Root open={isOpened} onOpenChange={setIsOpened}>
-                    <DropdownMenu.Trigger asChild>
-                        <FdButton id={elements.pager.openPagerButtonId} size="icon" variant="ghost">
-                            <FdIcon name="dotsHorizontal"/>
-                        </FdButton>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Portal>
-                        <DropdownMenu.Content className="z-50 ml-24 flex min-w-32 items-center justify-between gap-2 rounded-md border bg-background px-2 py-1 shadow-sm">
-                            <span className="mr-1 text-sm">Rows</span>
-                            <div className="w-auto">
-                                <FdSelect value={pageSize.toString()} onValueChange={onPageSizeChange}>
-                                    <FdSelectTrigger id={elements.pager.pagerSelectTriggerId} iconClassName="opacity-1" noUnderline={true}>
-                                        <FdSelectValue />
-                                    </FdSelectTrigger>
-                                    <FdSelectContent>
-                                        <FdSelectGroup>
-                                            {pageSizeOptions.map((option, index) => (<FdSelectItem id={elementPrefixes.selectItem + option.toString()} index={index} key={option} value={option.toString()}>
-                                                    {option}
-                                                </FdSelectItem>))}
-                                        </FdSelectGroup>
-                                    </FdSelectContent>
-                                </FdSelect>
-                            </div>
-                        </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                </DropdownMenu.Root>)}
-            <div className="flex -space-x-3">
-                <FdButton id={elements.pager.previousPageButton} disabled={pageNumber === 1} size="icon" variant="ghost" onClick={onGoToPreviousPage}>
-                    <FdIcon name={iconNames.chevronLeft}/>
-                </FdButton>
-
-                <FdButton id={elements.pager.nextPageButton} disabled={shouldDisabledNextPageButton(rowCount, pageSize)} size="icon" variant="ghost" onClick={onGoToNextPage} className={cn(rowCount === 0 && "hidden")}>
-                    <FdIcon name={iconNames.chevronRight}/>
-                </FdButton>
-            </div>
-            {pageNumber > 1 && <div className="mr-1">Page {pageNumber}</div>}
-        </div>);
-}

package/packages/level2/meta/table/table-custom-action/TableCustomAction.jsx

@@ -1,26 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { doTableCustomAction } from "@meta/table/table-custom-action/TableCustomAction.funcs";
-import { FdIcon } from "@fd-component-toolbox/icon/FdIcon";
-import { tableCustomActionTypes, } from "@meta/table/table-models";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-export function TableCustomAction({ cellContext, customAction, onAction }) {
-    const onActionCallback = useCallback(async () => {
-        if (customAction.cellAction) {
-            const actionOut = doTableCustomAction(customAction.cellAction, cellContext);
-            const actionResult = { shouldRefresh: customAction.shouldRefresh };
-            if (customAction.shouldRefresh && actionOut instanceof Promise) {
-                await actionOut;
-                onAction(actionResult);
-            }
-            else {
-                onAction(actionResult);
-            }
-        }
-    }, [customAction, cellContext, onAction]);
-    const isActionVisible = useMemo(() => (customAction?.shouldBeShown ? customAction.shouldBeShown(cellContext) : true) &&
-        customAction.actionType !== tableCustomActionTypes.template, [customAction, cellContext]);
-    return (isActionVisible && (<FdButton className="flex h-7 cursor-pointer items-center gap-2 px-1.5 py-1 font-normal text-muted-foreground hover:text-muted-foreground" onClick={onActionCallback} variant={"ghost"}>
-                {customAction.icon && <FdIcon name={customAction.icon}/>}
-                {customAction.name}
-            </FdButton>));
-}

package/packages/level2/meta/view/FdView.jsx

@@ -1,31 +0,0 @@
-"use client";
-import { tabsNames } from "@meta/view/view-constants";
-import { ResourceList } from "@meta/resource-list/ResourceList";
-import FdViewResource from "@meta/view/view-resource/FdViewResource";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { isUuidSet } from "@fd-toolbox/functions/value-checking-functions";
-import { isResourceListView } from "@meta/resource-list/resource-lists";
-/**
- * A configurable component that can take many forms.
- *
- * For example, it can take form of {@link ResourceList}, {@link FdViewResource}, or others depending on configuration.
- *
- * @param props - {@link FdViewProps}
- *
- * @example
- * ```tsx
- * <FdView
- *     resourceName="student"
- *     resourceId="d4507481-8b33-46e7-9c2e-606daab170cc"
- * />
- * ```
- */
-export function FdView({ resourceName, resourceId, onDeleteComplete, onCancelClick, onSaveComplete, viewConfigProp, defaultTab, viewName, resourcesPromise, uiResourceMeta, relatedUiResourceMetas, onRefreshResource, }) {
-    useSetTitle(resourceName, uiResourceMeta);
-    const hasId = isUuidSet(resourceId);
-    if (isResourceListView(viewName, resourceId)) {
-        return (<ResourceList resourceName={resourceName} resourcesPromise={resourcesPromise} uiResourceMeta={uiResourceMeta} relatedUiResourceMetas={relatedUiResourceMetas}/>);
-    }
-    else
-        return (<FdViewResource resourceId={resourceId} hasId={hasId} resourceName={resourceName} onDeleteComplete={onDeleteComplete} onCancelClick={onCancelClick} onSaveComplete={onSaveComplete} viewConfigProp={viewConfigProp} defaultTab={defaultTab ?? tabsNames.overview} onRefreshData={onRefreshResource}/>);
-}