@fernir2/saas-kit-cli 0.1.3 → 0.1.4

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { Notification } from "../../resources/notification/notification.resource";
+import { WithParentContextName } from "../../../fd-toolbox/types/with-parent-context-name";
+/**
+ * Notifications menu component with bell icon, unread indicator and sliding panel
+ *
+ * {@link FdNotificationMenu}
+ */
+interface FdNotificationMenuProps extends WithParentContextName {
+    notificationsPromise: Promise<Notification[]>;
+}
+export declare function FdNotificationMenu({ parentContextName, notificationsPromise }: FdNotificationMenuProps): React.JSX.Element;
+export {};

package/packages/level2/fd-app-toolbox/menu/notifications-menu/FdNotificationMenu.funcs.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+'use strict';
+
+var apiClient = require('../../../fd-toolbox/api/api-client.cjs.js');
+var resourceNames = require('../../../fd-toolbox/resources/resource-names.cjs.js');
+var urls = require('../../../fd-toolbox/http/url/urls.cjs.js');
+var notifications = require('../../../fd-toolbox/notifications.cjs.js');
+var webSocketClient = require('../../services/web-socket-client.cjs.js');
+var webSocketMethods = require('../../constants/web-socket-methods.cjs.js');
+var _0xc2892a = require('dayjs');
+var elements = require('../../../fd-toolbox/constants/elements.cjs.js');
+var FdNotificationList_funcs = require('./notification-list/FdNotificationList.funcs.cjs.js');
+var dateTimes = require('../../../fd-toolbox/dates/date-times.cjs.js');
+
+var __defProp=Object['defineProperty'],__name=(_0x35c31f,_0x3e0583)=>__defProp(_0x35c31f,'name',{'value':_0x3e0583,'configurable':!![]});function initNotificationMenu(_0x3f5948,_0x421110,_0x3943fa){_0x3943fa&&(_0x3f5948(_0x3943fa),_0x421110(_0x3943fa['some'](_0x215835=>!_0x215835['isRead'])));}__name(initNotificationMenu,'initNotificationMenu');async function readNotifications(_0x5123b4,_0x45f6fa,_0x3067c8){const _0x4de27b=[];for(const _0x22deb0 of _0x5123b4){!_0x22deb0['isRead']&&_0x4de27b['push'](readNotification(_0x22deb0));}_0x45f6fa([..._0x5123b4]),_0x3067c8(![]),await Promise['all'](_0x4de27b);}__name(readNotifications,'readNotifications');function setNotificationState(_0x54b7b3,_0x296fa6,_0x50898d){notifications.notify(_0x54b7b3['message'],{'description':_0x54b7b3['description'],'position':'top-right'}),_0x296fa6(_0x42db3f=>[..._0x42db3f,_0x54b7b3]['sort']((_0x520513,_0x317a93)=>_0xc2892a(_0x317a93['createdDate'])['diff'](_0xc2892a(_0x520513['createdDate'])))),_0x50898d(!![]);}__name(setNotificationState,'setNotificationState');function onClear(_0x51faed,_0x18cdc0){_0x51faed(),webSocketClient.webSocketUnsubscribe(webSocketMethods.webSocketMethods['notification'],_0x18cdc0);}__name(onClear,'onClear');async function initNotification(_0x14ffda,_0x4f6b3a,_0x5b0b5c,_0x1529e5,_0x348cfe,_0x5add6f){let _0x172c9b;if(!_0x14ffda)return _0x172c9b;initNotificationMenu(_0x5b0b5c,_0x1529e5,_0x5add6f);const _0x5ebba0=await webSocketClient.webSocketEnsureConnected(_0x4f6b3a);return webSocketClient.webSocketSubscribe(webSocketMethods.webSocketMethods['notification'],_0x348cfe),()=>{onClear(_0x5ebba0,_0x348cfe);};}__name(initNotification,'initNotification');function getNotificationMenuId(_0x348bbe){return _0x348bbe+elements.elements['notification']['menu'];}__name(getNotificationMenuId,'getNotificationMenuId');function getNotificationMenuTriggerId(_0x124358){return _0x124358+elements.elements['notification']['trigger'];}__name(getNotificationMenuTriggerId,'getNotificationMenuTriggerId');function getNotificationBaseId(){return FdNotificationList_funcs.getNotificationMenuListId(getNotificationMenuId(elements.elements['toolbar']));}__name(getNotificationBaseId,'getNotificationBaseId');async function handleNotificationOpenChange(_0x5a88a7,_0x3c4da1,_0x300863,_0x4e55c8,_0x2dc42a){_0x3c4da1(_0x5a88a7),!_0x5a88a7&&readNotifications(_0x300863,_0x4e55c8,_0x2dc42a);}__name(handleNotificationOpenChange,'handleNotificationOpenChange');async function readNotification(_0x69072f){_0x69072f['isRead']=!![],_0x69072f['readDate']=dateTimes.getNowUtc();const _0x1ff07a={'resource':_0x69072f,'resourceName':resourceNames.resourceNames['notification']};return apiClient.apiPut(urls.combineEndpointPath(resourceNames.resourceNames['notification'],_0x69072f['id']),_0x1ff07a);}__name(readNotification,'readNotification');
+
+exports.getNotificationBaseId = getNotificationBaseId;
+exports.getNotificationMenuId = getNotificationMenuId;
+exports.getNotificationMenuTriggerId = getNotificationMenuTriggerId;
+exports.handleNotificationOpenChange = handleNotificationOpenChange;
+exports.initNotification = initNotification;
+exports.initNotificationMenu = initNotificationMenu;
+exports.onClear = onClear;
+exports.readNotifications = readNotifications;
+exports.setNotificationState = setNotificationState;

