@fernir2/saas-kit-cli 0.1.4 → 0.1.5

package/packages/level2/fd-app-toolbox/login-form/LoginForm.jsx

@@ -1,165 +0,0 @@
-"use client";
-import { useCallback, useLayoutEffect, useState } from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { routes } from "@fd-toolbox/routing/routes";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { useForm } from "react-hook-form";
-import { FdLabel } from "@fd-component-toolbox/label/FdLabel";
-import { useFdRouter, useFdSearchParams } from "@meta/client/framework/hooks";
-import { FdForm, FdFormControl, FdFormField, FdFormItem, FdFormMessage, } from "@fd-component-toolbox/form/FdForm";
-import { loginDisplayProps } from "@meta/auth/login";
-import { FdCard, FdCardContent, FdCardHeader, FdCardTitle } from "@fd-component-toolbox/card/FdCard";
-import { codeParam } from "@fd-toolbox/constants/auth-constants";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { userRoutes } from "@fd-toolbox/constants/user-routes";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { getLoginButtonId, getOAuthProvider, handleOAuth, loadThemeLoginImage, onLoginSubmit, } from "@fd-app-toolbox/login-form/LoginForm.funcs";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { elements } from "@fd-toolbox/constants/elements";
-import { getLoginState } from "@fd-toolbox/auth/login-states";
-import { cn } from "@fd-toolbox/lib/utils";
-import { useAuth } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-const pageTitle = "Sign In";
-const OauthButtonLayoutStep = 3;
-/**
- * Sign-in form component with support for email/password and OAuth login.
- *
- * @param props - See {@link LoginFromProps}
- *
- * @example
- * ```typescript
- * <LoginForm
- *   oAuthLoginConfigs={[
- *     getGoogleOAuthConfig(),
- *     getMicrosoftOAuthConfig(),
- *     getFacebookOAuthConfig(),
- *   ]}
- *   hideSignUpLink={true}
- * />
- */
-export function LoginForm({ oAuthLoginConfigs, hideSignUpLink }) {
-    const [hidePassword, setHidePassword] = useState(true);
-    const [isAuthInit, setIsAuthInit] = useState(false);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [imgSrc, setImgSrc] = useState();
-    useSetTitle(pageTitle);
-    const context = useAuth();
-    const router = useFdRouter();
-    useLayoutEffect(() => {
-        loadThemeLoginImage(setImgSrc);
-    }, []);
-    const form = useForm({
-        defaultValues: {
-            email: "tim.w@example.com",
-            password: "Admin1!",
-        },
-        mode: "onChange",
-    });
-    const { handleSubmit, formState: { isValid }, control, } = form;
-    const searchParams = useFdSearchParams();
-    const getCodeParam = searchParams.get(codeParam);
-    const oAuthProvider = getOAuthProvider(searchParams, oAuthLoginConfigs);
-    const onSubmit = useCallback(async (data) => {
-        if (!isSubmitting)
-            await onLoginSubmit(data, setIsSubmitting, router, context.setLoginState);
-    }, [isSubmitting, router, context.setLoginState]);
-    useAsyncEffect(async () => {
-        if (!isAuthInit) {
-            setIsAuthInit(true);
-            setIsSubmitting(true);
-            if (getCodeParam && oAuthProvider && oAuthLoginConfigs) {
-                await handleOAuth(oAuthProvider, getCodeParam, oAuthLoginConfigs, router);
-                context.setLoginState?.(getLoginState());
-            }
-            setIsSubmitting(false);
-        }
-    }, [isAuthInit, getCodeParam, oAuthProvider, oAuthLoginConfigs, router]);
-    const togglePasswordVisibility = useCallback(() => {
-        setHidePassword((prev) => !prev);
-    }, []);
-    const customIconFunc = useCallback(() => hidePassword ? (<div onClick={togglePasswordVisibility}>
-                    <FdIcon name={iconNames.visibility}/>
-                </div>) : (<div onClick={togglePasswordVisibility}>
-                    <FdIcon name={iconNames.visibilityOff}/>
-                </div>), [hidePassword, togglePasswordVisibility]);
-    function isFullSizeOAuthButton(configs, index) {
-        return (!(index % OauthButtonLayoutStep) ||
-            (index % OauthButtonLayoutStep === 1 && index + 1 === configs.length));
-    }
-    return (<div className="relative h-screen w-full overflow-hidden">
-            {imgSrc && <FdFrameworkImage src={imgSrc} alt="Forest" fill className="object-cover" priority/>}
-            <div className="absolute inset-0 flex items-center justify-center">
-                <FdCard className="mx-auto grid w-80 gap-6 rounded-lg p-6 shadow-lg">
-                    <FdCardHeader className="grid gap-2 p-0 text-center">
-                        <FdCardTitle className="text-3xl font-bold">Sign In</FdCardTitle>
-                    </FdCardHeader>
-                    <FdCardContent className="p-0">
-                        {oAuthLoginConfigs && oAuthLoginConfigs.length > 0 && (<div className="grid grid-cols-2 gap-3">
-                                {oAuthLoginConfigs.map((oauthConfig, index) => (<FdButton key={`${oauthConfig.buttonText}_${oauthConfig.iconName}`} className={cn("flex w-full items-center gap-1", isFullSizeOAuthButton(oAuthLoginConfigs, index) && "col-span-2")} id={getLoginButtonId(oauthConfig.oAuthProvider)} variant={"outline"} onClick={oauthConfig.onLogin} disabled={isSubmitting}>
-                                        <FdIcon name={oauthConfig.iconName}/>
-                                        {oauthConfig.buttonText}
-                                    </FdButton>))}
-                            </div>)}
-                        {oAuthLoginConfigs && oAuthLoginConfigs.length > 0 && (<div className="flex items-center gap-2 pt-3">
-                                <hr className="w-full"/>
-                                <span className="text-nowrap text-xs text-muted-foreground">
-                                    OR CONTINUE WITH
-                                </span>
-                                <hr className="w-full"/>
-                            </div>)}
-                        <FdForm {...form}>
-                            <form onSubmit={handleSubmit(onSubmit)}>
-                                <FdFormField control={control} name={userRoutes.email} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full py-1">
-                                                <FdLabel>{loginDisplayProps.email}</FdLabel>
-                                                <FdFormControl>
-                                                    <FdInput {...field} inputId="loginInput" placeholder={loginDisplayProps.email} showClearIcon={!isSubmitting} disabled={isSubmitting}/>
-                                                </FdFormControl>
-                                                <FdFormMessage />
-                                            </div>
-                                        </FdFormItem>)}/>
-
-                                <FdFormField control={control} name={userRoutes.password} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full py-1">
-                                                <div className="flex items-center justify-between">
-                                                    <FdLabel>{loginDisplayProps.password}</FdLabel>
-                                                    <FdLink id={elements.login.forgotPasswordButton} className="inline-block text-xs text-muted-foreground" href={routes.forgotPassword}>
-                                                        Forgot password?
-                                                    </FdLink>
-                                                </div>
-
-                                                <div>
-                                                    <FdFormControl>
-                                                        <FdInput {...field} value={field.value ?? ""} inputId="passwordInput" placeholder={loginDisplayProps.password} type={hidePassword ? "password" : "text"} showClearIcon={!isSubmitting} disabled={isSubmitting}>
-                                                            <FdButton variant="icon" size="icon" type="button" tabIndex={-1} className="w-6" disabled={isSubmitting}>
-                                                                {customIconFunc()}
-                                                            </FdButton>
-                                                        </FdInput>
-                                                    </FdFormControl>
-                                                    <FdFormMessage />
-                                                </div>
-                                            </div>
-                                        </FdFormItem>)}/>
-                                <div className="flex w-full justify-center gap-1 px-1 pt-2">
-                                    {!hideSignUpLink && (<>
-                                            <p className="text-sm">Don&apos;t have an account?</p>
-                                            <FdLink className="inline-block text-sm text-muted-foreground" href={routes.register}>
-                                                Sign Up
-                                            </FdLink>
-                                        </>)}
-                                </div>
-                                <FdButton className="mr-4 mt-4 flex w-full items-center justify-center" id={elements.login.loginButton} disabled={!isValid || isSubmitting} type="submit">
-                                    {isSubmitting ? (<>
-                                            <div className="mr-2 size-4 animate-spin rounded-full border-2 border-inherit border-r-transparent"/>
-                                            Signing in...
-                                        </>) : ("Sign In")}
-                                </FdButton>
-                            </form>
-                        </FdForm>
-                    </FdCardContent>
-                </FdCard>
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/menu/notifications-menu/FdNotificationMenu.jsx

