@greatapps/common 1.1.369 → 1.1.371
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/UsersSelectorPopover.mjs +29 -33
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/UsersSelectorPopover.tsx +12 -18
- package/src/components/navigation/ProjectSelectorPopover.tsx +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
|
-
import { IconPlus,
|
|
4
|
+
import { IconPlus, IconUser, IconUsers } from "@tabler/icons-react";
|
|
5
5
|
import { UserAvatar } from "../ui/data-display/UserAvatar";
|
|
6
6
|
import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
|
|
7
7
|
import { Button } from "../ui/buttons/Button";
|
|
@@ -78,7 +78,7 @@ function UsersSelectorPopover({
|
|
|
78
78
|
PopoverContent,
|
|
79
79
|
{
|
|
80
80
|
className: cn(
|
|
81
|
-
"absolute right-0 md:right-[-88px] w-[
|
|
81
|
+
"absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
82
82
|
contentClassName
|
|
83
83
|
),
|
|
84
84
|
side,
|
|
@@ -87,36 +87,20 @@ function UsersSelectorPopover({
|
|
|
87
87
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
|
|
88
88
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
89
89
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Usu\xE1rios" }),
|
|
90
|
-
/* @__PURE__ */
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
),
|
|
105
|
-
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
106
|
-
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
107
|
-
Button,
|
|
108
|
-
{
|
|
109
|
-
variant: "secondary",
|
|
110
|
-
className: "p-0 size-8",
|
|
111
|
-
onClick: () => {
|
|
112
|
-
window.location.href = `${accountsUrl}/my-teams`;
|
|
113
|
-
},
|
|
114
|
-
children: /* @__PURE__ */ jsx(IconSettings, { size: 18 })
|
|
115
|
-
}
|
|
116
|
-
) }),
|
|
117
|
-
/* @__PURE__ */ jsx(TooltipContent, { className: "z-[1002]", children: "Visualizar todos usu\xE1rios" })
|
|
118
|
-
] })
|
|
119
|
-
] })
|
|
90
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ jsxs(
|
|
91
|
+
Button,
|
|
92
|
+
{
|
|
93
|
+
variant: "secondary",
|
|
94
|
+
className: "h-8 paragraph-small-semibold text-gray-950",
|
|
95
|
+
onClick: () => {
|
|
96
|
+
window.location.href = `${accountsUrl}/my-teams?createNew=true`;
|
|
97
|
+
},
|
|
98
|
+
children: [
|
|
99
|
+
/* @__PURE__ */ jsx(IconPlus, { size: 16 }),
|
|
100
|
+
"Adicionar"
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
) })
|
|
120
104
|
] }),
|
|
121
105
|
/* @__PURE__ */ jsxs(Command, { shouldFilter: false, className: "gap-2", value: "", children: [
|
|
122
106
|
/* @__PURE__ */ jsx(
|
|
@@ -202,7 +186,19 @@ function UsersSelectorPopover({
|
|
|
202
186
|
] })
|
|
203
187
|
}
|
|
204
188
|
)
|
|
205
|
-
] })
|
|
189
|
+
] }),
|
|
190
|
+
/* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" }),
|
|
191
|
+
/* @__PURE__ */ jsx(
|
|
192
|
+
Button,
|
|
193
|
+
{
|
|
194
|
+
variant: "ghost",
|
|
195
|
+
className: "h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center",
|
|
196
|
+
onClick: () => {
|
|
197
|
+
window.location.href = `${accountsUrl}/my-teams`;
|
|
198
|
+
},
|
|
199
|
+
children: "Gerenciar equipe"
|
|
200
|
+
}
|
|
201
|
+
)
|
|
206
202
|
] })
|
|
207
203
|
}
|
|
208
204
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { IconPlus, IconSettings, IconUser, IconUsers } from '@tabler/icons-react';\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useListProjectUsers } from \"../../modules/projects/hooks/list-project-users.hook\";\nimport { useListAllAccountUsers } from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { useAddProjectUser } from \"../../modules/projects/hooks/add-project-user.hook\";\nimport { useRemoveProjectUser } from \"../../modules/projects/hooks/remove-project-user.hook\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\n\nexport interface UsersSelectorPopoverProps {\n projectId?: number;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-8 rounded-full shrink-0\" />\n <div className=\"skeleton h-3.5 w-28 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded shrink-0\" />\n </div>\n );\n}\n\nexport function UsersSelectorPopover({\n projectId,\n side,\n align,\n contentClassName,\n}: UsersSelectorPopoverProps) {\n const { accountsUrl } = useWhitelabelUrls();\n const [open, setOpen] = useState(false);\n const [hoveredId, setHoveredId] = useState<number | null>(null);\n const [searchInput, setSearchInput] = useState(\"\");\n const [search, setSearch] = useState(\"\");\n\n const id = projectId ?? 0;\n\n useEffect(() => {\n const timer = setTimeout(() => setSearch(searchInput), 300);\n return () => clearTimeout(timer);\n }, [searchInput]);\n\n const accountUsers = useListAllAccountUsers(search, id || undefined);\n const projectUsers = useListProjectUsers(id, \"\");\n const addMutation = useAddProjectUser(id);\n const removeMutation = useRemoveProjectUser(id);\n\n const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n const isLoading = accountUsers.isLoading;\n const isFetchingMore = accountUsers.isFetchingNextPage;\n const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n if (inProject) {\n if (!removable) return;\n removeMutation.mutate(userId);\n } else {\n addMutation.mutate(userId);\n }\n };\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n const target = e.currentTarget;\n const nearBottom =\n target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n if (!nearBottom) return;\n if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n accountUsers.fetchNextPage();\n }\n };\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger className=\"cursor-pointer\">\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\">\n <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n <IconUser size={16} />\n </div>\n </PopoverTrigger>\n\n <PopoverContent\n className={cn(\n \"absolute right-0 md:right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n contentClassName,\n )}\n side={side}\n align={align}\n sideOffset={8}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Usuários</span>\n <div className=\"flex items-center gap-1.5\">\n <Button\n variant=\"secondary\"\n className=\"h-8 paragraph-small-semibold text-gray-950\"\n onClick={() => {\n window.location.href = `${accountsUrl}/my-teams?createNew=true`;\n }}\n >\n <IconPlus size={16} />\n Adicionar\n </Button>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button\n variant=\"secondary\"\n className=\"p-0 size-8\"\n onClick={() => {\n window.location.href = `${accountsUrl}/my-teams`;\n }}\n >\n <IconSettings size={18} />\n </Button>\n </TooltipTrigger>\n <TooltipContent className=\"z-[1002]\">\n Visualizar todos usuários\n </TooltipContent>\n </Tooltip>\n </div>\n </div>\n\n <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n <CommandInput\n placeholder=\"Busque aqui\"\n value={searchInput}\n onValueChange={setSearchInput}\n />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n onScroll={handleScroll}\n >\n {isLoading ? (\n <>\n <UserItemSkeleton />\n <UserItemSkeleton />\n <UserItemSkeleton />\n </>\n ) : allUsers.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconUsers size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n Nenhum usuário encontrado.\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {allUsers.map((user) => {\n const inProject = user.in_project ?? false;\n const removable =\n inProject &&\n user.profile !== \"owner\" &&\n user.profile !== \"admin\";\n const interactive = !inProject || removable;\n\n return (\n <CommandItem\n key={user.id}\n value={user.name || String(user.id)}\n autoFocus={false}\n onPointerEnter={() => setHoveredId(user.id)}\n onPointerLeave={() => setHoveredId(null)}\n onFocus={() => setHoveredId(user.id)}\n onBlur={() => setHoveredId(null)}\n onSelect={() => toggleUser(user.id, inProject, removable)}\n className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n >\n <div className=\"flex items-center justify-between w-full\">\n <div className=\"flex items-center gap-2 min-w-0\">\n <UserAvatar\n photo={user.photo}\n name={user.name ?? undefined}\n size={32}\n />\n <span className=\"truncate\">{user.name}</span>\n </div>\n <Tooltip open={interactive && hoveredId === user.id}>\n <TooltipTrigger asChild>\n <div\n onClick={(e) => e.stopPropagation()}\n onPointerDown={(e) => e.stopPropagation()}\n >\n <Checkbox\n checked={inProject}\n disabled={!interactive}\n onCheckedChange={() =>\n toggleUser(user.id, inProject, removable)\n }\n className={cn(\n interactive && hoveredId === user.id\n ? \"border-gray-950\"\n : \"\",\n \"disabled:opacity-10\",\n )}\n />\n </div>\n </TooltipTrigger>\n <TooltipContent className=\"z-[1002]\">\n {inProject ? \"Remover do projeto\" : \"Adicionar ao projeto\"}\n </TooltipContent>\n </Tooltip>\n </div>\n </CommandItem>\n );\n })}\n {isFetchingMore && (\n <>\n <UserItemSkeleton />\n <UserItemSkeleton />\n </>\n )}\n </>\n )}\n </CommandList>\n </Command>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport {\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"../ui/overlay/Command\";\nimport { Checkbox } from \"../ui/form/Checkbox\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useListProjectUsers } from \"../../modules/projects/hooks/list-project-users.hook\";\nimport { useListAllAccountUsers } from \"../../modules/projects/hooks/list-all-account-users.hook\";\nimport { useAddProjectUser } from \"../../modules/projects/hooks/add-project-user.hook\";\nimport { useRemoveProjectUser } from \"../../modules/projects/hooks/remove-project-user.hook\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\n\nexport interface UsersSelectorPopoverProps {\n projectId?: number;\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n contentClassName?: string;\n}\n\nfunction UserItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-8 rounded-full shrink-0\" />\n <div className=\"skeleton h-3.5 w-28 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded shrink-0\" />\n </div>\n );\n}\n\nexport function UsersSelectorPopover({\n projectId,\n side,\n align,\n contentClassName,\n}: UsersSelectorPopoverProps) {\n const { accountsUrl } = useWhitelabelUrls();\n const [open, setOpen] = useState(false);\n const [hoveredId, setHoveredId] = useState<number | null>(null);\n const [searchInput, setSearchInput] = useState(\"\");\n const [search, setSearch] = useState(\"\");\n\n const id = projectId ?? 0;\n\n useEffect(() => {\n const timer = setTimeout(() => setSearch(searchInput), 300);\n return () => clearTimeout(timer);\n }, [searchInput]);\n\n const accountUsers = useListAllAccountUsers(search, id || undefined);\n const projectUsers = useListProjectUsers(id, \"\");\n const addMutation = useAddProjectUser(id);\n const removeMutation = useRemoveProjectUser(id);\n\n const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];\n const isLoading = accountUsers.isLoading;\n const isFetchingMore = accountUsers.isFetchingNextPage;\n const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;\n\n const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {\n if (inProject) {\n if (!removable) return;\n removeMutation.mutate(userId);\n } else {\n addMutation.mutate(userId);\n }\n };\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n const target = e.currentTarget;\n const nearBottom =\n target.scrollTop + target.clientHeight >= target.scrollHeight - 50;\n if (!nearBottom) return;\n if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {\n accountUsers.fetchNextPage();\n }\n };\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger className=\"cursor-pointer\">\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\">\n <span className=\"paragraph-small-semibold\">{totalInProject}</span>\n <IconUser size={16} />\n </div>\n </PopoverTrigger>\n\n <PopoverContent\n className={cn(\n \"absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\",\n contentClassName,\n )}\n side={side}\n align={align}\n sideOffset={8}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Usuários</span>\n <div className=\"flex items-center gap-1.5\">\n <Button\n variant=\"secondary\"\n className=\"h-8 paragraph-small-semibold text-gray-950\"\n onClick={() => {\n window.location.href = `${accountsUrl}/my-teams?createNew=true`;\n }}\n >\n <IconPlus size={16} />\n Adicionar\n </Button>\n </div>\n </div>\n\n <Command shouldFilter={false} className=\"gap-2\" value=\"\">\n <CommandInput\n placeholder=\"Busque aqui\"\n value={searchInput}\n onValueChange={setSearchInput}\n />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\"\n onScroll={handleScroll}\n >\n {isLoading ? (\n <>\n <UserItemSkeleton />\n <UserItemSkeleton />\n <UserItemSkeleton />\n </>\n ) : allUsers.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconUsers size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n Nenhum usuário encontrado.\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {allUsers.map((user) => {\n const inProject = user.in_project ?? false;\n const removable =\n inProject &&\n user.profile !== \"owner\" &&\n user.profile !== \"admin\";\n const interactive = !inProject || removable;\n\n return (\n <CommandItem\n key={user.id}\n value={user.name || String(user.id)}\n autoFocus={false}\n onPointerEnter={() => setHoveredId(user.id)}\n onPointerLeave={() => setHoveredId(null)}\n onFocus={() => setHoveredId(user.id)}\n onBlur={() => setHoveredId(null)}\n onSelect={() => toggleUser(user.id, inProject, removable)}\n className={interactive ? \"cursor-pointer\" : \"cursor-default\"}\n >\n <div className=\"flex items-center justify-between w-full\">\n <div className=\"flex items-center gap-2 min-w-0\">\n <UserAvatar\n photo={user.photo}\n name={user.name ?? undefined}\n size={32}\n />\n <span className=\"truncate\">{user.name}</span>\n </div>\n <Tooltip open={interactive && hoveredId === user.id}>\n <TooltipTrigger asChild>\n <div\n onClick={(e) => e.stopPropagation()}\n onPointerDown={(e) => e.stopPropagation()}\n >\n <Checkbox\n checked={inProject}\n disabled={!interactive}\n onCheckedChange={() =>\n toggleUser(user.id, inProject, removable)\n }\n className={cn(\n interactive && hoveredId === user.id\n ? \"border-gray-950\"\n : \"\",\n \"disabled:opacity-10\",\n )}\n />\n </div>\n </TooltipTrigger>\n <TooltipContent className=\"z-[1002]\">\n {inProject ? \"Remover do projeto\" : \"Adicionar ao projeto\"}\n </TooltipContent>\n </Tooltip>\n </div>\n </CommandItem>\n );\n })}\n {isFetchingMore && (\n <>\n <UserItemSkeleton />\n <UserItemSkeleton />\n </>\n )}\n </>\n )}\n </CommandList>\n </Command>\n <div className=\"border-t border-gray-200\" />\n <Button\n variant=\"ghost\"\n className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n onClick={() => {\n window.location.href = `${accountsUrl}/my-teams`;\n }}\n >\n Gerenciar equipe\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -118,7 +118,7 @@ function ProjectSelectorPopover({
|
|
|
118
118
|
Button,
|
|
119
119
|
{
|
|
120
120
|
variant: "ghost",
|
|
121
|
-
className: "paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center",
|
|
121
|
+
className: "h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center",
|
|
122
122
|
onClick: onManageProjects,
|
|
123
123
|
children: "Gerenciar projetos"
|
|
124
124
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction } from 'react';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n titleRef?: RefObject<HTMLSpanElement | null>;\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n <div className=\"skeleton h-3.5 w-32 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\n </div>\n );\n}\n\nexport function ProjectSelectorPopover({\n open,\n setOpen,\n titleRef,\n projects,\n selectedProject,\n onSelectProject,\n onAddProject,\n onManageProjects,\n children,\n}: ProjectSelectorPopoverProps) {\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n {children ?? (\n <button className=\"cursor-pointer\">\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </button>\n )}\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n align=\"start\"\n sideOffset={8}\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\n onInteractOutside={(event: Event) => {\n if (titleRef?.current?.contains(event.target as Node)) {\n event.preventDefault();\n }\n }}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n {(onAddProject || onManageProjects) && (\n <div className=\"flex items-center gap-1.5\">\n {canAddProject && onAddProject && (\n <Button\n variant=\"secondary\"\n className=\"h-8! paragraph-small-semibold text-gray-950\"\n onClick={onAddProject}\n >\n <IconPlus size={16} />\n Adicionar\n </Button>\n )}\n </div>\n )}\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\n {projects.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconFolderOpen size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n Nenhum projeto encontrado.\n <br />\n Crie um projeto para começar.\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {projects.map((project) => {\n const isSelected = selectedProject?.id === project.id;\n return (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={isSelected ? 'bg-gray-50' : ''}\n onSelect={() => onSelectProject(project)}\n >\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\n <div className=\"flex items-center gap-2 w-full\">\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={32}\n />\n {project.title}\n </div>\n {isSelected && (\n <IconCheck className=\"size-4 text-gray-950\" />\n )}\n </div>\n </CommandItem>\n );\n })}\n </>\n )}\n </CommandList>\n </Command>\n {onManageProjects && (\n <>\n <div className=\"border-t border-gray-200\" />\n <Button\n variant=\"ghost\"\n className=\"paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n onClick={onManageProjects}\n >\n Gerenciar projetos\n </Button>\n </>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":";AAmCM,SA4EU,UA3ER,KADF;AAhCN,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,iBAAiB,gBAAgB,gBAAgB;AAerE,SAAS,sBAAsB;AAC7B,SACE,qBAAC,SAAI,WAAU,uDACb;AAAA,yBAAC,SAAI,WAAU,kCACb;AAAA,0BAAC,SAAI,WAAU,uCAAsC;AAAA,MACrD,oBAAC,SAAI,WAAU,+BAA8B;AAAA,OAC/C;AAAA,IACA,oBAAC,SAAI,WAAU,yCAAwC;AAAA,KACzD;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,EAAE,UAAU,cAAc,IAAI,gBAAgB,UAAU,QAAQ;AAEtE,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,SAAO,MACpB,sBACC,oBAAC,YAAO,WAAU,kBAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,qCAAqC,OAAO,6BAA6B,eAAe;AAAA;AAAA,IACrG,GACF,GAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,iBAAiB,CAAC,MAAa,EAAE,eAAe;AAAA,QAChD,mBAAmB,CAAC,UAAiB;AACnC,cAAI,UAAU,SAAS,SAAS,MAAM,MAAc,GAAG;AACrD,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,QAEA,+BAAC,SAAI,WAAU,2BACb;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA,gCAAC,UAAK,WAAU,4BAA2B,sBAAQ;AAAA,aACjD,gBAAgB,qBAChB,oBAAC,SAAI,WAAU,6BACZ,2BAAiB,gBAChB;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET;AAAA,sCAAC,YAAS,MAAM,IAAI;AAAA,kBAAE;AAAA;AAAA;AAAA,YAExB,GAEJ;AAAA,aAEJ;AAAA,UACA,qBAAC,WAAQ,WAAU,SACjB;AAAA,gCAAC,gBAAa,aAAY,eAAc;AAAA,YACxC,oBAAC,eAAY,WAAU,mEACpB,mBAAS,WAAW,IACnB,qBAAC,SAAI,WAAU,6EACb;AAAA,kCAAC,kBAAe,MAAM,IAAI,WAAU,iBAAgB;AAAA,cACpD,qBAAC,UAAK,WAAU,oDAAmD;AAAA;AAAA,gBAEjE,oBAAC,QAAG;AAAA,gBAAE;AAAA,iBAER;AAAA,eACF,IAEA,iCACE;AAAA,kCAAC,gBAAa,0CAA4B;AAAA,cACzC,SAAS,IAAI,CAAC,YAAY;AACzB,sBAAM,aAAa,iBAAiB,OAAO,QAAQ;AACnD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO,GAAG,QAAQ,KAAK,IAAI,QAAQ,EAAE;AAAA,oBACrC,UAAU,CAAC,QAAQ,KAAK;AAAA,oBACxB,WAAW,aAAa,eAAe;AAAA,oBACvC,UAAU,MAAM,gBAAgB,OAAO;AAAA,oBAEvC,+BAAC,SAAI,WAAU,2DACb;AAAA,2CAAC,SAAI,WAAU,kCACb;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,OAAO,QAAQ;AAAA,4BACf,MAAM,QAAQ;AAAA,4BACd,MAAM;AAAA;AAAA,wBACR;AAAA,wBACC,QAAQ;AAAA,yBACX;AAAA,sBACC,cACC,oBAAC,aAAU,WAAU,wBAAuB;AAAA,uBAEhD;AAAA;AAAA,kBAlBK,QAAQ;AAAA,gBAmBf;AAAA,cAEJ,CAAC;AAAA,eACH,GAEJ;AAAA,aACF;AAAA,UACC,oBACC,iCACE;AAAA,gCAAC,SAAI,WAAU,4BAA2B;AAAA,YAC1C;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBACV;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction } from 'react';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n titleRef?: RefObject<HTMLSpanElement | null>;\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n <div className=\"skeleton h-3.5 w-32 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\n </div>\n );\n}\n\nexport function ProjectSelectorPopover({\n open,\n setOpen,\n titleRef,\n projects,\n selectedProject,\n onSelectProject,\n onAddProject,\n onManageProjects,\n children,\n}: ProjectSelectorPopoverProps) {\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n {children ?? (\n <button className=\"cursor-pointer\">\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </button>\n )}\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n align=\"start\"\n sideOffset={8}\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\n onInteractOutside={(event: Event) => {\n if (titleRef?.current?.contains(event.target as Node)) {\n event.preventDefault();\n }\n }}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n {(onAddProject || onManageProjects) && (\n <div className=\"flex items-center gap-1.5\">\n {canAddProject && onAddProject && (\n <Button\n variant=\"secondary\"\n className=\"h-8! paragraph-small-semibold text-gray-950\"\n onClick={onAddProject}\n >\n <IconPlus size={16} />\n Adicionar\n </Button>\n )}\n </div>\n )}\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\n {projects.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconFolderOpen size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n Nenhum projeto encontrado.\n <br />\n Crie um projeto para começar.\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {projects.map((project) => {\n const isSelected = selectedProject?.id === project.id;\n return (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={isSelected ? 'bg-gray-50' : ''}\n onSelect={() => onSelectProject(project)}\n >\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\n <div className=\"flex items-center gap-2 w-full\">\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={32}\n />\n {project.title}\n </div>\n {isSelected && (\n <IconCheck className=\"size-4 text-gray-950\" />\n )}\n </div>\n </CommandItem>\n );\n })}\n </>\n )}\n </CommandList>\n </Command>\n {onManageProjects && (\n <>\n <div className=\"border-t border-gray-200\" />\n <Button\n variant=\"ghost\"\n className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n onClick={onManageProjects}\n >\n Gerenciar projetos\n </Button>\n </>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { useEffect, useState } from "react";
|
|
4
|
-
import { IconPlus,
|
|
4
|
+
import { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';
|
|
5
5
|
import { UserAvatar } from "../ui/data-display/UserAvatar";
|
|
6
6
|
import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
|
|
7
7
|
import { Button } from "../ui/buttons/Button";
|
|
@@ -99,7 +99,7 @@ export function UsersSelectorPopover({
|
|
|
99
99
|
|
|
100
100
|
<PopoverContent
|
|
101
101
|
className={cn(
|
|
102
|
-
"absolute right-0 md:right-[-88px] w-[
|
|
102
|
+
"absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
|
|
103
103
|
contentClassName,
|
|
104
104
|
)}
|
|
105
105
|
side={side}
|
|
@@ -120,22 +120,6 @@ export function UsersSelectorPopover({
|
|
|
120
120
|
<IconPlus size={16} />
|
|
121
121
|
Adicionar
|
|
122
122
|
</Button>
|
|
123
|
-
<Tooltip>
|
|
124
|
-
<TooltipTrigger asChild>
|
|
125
|
-
<Button
|
|
126
|
-
variant="secondary"
|
|
127
|
-
className="p-0 size-8"
|
|
128
|
-
onClick={() => {
|
|
129
|
-
window.location.href = `${accountsUrl}/my-teams`;
|
|
130
|
-
}}
|
|
131
|
-
>
|
|
132
|
-
<IconSettings size={18} />
|
|
133
|
-
</Button>
|
|
134
|
-
</TooltipTrigger>
|
|
135
|
-
<TooltipContent className="z-[1002]">
|
|
136
|
-
Visualizar todos usuários
|
|
137
|
-
</TooltipContent>
|
|
138
|
-
</Tooltip>
|
|
139
123
|
</div>
|
|
140
124
|
</div>
|
|
141
125
|
|
|
@@ -233,6 +217,16 @@ export function UsersSelectorPopover({
|
|
|
233
217
|
)}
|
|
234
218
|
</CommandList>
|
|
235
219
|
</Command>
|
|
220
|
+
<div className="border-t border-gray-200" />
|
|
221
|
+
<Button
|
|
222
|
+
variant="ghost"
|
|
223
|
+
className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
|
|
224
|
+
onClick={() => {
|
|
225
|
+
window.location.href = `${accountsUrl}/my-teams`;
|
|
226
|
+
}}
|
|
227
|
+
>
|
|
228
|
+
Gerenciar equipe
|
|
229
|
+
</Button>
|
|
236
230
|
</div>
|
|
237
231
|
</PopoverContent>
|
|
238
232
|
</Popover>
|
|
@@ -146,7 +146,7 @@ export function ProjectSelectorPopover({
|
|
|
146
146
|
<div className="border-t border-gray-200" />
|
|
147
147
|
<Button
|
|
148
148
|
variant="ghost"
|
|
149
|
-
className="paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
|
|
149
|
+
className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
|
|
150
150
|
onClick={onManageProjects}
|
|
151
151
|
>
|
|
152
152
|
Gerenciar projetos
|