package/packages/level2/fd-app-toolbox/menu/notifications-menu/FdNotificationMenu.funcs.d.ts

@@ -0,0 +1,11 @@
+import { SetStateFunc, VoidFunc, VoidFuncNoParam } from "../../../fd-toolbox/functions/getter-setter-functions";
+import { Notification } from "../../resources/notification/notification.resource";
+export declare function initNotificationMenu(setNotifications: VoidFunc<Notification[]>, setHasUnreadNotification: VoidFunc<boolean>, notificationProps?: Notification[]): void;
+export declare function readNotifications(notifications: Notification[], setNotifications: VoidFunc<Notification[]>, setHasUnreadNotification: VoidFunc<boolean>): Promise<void>;
+export declare function setNotificationState(notification: Notification, setNotifications: SetStateFunc<Notification[]>, setHasUnreadNotification: SetStateFunc<boolean>): void;
+export declare function onClear(clear: VoidFuncNoParam, onNotification: VoidFunc<Notification>): void;
+export declare function initNotification(loggedIn: boolean, userId: string, setNotifications: SetStateFunc<Notification[]>, setHasUnreadNotification: SetStateFunc<boolean>, onNotification: VoidFunc<Notification>, notificationProps: Notification[]): Promise<any>;
+export declare function getNotificationMenuId(parentContextName: string): string;
+export declare function getNotificationMenuTriggerId(parentContextName: string): string;
+export declare function getNotificationBaseId(): string;
+export declare function handleNotificationOpenChange(open: boolean, setIsOpen: VoidFunc<boolean>, notifications: Notification[], setNotifications: SetStateFunc<Notification[]>, setHasUnreadNotification: VoidFunc<boolean>): Promise<void>;

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

