eai-frontend-components 2.0.4 → 2.0.6

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

@@ -1,79 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ControllerRenderProps, FieldValues, FormState } from 'react-hook-form';
-import * as FormComponents from '../../form';
-import { MaskInputFone } 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 = ['(99) 9999-99999', '(99) 9 9999-9999'];
-
-export const FormInputPhone: 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 getMask = (val: string) => (val.replace(/\D/g, '').length > 10 ? masks[1] : masks[0]);
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field, formState }: { field: ControllerRenderProps<FieldValues, string>; formState: FormState<FieldValues> }) => {
-				useEffect(() => {
-					setMask(getMask(field.value || ''));
-				}, [field.value]);
-
-				return (
-					<FormItem className={className}>
-						<div className='flex items-center space-x-1.5'>
-							{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-							{helpText && formHelpText(helpText)}
-						</div>
-						<FormControl>
-							<MaskInputFone
-								{...field}
-								className={className}
-								placeholder={placeholder ?? '(00) 0 0000-0000'}
-								disabled={disabled || formState.isSubmitting}
-								mask={mask}
-								onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-									onChange?.(e);
-									field.onChange(e);
-									setMask(getMask(e.target.value));
-								}}
-								onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => onKeyUp?.(e)}
-							/>
-						</FormControl>
-						{formMessage(FormMessage)}
-					</FormItem>
-				);
-			}}
-		/>
-	);
-};

package/src/components/ui/custom/form/radio-group.tsx

