@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/layouts/mdi-main/mdi-main.tsx

@@ -0,0 +1,241 @@
+import { BoxesIcon, FilesIcon, LayoutDashboardIcon, MessageSquareIcon } from "lucide-react";
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
+
+import { SidebarInset, SidebarProvider } from "@devxcrew/react-ui/components/sidebar";
+import { Toaster } from "@devxcrew/react-ui/components/toast";
+import { cn } from "@devxcrew/react-ui/lib/utils";
+import {
+  TopologyInspectionControl,
+  TopologyInspector,
+  TopologyMarker,
+  useInterfaceTopology,
+} from "../../features/interface-topology";
+import { ThemeProvider } from "../../theme";
+import { AgentActivityRail, AgentWorkspace } from "../agent-workspace";
+import { WorkspaceApplicationHeader } from "../../blocks/workspace/workspace-application-header";
+
+import { createDefaultMdiApps } from "./mdi-app-catalog";
+import { MdiFeatureSettings } from "./mdi-feature-settings";
+import { MdiSidebar } from "./mdi-sidebar";
+import { MdiStatusBar } from "./mdi-status-bar";
+import { MdiTopMenu } from "./mdi-top-menu";
+import { mdiTopologySections, MdiTopologyProvider } from "./mdi-topology";
+import type { MainWorkspaceProps, MdiNavigationSection, MdiUser } from "./mdi-types";
+import { useMdiFeatures } from "./use-mdi-features";
+
+const defaultNavigation: MdiNavigationSection[] = [
+  {
+    label: "Workspace",
+    items: [
+      { active: true, icon: LayoutDashboardIcon, label: "Overview" },
+      { icon: FilesIcon, label: "Documents" },
+      { icon: MessageSquareIcon, label: "Messages" },
+    ],
+  },
+];
+
+const defaultUser: MdiUser = {
+  initials: "C",
+  name: "Workspace user",
+};
+
+export function MainWorkspace({
+  agentWorkspace,
+  applicationIcon = BoxesIcon,
+  applicationLogoUrl,
+  applicationId = "platform",
+  applicationName = "Workspace",
+  applicationHeaderStart,
+  applicationHeaderEnd,
+  applicationHeaderMeta,
+  applicationHeaderBelow,
+  applicationHeaderStatus,
+  applicationHeaderTitle,
+  showApplicationIdentity = true,
+  showApplicationHeader = false,
+  showWorkspaceTitleInHeader = true,
+  apps,
+  children,
+  contentClassName,
+  defaultFeatures,
+  requiredFeatures,
+  defaultSidebarOpen = true,
+  deskRegionId,
+  embedded = false,
+  navigation = defaultNavigation,
+  notificationCount = 1,
+  notifications = [],
+  primaryAction = { icon: LayoutDashboardIcon, label: "Overview" },
+  searchPlaceholder = `Search ${applicationName}`,
+  searchValue,
+  settingsContent,
+  showMdiOverview = false,
+  showTopologyTools = true,
+  sidebarContent,
+  sidebarContentClassName,
+  sidebarFooter,
+  sidebarFooterClassName,
+  sidebarStateKey,
+  statusLabel = "Ready",
+  statusEnd,
+  topologySections = [],
+  user = defaultUser,
+  workspaceTitle = "MDI Workspace",
+  onSearchChange,
+}: MainWorkspaceProps) {
+  useEffect(() => {
+    if (!embedded) document.title = applicationName;
+  }, [applicationName, embedded]);
+
+  const [savedFeatures, setFeature] = useMdiFeatures(applicationId, defaultFeatures);
+  const features = { ...savedFeatures, ...requiredFeatures };
+  const [view, setView] = useState<"settings" | "workspace">("workspace");
+  const topologyDesks = useMemo(
+    () => [
+      ...(showMdiOverview ? [{ id: "mdi-overview", name: "MDI Overview", sections: mdiTopologySections }] : []),
+      ...(topologySections.length
+        ? [{ id: `${applicationId}-desk`, name: workspaceTitle, sections: topologySections }]
+        : []),
+    ],
+    [applicationId, showMdiOverview, topologySections, workspaceTitle],
+  );
+  const topology = useInterfaceTopology(topologyDesks);
+  const applicationApps = apps ?? createDefaultMdiApps(applicationId);
+
+  return (
+    <ThemeProvider>
+      <Toaster>
+        <MdiTopologyProvider value={topology}>
+          <SidebarProvider
+            defaultOpen={defaultSidebarOpen}
+            className={cn(
+              "min-h-0 flex-col gap-px overflow-hidden bg-background text-foreground",
+              embedded ? "h-full" : "h-svh",
+            )}
+            style={
+              {
+                "--sidebar-width": "16rem",
+                "--sidebar-left-offset":
+                  agentWorkspace && view === "workspace" && features.primaryActivityRail ? "3.5rem" : "0rem",
+              } as CSSProperties
+            }
+          >
+            {features.topMenu ? (
+              <MdiTopMenu
+                applicationIcon={applicationIcon}
+                applicationLogoUrl={applicationLogoUrl}
+                applicationName={applicationName}
+                apps={applicationApps}
+                features={features}
+                notificationCount={notificationCount}
+                notifications={notifications}
+                navigation={navigation}
+                searchPlaceholder={searchPlaceholder}
+                searchValue={searchValue}
+                user={user}
+                onSearchChange={onSearchChange}
+              />
+            ) : null}
+
+            <div
+              className={cn(
+                "relative flex min-h-0 flex-1 overflow-hidden border-t border-border",
+                deskRegionId && topology.highlightClassName(deskRegionId),
+              )}
+              {...(deskRegionId ? topology.regionProps(deskRegionId) : {})}
+            >
+              {deskRegionId ? <TopologyMarker id={deskRegionId} topology={topology} /> : null}
+              {view === "workspace" && agentWorkspace ? (
+                <AgentActivityRail
+                  rail={agentWorkspace.primaryRail}
+                  side="left"
+                  visible={features.primaryActivityRail}
+                />
+              ) : null}
+              {view === "workspace" ? (
+                <MdiSidebar
+                  navigation={navigation}
+                  onOpenFeatures={() => setView("settings")}
+                  primaryAction={primaryAction}
+                  sidebarContent={sidebarContent}
+                  sidebarContentClassName={sidebarContentClassName}
+                  sidebarFooter={sidebarFooter}
+                  sidebarFooterClassName={sidebarFooterClassName}
+                  stateKey={sidebarStateKey}
+                />
+              ) : null}
+              <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
+                <main
+                  className={cn(
+                    "workspace-scrollbar-slim relative flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-background data-[ito-highlighted=true]:ring-2 data-[ito-highlighted=true]:ring-inset data-[ito-highlighted=true]:ring-violet-700",
+                  )}
+                  {...topology.regionProps("03")}
+                >
+                  <TopologyMarker id="03" topology={topology} />
+                  {showApplicationHeader ? (
+                    <>
+                      <WorkspaceApplicationHeader
+                        applicationIcon={applicationIcon}
+                        applicationLogoUrl={applicationLogoUrl}
+                        applicationName={applicationName}
+                        end={applicationHeaderEnd}
+                        meta={applicationHeaderMeta}
+                        status={applicationHeaderStatus}
+                        showIdentity={showApplicationIdentity}
+                        showWorkspaceTitle={showWorkspaceTitleInHeader}
+                        start={applicationHeaderStart}
+                        title={applicationHeaderTitle}
+                        workspaceTitle={workspaceTitle}
+                      />
+                      {applicationHeaderBelow}
+                    </>
+                  ) : null}
+                  <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+                    <div className="min-h-0 flex-1">
+                      {view === "settings" ? (
+                        (settingsContent?.({
+                          features,
+                          onBack: () => setView("workspace"),
+                          onFeatureChange: setFeature,
+                        }) ?? (
+                          <MdiFeatureSettings
+                            showAgentWorkspaceOptions={Boolean(agentWorkspace)}
+                            features={features}
+                            onBack={() => setView("workspace")}
+                            onFeatureChange={setFeature}
+                          />
+                        ))
+                      ) : agentWorkspace ? (
+                        <AgentWorkspace
+                          {...agentWorkspace}
+                          showPrimaryRail={false}
+                          showSecondaryRail={features.secondaryUtilityRail}
+                        >
+                          {children}
+                        </AgentWorkspace>
+                      ) : (
+                        <div className={cn("relative size-full min-h-0 min-w-0 overflow-hidden", contentClassName)}>{children}</div>
+                      )}
+                    </div>
+                  </div>
+                </main>
+                {features.statusBar ? (
+                  <MdiStatusBar statusEnd={statusEnd} statusLabel={statusLabel} workspaceTitle={workspaceTitle} />
+                ) : null}
+              </SidebarInset>
+            </div>
+
+            {showTopologyTools && features.ito ? (
+              <div className="pointer-events-none fixed inset-0 z-[60] bg-transparent">
+                <TopologyInspector topology={topology} />
+                <TopologyInspectionControl topology={topology} />
+              </div>
+            ) : null}
+          </SidebarProvider>
+        </MdiTopologyProvider>
+      </Toaster>
+    </ThemeProvider>
+  );
+}
+
+export type { MainWorkspaceProps };