@@ -1,43 +0,0 @@
-import React, { use, useCallback, useState } from "react";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdSheet, FdSheetContent, FdSheetHeader, FdSheetTitle, FdSheetTrigger, FdSheetDescription, } from "@fd-component-toolbox/sheet/FdSheet";
-import { FdNotificationList } from "@fd-app-toolbox/menu/notifications-menu/notification-list/FdNotificationList";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { setNotificationState, initNotification, getNotificationMenuTriggerId, getNotificationMenuId, handleNotificationOpenChange, } from "@fd-app-toolbox/menu/notifications-menu/FdNotificationMenu.funcs";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { useAuth } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-export function FdNotificationMenu({ parentContextName, notificationsPromise }) {
-    const notificationProps = use(notificationsPromise);
-    const { loginState } = useAuth();
-    const [notifications, setNotifications] = useState([]);
-    const [hasUnreadNotification, setHasUnreadNotification] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const notificationMenuId = getNotificationMenuId(parentContextName);
-    const onNotification = useCallback((notification) => {
-        setNotificationState(notification, setNotifications, setHasUnreadNotification);
-    }, []);
-    useAsyncEffect(async () => {
-        await initNotification(loginState.loggedIn, loginState.userId, setNotifications, setHasUnreadNotification, onNotification, notificationProps);
-    }, [loginState.loggedIn, isOpen]);
-    const onOpenChange = useCallback(async (open) => {
-        await handleNotificationOpenChange(open, setIsOpen, notifications, setNotifications, setHasUnreadNotification);
-    }, [notifications]);
-    return (<FdSheet onOpenChange={onOpenChange} open={isOpen}>
-            <FdSheetTrigger asChild>
-                <FdButton variant="icon" className="relative flex size-8 justify-center rounded-md p-1 hover:bg-fd-tertiary-700" tooltipText="Notifications" tooltipClassName="mt-2" id={getNotificationMenuTriggerId(notificationMenuId)}>
-                    {hasUnreadNotification && (<FdIcon name={iconNames.dotFilled} size={iconSizes.large} className="absolute -right-1 -top-1" color="text-destructive"/>)}
-                    <FdIcon name={iconNames.bell} className="w-full text-fd-tertiary-50" color="color-white"/>
-                </FdButton>
-            </FdSheetTrigger>
-            <FdSheetContent className={cn("flex h-full w-3/4 flex-col border-none bg-background p-0 pb-4 md:w-1/2 xl:w-3/12")}>
-                <FdSheetHeader className="flex min-h-16 flex-row items-center justify-between bg-gradient-accent px-8">
-                    <FdSheetTitle className="text-xl font-bold text-fd-tertiary-50">
-                        Notifications
-                    </FdSheetTitle>
-                    <FdSheetDescription></FdSheetDescription>
-                </FdSheetHeader>
-                <FdNotificationList parentContextName={notificationMenuId} notifications={notifications}/>
-            </FdSheetContent>
-        </FdSheet>);
-}

