@greatapps/common 1.1.699 → 1.1.700

package/src/components/navigation/PendingCancellationBanner.tsx

@@ -1,60 +1,60 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertTriangle, IconX } from '@tabler/icons-react';
-import { formatShortDate } from '../../infra/utils/date';
-import { useTranslations } from 'next-intl';
-
-interface PendingCancellationBannerProps {
-  limitDate?: Date | null;
-  onReactivate?: () => void;
-}
-
-export function PendingCancellationBanner({
-  limitDate,
-  onReactivate,
-}: PendingCancellationBannerProps) {
-  const translate = useTranslations();
-  const [visible, setVisible] = useState(true);
-  const [animated, setAnimated] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setAnimated(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const dismiss = useCallback(() => setVisible(false), []);
-
-  if (!visible) return null;
-
-  const formattedLimitDate = formatShortDate(limitDate);
-
-  return (
-    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
-      <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
-      >
-        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
-          <IconAlertTriangle size={16} className="text-zinc-950 shrink-0" />
-          <span className="paragraph-xsmall-semibold text-zinc-950">
-            {translate('common.navigation.banners.pending.message', { limitDate: formattedLimitDate ?? '' })}
-          </span>
-        </div>
-        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
-          <button
-            type="button"
-            className="flex items-center justify-center p-1.5 cursor-pointer"
-            onClick={onReactivate}
-          >
-            <span className="paragraph-xsmall-semibold text-zinc-950 underline">
-              {translate('common.navigation.banners.pending.reactivate')}
-            </span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-zinc-700" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertTriangle, IconX } from '@tabler/icons-react';
+import { formatShortDate } from '../../infra/utils/date';
+import { useTranslations } from 'next-intl';
+
+interface PendingCancellationBannerProps {
+  limitDate?: Date | null;
+  onReactivate?: () => void;
+}
+
+export function PendingCancellationBanner({
+  limitDate,
+  onReactivate,
+}: PendingCancellationBannerProps) {
+  const translate = useTranslations();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = useCallback(() => setVisible(false), []);
+
+  if (!visible) return null;
+
+  const formattedLimitDate = formatShortDate(limitDate);
+
+  return (
+    <div className="fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
+      <div
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-yellow-400 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
+      >
+        <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
+          <IconAlertTriangle size={16} className="text-zinc-950 shrink-0" />
+          <span className="paragraph-xsmall-semibold text-zinc-950">
+            {translate('common.navigation.banners.pending.message', { limitDate: formattedLimitDate ?? '' })}
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
+          <button
+            type="button"
+            className="flex items-center justify-center p-1.5 cursor-pointer"
+            onClick={onReactivate}
+          >
+            <span className="paragraph-xsmall-semibold text-zinc-950 underline">
+              {translate('common.navigation.banners.pending.reactivate')}
+            </span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-zinc-700" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -1,180 +1,180 @@
-'use client';
-
-import { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';
-import { useTranslations } from 'next-intl';
-import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  UserAvatar,
-} from '../../index';
-import { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';
-import type { Project } from '../../modules/projects/types';
-
-export interface ProjectSelectorPopoverProps {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  titleRef?: RefObject<HTMLSpanElement | null>;
-  projects: Project[];
-  selectedProject: Project | null;
-  isLoading?: boolean;
-  isFetchingNextPage?: boolean;
-  hasNextPage?: boolean;
-  onLoadMore?: () => void | Promise<unknown>;
-  onSelectProject: (project: Project) => void;
-  onManageProjects?: () => void;
-  search?: string;
-  onSearchChange?: (value: string) => void;
-  children?: React.ReactNode;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center justify-between px-2 py-2 gap-2">
-      <div className="flex items-center gap-2 flex-1">
-        <div className="skeleton size-9 rounded-lg shrink-0" />
-        <div className="skeleton h-4 w-36 rounded" />
-      </div>
-      <div className="skeleton size-4 rounded-full shrink-0" />
-    </div>
-  );
-}
-
-export function ProjectSelectorPopover({
-  open,
-  setOpen,
-  titleRef,
-  projects,
-  selectedProject,
-  isLoading,
-  isFetchingNextPage,
-  hasNextPage,
-  onLoadMore,
-  onSelectProject,
-  onManageProjects,
-  search,
-  onSearchChange,
-  children,
-}: ProjectSelectorPopoverProps) {
-  const translate = useTranslations();
-  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
-    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
-
-    const target = event.currentTarget;
-    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
-
-    if (distanceToBottom <= 80) {
-      onLoadMore();
-    }
-  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {children ?? (
-          <button className="cursor-pointer">
-            <IconChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </button>
-        )}
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[296px] max-h-[380px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-        align="start"
-        sideOffset={8}
-        onInteractOutside={(event: Event) => {
-          if (titleRef?.current?.contains(event.target as Node)) {
-            event.preventDefault();
-          }
-        }}
-      >
-        <div className="flex flex-col p-3 gap-2">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">{translate('common.navigation.projectSelector.title')}</span>
-          </div>
-          <Command className="gap-2" defaultValue=" " shouldFilter={!onSearchChange} value=" " onValueChange={() => {}}>
-            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={onSearchChange} />
-            <CommandList
-              className="custom-scrollbar paragraph-small-medium text-gray-600 max-h-[227px]"
-              onScroll={handleListScroll}
-            >
-              {isLoading ? (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                </>
-              ) : projects.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <IconFolderOpen size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    {translate('common.navigation.projectSelector.emptyLine1')}
-                    <br />
-                    {translate('common.navigation.projectSelector.emptyLine2')}
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
-                  {projects.map((project) => {
-                    const isSelected = selectedProject?.id === project.id;
-                    return (
-                      <CommandItem
-                        key={project.id}
-                        value={`${project.title}-${project.id}`}
-                        keywords={[project.title]}
-                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
-                        onSelect={() => onSelectProject(project)}
-                      >
-                        <div className="flex items-center justify-between w-full cursor-pointer">
-                          <div className="flex items-center gap-2 w-full">
-                            <UserAvatar
-                              photo={project.photo}
-                              name={project.title}
-                              size={36}
-                            />
-                            {project.title}
-                          </div>
-                          {isSelected && (
-                            <IconCheck className="size-4 text-gray-950" />
-                          )}
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                  {isFetchingNextPage && (
-                    <>
-                      <ProjectItemSkeleton />
-                      <ProjectItemSkeleton />
-                    </>
-                  )}
-                </>
-              )}
-            </CommandList>
-          </Command>
-          {onManageProjects && (
-            <>
-              <div className="border-t border-gray-200" />
-              <Button
-                variant="ghost"
-                className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
-                onClick={onManageProjects}
-              >
-                {translate('common.navigation.projectSelector.manageProjects')}
-              </Button>
-            </>
-          )}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+'use client';
+
+import { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';
+import { useTranslations } from 'next-intl';
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  UserAvatar,
+} from '../../index';
+import { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';
+import type { Project } from '../../modules/projects/types';
+
+export interface ProjectSelectorPopoverProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  titleRef?: RefObject<HTMLSpanElement | null>;
+  projects: Project[];
+  selectedProject: Project | null;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void | Promise<unknown>;
+  onSelectProject: (project: Project) => void;
+  onManageProjects?: () => void;
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  children?: React.ReactNode;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center justify-between px-2 py-2 gap-2">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="skeleton size-9 rounded-lg shrink-0" />
+        <div className="skeleton h-4 w-36 rounded" />
+      </div>
+      <div className="skeleton size-4 rounded-full shrink-0" />
+    </div>
+  );
+}
+
+export function ProjectSelectorPopover({
+  open,
+  setOpen,
+  titleRef,
+  projects,
+  selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  onSelectProject,
+  onManageProjects,
+  search,
+  onSearchChange,
+  children,
+}: ProjectSelectorPopoverProps) {
+  const translate = useTranslations();
+  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+    const target = event.currentTarget;
+    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+    if (distanceToBottom <= 80) {
+      onLoadMore();
+    }
+  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {children ?? (
+          <button className="cursor-pointer">
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[296px] max-h-[380px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+        align="start"
+        sideOffset={8}
+        onInteractOutside={(event: Event) => {
+          if (titleRef?.current?.contains(event.target as Node)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">{translate('common.navigation.projectSelector.title')}</span>
+          </div>
+          <Command className="gap-2" defaultValue=" " shouldFilter={!onSearchChange} value=" " onValueChange={() => {}}>
+            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={onSearchChange} />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 max-h-[227px]"
+              onScroll={handleListScroll}
+            >
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : projects.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
+                  <IconFolderOpen size={28} className="text-gray-300" />
+                  <span className="paragraph-small-medium text-center text-gray-500">
+                    {translate('common.navigation.projectSelector.emptyLine1')}
+                    <br />
+                    {translate('common.navigation.projectSelector.emptyLine2')}
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
+                  {projects.map((project) => {
+                    const isSelected = selectedProject?.id === project.id;
+                    return (
+                      <CommandItem
+                        key={project.id}
+                        value={`${project.title}-${project.id}`}
+                        keywords={[project.title]}
+                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
+                        onSelect={() => onSelectProject(project)}
+                      >
+                        <div className="flex items-center justify-between w-full cursor-pointer">
+                          <div className="flex items-center gap-2 w-full">
+                            <UserAvatar
+                              photo={project.photo}
+                              name={project.title}
+                              size={36}
+                            />
+                            {project.title}
+                          </div>
+                          {isSelected && (
+                            <IconCheck className="size-4 text-gray-950" />
+                          )}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                  {isFetchingNextPage && (
+                    <>
+                      <ProjectItemSkeleton />
+                      <ProjectItemSkeleton />
+                    </>
+                  )}
+                </>
+              )}
+            </CommandList>
+          </Command>
+          {onManageProjects && (
+            <>
+              <div className="border-t border-gray-200" />
+              <Button
+                variant="ghost"
+                className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
+                onClick={onManageProjects}
+              >
+                {translate('common.navigation.projectSelector.manageProjects')}
+              </Button>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}