@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/client/components/feed/FdFeed.funcs.jsx

@@ -1,65 +0,0 @@
-import { resourceNames } from "@fd-toolbox/resources/resource-names";
-import { fetchResourceMeta } from "@meta/meta-providers";
-import { fetchResources } from "@meta/resource-providers";
-const intersectionObserverThreshold = 0.9;
-/** Docs (temp) */
-export async function initFeed(setFeedEntries, setComments, pageSize, setIsFetching) {
-    const feedMeta = await fetchResourceMeta(resourceNames.feedEntry);
-    const odataConfig = { top: pageSize, expands: [resourceNames.user] };
-    if (feedMeta) {
-        setIsFetching(true);
-        const feedEntries = await fetchResources(feedMeta.resourceName, odataConfig);
-        setIsFetching(false);
-        if (feedEntries)
-            setFeedEntries(feedEntries);
-        setComments(["", ""]);
-    }
-}
-export async function fetchNextFeedEntries(fetchSize, currentLength) {
-    const odataConfig = {
-        top: fetchSize,
-        skip: currentLength,
-        expands: [resourceNames.user],
-    };
-    const feedMeta = await fetchResourceMeta(resourceNames.feedEntry);
-    if (feedMeta) {
-        const entries = await fetchResources(feedMeta.resourceName, odataConfig);
-        if (entries)
-            return entries;
-    }
-    return [];
-}
-export async function fetchFeedMoreEntries(hasMore, fdFeedEntries, postsPerFetch, setFdFeedEntries, setHasMore) {
-    if (!hasMore)
-        return;
-    if (fdFeedEntries.length === 0)
-        return;
-    const newEntries = await fetchNextFeedEntries(postsPerFetch, fdFeedEntries.length);
-    if (newEntries.length > 0) {
-        setFdFeedEntries([...fdFeedEntries, ...newEntries]);
-        setHasMore(true);
-    }
-    else {
-        setHasMore(false);
-    }
-}
-export function createFeedIntersectionObserver(isFetching, setIsFetching, hasMore, fdFeedEntries, postsPerFetch, setFeedEntries, setHasMore) {
-    const observer = new IntersectionObserver(([entry]) => {
-        if (entry.isIntersecting && !isFetching) {
-            setIsFetching(true);
-            fetchFeedMoreEntries(hasMore, fdFeedEntries, postsPerFetch, setFeedEntries, setHasMore).finally(() => {
-                setIsFetching(false);
-            });
-        }
-    }, { threshold: intersectionObserverThreshold });
-    return observer;
-}
-export function observerFeed(hasMore, isFetching, setIsFetching, fdFeedEntries, postsPerFetch, setFdFeedEntries, setHasMore, observerRef) {
-    let result;
-    if (!observerRef || !hasMore)
-        return result;
-    const observer = createFeedIntersectionObserver(isFetching, setIsFetching, hasMore, fdFeedEntries, postsPerFetch, setFdFeedEntries, setHasMore);
-    observer.observe(observerRef);
-    result = () => observer.disconnect();
-    return result;
-}

package/packages/level2/client/components/feed/FdFeed.jsx

@@ -1,34 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdFeedEntry } from "@client/components/feed/FdFeedEntry";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { initFeed, observerFeed } from "@client/components/feed/FdFeed.funcs";
-const postsPerFetch = 5;
-/**
- * A feed component that displays a list of {@link FeedEntry} items with infinite scroll support.
- * Initially fetches a limited number of entries, then loads more as the user scrolls.
- * Uses {@link initFeed} to load the first set of entries and their comments.
- */
-export function FdFeed() {
-    const [fdFeedEntries, setFdFeedEntries] = useState([]);
-    const [comments, setComments] = useState([]);
-    const [hasMore, setHasMore] = useState(true);
-    const observerRef = useRef(null);
-    const [isFetching, setIsFetching] = useState(false);
-    useAsyncEffect(async () => {
-        await initFeed(setFdFeedEntries, setComments, postsPerFetch, setIsFetching);
-    }, []);
-    useEffect(() => {
-        observerFeed(hasMore, isFetching, setIsFetching, fdFeedEntries, postsPerFetch, setFdFeedEntries, setHasMore, observerRef?.current ?? undefined);
-    }, [isFetching, hasMore, fdFeedEntries]);
-    return (<div>
-            {fdFeedEntries?.map((entry) => (<FdFeedEntry key={entry.id} fdFeedEntry={entry} comments={comments}/>))}
-
-            {hasMore ? (<div ref={observerRef} className="flex h-20 w-full items-center justify-center bg-transparent">
-                    <FdFrameworkImage src="/logo.svg" alt="Logo" layout="intrinsic" width={100} height={100} priority className="size-10 animate-pulse"/>
-                </div>) : (<div className="mx-auto w-full max-w-xl text-center text-sm text-muted-foreground">
-                    No more posts left.
-                </div>)}
-        </div>);
-}