package/packages/level2/fd-app-toolbox/menu/notifications-menu/notification-list/FdNotificationList.jsx

@@ -1,53 +0,0 @@
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import React from "react";
-import { checkNotificationGroupDateLabel, getDateLabelForNotificationGroup, getNotificationListDescriptionId, getNotificationListItemId, getNotificationListMessageId, getNotificationMenuListId, } from "@fd-app-toolbox/menu/notifications-menu/notification-list/FdNotificationList.funcs";
-import { cn } from "@fd-toolbox/lib/utils";
-import { formatUserFrendlyRelativeTime, parseToUtc } from "@fd-toolbox/dates/date-times";
-/**
- * Component that displays a list of notifications grouped by date with read/unread status
- *
- * @param FdNotificationListProps {@link FdNotificationListProps}
- *
- * @example
- * ```tsx
-    function MyComponent() {
-        const [notifications, setNotifications] = useState<Notification[]>([]);
-        
-        return <FdNotificationList notifications={notifications} />;
-    }
- * ```
- */
-export function FdNotificationList({ parentContextName, notifications }) {
-    const notificationMenuListId = getNotificationMenuListId(parentContextName);
-    return (<div id={notificationMenuListId} className="h-full">
-            {notifications.length ? (notifications.map((notification, index) => (<div id={getNotificationListItemId(notificationMenuListId, notification.id)} key={notification.id}>
-                        {checkNotificationGroupDateLabel(notifications, notification, index) && (<div className="w-full border-b bg-muted/100 p-2 px-4">
-                                <span className="text-xs text-muted-foreground">
-                                    {getDateLabelForNotificationGroup(parseToUtc(notification.createdDate))}
-                                </span>
-                            </div>)}
-                        <div className={cn("w-full border-b bg-background p-4 transition-all hover:bg-muted/50", notification.isRead && "opacity-70")}>
-                            <div className="flex flex-row items-baseline justify-between">
-                                <span id={getNotificationListMessageId(notificationMenuListId, notification.id)} className="font-semibold text-foreground">
-                                    {notification.message}
-                                </span>
-                                <span className={cn("ml-2 flex min-w-24 flex-row items-center justify-end gap-1 text-xs text-foreground", !notification.isRead && "font-bold")}>
-                                    {!notification.isRead && (<FdIcon name={iconNames.dotFilled} className="text-destructive"/>)}
-                                    {formatUserFrendlyRelativeTime(notification.createdDate)}
-                                </span>
-                            </div>
-                            <p id={getNotificationListDescriptionId(notificationMenuListId, notification.id)} className="text-sm text-muted-foreground">
-                                {notification.description}
-                            </p>
-                        </div>
-                    </div>))) : (<div className="flex h-full items-center justify-center pb-4">
-                    <div className="flex flex-col items-center px-16 text-center">
-                        <FdIcon name={iconNames.globe} className="mb-8 size-32"/>
-                        <h4 className="mb-4 text-xl font-bold">You don’t have any notifications</h4>
-                        <p className="m-4 text-muted-foreground">
-                            But as soon as something happens, you’ll find it right here.
-                        </p>
-                    </div>
-                </div>)}
-        </div>);
-}

