@evolution-soft/ui 1.0.0 → 1.0.3

package/components/header/index.tsx

@@ -0,0 +1,146 @@
+import React, { type ForwardRefExoticComponent, type RefAttributes } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Buttons } from "./components/buttons";
+import { Separator } from "@/components/ui/separator";
+import { Title, type TitleProps } from "../title";
+import { Badge, badgeVariants } from "@/components/ui/badge";
+import { Subtitle, type SubtitleProps } from "../subtitle";
+
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "@/components/ui/breadcrumb";
+
+import clsx from "clsx";
+
+import type { IconType } from "react-icons";
+import type { IconProps } from "phosphor-react";
+import type { VariantProps } from "class-variance-authority";
+
+interface BreadCrumbItem {
+  label: string;
+  href?: string;
+  isCurrentPage?: boolean;
+}
+
+interface BreadCrumbProps {
+  items: BreadCrumbItem[];
+  className?: string;
+}
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+interface HeaderProps {
+  title: TitleProps | any;
+  subtitle?: SubtitleProps | any;
+  icon?: React.ReactNode | ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>> | IconType;
+  lefticon?: React.ReactNode;
+  button?: ButtonProps;
+  secondButton?: ButtonProps;
+  thirdButton?: ButtonProps;
+  fourButton?: ButtonProps;
+  customItem?: React.ReactNode;
+  breadCrumbs?: BreadCrumbProps;
+  upperTitle?: boolean;
+  badge?: {
+    text: string;
+    variant?: VariantProps<typeof badgeVariants>['variant'];
+    className?: string;
+  };
+  showSeparator?: boolean;
+  headerClassName?: string;
+  titleContainerClassName?: string;
+}
+function HeaderBreadcrumb({ items, className }: BreadCrumbProps) {
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            <BreadcrumbItem>
+              {item.isCurrentPage ? (
+                <BreadcrumbPage>{item.label}</BreadcrumbPage>
+              ) : item.href ? (
+                <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+              ) : (
+                <span>{item.label}</span>
+              )}
+            </BreadcrumbItem>
+            {index < items.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+export function Header(props: HeaderProps) {
+  return (
+    <>
+      <div className={clsx(
+        "flex w-full gap-4 items-center justify-center flex-col md:justify-between md:flex-row",
+        props.headerClassName
+      )}>
+        <div
+          className={clsx(
+            "flex gap-4 flex-col sm:flex-row items-center text-gray-700 dark:text-gray-300",
+            { "justify-between w-full": props.lefticon },
+            props.titleContainerClassName
+          )}
+        >
+          {props.icon && <>{props.icon}</>}
+          <div className="flex gap-4 flex-col sm:flex-row items-center text-gray-700 dark:text-gray-300">
+            <div className="flex flex-col items-center text-center md:text-left md:items-start">
+              {props.upperTitle && (
+                <div className="flex items-center gap-2 mb-1">
+                  <Title
+                    {...props.title}
+                    className={`line-clamp-1 ${props.title.className} `}
+                  />
+                  {props.badge && (
+                    <Badge variant={props.badge.variant} className={props.badge.className}>
+                      {props.badge.text}
+                    </Badge>
+                  )}
+                </div>
+              )}
+              {props.breadCrumbs && (
+                <HeaderBreadcrumb {...props.breadCrumbs} />
+              )}
+              {props.subtitle && <Subtitle {...props.subtitle} />}
+              {!props.upperTitle && (
+                <div className="flex items-center gap-2">
+                  <Title
+                    {...props.title}
+                    className={`line-clamp-1 ${props.title.className} `}
+                  />
+                  {props.badge && (
+                    <Badge variant={props.badge.variant} className={props.badge.className}>
+                      {props.badge.text}
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          {props.lefticon && <>{props.lefticon}</>}
+        </div>
+        <Buttons
+          customItem={props.customItem}
+          button={props.button}
+          secondButton={props.secondButton}
+          thirdButton={props.thirdButton}
+          fourButton={props.fourButton}
+        />
+      </div>
+      {props.showSeparator && (
+        <Separator className="my-4" />
+      )}
+    </>
+  );
+}

package/components/loading-default/index.tsx

@@ -0,0 +1,90 @@
+import { Activity } from 'react';
+
+interface LoadingDefaultProps {
+    loading: boolean;
+    error?: boolean;
+    text?: string;
+    minHeight?: string;
+    className?: string;
+    rows?: number;
+    showAvatar?: boolean;
+    showHeader?: boolean;
+}
+
+export default function LoadingDefault({
+    loading,
+    error = false,
+    text = "Carregando...",
+    minHeight = "350px",
+    className = "",
+    rows = 3,
+    showAvatar = true,
+    showHeader = true
+}: LoadingDefaultProps) {
+    return (
+        <Activity mode={loading && !error ? 'visible' : 'hidden'}>
+            <div className={`w-full ${className}`}>
+                <div
+                    className='w-full bg-card border border-border rounded-lg p-6 space-y-4'
+                    style={{ minHeight }}
+                >
+                    {/* Header Skeleton */}
+                    {showHeader && (
+                        <div className="flex items-center space-x-4">
+                            {showAvatar && (
+                                <div className="h-12 w-12 bg-muted rounded-full animate-pulse" />
+                            )}
+                            <div className="space-y-2 flex-1">
+                                <div className="h-4 bg-muted rounded animate-pulse w-1/4" />
+                                <div className="h-3 bg-muted rounded animate-pulse w-1/3" />
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Content Skeleton */}
+                    <div className="space-y-3">
+                        {Array.from({ length: rows }).map((_, index) => (
+                            <div key={index} className="space-y-2">
+                                <div
+                                    className="h-4 bg-muted rounded animate-pulse"
+                                    style={{
+                                        width: `${Math.random() * 40 + 60}%`,
+                                        animationDelay: `${index * 0.1}s`
+                                    }}
+                                />
+                                {index < rows - 1 && (
+                                    <div
+                                        className="h-3 bg-muted/70 rounded animate-pulse"
+                                        style={{
+                                            width: `${Math.random() * 30 + 40}%`,
+                                            animationDelay: `${index * 0.15 + 0.05}s`
+                                        }}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Footer Skeleton */}
+                    <div className="flex justify-between items-center pt-4">
+                        <div className="flex space-x-2">
+                            <div className="h-8 w-16 bg-muted rounded animate-pulse" />
+                            <div className="h-8 w-16 bg-muted rounded animate-pulse" />
+                        </div>
+                        <div className="h-8 w-20 bg-muted rounded animate-pulse" />
+                    </div>
+
+                    {/* Loading indicator com texto */}
+                    <div className="flex items-center justify-center gap-3 pt-2">
+                        <div className="flex space-x-1">
+                            <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                            <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                            <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                        </div>
+                        <span className="text-muted-foreground text-sm font-medium">{text}</span>
+                    </div>
+                </div>
+            </div>
+        </Activity>
+    );
+}

package/components/lottie-icon/index.tsx

@@ -0,0 +1,78 @@
+
+import Lottie from "lottie-react";
+import { useEffect, useRef, useState } from "react";
+
+interface LottieIconProps {
+    lightAnimationData: any;
+    darkAnimationData: any;
+    className?: string;
+    isActive?: boolean;
+    shouldPlay?: boolean;
+    isDark?: boolean;
+}
+
+export const LottieIcon = ({ lightAnimationData, darkAnimationData, className, isActive, shouldPlay = false }: LottieIconProps) => {
+    const lottieRef = useRef<any>(null);
+    const [key, setKey] = useState(0);
+    const [animationsEnabled, setAnimationsEnabled] = useState(true);
+
+    const [isDark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const checkDarkMode = () => {
+            setIsDark(document.documentElement.classList.contains('dark'));
+        };
+
+        checkDarkMode();
+
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+
+        return () => observer.disconnect();
+    }, []);
+
+    const animationData = isDark ? darkAnimationData : lightAnimationData;
+
+    useEffect(() => {
+        const checkAnimationSettings = () => {
+            const saved = localStorage.getItem('lottie-animations-enabled');
+            setAnimationsEnabled(saved !== null ? JSON.parse(saved) : true);
+        };
+
+        checkAnimationSettings();
+
+        const handleSettingsChange = (event: CustomEvent) => {
+            setAnimationsEnabled(event.detail.enabled);
+        };
+
+        window.addEventListener('lottie-settings-changed', handleSettingsChange as EventListener);
+
+        return () => {
+            window.removeEventListener('lottie-settings-changed', handleSettingsChange as EventListener);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (animationsEnabled && (shouldPlay || isActive)) {
+            setKey(prev => prev + 1);
+        } else if (lottieRef.current) {
+            lottieRef.current.stop();
+        }
+    }, [shouldPlay, isActive, isDark, animationsEnabled]);
+
+    return (
+        <div className={className}>
+            <Lottie
+                key={`${key}-${isDark ? 'dark' : 'light'}`}
+                lottieRef={lottieRef}
+                animationData={animationData}
+                loop={false}
+                autoplay={animationsEnabled && (shouldPlay || isActive)}
+                className="w-full h-full"
+            />
+        </div>
+    );
+};

package/components/not-found-default/index.tsx

@@ -0,0 +1,68 @@
+import { Activity } from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+import Lottie from 'lottie-react';
+import notFoundData from '@/public/animations/404-error-data.json';
+
+interface NotFoundDefaultProps {
+    loading: boolean;
+    error: boolean;
+    title?: string;
+    message?: string;
+    backButtonText?: string;
+    onBack?: () => void;
+    minHeight?: string;
+    className?: string;
+    animationSize?: string;
+}
+
+export default function NotFoundDefault({
+    loading,
+    error,
+    title = "Ops! Algo deu errado",
+    message = "Não foi possível carregar os dados solicitados",
+    backButtonText = "Voltar",
+    onBack,
+    minHeight = "350px",
+    className = "",
+    animationSize = "w-[100px] md:w-[280px]"
+}: NotFoundDefaultProps) {
+    return (
+        <Activity mode={!loading && error ? 'visible' : 'hidden'}>
+            <div className={`flex items-center justify-center bg-card w-full rounded-2xl ${className}`}>
+                <div
+                    className='flex flex-col w-full items-center gap-4 bg-card rounded-2xl shadow-lg px-6 py-8 border'
+                    style={{ minHeight }}
+                >
+                    <Lottie
+                        animationData={notFoundData}
+                        className={animationSize}
+                    />
+                    <div className='flex flex-col gap-3 justify-center items-center text-center'>
+                        <div className='space-y-2'>
+                            <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-200'>
+                                {title}
+                            </h3>
+                            <p className='text-gray-600 dark:text-gray-400 text-sm max-w-xs'>
+                                {message}
+                            </p>
+                        </div>
+                        {onBack && (
+                            <div className='flex flex-col sm:flex-row gap-3 justify-center items-center'>
+                                <Button
+                                    variant="outline"
+                                    onClick={onBack}
+                                    className='flex items-center gap-2 px-4 py-2 border-gray-300 hover:bg-gray-50 transition-colors'
+                                >
+                                    <ArrowLeft className="h-4 w-4" />
+                                    {backButtonText}
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Activity>
+    );
+}

package/components/settings-modal/index.tsx

@@ -0,0 +1,225 @@
+import { useState, useEffect } from 'react';
+
+import { Settings } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+import Lottie from 'lottie-react';
+
+import configAnimated from "@/public/animations/config-animated.json";
+import { PersistentFilters } from '@/lib/persistentFilters';
+import { useAnimationSettings } from '@/hooks/useAnimationSettings';
+
+interface SettingsModalProps {
+    collapsed?: boolean;
+}
+
+export function SettingsModal({ collapsed = false }: SettingsModalProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [dynamicSidebarEnabled, setDynamicSidebarEnabled] = useState(false);
+    const [persistentFiltersEnabled, setPersistentFiltersEnabled] = useState(true);
+
+    // Usar o contexto para as configurações de animação
+    const {
+        lottieAnimationsEnabled,
+        otherLottieAnimationsEnabled,
+        setLottieAnimationsEnabled,
+        setOtherLottieAnimationsEnabled
+    } = useAnimationSettings();
+
+    useEffect(() => {
+        // As configurações de animação agora são gerenciadas pelo contexto
+        // Apenas carregamos as outras configurações
+        const savedDynamicSidebar = localStorage.getItem('dynamic-sidebar-enabled');
+        if (savedDynamicSidebar !== null) {
+            setDynamicSidebarEnabled(JSON.parse(savedDynamicSidebar));
+        }
+
+        const savedPersistentFilters = localStorage.getItem('persistent-filters-enabled');
+        if (savedPersistentFilters !== null) {
+            setPersistentFiltersEnabled(JSON.parse(savedPersistentFilters));
+        }
+    }, []);
+
+    // As funções de toggle agora usam o contexto diretamente
+    const handleAnimationToggle = (enabled: boolean) => {
+        setLottieAnimationsEnabled(enabled);
+    };
+
+    const handleOtherAnimationToggle = (enabled: boolean) => {
+        setOtherLottieAnimationsEnabled(enabled);
+    };
+
+    const handleDynamicSidebarToggle = (enabled: boolean) => {
+        setDynamicSidebarEnabled(enabled);
+        localStorage.setItem('dynamic-sidebar-enabled', JSON.stringify(enabled));
+
+        window.dispatchEvent(new CustomEvent('dynamic-sidebar-settings-changed', {
+            detail: { enabled }
+        }));
+
+        window.dispatchEvent(new CustomEvent('reset-dynamic-sidebar-state'));
+
+        if (enabled) {
+            window.dispatchEvent(new CustomEvent('auto-collapse-sidebar'));
+        }
+    };
+
+    const handlePersistentFiltersToggle = (enabled: boolean) => {
+        setPersistentFiltersEnabled(enabled);
+        localStorage.setItem('persistent-filters-enabled', JSON.stringify(enabled));
+
+        window.dispatchEvent(new CustomEvent('persistent-filters-settings-changed', {
+            detail: { enabled }
+        }));
+
+        if (!enabled) {
+            PersistentFilters.clearAllFilters();
+            window.dispatchEvent(new CustomEvent('clear-saved-filters'));
+        }
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-6 w-6 shrink-0 rounded-full hover:bg-accent"
+                    title="Configurações"
+                >
+                    <Settings className="h-3 w-3" />
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-106.25 md:max-w-150 lg:max-w-3xl flex">
+                <div>
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Settings className="h-5 w-5" />
+                            Configurações
+                        </DialogTitle>
+                        <DialogDescription>
+                            Personalize a experiência do sistema de acordo com suas preferências.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <Card className='max-h-125 overflow-y-scroll gap-0'>
+                            <CardHeader className='pb-3 pt-4 dark:bg-slate-800 bg-blue-50 rounded-t-lg'>
+                                <CardTitle className="text-base font-semibold">Geral</CardTitle>
+                                <CardDescription className="text-sm">
+                                    Configurações gerais do sistema
+                                </CardDescription>
+                            </CardHeader>
+
+                            <CardContent className='pt-4'>
+                                <div className="space-y-5">
+
+                                    <div className="flex items-center justify-between gap-2">
+                                        <div className="space-y-1">
+                                            <Label htmlFor="persistent-filters" className="text-sm font-medium">
+                                                Salvar Filtros
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Manter filtros salvos entre sessões (busca, paginação, etc.)
+                                            </p>
+                                        </div>
+                                        <Switch
+                                            id="persistent-filters"
+                                            checked={persistentFiltersEnabled}
+                                            onCheckedChange={handlePersistentFiltersToggle}
+                                        />
+                                    </div>
+
+                                    <div className="flex items-center justify-between gap-2 pb-4">
+                                        <div className="space-y-1">
+                                            <Label htmlFor="dynamic-sidebar" className="text-sm font-medium">
+                                                Sidebar Dinâmica (Desktop)
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Expandir sidebar automaticamente ao passar o mouse (apenas desktop)
+                                            </p>
+                                        </div>
+                                        <Switch
+                                            id="dynamic-sidebar"
+                                            checked={dynamicSidebarEnabled}
+                                            onCheckedChange={handleDynamicSidebarToggle}
+                                        />
+                                    </div>
+
+                                </div>
+                            </CardContent>
+
+                            <CardHeader className='pb-2 pt-2 dark:bg-slate-800 bg-blue-50 '>
+                                <CardTitle className="text-base font-semibold">Interface</CardTitle>
+                                <CardDescription className="text-sm">
+                                    Configurações relacionadas à interface do usuário
+                                </CardDescription>
+                            </CardHeader>
+
+                            <CardContent className='pt-4'>
+                                <div className="space-y-5">
+                                    <div className="flex items-center justify-between gap-2">
+                                        <div className="space-y-1">
+                                            <Label htmlFor="lottie-animations" className="text-sm font-medium">
+                                                Animações dos Ícones
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Ativar/desativar animações Lottie nos ícones do sistema
+                                            </p>
+                                        </div>
+                                        <Switch
+                                            id="lottie-animations"
+                                            checked={lottieAnimationsEnabled}
+                                            onCheckedChange={handleAnimationToggle}
+                                        />
+                                    </div>
+
+                                    <div className="flex items-center justify-between gap-2">
+                                        <div className="space-y-1">
+                                            <Label htmlFor="other-lottie-animations" className="text-sm font-medium">
+                                                Outras Animações
+                                            </Label>
+                                            <p className="text-xs text-muted-foreground">
+                                                Ativar/desativar animações Lottie decorativas (páginas, modal)
+                                            </p>
+                                        </div>
+                                        <Switch
+                                            id="other-lottie-animations"
+                                            checked={otherLottieAnimationsEnabled}
+                                            onCheckedChange={handleOtherAnimationToggle}
+                                        />
+                                    </div>
+
+                                </div>
+                            </CardContent>
+                        </Card>
+
+                        <div className="text-xs text-muted-foreground text-center">
+                            As configurações são salvas automaticamente no seu navegador.
+                        </div>
+                    </div>
+                </div>
+                <div className='hidden md:flex justify-center items-center'>
+                    <Lottie
+                        animationData={configAnimated}
+                        loop={otherLottieAnimationsEnabled}
+                        autoplay={otherLottieAnimationsEnabled}
+                        className='max-w-125'
+                    />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}