package/packages/level2/client/components/feed/FdFeedActions.jsx

@@ -1,15 +0,0 @@
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-export function FeedEntryActions({ onComment }) {
-    return (<div className="flex flex-wrap items-center justify-between px-2 py-1 sm:px-4 sm:py-2">
-            <FdButton variant="ghost" onClick={onComment} className="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-colors hover:bg-accent sm:flex-none sm:px-4">
-                <FdIcon name={iconNames.chatBubbleIcon} size={iconSizes.medium}/>
-                <span className="hidden font-medium sm:inline">Comments</span>
-            </FdButton>
-
-            <FdButton variant="ghost" className="flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-muted-foreground transition-colors hover:bg-accent sm:flex-none sm:px-4">
-                <FdIcon name={iconNames.share1Icon} size={iconSizes.medium}/>
-                <span className="hidden font-medium sm:inline">Share</span>
-            </FdButton>
-        </div>);
-}

package/packages/level2/client/components/feed/FdFeedComments.jsx

@@ -1,6 +0,0 @@
-import React from "react";
-export function FdFeedComments({ postId }) {
-    return (<div className="border-t border-border p-4 text-center text-muted-foreground">
-            There you will see comments soon. Currently, comments are not implemented. PostId: {postId}
-        </div>);
-}

package/packages/level2/client/components/feed/FdFeedEntry.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from "react";
-import { FdFeedHeader } from "@client/components/feed/FdFeedHeader";
-import { FeedEntryActions } from "@client/components/feed/FdFeedActions";
-import { FdFeedReactionsSummary } from "@client/components/feed/FdFeedReactionsSummary";
-import { FdFeedComments } from "@client/components/feed/FdFeedComments";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdImage } from "@fd-component-toolbox/image/FdImage";
-import { formatUserFrendlyRelativeTime, parseToUtc } from "@fd-toolbox/dates/date-times";
-export function FdFeedEntry({ fdFeedEntry, comments }) {
-    const [expanded, setExpanded] = useState(false);
-    const [showComments, setShowComments] = useState(false);
-    const shouldTruncate = fdFeedEntry.textContent.length > 250;
-    const displayText = shouldTruncate && !expanded ? `${fdFeedEntry.textContent.slice(0, 250)}...` : fdFeedEntry.textContent;
-    return (<div className="mx-auto w-full max-w-xl rounded-xl bg-background shadow-sm transition-all duration-200 hover:shadow-md sm:my-4">
-            <FdFeedHeader authorName={`${fdFeedEntry.user.firstName} ${fdFeedEntry.user.lastName}`} timestamp={formatUserFrendlyRelativeTime(parseToUtc(fdFeedEntry.createdDate))} avatarUrl={fdFeedEntry.user.imageUrl}/>
-
-            <div className="px-4 pb-3">
-                <p className="break-words leading-relaxed text-foreground">
-                    {displayText}
-                    {shouldTruncate && (<FdButton variant={"ghost"} onClick={() => setExpanded(!expanded)} className="p-0 ps-1 text-muted-foreground hover:bg-transparent">
-                            {expanded ? "See less" : "See more"}
-                        </FdButton>)}
-                </p>
-            </div>
-
-            {fdFeedEntry.imageUrl && (<div className="relative aspect-video w-full">
-                    <FdImage src={fdFeedEntry.imageUrl} alt={`Content from ${fdFeedEntry.user.firstName} ${fdFeedEntry.user.lastName}`} fill className="object-cover" sizes="(max-width: 37rem) 100vw, 37rem" priority={false}/>
-                </div>)}
-
-            <FdFeedReactionsSummary commentCount={comments.length || 0}/>
-
-            <FeedEntryActions onComment={() => setShowComments(!showComments)}/>
-
-            {showComments && <FdFeedComments postId={fdFeedEntry.id}/>}
-        </div>);
-}