package/packages/level2/fd-app-toolbox/menu/top-menu/FdTopMenu.jsx

@@ -1,28 +0,0 @@
-"use client";
-import React, { useMemo } from "react";
-import { FdTopMenuGroup } from "@fd-app-toolbox/menu/top-menu/top-menu-group/FdTopMenuGroup";
-/**
- * Navigation menu component that renders horizontal menu groups
- *
- * @param FdTopMenuProps {@link FdTopMenuProps}
- *
- * @example
- * ```tsx
-    <FdTopMenu groups={[
-            {
-                groupName: "Dashboard",
-                subgroupsOrMenuItems: [
-                    { text: "Overview", path: "/dashboard", type: 1 },
-                    { text: "Analytics", path: "/analytics", type: 1 },
-                ],
-            },
-        ]}
-    />;
- * ```
- */
-export function FdTopMenu({ groups }) {
-    const memoGroups = useMemo(() => groups.map((group) => <FdTopMenuGroup key={group.groupName} group={group}/>), [groups]);
-    return (<nav>
-            <ul className="flex w-52 flex-row justify-between gap-10">{memoGroups}</ul>
-        </nav>);
-}

package/packages/level2/fd-app-toolbox/menu/top-menu/top-menu-group/FdTopMenuGroup.jsx

@@ -1,35 +0,0 @@
-"use client";
-import { useState, useMemo } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdTopMenuItem } from "@fd-app-toolbox/menu/top-menu/top-menu-item/FdTopMenuItem";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-/**
- * Component that renders a group of menu items within the top navigation menu
- *
- * @param FdTopMenuGroupProps {@link FdTopMenuGroupProps}
- *
- * @example
- * ```tsx
-    <FdTopMenuGroup group={{
-            groupName: "Settings",
-            buttonIcon: "gear",
-            subgroupsOrMenuItems: [
-                { text: "Profile", path: "/profile", icon: "person", type: 1 },
-                { text: "Preferences", path: "/preferences", icon: "mixerHorizontal", type: 1 },
-            ],
-        }}
-    />;
- * ```
- */
-export function FdTopMenuGroup({ group }) {
-    const [open, setOpen] = useState(false);
-    const memoSubgroupsOrMenuItems = useMemo(() => group?.subgroupsOrMenuItems?.map((subItem) => (<FdTopMenuItem key={`${subItem.text}_${subItem.type}`} item={subItem}/>)), [group.subgroupsOrMenuItems]);
-    return (<li className="relative p-2" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-            <FdButton variant="ghost" className={"flex size-full flex-row items-start justify-center py-1 text-xs font-bold text-black"}>
-                {group.groupName}
-            </FdButton>
-            <div className={cn("absolute left-0 top-full w-52 divide-y rounded-md p-3 shadow", !open && "hidden")}>
-                <ul>{memoSubgroupsOrMenuItems}</ul>
-            </div>
-        </li>);
-}