@@ -0,0 +1,15 @@
+'use strict';
+import { apiPut } from '../../../fd-toolbox/api/api-client.js';
+import { resourceNames } from '../../../fd-toolbox/resources/resource-names.js';
+import { combineEndpointPath } from '../../../fd-toolbox/http/url/urls.js';
+import { notify } from '../../../fd-toolbox/notifications.js';
+import { webSocketUnsubscribe, webSocketEnsureConnected, webSocketSubscribe } from '../../services/web-socket-client.js';
+import { webSocketMethods } from '../../constants/web-socket-methods.js';
+import _0xc2892a from 'dayjs';
+import { elements } from '../../../fd-toolbox/constants/elements.js';
+import { getNotificationMenuListId } from './notification-list/FdNotificationList.funcs.js';
+import { getNowUtc } from '../../../fd-toolbox/dates/date-times.js';
+
+var __defProp=Object['defineProperty'],__name=(_0x35c31f,_0x3e0583)=>__defProp(_0x35c31f,'name',{'value':_0x3e0583,'configurable':!![]});function initNotificationMenu(_0x3f5948,_0x421110,_0x3943fa){_0x3943fa&&(_0x3f5948(_0x3943fa),_0x421110(_0x3943fa['some'](_0x215835=>!_0x215835['isRead'])));}__name(initNotificationMenu,'initNotificationMenu');async function readNotifications(_0x5123b4,_0x45f6fa,_0x3067c8){const _0x4de27b=[];for(const _0x22deb0 of _0x5123b4){!_0x22deb0['isRead']&&_0x4de27b['push'](readNotification(_0x22deb0));}_0x45f6fa([..._0x5123b4]),_0x3067c8(![]),await Promise['all'](_0x4de27b);}__name(readNotifications,'readNotifications');function setNotificationState(_0x54b7b3,_0x296fa6,_0x50898d){notify(_0x54b7b3['message'],{'description':_0x54b7b3['description'],'position':'top-right'}),_0x296fa6(_0x42db3f=>[..._0x42db3f,_0x54b7b3]['sort']((_0x520513,_0x317a93)=>_0xc2892a(_0x317a93['createdDate'])['diff'](_0xc2892a(_0x520513['createdDate'])))),_0x50898d(!![]);}__name(setNotificationState,'setNotificationState');function onClear(_0x51faed,_0x18cdc0){_0x51faed(),webSocketUnsubscribe(webSocketMethods['notification'],_0x18cdc0);}__name(onClear,'onClear');async function initNotification(_0x14ffda,_0x4f6b3a,_0x5b0b5c,_0x1529e5,_0x348cfe,_0x5add6f){let _0x172c9b;if(!_0x14ffda)return _0x172c9b;initNotificationMenu(_0x5b0b5c,_0x1529e5,_0x5add6f);const _0x5ebba0=await webSocketEnsureConnected(_0x4f6b3a);return webSocketSubscribe(webSocketMethods['notification'],_0x348cfe),()=>{onClear(_0x5ebba0,_0x348cfe);};}__name(initNotification,'initNotification');function getNotificationMenuId(_0x348bbe){return _0x348bbe+elements['notification']['menu'];}__name(getNotificationMenuId,'getNotificationMenuId');function getNotificationMenuTriggerId(_0x124358){return _0x124358+elements['notification']['trigger'];}__name(getNotificationMenuTriggerId,'getNotificationMenuTriggerId');function getNotificationBaseId(){return getNotificationMenuListId(getNotificationMenuId(elements['toolbar']));}__name(getNotificationBaseId,'getNotificationBaseId');async function handleNotificationOpenChange(_0x5a88a7,_0x3c4da1,_0x300863,_0x4e55c8,_0x2dc42a){_0x3c4da1(_0x5a88a7),!_0x5a88a7&&readNotifications(_0x300863,_0x4e55c8,_0x2dc42a);}__name(handleNotificationOpenChange,'handleNotificationOpenChange');async function readNotification(_0x69072f){_0x69072f['isRead']=!![],_0x69072f['readDate']=getNowUtc();const _0x1ff07a={'resource':_0x69072f,'resourceName':resourceNames['notification']};return apiPut(combineEndpointPath(resourceNames['notification'],_0x69072f['id']),_0x1ff07a);}__name(readNotification,'readNotification');
+
+export { getNotificationBaseId, getNotificationMenuId, getNotificationMenuTriggerId, handleNotificationOpenChange, initNotification, initNotificationMenu, onClear, readNotifications, setNotificationState };

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

