eai-frontend-components 2.0.4 → 2.0.6

package/src/components/ui/custom/form/combobox.tsx

@@ -1,259 +0,0 @@
-import { Check, ChevronsUpDown, LoaderCircle, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { ControllerRenderProps, FieldValues } from 'react-hook-form';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../command';
-import * as FormComponents from '../../form';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-export interface ComboboxOption {
-	value: string | undefined;
-	icon?: React.ReactNode | undefined;
-	title: string;
-	subTitle?: string;
-	className?: string;
-}
-
-interface Props {
-	control: any;
-	name: string;
-	label?: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	options: ComboboxOption[];
-	selectedOption?: ComboboxOption;
-	iconLeft?: React.ReactNode | null;
-	iconRight?: React.ReactNode | null;
-	addEmptyOption?: boolean;
-	canUnselect?: boolean;
-	closePopUpOnChange?: boolean;
-	runInternalSearch?: boolean;
-	disabledSearch?: boolean;
-	onChange?: (option: ComboboxOption | undefined) => void;
-	onSearch?: (searchString: string) => void;
-	footerAction?: {
-		label: string;
-		icon?: React.ReactNode;
-		onClick: () => void;
-	};
-}
-
-export const FormCombobox: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder,
-	className,
-	disabled,
-	required,
-	options,
-	selectedOption,
-	iconLeft,
-	iconRight,
-	addEmptyOption,
-	canUnselect = false,
-	closePopUpOnChange = true,
-	runInternalSearch = true,
-	disabledSearch = false,
-	onChange,
-	onSearch,
-	footerAction,
-}) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	const [open, setOpen] = useState(false);
-	const [loading, setLoading] = useState<boolean>(false);
-	const [searchString, setSearchString] = useState<string>('');
-	const DEFAULT_PLACEHOLDER = 'Digite para buscar...';
-
-	useEffect(() => {
-		setLoading(false);
-	}, [options]);
-
-	const getOptions = () => {
-		if (options.length === 0) {
-			return [];
-		}
-
-		let filteredOptions = options;
-		if (runInternalSearch) {
-			filteredOptions = options.filter((option) => {
-				const title = option.title
-					.toLowerCase()
-					.normalize('NFD')
-					.replace(/[^a-z0-9\s]/gi, '');
-				const subTitle = option.subTitle
-					?.toLowerCase()
-					.normalize('NFD')
-					.replace(/[^a-z0-9\s]/gi, '');
-				const search = searchString
-					.toLowerCase()
-					.normalize('NFD')
-					.replace(/[^a-z0-9\s]/gi, '');
-
-				return title.includes(search) || subTitle?.includes(search);
-			});
-		}
-
-		if (addEmptyOption) {
-			filteredOptions.unshift({ value: undefined, title: '--Selecione--', subTitle: '' });
-		}
-
-		return filteredOptions;
-	};
-
-	const getSelectedOption = (value: string | undefined): ComboboxOption | undefined => {
-		const option = options.find((option) => option.value === value);
-
-		if (option) {
-			return option;
-		}
-
-		return selectedOption;
-	};
-
-	const handleSelect = (value: string | undefined, field: ControllerRenderProps<FieldValues, string>) => {
-		const option = value ? getSelectedOption(value) : undefined;
-
-		if (canUnselect) {
-			field.onChange(field.value === value ? undefined : value);
-		} else {
-			field.onChange(value);
-		}
-
-		if (onChange) {
-			onChange(option);
-		}
-		if (closePopUpOnChange) {
-			setOpen(false);
-		}
-	};
-
-	const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
-		const searchString = (event.target as HTMLInputElement).value;
-
-		if (onSearch) {
-			setLoading(true);
-			onSearch(searchString);
-		}
-		setSearchString(searchString);
-	};
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<Popover
-						open={open}
-						onOpenChange={(open) => {
-							if (!disabled) setOpen(open);
-						}}
-					>
-						<PopoverTrigger asChild>
-							<FormControl>
-								<div className={cn(`rounded-sm outline-none ${open ? 'ring-2 ring-ring ring-offset-2' : 'ring-0'}`, className)}>
-									<Button
-										type='button'
-										variant='outline'
-										role='combobox'
-										aria-expanded={open}
-										className={cn(
-											'justify-between disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50',
-											formState.errors[name] ? 'border-red-600' : '',
-											className,
-										)}
-										disabled={disabled || formState.isSubmitting}
-									>
-										{iconLeft}
-										<div className='grid flex-1 text-left text-sm leading-tight'>
-											<span className='truncate font-normal'>
-												{getSelectedOption(field.value) ? (
-													<div className='flex gap-2'>
-														{getSelectedOption(field.value)?.icon}
-														{getSelectedOption(field.value)?.title}
-													</div>
-												) : (
-													<span className='text-zinc-500'>{placeholder ?? DEFAULT_PLACEHOLDER}</span>
-												)}
-											</span>
-										</div>
-										{iconRight ?? <ChevronsUpDown size={20} className='stroke-zinc-500' />}
-									</Button>
-								</div>
-							</FormControl>
-						</PopoverTrigger>
-						<PopoverContent className={cn('p-0', className, 'w-[--radix-popover-trigger-width]')}>
-							<Command shouldFilter={false}>
-								{!disabledSearch && <CommandInput placeholder={placeholder ?? DEFAULT_PLACEHOLDER} onKeyUp={handleKeyUp} />}
-								<CommandList>
-									<CommandEmpty className='flex flex-col justify-between items-center p-3 font-normal text-sm'>
-										{loading ? (
-											<LoaderCircle size={16} className='text-sidebar-foreground animate-spin mr-2' />
-										) : getOptions()?.length === 0 && (searchString !== '' || disabledSearch) ? (
-											'Nenhum resultado encontrado'
-										) : (
-											'Utilize o campo de busca acima'
-										)}
-									</CommandEmpty>
-									{options.length > 0 && (
-										<CommandGroup>
-											{getOptions().map((option) => (
-												<CommandItem
-													key={`key-opt-${option.value}`}
-													value={option.value}
-													className='group'
-													onSelect={() => handleSelect(option.value, field)}
-												>
-													<div className={cn('grid flex-1 text-left text-sm leading-tight', option.className)}>
-														<div className='flex gap-2'>
-															{option.icon}
-															<span className='truncate font-normal'>{option.title}</span>
-														</div>
-														<span className='truncate text-xs text-zinc-500'>{option.subTitle}</span>
-													</div>
-													<div
-														className={`ml-auto text-zinc-500 ${
-															field.value === option.value ? 'opacity-100' : 'opacity-0'
-														}`}
-													>
-														<Check className={cn('flex', canUnselect && 'group-hover:hidden hover:hidden')} size={16} />
-														<X className={cn('hidden', canUnselect && 'group-hover:flex hover:flex')} size={16} />
-													</div>
-												</CommandItem>
-											))}
-										</CommandGroup>
-									)}
-								</CommandList>
-							</Command>
-							{footerAction && (
-								<div className='grid w-full p-1 border-t'>
-									<Button type='button' variant='ghost' className='h-8' onClick={() => footerAction.onClick()}>
-										{footerAction.icon}
-										{footerAction.label}
-									</Button>
-								</div>
-							)}
-						</PopoverContent>
-					</Popover>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/cpf-cnpj.tsx

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import * as FormComponents from '../../form';
-import { MaskInputCpfCnpj } from '../../input';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-const masks = ['999.999.999-999', '99.999.999/9999-99'];
-
-export const FormInputCpfCnpj: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder,
-	className,
-	disabled,
-	required,
-	onChange,
-	onKeyUp,
-}) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-	const [mask, setMask] = useState(masks[0]);
-
-	const handleMaskChange = (value: string) => {
-		const numericValue = value.replace(/\D/g, '');
-		if (numericValue.length > 11) {
-			setMask(masks[1]);
-		} else {
-			setMask(masks[0]);
-		}
-	};
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<MaskInputCpfCnpj
-							{...field}
-							className={`${className}`}
-							placeholder={placeholder}
-							disabled={disabled || formState.isSubmitting}
-							mask={mask}
-							onChange={(e) => {
-								field.onChange(e);
-								handleMaskChange(e.target.value);
-								if (onChange) {
-									onChange(e);
-								}
-							}}
-							onKeyUp={(e) => {
-								if (onKeyUp) {
-									onKeyUp(e);
-								}
-							}}
-						/>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/currency.tsx

