eai-frontend-components 2.0.4

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

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import * as FormComponents from '../../form';
+import { InputFile } 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;
+}
+
+export const FormInputFile: React.FC<Props> = ({
+	control,
+	name,
+	label,
+	subLabel,
+	helpText,
+	placeholder,
+	className,
+	disabled,
+	required,
+	onChange,
+}) => {
+	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+	const [value, setValue] = useState('');
+
+	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>
+						<InputFile
+							value={value}
+							placeholder={placeholder}
+							disabled={disabled || formState.isSubmitting}
+							onChange={(e) => {
+								if (onChange) {
+									onChange(e);
+								}
+								setValue(e.target.value);
+								field.onChange(e.target.files);
+							}}
+						/>
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};

package/src/components/ui/custom/form/form-help-text.tsx

@@ -0,0 +1,20 @@
+import { CircleHelp } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../tooltip';
+
+const formHelpText = (helpText: JSX.Element) => {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger className='pb-2'>
+					<CircleHelp size={16} className='text-muted' />
+				</TooltipTrigger>
+				<TooltipContent className='text-white bg-background-primary' align='start'>
+					{helpText}
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+};
+
+export { formHelpText };
+

package/src/components/ui/custom/form/form-label.tsx

@@ -0,0 +1,24 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import React from 'react';
+import { cn } from '../../../../lib/utils';
+
+type FormLabelComponent = React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof LabelPrimitive.Root>>>;
+
+const formLabel = (FormLabel: FormLabelComponent, label: string) => {
+	return <FormLabel className='text-default font-medium text-sm h-5'>{label}</FormLabel>;
+};
+
+const formLabelAndSubLabel = (FormLabel: FormLabelComponent, label: string, subLabel?: string, required?: boolean | undefined, className?: string) => {
+	return (
+		<div className={cn('flex flex-col pb-2', className)}>
+			<div className='flex gap-1'>
+				{formLabel(FormLabel, label)}
+				{required && <FormLabel className='text-red-600 font-medium text-sm'>*</FormLabel>}
+			</div>
+			{subLabel && <FormLabel className='text-default font-normal pt-1'>{subLabel}</FormLabel>}
+		</div>
+	);
+};
+
+export { formLabel, formLabelAndSubLabel };
+

package/src/components/ui/custom/form/form-message.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type FormMessageComponent = React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+const formMessage = (FormMessage: FormMessageComponent) => {
+	return <FormMessage className='text-red-600 mt-1' />;
+};
+
+export { formMessage };
+

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