@@ -0,0 +1,96 @@
+'use strict';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { use, useState, useCallback } from 'react';
+import { FdIcon, iconSizes, iconNames } from '../../../fd-component-toolbox/icon/FdIcon.js';
+import { cn } from '../../../fd-toolbox/lib/utils.js';
+import { FdSheet, FdSheetTrigger, FdSheetContent, FdSheetHeader, FdSheetTitle, FdSheetDescription } from '../../../fd-component-toolbox/sheet/FdSheet.js';
+import { FdNotificationList } from './notification-list/FdNotificationList.js';
+import { useAsyncEffect } from '../../../fd-toolbox/hooks/use-async-effect.js';
+import { getNotificationMenuId, setNotificationState, initNotification, handleNotificationOpenChange, getNotificationMenuTriggerId } from './FdNotificationMenu.funcs.js';
+import { FdButton } from '../../../fd-component-toolbox/button/FdButton.js';
+import { useAuth } from '../../providers/auth-provider/AuthProvider.js';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 /* @__PURE__ */ jsxs(FdSheet, { onOpenChange, open: isOpen, children: [
+    /* @__PURE__ */ jsx(FdSheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      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),
+        children: [
+          hasUnreadNotification && /* @__PURE__ */ jsx(
+            FdIcon,
+            {
+              name: iconNames.dotFilled,
+              size: iconSizes.large,
+              className: "absolute -right-1 -top-1",
+              color: "text-destructive"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FdIcon,
+            {
+              name: iconNames.bell,
+              className: "w-full text-fd-tertiary-50",
+              color: "color-white"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      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"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(FdSheetHeader, { className: "flex min-h-16 flex-row items-center justify-between bg-gradient-accent px-8", children: [
+            /* @__PURE__ */ jsx(FdSheetTitle, { className: "text-xl font-bold text-fd-tertiary-50", children: "Notifications" }),
+            /* @__PURE__ */ jsx(FdSheetDescription, {})
+          ] }),
+          /* @__PURE__ */ jsx(FdNotificationList, { parentContextName: notificationMenuId, notifications })
+        ]
+      }
+    )
+  ] });
+}
+__name(FdNotificationMenu, "FdNotificationMenu");
+
+export { FdNotificationMenu };

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

@@ -0,0 +1,43 @@
+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.cjs.js

