eai-frontend-components 2.0.5 → 2.0.7

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

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

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

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

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

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

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

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

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

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

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