package/packages/level2/fd-app-toolbox/menu/top-menu/top-menu-item/FdTopMenuItem.jsx

@@ -1,47 +0,0 @@
-"use client";
-import { useState, useMemo, useCallback } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon } from "@fd-component-toolbox/icon/FdIcon";
-import { useFdRouter } from "@meta/client/framework/hooks";
-import { navigateToItem } from "@fd-app-toolbox/menu/top-menu/top-menu-item/FdTopMenuItem.funcs";
-/**
- * Menu item component that supports navigation and nested submenus with hover interaction
- *
- * @param FdTopMenuItemProps {@link FdTopMenuItemProps}
- *
- * @example
- * ```tsx
-    <FdTopMenuItem item={{
-            text: "Settings",
-            icon: "gear",
-            type: 0,
-            nextSubgroupsOrMenuItems: [{ text: "Profile", path: "/profile", type: 1 }],
-        }}
-    />;
- * ```
- */
-export function FdTopMenuItem({ item }) {
-    const [open, setOpen] = useState(false);
-    const router = useFdRouter();
-    const navigateTo = useCallback(() => {
-        navigateToItem(item.type, router, item.path, item.routerLinkQueryParam);
-    }, [item.path, item.routerLinkQueryParam, item.type, router]);
-    const memoNextSubgroupsOrMenuItems = useMemo(() => item?.nextSubgroupsOrMenuItems?.map((subItem) => (<FdTopMenuItem key={`${subItem.text}_${subItem.type}`} item={subItem}/>)), [item.nextSubgroupsOrMenuItems]);
-    if (item.nextSubgroupsOrMenuItems && item.nextSubgroupsOrMenuItems.length > 0) {
-        return (<li className="relative" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-                <FdButton className={"flex size-full flex-row items-center justify-between text-nowrap p-2 text-xs font-normal text-black"}>
-                    {item.text}
-                    <FdIcon name="chevronRight"/>
-                </FdButton>
-                <div className={cn("absolute left-full top-0 w-52 divide-y rounded-md p-3 shadow", !open && "hidden")}>
-                    <ul>{memoNextSubgroupsOrMenuItems}</ul>
-                </div>
-            </li>);
-    }
-    return (<li>
-            <FdButton onClick={navigateTo} className={"flex size-full flex-row items-center justify-start text-nowrap p-2 text-xs font-normal text-black"}>
-                {item.text}
-            </FdButton>
-        </li>);
-}

package/packages/level2/fd-app-toolbox/menu/user-dropdown-menu/FdUserDropdownMenu.jsx

