@greatapps/common 1.1.90 → 1.1.92

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { useState, useRef, useEffect, RefObject } from 'react';
+import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
+import Image from 'next/image';
+import { useAppNavigationContext } from '../AppNavigationContext';
+import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
+import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
+import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../../../index';
+import { ChevronDown, Plus, Settings } from 'lucide-react';
+import type { NavigationProject } from '../types';
+
+export interface ProjectSelectorProps {
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject: () => void;
+  onManageProjects: () => void;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center gap-2 p-2">
+      <div className="size-8 rounded-lg bg-gray-100 animate-pulse shrink-0" />
+      <div className="h-3.5 w-32 rounded bg-gray-100 animate-pulse" />
+    </div>
+  );
+}
+
+export function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+}: ProjectSelectorProps) {
+  const { breakpoint } = useAppNavigationContext();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
+  const titleRef = useRef<HTMLDivElement>(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+
+  useEffect(() => {
+    if (openProjectList && breakpoint === 'mobile') {
+      setActiveSection('projects');
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+
+  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
+  if (breakpoint === 'desktop' || breakpoint === 'md') {
+    return (
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 truncate select-none" ref={titleRef}>
+          {isLoading ? (
+            <div className="h-4 w-32 rounded bg-gray-100 animate-pulse" />
+          ) : (
+            <span
+              className="cursor-pointer paragraph-medium-semibold text-gray-600 truncate"
+              onClick={() => setIsPopoverOpen((v) => !v)}
+            >
+              {selectedProject?.title && selectedProject.title.length > 15
+                ? `${selectedProject.title.slice(0, 15)}…`
+                : selectedProject?.title}
+            </span>
+          )}
+          <ProjectSelectorPopover
+            open={isPopoverOpen}
+            setOpen={setIsPopoverOpen}
+            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
+            projects={projects}
+            selectedProject={selectedProject}
+            onSelectProject={onSelectProject}
+            onAddProject={onAddProject}
+            onManageProjects={onManageProjects}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <UsersSelectorPopover projectId={selectedProject?.id} />
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile: inline collapsible accordion
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
+          <ChevronDown
+            size={20}
+            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
+            className={`transition-transform duration-200 cursor-pointer ${
+              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
+            }`}
+          />
+        </div>
+        <UsersSelectorPopover projectId={selectedProject?.id} />
+      </div>
+      {activeSection === 'projects' && (
+        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            <div className="flex items-center gap-1.5">
+              <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
+                <Plus size={16} />
+                Adicionar
+              </Button>
+              <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
+                <Settings size={18} />
+              </Button>
+            </div>
+          </div>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : (
+                projects.map((project) => (
+                  <CommandItem
+                    key={project.id}
+                    value={project.title}
+                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
+                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
+                  >
+                    <Image
+                      alt="Icon Project"
+                      src={
+                        project.photo
+                          ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`
+                          : '/images/Logomark.png'
+                      }
+                      width={32}
+                      height={32}
+                      className="rounded-lg"
+                    />
+                    {project.title}
+                  </CommandItem>
+                ))
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/navigation/types.ts

@@ -0,0 +1,6 @@
+export interface NavigationProject {
+  id: number;
+  title: string;
+  photo?: string | null;
+  total_users?: string;
+}

package/src/index.ts

@@ -105,6 +105,12 @@ export type {
 export { NavBarItem } from "./components/layouts/NavBarItem";
 export type { NavBarItemProps } from "./components/layouts/NavBarItem";
 
+// Navigation
+export { AppNavigation } from './components/navigation/AppNavigation';
+export type { NavItemConfig } from './components/navigation/subcomponents/NavItems';
+export type { NavigationProject } from './components/navigation/types';
+export { useMobileNavbarSheet } from './store/useMobileNavbarSheet';
+
 // UI - Buttons
 export { Button, buttonVariants } from "./components/ui/buttons/Button";
 export { CopyButton } from "./components/ui/buttons/CopyButton";

package/src/infra/api/client.ts

@@ -117,19 +117,15 @@ class ApiClient {
     return this.request<T>(endpoint, {
       ...config,
       method: 'POST',
-      body: data ? JSON.stringify(data) : undefined,
+      body: data instanceof FormData ? data : data ? JSON.stringify(data) : undefined,
     });
   }
 
-  async postFormData<T>(endpoint: string, data: FormData, config?: RequestConfig): Promise<T> {
-    return this.request<T>(endpoint, { ...config, method: 'POST', body: data });
-  }
-
   async put<T>(endpoint: string, data?: unknown, config?: RequestConfig): Promise<T> {
     return this.request<T>(endpoint, {
       ...config,
       method: 'PUT',
-      body: data ? JSON.stringify(data) : undefined,
+      body: data instanceof FormData ? data : data ? JSON.stringify(data) : undefined,
     });
   }
 
@@ -137,7 +133,7 @@ class ApiClient {
     return this.request<T>(endpoint, {
       ...config,
       method: 'PATCH',
-      body: data ? JSON.stringify(data) : undefined,
+      body: data instanceof FormData ? data : data ? JSON.stringify(data) : undefined,
     });
   }
 

package/src/store/useMobileNavbarSheet.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+
+interface MobileNavbarSheetStore {
+  isOpen: boolean;
+  openProjectList: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  openWithProjectList: () => void;
+  clearProjectList: () => void;
+}
+
+export const useMobileNavbarSheet = create<MobileNavbarSheetStore>((set) => ({
+  isOpen: false,
+  openProjectList: false,
+  open: () => set({ isOpen: true, openProjectList: false }),
+  close: () => set({ isOpen: false, openProjectList: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen, openProjectList: false })),
+  openWithProjectList: () => set({ isOpen: true, openProjectList: true }),
+  clearProjectList: () => set({ openProjectList: false }),
+}));