@@ -0,0 +1,73 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FdIcon = require('../../../../fd-component-toolbox/icon/FdIcon.cjs.js');
+var FdNotificationList_funcs = require('./FdNotificationList.funcs.cjs.js');
+var utils = require('../../../../fd-toolbox/lib/utils.cjs.js');
+var dateTimes = require('../../../../fd-toolbox/dates/date-times.cjs.js');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function FdNotificationList({ parentContextName, notifications }) {
+  const notificationMenuListId = FdNotificationList_funcs.getNotificationMenuListId(parentContextName);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: notificationMenuListId, className: "h-full", children: notifications.length ? notifications.map((notification, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: FdNotificationList_funcs.getNotificationListItemId(notificationMenuListId, notification.id),
+      children: [
+        FdNotificationList_funcs.checkNotificationGroupDateLabel(notifications, notification, index) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-b bg-muted/100 p-2 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: FdNotificationList_funcs.getDateLabelForNotificationGroup(dateTimes.parseToUtc(notification.createdDate)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "w-full border-b bg-background p-4 transition-all hover:bg-muted/50",
+              notification.isRead && "opacity-70"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-baseline justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    id: FdNotificationList_funcs.getNotificationListMessageId(notificationMenuListId, notification.id),
+                    className: "font-semibold text-foreground",
+                    children: notification.message
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: utils.cn(
+                      "ml-2 flex min-w-24 flex-row items-center justify-end gap-1 text-xs text-foreground",
+                      !notification.isRead && "font-bold"
+                    ),
+                    children: [
+                      !notification.isRead && /* @__PURE__ */ jsxRuntime.jsx(FdIcon.FdIcon, { name: FdIcon.iconNames.dotFilled, className: "text-destructive" }),
+                      dateTimes.formatUserFrendlyRelativeTime(notification.createdDate)
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  id: FdNotificationList_funcs.getNotificationListDescriptionId(notificationMenuListId, notification.id),
+                  className: "text-sm text-muted-foreground",
+                  children: notification.description
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    notification.id
+  )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center px-16 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FdIcon.FdIcon, { name: FdIcon.iconNames.globe, className: "mb-8 size-32" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-4 text-xl font-bold", children: "You don\u2019t have any notifications" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-4 text-muted-foreground", children: "But as soon as something happens, you\u2019ll find it right here." })
+  ] }) }) });
+}
+__name(FdNotificationList, "FdNotificationList");
+
+exports.FdNotificationList = FdNotificationList;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { Notification } from "../../../resources/notification/notification.resource";
+import { WithParentContextName } from "../../../../fd-toolbox/types/with-parent-context-name";
+/**
+ * Props of {@link FdNotificationList}
+ */
+export interface FdNotificationListProps extends WithParentContextName {
+    notifications: Notification[];
+}
+/**
+ * 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 declare function FdNotificationList({ parentContextName, notifications }: FdNotificationListProps): React.JSX.Element;

package/packages/level2/fd-app-toolbox/menu/notifications-menu/notification-list/FdNotificationList.funcs.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+'use strict';
+
+var dateTimes = require('../../../../fd-toolbox/dates/date-times.cjs.js');
+var elements = require('../../../../fd-toolbox/constants/elements.cjs.js');
+
+var __defProp=Object['defineProperty'],__name=(_0xcdb798,_0x5724d5)=>__defProp(_0xcdb798,'name',{'value':_0x5724d5,'configurable':!![]});function getDateLabelForNotificationGroup(_0x1df8a8){const _0x2a14bd=dateTimes.getNowUtc(),_0x22dff2=dateTimes.getNowUtc();_0x22dff2['setDate'](_0x2a14bd['getDate']()-(0x1*0x20d1+-0x72e+-0x19a2));if(_0x1df8a8['toDateString']()===_0x2a14bd['toDateString']())return dateLabels['today'];else return _0x1df8a8['toDateString']()===_0x22dff2['toDateString']()?dateLabels['yesterday']:dateTimes.formatUtcDateOnlyForDisplay(_0x1df8a8);}__name(getDateLabelForNotificationGroup,'getDateLabelForNotificationGroup');function checkNotificationGroupDateLabel(_0x6b2bc0,_0x549c42,_0x4aefdd){if(isFirstNotification(_0x4aefdd))return !![];else {const _0x8ad2c=_0x6b2bc0[_0x4aefdd-(-0xa7c*0x2+-0x1250*-0x2+-0xfa7)];return dateTimes.parseToUtc(_0x549c42['createdDate'])['toDateString']()!==dateTimes.parseToUtc(_0x8ad2c['createdDate'])['toDateString']();}}__name(checkNotificationGroupDateLabel,'checkNotificationGroupDateLabel');function getNotificationListMessageId(_0x34a452,_0x486ac3){return _0x34a452+_0x486ac3+elements.elements['notification']['message'];}__name(getNotificationListMessageId,'getNotificationListMessageId');function getNotificationListDescriptionId(_0x1fb56f,_0x1c300f){return _0x1fb56f+_0x1c300f+elements.elements['notification']['description'];}__name(getNotificationListDescriptionId,'getNotificationListDescriptionId');function getNotificationListItemId(_0x377b15,_0x3963dc){return _0x377b15+_0x3963dc+elements.elements['notification']['item'];}__name(getNotificationListItemId,'getNotificationListItemId');function getNotificationMenuListId(_0x30bc94){return _0x30bc94+elements.elements['notification']['list'];}__name(getNotificationMenuListId,'getNotificationMenuListId');function isFirstNotification(_0x5abd58){return _0x5abd58===0xd61*-0x1+-0x25dd+0x333e;}__name(isFirstNotification,'isFirstNotification');const dateLabels={'today':'Today','yesterday':'Yesterday','justNow':'just\x20now'};
+
+exports.checkNotificationGroupDateLabel = checkNotificationGroupDateLabel;
+exports.getDateLabelForNotificationGroup = getDateLabelForNotificationGroup;
+exports.getNotificationListDescriptionId = getNotificationListDescriptionId;
+exports.getNotificationListItemId = getNotificationListItemId;
+exports.getNotificationListMessageId = getNotificationListMessageId;
+exports.getNotificationMenuListId = getNotificationMenuListId;

package/packages/level2/fd-app-toolbox/menu/notifications-menu/notification-list/FdNotificationList.funcs.d.ts

@@ -0,0 +1,7 @@
+import { Notification } from "../../../resources/notification/notification.resource";
+export declare function getDateLabelForNotificationGroup(date: Date): string;
+export declare function checkNotificationGroupDateLabel(notifications: Notification[], notification: Notification, index: number): boolean;
+export declare function getNotificationListMessageId(parentContextName: string, notificationId: string): string;
+export declare function getNotificationListDescriptionId(parentContextName: string, notificationId: string): string;
+export declare function getNotificationListItemId(parentContextName: string, notificationId: string): string;
+export declare function getNotificationMenuListId(parentContextName: string): string;

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

@@ -0,0 +1,7 @@
+'use strict';
+import { getNowUtc, formatUtcDateOnlyForDisplay, parseToUtc } from '../../../../fd-toolbox/dates/date-times.js';
+import { elements } from '../../../../fd-toolbox/constants/elements.js';
+
+var __defProp=Object['defineProperty'],__name=(_0xcdb798,_0x5724d5)=>__defProp(_0xcdb798,'name',{'value':_0x5724d5,'configurable':!![]});function getDateLabelForNotificationGroup(_0x1df8a8){const _0x2a14bd=getNowUtc(),_0x22dff2=getNowUtc();_0x22dff2['setDate'](_0x2a14bd['getDate']()-(0x1*0x20d1+-0x72e+-0x19a2));if(_0x1df8a8['toDateString']()===_0x2a14bd['toDateString']())return dateLabels['today'];else return _0x1df8a8['toDateString']()===_0x22dff2['toDateString']()?dateLabels['yesterday']:formatUtcDateOnlyForDisplay(_0x1df8a8);}__name(getDateLabelForNotificationGroup,'getDateLabelForNotificationGroup');function checkNotificationGroupDateLabel(_0x6b2bc0,_0x549c42,_0x4aefdd){if(isFirstNotification(_0x4aefdd))return !![];else {const _0x8ad2c=_0x6b2bc0[_0x4aefdd-(-0xa7c*0x2+-0x1250*-0x2+-0xfa7)];return parseToUtc(_0x549c42['createdDate'])['toDateString']()!==parseToUtc(_0x8ad2c['createdDate'])['toDateString']();}}__name(checkNotificationGroupDateLabel,'checkNotificationGroupDateLabel');function getNotificationListMessageId(_0x34a452,_0x486ac3){return _0x34a452+_0x486ac3+elements['notification']['message'];}__name(getNotificationListMessageId,'getNotificationListMessageId');function getNotificationListDescriptionId(_0x1fb56f,_0x1c300f){return _0x1fb56f+_0x1c300f+elements['notification']['description'];}__name(getNotificationListDescriptionId,'getNotificationListDescriptionId');function getNotificationListItemId(_0x377b15,_0x3963dc){return _0x377b15+_0x3963dc+elements['notification']['item'];}__name(getNotificationListItemId,'getNotificationListItemId');function getNotificationMenuListId(_0x30bc94){return _0x30bc94+elements['notification']['list'];}__name(getNotificationMenuListId,'getNotificationMenuListId');function isFirstNotification(_0x5abd58){return _0x5abd58===0xd61*-0x1+-0x25dd+0x333e;}__name(isFirstNotification,'isFirstNotification');const dateLabels={'today':'Today','yesterday':'Yesterday','justNow':'just\x20now'};
+
+export { checkNotificationGroupDateLabel, getDateLabelForNotificationGroup, getNotificationListDescriptionId, getNotificationListItemId, getNotificationListMessageId, getNotificationMenuListId };

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

@@ -0,0 +1,71 @@
+'use strict';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FdIcon, iconNames } from '../../../../fd-component-toolbox/icon/FdIcon.js';
+import { getNotificationMenuListId, checkNotificationGroupDateLabel, getDateLabelForNotificationGroup, getNotificationListMessageId, getNotificationListDescriptionId, getNotificationListItemId } from './FdNotificationList.funcs.js';
+import { cn } from '../../../../fd-toolbox/lib/utils.js';
+import { parseToUtc, formatUserFrendlyRelativeTime } from '../../../../fd-toolbox/dates/date-times.js';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function FdNotificationList({ parentContextName, notifications }) {
+  const notificationMenuListId = getNotificationMenuListId(parentContextName);
+  return /* @__PURE__ */ jsx("div", { id: notificationMenuListId, className: "h-full", children: notifications.length ? notifications.map((notification, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: getNotificationListItemId(notificationMenuListId, notification.id),
+      children: [
+        checkNotificationGroupDateLabel(notifications, notification, index) && /* @__PURE__ */ jsx("div", { className: "w-full border-b bg-muted/100 p-2 px-4", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getDateLabelForNotificationGroup(parseToUtc(notification.createdDate)) }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "w-full border-b bg-background p-4 transition-all hover:bg-muted/50",
+              notification.isRead && "opacity-70"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-baseline justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: getNotificationListMessageId(notificationMenuListId, notification.id),
+                    className: "font-semibold text-foreground",
+                    children: notification.message
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "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"
+                    ),
+                    children: [
+                      !notification.isRead && /* @__PURE__ */ jsx(FdIcon, { name: iconNames.dotFilled, className: "text-destructive" }),
+                      formatUserFrendlyRelativeTime(notification.createdDate)
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: getNotificationListDescriptionId(notificationMenuListId, notification.id),
+                  className: "text-sm text-muted-foreground",
+                  children: notification.description
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    notification.id
+  )) : /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center px-16 text-center", children: [
+    /* @__PURE__ */ jsx(FdIcon, { name: iconNames.globe, className: "mb-8 size-32" }),
+    /* @__PURE__ */ jsx("h4", { className: "mb-4 text-xl font-bold", children: "You don\u2019t have any notifications" }),
+    /* @__PURE__ */ jsx("p", { className: "m-4 text-muted-foreground", children: "But as soon as something happens, you\u2019ll find it right here." })
+  ] }) }) });
+}
+__name(FdNotificationList, "FdNotificationList");
+
+export { FdNotificationList };

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

