@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/fd-app-toolbox/providers/ThemeProvider/ThemeProvider.jsx

@@ -1,27 +0,0 @@
-import React, { createContext, useEffect, useState, useCallback, useMemo } from "react";
-import { themes } from "@fd-app-toolbox/menu/themes";
-import { onThemeSwitch, saveTheme } from "@fd-app-toolbox/providers/ThemeProvider/theme";
-import { createError } from "@fd-toolbox/errors/errors";
-import { getLocalStorage } from "@fd-toolbox/local-storage/local-storage";
-import { metaErrorMessages } from "@meta/constants/meta-error-messages-constants";
-const ThemeContext = createContext(undefined);
-export function ThemeProvider({ children }) {
-    const storedTheme = getLocalStorage(themes.theme);
-    const [theme, setTheme] = useState(storedTheme ?? themes.light);
-    const [appliedTheme, setAppliedTheme] = useState("");
-    const switchTheme = useCallback((newTheme) => {
-        saveTheme(newTheme, setTheme);
-    }, []);
-    const contextValue = useMemo(() => ({ theme, switchTheme, appliedTheme }), [theme, switchTheme, appliedTheme]);
-    useEffect(() => {
-        onThemeSwitch(theme, setAppliedTheme);
-    }, [theme]);
-    return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
-}
-export const useTheme = () => {
-    const context = React.useContext(ThemeContext);
-    if (context === undefined) {
-        throw createError(metaErrorMessages.themeProviderError);
-    }
-    return context;
-};

package/packages/level2/fd-app-toolbox/providers/auth-provider/AuthProvider.jsx

@@ -1,38 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { publicImages } from "@fd-toolbox/constants/public-files";
-import { emptyGuid } from "@fd-toolbox/constants/constants";
-import { extensions } from "@fd-toolbox/constants/extensions";
-import { createError } from "@fd-toolbox/errors/errors";
-import { getLoginState } from "@fd-toolbox/auth/login-states";
-import { metaErrorMessages } from "@meta/constants/meta-error-messages-constants";
-const emptyLoginState = {
-    loggedIn: false,
-    displayName: "",
-    userId: "",
-    email: "",
-    imageUrl: `/${publicImages.user}/${emptyGuid}.${extensions.webp}`,
-};
-export const AuthContext = createContext({
-    loginState: emptyLoginState,
-});
-export function AuthProvider({ children }) {
-    const [loginState, setLoginState] = useState(emptyLoginState);
-    const onChangeLoginState = useCallback((newLoginState) => {
-        setLoginState(newLoginState);
-    }, []);
-    useEffect(() => {
-        setLoginState(getLoginState());
-    }, []);
-    const contextValue = useMemo(() => ({
-        loginState: loginState,
-        setLoginState: onChangeLoginState,
-    }), [loginState, onChangeLoginState]);
-    return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
-}
-export function useAuth() {
-    const context = useContext(AuthContext);
-    if (!context) {
-        throw createError(metaErrorMessages.authProviderUsedOutside);
-    }
-    return context;
-}

package/packages/level2/fd-app-toolbox/providers/sidebar-provider/FdSidebarContext.jsx

@@ -1,17 +0,0 @@
-import { createContext, useContext, useMemo, useState } from "react";
-import { sidebarStatuses } from "@fd-app-toolbox/layout/sidebar/FdSidebar.funcs";
-const FdSidebarContext = createContext(undefined);
-export function FdSidebarProvider({ children }) {
-    const [sidebarState, setSidebarState] = useState(sidebarStatuses.minified);
-    const sidebarContextValue = useMemo(() => {
-        return {
-            sidebarState,
-            setSidebarState,
-            isSidebarOpen: sidebarState === sidebarStatuses.fixedOpen,
-        };
-    }, [sidebarState]);
-    return <FdSidebarContext.Provider value={sidebarContextValue}>{children}</FdSidebarContext.Provider>;
-}
-export function useSidebarContext() {
-    return useContext(FdSidebarContext);
-}

package/packages/level2/fd-app-toolbox/register-form/RegisterForm.jsx

