eai-frontend-components 2.0.4 → 2.0.6

package/src/components/ui/custom/sidebar/types/sidebar.ts

@@ -1,31 +0,0 @@
-export const SidebarSubmenuType = {
-	COLLAPSIBLE: 'collapsible',
-	// Deprecated: Use COLLAPSIBLE instead
-	DROPDOWN: 'dropdown',
-} as const;
-export type SidebarSubmenuType = (typeof SidebarSubmenuType)[keyof typeof SidebarSubmenuType];
-
-export interface Module {
-	value: string;
-	path: string;
-	title: string;
-	icon: React.ReactNode;
-	subTitle: string;
-}
-
-export interface SidebarPage {
-	module: Module;
-	path: string;
-	icon?: React.ReactNode;
-	title: string;
-	hideSidebar: boolean;
-	displayOnlyresellerIsAdm?: boolean;
-	subMenuType?: SidebarSubmenuType;
-	subMenuItems?: {
-		label: string;
-		description?: string;
-		path: string;
-		displayOnlyresellerIsAdm?: boolean;
-		disabled?: boolean;
-	}[];
-}

package/src/components/ui/custom/table/data-table-export.tsx

@@ -1,126 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FieldErrors, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Button } from '../../button';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '../../dialog';
-import { Form } from '../../form';
-import { toast } from '../../use-toast';
-import { FormRadioGroup } from '../form/radio-group';
-import { ExportDataTable } from './types/data-table';
-
-interface DataTableExportProps {
-	exportData?: ExportDataTable;
-	totalRows: number;
-}
-
-export function DataTableExport({ exportData, totalRows }: DataTableExportProps) {
-	const exportXlSX = () => {
-		if (!exportData) return;
-
-		if (totalRows === 0) {
-			toast({
-				title: 'Não há dados para exportar.',
-				variant: 'destructive',
-			});
-			return {};
-		}
-		const params = new URLSearchParams(exportData.params).toString();
-		window.open(`${exportData.url}?${params}`, '_blank');
-	};
-
-	const renderExport = () => {
-		if (!exportData) return null;
-
-		if (exportData.type === 'xlsx') {
-			return (
-				<Button variant='secondary' onClick={exportXlSX}>
-					Exportar
-				</Button>
-			);
-		}
-
-		if (exportData.type === 'dialog') {
-			const ExportDataSchema = z.object({
-				model: z.string(),
-				format: z.string(),
-			});
-
-			const form = useForm<z.infer<typeof ExportDataSchema>>({
-				mode: 'onTouched',
-				resolver: zodResolver(ExportDataSchema),
-			});
-
-			const { control, trigger, handleSubmit } = form;
-
-			const onSubmit = async (values: z.infer<typeof ExportDataSchema>) => {
-				await trigger();
-
-				toast({
-					title: 'Em desenvolvimento.',
-					variant: 'destructive',
-				});
-			};
-
-			const onError = async (errors: FieldErrors<z.infer<typeof ExportDataSchema>>) => {
-				toast({
-					title: 'Erro ao salvar',
-					description: 'Verifique os campos obrigatórios',
-					variant: 'destructive',
-				});
-			};
-
-			return (
-				<Form {...(form as any)} onSubmit={handleSubmit(onSubmit, onError)}>
-					<Dialog>
-						<DialogTrigger asChild>
-							<Button variant='secondary'>Exportar</Button>
-						</DialogTrigger>
-						<DialogContent hideClose className='fixed p-6 rounded-lg w-[451px]'>
-							<DialogHeader>
-								<DialogTitle>Exportar</DialogTitle>
-								<DialogDescription />
-							</DialogHeader>
-							<div className='flex flex-col gap-6'>
-								<FormRadioGroup
-									control={control}
-									name='model'
-									label='Selecione o modelo de visualização'
-									options={[
-										{ value: '0', label: 'Resumido' },
-										{ value: '1', label: 'Detalhado' },
-									]}
-									className='text-sm font-normal'
-									classNameOptions='flex flex-col gap-4 mt-4 text-sm font-normal'
-								/>
-
-								<FormRadioGroup
-									control={control}
-									name='format'
-									label='Selecione o formato desejado para exportação'
-									options={[
-										{ value: '0', label: 'PDF' },
-										{ value: '1', label: 'XLSX' },
-									]}
-									className='text-sm font-normal'
-									classNameOptions='flex flex-col gap-4 mt-4 text-sm font-normal'
-								/>
-							</div>
-							<DialogFooter className='sm:justify-end gap-2'>
-								<Button type='button' variant='secondary'>
-									Fechar
-								</Button>
-								<Button type='button' variant='default' onClick={() => exportXlSX()}>
-									Exportar
-								</Button>
-							</DialogFooter>
-						</DialogContent>
-					</Dialog>
-				</Form>
-			);
-		}
-
-		return null;
-	};
-
-	return exportData && renderExport();
-}

package/src/components/ui/custom/table/data-table-footer.tsx