@@ -0,0 +1,53 @@
+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/themes.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+'use strict';
+
+const themes={'theme':'theme','light':'light','dark':'dark','system':'system','lightMode':'Light\x20Mode','darkMode':'Dark\x20Mode','systemMode':'System','colorScheme':'(prefers-color-scheme:\x20dark)','lightLoginImage':'/images/login-image.jpg','darkLoginImage':'/images/login-image-dark.jpg'};
+
+exports.themes = themes;

package/packages/level2/fd-app-toolbox/menu/themes.d.ts

@@ -0,0 +1,12 @@
+export declare const themes: {
+    readonly theme: "theme";
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly system: "system";
+    readonly lightMode: "Light Mode";
+    readonly darkMode: "Dark Mode";
+    readonly systemMode: "System";
+    readonly colorScheme: "(prefers-color-scheme: dark)";
+    readonly lightLoginImage: "/images/login-image.jpg";
+    readonly darkLoginImage: "/images/login-image-dark.jpg";
+};

package/packages/level2/fd-app-toolbox/menu/themes.js

@@ -0,0 +1,4 @@
+'use strict';
+const themes={'theme':'theme','light':'light','dark':'dark','system':'system','lightMode':'Light\x20Mode','darkMode':'Dark\x20Mode','systemMode':'System','colorScheme':'(prefers-color-scheme:\x20dark)','lightLoginImage':'/images/login-image.jpg','darkLoginImage':'/images/login-image-dark.jpg'};
+
+export { themes };

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