@@ -1,119 +0,0 @@
-"use client";
-import { use, useCallback, useEffect, useState } from "react";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { useForm } from "react-hook-form";
-import { onRegisterSubmit } from "@fd-app-toolbox/register-form/RegisterForm.funcs";
-import { FdLabel } from "@fd-component-toolbox/label/FdLabel";
-import { useFdRouter } from "@meta/client/framework/hooks";
-import { FdForm, FdFormControl, FdFormField, FdFormItem, FdFormMessage, } from "@fd-component-toolbox/form/FdForm";
-import { registerDisplayProps } from "@fd-toolbox/auth/register";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { FdCard, FdCardContent, FdCardHeader, FdCardTitle } from "@fd-component-toolbox/card/FdCard";
-import { getThemeLoginImage } from "@fd-app-toolbox/providers/ThemeProvider/theme";
-import { userRoutes } from "@fd-toolbox/constants/user-routes";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { routes } from "@fd-toolbox/routing/routes";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { notifyError } from "@fd-toolbox/notifications";
-import { userFriendlyWorkspaceInviteMessages } from "@fd-app-toolbox/constants/user-friendly-workspace-invite-messages";
-const pageTitle = "Sign Up";
-/**
- * Sign-up form for new users with validation and redirect on success.
- *
- * @example
- * <RegisterForm userInviteValidationResultPromise={userInviteValidationResultPromise} />
- */
-export default function RegisterForm({ userInviteValidationResultPromise, userWorkspaceInviteId, }) {
-    const userInviteValidationResult = use(userInviteValidationResultPromise);
-    const [hidePassword, setHidePassword] = useState(true);
-    const [errorMessage, setErrorMessage] = useState(undefined);
-    useSetTitle(pageTitle);
-    useEffect(() => {
-        if (userInviteValidationResult && !userInviteValidationResult.isValid) {
-            if (userInviteValidationResult.userFriendlyErrorMessage) {
-                notifyError(userInviteValidationResult.userFriendlyErrorMessage);
-            }
-            else {
-                notifyError(userFriendlyWorkspaceInviteMessages.notValidInviteCode);
-            }
-        }
-    }, [userInviteValidationResult]);
-    const imgSrc = getThemeLoginImage();
-    const form = useForm({
-        defaultValues: {
-            email: "tim.w@example.com",
-            password: "Admin1!",
-        },
-        mode: "onChange",
-    });
-    const { handleSubmit, formState: { isValid }, control, } = form;
-    const router = useFdRouter();
-    const onSubmit = useCallback(async (data) => {
-        onRegisterSubmit(data, router, setErrorMessage, userWorkspaceInviteId);
-    }, [router, userWorkspaceInviteId]);
-    const togglePasswordVisibility = useCallback(() => {
-        setHidePassword((prev) => !prev);
-    }, []);
-    const customIconFunc = useCallback(() => hidePassword ? (<FdIcon name={iconNames.visibility} onClick={togglePasswordVisibility}/>) : (<FdIcon name={iconNames.visibilityOff} onClick={togglePasswordVisibility}/>), [hidePassword, togglePasswordVisibility]);
-    return (<div className="relative h-screen w-full overflow-hidden">
-            <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 Up</FdCardTitle>
-                    </FdCardHeader>
-                    <FdCardContent className="p-0">
-                        <FdForm {...form}>
-                            <form onSubmit={handleSubmit(onSubmit)}>
-                                <FdFormField control={control} name={userRoutes.email} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full py-1">
-                                                <FdLabel>{registerDisplayProps.email}</FdLabel>
-                                                <FdFormControl>
-                                                    <FdInput {...field} inputId="registerInput" placeholder={registerDisplayProps.email} showClearIcon={true}>
-                                                        <FdButton variant="icon" size="icon" type="button" tabIndex={-1} className="w-6">
-                                                            {customIconFunc()}
-                                                        </FdButton>
-                                                    </FdInput>
-                                                </FdFormControl>
-                                                <FdFormMessage />
-                                            </div>
-                                        </FdFormItem>)}/>
-
-                                <FdFormField control={control} name={userRoutes.password} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full py-1">
-                                                <FdLabel> {registerDisplayProps.password}</FdLabel>
-                                                <div className="">
-                                                    <FdFormControl>
-                                                        <FdInput {...field} inputId="passwordInput" placeholder={registerDisplayProps.password} type={hidePassword ? "password" : "text"} showClearIcon={true}>
-                                                            <FdButton variant="icon" size="icon" type="button" tabIndex={-1} className="w-6">
-                                                                {customIconFunc()}
-                                                            </FdButton>
-                                                        </FdInput>
-                                                    </FdFormControl>
-                                                    <FdFormMessage />
-                                                </div>
-                                            </div>
-                                        </FdFormItem>)}/>
-
-                                <div className="flex w-full justify-center gap-1 px-1 pt-2">
-                                    <p className="text-sm">Already have an account?</p>
-                                    <FdLink className="inline-block text-sm text-muted-foreground" href={routes.login}>
-                                        Sign In
-                                    </FdLink>
-                                </div>
-
-                                <FdButton className="mr-4 mt-4 block w-full" id="registerButton" disabled={!isValid} type="submit">
-                                    Sign Up
-                                </FdButton>
-                                {errorMessage && (<div className="mt-4">
-                                        <p className="text-destructive">{errorMessage}</p>
-                                    </div>)}
-                            </form>
-                        </FdForm>
-                    </FdCardContent>
-                </FdCard>
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/report/FdChart.jsx

