@greatapps/common 1.1.487 → 1.1.489
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/SideBarNavigation.mjs +4 -1
- package/dist/components/layouts/SideBarNavigation.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +5 -2
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/SideBarNavigation.tsx +4 -1
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +5 -2
|
@@ -6,6 +6,7 @@ import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
|
|
|
6
6
|
import { useMdSidebarStore } from "../../store/useMdSidebarStore";
|
|
7
7
|
import { cn } from "../../infra/utils/clsx";
|
|
8
8
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
9
|
+
import { useWhitelabel } from "../../providers/whitelabel.provider";
|
|
9
10
|
function SideBarNavigation({
|
|
10
11
|
className,
|
|
11
12
|
children,
|
|
@@ -13,6 +14,7 @@ function SideBarNavigation({
|
|
|
13
14
|
}) {
|
|
14
15
|
const { isExpanded, collapse } = useDesktopSidebarStore();
|
|
15
16
|
const collapseMd = useMdSidebarStore((s) => s.collapse);
|
|
17
|
+
const { whitelabel } = useWhitelabel();
|
|
16
18
|
React.useEffect(() => {
|
|
17
19
|
const mql = window.matchMedia("(min-width: 1351px)");
|
|
18
20
|
const handler = (e) => {
|
|
@@ -34,7 +36,8 @@ function SideBarNavigation({
|
|
|
34
36
|
{
|
|
35
37
|
onClick: collapse,
|
|
36
38
|
className: cn(
|
|
37
|
-
"absolute
|
|
39
|
+
"absolute -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
|
|
40
|
+
whitelabel?.id == 1 ? "top-[59px]" : "top-[70px]",
|
|
38
41
|
isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none"
|
|
39
42
|
),
|
|
40
43
|
children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 16, className: "text-gray-500" })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { isExpanded, collapse } = useDesktopSidebarStore()\n const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n React.useEffect(() => {\n const mql = window.matchMedia('(min-width: 1351px)')\n const handler = (e: MediaQueryListEvent) => {\n if (e.matches) collapseMd()\n }\n if (mql.matches) collapseMd()\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [collapseMd])\n\n return (\n <div\n data-slot=\"sidebar-navigation\"\n className=\"relative hidden lg:block h-screen overflow-visible z-30\"\n >\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={collapse}\n className={cn(\n \"absolute
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\n\nfunction SideBarNavigation({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { isExpanded, collapse } = useDesktopSidebarStore()\n const collapseMd = useMdSidebarStore((s) => s.collapse)\n const { whitelabel } = useWhitelabel()\n\n React.useEffect(() => {\n const mql = window.matchMedia('(min-width: 1351px)')\n const handler = (e: MediaQueryListEvent) => {\n if (e.matches) collapseMd()\n }\n if (mql.matches) collapseMd()\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [collapseMd])\n\n return (\n <div\n data-slot=\"sidebar-navigation\"\n className=\"relative hidden lg:block h-screen overflow-visible z-30\"\n >\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={collapse}\n className={cn(\n \"absolute -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]\",\n whitelabel?.id == 1 ? 'top-[59px]' : 'top-[70px]',\n isExpanded ? \"opacity-100 scale-100\" : \"opacity-0 scale-0 pointer-events-none\",\n )}\n >\n <IconChevronLeft size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n {isExpanded && <TooltipContent side=\"right\">Recolher menu</TooltipContent>}\n </Tooltip>\n <div\n className={cn(\n \"h-full transition-[width] duration-300 ease-in-out overflow-hidden\",\n isExpanded ? \"w-[273px] border-r border-gray-200\" : \"w-0\",\n )}\n {...props}\n >\n <div className={cn(\"flex flex-col h-full min-w-[273px] w-[273px] p-4\", className)}>\n {children}\n </div>\n </div>\n </div>\n )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAkCY,SAUY,KAVZ;AAhCZ,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,uBAAuB;AACxD,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,QAAQ;AACtD,QAAM,EAAE,WAAW,IAAI,cAAc;AAErC,QAAM,UAAU,MAAM;AAClB,UAAM,MAAM,OAAO,WAAW,qBAAqB;AACnD,UAAM,UAAU,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAS,YAAW;AAAA,IAC9B;AACA,QAAI,IAAI,QAAS,YAAW;AAC5B,QAAI,iBAAiB,UAAU,OAAO;AACtC,WAAO,MAAM,IAAI,oBAAoB,UAAU,OAAO;AAAA,EAC1D,GAAG,CAAC,UAAU,CAAC;AAEf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,gBACP;AAAA,gBACA,YAAY,MAAM,IAAI,eAAe;AAAA,gBACrC,aAAa,0BAA0B;AAAA,cAC3C;AAAA,cAEA,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACzD,GACJ;AAAA,UACC,cAAc,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC7D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,aAAa,uCAAuC;AAAA,YACxD;AAAA,YACC,GAAG;AAAA,YAEJ,8BAAC,SAAI,WAAW,GAAG,oDAAoD,SAAS,GAC3E,UACL;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}
|
|
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
|
|
|
4
4
|
import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
|
|
5
5
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
6
6
|
import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
|
|
7
|
-
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from "../../../index";
|
|
7
|
+
import { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel } from "../../../index";
|
|
8
8
|
import { IconChevronDown } from "@tabler/icons-react";
|
|
9
9
|
function ProjectItemSkeleton() {
|
|
10
10
|
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-[8.8px]", children: [
|
|
@@ -23,6 +23,7 @@ function ProjectSelector({
|
|
|
23
23
|
onAddProject,
|
|
24
24
|
onManageProjects
|
|
25
25
|
}) {
|
|
26
|
+
const { whitelabel } = useWhitelabel();
|
|
26
27
|
const { breakpoint } = useAppNavigationContext();
|
|
27
28
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
28
29
|
const [activeSection, setActiveSection] = useState(null);
|
|
@@ -35,7 +36,9 @@ function ProjectSelector({
|
|
|
35
36
|
}
|
|
36
37
|
}, [openProjectList, breakpoint, clearProjectList]);
|
|
37
38
|
if (breakpoint === "desktop" || breakpoint === "md") {
|
|
38
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
39
|
+
return /* @__PURE__ */ jsx("div", { className: cn(
|
|
40
|
+
whitelabel?.id != 1 ? "mt-[14.5px.5px] mb-[7px]" : "mt-[6.5px] mb-[3px]"
|
|
41
|
+
), children: /* @__PURE__ */ jsx("div", { className: "flex items-center h-7", children: /* @__PURE__ */ jsx(
|
|
39
42
|
ProjectSelectorPopover,
|
|
40
43
|
{
|
|
41
44
|
open: isPopoverOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { breakpoint } = useAppNavigationContext();\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover (aligned with NavBar logo + separator)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel } from '../../../index';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { whitelabel } = useWhitelabel();\n const { breakpoint } = useAppNavigationContext();\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover (aligned with NavBar logo + separator)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className={cn(\n whitelabel?.id != 1 ? \"mt-[14.5px.5px] mb-[7px]\" : \"mt-[6.5px] mb-[3px]\"\n )}>\n <div className=\"flex items-center h-7\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={setIsPopoverOpen}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n isLoading={isLoading}\n isFetchingNextPage={isFetchingNextPage}\n hasNextPage={hasNextPage}\n onLoadMore={onLoadMore}\n onSelectProject={onSelectProject}\n onAddProject={onAddProject}\n onManageProjects={onManageProjects}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px]\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n </div>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={(event) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }}\n >\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -6,6 +6,7 @@ import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
|
|
|
6
6
|
import { useMdSidebarStore } from "../../store/useMdSidebarStore"
|
|
7
7
|
import { cn } from "../../infra/utils/clsx"
|
|
8
8
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
|
|
9
|
+
import { useWhitelabel } from "../../providers/whitelabel.provider";
|
|
9
10
|
|
|
10
11
|
function SideBarNavigation({
|
|
11
12
|
className,
|
|
@@ -14,6 +15,7 @@ function SideBarNavigation({
|
|
|
14
15
|
}: React.ComponentProps<"div">) {
|
|
15
16
|
const { isExpanded, collapse } = useDesktopSidebarStore()
|
|
16
17
|
const collapseMd = useMdSidebarStore((s) => s.collapse)
|
|
18
|
+
const { whitelabel } = useWhitelabel()
|
|
17
19
|
|
|
18
20
|
React.useEffect(() => {
|
|
19
21
|
const mql = window.matchMedia('(min-width: 1351px)')
|
|
@@ -35,7 +37,8 @@ function SideBarNavigation({
|
|
|
35
37
|
<button
|
|
36
38
|
onClick={collapse}
|
|
37
39
|
className={cn(
|
|
38
|
-
"absolute
|
|
40
|
+
"absolute -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
|
|
41
|
+
whitelabel?.id == 1 ? 'top-[59px]' : 'top-[70px]',
|
|
39
42
|
isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
|
|
40
43
|
)}
|
|
41
44
|
>
|
|
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, RefObject } from 'react';
|
|
|
4
4
|
import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
|
|
5
5
|
import { useAppNavigationContext } from '../AppNavigationContext';
|
|
6
6
|
import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
|
|
7
|
-
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
|
|
7
|
+
import { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel } from '../../../index';
|
|
8
8
|
import { IconChevronDown } from '@tabler/icons-react';
|
|
9
9
|
import type { NavigationProject } from '../types';
|
|
10
10
|
|
|
@@ -40,6 +40,7 @@ export function ProjectSelector({
|
|
|
40
40
|
onAddProject,
|
|
41
41
|
onManageProjects,
|
|
42
42
|
}: ProjectSelectorProps) {
|
|
43
|
+
const { whitelabel } = useWhitelabel();
|
|
43
44
|
const { breakpoint } = useAppNavigationContext();
|
|
44
45
|
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
|
45
46
|
const [activeSection, setActiveSection] = useState<'projects' | null>(null);
|
|
@@ -56,7 +57,9 @@ export function ProjectSelector({
|
|
|
56
57
|
// Desktop and md: title + popover (aligned with NavBar logo + separator)
|
|
57
58
|
if (breakpoint === 'desktop' || breakpoint === 'md') {
|
|
58
59
|
return (
|
|
59
|
-
<div className=
|
|
60
|
+
<div className={cn(
|
|
61
|
+
whitelabel?.id != 1 ? "mt-[14.5px.5px] mb-[7px]" : "mt-[6.5px] mb-[3px]"
|
|
62
|
+
)}>
|
|
60
63
|
<div className="flex items-center h-7">
|
|
61
64
|
<ProjectSelectorPopover
|
|
62
65
|
open={isPopoverOpen}
|