package/packages/level2/client/components/feed/FdFeedHeader.jsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-export function FdFeedHeader({ authorName, timestamp, avatarUrl }) {
-    return (<div className="flex items-start justify-between p-3 sm:p-4">
-            <div className="flex gap-2 sm:gap-3">
-                <FdAvatar className="size-8 sm:size-10">
-                    <FdAvatarImage src={avatarUrl} alt={authorName}/>
-                    <FdAvatarFallback>{authorName[0]}</FdAvatarFallback>
-                </FdAvatar>
-                <div>
-                    <h3 className="text-sm font-semibold text-foreground sm:text-base">{authorName}</h3>
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground sm:text-sm">
-                        <span>{timestamp}</span>
-                    </div>
-                </div>
-            </div>
-            <FdButton variant="fullRounded">
-                <FdIcon name={iconNames.dotsHorizontal} size={iconSizes.medium}/>
-            </FdButton>
-        </div>);
-}

package/packages/level2/client/components/feed/FdFeedReactionsSummary.jsx

@@ -1,16 +0,0 @@
-import { FdSeparator } from "@fd-component-toolbox/separator/FdSeparator";
-export function FdFeedReactionsSummary({ commentCount }) {
-    const count = commentCount ?? 0;
-    return (<>
-            <div className="flex items-center justify-between px-3 py-1.5 sm:px-4 sm:py-2">
-                <div className="flex items-center gap-1"></div>
-                <div className="flex gap-3 text-xs text-muted-foreground sm:text-sm">
-                    {count > 0 && (<div className="flex items-center gap-1">
-                            <span>{count}</span>
-                            <span>comments</span>
-                        </div>)}
-                </div>
-            </div>
-            <FdSeparator />
-        </>);
-}

package/packages/level2/client/components/providers/FdProviders.jsx

@@ -1,28 +0,0 @@
-"use client";
-import TitleProvider from "@fd-app-toolbox/layout/toolbar/title-provider/ToolbarTitleProvider";
-import { ThemeProvider } from "@fd-app-toolbox/providers/ThemeProvider/ThemeProvider";
-import { SaveCompleteProvider } from "@meta/edit-resource/SaveCompleteProvider";
-import { SearchDialogProvider } from "@fd-app-toolbox/search/search-dialog-provider";
-import { SidebarResourceProvider } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-import { FdGlobalContextProvider } from "@meta/providers/global-provider/FdGlobalContext";
-import { defaultGlobalConfig } from "@meta/providers/global-provider/default-config";
-import { AuthProvider } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-import { FdSidebarProvider } from "@fd-app-toolbox/providers/sidebar-provider/FdSidebarContext";
-import { defaultAppTitle } from "@meta/page/title-context";
-export function FdProviders({ children, appTitle, globalConfig }) {
-    return (<TitleProvider appTitle={appTitle ?? defaultAppTitle}>
-            <ThemeProvider>
-                <FdGlobalContextProvider config={globalConfig ?? defaultGlobalConfig}>
-                    <AuthProvider>
-                        <SaveCompleteProvider>
-                            <FdSidebarProvider>
-                                <SearchDialogProvider>
-                                    <SidebarResourceProvider>{children}</SidebarResourceProvider>
-                                </SearchDialogProvider>
-                            </FdSidebarProvider>
-                        </SaveCompleteProvider>
-                    </AuthProvider>
-                </FdGlobalContextProvider>
-            </ThemeProvider>
-        </TitleProvider>);
-}

package/packages/level2/client/components/subscription-plan/FdSubscriptionPlan.jsx

