eai-frontend-components 2.0.4

package/src/components/ui/table.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
+	<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+	<thead ref={ref} className={cn('sticky top-0 [&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+	<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+	<tfoot ref={ref} className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
+	<tr
+		ref={ref}
+		className={cn('border-b transition-colors hover:bg-datatable-accent', 'data-[state=selected]:bg-background-secondary', className)}
+		{...props}
+	/>
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn('h-12 py-[12.25px] px-6 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className)}
+		{...props}
+	/>
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+	<td ref={ref} className={cn('align-middle px-6 [&:has([role=checkbox])]:pr-0', className)} {...props} />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
+	<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+

package/src/components/ui/tabs.tsx

@@ -0,0 +1,47 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(
+	({ className, ...props }, ref) => (
+		<TabsPrimitive.List
+			ref={ref}
+			className={cn('inline-flex h-10 items-center justify-center rounded-md bg-background-elevated p-1 text-muted-foreground', className)}
+			{...props}
+		/>
+	),
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(
+	({ className, ...props }, ref) => (
+		<TabsPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(
+	({ className, ...props }, ref) => (
+		<TabsPrimitive.Content
+			ref={ref}
+			className={cn(
+				'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+

package/src/components/ui/textarea.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+function classBorderColor(className: string | undefined, ariaInvalid: boolean | undefined) {
+	if (className?.includes('border-none')) {
+		return '';
+	}
+	return ariaInvalid ? 'border-red-600' : 'border-input';
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(({ className, ...props }, ref) => {
+	return (
+		<textarea
+			className={cn(
+				'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
+

package/src/components/ui/toast.tsx

@@ -0,0 +1,88 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport ref={ref} className={cn('fixed top-0 right-0 p-4 space-y-2 z-[100]', className)} {...props} />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+	'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-top-full',
+	{
+		variants: {
+			variant: {
+				default: 'border bg-background text-foreground',
+				destructive: 'bg-white text-zinc-950',
+				success: 'bg-white text-zinc-950',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+	return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Action>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>>(
+	({ className, ...props }, ref) => (
+		<ToastPrimitives.Action
+			ref={ref}
+			className={cn(
+				'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-background-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Close>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>>(
+	({ className, ...props }, ref) => (
+		<ToastPrimitives.Close
+			ref={ref}
+			className={cn(
+				'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+				className,
+			)}
+			toast-close=''
+			{...props}
+		>
+			<X className='h-4 w-4' />
+		</ToastPrimitives.Close>
+	),
+);
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Title>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>>(
+	({ className, ...props }, ref) => <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />,
+);
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => <ToastPrimitives.Description ref={ref} className={cn('text-sm opacity-90', className)} {...props} />);
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, type ToastActionElement, type ToastProps };
+

package/src/components/ui/toaster.tsx

@@ -0,0 +1,49 @@
+import { Check, CircleX } from 'lucide-react';
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast';
+import { useToast } from './use-toast';
+
+export function Toaster() {
+	const { toasts } = useToast();
+
+	const getIcon = (icon: React.ReactNode, variant: string | null) => {
+		if (icon) {
+			return icon;
+		}
+
+		switch (variant) {
+			case 'success':
+				return (
+					<div className='mr-3 p-px rounded-full bg-emerald-700'>
+						<Check size={16} className='text-white' />
+					</div>
+				);
+			case 'destructive':
+				return (
+					<div className='mr-3 p-px rounded-full bg-red-700'>
+						<CircleX size={16} className='text-white' />
+					</div>
+				);
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<ToastProvider>
+			{toasts.map(({ id, title, description, action, icon, variant, ...props }) => (
+				<Toast key={id} {...props} variant={variant} className='p-4 w-[334px] rounded-lg'>
+					<div className='grid gap-1'>
+						<div className='flex items-center'>
+							{getIcon(icon, variant ?? null)}
+							{title && <ToastTitle>{title}</ToastTitle>} {/* title deve funcionar aqui */}
+						</div>
+						{description && <ToastDescription>{description}</ToastDescription>}
+					</div>
+					{action}
+					<ToastClose className='text-white' />
+				</Toast>
+			))}
+			<ToastViewport />
+		</ToastProvider>
+	);
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,31 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md bg-background-primary text-white px-3 py-1.5 text-sm shadow-md 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',
+			className,
+		)}
+		{...props}
+	>
+		{props.children}
+		<TooltipPrimitive.Arrow className='z-50 fill-primary 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' />
+	</TooltipPrimitive.Content>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+

package/src/components/ui/use-calendar.tsx

@@ -0,0 +1,61 @@
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover';
+import { format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import { CalendarDays } from 'lucide-react';
+import React from 'react';
+import { DateRange } from 'react-day-picker';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { Calendar } from './calendar';
+
+interface CalendarFormProps extends React.HTMLAttributes<HTMLDivElement> {
+	getDataFilter: (from: Date | null, to: Date | null) => void;
+}
+
+export default function UseCalendar({ className, getDataFilter }: CalendarFormProps) {
+	const endDate = null;
+	const startDate = null;
+
+	const [date, setDate] = React.useState<DateRange | any>({
+		from: startDate,
+		to: endDate,
+	});
+
+	const submitDate = () => {
+		if (date.from !== null && date.to !== null) {
+			getDataFilter(date.from, date.to);
+		}
+	};
+
+	return (
+		<div className={cn('grid gap-2', className)}>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						id='date'
+						variant={'outline'}
+						className={'flex justify-center items-center px-4 py-2 cursor-pointer bg-primaryBack text-textFilter rounded-md'}
+					>
+						<CalendarDays color='#0F172A' size={16} className='mr-4' />
+						{date?.to ? (
+							<>
+								{format(date.from, 'dd/MM', { locale: ptBR })} - {format(date.to, 'dd/MM', { locale: ptBR })}
+							</>
+						) : (
+							<span>Filtrar por Período</span>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className='w-auto p-0 testeCalendar flex flex-col justify-center bg-white  z-10 shadow-md text-black ' align='start'>
+					<Calendar mode='range' locale={ptBR} selected={date} onSelect={setDate} className='  ' />
+
+					<PopoverClose className='flex justify-center items-center p-4'>
+						<Button className='w-[150px] bg-background-primary mt-8  px-4 py-2 text-white' onClick={submitDate}>
+							Aplicar Filtro
+						</Button>
+					</PopoverClose>
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
+}

package/src/components/ui/use-toast.ts

@@ -0,0 +1,186 @@
+// Inspired by react-hot-toast library
+import * as React from 'react';
+
+import type { ToastActionElement, ToastProps } from './toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+	id: string;
+	title?: React.ReactNode;
+	description?: React.ReactNode;
+	action?: ToastActionElement;
+	icon?: React.ReactNode;
+};
+
+const actionTypes = {
+	ADD_TOAST: 'ADD_TOAST',
+	UPDATE_TOAST: 'UPDATE_TOAST',
+	DISMISS_TOAST: 'DISMISS_TOAST',
+	REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+	| {
+			type: ActionType['ADD_TOAST'];
+			toast: ToasterToast;
+	  }
+	| {
+			type: ActionType['UPDATE_TOAST'];
+			toast: Partial<ToasterToast>;
+	  }
+	| {
+			type: ActionType['DISMISS_TOAST'];
+			toastId?: ToasterToast['id'];
+	  }
+	| {
+			type: ActionType['REMOVE_TOAST'];
+			toastId?: ToasterToast['id'];
+	  };
+
+interface State {
+	toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+	if (toastTimeouts.has(toastId)) {
+		return;
+	}
+
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: 'REMOVE_TOAST',
+			toastId: toastId,
+		});
+	}, TOAST_REMOVE_DELAY);
+
+	toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case 'ADD_TOAST':
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			};
+
+		case 'UPDATE_TOAST':
+			return {
+				...state,
+				toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+			};
+
+		case 'DISMISS_TOAST': {
+			const { toastId } = action;
+
+			if (toastId) {
+				addToRemoveQueue(toastId);
+			} else {
+				for (const toast of state.toasts) {
+					addToRemoveQueue(toast.id);
+				}
+			}
+
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+						  }
+						: t,
+				),
+			};
+		}
+		case 'REMOVE_TOAST':
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				};
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			};
+	}
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+	memoryState = reducer(memoryState, action);
+	for (const listener of listeners) {
+		listener(memoryState);
+	}
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+	const id = genId();
+
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: 'UPDATE_TOAST',
+			toast: { ...props, id },
+		});
+	const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+	dispatch({
+		type: 'ADD_TOAST',
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			},
+		},
+	});
+
+	return {
+		id: id,
+		dismiss,
+		update,
+	};
+}
+
+function useToast() {
+	const [state, setState] = React.useState<State>(memoryState);
+
+	React.useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) {
+				listeners.splice(index, 1);
+			}
+		};
+	}, [state]);
+
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+	};
+}
+
+export { toast, useToast };

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 1350;
+
+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;
+}