@@ -1,120 +0,0 @@
-import React, { Fragment, useMemo } from "react";
-import { FdChartContainer, FdChartTooltip, FdChartTooltipContent } from "@fd-component-toolbox/chart/FdChart";
-import { buildContainerConfig, chartAxis, chartKinds, getChartTypeConfig, getRadiusValue, } from "@fd-app-toolbox/report/FdChart.funcs";
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, Radar, RadarChart, RadialBar, RadialBarChart, XAxis, YAxis, } from "recharts";
-import { charts } from "@fd-app-toolbox/report/charts";
-function FdChart({ series: chartSeries, data, chartType }) {
-    const config = useMemo(() => getChartTypeConfig(chartType), [chartType]);
-    const containerConfig = useMemo(() => buildContainerConfig(chartSeries), [chartSeries]);
-    return (<FdChartContainer config={containerConfig} className="size-full">
-            {getTypedChart({
-            data,
-            config,
-            children: (<>
-                        <FdChartTooltip cursor={false} content={<FdChartTooltipContent />}/>
-
-                        {getChartGrid({ axis: config.axis })}
-
-                        {chartSeries.map((series, i) => {
-                    return (<Fragment key={series.name}>
-                                    {getChartAxis({
-                            config,
-                            series,
-                        })}
-                                    {getChartElement({
-                            data,
-                            config,
-                            series,
-                            isFirst: i === 0,
-                            isLast: i === chartSeries.length - 1,
-                        })}
-                                </Fragment>);
-                })}
-                    </>),
-        })}
-        </FdChartContainer>);
-}
-export default FdChart;
-function getTypedChart({ data, config, children }) {
-    switch (config.kind) {
-        case chartKinds.area:
-            return (<AreaChart accessibilityLayer={true} data={data} stackOffset={config.expanded && "expand"}>
-                    {children}
-                </AreaChart>);
-        case chartKinds.bar:
-            return (<BarChart accessibilityLayer data={!config.mixed
-                    ? data
-                    : data.map((d, i) => ({
-                        ...d,
-                        fill: `hsl(var(--chart-${(i % 5) + 1}))`,
-                    }))}>
-                    {children}
-                </BarChart>);
-        case chartKinds.line:
-            return (<LineChart accessibilityLayer data={data}>
-                    {children}
-                </LineChart>);
-        case chartKinds.pie:
-            return <PieChart>{children}</PieChart>;
-        case chartKinds.radar:
-            return <RadarChart data={data}>{children}</RadarChart>;
-        case chartKinds.radial:
-            return (<RadialBarChart data={data} endAngle={config.stacked && 180} innerRadius={config.innerRadius} outerRadius={110}>
-                    {children}
-                </RadialBarChart>);
-        default:
-            throw new Error(charts.unsupportedKindError.replace("{0}", config.kind.toString()));
-    }
-}
-function getChartGrid({ axis }) {
-    if (axis === chartAxis.mainChartAxis)
-        return <CartesianGrid vertical={false}/>;
-    if (axis === chartAxis.polarAngleAxis)
-        return <PolarGrid />;
-    return null;
-}
-function getChartAxis({ config, series }) {
-    if (config.axis === chartAxis.mainChartAxis)
-        return (<>
-                <XAxis dataKey={series.axisXPropertyName} type={config.mixed && charts.category} tickLine={false} tickMargin={10} axisLine={false} label={{ value: series.axisXLabel, position: "bottom", offset: 5 }}/>
-                <YAxis tickLine={false} tickMargin={10} axisLine={false} label={{ value: series.axisYLabel, angle: -90, position: "left", offset: 15 }}/>
-            </>);
-    if (config.axis === chartAxis.polarAngleAxis)
-        return <PolarAngleAxis dataKey={series.axisXPropertyName}/>;
-    return null;
-}
-function getChartElement({ data, config, series, isFirst, isLast }) {
-    if (!series.axisYPropertyName)
-        return null;
-    const shared = {
-        dataKey: series.axisYPropertyName,
-        name: series.name,
-        fill: series.axisYColor,
-        stackId: config.stacked && charts.stackId,
-        innerRadius: config.innerRadius,
-    };
-    switch (config.kind) {
-        case chartKinds.area:
-            return <Area {...shared} type={charts.natural} fillOpacity={0.4} stroke={series.axisYColor}/>;
-        case chartKinds.bar:
-            return <Bar {...shared} radius={getRadiusValue(!config.stacked, isFirst, isLast)}/>;
-        case chartKinds.line:
-            return (<Line {...shared} type={charts.monotone} stroke={series.axisYColor} strokeWidth={2} dot={false}/>);
-        case chartKinds.pie:
-            return (<Pie data={data.map((d, i) => ({
-                    ...d,
-                    fill: `hsl(var(--chart-${i !== data.length - 1 || i % 5 !== 0 ? (i % 5) + 1 : 3}))`,
-                }))} {...shared} innerRadius={config.innerRadius} nameKey={series.axisXPropertyName}/>);
-        case chartKinds.radar:
-            return (<Radar {...shared} fillOpacity={config.lines ? 0 : 0.6} stroke={config.lines && series.axisYColor} strokeWidth={config.lines && 2}/>);
-        case chartKinds.radial:
-            return (<RadialBar {...shared} data={config.stacked
-                    ? []
-                    : data.map((d, i) => ({
-                        ...d,
-                        fill: `hsl(var(--chart-${(i % 5) + 1}))`,
-                    }))} cornerRadius={config.stacked && 5} background={!config.stacked}/>);
-        default:
-            return null;
-    }
-}