@@ -1,94 +0,0 @@
-import { ControllerRenderProps, FieldValues, FormState } from 'react-hook-form';
-import { cn } from '../../../../lib/utils';
-import * as FormComponents from '../../form';
-import { Label } from '../../label';
-import { RadioGroup, RadioGroupItem } from '../../radio-group';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-export interface RadioOption {
-	value: string;
-	label: string;
-	description?: string;
-	disabled?: boolean;
-}
-interface Props {
-	control: any;
-	name: string;
-	value?: string;
-	label?: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	className?: string;
-	classNameOptions?: string;
-	disabled?: boolean;
-	required?: boolean;
-	options?: RadioOption[];
-	onChange?: (value: string) => void;
-}
-
-export const FormRadioGroup: React.FC<Props> = ({
-	control,
-	name,
-	value,
-	label,
-	subLabel,
-	helpText,
-	className,
-	classNameOptions,
-	disabled,
-	required,
-	options,
-	onChange,
-}) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-	return (
-		<FormField
-			control={control}
-			name={name}
-			key={value}
-			render={({ field, formState }: { field: ControllerRenderProps<FieldValues, string>; formState: FormState<FieldValues> }) => (
-				<FormItem>
-					<div className={cn('flex items-center space-x-1.5 mb-2', className)}>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, required)}
-						{helpText && formHelpText(helpText)}
-					</div>
-					<FormControl>
-						<RadioGroup
-							onValueChange={(value: string) => {
-								field?.onChange?.(value);
-								onChange?.(value);
-							}}
-							defaultValue={field.value}
-							disabled={disabled || formState.isSubmitting}
-							className={`${className}`}
-						>
-							<div className={cn('flex flex-grow gap-6', classNameOptions)}>
-								{options?.map((option, index) => (
-									<div className='flex flex-col' key={`radio-${name}-${index}`}>
-										<div className='flex items-center space-x-2' key={`radio-${name}-${index}`}>
-											<RadioGroupItem
-												value={option.value}
-												id={`r${option.value}`}
-												checked={field.value === option.value}
-												disabled={option.disabled}
-											/>
-											<Label htmlFor={`r${option.value}`} className={option.disabled ? 'opacity-50' : ''}>
-												{option.label}
-											</Label>
-										</div>
-										{option.description && (
-											<div className={cn('pl-6 text-zinc-500', { 'opacity-50': option.disabled })}>{option.description}</div>
-										)}
-									</div>
-								))}
-							</div>
-						</RadioGroup>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

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

@@ -1,62 +0,0 @@
-import { Select } from '@radix-ui/react-select';
-import { cn } from '../../../../lib/utils';
-import * as FormComponents from '../../form';
-import { SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../select';
-import { formHelpText } from './form-help-text';
-import { formLabelAndSubLabel } from './form-label';
-import { formMessage } from './form-message';
-
-export interface SelectOption {
-	value: string;
-	label: string;
-	default?: boolean;
-}
-
-interface Props {
-	control: any;
-	name: string;
-	label: string;
-	subLabel?: string;
-	helpText?: JSX.Element;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	required?: boolean;
-	options: SelectOption[];
-}
-
-export const FormSelect: React.FC<Props> = ({ control, name, label, subLabel, helpText, placeholder, className, disabled, required, options }) => {
-	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>
-						<Select onValueChange={field.onChange} defaultValue={field.value} disabled={disabled}>
-							<SelectTrigger className={cn('', formState.errors[name] ? 'border-red-600' : '', className)}>
-								<SelectValue className='text-slate-400' placeholder={placeholder} />
-							</SelectTrigger>
-							<SelectContent className='bg-white cursor-pointer'>
-								<SelectGroup>
-									{options.map((option) => (
-										<SelectItem key={option.value} value={option.value}>
-											{option.label}
-										</SelectItem>
-									))}
-								</SelectGroup>
-							</SelectContent>
-						</Select>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/step-new-form.tsx

@@ -1,49 +0,0 @@
-import { Check } from 'lucide-react';
-import { Separator } from '../../separator';
-
-interface PropsStepNewForm {
-	steps: { id: string; label: string }[];
-	currentIndex: number;
-}
-
-const StepNewForm = ({ steps, currentIndex }: PropsStepNewForm) => {
-	const getStepIcon = (index: number) => {
-		if (index < currentIndex) {
-			return (
-				<div className='flex w-6 h-6 rounded-md items-center justify-center bg-background-secondary border'>
-					<Check size={16} className='stroke-2 stroke-primary' />
-				</div>
-			);
-		}
-
-		return (
-			<div
-				className={`flex w-6 h-6 rounded-md items-center justify-center border ${
-					index === currentIndex ? 'bg-background-primary text-white' : 'bg-white text-black'
-				}`}
-			>
-				{index + 1}
-			</div>
-		);
-	};
-
-	return (
-		<div className='flex flex-row gap-x-3 my-2.5'>
-			{steps.map((step, index, array) => (
-				<div className='flex items-center text-sm font-medium gap-x-3' key={step.id}>
-					<div className='flex items-center text-sm font-medium gap-x-3'>
-						{getStepIcon(index)}
-						{step.label}
-					</div>
-					{index + 1 < array.length && (
-						<div className='w-10'>
-							<Separator />
-						</div>
-					)}
-				</div>
-			))}
-		</div>
-	);
-};
-
-export default StepNewForm;

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

@@ -1,51 +0,0 @@
-import { ControllerRenderProps, FieldValues } from 'react-hook-form';
-import { cn } from '../../../../lib/utils';
-import * as FormComponents from '../../form';
-import { Switch } from '../../switch';
-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;
-	onCheckedChange?: (checked: boolean) => void;
-}
-
-export const FormInputSwitch: React.FC<Props> = ({ control, name, label, subLabel, helpText, className, disabled, onCheckedChange }) => {
-	const { FormField, FormItem, FormLabel, FormControl, FormMessage } = FormComponents;
-
-	return (
-		<FormField
-			control={control}
-			name={name}
-			render={({ field }: { field: ControllerRenderProps<FieldValues, string> }) => (
-				<FormItem className={cn('flex items-top gap-x-2', className)}>
-					<FormControl>
-						<Switch
-							{...field}
-							checked={field.value}
-							onCheckedChange={(checked: boolean) => {
-								field.onChange(checked);
-								if (onCheckedChange) {
-									onCheckedChange(checked);
-								}
-							}}
-							disabled={disabled}
-						/>
-					</FormControl>
-					<div className='flex h-full items-center space-x-1.5'>
-						{label && formLabelAndSubLabel(FormLabel, label, subLabel, false, 'pb-0')}
-						{helpText && formHelpText(helpText)}
-					</div>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

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

@@ -1,71 +0,0 @@
-import { ControllerRenderProps, FieldValues, FormState } from 'react-hook-form';
-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;
-	inputRef?: React.Ref<HTMLInputElement>;
-	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const FormInputText: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder,
-	maxLength,
-	className,
-	disabled,
-	required,
-	inputRef,
-	onKeyUp,
-	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>
-						<InputText
-							{...field}
-							maxLength={maxLength}
-							placeholder={placeholder}
-							disabled={disabled || formState.isSubmitting}
-							value={field.value || ''}
-							onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {
-								if (onKeyUp) {
-									onKeyUp(e);
-								}
-							}}
-							ref={inputRef}
-						/>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

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

@@ -1,71 +0,0 @@
-import { ControllerRenderProps, FieldValues, FormState } from 'react-hook-form';
-import * as FormComponents from '../../form';
-import { Textarea } from '../../textarea';
-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<HTMLTextAreaElement>) => void;
-	onKeyUp?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-}
-
-export const FormTextarea: React.FC<Props> = ({
-	control,
-	name,
-	label,
-	subLabel,
-	helpText,
-	placeholder,
-	className,
-	disabled,
-	required,
-	onChange,
-	onKeyUp,
-}) => {
-	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>
-						<Textarea
-							{...field}
-							className='resize-none outline-none focus:outline-none'
-							placeholder={placeholder}
-							disabled={disabled || formState.isSubmitting}
-							onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-								field.onChange(e);
-								if (onChange) {
-									onChange(e);
-								}
-							}}
-							onKeyUp={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-								if (onKeyUp) {
-									onKeyUp(e);
-								}
-							}}
-						/>
-					</FormControl>
-					{formMessage(FormMessage)}
-				</FormItem>
-			)}
-		/>
-	);
-};