@@ -0,0 +1,20 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var FdTopMenuGroup = require('./top-menu-group/FdTopMenuGroup.cjs.js');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function FdTopMenu({ groups }) {
+  const memoGroups = React.useMemo(
+    () => groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(FdTopMenuGroup.FdTopMenuGroup, { group }, group.groupName)),
+    [groups]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex w-52 flex-row justify-between gap-10", children: memoGroups }) });
+}
+__name(FdTopMenu, "FdTopMenu");
+
+exports.FdTopMenu = FdTopMenu;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import * as Types from "./top-menu-types";
+/**
+ * Props of {@link FdTopMenu}
+ */
+export interface FdTopMenuProps {
+    groups: Types.TopMenuGroup[];
+}
+/**
+ * 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 declare function FdTopMenu({ groups }: FdTopMenuProps): React.JSX.Element;

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

@@ -0,0 +1,18 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { FdTopMenuGroup } from './top-menu-group/FdTopMenuGroup.js';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function FdTopMenu({ groups }) {
+  const memoGroups = useMemo(
+    () => groups.map((group) => /* @__PURE__ */ jsx(FdTopMenuGroup, { group }, group.groupName)),
+    [groups]
+  );
+  return /* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsx("ul", { className: "flex w-52 flex-row justify-between gap-10", children: memoGroups }) });
+}
+__name(FdTopMenu, "FdTopMenu");
+
+export { FdTopMenu };

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

@@ -0,0 +1,28 @@
+"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>);
+}