package/packages/level2/fd-app-toolbox/report/ReportChart.jsx

@@ -1,29 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { initChart } from "@fd-app-toolbox/report/ReportChart.funcs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdCard, FdCardContent, FdCardDescription, FdCardHeader, FdCardTitle, } from "@fd-component-toolbox/card/FdCard";
-import FdChart from "@fd-app-toolbox/report/FdChart";
-function ReportChart({ reportId }) {
-    const [report, setReport] = useState();
-    const [data, setData] = useState();
-    useAsyncEffect(async () => {
-        await initChart(reportId, setReport, setData);
-    }, [reportId]);
-    if (!report?.chartSeries || report.chartType === undefined || !data)
-        return <div className="w-full"/>;
-    return (<FdCard className="flex size-full flex-col overflow-hidden">
-            <FdCardHeader className="p-1">
-                <FdCardTitle className="truncate text-lg sm:text-xl">{report?.name}</FdCardTitle>
-                <FdCardDescription className="line-clamp-2 text-xs sm:text-sm">
-                    {report.description}
-                </FdCardDescription>
-            </FdCardHeader>
-            <FdCardContent className="flex-1 overflow-hidden p-1">
-                <div className="size-full">
-                    <FdChart series={report.chartSeries} data={data} chartType={report.chartType}/>
-                </div>
-            </FdCardContent>
-        </FdCard>);
-}
-export default ReportChart;

package/packages/level2/fd-app-toolbox/reset-password-form/ResetPasswordForm.jsx