@@ -1,122 +0,0 @@
-"use client";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { FdSelect, FdSelectContent, FdSelectGroup, FdSelectItem, FdSelectTrigger, } from "@fd-component-toolbox/select/FdSelect";
-import { themes } from "@fd-app-toolbox/menu/themes";
-import { FdUserDropdownMenuItem } from "@fd-app-toolbox/menu/user-dropdown-menu/user-dropdown-menu-item/FdUserDropdownMenuItem";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { ChevronDown } from "lucide-react";
-import { getLoginState } from "@fd-toolbox/auth/login-states";
-import { useTheme } from "@fd-app-toolbox/providers/ThemeProvider/ThemeProvider";
-import { useEffect, useState, useCallback, useMemo, Suspense } from "react";
-import { imageNotFoundUrl } from "@fd-toolbox/constants/public-files";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { isPackageMode } from "@fd-toolbox/lib/environments";
-import { useSaveComplete } from "@meta/edit-resource/save-complete-context";
-import { FdWorkspacePicker } from "@fd-app-toolbox/menu/workspace-picker/FdWorkspacePicker";
-import { getUserDropDownMenuTriggerId } from "@fd-app-toolbox/menu/user-dropdown-menu/user-dropdown-menu-item/FdUserDropdownMenu.funcs";
-import { elements } from "@fd-toolbox/constants/elements";
-import { FdVisibleWorkspacePicker } from "@fd-app-toolbox/menu/visible-workspace-picker/FdVisibleWorkspacePicker";
-/**
- * User dropdown menu component with avatar, user info, theme switching, and custom menu items
- *
- * @param FdDropdownMenuProps {@link FdDropdownMenuProps}
- *
- * @example
- * ```tsx
-    <FdUserDropdownMenu items={[
-            { label: "Setting", icon: "gear", path: "/setting", type: 1  },
-            { label: "Logout", icon: "logOut", type: 0, onClick: ... }
-        ]}
-    />
- * ```
- */
-export function FdUserDropdownMenu({ id, items, parentContextName, userWorkspacesPromise, visibleWorkspacesPromise, }) {
-    const [open, setOpen] = useState(false);
-    const { theme, switchTheme } = useTheme();
-    const loginState = getLoginState();
-    const avatarImageUrl = useMemo(() => (loginState?.loggedIn ? loginState.imageUrl || imageNotFoundUrl : imageNotFoundUrl), [loginState?.loggedIn, loginState?.imageUrl]);
-    useSaveComplete();
-    const closeMenu = useCallback(() => setOpen(false), []);
-    useEffect(() => {
-        document.documentElement.style.colorScheme = theme;
-    }, [theme]);
-    const handleToggleTheme = useCallback((newTheme) => {
-        switchTheme(newTheme);
-    }, [switchTheme]);
-    const getThemeIcon = useCallback(() => {
-        switch (theme) {
-            case themes.light:
-                return iconNames.sun;
-            case themes.dark:
-                return iconNames.moon;
-            default:
-                return iconNames.desktop;
-        }
-    }, [theme]);
-    const setThemeLabel = useCallback(() => {
-        switch (theme) {
-            case themes.light:
-                return themes.lightMode;
-            case themes.dark:
-                return themes.darkMode;
-            default:
-                return themes.systemMode;
-        }
-    }, [theme]);
-    return (<DropdownMenu.Root open={open} onOpenChange={setOpen}>
-            <DropdownMenu.Trigger id={elements.userSettings.userDropdownButton}>
-                <div className="py-1.5 pl-2" id={id}>
-                    <div className="flex flex-row items-center rounded-md px-2 py-1 hover:bg-fd-tertiary-700">
-                        <FdAvatar className="mr-2.5 size-5">
-                            <FdAvatarImage />
-                            <FdAvatarFallback>
-                                <FdFrameworkImage className="bg-background object-fill" src={avatarImageUrl} alt="logo" width={40} height={40}/>
-                            </FdAvatarFallback>
-                        </FdAvatar>
-                        <FdSubHeading className="mr-2 whitespace-nowrap p-0 text-center text-sm text-fd-tertiary-50">
-                            {loginState.loggedIn ? loginState.displayName : "Login"}
-                        </FdSubHeading>
-                        <ChevronDown className="size-5 justify-end text-fd-tertiary-50"/>
-                    </div>
-                </div>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal>
-                <DropdownMenu.Content className="z-50 mr-4 min-w-32 rounded-md border bg-background shadow outline-none focus:ring-primary">
-                    {!isPackageMode() && (<>
-                            <div className="my-1 flex items-center pt-1 hover:bg-muted/50">
-                                <FdSelect value={theme} onValueChange={handleToggleTheme}>
-                                    <FdSelectTrigger className="border-0 text-sm font-medium shadow-none">
-                                        <div className="mr-2 flex items-center gap-x-2">
-                                            <FdIcon name={getThemeIcon()} className="size-3"/>
-                                            <p>{setThemeLabel()}</p>
-                                        </div>
-                                    </FdSelectTrigger>
-                                    <FdSelectContent>
-                                        <FdSelectGroup>
-                                            <FdSelectItem value={themes.light}>
-                                                {themes.lightMode}
-                                            </FdSelectItem>
-                                            <FdSelectItem value={themes.dark}>{themes.darkMode}</FdSelectItem>
-                                            <FdSelectItem value={themes.system}>
-                                                {themes.systemMode}
-                                            </FdSelectItem>
-                                        </FdSelectGroup>
-                                    </FdSelectContent>
-                                </FdSelect>
-                            </div>
-                            <div className="py-1">
-                                <Suspense>
-                                    <FdWorkspacePicker parentContextName={getUserDropDownMenuTriggerId(parentContextName)} userWorkspacesPromise={userWorkspacesPromise}/>
-                                </Suspense>
-                            </div>
-                            <Suspense>
-                                <FdVisibleWorkspacePicker visibleWorkspacesPromise={visibleWorkspacesPromise}/>
-                            </Suspense>
-                        </>)}
-                    {items.map((item) => (<FdUserDropdownMenuItem id={item.id} key={`${item.text}_${item.type}`} item={item} className={"z-50 m-1 rounded-md hover:bg-muted/50"} closeMenu={closeMenu}/>))}
-                </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-        </DropdownMenu.Root>);
-}

