@greatapps/common 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layouts/NotificationsPopover.mjs +78 -0
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -0
- package/dist/components/layouts/ProfilePopover.mjs +7 -6
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/UsersSelectorPopover.mjs +142 -0
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -0
- package/dist/index.mjs +138 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/NotificationsPopover.tsx +111 -0
- package/src/components/layouts/ProfilePopover.tsx +9 -6
- package/src/components/layouts/UsersSelectorPopover.tsx +158 -0
- package/src/index.ts +45 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { Bell } from "lucide-react";
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
7
|
+
import { Button } from "../ui/buttons/Button";
|
|
8
|
+
import { NotificationItem } from "./NotificationItem";
|
|
9
|
+
import { cn } from "../../infra/utils/clsx";
|
|
10
|
+
function NotificationsPopover({
|
|
11
|
+
notifications = [],
|
|
12
|
+
onViewAll,
|
|
13
|
+
side,
|
|
14
|
+
align,
|
|
15
|
+
contentClassName,
|
|
16
|
+
badgeClassName = "bg-pages-400"
|
|
17
|
+
}) {
|
|
18
|
+
const [open, setOpen] = useState(false);
|
|
19
|
+
const [hasNewNotifications, setHasNewNotifications] = useState(true);
|
|
20
|
+
const handleOpenChange = (isOpen) => {
|
|
21
|
+
setOpen(isOpen);
|
|
22
|
+
if (isOpen) setHasNewNotifications(false);
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
25
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
|
|
26
|
+
"div",
|
|
27
|
+
{
|
|
28
|
+
className: `relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`,
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsx(Bell, { size: 20, className: "text-gray-500" }),
|
|
31
|
+
hasNewNotifications && /* @__PURE__ */ jsx("span", { className: cn("absolute top-2 right-2 size-2.5 rounded-full", badgeClassName) })
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
) }),
|
|
35
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
36
|
+
PopoverPrimitive.Content,
|
|
37
|
+
{
|
|
38
|
+
className: cn(
|
|
39
|
+
"absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
40
|
+
contentClassName
|
|
41
|
+
),
|
|
42
|
+
side,
|
|
43
|
+
align,
|
|
44
|
+
sideOffset: 8,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 px-4", children: "\xDAltimas notifica\xE7\xF5es" }),
|
|
47
|
+
notifications.length > 0 ? notifications.map((notification, index) => /* @__PURE__ */ jsx(
|
|
48
|
+
NotificationItem,
|
|
49
|
+
{
|
|
50
|
+
icon: notification.icon,
|
|
51
|
+
iconBgColor: notification.iconBgColor,
|
|
52
|
+
title: notification.title,
|
|
53
|
+
time: notification.time,
|
|
54
|
+
showBorder: index < notifications.length - 1
|
|
55
|
+
},
|
|
56
|
+
index
|
|
57
|
+
)) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]", children: [
|
|
58
|
+
/* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md p-2.5", children: /* @__PURE__ */ jsx(Bell, { size: 20, color: "var(--color-gray-950)" }) }),
|
|
59
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: "Sem notifica\xE7\xF5es por enquanto" })
|
|
60
|
+
] }),
|
|
61
|
+
onViewAll && /* @__PURE__ */ jsx(
|
|
62
|
+
Button,
|
|
63
|
+
{
|
|
64
|
+
variant: "secondary",
|
|
65
|
+
className: "h-8! mt-2 mb-4 mx-4 paragraph-small-semibold",
|
|
66
|
+
onClick: onViewAll,
|
|
67
|
+
children: "Todas as notifica\xE7\xF5es"
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
) })
|
|
73
|
+
] });
|
|
74
|
+
}
|
|
75
|
+
export {
|
|
76
|
+
NotificationsPopover
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=NotificationsPopover.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { Bell } from 'lucide-react';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Popover } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { NotificationItem } from './NotificationItem';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface NotificationData {\r\n icon: ReactNode;\r\n iconBgColor: string;\r\n title: string;\r\n time: string;\r\n}\r\n\r\nexport interface NotificationsPopoverProps {\r\n notifications?: NotificationData[];\r\n onViewAll?: () => void;\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n notifications = [],\r\n onViewAll,\r\n side,\r\n align,\r\n contentClassName,\r\n badgeClassName = 'bg-pages-400',\r\n}: NotificationsPopoverProps) {\r\n const [open, setOpen] = useState(false);\r\n const [hasNewNotifications, setHasNewNotifications] = useState(true);\r\n\r\n const handleOpenChange = (isOpen: boolean) => {\r\n setOpen(isOpen);\r\n if (isOpen) setHasNewNotifications(false);\r\n };\r\n\r\n return (\r\n <Popover open={open} onOpenChange={handleOpenChange}>\r\n <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n <div\r\n className={`relative rounded-full p-2.5 ${open ? 'bg-gray-100' : 'hover:bg-gray-100'}`}\r\n >\r\n <Bell size={20} className=\"text-gray-500\" />\r\n {hasNewNotifications && (\r\n <span className={cn('absolute top-2 right-2 size-2.5 rounded-full', badgeClassName)} />\r\n )}\r\n </div>\r\n </PopoverPrimitive.Trigger>\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n className={cn(\r\n 'absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <span className=\"paragraph-small-semibold text-gray-950 px-4\">Últimas notificações</span>\r\n\r\n {notifications.length > 0 ? (\r\n notifications.map((notification, index) => (\r\n <NotificationItem\r\n key={index}\r\n icon={notification.icon}\r\n iconBgColor={notification.iconBgColor}\r\n title={notification.title}\r\n time={notification.time}\r\n showBorder={index < notifications.length - 1}\r\n />\r\n ))\r\n ) : (\r\n <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n <Bell size={20} color=\"var(--color-gray-950)\" />\r\n </div>\r\n <span className=\"paragraph-small-medium text-gray-950\">Sem notificações por enquanto</span>\r\n </div>\r\n )}\r\n\r\n {onViewAll && (\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n onClick={onViewAll}\r\n >\r\n Todas as notificações\r\n </Button>\r\n )}\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Portal>\r\n </Popover>\r\n );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAoB,gBAAgB;AACpC,SAAS,YAAY;AACrB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAkBnB,SAAS,qBAAqB;AAAA,EAC5B,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,IAAI;AAEnE,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,OAAQ,wBAAuB,KAAK;AAAA,EAC1C;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,uBACC,oBAAC,UAAK,WAAW,GAAG,gDAAgD,cAAc,GAAG;AAAA;AAAA;AAAA,IAEzF,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACD;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAAoB;AAAA,UAEjF,cAAc,SAAS,IACtB,cAAc,IAAI,CAAC,cAAc,UAC/B;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,OAAO,aAAa;AAAA,cACpB,MAAM,aAAa;AAAA,cACnB,YAAY,QAAQ,cAAc,SAAS;AAAA;AAAA,YALtC;AAAA,UAMP,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAA6B;AAAA,aACtF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACA;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { useRouter } from "next/navigation";
|
|
5
|
-
import
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
6
7
|
import { Button } from "../ui/buttons/Button";
|
|
7
8
|
import { Progress } from "../ui/feedback/Progress";
|
|
8
9
|
import { Separator } from "../ui/data-display/Separator";
|
|
@@ -13,7 +14,7 @@ import { cn } from "../../infra/utils/clsx";
|
|
|
13
14
|
function ProfilePopover({
|
|
14
15
|
side = "top",
|
|
15
16
|
align = "start",
|
|
16
|
-
contentClassName,
|
|
17
|
+
contentClassName = "absolute bottom-2 left-[26px]",
|
|
17
18
|
onEditProfile,
|
|
18
19
|
credits,
|
|
19
20
|
onCreditsClick,
|
|
@@ -40,7 +41,7 @@ function ProfilePopover({
|
|
|
40
41
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
41
42
|
isLoggingOut && logoutOverlay,
|
|
42
43
|
/* @__PURE__ */ jsxs(Popover, { children: [
|
|
43
|
-
/* @__PURE__ */ jsx(
|
|
44
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: user && /* @__PURE__ */ jsx(
|
|
44
45
|
UserAvatar,
|
|
45
46
|
{
|
|
46
47
|
photo: user.photo,
|
|
@@ -50,8 +51,8 @@ function ProfilePopover({
|
|
|
50
51
|
},
|
|
51
52
|
user.id
|
|
52
53
|
) }),
|
|
53
|
-
/* @__PURE__ */ jsxs(
|
|
54
|
-
|
|
54
|
+
/* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
55
|
+
PopoverPrimitive.Content,
|
|
55
56
|
{
|
|
56
57
|
className: cn(
|
|
57
58
|
"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
|
|
@@ -131,7 +132,7 @@ function ProfilePopover({
|
|
|
131
132
|
] })
|
|
132
133
|
]
|
|
133
134
|
}
|
|
134
|
-
)
|
|
135
|
+
) })
|
|
135
136
|
] })
|
|
136
137
|
] });
|
|
137
138
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { useState } from 'react';\r\nimport { useRouter } from 'next/navigation';\r\nimport { Popover
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { useState } from 'react';\r\nimport { useRouter } from 'next/navigation';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Popover } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Progress } from '../ui/feedback/Progress';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { NavBarItem } from './NavBarItem';\r\nimport { UserAvatar } from '../ui/data-display/UserAvatar';\r\nimport { useAuth } from '../../providers/auth.provider';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface ProfileMenuItem {\r\n icon?: React.ReactNode;\r\n label: string;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface ProfilePopoverProps {\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n onEditProfile?: () => void;\r\n credits?: { used: number; total: number };\r\n onCreditsClick?: () => void;\r\n menuItems?: ProfileMenuItem[];\r\n logoutRedirect?: string;\r\n storageUrl?: string;\r\n logoutOverlay?: React.ReactNode;\r\n}\r\n\r\nfunction ProfilePopover({\r\n side = 'top',\r\n align = 'start',\r\n contentClassName = 'absolute bottom-2 left-[26px]',\r\n onEditProfile,\r\n credits,\r\n onCreditsClick,\r\n menuItems = [],\r\n logoutRedirect = '/login',\r\n storageUrl,\r\n logoutOverlay,\r\n}: ProfilePopoverProps) {\r\n const router = useRouter();\r\n const { user, logout } = useAuth();\r\n const [isLoggingOut, setIsLoggingOut] = useState(false);\r\n\r\n const handleLogout = async () => {\r\n try {\r\n setIsLoggingOut(true);\r\n await logout();\r\n router.push(logoutRedirect);\r\n } catch (error) {\r\n console.error('Erro ao fazer logout:', error);\r\n } finally {\r\n setIsLoggingOut(false);\r\n }\r\n };\r\n\r\n const creditsPercentage =\r\n credits && credits.total > 0\r\n ? (credits.used / credits.total) * 100\r\n : 0;\r\n\r\n return (\r\n <>\r\n {isLoggingOut && logoutOverlay}\r\n <Popover>\r\n <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n {user && (\r\n <UserAvatar\r\n key={user.id}\r\n photo={user.photo}\r\n name={user.name}\r\n size={40}\r\n storageUrl={storageUrl}\r\n />\r\n )}\r\n </PopoverPrimitive.Trigger>\r\n\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n className={cn(\r\n 'w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <div className=\"grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full\">\r\n {user && (\r\n <UserAvatar\r\n key={user.id}\r\n photo={user.photo}\r\n name={user.name}\r\n size={32}\r\n storageUrl={storageUrl}\r\n />\r\n )}\r\n\r\n <div className=\"flex flex-col gap-0.5 min-w-0\">\r\n <span className=\"paragraph-small-semibold text-gray-950 truncate\">\r\n {user?.name || ''}\r\n </span>\r\n <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\r\n {user?.email || ''}\r\n </span>\r\n </div>\r\n\r\n {onEditProfile && (\r\n <Button\r\n variant=\"secondary\"\r\n className=\"paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit\"\r\n onClick={onEditProfile}\r\n >\r\n Editar Perfil\r\n </Button>\r\n )}\r\n </div>\r\n\r\n <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\r\n {credits && (\r\n <div\r\n className={cn(\r\n 'flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors',\r\n onCreditsClick && 'cursor-pointer hover:bg-gray-900'\r\n )}\r\n onClick={onCreditsClick}\r\n >\r\n <div className=\"flex items-center justify-between gap-2\">\r\n <span className=\"paragraph-xsmall-semibold text-white truncate\">\r\n Créditos usados\r\n </span>\r\n <span className=\"paragraph-xsmall-medium text-white/50\">\r\n {credits.used.toLocaleString('pt-BR')}/\r\n {credits.total.toLocaleString('pt-BR')}\r\n </span>\r\n </div>\r\n <Progress\r\n className=\"bg-white/10\"\r\n indicatorColor=\"bg-white\"\r\n value={creditsPercentage}\r\n />\r\n </div>\r\n )}\r\n\r\n <div className=\"flex flex-col gap-2\">\r\n {menuItems.length > 0 && (\r\n <div className=\"flex flex-col\">\r\n {menuItems.map((item, index) => (\r\n <NavBarItem\r\n key={index}\r\n icon={item.icon}\r\n label={item.label}\r\n onClick={item.onClick}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n <Separator />\r\n <NavBarItem label=\"Sair\" onClick={handleLogout} />\r\n </div>\r\n </div>\r\n </PopoverPrimitive.Content>\r\n </PopoverPrimitive.Portal>\r\n </Popover>\r\n </>\r\n );\r\n}\r\n\r\nexport { ProfilePopover };\r\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { Plus, Settings, User } from "lucide-react";
|
|
5
|
+
import Image from "next/image";
|
|
6
|
+
import { useRouter } from "next/navigation";
|
|
7
|
+
import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
|
|
8
|
+
import { Button } from "../ui/buttons/Button";
|
|
9
|
+
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../ui/overlay/Command";
|
|
10
|
+
import { Checkbox } from "../ui/form/Checkbox";
|
|
11
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
12
|
+
import { cn } from "../../infra/utils/clsx";
|
|
13
|
+
function UsersSelectorPopover({
|
|
14
|
+
users: externalUsers,
|
|
15
|
+
onToggleUser,
|
|
16
|
+
addRoute = "/my-teams?createNew=true",
|
|
17
|
+
manageRoute = "/my-teams",
|
|
18
|
+
userCount = 5,
|
|
19
|
+
side,
|
|
20
|
+
align,
|
|
21
|
+
contentClassName
|
|
22
|
+
}) {
|
|
23
|
+
const route = useRouter();
|
|
24
|
+
const [open, setOpen] = useState(false);
|
|
25
|
+
const [internalUsers, setInternalUsers] = useState(externalUsers ?? []);
|
|
26
|
+
const [hoveredId, setHoveredId] = useState(null);
|
|
27
|
+
const users = externalUsers ?? internalUsers;
|
|
28
|
+
const toggleUser = (id) => {
|
|
29
|
+
if (onToggleUser) {
|
|
30
|
+
onToggleUser(id);
|
|
31
|
+
} else {
|
|
32
|
+
setInternalUsers(
|
|
33
|
+
(prev) => prev.map((u) => u.id === id ? { ...u, checked: !u.checked } : u)
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
38
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950", children: [
|
|
39
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: userCount }),
|
|
40
|
+
/* @__PURE__ */ jsx(User, { size: 16 })
|
|
41
|
+
] }) }),
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
PopoverContent,
|
|
44
|
+
{
|
|
45
|
+
className: cn(
|
|
46
|
+
"absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
47
|
+
contentClassName
|
|
48
|
+
),
|
|
49
|
+
side,
|
|
50
|
+
align,
|
|
51
|
+
sideOffset: 8,
|
|
52
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
|
|
53
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
54
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Usu\xE1rios" }),
|
|
55
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
56
|
+
/* @__PURE__ */ jsxs(
|
|
57
|
+
Button,
|
|
58
|
+
{
|
|
59
|
+
variant: "secondary",
|
|
60
|
+
className: "h-8 paragraph-small-semibold text-gray-950",
|
|
61
|
+
onClick: () => route.push(addRoute),
|
|
62
|
+
children: [
|
|
63
|
+
/* @__PURE__ */ jsx(Plus, { size: 16 }),
|
|
64
|
+
"Adicionar"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
69
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
70
|
+
Button,
|
|
71
|
+
{
|
|
72
|
+
variant: "secondary",
|
|
73
|
+
className: "p-0 size-8",
|
|
74
|
+
onClick: () => route.push(manageRoute),
|
|
75
|
+
children: /* @__PURE__ */ jsx(Settings, { size: 18 })
|
|
76
|
+
}
|
|
77
|
+
) }),
|
|
78
|
+
/* @__PURE__ */ jsx(TooltipContent, { children: "Visualizar todos usu\xE1rios" })
|
|
79
|
+
] })
|
|
80
|
+
] })
|
|
81
|
+
] }),
|
|
82
|
+
/* @__PURE__ */ jsxs(Command, { className: "gap-2", value: "", children: [
|
|
83
|
+
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
|
|
84
|
+
/* @__PURE__ */ jsxs(CommandList, { className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]", children: [
|
|
85
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
|
|
86
|
+
users.map((user) => /* @__PURE__ */ jsx(
|
|
87
|
+
CommandItem,
|
|
88
|
+
{
|
|
89
|
+
autoFocus: false,
|
|
90
|
+
onPointerEnter: () => setHoveredId(user.id),
|
|
91
|
+
onPointerLeave: () => setHoveredId(null),
|
|
92
|
+
onFocus: () => setHoveredId(user.id),
|
|
93
|
+
onBlur: () => setHoveredId(null),
|
|
94
|
+
onSelect: () => toggleUser(user.id),
|
|
95
|
+
className: "cursor-pointer",
|
|
96
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
98
|
+
/* @__PURE__ */ jsx(
|
|
99
|
+
Image,
|
|
100
|
+
{
|
|
101
|
+
alt: "Avatar",
|
|
102
|
+
src: user.avatar,
|
|
103
|
+
width: 32,
|
|
104
|
+
height: 32,
|
|
105
|
+
className: "rounded-full"
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
user.name
|
|
109
|
+
] }),
|
|
110
|
+
/* @__PURE__ */ jsxs(Tooltip, { open: hoveredId === user.id, children: [
|
|
111
|
+
/* @__PURE__ */ jsx(
|
|
112
|
+
TooltipTrigger,
|
|
113
|
+
{
|
|
114
|
+
onClick: (e) => e.stopPropagation(),
|
|
115
|
+
onPointerDown: (e) => e.stopPropagation(),
|
|
116
|
+
children: /* @__PURE__ */ jsx(
|
|
117
|
+
Checkbox,
|
|
118
|
+
{
|
|
119
|
+
checked: user.checked,
|
|
120
|
+
onCheckedChange: () => toggleUser(user.id),
|
|
121
|
+
className: hoveredId === user.id ? "border-gray-950" : ""
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
/* @__PURE__ */ jsx(TooltipContent, { children: user.checked ? "Remover do projeto" : "Adicionar ao projeto" })
|
|
127
|
+
] })
|
|
128
|
+
] })
|
|
129
|
+
},
|
|
130
|
+
user.id
|
|
131
|
+
))
|
|
132
|
+
] })
|
|
133
|
+
] })
|
|
134
|
+
] })
|
|
135
|
+
}
|
|
136
|
+
)
|
|
137
|
+
] });
|
|
138
|
+
}
|
|
139
|
+
export {
|
|
140
|
+
UsersSelectorPopover
|
|
141
|
+
};
|
|
142
|
+
//# sourceMappingURL=UsersSelectorPopover.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { useState } from 'react';\r\nimport { Plus, Settings, User } from 'lucide-react';\r\nimport Image from 'next/image';\r\nimport { useRouter } from 'next/navigation';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';\r\nimport { Checkbox } from '../ui/form/Checkbox';\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface UserSelectorItem {\r\n id: number;\r\n name: string;\r\n avatar: string;\r\n checked: boolean;\r\n}\r\n\r\nexport interface UsersSelectorPopoverProps {\r\n users?: UserSelectorItem[];\r\n onToggleUser?: (id: number) => void;\r\n addRoute?: string;\r\n manageRoute?: string;\r\n userCount?: number;\r\n side?: 'top' | 'bottom' | 'left' | 'right';\r\n align?: 'start' | 'center' | 'end';\r\n contentClassName?: string;\r\n}\r\n\r\nfunction UsersSelectorPopover({\r\n users: externalUsers,\r\n onToggleUser,\r\n addRoute = '/my-teams?createNew=true',\r\n manageRoute = '/my-teams',\r\n userCount = 5,\r\n side,\r\n align,\r\n contentClassName,\r\n}: UsersSelectorPopoverProps) {\r\n const route = useRouter();\r\n const [open, setOpen] = useState(false);\r\n const [internalUsers, setInternalUsers] = useState<UserSelectorItem[]>(externalUsers ?? []);\r\n const [hoveredId, setHoveredId] = useState<number | null>(null);\r\n\r\n const users = externalUsers ?? internalUsers;\r\n\r\n const toggleUser = (id: number) => {\r\n if (onToggleUser) {\r\n onToggleUser(id);\r\n } else {\r\n setInternalUsers((prev) =>\r\n prev.map((u) => (u.id === id ? { ...u, checked: !u.checked } : u))\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger className=\"cursor-pointer\">\r\n <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\r\n <span className=\"paragraph-small-semibold\">{userCount}</span>\r\n <User size={16} />\r\n </div>\r\n </PopoverTrigger>\r\n\r\n <PopoverContent\r\n className={cn(\r\n 'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',\r\n contentClassName\r\n )}\r\n side={side}\r\n align={align}\r\n sideOffset={8}\r\n >\r\n <div className=\"flex flex-col p-3 gap-2\">\r\n <div className=\"flex items-center justify-between\">\r\n <span className=\"paragraph-small-semibold\">Usuários</span>\r\n <div className=\"flex items-center gap-1.5\">\r\n <Button\r\n variant=\"secondary\"\r\n className=\"h-8 paragraph-small-semibold text-gray-950\"\r\n onClick={() => route.push(addRoute)}\r\n >\r\n <Plus size={16} />\r\n Adicionar\r\n </Button>\r\n\r\n <Tooltip>\r\n <TooltipTrigger asChild>\r\n <Button\r\n variant=\"secondary\"\r\n className=\"p-0 size-8\"\r\n onClick={() => route.push(manageRoute)}\r\n >\r\n <Settings size={18} />\r\n </Button>\r\n </TooltipTrigger>\r\n <TooltipContent>Visualizar todos usuários</TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </div>\r\n\r\n <Command className=\"gap-2\" value=\"\">\r\n <CommandInput placeholder=\"Busque aqui\" />\r\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n <CommandEmpty>No results found.</CommandEmpty>\r\n {users.map((user) => (\r\n <CommandItem\r\n key={user.id}\r\n autoFocus={false}\r\n onPointerEnter={() => setHoveredId(user.id)}\r\n onPointerLeave={() => setHoveredId(null)}\r\n onFocus={() => setHoveredId(user.id)}\r\n onBlur={() => setHoveredId(null)}\r\n onSelect={() => toggleUser(user.id)}\r\n className=\"cursor-pointer\"\r\n >\r\n <div className=\"flex items-center justify-between w-full\">\r\n <div className=\"flex items-center gap-2\">\r\n <Image\r\n alt=\"Avatar\"\r\n src={user.avatar}\r\n width={32}\r\n height={32}\r\n className=\"rounded-full\"\r\n />\r\n {user.name}\r\n </div>\r\n\r\n <Tooltip open={hoveredId === user.id}>\r\n <TooltipTrigger\r\n onClick={(e) => e.stopPropagation()}\r\n onPointerDown={(e) => e.stopPropagation()}\r\n >\r\n <Checkbox\r\n checked={user.checked}\r\n onCheckedChange={() => toggleUser(user.id)}\r\n className={hoveredId === user.id ? 'border-gray-950' : ''}\r\n />\r\n </TooltipTrigger>\r\n <TooltipContent>\r\n {user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}\r\n </TooltipContent>\r\n </Tooltip>\r\n </div>\r\n </CommandItem>\r\n ))}\r\n </CommandList>\r\n </Command>\r\n </div>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n}\r\n\r\nexport { UsersSelectorPopover };\r\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -17,11 +17,89 @@ import { NavBar } from "./components/layouts/NavBar";
|
|
|
17
17
|
import { SideBarNavigation } from "./components/layouts/SideBarNavigation";
|
|
18
18
|
import { MdSideBarNavigation } from "./components/layouts/MdSideBarNavigation";
|
|
19
19
|
import { NotificationItem } from "./components/layouts/NotificationItem";
|
|
20
|
+
import { NotificationsPopover } from "./components/layouts/NotificationsPopover";
|
|
21
|
+
import { UsersSelectorPopover } from "./components/layouts/UsersSelectorPopover";
|
|
20
22
|
import { ProfilePopover } from "./components/layouts/ProfilePopover";
|
|
21
23
|
import { NavBarItem } from "./components/layouts/NavBarItem";
|
|
24
|
+
import { Button, buttonVariants } from "./components/ui/buttons/Button";
|
|
25
|
+
import { CopyButton } from "./components/ui/buttons/CopyButton";
|
|
26
|
+
import { default as default2 } from "./components/ui/buttons/CancelButton";
|
|
27
|
+
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./components/ui/data-display/Accordion";
|
|
28
|
+
import { Badge, badgeVariants } from "./components/ui/data-display/Badge";
|
|
29
|
+
import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "./components/ui/data-display/Card";
|
|
30
|
+
import { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from "./components/ui/data-display/Pagination";
|
|
31
|
+
import { ScrollArea, ScrollBar } from "./components/ui/data-display/ScrollArea";
|
|
32
|
+
import { Separator } from "./components/ui/data-display/Separator";
|
|
33
|
+
import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./components/ui/data-display/Table";
|
|
34
|
+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/ui/data-display/Tabs";
|
|
22
35
|
import { UserAvatar } from "./components/ui/data-display/UserAvatar";
|
|
36
|
+
import { default as default3 } from "./components/ui/feedback/CircularProgress";
|
|
37
|
+
import { default as default4 } from "./components/ui/feedback/DefaultCircularProgress";
|
|
38
|
+
import { Progress } from "./components/ui/feedback/Progress";
|
|
39
|
+
import { Toast, toastVariants, toastIconContainerVariants } from "./components/ui/feedback/Toast";
|
|
40
|
+
import { Calendar, CalendarDayButton } from "./components/ui/form/Calendar";
|
|
41
|
+
import { Checkbox } from "./components/ui/form/Checkbox";
|
|
42
|
+
import { DatePicker } from "./components/ui/form/DatePicker";
|
|
43
|
+
import { DateRangePicker } from "./components/ui/form/DateRangePicker";
|
|
44
|
+
import { Input } from "./components/ui/form/Input";
|
|
45
|
+
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./components/ui/form/InputOtp";
|
|
46
|
+
import { RadioGroup, RadioGroupItem } from "./components/ui/form/RadioGroup";
|
|
47
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/form/Select";
|
|
48
|
+
import { Switch } from "./components/ui/form/Switch";
|
|
49
|
+
import { Textarea } from "./components/ui/form/Textarea";
|
|
50
|
+
import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "./components/ui/overlay/Command";
|
|
51
|
+
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/overlay/Dialog";
|
|
52
|
+
import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./components/ui/overlay/Popover";
|
|
53
|
+
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "./components/ui/overlay/Sheet";
|
|
54
|
+
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./components/ui/overlay/Tooltip";
|
|
23
55
|
import { useMdSidebarStore } from "./store/useMdSidebarStore";
|
|
24
56
|
export {
|
|
57
|
+
Accordion,
|
|
58
|
+
AccordionContent,
|
|
59
|
+
AccordionItem,
|
|
60
|
+
AccordionTrigger,
|
|
61
|
+
Badge,
|
|
62
|
+
Button,
|
|
63
|
+
Calendar,
|
|
64
|
+
CalendarDayButton,
|
|
65
|
+
default2 as CancelButton,
|
|
66
|
+
Card,
|
|
67
|
+
CardAction,
|
|
68
|
+
CardContent,
|
|
69
|
+
CardDescription,
|
|
70
|
+
CardFooter,
|
|
71
|
+
CardHeader,
|
|
72
|
+
CardTitle,
|
|
73
|
+
Checkbox,
|
|
74
|
+
default3 as CircularProgress,
|
|
75
|
+
Command,
|
|
76
|
+
CommandDialog,
|
|
77
|
+
CommandEmpty,
|
|
78
|
+
CommandGroup,
|
|
79
|
+
CommandInput,
|
|
80
|
+
CommandItem,
|
|
81
|
+
CommandList,
|
|
82
|
+
CommandSeparator,
|
|
83
|
+
CommandShortcut,
|
|
84
|
+
CopyButton,
|
|
85
|
+
DatePicker,
|
|
86
|
+
DateRangePicker,
|
|
87
|
+
default4 as DefaultCircularProgress,
|
|
88
|
+
Dialog,
|
|
89
|
+
DialogClose,
|
|
90
|
+
DialogContent,
|
|
91
|
+
DialogDescription,
|
|
92
|
+
DialogFooter,
|
|
93
|
+
DialogHeader,
|
|
94
|
+
DialogOverlay,
|
|
95
|
+
DialogPortal,
|
|
96
|
+
DialogTitle,
|
|
97
|
+
DialogTrigger,
|
|
98
|
+
Input,
|
|
99
|
+
InputOTP,
|
|
100
|
+
InputOTPGroup,
|
|
101
|
+
InputOTPSeparator,
|
|
102
|
+
InputOTPSlot,
|
|
25
103
|
MainLayout,
|
|
26
104
|
MainLayoutContent,
|
|
27
105
|
MainLayoutMain,
|
|
@@ -30,17 +108,77 @@ export {
|
|
|
30
108
|
NavBar,
|
|
31
109
|
NavBarItem,
|
|
32
110
|
NotificationItem,
|
|
111
|
+
NotificationsPopover,
|
|
112
|
+
Pagination,
|
|
113
|
+
PaginationContent,
|
|
114
|
+
PaginationEllipsis,
|
|
115
|
+
PaginationItem,
|
|
116
|
+
PaginationLink,
|
|
117
|
+
PaginationNext,
|
|
118
|
+
PaginationPrevious,
|
|
119
|
+
Popover,
|
|
120
|
+
PopoverAnchor,
|
|
121
|
+
PopoverContent,
|
|
122
|
+
PopoverTrigger,
|
|
33
123
|
ProfilePopover,
|
|
124
|
+
Progress,
|
|
34
125
|
QueryProvider,
|
|
126
|
+
RadioGroup,
|
|
127
|
+
RadioGroupItem,
|
|
128
|
+
ScrollArea,
|
|
129
|
+
ScrollBar,
|
|
130
|
+
Select,
|
|
131
|
+
SelectContent,
|
|
132
|
+
SelectGroup,
|
|
133
|
+
SelectItem,
|
|
134
|
+
SelectLabel,
|
|
135
|
+
SelectScrollDownButton,
|
|
136
|
+
SelectScrollUpButton,
|
|
137
|
+
SelectSeparator,
|
|
138
|
+
SelectTrigger,
|
|
139
|
+
SelectValue,
|
|
140
|
+
Separator,
|
|
141
|
+
Sheet,
|
|
142
|
+
SheetClose,
|
|
143
|
+
SheetContent,
|
|
144
|
+
SheetDescription,
|
|
145
|
+
SheetFooter,
|
|
146
|
+
SheetHeader,
|
|
147
|
+
SheetTitle,
|
|
148
|
+
SheetTrigger,
|
|
35
149
|
SideBarNavigation,
|
|
150
|
+
Switch,
|
|
151
|
+
Table,
|
|
152
|
+
TableBody,
|
|
153
|
+
TableCaption,
|
|
154
|
+
TableCell,
|
|
155
|
+
TableFooter,
|
|
156
|
+
TableHead,
|
|
157
|
+
TableHeader,
|
|
158
|
+
TableRow,
|
|
159
|
+
Tabs,
|
|
160
|
+
TabsContent,
|
|
161
|
+
TabsList,
|
|
162
|
+
TabsTrigger,
|
|
163
|
+
Textarea,
|
|
164
|
+
Toast,
|
|
165
|
+
Tooltip,
|
|
166
|
+
TooltipContent,
|
|
167
|
+
TooltipProvider,
|
|
168
|
+
TooltipTrigger,
|
|
36
169
|
USER_QUERY_KEY,
|
|
37
170
|
UserAvatar,
|
|
171
|
+
UsersSelectorPopover,
|
|
172
|
+
badgeVariants,
|
|
38
173
|
buildQueryParams,
|
|
174
|
+
buttonVariants,
|
|
39
175
|
cn,
|
|
40
176
|
continueChain,
|
|
41
177
|
createAuthMiddleware,
|
|
42
178
|
createMiddlewareChain,
|
|
43
179
|
stopChain,
|
|
180
|
+
toastIconContainerVariants,
|
|
181
|
+
toastVariants,
|
|
44
182
|
useInvalidateUser,
|
|
45
183
|
useMdSidebarStore,
|
|
46
184
|
useSetUserData,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Types\nexport * from './modules/auth/schema';\nexport * from './modules/users/schema';\nexport * from './modules/whitelabel/schema';\nexport * from './infra/api/types';\n\n// Contexts\nexport * from './providers/query.provider';\nexport * from './providers/auth.provider';\nexport * from './providers/whitelabel.provider';\n\n// Hooks\nexport { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';\n\n// Providers\nexport { QueryProvider } from './providers/query.provider';\n\n// Middleware\nexport { createAuthMiddleware } from './middlewares/create-auth-middleware';\nexport { createMiddlewareChain } from './middlewares/chain';\nexport { continueChain, stopChain } from './middlewares/types';\nexport type { MiddlewareFunction, MiddlewareConfig, MiddlewareResult } from './middlewares/types';\n\n// Utils\nexport { cn } from './infra/utils/clsx';\nexport { buildQueryParams } from './infra/utils/params';\n\n// Layout\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';\nexport { NavBar } from './components/layouts/NavBar';\nexport type { NavBarProps } from './components/layouts/NavBar';\nexport { SideBarNavigation } from './components/layouts/SideBarNavigation';\nexport { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';\nexport { NotificationItem } from './components/layouts/NotificationItem';\nexport type { NotificationItemProps } from './components/layouts/NotificationItem';\nexport { ProfilePopover } from './components/layouts/ProfilePopover';\nexport type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';\nexport { NavBarItem } from './components/layouts/NavBarItem';\nexport type { NavBarItemProps } from './components/layouts/NavBarItem';\nexport { UserAvatar } from './components/ui/data-display/UserAvatar';\nexport type { UserAvatarProps } from './components/ui/data-display/UserAvatar';\n\n// Store\nexport { useMdSidebarStore } from './store/useMdSidebarStore';\n"],"mappings":"AACA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,SAAS,cAAc,wBAAwB,mBAAmB,gBAAgB,sBAAsB;AAGxG,SAAS,qBAAqB;AAG9B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAIzC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,YAAY,mBAAmB,kBAAkB,sBAAsB;AAChF,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAEjC,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Types\nexport * from './modules/auth/schema';\nexport * from './modules/users/schema';\nexport * from './modules/whitelabel/schema';\nexport * from './infra/api/types';\n\n// Contexts\nexport * from './providers/query.provider';\nexport * from './providers/auth.provider';\nexport * from './providers/whitelabel.provider';\n\n// Hooks\nexport { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';\n\n// Providers\nexport { QueryProvider } from './providers/query.provider';\n\n// Middleware\nexport { createAuthMiddleware } from './middlewares/create-auth-middleware';\nexport { createMiddlewareChain } from './middlewares/chain';\nexport { continueChain, stopChain } from './middlewares/types';\nexport type { MiddlewareFunction, MiddlewareConfig, MiddlewareResult } from './middlewares/types';\n\n// Utils\nexport { cn } from './infra/utils/clsx';\nexport { buildQueryParams } from './infra/utils/params';\n\n// Layout\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';\nexport { NavBar } from './components/layouts/NavBar';\nexport type { NavBarProps } from './components/layouts/NavBar';\nexport { SideBarNavigation } from './components/layouts/SideBarNavigation';\nexport { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';\nexport { NotificationItem } from './components/layouts/NotificationItem';\nexport type { NotificationItemProps } from './components/layouts/NotificationItem';\nexport { NotificationsPopover } from './components/layouts/NotificationsPopover';\nexport type { NotificationsPopoverProps, NotificationData } from './components/layouts/NotificationsPopover';\nexport { UsersSelectorPopover } from './components/layouts/UsersSelectorPopover';\nexport type { UsersSelectorPopoverProps, UserSelectorItem } from './components/layouts/UsersSelectorPopover';\nexport { ProfilePopover } from './components/layouts/ProfilePopover';\nexport type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';\nexport { NavBarItem } from './components/layouts/NavBarItem';\nexport type { NavBarItemProps } from './components/layouts/NavBarItem';\n\n// UI - Buttons\nexport { Button, buttonVariants } from './components/ui/buttons/Button';\nexport { CopyButton } from './components/ui/buttons/CopyButton';\nexport { default as CancelButton } from './components/ui/buttons/CancelButton';\n\n// UI - Data Display\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/ui/data-display/Accordion';\nexport { Badge, badgeVariants } from './components/ui/data-display/Badge';\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './components/ui/data-display/Card';\nexport { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './components/ui/data-display/Pagination';\nexport { ScrollArea, ScrollBar } from './components/ui/data-display/ScrollArea';\nexport { Separator } from './components/ui/data-display/Separator';\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './components/ui/data-display/Table';\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/data-display/Tabs';\nexport { UserAvatar } from './components/ui/data-display/UserAvatar';\nexport type { UserAvatarProps } from './components/ui/data-display/UserAvatar';\n\n// UI - Feedback\nexport { default as CircularProgress } from './components/ui/feedback/CircularProgress';\nexport { default as DefaultCircularProgress } from './components/ui/feedback/DefaultCircularProgress';\nexport { Progress } from './components/ui/feedback/Progress';\nexport { Toast, toastVariants, toastIconContainerVariants } from './components/ui/feedback/Toast';\nexport type { ToastProps } from './components/ui/feedback/Toast';\n\n// UI - Form\nexport { Calendar, CalendarDayButton } from './components/ui/form/Calendar';\nexport { Checkbox } from './components/ui/form/Checkbox';\nexport { DatePicker } from './components/ui/form/DatePicker';\nexport { DateRangePicker } from './components/ui/form/DateRangePicker';\nexport { Input } from './components/ui/form/Input';\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './components/ui/form/InputOtp';\nexport { RadioGroup, RadioGroupItem } from './components/ui/form/RadioGroup';\nexport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/form/Select';\nexport { Switch } from './components/ui/form/Switch';\nexport { Textarea } from './components/ui/form/Textarea';\n\n// UI - Overlay\nexport { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './components/ui/overlay/Command';\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/overlay/Dialog';\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './components/ui/overlay/Popover';\nexport { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './components/ui/overlay/Sheet';\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/overlay/Tooltip';\n\n// Store\nexport { useMdSidebarStore } from './store/useMdSidebarStore';\n"],"mappings":"AACA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,SAAS,cAAc,wBAAwB,mBAAmB,gBAAgB,sBAAsB;AAGxG,SAAS,qBAAqB;AAG9B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAIzC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,YAAY,mBAAmB,kBAAkB,sBAAsB;AAChF,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AAErC,SAAS,4BAA4B;AAErC,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAI3B,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAC3B,SAAoB,WAAXA,gBAA+B;AAGxC,SAAS,WAAW,eAAe,kBAAkB,wBAAwB;AAC7E,SAAS,OAAO,qBAAqB;AACrC,SAAS,MAAM,YAAY,YAAY,WAAW,YAAY,iBAAiB,mBAAmB;AAClG,SAAS,YAAY,mBAAmB,gBAAgB,gBAAgB,oBAAoB,gBAAgB,0BAA0B;AACtI,SAAS,YAAY,iBAAiB;AACtC,SAAS,iBAAiB;AAC1B,SAAS,OAAO,aAAa,WAAW,aAAa,WAAW,UAAU,WAAW,oBAAoB;AACzG,SAAS,MAAM,UAAU,aAAa,mBAAmB;AACzD,SAAS,kBAAkB;AAI3B,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAA0C;AACnD,SAAS,gBAAgB;AACzB,SAAS,OAAO,eAAe,kCAAkC;AAIjE,SAAS,UAAU,yBAAyB;AAC5C,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,UAAU,eAAe,cAAc,yBAAyB;AACzE,SAAS,YAAY,sBAAsB;AAC3C,SAAS,QAAQ,eAAe,aAAa,YAAY,aAAa,wBAAwB,sBAAsB,iBAAiB,eAAe,mBAAmB;AACvK,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAGzB,SAAS,SAAS,eAAe,cAAc,aAAa,cAAc,cAAc,aAAa,iBAAiB,wBAAwB;AAC9I,SAAS,QAAQ,aAAa,eAAe,mBAAmB,cAAc,cAAc,eAAe,cAAc,aAAa,qBAAqB;AAC3J,SAAS,SAAS,gBAAgB,gBAAgB,qBAAqB;AACvE,SAAS,OAAO,cAAc,YAAY,cAAc,aAAa,aAAa,YAAY,wBAAwB;AACtH,SAAS,SAAS,gBAAgB,gBAAgB,uBAAuB;AAGzE,SAAS,yBAAyB;","names":["default"]}
|
package/package.json
CHANGED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { ReactNode, useState } from "react";
|
|
4
|
+
import { Bell } from "lucide-react";
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
import { Popover } from "../ui/overlay/Popover";
|
|
7
|
+
import { Button } from "../ui/buttons/Button";
|
|
8
|
+
import { NotificationItem } from "./NotificationItem";
|
|
9
|
+
import { cn } from "../../infra/utils/clsx";
|
|
10
|
+
|
|
11
|
+
export interface NotificationData {
|
|
12
|
+
icon: ReactNode;
|
|
13
|
+
iconBgColor: string;
|
|
14
|
+
title: string;
|
|
15
|
+
time: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export interface NotificationsPopoverProps {
|
|
19
|
+
notifications?: NotificationData[];
|
|
20
|
+
onViewAll?: () => void;
|
|
21
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
22
|
+
align?: "start" | "center" | "end";
|
|
23
|
+
contentClassName?: string;
|
|
24
|
+
badgeClassName?: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function NotificationsPopover({
|
|
28
|
+
notifications = [],
|
|
29
|
+
onViewAll,
|
|
30
|
+
side,
|
|
31
|
+
align,
|
|
32
|
+
contentClassName,
|
|
33
|
+
badgeClassName = "bg-pages-400",
|
|
34
|
+
}: NotificationsPopoverProps) {
|
|
35
|
+
const [open, setOpen] = useState(false);
|
|
36
|
+
const [hasNewNotifications, setHasNewNotifications] = useState(true);
|
|
37
|
+
|
|
38
|
+
const handleOpenChange = (isOpen: boolean) => {
|
|
39
|
+
setOpen(isOpen);
|
|
40
|
+
if (isOpen) setHasNewNotifications(false);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<Popover open={open} onOpenChange={handleOpenChange}>
|
|
45
|
+
<PopoverPrimitive.Trigger className="cursor-pointer">
|
|
46
|
+
<div
|
|
47
|
+
className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
|
|
48
|
+
>
|
|
49
|
+
<Bell size={20} className="text-gray-500" />
|
|
50
|
+
{hasNewNotifications && (
|
|
51
|
+
<span
|
|
52
|
+
className={cn(
|
|
53
|
+
"absolute top-2 right-2 size-2.5 rounded-full",
|
|
54
|
+
badgeClassName,
|
|
55
|
+
)}
|
|
56
|
+
/>
|
|
57
|
+
)}
|
|
58
|
+
</div>
|
|
59
|
+
</PopoverPrimitive.Trigger>
|
|
60
|
+
<PopoverPrimitive.Portal>
|
|
61
|
+
<PopoverPrimitive.Content
|
|
62
|
+
className={cn(
|
|
63
|
+
"absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
64
|
+
contentClassName,
|
|
65
|
+
)}
|
|
66
|
+
side={side}
|
|
67
|
+
align={align}
|
|
68
|
+
sideOffset={8}
|
|
69
|
+
>
|
|
70
|
+
<span className="paragraph-small-semibold text-gray-950 px-4">
|
|
71
|
+
Últimas notificações
|
|
72
|
+
</span>
|
|
73
|
+
|
|
74
|
+
{notifications.length > 0 ? (
|
|
75
|
+
notifications.map((notification, index) => (
|
|
76
|
+
<NotificationItem
|
|
77
|
+
key={index}
|
|
78
|
+
icon={notification.icon}
|
|
79
|
+
iconBgColor={notification.iconBgColor}
|
|
80
|
+
title={notification.title}
|
|
81
|
+
time={notification.time}
|
|
82
|
+
showBorder={index < notifications.length - 1}
|
|
83
|
+
/>
|
|
84
|
+
))
|
|
85
|
+
) : (
|
|
86
|
+
<div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
|
|
87
|
+
<div className="bg-gray-50 rounded-md p-2.5">
|
|
88
|
+
<Bell size={20} color="var(--color-gray-950)" />
|
|
89
|
+
</div>
|
|
90
|
+
<span className="paragraph-small-medium text-gray-950">
|
|
91
|
+
Sem notificações por enquanto
|
|
92
|
+
</span>
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
|
|
96
|
+
{onViewAll && (
|
|
97
|
+
<Button
|
|
98
|
+
variant="secondary"
|
|
99
|
+
className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
|
|
100
|
+
onClick={onViewAll}
|
|
101
|
+
>
|
|
102
|
+
Todas as notificações
|
|
103
|
+
</Button>
|
|
104
|
+
)}
|
|
105
|
+
</PopoverPrimitive.Content>
|
|
106
|
+
</PopoverPrimitive.Portal>
|
|
107
|
+
</Popover>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export { NotificationsPopover };
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { useRouter } from 'next/navigation';
|
|
5
|
-
import
|
|
5
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
6
|
+
import { Popover } from '../ui/overlay/Popover';
|
|
6
7
|
import { Button } from '../ui/buttons/Button';
|
|
7
8
|
import { Progress } from '../ui/feedback/Progress';
|
|
8
9
|
import { Separator } from '../ui/data-display/Separator';
|
|
@@ -33,7 +34,7 @@ export interface ProfilePopoverProps {
|
|
|
33
34
|
function ProfilePopover({
|
|
34
35
|
side = 'top',
|
|
35
36
|
align = 'start',
|
|
36
|
-
contentClassName,
|
|
37
|
+
contentClassName = 'absolute bottom-2 left-[26px]',
|
|
37
38
|
onEditProfile,
|
|
38
39
|
credits,
|
|
39
40
|
onCreditsClick,
|
|
@@ -67,7 +68,7 @@ function ProfilePopover({
|
|
|
67
68
|
<>
|
|
68
69
|
{isLoggingOut && logoutOverlay}
|
|
69
70
|
<Popover>
|
|
70
|
-
<
|
|
71
|
+
<PopoverPrimitive.Trigger className="cursor-pointer">
|
|
71
72
|
{user && (
|
|
72
73
|
<UserAvatar
|
|
73
74
|
key={user.id}
|
|
@@ -77,9 +78,10 @@ function ProfilePopover({
|
|
|
77
78
|
storageUrl={storageUrl}
|
|
78
79
|
/>
|
|
79
80
|
)}
|
|
80
|
-
</
|
|
81
|
+
</PopoverPrimitive.Trigger>
|
|
81
82
|
|
|
82
|
-
<
|
|
83
|
+
<PopoverPrimitive.Portal>
|
|
84
|
+
<PopoverPrimitive.Content
|
|
83
85
|
className={cn(
|
|
84
86
|
'w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99',
|
|
85
87
|
contentClassName
|
|
@@ -162,7 +164,8 @@ function ProfilePopover({
|
|
|
162
164
|
<NavBarItem label="Sair" onClick={handleLogout} />
|
|
163
165
|
</div>
|
|
164
166
|
</div>
|
|
165
|
-
</
|
|
167
|
+
</PopoverPrimitive.Content>
|
|
168
|
+
</PopoverPrimitive.Portal>
|
|
166
169
|
</Popover>
|
|
167
170
|
</>
|
|
168
171
|
);
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Plus, Settings, User } from 'lucide-react';
|
|
5
|
+
import Image from 'next/image';
|
|
6
|
+
import { useRouter } from 'next/navigation';
|
|
7
|
+
import { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';
|
|
8
|
+
import { Button } from '../ui/buttons/Button';
|
|
9
|
+
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';
|
|
10
|
+
import { Checkbox } from '../ui/form/Checkbox';
|
|
11
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
|
|
12
|
+
import { cn } from '../../infra/utils/clsx';
|
|
13
|
+
|
|
14
|
+
export interface UserSelectorItem {
|
|
15
|
+
id: number;
|
|
16
|
+
name: string;
|
|
17
|
+
avatar: string;
|
|
18
|
+
checked: boolean;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface UsersSelectorPopoverProps {
|
|
22
|
+
users?: UserSelectorItem[];
|
|
23
|
+
onToggleUser?: (id: number) => void;
|
|
24
|
+
addRoute?: string;
|
|
25
|
+
manageRoute?: string;
|
|
26
|
+
userCount?: number;
|
|
27
|
+
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
28
|
+
align?: 'start' | 'center' | 'end';
|
|
29
|
+
contentClassName?: string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function UsersSelectorPopover({
|
|
33
|
+
users: externalUsers,
|
|
34
|
+
onToggleUser,
|
|
35
|
+
addRoute = '/my-teams?createNew=true',
|
|
36
|
+
manageRoute = '/my-teams',
|
|
37
|
+
userCount = 5,
|
|
38
|
+
side,
|
|
39
|
+
align,
|
|
40
|
+
contentClassName,
|
|
41
|
+
}: UsersSelectorPopoverProps) {
|
|
42
|
+
const route = useRouter();
|
|
43
|
+
const [open, setOpen] = useState(false);
|
|
44
|
+
const [internalUsers, setInternalUsers] = useState<UserSelectorItem[]>(externalUsers ?? []);
|
|
45
|
+
const [hoveredId, setHoveredId] = useState<number | null>(null);
|
|
46
|
+
|
|
47
|
+
const users = externalUsers ?? internalUsers;
|
|
48
|
+
|
|
49
|
+
const toggleUser = (id: number) => {
|
|
50
|
+
if (onToggleUser) {
|
|
51
|
+
onToggleUser(id);
|
|
52
|
+
} else {
|
|
53
|
+
setInternalUsers((prev) =>
|
|
54
|
+
prev.map((u) => (u.id === id ? { ...u, checked: !u.checked } : u))
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<Popover open={open} onOpenChange={setOpen}>
|
|
61
|
+
<PopoverTrigger className="cursor-pointer">
|
|
62
|
+
<div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
|
|
63
|
+
<span className="paragraph-small-semibold">{userCount}</span>
|
|
64
|
+
<User size={16} />
|
|
65
|
+
</div>
|
|
66
|
+
</PopoverTrigger>
|
|
67
|
+
|
|
68
|
+
<PopoverContent
|
|
69
|
+
className={cn(
|
|
70
|
+
'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',
|
|
71
|
+
contentClassName
|
|
72
|
+
)}
|
|
73
|
+
side={side}
|
|
74
|
+
align={align}
|
|
75
|
+
sideOffset={8}
|
|
76
|
+
>
|
|
77
|
+
<div className="flex flex-col p-3 gap-2">
|
|
78
|
+
<div className="flex items-center justify-between">
|
|
79
|
+
<span className="paragraph-small-semibold">Usuários</span>
|
|
80
|
+
<div className="flex items-center gap-1.5">
|
|
81
|
+
<Button
|
|
82
|
+
variant="secondary"
|
|
83
|
+
className="h-8 paragraph-small-semibold text-gray-950"
|
|
84
|
+
onClick={() => route.push(addRoute)}
|
|
85
|
+
>
|
|
86
|
+
<Plus size={16} />
|
|
87
|
+
Adicionar
|
|
88
|
+
</Button>
|
|
89
|
+
|
|
90
|
+
<Tooltip>
|
|
91
|
+
<TooltipTrigger asChild>
|
|
92
|
+
<Button
|
|
93
|
+
variant="secondary"
|
|
94
|
+
className="p-0 size-8"
|
|
95
|
+
onClick={() => route.push(manageRoute)}
|
|
96
|
+
>
|
|
97
|
+
<Settings size={18} />
|
|
98
|
+
</Button>
|
|
99
|
+
</TooltipTrigger>
|
|
100
|
+
<TooltipContent>Visualizar todos usuários</TooltipContent>
|
|
101
|
+
</Tooltip>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<Command className="gap-2" value="">
|
|
106
|
+
<CommandInput placeholder="Busque aqui" />
|
|
107
|
+
<CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
|
|
108
|
+
<CommandEmpty>No results found.</CommandEmpty>
|
|
109
|
+
{users.map((user) => (
|
|
110
|
+
<CommandItem
|
|
111
|
+
key={user.id}
|
|
112
|
+
autoFocus={false}
|
|
113
|
+
onPointerEnter={() => setHoveredId(user.id)}
|
|
114
|
+
onPointerLeave={() => setHoveredId(null)}
|
|
115
|
+
onFocus={() => setHoveredId(user.id)}
|
|
116
|
+
onBlur={() => setHoveredId(null)}
|
|
117
|
+
onSelect={() => toggleUser(user.id)}
|
|
118
|
+
className="cursor-pointer"
|
|
119
|
+
>
|
|
120
|
+
<div className="flex items-center justify-between w-full">
|
|
121
|
+
<div className="flex items-center gap-2">
|
|
122
|
+
<Image
|
|
123
|
+
alt="Avatar"
|
|
124
|
+
src={user.avatar}
|
|
125
|
+
width={32}
|
|
126
|
+
height={32}
|
|
127
|
+
className="rounded-full"
|
|
128
|
+
/>
|
|
129
|
+
{user.name}
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<Tooltip open={hoveredId === user.id}>
|
|
133
|
+
<TooltipTrigger
|
|
134
|
+
onClick={(e) => e.stopPropagation()}
|
|
135
|
+
onPointerDown={(e) => e.stopPropagation()}
|
|
136
|
+
>
|
|
137
|
+
<Checkbox
|
|
138
|
+
checked={user.checked}
|
|
139
|
+
onCheckedChange={() => toggleUser(user.id)}
|
|
140
|
+
className={hoveredId === user.id ? 'border-gray-950' : ''}
|
|
141
|
+
/>
|
|
142
|
+
</TooltipTrigger>
|
|
143
|
+
<TooltipContent>
|
|
144
|
+
{user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}
|
|
145
|
+
</TooltipContent>
|
|
146
|
+
</Tooltip>
|
|
147
|
+
</div>
|
|
148
|
+
</CommandItem>
|
|
149
|
+
))}
|
|
150
|
+
</CommandList>
|
|
151
|
+
</Command>
|
|
152
|
+
</div>
|
|
153
|
+
</PopoverContent>
|
|
154
|
+
</Popover>
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
export { UsersSelectorPopover };
|
package/src/index.ts
CHANGED
|
@@ -33,12 +33,57 @@ export { SideBarNavigation } from './components/layouts/SideBarNavigation';
|
|
|
33
33
|
export { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';
|
|
34
34
|
export { NotificationItem } from './components/layouts/NotificationItem';
|
|
35
35
|
export type { NotificationItemProps } from './components/layouts/NotificationItem';
|
|
36
|
+
export { NotificationsPopover } from './components/layouts/NotificationsPopover';
|
|
37
|
+
export type { NotificationsPopoverProps, NotificationData } from './components/layouts/NotificationsPopover';
|
|
38
|
+
export { UsersSelectorPopover } from './components/layouts/UsersSelectorPopover';
|
|
39
|
+
export type { UsersSelectorPopoverProps, UserSelectorItem } from './components/layouts/UsersSelectorPopover';
|
|
36
40
|
export { ProfilePopover } from './components/layouts/ProfilePopover';
|
|
37
41
|
export type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';
|
|
38
42
|
export { NavBarItem } from './components/layouts/NavBarItem';
|
|
39
43
|
export type { NavBarItemProps } from './components/layouts/NavBarItem';
|
|
44
|
+
|
|
45
|
+
// UI - Buttons
|
|
46
|
+
export { Button, buttonVariants } from './components/ui/buttons/Button';
|
|
47
|
+
export { CopyButton } from './components/ui/buttons/CopyButton';
|
|
48
|
+
export { default as CancelButton } from './components/ui/buttons/CancelButton';
|
|
49
|
+
|
|
50
|
+
// UI - Data Display
|
|
51
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/ui/data-display/Accordion';
|
|
52
|
+
export { Badge, badgeVariants } from './components/ui/data-display/Badge';
|
|
53
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './components/ui/data-display/Card';
|
|
54
|
+
export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './components/ui/data-display/Pagination';
|
|
55
|
+
export { ScrollArea, ScrollBar } from './components/ui/data-display/ScrollArea';
|
|
56
|
+
export { Separator } from './components/ui/data-display/Separator';
|
|
57
|
+
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './components/ui/data-display/Table';
|
|
58
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/data-display/Tabs';
|
|
40
59
|
export { UserAvatar } from './components/ui/data-display/UserAvatar';
|
|
41
60
|
export type { UserAvatarProps } from './components/ui/data-display/UserAvatar';
|
|
42
61
|
|
|
62
|
+
// UI - Feedback
|
|
63
|
+
export { default as CircularProgress } from './components/ui/feedback/CircularProgress';
|
|
64
|
+
export { default as DefaultCircularProgress } from './components/ui/feedback/DefaultCircularProgress';
|
|
65
|
+
export { Progress } from './components/ui/feedback/Progress';
|
|
66
|
+
export { Toast, toastVariants, toastIconContainerVariants } from './components/ui/feedback/Toast';
|
|
67
|
+
export type { ToastProps } from './components/ui/feedback/Toast';
|
|
68
|
+
|
|
69
|
+
// UI - Form
|
|
70
|
+
export { Calendar, CalendarDayButton } from './components/ui/form/Calendar';
|
|
71
|
+
export { Checkbox } from './components/ui/form/Checkbox';
|
|
72
|
+
export { DatePicker } from './components/ui/form/DatePicker';
|
|
73
|
+
export { DateRangePicker } from './components/ui/form/DateRangePicker';
|
|
74
|
+
export { Input } from './components/ui/form/Input';
|
|
75
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './components/ui/form/InputOtp';
|
|
76
|
+
export { RadioGroup, RadioGroupItem } from './components/ui/form/RadioGroup';
|
|
77
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/form/Select';
|
|
78
|
+
export { Switch } from './components/ui/form/Switch';
|
|
79
|
+
export { Textarea } from './components/ui/form/Textarea';
|
|
80
|
+
|
|
81
|
+
// UI - Overlay
|
|
82
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './components/ui/overlay/Command';
|
|
83
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/overlay/Dialog';
|
|
84
|
+
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './components/ui/overlay/Popover';
|
|
85
|
+
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './components/ui/overlay/Sheet';
|
|
86
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/overlay/Tooltip';
|
|
87
|
+
|
|
43
88
|
// Store
|
|
44
89
|
export { useMdSidebarStore } from './store/useMdSidebarStore';
|