@@ -1,81 +0,0 @@
-"use client";
-import React, { useCallback, useState } from "react";
-import { useForm } from "react-hook-form";
-import { FdCard, FdCardContent, FdCardHeader, FdCardTitle } from "@fd-component-toolbox/card/FdCard";
-import { useFdRouter, useFdSearchParams } from "@meta/client/framework/hooks";
-import { FdForm, FdFormControl, FdFormField, FdFormItem, FdFormMessage, } from "@fd-component-toolbox/form/FdForm";
-import { FdLabel } from "@fd-component-toolbox/label/FdLabel";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { getResetPasswordPasswordInputId, getResetPasswordRepeatPasswordInputId, getResetPasswordResetButtonId, onResetPassword, } from "@fd-app-toolbox/reset-password-form/ResetPasswordForm.funcs";
-import { resetPasswordLabels } from "@fd-app-toolbox/passwords/reset-password-dto";
-import { userRoutes } from "@fd-toolbox/constants/user-routes";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { getRelativeLoginUrl } from "@fd-toolbox/routing/login-routers";
-import { codeParam, emailParam } from "@fd-toolbox/constants/auth-constants";
-import { resetButtonText } from "@fd-app-toolbox/reset-password-form/reset-password-form-constants";
-/**
- * Reset password form that allows setting a new password via verification token.
- */
-function ResetPasswordForm() {
-    const params = useFdSearchParams();
-    const email = params.get(emailParam) ?? undefined;
-    const token = params.get(codeParam) ?? undefined;
-    const [hidePassword, setHidePassword] = useState(true);
-    const form = useForm({
-        mode: "onChange",
-    });
-    const { handleSubmit, formState: { isValid }, control, } = form;
-    const router = useFdRouter();
-    const navigateToLoginPage = useCallback(() => {
-        router.push(getRelativeLoginUrl());
-    }, [router]);
-    const onSubmit = useCallback(async (data) => {
-        onResetPassword(data, navigateToLoginPage, email ?? undefined, token ?? undefined);
-    }, [email, token, navigateToLoginPage]);
-    const togglePasswordVisibility = useCallback(() => {
-        setHidePassword((prev) => !prev);
-    }, []);
-    const customIconFunc = useCallback(() => hidePassword ? (<FdIcon name={iconNames.visibility} onClick={togglePasswordVisibility}/>) : (<FdIcon name={iconNames.visibilityOff} onClick={togglePasswordVisibility}/>), [hidePassword, togglePasswordVisibility]);
-    return (<div className="relative h-screen w-full overflow-hidden">
-            <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">Reset Password</FdCardTitle>
-                    </FdCardHeader>
-                    <FdCardContent className="p-0">
-                        <FdForm {...form}>
-                            <form onSubmit={handleSubmit(onSubmit)}>
-                                <FdFormField control={control} name={userRoutes.password} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full p-1">
-                                                <FdLabel>{resetPasswordLabels.password}</FdLabel>
-                                                <FdFormControl>
-                                                    <FdInput {...field} inputId={getResetPasswordPasswordInputId()} placeholder={resetPasswordLabels.password} type={hidePassword ? "password" : "text"} showClearIcon={true}>
-                                                        <FdButton variant="icon" size="icon" type="button" tabIndex={-1} className="w-6">
-                                                            {customIconFunc()}
-                                                        </FdButton>
-                                                    </FdInput>
-                                                </FdFormControl>
-                                                <FdFormMessage />
-                                            </div>
-                                        </FdFormItem>)}/>
-                                <FdFormField control={control} name={userRoutes.confirmPassword} render={({ field }) => (<FdFormItem>
-                                            <div className="w-full p-1">
-                                                <FdLabel>{resetPasswordLabels.repeatPassword}</FdLabel>
-                                                <FdFormControl>
-                                                    <FdInput {...field} inputId={getResetPasswordRepeatPasswordInputId()} placeholder={resetPasswordLabels.repeatPassword} type={"password"} showClearIcon={true}></FdInput>
-                                                </FdFormControl>
-                                                <FdFormMessage />
-                                            </div>
-                                        </FdFormItem>)}/>
-                                <FdButton className="mr-4 mt-4 block w-full" id={getResetPasswordResetButtonId()} disabled={!isValid} type="submit">
-                                    {resetButtonText}
-                                </FdButton>
-                            </form>
-                        </FdForm>
-                    </FdCardContent>
-                </FdCard>
-            </div>
-        </div>);
-}
-export default ResetPasswordForm;