package/packages/level2/fd-app-toolbox/menu/user-dropdown-menu/user-dropdown-menu-item/FdUserDropdownMenuItem.jsx

@@ -1,56 +0,0 @@
-"use client";
-import React, { useCallback } from "react";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { isText, isRedirectUrl, getUserDropdownMenuItemId, onUserDropdownMenuItemClick, } from "@fd-app-toolbox/menu/user-dropdown-menu/user-dropdown-menu-item/FdUserDropdownMenuItem.funcs";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdIcon } from "@fd-component-toolbox/icon/FdIcon";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { addQueryParamsToPath } from "@fd-toolbox/routing/paths";
-/**
- * Dropdown menu item component that supports nested submenus, links and callbacks
- *
- * @param FdUserDropdownMenuItemProps {@link FdUserDropdownMenuItemProps}
- * Based on {@link https://ui.shadcn.com/docs/components/dropdown-menu Dropdown}
- *
- * @example
- * ```tsx
-    ...
-    <DropdownMenu.Content>
-        <FdUserDropdownMenuItem
-            item={{ label: "Logout", icon: "logOut", onClick: ...}}
-            closeMenu={...}
-        />
-    </DropdownMenu.Content>
-    ...
- * ```
- */
-export function FdUserDropdownMenuItem({ id, item, className, closeMenu }) {
-    const onItemClickCallback = useCallback(() => {
-        onUserDropdownMenuItemClick(closeMenu, item.callback);
-    }, [item, closeMenu]);
-    if (item.nextSubgroupsOrMenuItems && item.nextSubgroupsOrMenuItems.length > 0)
-        return (<DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger className={cn("outline-none", className)} id={getUserDropdownMenuItemId(item.text)}>
-                    <div className="inline-flex w-full items-center gap-x-2 px-3 py-2 text-sm font-medium hover:cursor-pointer">
-                        {item.icon && <FdIcon name={item.icon} className="size-3"/>}
-                        {item.text}
-
-                        <FdIcon name="caretSort" className="ml-auto text-foreground opacity-50"/>
-                    </div>
-                </DropdownMenu.SubTrigger>
-                <DropdownMenu.Portal>
-                    <DropdownMenu.SubContent className="z-50 min-w-52 rounded-md bg-background shadow">
-                        {item.nextSubgroupsOrMenuItems.map((subItem) => (<FdUserDropdownMenuItem key={`${subItem.text}_${subItem.type}`} item={subItem}/>))}
-                    </DropdownMenu.SubContent>
-                </DropdownMenu.Portal>
-            </DropdownMenu.Sub>);
-    return (<DropdownMenu.Item className={cn("outline-none", className)}>
-            <div className="p-2 text-sm font-medium" onClick={onItemClickCallback} id={getUserDropdownMenuItemId(item.id)}>
-                {isRedirectUrl(item) && item.path && (<FdLink id={id} className="flex items-center gap-x-2" href={addQueryParamsToPath(item.path, item.routerLinkQueryParam)}>
-                        {item.icon && <FdIcon name={item.icon} className="size-3"/>}
-                        {item.text}
-                    </FdLink>)}
-                {isText(item) && item.text}
-            </div>
-        </DropdownMenu.Item>);
-}

package/packages/level2/fd-app-toolbox/menu/visible-workspace-picker/FdVisibleWorkspacePicker.jsx

