@evolution-soft/ui 1.0.0 → 1.0.3

package/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "./utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/components/ui/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/components/ui/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/contexts/AnimationSettingsContext.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+interface AnimationSettingsContextType {
+  lottieAnimationsEnabled: boolean;
+  otherLottieAnimationsEnabled: boolean;
+  setLottieAnimationsEnabled: (enabled: boolean) => void;
+  setOtherLottieAnimationsEnabled: (enabled: boolean) => void;
+  toggleLottieAnimations: () => void;
+  toggleOtherLottieAnimations: () => void;
+}
+
+const AnimationSettingsContext = createContext<AnimationSettingsContextType | undefined>(undefined);
+
+interface AnimationSettingsProviderProps {
+  children: ReactNode;
+}
+
+export function AnimationSettingsProvider({ children }: AnimationSettingsProviderProps) {
+  const [lottieAnimationsEnabled, setLottieAnimationsEnabledState] = useState(true);
+  const [otherLottieAnimationsEnabled, setOtherLottieAnimationsEnabledState] = useState(true);
+
+  useEffect(() => {
+    const savedAnimations = localStorage.getItem('lottie-animations-enabled');
+    if (savedAnimations !== null) {
+      setLottieAnimationsEnabledState(JSON.parse(savedAnimations));
+    }
+
+    const savedOtherAnimations = localStorage.getItem('other-lottie-animations-enabled');
+    if (savedOtherAnimations !== null) {
+      setOtherLottieAnimationsEnabledState(JSON.parse(savedOtherAnimations));
+    }
+  }, []);
+
+  const setLottieAnimationsEnabled = (enabled: boolean) => {
+    setLottieAnimationsEnabledState(enabled);
+    localStorage.setItem('lottie-animations-enabled', JSON.stringify(enabled));
+
+    window.dispatchEvent(new CustomEvent('lottie-settings-changed', {
+      detail: { enabled }
+    }));
+  };
+
+  const setOtherLottieAnimationsEnabled = (enabled: boolean) => {
+    setOtherLottieAnimationsEnabledState(enabled);
+    localStorage.setItem('other-lottie-animations-enabled', JSON.stringify(enabled));
+
+    window.dispatchEvent(new CustomEvent('other-lottie-settings-changed', {
+      detail: { enabled }
+    }));
+  };
+
+  const toggleLottieAnimations = () => {
+    setLottieAnimationsEnabled(!lottieAnimationsEnabled);
+  };
+
+  const toggleOtherLottieAnimations = () => {
+    setOtherLottieAnimationsEnabled(!otherLottieAnimationsEnabled);
+  };
+
+  return (
+    <AnimationSettingsContext.Provider
+      value={{
+        lottieAnimationsEnabled,
+        otherLottieAnimationsEnabled,
+        setLottieAnimationsEnabled,
+        setOtherLottieAnimationsEnabled,
+        toggleLottieAnimations,
+        toggleOtherLottieAnimations,
+      }}
+    >
+      {children}
+    </AnimationSettingsContext.Provider>
+  );
+}
+
+export function useAnimationSettings() {
+  const context = useContext(AnimationSettingsContext);
+  if (context === undefined) {
+    throw new Error('useAnimationSettings must be used within an AnimationSettingsProvider');
+  }
+  return context;
+}