package/packages/level2/fd-app-toolbox/search/FdSearch.jsx

@@ -1,56 +0,0 @@
-import React, { useCallback, useState, useEffect, useRef } from "react";
-import { isMacOs } from "@meta/services/client-environment";
-import { useFdSearchParams } from "@meta/client/framework/hooks";
-import { getSearchId, getSearchInputId, resetAndCloseDialog } from "@fd-app-toolbox/search/FdSearch.funcs";
-import { metaQueryParams } from "@fd-toolbox/constants/meta-query-params";
-import { FdSearchDialog } from "@fd-app-toolbox/search/search-dialog/FdSearchDialog";
-import { useSearchDialog } from "@fd-app-toolbox/search/search-dialog-provider";
-import { FdSearchInput } from "@fd-app-toolbox/search/search-input/FdSearchInput";
-import { eventListenerEvents } from "@fd-toolbox/constants/events";
-import { keyboardKeys } from "@fd-toolbox/constants/keyboard-keys";
-/**
- * Search input component with modal dialog for global search
- */
-export function FdSearch({ parentContextName, isCompactMode }) {
-    const searchDialog = useSearchDialog();
-    const [searchQuery, setSearchQuery] = useState("");
-    const [initialPathname, setInitialPathname] = useState("");
-    const pathName = window.location.href;
-    const searchParams = useFdSearchParams();
-    const searchInputRef = useRef(null);
-    //Approved temp
-    // eslint-disable-next-line react-compiler/react-compiler
-    const onSearchQueryChanged = useCallback(setSearchQuery, [setSearchQuery]);
-    const onCloseDialog = useCallback(() => {
-        resetAndCloseDialog(setSearchQuery, searchDialog.setIsSearchDialogOpen);
-    }, [searchDialog.setIsSearchDialogOpen]);
-    useEffect(() => {
-        const handler = (e) => {
-            const isK = e.key?.toLowerCase() === keyboardKeys.k || e.code === keyboardKeys.kCode;
-            if (isK &&
-                ((isMacOs() && e.metaKey) || (!isMacOs() && e.ctrlKey)) &&
-                searchDialog.setIsSearchDialogOpen) {
-                e.preventDefault();
-                const willOpen = !searchDialog.isSearchDialogOpen;
-                searchDialog.setIsSearchDialogOpen(willOpen);
-                if (willOpen) {
-                    searchInputRef.current?.focus();
-                }
-            }
-        };
-        window.addEventListener(eventListenerEvents.keydown, handler);
-        return () => window.removeEventListener(eventListenerEvents.keydown, handler);
-    }, [searchDialog]);
-    useEffect(() => {
-        if (!searchParams.has(metaQueryParams.viewName) &&
-            !searchParams.has(metaQueryParams.id) &&
-            pathName !== initialPathname) {
-            setInitialPathname(pathName);
-            onCloseDialog();
-        }
-    }, [pathName, searchParams, onCloseDialog, initialPathname]);
-    return (<>
-            <FdSearchInput parentContextName={getSearchInputId(parentContextName)} searchQuery={searchQuery} onSearchQueryChanged={onSearchQueryChanged} onOpenDialog={searchDialog.openDialog} className="hidden md:flex" ref={searchInputRef}/>
-            {searchDialog.isSearchDialogOpen && (<FdSearchDialog parentContextName={getSearchId(parentContextName)} searchQuery={searchQuery} isCompactMode={isCompactMode} onClose={onCloseDialog} onOpenDialog={searchDialog.openDialog} onSearchQueryChanged={onSearchQueryChanged}/>)}
-        </>);
-}

package/packages/level2/fd-app-toolbox/search/search-dialog/FdSearchDialog.jsx