@@ -1,148 +0,0 @@
-import { PaginationState } from '@tanstack/react-table';
-import { Badge } from '../../badge';
-import {
-	Pagination,
-	PaginationContent,
-	PaginationEllipsis,
-	PaginationItem,
-	PaginationLink,
-	PaginationNext,
-	PaginationPrevious,
-} from '../../pagination';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../select';
-import { DataTableExport } from './data-table-export';
-import { ExportDataTable } from './types/data-table';
-
-interface DataTableFooterProps<TData> {
-	hidePagination?: boolean;
-	disablePagination?: boolean;
-	isLoading?: boolean;
-	totalRows: number;
-	totalPages: number;
-	currentPage: number;
-	pagination: PaginationState;
-	handlePageSize: (value: number) => void;
-	handlePage: (value: number) => void;
-	previousPage: {
-		action: () => void;
-		disabled: boolean;
-	};
-	nextPage: {
-		action: () => void;
-		disabled: boolean;
-	};
-	exportData?: ExportDataTable;
-}
-
-export function DataTableFooter<TData>({
-	isLoading,
-	totalRows,
-	totalPages,
-	currentPage,
-	hidePagination,
-	disablePagination,
-	pagination,
-	handlePageSize,
-	handlePage,
-	previousPage,
-	nextPage,
-	exportData,
-}: DataTableFooterProps<TData>) {
-	const renderPaginationPages = () => {
-		const paginationItems: JSX.Element[] = [];
-
-		const createPaginationItem = (pageIndex: number) => (
-			<PaginationItem key={pageIndex}>
-				<PaginationLink onClick={() => handlePage(pageIndex)} isActive={currentPage === pageIndex}>
-					{pageIndex + 1}
-				</PaginationLink>
-			</PaginationItem>
-		);
-
-		// Add first page
-		paginationItems.push(createPaginationItem(0));
-
-		// Add ellipsis if needed
-		if (currentPage > 2) {
-			paginationItems.push(<PaginationEllipsis key='start-ellipsis' />);
-		}
-
-		// Add pages before current page
-		for (let i = Math.max(1, currentPage - 1); i < currentPage; i++) {
-			paginationItems.push(createPaginationItem(i));
-		}
-
-		// Add current page
-		if (currentPage !== 0 && currentPage !== totalPages - 1) {
-			paginationItems.push(createPaginationItem(currentPage));
-		}
-
-		// Add pages after current page
-		for (let i = currentPage + 1; i <= Math.min(totalPages - 2, currentPage + 1); i++) {
-			paginationItems.push(createPaginationItem(i));
-		}
-
-		// Add ellipsis if needed
-		if (currentPage < totalPages - 3) {
-			paginationItems.push(<PaginationEllipsis key='end-ellipsis' />);
-		}
-
-		// Add last page
-		if (totalPages > 1) {
-			paginationItems.push(createPaginationItem(totalPages - 1));
-		}
-
-		return paginationItems;
-	};
-
-	return (
-		!hidePagination && (
-			<footer className='flex items-center justify-between h-[64px]'>
-				<div className='flex flex-row items-center gap-6'>
-					<div className='flex flex-row items-center gap-2'>
-						Linhas por página
-						<Select
-							value={pagination.pageSize.toString()}
-							onValueChange={(value) => handlePageSize(Number(value))}
-							disabled={isLoading || disablePagination}
-						>
-							<SelectTrigger className='w-20'>
-								<SelectValue placeholder='' className='text-slate-800 font-medium' />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectGroup>
-									<SelectItem value='25'>25</SelectItem>
-									<SelectItem value='50'>50</SelectItem>
-									<SelectItem value='100'>100</SelectItem>
-								</SelectGroup>
-							</SelectContent>
-						</Select>
-					</div>
-
-					<DataTableExport exportData={exportData} totalRows={totalPages} />
-				</div>
-
-				<div className='flex items-center gap-4'>
-					<div>
-						{!isLoading && (
-							<Badge variant='secondary'>{totalRows === 0 ? 'Nenhum item' : totalRows === 1 ? '1 item' : `${totalRows} itens`}</Badge>
-						)}
-					</div>
-					<div>
-						<Pagination>
-							<PaginationContent>
-								<PaginationItem>
-									<PaginationPrevious onClick={() => previousPage.action()} disabled={previousPage.disabled || disablePagination} />
-								</PaginationItem>
-								{renderPaginationPages()}
-								<PaginationItem>
-									<PaginationNext onClick={() => nextPage.action()} disabled={nextPage.disabled || disablePagination} />
-								</PaginationItem>
-							</PaginationContent>
-						</Pagination>
-					</div>
-				</div>
-			</footer>
-		)
-	);
-}

package/src/components/ui/custom/table/data-table-header.tsx

