mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 19:01:47 +00:00
refactor(core): move app para src e padroniza estrutura
This commit is contained in:
Felipe Coutinho
1
src/shared/components/logo-picker/index.ts
Normal file
1
src/shared/components/logo-picker/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { LogoPickerDialog, LogoPickerTrigger } from "./logo-picker";
|
||||
187
src/shared/components/logo-picker/logo-picker.tsx
Normal file
187
src/shared/components/logo-picker/logo-picker.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog";
|
||||
import { Input } from "@/shared/components/ui/input";
|
||||
import { deriveNameFromLogo, resolveLogoSrc } from "@/shared/lib/logo";
|
||||
import { cn } from "@/shared/utils/ui";
|
||||
|
||||
const DEFAULT_BASE_PATH = "/logos";
|
||||
|
||||
interface LogoPickerTriggerProps {
|
||||
selectedLogo?: string | null;
|
||||
disabled?: boolean;
|
||||
helperText?: string;
|
||||
placeholder?: string;
|
||||
basePath?: string;
|
||||
onOpen: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LogoPickerTrigger({
|
||||
selectedLogo,
|
||||
disabled,
|
||||
helperText = "Clique para trocar o logo",
|
||||
placeholder = "Selecionar logo",
|
||||
basePath = DEFAULT_BASE_PATH,
|
||||
onOpen,
|
||||
className,
|
||||
}: LogoPickerTriggerProps) {
|
||||
const hasLogo = Boolean(selectedLogo);
|
||||
const selectedLogoLabel = deriveNameFromLogo(selectedLogo);
|
||||
const selectedLogoPath =
|
||||
hasLogo && selectedLogo ? resolveLogoSrc(selectedLogo, { basePath }) : null;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded-md border p-2 text-left transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/40 bg-background shadow-xs">
|
||||
{selectedLogoPath ? (
|
||||
<Image
|
||||
src={selectedLogoPath}
|
||||
alt={selectedLogoLabel || "Logo selecionado"}
|
||||
width={28}
|
||||
height={28}
|
||||
className="h-full w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-[10px] text-muted-foreground">Logo</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate text-sm font-medium text-foreground">
|
||||
{selectedLogoLabel || placeholder}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{disabled ? "Nenhum logo disponível" : helperText}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface LogoPickerDialogProps {
|
||||
open: boolean;
|
||||
logos: string[];
|
||||
value: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSelect: (logo: string) => void;
|
||||
basePath?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
emptyState?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function LogoPickerDialog({
|
||||
open,
|
||||
logos,
|
||||
value,
|
||||
onOpenChange,
|
||||
onSelect,
|
||||
basePath = DEFAULT_BASE_PATH,
|
||||
title = "Escolher logo",
|
||||
description = "Selecione o logo que será usado para identificar este item.",
|
||||
emptyState,
|
||||
}: LogoPickerDialogProps) {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const filteredLogos = logos.filter((logo) => {
|
||||
if (!search.trim()) return true;
|
||||
const logoLabel = deriveNameFromLogo(logo).toLowerCase();
|
||||
return logoLabel.includes(search.toLowerCase().trim());
|
||||
});
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
if (!isOpen) setSearch("");
|
||||
onOpenChange(isOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{description ? (
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
) : null}
|
||||
</DialogHeader>
|
||||
|
||||
{logos.length > 0 && (
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
)}
|
||||
|
||||
{logos.length === 0 ? (
|
||||
(emptyState ?? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum logo encontrado. Adicione arquivos na pasta de logos.
|
||||
</p>
|
||||
))
|
||||
) : filteredLogos.length === 0 ? (
|
||||
<p className="py-4 text-center text-sm text-muted-foreground">
|
||||
Nenhum logo encontrado para “{search}”
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid max-h-custom-height-card grid-cols-4 gap-2 overflow-y-auto p-1 sm:grid-cols-4 md:grid-cols-5">
|
||||
{filteredLogos.map((logo) => {
|
||||
const isActive = value === logo;
|
||||
const logoLabel = deriveNameFromLogo(logo);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={logo}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
onSelect(logo);
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onTouchStart={(e) => e.stopPropagation()}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1 rounded-md bg-card p-2 text-center text-xs transition-all hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
isActive &&
|
||||
"border-primary bg-primary/5 ring-2 ring-primary/40",
|
||||
)}
|
||||
>
|
||||
<span className="flex w-full items-center justify-center overflow-hidden rounded-full">
|
||||
<Image
|
||||
src={resolveLogoSrc(logo, { basePath }) ?? logo}
|
||||
alt={logoLabel || logo}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full"
|
||||
/>
|
||||
</span>
|
||||
<span className="line-clamp-1 text-[10px] leading-tight text-muted-foreground">
|
||||
{logoLabel}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
58
src/shared/components/logo-picker/use-logo-selection.ts
Normal file
58
src/shared/components/logo-picker/use-logo-selection.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useCallback } from "react";
|
||||
import { deriveNameFromLogo } from "@/shared/lib/logo";
|
||||
|
||||
interface UseLogoSelectionProps {
|
||||
mode: "create" | "update";
|
||||
currentLogo: string;
|
||||
currentName: string;
|
||||
onUpdate: (updates: { logo: string; name?: string }) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook for handling logo selection with automatic name derivation
|
||||
*
|
||||
* When a logo is selected, automatically updates the name field if:
|
||||
* - Mode is "create", OR
|
||||
* - Current name is empty, OR
|
||||
* - Current name matches the previously derived name from logo
|
||||
*
|
||||
* @param props Configuration for logo selection behavior
|
||||
* @returns Handler function for logo selection
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* const handleLogoSelection = useLogoSelection({
|
||||
* mode: 'create',
|
||||
* currentLogo: formState.logo,
|
||||
* currentName: formState.name,
|
||||
* onUpdate: (updates) => updateFields(updates)
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
export function useLogoSelection({
|
||||
mode,
|
||||
currentLogo,
|
||||
currentName,
|
||||
onUpdate,
|
||||
}: UseLogoSelectionProps) {
|
||||
const handleLogoSelection = useCallback(
|
||||
(newLogo: string) => {
|
||||
const derived = deriveNameFromLogo(newLogo);
|
||||
const previousDerived = deriveNameFromLogo(currentLogo);
|
||||
|
||||
const shouldUpdateName =
|
||||
mode === "create" ||
|
||||
currentName.trim().length === 0 ||
|
||||
previousDerived === currentName.trim();
|
||||
|
||||
if (shouldUpdateName) {
|
||||
onUpdate({ logo: newLogo, name: derived });
|
||||
} else {
|
||||
onUpdate({ logo: newLogo });
|
||||
}
|
||||
},
|
||||
[mode, currentLogo, currentName, onUpdate],
|
||||
);
|
||||
|
||||
return handleLogoSelection;
|
||||
}
|
||||
Reference in New Issue
Block a user