@@ -1,72 +0,0 @@
-"use client";
-import { useState } from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { notFoundImg, search, getSearchResultContainerId, initSearchFilters, } from "@fd-app-toolbox/search/search-dialog/FdSearchDialog.funcs";
-import { useEnterKey } from "@fd-toolbox/hooks/use-enter-key";
-import { FdIcon } from "@fd-component-toolbox/icon/FdIcon";
-import { FdBadgeToggleList } from "@fd-component-toolbox/badge-toggle-list/FdBadgeToggleList";
-import { FdSearchScreenResults } from "@fd-app-toolbox/search/search-resource-results/FdSearchResourcesResults";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdSearchInput } from "@fd-app-toolbox/search/search-input/FdSearchInput";
-import { FdSearchSearchableResourceResults } from "@fd-app-toolbox/search/search-searchable-resource-results/FdSearchSearchableResourceResults";
-import { useSidebarContext } from "@fd-app-toolbox/providers/sidebar-provider/FdSidebarContext";
-/**
- * Modal dialog component for global search with search filters
- *
- * @param props - {@link FdSearchDialogProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [searchQuery, setSearchQuery] = useState("");
- *
- *     return (
- *         <FdSearchDialog searchQuery={searchQuery} onClose={...} onFocus={...} onBlur={...}/>
- *     );
- * }
- * ```
- */
-export function FdSearchDialog({ parentContextName, onClose, searchQuery, onFocus, onBlur, onOpenDialog, onSearchQueryChanged, isCompactMode, }) {
-    const [filters, setFilters] = useState([]);
-    const [selectedFilters, setSelectedFilters] = useState([]);
-    const [searchableResourcesResult, setSearchableResourcesResult] = useState([]);
-    const [screensResult, setScreensResult] = useState([]);
-    const sidebarContext = useSidebarContext();
-    useAsyncEffect(async () => {
-        await initSearchFilters(setFilters, setSelectedFilters);
-    }, []);
-    useAsyncEffect(async () => {
-        await search(searchQuery, selectedFilters, setSearchableResourcesResult, setScreensResult);
-    }, [searchQuery, selectedFilters, filters]);
-    useEnterKey(async () => {
-        await search(searchQuery, selectedFilters, setSearchableResourcesResult, setScreensResult);
-    });
-    return (<div className="fixed inset-0 z-20 mt-10" onFocus={onFocus} onBlur={onBlur}>
-            <div className="absolute inset-0" onClick={onClose}/>
-            <div className={cn("relative z-10 ml-0 mt-2 h-[calc(100vh-2.5rem)] w-full bg-background p-6 shadow-lg transition-all duration-75 ease-in", !isCompactMode &&
-            (sidebarContext?.isSidebarOpen
-                ? "ml-60 w-[calc(100%-15rem)]"
-                : "md:ml-14 md:w-[calc(100%-3.5rem)]"))}>
-                <FdSearchInput parentContextName={parentContextName} searchQuery={searchQuery} onSearchQueryChanged={onSearchQueryChanged} onOpenDialog={onOpenDialog} className="mb-4 flex md:hidden" useCustomInputStyle={true}/>
-                <div className="mb-4 flex items-start justify-between gap-2">
-                    <FdBadgeToggleList items={filters} selectedItems={selectedFilters} onSelectedItemsChange={setSelectedFilters}/>
-                    <div className="text-subtle-700 hover:text-subtle-500 focus:outline-none" onClick={onClose}>
-                        <FdIcon name="cross2" size="medium" className="size-6 cursor-pointer"/>
-                    </div>
-                </div>
-                <hr className="mb-5"/>
-                <div className="mt-4 h-[calc(100%-2.5rem)] overflow-y-auto">
-                    {searchableResourcesResult.length === 0 && screensResult.length === 0 ? (<div className="flex h-full flex-col items-center justify-center text-center">
-                            {!!searchQuery && (<>
-                                    <FdFrameworkImage src={notFoundImg} alt="No Results" width={300} height={200} className="mb-4 object-cover" priority/>
-                                    <h5>No results found.</h5>
-                                </>)}
-                        </div>) : (<div id={getSearchResultContainerId(parentContextName)} className="flex flex-col gap-4">
-                            {searchableResourcesResult.length !== 0 && (<FdSearchSearchableResourceResults parentContextName={parentContextName} resourcesResults={searchableResourcesResult}/>)}
-                            {screensResult.length !== 0 && (<FdSearchScreenResults resourcesResults={screensResult} onClose={onClose}/>)}
-                        </div>)}
-                </div>
-            </div>
-        </div>);
-}