@@ -1,36 +0,0 @@
-"use client";
-import React, { use, useCallback, useState } from "react";
-import { FdMultiselect, FdMultiselectContent, FdMultiselectInput, FdMultiselectItem, FdMultiselectList, FdMultiselectTrigger, } from "@fd-component-toolbox/multiselect/FdMultiselect";
-import { initVisibleWorkspacePicker, onSelectedVisibleWorkspaceChange, } from "@fd-app-toolbox/menu/visible-workspace-picker/FdVisibleWorkspacePicker.funcs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { isTemporaryDisabled } from "@fd-toolbox/functions/condition-check-functions";
-/**
- * Component that allows user to select workspaces visible to them
- *
- * @param props - See {@link FdVisibleWorkspacePickerProps}
- */
-export function FdVisibleWorkspacePicker({ visibleWorkspacesPromise }) {
-    const userVisibleWorkspaces = use(visibleWorkspacesPromise);
-    const [visibleWorkspaces, setVisibleWorkspaces] = useState([]);
-    const [workspaces, setWorkspaces] = useState();
-    useAsyncEffect(async () => {
-        await initVisibleWorkspacePicker(setVisibleWorkspaces, setWorkspaces, userVisibleWorkspaces);
-    }, []);
-    const onSelectedWorkspace = useCallback((value) => {
-        onSelectedVisibleWorkspaceChange(value, setVisibleWorkspaces);
-    }, []);
-    return workspaces && workspaces.size > 0 ? (<div>
-            <FdMultiselect values={visibleWorkspaces} onValuesChange={onSelectedWorkspace} disabled={false} displayValues={workspaces} variant="float" withSelectAll>
-                {!isTemporaryDisabled() && (<FdMultiselectTrigger className="border-0 pl-1 pr-3 text-sm font-medium shadow-none">
-                        <FdMultiselectInput placeholder="Visible Workspaces" className="mt-0 cursor-pointer"/>
-                    </FdMultiselectTrigger>)}
-                <FdMultiselectContent className="absolute min-w-60">
-                    <FdMultiselectList className="top-9 z-50">
-                        {Array.from(workspaces).map(([key, value]) => (<FdMultiselectItem className="min-h-6 whitespace-nowrap" key={key} value={key}>
-                                {value}
-                            </FdMultiselectItem>))}
-                    </FdMultiselectList>
-                </FdMultiselectContent>
-            </FdMultiselect>
-        </div>) : null;
-}

package/packages/level2/fd-app-toolbox/menu/workspace-picker/FdWorkspacePicker.jsx

@@ -1,47 +0,0 @@
-"use client";
-import { useState, useCallback, use } from "react";
-import { getWorkspacePickerSelectItemId, getWorkspacePickerSelectTriggerId, initWorkspacePicker, onSelectedWorkspaceChange, } from "@fd-app-toolbox/menu/workspace-picker/FdWorkspacePicker.funcs";
-import { FdSelect, FdSelectContent, FdSelectGroup, FdSelectItem, FdSelectTrigger, FdSelectValue, } from "@fd-component-toolbox/select/FdSelect";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-/**
- * A workspace selection dropdown component.
- * This component displays the current workspace and allows users to switch between
- * available child workspaces and the home workspace.
- *
- * @see {@link FdWorkspacePickerProps} for component props
- */
-export function FdWorkspacePicker({ parentContextName, userWorkspacesPromise }) {
-    const userWorkspaces = use(userWorkspacesPromise);
-    const [childWorkspaces, setChildWorkspaces] = useState([]);
-    const [homeWorkspace, setHomeWorkspace] = useState();
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedWorkspace, setSelectedWorkspace] = useState("");
-    const onSelectedWorkspace = useCallback((value) => {
-        onSelectedWorkspaceChange(value, setSelectedWorkspace);
-    }, []);
-    useAsyncEffect(async () => {
-        await initWorkspacePicker(setChildWorkspaces, setHomeWorkspace, setSelectedWorkspace, userWorkspaces);
-    }, []);
-    if (childWorkspaces.length === 0) {
-        return null;
-    }
-    return (<FdSelect value={selectedWorkspace} onValueChange={onSelectedWorkspace} open={isOpen} onOpenChange={setIsOpen}>
-            <FdSelectTrigger id={getWorkspacePickerSelectTriggerId(parentContextName)} className="border-0 text-sm font-medium shadow-none">
-                <div className="mr-2 flex items-center gap-x-2">
-                    <FdIcon name={iconNames.desktop} className="size-3"/>
-                    <FdSelectValue />
-                </div>
-            </FdSelectTrigger>
-            <FdSelectContent>
-                <FdSelectGroup>
-                    {homeWorkspace && (<FdSelectItem value={homeWorkspace.id} id={getWorkspacePickerSelectItemId(parentContextName, homeWorkspace.id)}>
-                            {homeWorkspace.name}
-                        </FdSelectItem>)}
-                    {childWorkspaces.map((workspace) => (<FdSelectItem value={workspace.id} key={workspace.id} id={getWorkspacePickerSelectItemId(parentContextName, workspace.id)}>
-                            {workspace.name}
-                        </FdSelectItem>))}
-                </FdSelectGroup>
-            </FdSelectContent>
-        </FdSelect>);
-}