package/contexts/AuthContext.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+export interface User {
+    id: string;
+    name: string;
+    email: string;
+    [key: string]: unknown;
+}
+
+interface AuthContextType {
+    user: User | null;
+    isAuthenticated: boolean;
+    login: (email: string, password: string) => Promise<{ success: boolean; error?: string }>;
+    logout: () => Promise<void>;
+    initialLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}
+
+interface AuthProviderProps {
+    children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        try {
+            const savedUser = localStorage.getItem('auth_user');
+            if (savedUser) {
+                setUser(JSON.parse(savedUser));
+            }
+        } catch {
+            localStorage.removeItem('auth_user');
+        }
+        setLoading(false);
+    }, []);
+
+    const login = async (email: string, password: string): Promise<{ success: boolean; error?: string }> => {
+        try {
+            // Stub: accept any credentials in Storybook
+            const mockUser: User = { id: '1', name: 'Storybook User', email };
+            setUser(mockUser);
+            localStorage.setItem('auth_user', JSON.stringify(mockUser));
+            return { success: true };
+        } catch {
+            return { success: false, error: 'Erro de conexão. Tente novamente.' };
+        }
+    };
+
+    const logout = async () => {
+        setUser(null);
+        localStorage.removeItem('auth_user');
+    };
+
+    const value: AuthContextType = {
+        user,
+        isAuthenticated: !!user,
+        login,
+        logout,
+        initialLoading: loading
+    };
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    );
+}

package/contexts/ThemeContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+    mounted: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const [mounted, setMounted] = useState(false);
+    const [theme, setTheme] = useState<Theme>('light');
+
+    useEffect(() => {
+        setMounted(true);
+
+        const savedTheme = localStorage.getItem('theme') as Theme;
+        let initialTheme: Theme = 'light';
+
+        if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
+            initialTheme = savedTheme;
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            initialTheme = 'dark';
+        }
+
+        setTheme(initialTheme);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted) return;
+
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+
+        root.classList.add(theme);
+
+        localStorage.setItem('theme', theme);
+
+        root.style.display = 'none';
+        root.offsetHeight;
+        root.style.display = '';
+    }, [theme, mounted]);
+
+    const toggleTheme = () => {
+        document.body.classList.add('theme-transition-disabled');
+
+        setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+
+        setTimeout(() => {
+            document.body.classList.remove('theme-transition-disabled');
+        }, 50);
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme, mounted }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/hooks/useAnimationSettings.ts

@@ -0,0 +1,2 @@
+// Re-export from the real context so components get the full shape
+export { useAnimationSettings } from '../contexts/AnimationSettingsContext';

package/hooks/usePermissions.ts

@@ -0,0 +1,4 @@
+export const usePermissions = () => ({
+  hasPermission: (_permission: string) => true,
+  permissions: [] as string[],
+});

package/lib/persistentFilters.ts