@@ -1,163 +0,0 @@
-"use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdCard, FdCardFooter, FdCardTitle, FdCardContent, FdCardDescription, } from "@fd-component-toolbox/card/FdCard";
-import { FdDialog, FdDialogContent, FdDialogTitle } from "@fd-component-toolbox/dialog/FdDialog";
-import CheckoutForm from "@client/payments/checkout-form/CheckoutForm";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { isBasicPlan, getButtonText, onRefreshPricings, handlePlanAction, getAdditionalInfo, getPricingText, getPricingDescripion, isActivePricing, getFeaturesByPlan, getButtonId, updateSubscription, canUpdateSubscription, cancelSubscription, getPaymentPlanId, capitalizeFirstLetter, handleCheckoutSuccess, } from "@client/components/subscription-plan/FdSubscriptionPlan.funcs";
-import { dateToISOString } from "@fd-toolbox/dates/date-times";
-import { FdSwitch } from "@fd-component-toolbox/switch/FdSwitch";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { billingIntervals, subscriptionStatuses, } from "@meta/core/resources/enums/payment-enums";
-import { subscriptionMessages } from "@fd-toolbox-core/constants/subscription-messages";
-import { cn } from "@fd-toolbox/lib/utils";
-import { resourceNames } from "@fd-toolbox/resources/resource-names";
-import { YesOrNoDialog } from "@fd-component-toolbox/dialog/YesOrNoDialog";
-import { goBack } from "@fd-toolbox/routing/routers";
-import { elements } from "@fd-toolbox/constants/elements";
-import { hasScheduledCancelation } from "@client/components/subscription-plan/subscriptions";
-import { useFdRouter } from "@meta/client/framework/hooks";
-/**
- * Component for displaying and managing subscription plans.
- * Allows users to select, modify, or cancel subscriptions.
- *
- * @param props - See {@link FdSubscriptionPlanProps}
- */
-export function FdSubscriptionPlan({ config }) {
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [selectedPlanPrice, setSelectedPlanPrice] = useState(0);
-    const [selectedPricingId, setSelectedPricingId] = useState("");
-    const [isSubmittingForm, setIsSubmittingForm] = useState(false);
-    const [pricings, setPricings] = useState([]);
-    const [refreshPricingsTrigger, setRefreshPricingsTrigger] = useState(0);
-    const [isCanceling, setIsCanceling] = useState(false);
-    const [activeSubscription, setActiveSubscription] = useState();
-    const [selectedBillingInterval, setSelectedBillingInterval] = useState(billingIntervals.month);
-    const [paymentPlanFeature, setPaymentPlanFeature] = useState([]);
-    const router = useFdRouter();
-    const filteredPricings = useMemo(() => pricings.filter((pricing) => pricing.billingInterval === selectedBillingInterval), [pricings, selectedBillingInterval]);
-    useSetTitle(resourceNames.paymentPlan);
-    useAsyncEffect(async () => {
-        await onRefreshPricings(isCanceling, setIsCanceling, setActiveSubscription, setPricings, setPaymentPlanFeature, config?.excludePricingIds);
-    }, [refreshPricingsTrigger]);
-    useEffect(() => {
-        if (isCanceling) {
-            document.body.style.cursor = "progress";
-        }
-        else {
-            document.body.style.cursor = "default";
-        }
-    }, [isCanceling]);
-    function refreshPricingsData() {
-        setRefreshPricingsTrigger((prev) => prev + 1);
-    }
-    const onSuccessSubmitingCheckoutForm = useCallback(() => {
-        handleCheckoutSuccess(setIsDialogOpen, refreshPricingsData);
-    }, []);
-    const onManagePricingAction = useCallback(async (pricing) => {
-        handlePlanAction(pricing, isDialogOpen, refreshPricingsTrigger, setIsDialogOpen, setIsCanceling, setRefreshPricingsTrigger, setSelectedPlanPrice, setSelectedPricingId, activeSubscription, config, router);
-    }, [
-        isDialogOpen,
-        refreshPricingsTrigger,
-        setIsDialogOpen,
-        setIsCanceling,
-        setRefreshPricingsTrigger,
-        setSelectedPlanPrice,
-        setSelectedPricingId,
-        activeSubscription,
-        config,
-        router,
-    ]);
-    const onUpdateSubscription = useCallback(async (dialogResult, pricing) => {
-        if (dialogResult && activeSubscription)
-            if (activeSubscription.pricingId === pricing.id) {
-                await cancelSubscription(activeSubscription.id);
-                refreshPricingsData();
-            }
-            else {
-                await updateSubscription(activeSubscription, pricing, refreshPricingsData);
-            }
-    }, [activeSubscription]);
-    const featuresByPlan = useMemo(() => {
-        return getFeaturesByPlan(paymentPlanFeature.map((f) => ({
-            ...f,
-            featureName: f.feature?.name ?? "",
-        })));
-    }, [paymentPlanFeature]);
-    const onBillingIntervalChange = useCallback(() => {
-        setSelectedBillingInterval((prev) => prev === billingIntervals.year ? billingIntervals.month : billingIntervals.year);
-    }, []);
-    return (<div className="flex flex-col justify-center py-6 xl:px-4">
-            <p className="mb-4 mt-2 text-center text-muted-foreground">{subscriptionMessages.pricingIntro}</p>
-            <div className="flex items-center justify-center">
-                <div className="absolute left-0 top-0 z-50 items-start justify-start gap-2 md:left-14">
-                    <FdButton id={elements.paymentPlan.backButton} variant="ghost" size="default" onClick={goBack} tooltipText="Go back" tooltipClassName="mt-2">
-                        <FdIcon name={iconNames.arrowLeft} className="mr-2"/>
-                        Back
-                    </FdButton>
-                </div>
-                <p className="pointer-events-none pr-3 text-sm font-medium leading-none peer-disabled:cursor-not-allowed">
-                    {subscriptionMessages.pricePerMonth}
-                </p>
-                <FdSwitch text={subscriptionMessages.pricePerYear} checked={selectedBillingInterval === billingIntervals.year} onCheckedChange={onBillingIntervalChange} name="subscriptionTypeSwitcher"/>
-            </div>
-            {!!filteredPricings.length && (<div className="mx-auto flex flex-col items-center justify-center gap-4 sm:mx-0 lg:flex-row lg:items-stretch">
-                    {filteredPricings.map((pricing) => {
-                const isActive = isActivePricing(pricing, activeSubscription?.pricing, activeSubscription?.pendingPricingId);
-                const plan = pricing.paymentPlan;
-                const additionalInfo = getAdditionalInfo(pricing, activeSubscription);
-                return (plan && (<FdCard key={pricing.id} className={cn("relative mt-4 flex w-full flex-col items-center gap-2 rounded-3xl p-4 sm:max-w-2xl lg:max-w-md", isActive && "border-4 border-primary")} id={getPaymentPlanId(plan.name, pricing.billingInterval)}>
-                                    {additionalInfo && additionalInfo.shouldShowAdditionalInfo && (<div className="absolute right-4 top-6 flex size-28 flex-col items-center justify-center rounded-full bg-primary p-2 text-sm text-primary-foreground">
-                                            <p>{additionalInfo.infoText}</p>
-                                            <time className="text-xs">
-                                                {additionalInfo.infoDate &&
-                            dateToISOString(additionalInfo.infoDate.toString())}
-                                            </time>
-                                        </div>)}
-                                    <FdCardTitle className="w-full text-left font-semibold">
-                                        {capitalizeFirstLetter(plan.name)}
-                                    </FdCardTitle>
-                                    <FdCardDescription className={cn("mt-8 w-full text-left text-3xl font-semibold text-primary", plan.isContactUs && "text-center text-base xl:text-xl")}>
-                                        {getPricingText(pricing, plan.pricingDescription)}
-                                    </FdCardDescription>
-                                    <p className="w-full text-left text-sm">
-                                        {getPricingDescripion(pricing)}
-                                    </p>
-                                    <FdCardContent className="mt-2 w-full grow pl-0">
-                                        <span className="text-sm font-semibold">{plan.description}</span>
-                                        <ul className="mt-2 space-y-2">
-                                            {(featuresByPlan[pricing.paymentPlanId] || []).map((featureName) => (<li key={featureName} className="flex items-start">
-                                                        <FdIcon name={iconNames.check} className="mr-2 mt-1 shrink-0 self-start"/>
-                                                        <span className="text-sm">{featureName}</span>
-                                                    </li>))}
-                                        </ul>
-                                    </FdCardContent>
-                                    <FdCardFooter className="flex w-full flex-col pb-0">
-                                        {!isBasicPlan(plan) &&
-                        (canUpdateSubscription(pricing.id, activeSubscription) &&
-                            !plan.isContactUs ? (<YesOrNoDialog triggerCssClass="w-full" title={activeSubscription?.status ===
-                                subscriptionStatuses.trialing
-                                ? subscriptionMessages.trialDIalogTitle
-                                : subscriptionMessages.dialogTitle} onResponse={(dialogResult) => onUpdateSubscription(dialogResult, pricing)} trigger={<FdButton size="default" className="w-full" id={getButtonId(plan.name)} disabled={hasScheduledCancelation(activeSubscription, pricing.id)}>
-                                                            {getButtonText(pricing, activeSubscription)}
-                                                        </FdButton>} isDisabled={hasScheduledCancelation(activeSubscription, pricing.id)}/>) : (<FdButton onClick={() => onManagePricingAction(pricing)} size="default" className="w-full" id={getButtonId(plan.name)} disabled={hasScheduledCancelation(activeSubscription, pricing.id)}>
-                                                    {getButtonText(pricing, activeSubscription)}
-                                                </FdButton>))}
-                                    </FdCardFooter>
-                                </FdCard>));
-            })}
-                    <FdDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                        <FdDialogContent isCloseButtonShown={!isSubmittingForm} className="flex w-full min-w-96 flex-col justify-center gap-0" onEscapeKeyDown={isSubmittingForm ? (event) => event.preventDefault() : undefined} onInteractOutside={isSubmittingForm ? (event) => event.preventDefault() : undefined}>
-                            <FdDialogTitle className="mt-8 text-center font-semibold leading-none">
-                                {subscriptionMessages.enterPaymentDetails}
-                            </FdDialogTitle>
-                            <div>
-                                <CheckoutForm price={selectedPlanPrice} pricingId={selectedPricingId} onSubmitting={setIsSubmittingForm} onSubmitSuccess={onSuccessSubmitingCheckoutForm}/>
-                            </div>
-                        </FdDialogContent>
-                    </FdDialog>
-                </div>)}
-        </div>);
-}