@@ -1,58 +0,0 @@
-import { Table, flexRender } from '@tanstack/react-table';
-import { ArrowUpDown, MoveDown, MoveUp } from 'lucide-react';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import { Checkbox } from '../../checkbox';
-import { TableHead, TableHeader, TableRow } from '../../table';
-
-interface DataTableHeaderProps<TData> {
-	table: Table<TData>;
-	canActionsRow?: boolean;
-	enableMultiRowSelection?: boolean;
-}
-
-export function DataTableHeader<TData>({ table, canActionsRow, enableMultiRowSelection }: DataTableHeaderProps<TData>) {
-	const headerGroups = table.getHeaderGroups();
-	return (
-		<TableHeader>
-			{headerGroups.map((headerGroup) => (
-				<TableRow key={headerGroup.id} className='bg-background dark:bg-datatable-accent rounded-t-md sticky top-0 z-10'>
-					{enableMultiRowSelection && (
-						<TableHead className='h-[65px] w-6'>
-							<Checkbox
-								checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-								onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-							/>
-						</TableHead>
-					)}
-					{headerGroup.headers.map((header) => (
-						<TableHead
-							key={header.id}
-							className={cn(
-								'h-[65px] whitespace-nowrap',
-								header.column.id === 'id' ? 'sticky left-0 z-20' : '',
-								header.column.columnDef.enableSorting ? 'pl-2' : '',
-							)}
-						>
-							{header.column.columnDef.enableSorting ? (
-								<Button variant='ghost' onClick={() => header.column.toggleSorting(header.column.getIsSorted() === 'asc')}>
-									{flexRender(header.column.columnDef.header, header.getContext())}
-									{header.column.getIsSorted() === 'asc' ? (
-										<MoveUp className='ml-2 h-4 w-4' />
-									) : header.column.getIsSorted() === 'desc' ? (
-										<MoveDown className='ml-2 h-4 w-4' />
-									) : (
-										<ArrowUpDown className='ml-2 h-4 w-4' />
-									)}
-								</Button>
-							) : (
-								flexRender(header.column.columnDef.header, header.getContext())
-							)}
-						</TableHead>
-					))}
-					{canActionsRow && <TableHead />}
-				</TableRow>
-			))}
-		</TableHeader>
-	);
-}

package/src/components/ui/custom/table/data-table-rows.tsx

@@ -1,94 +0,0 @@
-import { ColumnDef, Table, flexRender } from '@tanstack/react-table';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import { Checkbox } from '../../checkbox';
-import { Skeleton } from '../../skeleton';
-import { TableCell, TableRow } from '../../table';
-import { ActionRow } from './types/data-table';
-
-interface DataTableRowsProps<TData> {
-	table: Table<TData>;
-	columns: ColumnDef<TData>[];
-	isLoading?: boolean;
-	actionsRow?: ActionRow[];
-	textNoRecords?: string;
-	enableMultiRowSelection?: boolean;
-}
-
-export function DataTableRows<TData>({ table, isLoading, columns, actionsRow, textNoRecords, enableMultiRowSelection }: DataTableRowsProps<TData>) {
-	const rows = table.getRowModel().rows;
-
-	const renderLoadingRows = () => {
-		const rows: JSX.Element[] = [];
-
-		for (let i = 0; i < 10; i++) {
-			rows.push(
-				<TableRow key={`loading-row-${i}`}>
-					{enableMultiRowSelection && (
-						<TableCell className='py-2'>
-							<Skeleton className='h-10 w-full' />
-						</TableCell>
-					)}
-					{columns.map((column) => (
-						<TableCell key={column.id} className='py-2'>
-							<Skeleton className='h-10 w-full' />
-						</TableCell>
-					))}
-				</TableRow>,
-			);
-		}
-
-		return rows;
-	};
-
-	const renderRows = () => {
-		return rows.map((row) => (
-			<TableRow key={row.id} data-state={row.getIsSelected() && 'selected'} className='group'>
-				{enableMultiRowSelection && (
-					<TableCell className='py-4'>
-						<Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label='Select row' />
-					</TableCell>
-				)}
-				{row.getVisibleCells().map((cell) => (
-					<TableCell key={cell.id} className='py-4'>
-						{flexRender(cell.column.columnDef.cell, cell.getContext())}
-					</TableCell>
-				))}
-				{actionsRow && (
-					<TableCell
-						className='opacity-0 group-hover:opacity-100 hover:opacity-100 relative overflow-visible w-[0px]'
-						key={`buttons-${row.id}`}
-					>
-						<div className='absolute transition-colors group-hover:bg-datatable-accent overflow-visible right-5 -translate-y-1/2 flex space-x-4'>
-							{actionsRow.map((action, index) => (
-								<Button
-									key={`action-row-${index}`}
-									variant={(action.variant as 'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost') || 'default'}
-									className={cn('bg-datatable-accent', action.className?.(row.original) || '')}
-									onClick={() => action.onClick?.(row.original)}
-									disabled={action.disabled?.(row.original) || false}
-								>
-									{action.icon}
-									{action.label}
-								</Button>
-							))}
-						</div>
-					</TableCell>
-				)}
-			</TableRow>
-		));
-	};
-
-	const renderEmptyRows = () => {
-		const colSpan = columns.length + (actionsRow ? 1 : 0);
-		return (
-			<TableRow>
-				<TableCell colSpan={colSpan} className='text-center h-[53px]'>
-					{textNoRecords ? textNoRecords : 'Sem resultados.'}
-				</TableCell>
-			</TableRow>
-		);
-	};
-
-	return isLoading ? renderLoadingRows() : rows.length ? renderRows() : renderEmptyRows();
-}