package/src/layouts/mdi-main/mdi-notifications-menu.tsx

@@ -0,0 +1,197 @@
+import { BellIcon, XIcon } from 'lucide-react'
+import { motion, useReducedMotion } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+
+import { Button } from '@devxcrew/react-ui/components/button'
+import { toast } from '@devxcrew/react-ui/components/toast'
+import { Popover, PopoverContent, PopoverTrigger } from '@devxcrew/react-ui/components/popover'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+import { TopologyMarker } from '../../features/interface-topology'
+
+import { useMdiTopology } from './mdi-topology'
+import type { MdiNotification } from './mdi-types'
+
+export function MdiNotificationsMenu({
+  count,
+  notifications,
+}: {
+  count: number
+  notifications: readonly MdiNotification[]
+}) {
+  const [open, setOpen] = useState(false)
+  const knownNotificationIds = useRef<Set<string> | null>(null)
+  const reduceMotion = useReducedMotion()
+  const topology = useMdiTopology()
+  const unreadCount =
+    notifications.length > 0
+      ? notifications.filter((notification) => !notification.read).length
+      : count
+
+  useEffect(() => {
+    const unread = notifications.filter((notification) => !notification.read)
+    if (!knownNotificationIds.current) {
+      knownNotificationIds.current = new Set(notifications.map((notification) => notification.id))
+      return
+    }
+    const known = knownNotificationIds.current
+    for (const notification of newUnreadNotifications(known, unread)) {
+      toast.add({
+        description: notification.description,
+        id: `notification:${notification.id}`,
+        priority: notification.severity === 'error' ? 'high' : 'low',
+        title: notification.title,
+        type: notification.severity ?? 'info',
+      })
+    }
+    knownNotificationIds.current = new Set(notifications.map((notification) => notification.id))
+  }, [notifications])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}
+            className={cn(
+              'relative size-10 p-0 text-foreground',
+              topology.highlightClassName('01.4.1'),
+            )}
+            size="icon"
+            variant="ghost"
+            {...topology.regionProps('01.4.1')}
+          />
+        }
+      >
+        <BellIcon className="size-4" />
+        {unreadCount > 0 ? <UnreadIndicator reduceMotion={Boolean(reduceMotion)} /> : null}
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className={cn(
+          'w-88 gap-0 overflow-hidden rounded-3xl p-0',
+          topology.highlightClassName('01.4.2'),
+        )}
+        sideOffset={9}
+        {...topology.regionProps('01.4.2')}
+      >
+        <TopologyMarker id="01.4.2" topology={topology} />
+        <header className="flex items-center gap-3 border-b px-5 py-4">
+          <div className="min-w-0 flex-1">
+            <h2 className="text-base font-semibold">Notifications</h2>
+            <p className="text-sm text-muted-foreground">
+              {unreadCount > 0 ? `${unreadCount} unread` : 'You are all caught up'}
+            </p>
+          </div>
+          <Button
+            aria-label="Close notifications"
+            onClick={() => setOpen(false)}
+            size="icon-sm"
+            variant="ghost"
+          >
+            <XIcon />
+          </Button>
+        </header>
+        <div
+          className={cn('max-h-80 overflow-y-auto p-2', topology.highlightClassName('01.4.3'))}
+          {...topology.regionProps('01.4.3')}
+        >
+          {notifications.length > 0 ? (
+            notifications.map((notification) => (
+              <NotificationRow
+                key={notification.id}
+                notification={notification}
+                onClose={() => setOpen(false)}
+              />
+            ))
+          ) : (
+            <div className="px-3 py-8 text-center">
+              <BellIcon className="mx-auto size-5 text-muted-foreground" />
+              <p className="pt-3 text-sm font-medium">
+                {unreadCount > 0 ? 'A workspace update is ready' : 'No new notifications'}
+              </p>
+              <p className="pt-1 text-sm text-muted-foreground">
+                {unreadCount > 0
+                  ? 'Open the active workspace to review it.'
+                  : 'New activity will appear here.'}
+              </p>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function newUnreadNotifications(
+  knownIds: ReadonlySet<string>,
+  notifications: readonly MdiNotification[],
+): MdiNotification[] {
+  return notifications.filter((notification) => !knownIds.has(notification.id))
+}
+
+function UnreadIndicator({ reduceMotion }: { reduceMotion: boolean }) {
+  return (
+    <span className="absolute top-1.5 right-1.5 grid size-2 place-items-center" aria-hidden="true">
+      {!reduceMotion ? (
+        <>
+          <motion.span
+            animate={{ opacity: [0, 0.45, 0.16, 0], scale: [0.75, 1, 1.9, 2.5] }}
+            className="absolute size-2 rounded-full border border-red-500"
+            transition={{
+              duration: 2.4,
+              ease: [0.16, 1, 0.3, 1],
+              repeat: Infinity,
+              repeatDelay: 0.15,
+              times: [0, 0.14, 0.72, 1],
+            }}
+          />
+          <motion.span
+            animate={{ opacity: [1, 0.78, 1], scale: [1, 1.18, 1] }}
+            className="relative size-2 rounded-full border border-background bg-red-500"
+            transition={{ duration: 1.8, ease: 'easeInOut', repeat: Infinity }}
+          />
+        </>
+      ) : (
+        <span className="relative size-2 rounded-full border border-background bg-red-500" />
+      )}
+    </span>
+  )
+}
+
+function NotificationRow({
+  notification,
+  onClose,
+}: {
+  notification: MdiNotification
+  onClose: () => void
+}) {
+  return (
+    <button
+      className="flex w-full items-start gap-3 rounded-2xl px-3 py-3 text-left hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      onClick={() => {
+        notification.onSelect?.()
+        notification.onRead?.()
+        onClose()
+      }}
+      type="button"
+    >
+      <span
+        className={cn(
+          'mt-1.5 size-2 shrink-0 rounded-full',
+          notification.read ? 'bg-muted-foreground/30' : 'bg-red-500',
+        )}
+      />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium">{notification.title}</span>
+        {notification.description ? (
+          <span className="block pt-1 text-sm leading-5 text-muted-foreground">
+            {notification.description}
+          </span>
+        ) : null}
+      </span>
+      {notification.time ? (
+        <span className="shrink-0 text-xs text-muted-foreground">{notification.time}</span>
+      ) : null}
+    </button>
+  )
+}