package/packages/level2/client/components/wizard/FdWizard.jsx

@@ -1,45 +0,0 @@
-"use client";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdWizardStepper } from "@client/components/wizard/FdWizardStepper";
-import { useMemo } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { getBackButtonId, getNextButtonId, getSubmitButtonId, isNextButtonVisible, } from "@client/components/wizard/FdWizard.funcs";
-/**
- * A multi-step wizard component that guides users through a series of steps.
- * Displays a stepper, content for the current step, and navigation buttons (Back, Next, Submit).
- *
- * @param props - {@link FdWizardProps}
- */
-export function FdWizard({ config, onNextClick, onBackClick, currentStep, children, disableButton, isSubmitting, showSubmitButton, onSubmit, }) {
-    const nextBtnClass = useMemo(() => {
-        return !isNextButtonVisible(config.steps.length - 1, currentStep) ? "invisible" : "";
-    }, [config.steps, currentStep]);
-    const childrenClass = useMemo(() => {
-        return currentStep === 3 ? "min-h-60" : "min-h-10";
-    }, [currentStep]);
-    return (<div className="flex w-full flex-col items-center gap-4">
-            <FdWizardStepper steps={config.steps} currentStep={currentStep}/>
-            <div className={cn("w-full max-w-4xl", childrenClass)}>{children}</div>
-            <div className="mt-2 flex w-full max-w-4xl justify-end gap-2">
-                <FdButton id={getBackButtonId(currentStep)} variant="outline" onClick={onBackClick}>
-                    Back
-                </FdButton>
-                {showSubmitButton && currentStep < config.steps.length - 1 && (<FdButton id={getSubmitButtonId(currentStep)} className={nextBtnClass} onClick={onSubmit} disabled={disableButton}>
-                        {isSubmitting ? (<div className="flex">
-                                <div className="mr-2 size-4 animate-spin rounded-full border-2 border-inherit border-r-transparent"/>
-                                Submitting...
-                            </div>) : (<>Submit</>)}
-                    </FdButton>)}
-                {currentStep < config.steps.length - 1 || !config.customActions ? (<FdButton id={getNextButtonId(currentStep)} className={nextBtnClass} onClick={onNextClick} disabled={disableButton}>
-                        {currentStep < config.steps.length - 1 ? (<>Next</>) : (<div>
-                                {isSubmitting ? (<div className="flex">
-                                        <div className="mr-2 size-4 animate-spin rounded-full border-2 border-inherit border-r-transparent"/>
-                                        Submitting...
-                                    </div>) : (<>Submit</>)}
-                            </div>)}
-                    </FdButton>) : (config.customActions.map((customAction) => (<FdButton key={customAction.name} variant={customAction.buttonVariant} onClick={customAction.action}>
-                            {customAction.name}
-                        </FdButton>)))}
-            </div>
-        </div>);
-}