@@ -1,51 +0,0 @@
-import * as FormComponents from '../../form';
-import { MaskInputDecimal } from '../../input';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const FormInputCurrency: React.FC<Props> = ({ control, name, label, subLabel, helpText, className, disabled, required, onChange }) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<MaskInputDecimal
-							{...field}
-							symbol='R$'
-							className={`${className}`}
-							disabled={disabled || formState.isSubmitting}
-							onChange={(e) => {
-								field.onChange(e);
-								if (onChange) {
-									onChange(e);
-								}
-							}}
-						/>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/date-range.tsx

@@ -1,110 +0,0 @@
-import { format } from 'date-fns';
-import { CalendarIcon } from 'lucide-react';
-import { useState } from 'react';
-import { DateRange } from 'react-day-picker';
-import { cn } from '../../../../lib/utils';
-import { Button } from '../../button';
-import { Calendar } from '../../calendar';
-import * as FormComponents from '../../form';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement> | DateRange | undefined) => void;
-}
-
-export const FormDataRange: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder,
-	className,
-	disabled,
-	required,
-	onChange,
-}) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	// const [date, setDate] = useState<DateRange | undefined>(field.value);
-	const [open, setOpen] = useState(false);
-
-	const handleDateChange = (newDate: DateRange | undefined, field: any) => {
-		// setDate(newDate);
-		field.onChange(newDate);
-		if (onChange) onChange(newDate);
-	};
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<Popover open={open} onOpenChange={setOpen}>
-							<PopoverTrigger asChild className='w-full'>
-								<div className={` rounded-sm outline-none ${open ? 'ring-2 ring-ring ring-offset-2' : 'ring-0'}`}>
-									<Button
-										type='button'
-										variant='outline'
-										role='combobox'
-										aria-expanded={open}
-										className={cn(
-											` ${className} justify-start disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50`,
-											formState.errors[name] ? 'border-red-600' : '',
-										)}
-										disabled={disabled || formState.isSubmitting}
-									>
-										<CalendarIcon className='text-zinc-500' />
-										{field.value?.from ? (
-											field.value?.to ? (
-												<>
-													{format(field.value?.from, 'dd/MM/yyyy')} - {format(field.value?.to, 'dd/MM/yyyy')}
-												</>
-											) : (
-												format(field.value?.from, 'dd/MM/yyyy')
-											)
-										) : (
-											<span className='font-normal text-zinc-500'>Escolha um Período</span>
-										)}
-									</Button>
-								</div>
-							</PopoverTrigger>
-							<PopoverContent className='flex w-auto p-0' align='start'>
-								<div className='flex flex-row space-x-4'>
-									<Calendar
-										initialFocus
-										mode='range'
-										defaultMonth={field.value?.from}
-										selected={field.value}
-										numberOfMonths={2}
-										className='flex'
-										onSelect={(newDate) => handleDateChange(newDate, field)}
-									/>
-								</div>
-							</PopoverContent>
-						</Popover>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/date.tsx

