eai-frontend-components 2.0.4

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

@@ -0,0 +1,259 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,50 @@
+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>
+			)}
+		/>
+	);
+};