package/packages/level2/client/components/wizard/FdWizardStepper.jsx

@@ -1,55 +0,0 @@
-"use client";
-import { useEffect, useState, Fragment } from "react";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { FdSeparator } from "@fd-component-toolbox/separator/FdSeparator";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { cn } from "@fd-toolbox/lib/utils";
-import { getVisibleSteps, isMobileChecker, getWizardStepperBackgroundClass, } from "@client/components/wizard/FdWizardStepper.funcs";
-/**
- * A visual stepper component for guiding users through multi-step wizard flows.
- *
- * @param props - {@link FdWizardStepperProps}
- */
-export function FdWizardStepper({ steps, currentStep }) {
-    const [isMobile, setIsMobile] = useState(false);
-    const { visibleSteps, adjustedCurrentStep } = getVisibleSteps(steps, currentStep);
-    useEffect(() => {
-        isMobileChecker(setIsMobile);
-    }, []);
-    const isCompletedStep = (index) => {
-        return index < (isMobile ? adjustedCurrentStep : currentStep);
-    };
-    const getStepBackgroundClass = (index) => {
-        return getWizardStepperBackgroundClass(index, isMobile, currentStep, adjustedCurrentStep);
-    };
-    const renderStepContent = (step, index) => {
-        if (isCompletedStep(index)) {
-            return <FdIcon name={iconNames.check} size={iconSizes.large} color="text-background"/>;
-        }
-        if (step.imageUrl) {
-            return (<FdFrameworkImage src={step.imageUrl} fill alt={`step-${index + 1}-${step.description}`} sizes={"20rem"} className="object-cover"/>);
-        }
-        return (<p className="text-sm text-background md:text-base">
-                {isMobile ? steps.indexOf(step) + 1 : index + 1}
-            </p>);
-    };
-    return (<div className="mb-11 w-full px-2">
-            <div className="flex w-full items-center gap-5">
-                {(isMobile ? visibleSteps : steps).map((step, index) => (<Fragment key={step.description}>
-                        {index > 0 && (<div className="w-full min-w-8 xl:min-w-32">
-                                <FdSeparator />
-                            </div>)}
-                        <div className="relative flex flex-col items-center">
-                            <div className={cn("flex size-11 items-center justify-center overflow-hidden rounded-full sm:size-14", getStepBackgroundClass(index))}>
-                                {renderStepContent(step, index)}
-                            </div>
-                            <div className="absolute top-12 mt-2 max-w-40 sm:top-14">
-                                <div className="text-center text-sm text-subtle-500 md:text-base">
-                                    {step.description}
-                                </div>
-                            </div>
-                        </div>
-                    </Fragment>))}
-            </div>
-        </div>);
-}