@@ -0,0 +1,120 @@
+/**
+ * Utilitários para gerenciamento de filtros persistentes
+ * Permite salvar e carregar filtros entre sessões para diferentes módulos
+*/
+
+export interface FilterConfig {
+    page?: number;
+    itemsPerPage?: number;
+    search?: string | null;
+    sortOrder?: 'asc' | 'desc';
+    sortField?: string;
+    timestamp?: number;
+    
+    situacao?: string | null;
+    startDate?: string | null; 
+    endDate?: string | null;
+    searchTerm?: string;
+    selectedLines?: string[];
+    selectedLinhas?: number[];
+    possuiHorarios?: string;
+    selectedSituacao?: "Ativo" | "Inativo" | undefined;
+    filtroTurno?: string;
+    filtroAgrupamento?: string;
+    filtroLinhaProducao?: string;
+    filtroStatus?: string;
+    filtroOperador?: string;
+    
+    [key: string]: any;
+}
+
+export class PersistentFilters {
+    private static readonly SETTINGS_KEY = 'persistent-filters-enabled';
+    
+    /**
+     * Verifica se os filtros persistentes estão habilitados
+    */
+    static isEnabled(): boolean {
+        const setting = localStorage.getItem(this.SETTINGS_KEY);
+        return setting ? JSON.parse(setting) : false;
+    }
+    
+    /**
+     * Salva os filtros de um módulo específico
+    */
+    static saveFilters(module: string, filters: FilterConfig): void {
+        if (!this.isEnabled()) return;
+        
+        const filtersWithTimestamp = {
+            ...filters,
+            timestamp: Date.now()
+        };
+        
+        const key = `${module}-filters`;
+        localStorage.setItem(key, JSON.stringify(filtersWithTimestamp));
+    }
+    
+    /**
+     * Carrega os filtros salvos de um módulo específico
+    */
+    static loadFilters(module: string): FilterConfig | null {
+        if (!this.isEnabled()) return null;
+        
+        const key = `${module}-filters`;
+        const saved = localStorage.getItem(key);
+        
+        if (!saved) return null;
+        
+        try {
+            return JSON.parse(saved);
+        } catch (error) {
+            console.error(`Erro ao carregar filtros do módulo ${module}:`, error);
+            return null;
+        }
+    }
+    
+    /**
+     * Remove os filtros salvos de um módulo específico
+    */
+    static clearFilters(module: string): void {
+        const key = `${module}-filters`;
+        localStorage.removeItem(key);
+    }
+    
+    /**
+     * Remove todos os filtros salvos de todos os módulos
+    */
+    static clearAllFilters(): void {
+        const keys = Object.keys(localStorage).filter(key => key.endsWith('-filters'));
+        keys.forEach(key => localStorage.removeItem(key));
+    }
+    
+    /**
+     * Lista todos os módulos que possuem filtros salvos
+    */
+    static getModulesWithSavedFilters(): string[] {
+        const keys = Object.keys(localStorage).filter(key => key.endsWith('-filters'));
+        return keys.map(key => key.replace('-filters', ''));
+    }
+    
+    /**
+     * Hook personalizado para usar filtros persistentes em componentes React
+    */
+    static useModuleFilters(module: string, defaultFilters: FilterConfig) {
+        return {
+            saveFilters: (filters: FilterConfig) => this.saveFilters(module, filters),
+            loadFilters: () => this.loadFilters(module) || defaultFilters,
+            clearFilters: () => this.clearFilters(module),
+            isEnabled: () => this.isEnabled()
+        };
+    }
+}
+
+/**
+ * Constantes para nomes de módulos
+*/
+export const MODULES = {
+    // DASHBOARD: 'dashboard',
+} as const;
+
+export type ModuleName = typeof MODULES[keyof typeof MODULES];

package/lib/utils.ts

@@ -0,0 +1,2 @@
+// Re-export from ui/utils for backward compatibility
+export { cn } from '../components/ui/utils';

package/package.json

@@ -1,17 +1,26 @@
 {
   "name": "@evolution-soft/ui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "cli",
+    "components",
+    "contexts",
+    "hooks",
+    "lib",
+    "stores"
   ],
   "sideEffects": [
     "**/*.css"
   ],
+  "bin": {
+    "evolution-ui": "./cli/index.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/stores/theme.ts

@@ -0,0 +1,30 @@
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type ThemeProps = 'dark' | 'light'
+
+interface UseThemeStoreProps {
+  darkMode: boolean,
+  setDarkMode: (e: boolean) => void;
+  color: "cyan" | "orange" | "violet" | "emerald"
+  setColor: (e: "cyan" | "orange" | "violet" | "emerald") => void;
+}
+
+const useStore = create<UseThemeStoreProps>()(persist(
+  (set) => ({
+    darkMode: false,
+    setDarkMode: (e) => set({
+      darkMode: e
+    }),
+    color: 'cyan',
+    setColor: (e) => set({
+      color: e
+    })
+  }),
+  {
+    name: 'theme-storage',
+    storage:  createJSONStorage(() => localStorage),
+  }
+));
+
+export const useThemeStore = useStore;

package/stores/useThemeStore.ts

@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export function useThemeStore() {
+  const [theme, setTheme] = useState<'light' | 'dark'>(() => {
+    if (typeof window !== "undefined") {
+      return (localStorage.getItem("theme") as 'light' | 'dark') || "light";
+    }
+    return "light";
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const root = document.documentElement;
+      root.classList.remove('light', 'dark');
+      root.classList.add(theme);
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    document.body.classList.add('theme-transition-disabled');
+    
+    setTheme(prev => prev === "light" ? "dark" : "light");
+    
+    setTimeout(() => {
+      document.body.classList.remove('theme-transition-disabled');
+    }, 50);
+  };
+
+  return { theme, toggleTheme };
+}