package/src/layouts/mdi-main/mdi-profile-menu.tsx

@@ -0,0 +1,79 @@
+import { LogOutIcon, UserRoundIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@devxcrew/react-ui/components/avatar";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@devxcrew/react-ui/components/popover";
+import { cn } from "@devxcrew/react-ui/lib/utils";
+import { TopologyMarker } from "../../features/interface-topology";
+
+import { mdiTopMenuButtonClassName } from "./mdi-top-menu-control";
+import { useMdiTopology } from "./mdi-topology";
+import type { MdiUser } from "./mdi-types";
+
+export function MdiProfileMenu({ user }: { user: MdiUser }) {
+  const [open, setOpen] = useState(false);
+  const topology = useMdiTopology();
+  const fallback = user.name.trim().charAt(0).toUpperCase() || user.initials.charAt(0);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            size="icon"
+            className={cn(mdiTopMenuButtonClassName, "p-0.5", topology.highlightClassName("01.6.1"))}
+            aria-label="Open profile"
+            {...topology.regionProps("01.6.1")}
+          />
+        }
+      >
+        <Avatar className="size-full">
+          {user.avatarUrl ? <AvatarImage alt={user.name} src={user.avatarUrl} /> : null}
+          <AvatarFallback className="bg-foreground/10 text-sm font-medium text-foreground">{fallback}</AvatarFallback>
+        </Avatar>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        sideOffset={9}
+        className={cn("w-88 gap-4 rounded-3xl p-3", topology.highlightClassName("01.6.2"))}
+        {...topology.regionProps("01.6.2")}
+      >
+        <TopologyMarker id="01.6.2" topology={topology} />
+        <div className="flex items-center justify-end">
+          <span className="mr-auto truncate pl-3 text-sm text-muted-foreground">{user.email ?? "Local account"}</span>
+          <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close">
+            <XIcon />
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-3 px-3">
+          <div className="grid w-full grid-cols-[1fr] items-center gap-3">
+            <Avatar
+              className={cn(
+                "size-20 justify-self-center border-4 border-background ring-2 ring-border",
+                topology.highlightClassName("01.6.3"),
+              )}
+              {...topology.regionProps("01.6.3")}
+            >
+              {user.avatarUrl ? <AvatarImage alt={user.name} src={user.avatarUrl} /> : null}
+              <AvatarFallback className="bg-foreground/10 text-2xl text-foreground">{fallback}</AvatarFallback>
+            </Avatar>
+            <span aria-hidden="true" />
+          </div>
+          <h2 className="text-xl font-semibold">Hi, {user.name}!</h2>
+          <Button variant="outline" className="rounded-full px-5" onClick={user.onManageProfile}>
+            <UserRoundIcon />
+            Manage your profile
+          </Button>
+        </div>
+        <div className={cn("grid gap-2", topology.highlightClassName("01.6.4"))} {...topology.regionProps("01.6.4")}>
+          <Button variant="outline" className="h-12 justify-start rounded-xl px-4" onClick={user.onSignOut}>
+            <LogOutIcon />
+            Log out
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}