package/packages/level2/client/pages/dashboard-page/DashbordPage.jsx

@@ -1,46 +0,0 @@
-"use client";
-import React, { Fragment, useState, useEffect, useRef } from "react";
-import FdDynamicLayoutDragAndDrop from "@fd-component-toolbox/dynamic-layout/FdDynamicLayoutDragAndDrop";
-import FdDynamicComponent from "@fd-component-toolbox/dynamic-layout/FdDynamicComponent";
-import ReportChart from "@fd-app-toolbox/report/ReportChart";
-import { FdCardBigDigits } from "@fd-component-toolbox/card/FdCardBigDigits";
-import { goBack } from "@fd-toolbox/routing/routers";
-import { reportTypes } from "@fd-app-toolbox/reports/report-enums";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { dashboardLayoutConfig, onInitDashboardPage } from "@client/pages/dashboard-page/dashboardPage.funcs";
-const pageTitle = "Dashboard";
-export default function DashboardPage() {
-    const [reports, setReports] = useState([]);
-    const [width, setWidth] = useState(window.innerWidth);
-    const containerRef = useRef(null);
-    useSetTitle(pageTitle);
-    useEffect(() => {
-        onInitDashboardPage(containerRef, setWidth, setReports);
-    }, []);
-    return (<div ref={containerRef} className="overflow-auto p-6">
-            <div className="mb-4 flex items-center gap-1">
-                <FdButton variant="ghost" size="icon" className="size-5">
-                    <FdIcon name={iconNames.arrowLeft} size={iconSizes.small} onClick={goBack}/>
-                </FdButton>
-                <FdSubHeading>Dashboards</FdSubHeading>
-            </div>
-            <div className="flex flex-col gap-2 p-2">
-                <FdDynamicLayoutDragAndDrop componentClassName="bg-card shadow rounded-xl" columns={15}>
-                    {reports.map((report) => {
-            return (<Fragment key={report.id}>
-                                <FdDynamicComponent key={report.id} defaultX={Math.max(0, Number(report.positionX))} defaultY={Math.max(0, Number(report.positionY))} defaultWidth={Math.max(0, width < dashboardLayoutConfig.breakpointWidth
-                    ? dashboardLayoutConfig.defaultWidth
-                    : Number(report.sizeX))} defaultHeight={Math.max(0, width < dashboardLayoutConfig.breakpointWidth
-                    ? dashboardLayoutConfig.defaultHeight
-                    : Number(report.sizeY))} minWidth={dashboardLayoutConfig.minWidth} minHeight={dashboardLayoutConfig.minHeight} id={report.id}>
-                                    {report.report?.type === reportTypes.chart ? (<ReportChart reportId={report.reportId}/>) : (report.report?.type === reportTypes.number && (<FdCardBigDigits title={report.report.name} value={report.report.bigDigitValue} subtitle={report.report.description}/>))}
-                                </FdDynamicComponent>
-                            </Fragment>);
-        })}
-                </FdDynamicLayoutDragAndDrop>
-            </div>
-        </div>);
-}