package/src/components/ui/custom/form/utils.ts

@@ -1,100 +0,0 @@
-export type RGB = { r: number; g: number; b: number };
-type HSL = { h: number; s: number; l: number };
-
-export const rgbToHex = ({ r, g, b }: RGB): string => {
-	const toHex = (n: number) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0').toUpperCase();
-	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-};
-
-export const hexToRgb = (hex: string): RGB | null => {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-	return result
-		? {
-				r: Number.parseInt(result[1], 16),
-				g: Number.parseInt(result[2], 16),
-				b: Number.parseInt(result[3], 16),
-		  }
-		: null;
-};
-
-export const rgbToHsl = ({ r, g, b }: RGB): HSL => {
-	r /= 255;
-	g /= 255;
-	b /= 255;
-
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
-	let h = 0;
-	let s = 0;
-	const l = (max + min) / 2;
-
-	if (max !== min) {
-		const d = max - min;
-		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-		switch (max) {
-			case r:
-				h = (g - b) / d + (g < b ? 6 : 0);
-				break;
-			case g:
-				h = (b - r) / d + 2;
-				break;
-			case b:
-				h = (r - g) / d + 4;
-				break;
-		}
-
-		h /= 6;
-	}
-
-	return {
-		h: Math.round(h * 360),
-		s: Math.round(s * 100),
-		l: Math.round(l * 100),
-	};
-};
-
-const hue2rgb = (p: number, q: number, t: number) => {
-	let tempT = t;
-	if (tempT < 0) tempT += 1;
-	if (tempT > 1) tempT -= 1;
-	if (tempT < 1 / 6) return p + (q - p) * 6 * tempT;
-	if (tempT < 1 / 2) return q;
-	if (tempT < 2 / 3) return p + (q - p) * (2 / 3 - tempT) * 6;
-	return p;
-};
-
-export const hslToRgb = ({ h, s, l }: HSL): RGB => {
-	h /= 360;
-	s /= 100;
-	l /= 100;
-
-	let r: number;
-	let g: number;
-	let b: number;
-
-	if (s === 0) {
-		r = g = b = l;
-	} else {
-		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-		const p = 2 * l - q;
-
-		r = hue2rgb(p, q, h + 1 / 3);
-		g = hue2rgb(p, q, h);
-		b = hue2rgb(p, q, h - 1 / 3);
-	}
-
-	return {
-		r: Math.round(r * 255),
-		g: Math.round(g * 255),
-		b: Math.round(b * 255),
-	};
-};
-
-export const formatRgba = (rgb: RGB, a = 1): string => {
-	return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;
-};
-
-export const formatHsla = (hsl: HSL, a = 1): string => {
-	return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
-};