eai-frontend-components 2.0.4

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

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

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

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

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

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

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

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

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