package/packages/level2/client/pages/dynamic-layout-page/DynamicLayoutPage.jsx

@@ -1,22 +0,0 @@
-import React from "react";
-import FdDynamicLayoutDragAndDrop from "@fd-component-toolbox/dynamic-layout/FdDynamicLayoutDragAndDrop";
-import ReportChart from "@fd-app-toolbox/report/ReportChart";
-import { resourceNames } from "@fd-toolbox/resources/resource-names";
-import FdDynamicComponent from "@fd-component-toolbox/dynamic-layout/FdDynamicComponent";
-import { ResourceList } from "@meta/resource-list/ResourceList";
-async function DynamicLayoutPage() {
-    return (<div className="px-40 py-20">
-            <FdDynamicLayoutDragAndDrop componentClassName="bg-background shadow rounded-xl">
-                <ReportChart reportId={"38bdb3b9-3ad2-4359-8e2b-4ea14b4d4367"}/>
-                <ReportChart reportId={"38bdb3b9-3ad2-4359-8e2b-4ea14b4d4367"}/>
-                <ReportChart reportId={"38bdb3b9-3ad2-4359-8e2b-4ea14b4d4367"}/>
-                <FdDynamicComponent minWidth={2}>
-                    <div className="h-full overflow-y-auto">
-                        <ResourceList resourceName={resourceNames.contact}/>
-                    </div>
-                </FdDynamicComponent>
-                <div />
-            </FdDynamicLayoutDragAndDrop>
-        </div>);
-}
-export default DynamicLayoutPage;

package/packages/level2/client/pages/edit-password-page/EditPasswordPage.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import EditPasswordForm from "@fd-app-toolbox/edit-password-form/EditPasswordForm";
-async function EditPasswordPage() {
-    return (<main className="h-full">
-            <EditPasswordForm />
-        </main>);
-}
-export default EditPasswordPage;

package/packages/level2/client/pages/edit-user-by-id-page/EditUserByIdPage.jsx

@@ -1,14 +0,0 @@
-import { EditOtherUser } from "@fd-app-toolbox/edit-other-user/EditOtherUser";
-import { getUserDto } from "@server/users/user-manager";
-import { apiNotFoundError } from "@fd-toolbox/server/web/errors";
-import { responseMessages } from "@fd-toolbox/server/web/response-messages";
-export default async function EditUserByIdPage({ params }) {
-    const { id } = await params;
-    const userData = await getUserDto(id);
-    if (!userData) {
-        throw apiNotFoundError(responseMessages.notFoundError);
-    }
-    return (<main className="p-4">
-            <EditOtherUser userId={id} userData={{ id: userData.id, email: userData.email }}/>
-        </main>);
-}

package/packages/level2/client/pages/edit-user-page/EditUserPage.jsx

@@ -1,6 +0,0 @@
-import { EditOtherUser } from "@fd-app-toolbox/edit-other-user/EditOtherUser";
-export default async function EditUserPage() {
-    return (<main className="p-4">
-            <EditOtherUser />
-        </main>);
-}

package/packages/level2/client/pages/feed-page/FeedPage.jsx

@@ -1,8 +0,0 @@
-import { redirectFunction } from "@fd-toolbox/redirect/redirect-functions";
-import { FdFeed } from "@client/components/feed/FdFeed";
-import { isDev } from "@fd-toolbox/lib/environments";
-export default async function FeedPage() {
-    if (isDev())
-        await redirectFunction("/");
-    return <FdFeed />;
-}

package/packages/level2/client/pages/file-upload-page/FileUploadPage.jsx

@@ -1,7 +0,0 @@
-"use client";
-import { FileUpload } from "@meta/components/file-upload/FileUpload";
-export default function FileUploadPage() {
-    return (<div className="flex h-screen flex-col items-center justify-center gap-10 overflow-auto">
-            <FileUpload allowMultiple/>
-        </div>);
-}

package/packages/level2/client/pages/forgot-password-page/ForgotPasswordPage.jsx

@@ -1,8 +0,0 @@
-import React from "react";
-import ForgotPasswordForm from "@fd-app-toolbox/forgot-password-form/ForgotPasswordForm";
-async function ForgotPasswordPage() {
-    return (<main>
-            <ForgotPasswordForm />
-        </main>);
-}
-export default ForgotPasswordPage;