package/packages/level2/fd-app-toolbox/search/search-dialog-provider.jsx

@@ -1,16 +0,0 @@
-import { createContext, useState, useContext, useCallback, useMemo } from "react";
-const initialSearchDialogState = {
-    isSearchDialogOpen: false,
-};
-export const SearchDialogContext = createContext(initialSearchDialogState);
-export function SearchDialogProvider({ children }) {
-    const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false);
-    const openDialog = useCallback(() => {
-        setIsSearchDialogOpen(true);
-    }, [setIsSearchDialogOpen]);
-    const contextValue = useMemo(() => ({ isSearchDialogOpen, setIsSearchDialogOpen, openDialog }), [isSearchDialogOpen, setIsSearchDialogOpen, openDialog]);
-    return <SearchDialogContext.Provider value={contextValue}>{children}</SearchDialogContext.Provider>;
-}
-export const useSearchDialog = () => {
-    return useContext(SearchDialogContext);
-};

package/packages/level2/fd-app-toolbox/search/search-input/FdSearchInput.jsx

@@ -1,49 +0,0 @@
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { isMacOs } from "@meta/services/client-environment";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * A search input component with an integrated icon and keyboard shortcut hints.
- *
- * This component provides a styled input field for search queries, displaying a "Ctrl+K" or "⌘+K"
- * hint when empty. It is designed to be used as a controlled component.
- *
- * @param props - {@link FdSearchInputProps}
- *
- * @example
- * ```tsx
- * const [query, setQuery] = useState("");
- *
- * <FdSearchInput
- *     parentContextName="global-search"
- *     searchQuery={query}
- *     onSearchQueryChanged={setQuery}
- *     onOpenDialog={() => console.log("Search dialog opened")}
- * />
- * ```
- */
-export function FdSearchInput({ searchQuery, onSearchQueryChanged, onOpenDialog, parentContextName, className, useCustomInputStyle, ref, }) {
-    const isQueryNotEmpty = !!searchQuery;
-    const baseInputStyle = "peer rounded-md px-10 py-1.5 focus:bg-popover focus:text-popover-foreground";
-    const queryNotEmptyStyle = "bg-popover text-popover-foreground";
-    const emptyQueryStyle = "bg-fd-tertiary-700 placeholder:text-fd-tertiary-50 focus:placeholder:text-fd-tertiary-700";
-    const queryStyle = isQueryNotEmpty ? queryNotEmptyStyle : emptyQueryStyle;
-    return (<div className={cn("group relative flex w-full items-center md:max-w-screen-sm", className)}>
-            <div className="relative grow">
-                <div className="group relative flex w-full items-center">
-                    <FdInput inputId={parentContextName} type="text" placeholder="Search" className={useCustomInputStyle ? "mt-0 px-10" : cn(baseInputStyle, queryStyle, "mt-0")} value={searchQuery} onChange={onSearchQueryChanged} onFocus={onOpenDialog} onClick={onOpenDialog} variant={useCustomInputStyle ? "float" : null} ref={ref}/>
-                </div>
-            </div>
-            <label htmlFor={parentContextName} className={cn("absolute right-5 top-1/2 flex -translate-y-1/2 items-center gap-1 text-xs text-fd-tertiary-200 peer-focus:hidden", isQueryNotEmpty && "hidden")}>
-                <span className="rounded-md border border-fd-tertiary-200 px-1">
-                    {isMacOs() ? "⌘" : "Ctrl"}
-                </span>
-                <span className="rounded-md border border-fd-tertiary-200 px-1">K</span>
-            </label>
-            <label htmlFor={parentContextName} className="absolute left-4 top-1/2 -translate-y-1/2">
-                <FdIcon name={iconNames.magnifyingGlass} className={cn(isQueryNotEmpty
-            ? "text-muted-foreground"
-            : "text-fd-tertiary-50 group-focus-within:text-muted-foreground", useCustomInputStyle && "text-muted-foreground")}/>
-            </label>
-        </div>);
-}