@@ -0,0 +1,28 @@
+import * as FormComponents from '../../form';
+import { InputText } from '../../input';
+import { formMessage } from './form-message';
+
+interface Props {
+	control: any;
+	name: string;
+	className?: string;
+}
+
+export const FormInputGhost: React.FC<Props> = ({ control, name, className }) => {
+	const { FormField, FormItem, FormControl, FormMessage } = FormComponents;
+
+	return (
+		<FormField
+			control={control}
+			name={name}
+			render={({ field }) => (
+				<FormItem className={className}>
+					<FormControl>
+						<InputText {...field} className='hidden' />
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};

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

@@ -0,0 +1,69 @@
+import * as FormComponents from '../../form';
+import { Input } from '../../input';
+import { formHelpText } from './form-help-text';
+import { formLabelAndSubLabel } from './form-label';
+import { formMessage } from './form-message';
+
+interface Props {
+	control: any;
+	type?: string;
+	name: string;
+	label: string;
+	subLabel?: string;
+	helpText?: JSX.Element;
+	placeholder?: string;
+	maxLength?: number;
+	className?: string;
+	disabled?: boolean;
+	required?: boolean;
+	onChange?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export const FormInput: React.FC<Props> = ({
+	control,
+	type,
+	name,
+	label,
+	subLabel,
+	helpText,
+	placeholder,
+	maxLength,
+	className,
+	disabled,
+	required,
+	onKeyUp,
+}) => {
+	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>
+						<Input
+							{...field}
+							className={className}
+							maxLength={maxLength}
+							placeholder={placeholder}
+							disabled={disabled || formState.isSubmitting}
+							type={type}
+							onKeyUp={(e) => {
+								if (onKeyUp) {
+									onKeyUp(e);
+								}
+							}}
+						/>
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};

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

@@ -0,0 +1,78 @@
+import * as FormComponents from '../../form';
+import { MaskInput } 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;
+	mask: string;
+	maskPlaceholder?: string | null;
+	className?: string;
+	disabled?: boolean;
+	required?: boolean;
+	inputRef?: React.Ref<HTMLInputElement>;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export const FormInputMask: React.FC<Props> = ({
+	control,
+	name,
+	label,
+	subLabel,
+	helpText,
+	placeholder,
+	mask,
+	maskPlaceholder,
+	className,
+	disabled,
+	required,
+	inputRef,
+	onChange,
+	onKeyUp,
+}) => {
+	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>
+						<MaskInput
+							{...field}
+							mask={mask}
+							maskPlaceholder={maskPlaceholder}
+							placeholder={placeholder}
+							disabled={disabled || formState.isSubmitting}
+							onChange={(e) => {
+								field.onChange(e);
+								if (onChange) {
+									onChange(e);
+								}
+							}}
+							onKeyUp={(e) => {
+								if (onKeyUp) {
+									onKeyUp(e);
+								}
+							}}
+							ref={inputRef}
+						/>
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};

package/src/components/ui/custom/form/multi-select.tsx

@@ -0,0 +1,209 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import { CheckIcon, ChevronDown, X } from 'lucide-react';
+import * as React from 'react';
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import { cn } from '../../../../lib/utils';
+import { Badge } from '../../badge';
+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';
+
+const multiSelectVariants = cva('m-1 rounded-[6px]', {
+	variants: {
+		variant: {
+			default: 'text-foreground bg-background-secondary dark:bg-popover hover:bg-background-secondary',
+			secondary: 'border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+			inverted: 'inverted',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+	},
+});
+
+export interface MultiSelectOption {
+	value: string;
+	label: string;
+}
+
+interface MultiSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof multiSelectVariants> {
+	control: any;
+	name: string;
+	label?: string;
+	subLabel?: string;
+	helpText?: JSX.Element;
+	options: MultiSelectOption[];
+	placeholder?: string;
+	maxCount?: number;
+	modalPopover?: boolean;
+	asChild?: boolean;
+	className?: string;
+	required?: boolean;
+}
+
+export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+	(
+		{
+			control,
+            name, 
+            label,
+            subLabel,
+            helpText,
+            options,
+			variant,
+			placeholder,
+			maxCount = 2,
+			modalPopover = false,
+			asChild = false,
+			className,
+            required,
+			...props
+		},
+		ref,
+	) => {
+		const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+		const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+	    const DEFAULT_PLACEHOLDER_FILTER = 'Digite para buscar...';
+	    const DEFAULT_PLACEHOLDER = 'Selecione';
+
+		const toggleOption = (option: MultiSelectOption, field: ControllerRenderProps<FieldValues, string>) => {
+            const prevValue = field.value || [];
+
+            const newValue = prevValue?.some((item: MultiSelectOption) => item.value === option.value)
+                ? prevValue.filter((item: MultiSelectOption) => item.value !== option.value)
+                : [...prevValue, option];
+
+            field.onChange(newValue);
+		};
+
+		const handleClear = (field: ControllerRenderProps<FieldValues, string>) => {
+			field.onChange([]);
+		};
+
+		const handleTogglePopover = () => {
+			setIsPopoverOpen((prev) => !prev);
+		};
+
+		const toggleAll = (field: ControllerRenderProps<FieldValues, string>) => {
+			if (field.value?.length === options.length) {
+				handleClear(field);
+			} else {
+				const allValues = options.map((option) => option);
+				field.onChange(allValues);
+			}
+		};
+
+		return (
+            <FormField
+			control={control}
+			name={name}
+			render={({ field }) => (
+				<FormItem>
+					<div className='flex items-center space-x-1.5'>
+						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
+						{helpText && formHelpText(helpText)}
+					</div>
+                    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
+                        <PopoverTrigger asChild>
+                            <Button
+                                ref={ref}
+                                {...props}
+                                onClick={handleTogglePopover}
+                                className={cn(
+                                    'flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background [&_svg]:size-3.5',
+                                    className,
+                                )}
+                            >
+                                {field.value?.length > 0 ? (
+                                    <div className='flex justify-between items-center w-full'>
+                                        <div className='flex items-center'>
+                                            <div className={`grid grid-cols-${maxCount}`}>
+                                            {field.value.slice(0, maxCount).map((option: MultiSelectOption) => {
+                                                return (
+                                                    <Badge
+                                                        key={`msoptlbl-${option.value}`}
+                                                        className={cn(multiSelectVariants({ variant }))}
+                                                        onClick={(event) => {
+                                                            event.stopPropagation();
+                                                            toggleOption(option, field);
+                                                        }}
+                                                    >
+                                                        <div className='truncate'>{option?.label}</div>
+                                                        <X className='ml-2 cursor-pointer text-zinc-500' />
+                                                    </Badge>
+                                                );
+                                            })}
+                                            </div>
+                                            {field.value?.length > maxCount && (
+                                                <Badge variant={'surface'}
+                                                >
+                                                    {`+${field.value?.length - maxCount}`}
+                                                </Badge>
+                                            )}
+                                        </div>
+                                        <div className='flex items-center justify-between'>
+                                            <ChevronDown className='h-4 mx-2 cursor-pointer text-muted-foreground' />
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <div className='flex items-center justify-between w-full mx-auto'>
+                                        <span className='text-sm text-muted-foreground mx-3'>{placeholder ?? DEFAULT_PLACEHOLDER}</span>
+                                        <ChevronDown className='h-4 cursor-pointer text-muted-foreground mx-2' />
+                                    </div>
+                                )}
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className={cn('w-auto p-0', 'w-[--radix-popover-trigger-width]')} align='start' onEscapeKeyDown={() => setIsPopoverOpen(false)}>
+                            <Command>
+                                <CommandInput placeholder={DEFAULT_PLACEHOLDER_FILTER} />
+                                <CommandList>
+                                    <CommandEmpty>Nenhum resultado encontrado</CommandEmpty>
+                                    <CommandGroup>
+                                        <CommandItem key='all' onSelect={() => toggleAll(field)} className='cursor-pointer'>
+                                            <div
+                                                className={cn(
+                                                    'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                                    field.value?.length === options.length
+                                                        ? 'bg-primary text-primary-foreground'
+                                                        : 'opacity-50 [&_svg]:invisible',
+                                                )}
+                                            >
+                                                <CheckIcon className='h-4 w-4' />
+                                            </div>
+                                            <span>(Selecionar Todos)</span>
+                                        </CommandItem>
+                                        {options.map((option) => {
+                                            const isSelected = field.value?.some((item: MultiSelectOption) => item.value === option.value);
+                                            return (
+                                                <CommandItem key={`msopt-${option.value}`} onSelect={() => toggleOption(option, field)} className='cursor-pointer'>
+                                                    <div
+                                                        className={cn(
+                                                            'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                                            isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
+                                                        )}
+                                                    >
+                                                        <CheckIcon className='h-4 w-4' />
+                                                    </div>
+                                                    <span>{option.label}</span>
+                                                </CommandItem>
+                                            );
+                                        })}
+                                    </CommandGroup>
+                                </CommandList>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+		);
+	},
+);
+
+MultiSelect.displayName = 'MultiSelect';

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

@@ -0,0 +1,70 @@
+import { Eye, EyeOff } from 'lucide-react';
+import { useState } from 'react';
+import * as FormComponents from '../../form';
+import { InputText } 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;
+	maxLength?: number;
+	className?: string;
+	disabled?: boolean;
+	required?: boolean;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const FormInputPassWord: React.FC<Props> = ({
+	control,
+	name,
+	label,
+	subLabel,
+	helpText,
+	placeholder,
+	maxLength,
+	className,
+	disabled,
+	required,
+}) => {
+	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
+	const [showPassword, setShowPassword] = useState(true);
+	const togglePasswordVisibility = () => setShowPassword((prev) => !prev);
+
+	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'>
+							<InputText
+								{...field}
+								type={showPassword ? 'password' : 'text'}
+								name={name}
+								maxLength={maxLength}
+								className={className}
+								placeholder={placeholder}
+								disabled={disabled || formState.isSubmitting}
+							/>
+							<button type='button' onClick={togglePasswordVisibility} className='absolute inset-y-0 right-2 flex items-center'>
+								{showPassword ? <EyeOff className='w-5 h-5 text-slate-500' /> : <Eye className='w-5 h-5 text-slate-500' />}
+							</button>
+						</div>
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};

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

@@ -0,0 +1,52 @@
+import { ControllerRenderProps, FieldValues, FormState } from 'react-hook-form';
+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 FormInputPercent: 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 }: { field: ControllerRenderProps<FieldValues, string>; formState: FormState<FieldValues> }) => (
+				<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='%'
+							className={`${className}`}
+							disabled={disabled || formState.isSubmitting}
+							onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+								field.onChange(e);
+								if (onChange) {
+									onChange(e);
+								}
+							}}
+						/>
+					</FormControl>
+					{formMessage(FormMessage)}
+				</FormItem>
+			)}
+		/>
+	);
+};