@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/fd-app-toolbox/search/search-resource-results/FdSearchResourcesResults.jsx

@@ -1,36 +0,0 @@
-"use client";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-/**
- * Component for displaying search results as a clickable list with screen names
- *
- * @param props - {@link FdSearchResourceResultsProps}
- *
- * @example
- * ```tsx
- * <FdSearchScreenResults
- *     resourcesResults={[
- *         {resourceName: "Dashboard", displayName: "Main Dashboard", resourceListUrl: "/dashboard"},
- *         {resourceName: "Settings", displayName: "User Settings", resourceListUrl: "/settings"}
- *     ]}
- *     onClose={...}
- * />
- * ```
- */
-export function FdSearchScreenResults({ resourcesResults, onClose }) {
-    return (<div className="ml-4">
-            <div className="mb-4 flex items-center space-x-2">
-                <FdIcon name={iconNames.listBulletIcon} size={iconSizes.medium}/>
-                <h2 className="text-base font-medium text-fd-tertiary-900">Screens</h2>
-            </div>
-            <div className="flex flex-col">
-                {resourcesResults.map((resourceResult) => (<FdLink key={`${resourceResult.resourceName}_${resourceResult.resourceListUrl}`} href={resourceResult.resourceListUrl} onClick={onClose}>
-                        <div className="relative w-full overflow-hidden rounded border-input py-1.5 pl-4 transition duration-200 ease-linear hover:bg-muted/50">
-                            <h3 className="text-sm font-semibold text-muted-foreground">
-                                {resourceResult.resourceName}
-                            </h3>
-                        </div>
-                    </FdLink>))}
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/search/search-result/FdSearchResult.jsx

@@ -1,46 +0,0 @@
-import React, { useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { getSearchDialogTableConfig, initSearchResult, } from "@fd-app-toolbox/search/search-result/FdSearchResult.funcs";
-import { FdIcon, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { getResourceViewUrl } from "@meta/services/meta-navigations";
-import { FdTable } from "@meta/table/FdTable";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-/**
- * Component for displaying resource items in table with resource title
- *
- * @param props - {@link FdSearchResultsProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [items, setItems] = useState([...]);
- *
- *     return (
- *         <FdSearchResults resourceName="Contact" items={items} onClose={...} refreshSearchResults={...}/>
- *     );
- * }
- * ```
- */
-export function FdSearchResults({ resourceName, items, onClose, refreshSearchResults, }) {
-    const [uiResourceMeta, setUiResourceMeta] = useState();
-    const [readonly, setReadonly] = useState(false);
-    const [iconResource, setIconResource] = useState("");
-    useAsyncEffect(async () => {
-        await initSearchResult(resourceName, setUiResourceMeta, setReadonly, setIconResource);
-    }, []);
-    return (<>
-            <div className="mb-4 ml-4 flex items-center space-x-2">
-                <FdIcon name={iconResource} size={iconSizes.medium}/>
-                <FdLink href={getResourceViewUrl(resourceName)} onClick={onClose}>
-                    <FdSubHeading>
-                        {uiResourceMeta?.resourceMeta.display.pluralName ?? resourceName}
-                    </FdSubHeading>
-                </FdLink>
-            </div>
-            <div>
-                <FdTable className="px-4" items={items} readonly={readonly} uiResourceMeta={uiResourceMeta} externalSorting={false} displayMode={tableDisplayModes.minimal} tableConfig={getSearchDialogTableConfig()} itemDeleted={refreshSearchResults}/>
-            </div>
-        </>);
-}

package/packages/level2/fd-app-toolbox/search/search-searchable-resource-results/FdSearchSearchableResourceResult.jsx

@@ -1,43 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { FdIcon, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { getSearchableProperties, getSearchResultTableId, getTableConfig, initSearchSearchableResourceResult, } from "@fd-app-toolbox/search/search-searchable-resource-results/FdSearchSearchableResourceResult.funcs";
-import { FdTable } from "@meta/table/FdTable";
-/**
- * Component for displaying resource items in table with resource title
- * Similar to {@link FdSearchResults} but with non-clickable title
- *
- * @param props - {@link FdSearchSearchableResourceResultProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [items, setItems] = useState([...]);
- *
- *     return (
- *         <FdSearchSearchableResourceResult resourceName="Contact" items={items}
- *     );
- * }
- * ```
- */
-export function FdSearchSearchableResourceResult({ resourceName, items, parentContextName, }) {
-    const [uiResourceMeta, setUiResourceMeta] = useState();
-    const [iconResource, setIconResource] = useState("");
-    useAsyncEffect(async () => {
-        await initSearchSearchableResourceResult(resourceName, setUiResourceMeta, setIconResource);
-    }, []);
-    const searchableProperties = getSearchableProperties(uiResourceMeta);
-    return (<div>
-            <div className="mb-4 ml-4 flex items-center space-x-2">
-                <FdIcon name={iconResource} size={iconSizes.medium}/>
-                <h2 className="text-base font-medium text-fd-tertiary-900">
-                    {uiResourceMeta?.resourceMeta.display.pluralName ?? resourceName}
-                </h2>
-            </div>
-            <div>
-                <FdTable id={getSearchResultTableId(parentContextName, resourceName)} className="px-4" items={items} readonly={false} uiResourceMeta={uiResourceMeta} externalSorting={false} displayMode={tableDisplayModes.minimal} tableConfig={getTableConfig(searchableProperties)}/>
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/search/search-searchable-resource-results/FdSearchSearchableResourceResults.jsx

@@ -1,22 +0,0 @@
-import { FdSearchSearchableResourceResult } from "@fd-app-toolbox/search/search-searchable-resource-results/FdSearchSearchableResourceResult";
-/**
- * Component for rendering multiple searchable resource results
- *
- * @param props - {@link FdSearchSearchableResourceResultsProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [resourcesResults, setResourcesResults] = useState([...]);
- *
- *     return (
- *         <FdSearchSearchableResourceResults resourcesResults={resourcesResults}/>
- *     );
- * }
- * ```
- */
-export function FdSearchSearchableResourceResults({ resourcesResults, parentContextName, }) {
-    return (<>
-            {resourcesResults.map(({ resourceName, resources }) => resources.length && (<FdSearchSearchableResourceResult parentContextName={parentContextName} key={resourceName} resourceName={resourceName} items={resources}/>))}
-        </>);
-}

package/packages/level2/fd-app-toolbox/server/layout/private-layout/PrivateLayout.jsx

@@ -1,32 +0,0 @@
-import { getUserId } from "@meta/server/auth/users/current-user-id-provider";
-import { initInternalResourceMetasCacheFromJson } from "@meta/server/resources/init-internal-resource-metas-from-json";
-import { getAllUserWorkspaces } from "@fd-app-toolbox/server/infra/workspaces/workspace-db";
-import { getUserVisibleWorkspaces } from "@fd-app-toolbox/server/workspace/visible-workspaces";
-import { getResources } from "@meta/server/services/resource-provider";
-import { buildPreloadData } from "@fd-app-toolbox/server/controlles/preload/preload-controller";
-import { ClientRoot } from "@fd-app-toolbox/layout/client-root/ClientRoot";
-import { getSidebarResources } from "@fd-app-toolbox/server/layout/sidebar/sidebar-resources";
-import { withUserIdProps } from "@fd-toolbox/types/with-user-id";
-import { getODataFilterUuid } from "@fd-toolbox/odata/odata-builder-funcs";
-import { baseResourceProps } from "@fd-toolbox/base-resource/props/base-resource-props";
-import { oDataOrderByDirectionConsts } from "@fd-toolbox/enums/enums";
-import { resourceNames } from "@fd-toolbox/resources/resource-names";
-import { getSidebarResourceNames } from "@fd-app-toolbox/layout/sidebar/sidebar-resource-names-cache";
-export async function PrivateLayout({ children }) {
-    await initInternalResourceMetasCacheFromJson();
-    const sidebarResourceNames = getSidebarResourceNames();
-    const userId = await getUserId();
-    const notificationOdataConfig = getODataFilterUuid(withUserIdProps.userId, userId)
-        .orderBy(baseResourceProps.createdDate, oDataOrderByDirectionConsts.desc)
-        .build();
-    const userSettingsOdataConfig = getODataFilterUuid(withUserIdProps.userId, userId).build();
-    const userSettings = getResources(resourceNames.userSetting, userId, userSettingsOdataConfig);
-    const preloadData = buildPreloadData();
-    const sidebarResources = getSidebarResources(sidebarResourceNames, userId);
-    const userWorkspaces = getAllUserWorkspaces(userId);
-    const userVisibleWorkspaces = getUserVisibleWorkspaces();
-    const notifications = getResources(resourceNames.notification, userId, notificationOdataConfig);
-    return (<ClientRoot sidebarResourcesPromise={sidebarResources} preloadDataPromise={preloadData} userSettingsPromise={userSettings} userWorkspacesPromise={userWorkspaces} visibleWorkspacesPromise={userVisibleWorkspaces} notificationsPromise={notifications}>
-            {children}
-        </ClientRoot>);
-}

package/packages/level2/fd-app-toolbox/status-board/FdStatusBoard.jsx

@@ -1,49 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdStatusBoardStatus } from "@fd-app-toolbox/status-board/status-board-status/FdStatusBoardStatus";
-import { onDragEnd, onInit } from "@fd-app-toolbox/status-board/FdStatusBoard.funcs";
-import FdDragDropContext from "@fd-component-toolbox/drag-and-drop/FdDragDropContext";
-import FdDroppable from "@fd-component-toolbox/drag-and-drop/FdDroppable";
-import FdDraggable from "@fd-component-toolbox/drag-and-drop/FdDraggable";
-import { droppableIdConsts } from "@fd-app-toolbox/status-board/status-board-constants";
-import { useSetTitle } from "@meta/page/use-set-title";
-const pageTitle = "Status Board";
-/**
- * Renders a fully interactive status board with draggable columns.
- *
- * This component fetches its own data and handles the drag-and-drop logic internally,
- * making it a self-contained feature for visualizing and managing workflows.
- *
- * @example
- * ```tsx
- * // Simply render the component to display the full status board.
- * <FdStatusBoard />
- * ```
- */
-export function FdStatusBoard() {
-    const [statusBoardData, setStatusBoardData] = useState([]);
-    useSetTitle(pageTitle);
-    useAsyncEffect(async () => {
-        await onInit(setStatusBoardData);
-    }, []);
-    return (<FdDragDropContext onDragEnd={(result) => onDragEnd(result, { statusBoardData, setStatusBoardData })}>
-            <div className="m-7 flex flex-row">
-                {statusBoardData.length > 0 ? (<FdDroppable droppableId={droppableIdConsts.statusBoard}>
-                        <div className="flex flex-row">
-                            {statusBoardData.map((status) => (<FdDraggable key={status.id} draggableId={status.id}>
-                                    <div className="mr-4">
-                                        <FdStatusBoardStatus droppableId={status.id} name={status.name} statusBoardItemList={status.statusBoardItemList ?? []}/>
-                                    </div>
-                                </FdDraggable>))}
-                        </div>
-                    </FdDroppable>) : (<div className="flex size-full items-center justify-center">
-                        <div className="text-center">
-                            <div className="mx-auto size-16 animate-spin rounded-full border-4 border-dashed"></div>
-                            <h2 className="mt-4 text-zinc-900 dark:text-white">Loading...</h2>
-                            <p className="text-zinc-600 dark:text-zinc-400">We are pulling in your data</p>
-                        </div>
-                    </div>)}
-            </div>
-        </FdDragDropContext>);
-}

package/packages/level2/fd-app-toolbox/status-board/status-board-item/FdStatusBoardItem.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { FdImage } from "@fd-component-toolbox/image/FdImage";
-import { imgAvatarPath } from "@fd-app-toolbox/status-board/status-board-constants";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-export function FdStatusBoardItem({ item }) {
-    return (<div className="group flex w-72 max-w-md cursor-pointer flex-col gap-3 rounded-lg border border-foreground/10 bg-background p-4 shadow-sm transition-shadow duration-300 hover:shadow-md">
-            <div className="text-sm font-semibold text-foreground/70">{item.content}</div>
-            <div className="flex items-center justify-between text-xs text-muted">
-                <FdAvatar className="ml-auto size-7">
-                    <FdAvatarImage />
-                    <FdAvatarFallback>
-                        <FdImage className="rounded-full object-cover" src={imgAvatarPath} alt="logo" width={50} height={50}/>
-                    </FdAvatarFallback>
-                </FdAvatar>
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/status-board/status-board-status/FdStatusBoardStatus.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { FdStatusBoardItem } from "@fd-app-toolbox/status-board/status-board-item/FdStatusBoardItem";
-import FdDraggable from "@fd-component-toolbox/drag-and-drop/FdDraggable";
-import FdDroppable from "@fd-component-toolbox/drag-and-drop/FdDroppable";
-export function FdStatusBoardStatus({ name, droppableId, statusBoardItemList }) {
-    const renderDraggableItem = (item) => (<FdDraggable key={item.id} draggableId={item.id}>
-            <FdStatusBoardItem item={item}/>
-        </FdDraggable>);
-    return (<FdDroppable droppableId={droppableId}>
-            <div className="group relative h-[calc(100vh-7.5rem)] w-80 rounded-lg bg-muted transition-all duration-300">
-                <div className="relative z-10 flex items-center justify-between bg-muted p-4">
-                    <p className="flex items-center text-sm font-semibold text-foreground">
-                        <span className="mr-2 size-3 rounded-full bg-fd-accent"></span>
-                        {name}
-                    </p>
-                    <span className="rounded-full bg-foreground/10 px-2 py-1 text-xs font-semibold text-foreground">
-                        {statusBoardItemList.length}
-                    </span>
-                </div>
-                <div className="h-[calc(100vh-12.5rem)] space-y-1 overflow-y-auto bg-muted px-4 py-2">
-                    {statusBoardItemList.length > 0 ? (statusBoardItemList.map(renderDraggableItem)) : (<div className="flex h-full items-center justify-center">
-                            <p className="text-center text-foreground/50">No items available</p>
-                        </div>)}
-                </div>
-            </div>
-        </FdDroppable>);
-}

package/packages/level2/fd-app-toolbox/user-list/UserList.jsx

@@ -1,58 +0,0 @@
-"use client";
-import { useState, useCallback } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { loadData, getUserListHeaderText, deleteUser } from "@fd-app-toolbox/user-list/UserList.funcs";
-import { FdSwitch } from "@fd-component-toolbox/switch/FdSwitch";
-import { FdList } from "@fd-component-toolbox/list/FdList";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { YesOrNoDialog } from "@fd-component-toolbox/dialog/YesOrNoDialog";
-import { EditUserSheet } from "@fd-app-toolbox/edit-user-sheet/EditUserSheet";
-import { silentChangeUrl } from "@fd-toolbox/routing/routers";
-import { routes } from "@fd-toolbox/routing/routes";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-import { messages } from "@fd-toolbox-core/constants/messages-constants";
-const pageTitle = "User List";
-function UserList() {
-    const [users, setUsers] = useState([]);
-    const [showDisabledUsers, setShowDisabledUsers] = useState(false);
-    useSetTitle(pageTitle);
-    useAsyncEffect(async () => {
-        await loadData(setUsers, showDisabledUsers);
-    }, [showDisabledUsers]);
-    const handleDisabledUsersToggle = useCallback((value) => {
-        setShowDisabledUsers(value);
-    }, []);
-    const handleDeleteConfirmation = useCallback(async (isYes, userId) => {
-        if (isYes) {
-            await deleteUser(userId);
-            setUsers(users.filter((user) => user.id !== userId));
-        }
-    }, [users]);
-    return (<div className="p-6">
-            <FdSubHeading className="mb-4">{getUserListHeaderText()}</FdSubHeading>
-            <div className="mb-4 flex flex-row items-center gap-5">
-                <EditUserSheet onEditClick={() => silentChangeUrl(routes.editUser)}>
-                    <FdButton className="min-w-20">Add</FdButton>
-                </EditUserSheet>
-                <FdSwitch text="Show disabled users" onCheckedChange={handleDisabledUsersToggle} checked={showDisabledUsers} name={"showDisabledUsers"}/>
-            </div>
-            <FdList className="overflow-auto border-y px-0 py-2">
-                {users?.map((userData) => (<li key={userData.id} className="flex w-full items-center justify-between gap-2 hover:bg-accent">
-                        <div className="flex items-center gap-0.5">
-                            <EditUserSheet userData={userData} onEditClick={() => silentChangeUrl(`${routes.editUser}?${userData.id}`)}>
-                                <FdButton size="sm" variant="icon" className="px-1" tooltipText="Edit User" tooltipSide="right" tooltipClassName="ml-2">
-                                    <FdIcon className="text-fd-accent" name={iconNames.edit}/>
-                                </FdButton>
-                            </EditUserSheet>
-                            <YesOrNoDialog asTriggerChild title={messages.deleteConfirmation || ""} onResponse={(isYes) => handleDeleteConfirmation(isYes, userData.id)} trigger={<FdButton size="sm" variant="icon" className="px-1">
-                                        <FdIcon name={iconNames.trash}/>
-                                    </FdButton>}/>
-                            <div className="grow px-6">{`${userData.firstName} ${userData.lastName}`}</div>
-                        </div>
-                    </li>))}
-            </FdList>
-        </div>);
-}
-export default UserList;

package/packages/level2/fd-component-toolbox/animation/FdLabelAnimation.jsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { cva } from "class-variance-authority";
-/**
- * Using {@link https://cva.style/docs/getting-started/variants class-variance-authority}
- */
-export const labelVariants = cva("pointer-events-none absolute left-1 top-2 z-10 origin-[0] rounded-md bg-background px-1 text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {
-    variants: {
-        variant: {
-            bordered: "transition-all duration-150 ease-in-out file:text-sm peer-focus:-translate-y-4 peer-focus:scale-75",
-            float: "duration-300",
-        },
-    },
-    defaultVariants: {
-        variant: "float",
-    },
-});
-/**
- * @param {FdLabelAnimationProps} props {@link FdLabelAnimationProps}
- *
- * @example
- * ```tsx
-    function MyComponent() {
-        const [shouldLabelAnimate, setShouldLabelAnimate] = useState(false);
-        const [isInputHovered, setIsInputHovered] = useState(false);
-        const [isError, setIsError] = useState(false);
-        const [skipAnimationOnce, setSkipAnimationOnce] = useState(false);
-
-        return (
-            <FdLabelAnimation
-                label="name"
-                shouldLabelAnimate={shouldLabelAnimate}
-                isInputHovered={isInputHovered}
-                isError={isError}
-                skipAnimationOnce={skipAnimationOnce}
-                variant="bordered"
-            />
-        );
-    }
- * ```
- */
-function FdLabelAnimation({ label, shouldAnimate, isErrorStyle, skipAnimationOnce, variant, className, isParentHovered, }) {
-    const [animationClass, setAnimationClass] = useState("");
-    useEffect(() => {
-        setAnimationClass(shouldAnimate ? "animate-label-up" : "animate-label-down");
-    }, [shouldAnimate]);
-    useEffect(() => {
-        setAnimationClass("");
-    }, [skipAnimationOnce]);
-    return (<label key={Number(skipAnimationOnce)} htmlFor={label} className={cn(labelVariants({ variant }), variant === "float" && animationClass, shouldAnimate ? "-translate-y-5 scale-75 pl-[5px]" : "", isErrorStyle ? "text-destructive" : "text-muted-foreground", className)}>
-            <FdFadeOutText isHovered={isParentHovered}>{label}</FdFadeOutText>
-        </label>);
-}
-export default FdLabelAnimation;

package/packages/level2/fd-component-toolbox/avatar/FdAvatar.jsx

@@ -1,50 +0,0 @@
-"use client";
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * Root avatar component that serves as a container for the image and fallback
- *
- * Based on {@link https://ui.shadcn.com/docs/components/avatar Avatar}
- */
-function FdAvatar({ className, ref, ...props }) {
-    return (<AvatarPrimitive.Root ref={ref} className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)} {...props}/>);
-}
-FdAvatar.displayName = AvatarPrimitive.Root.displayName;
-/**
- * Image component for displaying the actual avatar picture
- *
- * Based on {@link https://ui.shadcn.com/docs/components/avatar Avatar.Image}
- *
- * @example
- * ```tsx
- *  <FdAvatar>
-        <FdAvatarImage src="https://github.com/shadcn.png" alt="User avatar" />
-        ...
-    </FdAvatar>
-    ```
- */
-function FdAvatarImage({ className, ref, src, alt, ...props }) {
-    return (<AvatarPrimitive.Image ref={ref} src={src} alt={alt} className={cn("aspect-square size-full", className)} {...props}/>);
-}
-FdAvatarImage.displayName = AvatarPrimitive.Image.displayName;
-/**
- * Fallback component shown when the avatar image fails to load
- *
- * Based on {@link https://ui.shadcn.com/docs/components/avatar Avatar.Fallback}
-  *
- * @example
- * ```jsx
- *  <FdAvatar>
-        ...
-        <FdAvatarFallback>
-            <Image src="/assets/default-avatar.png" alt="Default avatar" width={40} height={40}/>
-        </FdAvatarFallback>
-    </FdAvatar>
-    ```
- */
-function FdAvatarFallback({ className, ref, ...props }) {
-    return (<AvatarPrimitive.Fallback ref={ref} className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)} {...props}/>);
-}
-FdAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-export { FdAvatar, FdAvatarImage, FdAvatarFallback };

package/packages/level2/fd-component-toolbox/back-button/FdBackButton.jsx

@@ -1,21 +0,0 @@
-import React from "react";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-/**
- * Button component for navigation back
- *
- * @param FdBackButtonProps {@link FdBackButtonProps}
- *
- * @example
- *```tsx
-    <FdBackButton onClick={...} href="/students"/>;
- * ```
- */
-export function FdBackButton({ id, variant, size, className, href, onClick }) {
-    return (<FdLink id={id} href={href ?? "view?resource=Contact"}>
-            <FdButton variant={variant ?? "ghost"} size={size ?? "icon"} className={className ?? "size-5"} onClick={onClick} tooltipText="Go Back" tooltipSide="top" tooltipClassName="mb-1">
-                <FdIcon name={iconNames.arrowLeft} size={iconSizes.small}/>
-            </FdButton>
-        </FdLink>);
-}

package/packages/level2/fd-component-toolbox/badge/FdBadge.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * Interactive rounded badge for selections, tags and filters
- *
- * @param BadgeProps {@link BadgeProps}
- *
- * @example
- * ```tsx
- * <FdBadge onClick={...}>
- *     Label
- * </FdBadge>
- * ```
- */
-export function FdBadge({ children, onClick, className }) {
-    return (<span onClick={onClick} className={cn("inline-flex cursor-default select-none items-center rounded-full px-2 py-1 text-xs font-medium", className)}>
-            {children}
-        </span>);
-}

package/packages/level2/fd-component-toolbox/badge-toggle-list/FdBadgeToggleList.jsx

@@ -1,47 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdBadge } from "@fd-component-toolbox/badge/FdBadge";
-import { FdSeparator } from "@fd-component-toolbox/separator/FdSeparator";
-import { useCallback, useEffect, useState } from "react";
-import { getBadgeClasses, onToggleItem, onUpdateSelection, } from "@fd-component-toolbox/badge-toggle-list/FdBadgeToggleList.funcs";
-/**
- * Toggleable list of badges
- *
- * @param FdBadgeToggleListProps {@link FdBadgeToggleListProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
-    const [items, setItems] = useState(['Students', 'Teachers', 'Courses']);
-    const [selectedItems, setSelectedItems] = useState(['Students', 'Teachers']);
-
-    return (
-        <FdBadgeToggleList items={items} selectedItems={selectedItems} onSelectedItemsChange={setSelectedItems}/>
-    );
- }
- * ```
- */
-export function FdBadgeToggleList({ items, selectedItems: selectedItemsProp, onSelectedItemsChange: onSelectedItemsChangeProp, }) {
-    const [selectedItems, setSelectedItems] = useState(selectedItemsProp ?? []);
-    const [isSelectedAllItems, setIsSelectedAllItems] = useState(true);
-    const badgeCommonClasses = "cursor-pointer rounded-sm p-1 px-2 text-xs font-light transition-colors duration-200 hover:text-primary-foreground";
-    const badgeActiveClasses = "bg-primary/80 text-primary-foreground hover:border-foreground/80 hover:bg-primary/70";
-    const badgeInactiveClasses = "bg-muted hover:bg-primary/80";
-    const updateSelection = useCallback((value) => onUpdateSelection(value, items.length, setSelectedItems, setIsSelectedAllItems, onSelectedItemsChangeProp), [items.length, onSelectedItemsChangeProp, setSelectedItems]);
-    useEffect(() => {
-        updateSelection(selectedItemsProp ?? []);
-    }, [selectedItemsProp, updateSelection]);
-    const selectAllItems = useCallback(() => {
-        updateSelection(items);
-    }, [updateSelection, items]);
-    const toggleItem = useCallback((value) => onToggleItem(value, items, selectedItems, isSelectedAllItems, updateSelection), [items, isSelectedAllItems, selectedItems, updateSelection]);
-    const badgeClasses = useCallback((item) => getBadgeClasses(item, isSelectedAllItems, selectedItems, badgeActiveClasses, badgeInactiveClasses), [isSelectedAllItems, selectedItems, badgeActiveClasses, badgeInactiveClasses]);
-    return (<div className="flex flex-wrap items-start gap-2">
-            <FdBadge className={cn(badgeCommonClasses, isSelectedAllItems ? badgeActiveClasses : badgeInactiveClasses)} onClick={selectAllItems}>
-                All
-            </FdBadge>
-            <FdSeparator orientation="vertical" className="mx-2 h-7"/>
-            {items.map((item) => (<FdBadge key={item} onClick={() => toggleItem(item)} className={cn(badgeCommonClasses, badgeClasses(item))}>
-                    {item}
-                </FdBadge>))}
-        </div>);
-}

package/packages/level2/fd-component-toolbox/button/FdButton.jsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdTooltip, FdTooltipContent, FdTooltipProvider, FdTooltipTrigger, tooltipContentSides, tooltipAligns, tooltipAlignsStrings, tooltipContentSidesStrings, } from "@fd-component-toolbox/tooltip/FdTooltip";
-/**
- * Using {@link https://cva.style/docs/getting-started/variants class-variance-authority}
- */
-export const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
-            icon: "cursor-pointer hover:text-accent-foreground",
-            float: "rounded-none border-b border-border hover:border-fd-accent",
-            fullRounded: "rounded-full p-1.5 text-muted-foreground hover:bg-accent sm:p-2",
-        },
-        size: {
-            default: "h-9 px-4 py-2",
-            sm: "h-8 rounded-md px-3 text-xs",
-            lg: "h-10 rounded-md px-8",
-            icon: "size-9",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
-/**
- * Based on {@link https://ui.shadcn.com/docs/components/button Button}
- *
- * @param FdButtonProps {@link FdButtonProps}
- *
- * Based on {@link https://www.radix-ui.com/primitives/docs/utilities/slot Slot}
- */
-export const FdButton = ({ className, variant, size, asChild, tooltipText, tooltipSide, tooltipClassName, tooltipAlign, children, ref, ...props }) => {
-    const hasButtonAsChild = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === "button");
-    const Comp = asChild || hasButtonAsChild ? Slot : "button";
-    if (!tooltipText) {
-        return (<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
-                {children}
-            </Comp>);
-    }
-    else {
-        return (<FdTooltipProvider>
-                <FdTooltip delayDuration={100}>
-                    <FdTooltipTrigger asChild>
-                        <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
-                            {children}
-                        </Comp>
-                    </FdTooltipTrigger>
-                    <FdTooltipContent align={tooltipAlign ?? tooltipAlignsStrings[tooltipAligns.center]} className={tooltipClassName} side={tooltipSide ?? tooltipContentSidesStrings[tooltipContentSides.bottom]}>
-                        {tooltipText}
-                    </FdTooltipContent>
-                </FdTooltip>
-            </FdTooltipProvider>);
-    }
-};
-FdButton.displayName = "FdButton";