@@ -1,109 +0,0 @@
-import { ptBR } from 'date-fns/locale';
-import { CalendarIcon } from 'lucide-react';
-import { useState } from 'react';
-import { stringToDate } from '../../../../lib/help/date-utils';
-import { cn } from '../../../../lib/utils';
-import { Calendar } from '../../calendar';
-import * as FormComponents from '../../form';
-import { MaskInput } from '../../input';
-import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-export const FormInputDate: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder = '01/01/2023',
-	className,
-	disabled,
-	required,
-	onChange,
-	onKeyUp,
-}) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-	const [open, setOpen] = useState(false);
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<div className='relative w-full'>
-							<MaskInput
-								{...field}
-								mask={'99/99/9999'}
-								maskPlaceholder={null}
-								placeholder={placeholder}
-								disabled={disabled || formState.isSubmitting}
-								className={cn('pl-9', className)}
-								onChange={(e) => {
-									field.onChange(e);
-									if (onChange) {
-										onChange(e);
-									}
-								}}
-								onKeyUp={(e) => {
-									if (onKeyUp) {
-										onKeyUp(e);
-									}
-								}}
-							/>
-
-							<div className='absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer'>
-								<Popover open={open} onOpenChange={setOpen}>
-									<PopoverTrigger asChild>
-										<CalendarIcon size={16} className='cursor-pointer text-gray-500' />
-									</PopoverTrigger>
-									<PopoverContent className='w-[250px] p-0' align='start'>
-										<Calendar
-											mode='single'
-											locale={ptBR}
-											required={true}
-											selected={stringToDate(field.value) ?? new Date()}
-											onSelect={(date) => {
-												field.onChange(date ? date.toLocaleDateString('pt-BR') : '');
-												if (onChange) {
-													onChange({
-														target: { value: date ? date.toLocaleDateString('pt-BR') : '' },
-													} as React.ChangeEvent<HTMLInputElement>);
-												}
-												setOpen(false);
-											}}
-											className='rounded-md'
-											captionLayout='dropdown'
-										/>
-									</PopoverContent>
-								</Popover>
-							</div>
-						</div>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/decimal.tsx

@@ -1,50 +0,0 @@
-import * as FormComponents from '../../form';
-import { MaskInputDecimal } from '../../input';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const FormInputDecimal: React.FC<Props> = ({ control, name, label, subLabel, helpText, className, disabled, required, onChange }) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }) => (
-				<FormItem className={className}>
-					<div className='flex items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<MaskInputDecimal
-							{...field}
-							className={`${className}`}
-							disabled={disabled || formState.isSubmitting}
-							onChange={(e) => {
-								field.onChange(e);
-								if (onChange) {
-									onChange(e);
-								}
-							}}
-						/>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};