@greatapps/common 1.1.23 → 1.1.25

package/src/components/account/sections/SecuritySection.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Lock, Wrench } from 'lucide-react';
+import { Badge } from '../../ui/data-display/Badge';
+import { Button } from '../../ui/buttons/Button';
+import { useAuth } from '../../../providers/auth.provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+import TwoFactorAuthModal from '../TwoFactorAuthModal';
+import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
+
+interface SecuritySectionProps {
+  setActiveSection: (section: AccountSectionType) => void;
+  onClose: () => void;
+  hasActiveSubscription?: boolean;
+  onDeleteAccount?: () => void;
+}
+
+export function SecuritySection({
+  setActiveSection,
+  onClose,
+  hasActiveSubscription,
+  onDeleteAccount,
+}: SecuritySectionProps) {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+
+  const twoFactorAuth = user?.two_factor_authentication ?? false;
+  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
+  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
+
+  const handleToggleTwoFactor = useCallback(() => {
+    if (twoFactorAuth) {
+      setDisableTwoFactorOpen(true);
+    } else {
+      setTwoFactorOpen(true);
+    }
+  }, [twoFactorAuth]);
+
+  const handleDisableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setDisableTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleEnableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleDeleteAccount = useCallback(() => {
+    onDeleteAccount?.();
+  }, [onDeleteAccount]);
+
+  return (
+    <>
+      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
+
+        <div className="border border-gray-200 rounded-lg overflow-hidden">
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={handleToggleTwoFactor}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <Wrench size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="paragraph-small-semibold text-gray-950">
+                    Autenticação de dois fatores
+                  </span>
+                  <Badge
+                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
+                  >
+                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
+                  </Badge>
+                </div>
+                <span className="paragraph-small-regular text-gray-600">
+                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleTwoFactor();
+              }}
+            >
+              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
+            </Button>
+          </div>
+
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <Lock size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <span className="paragraph-small-semibold text-gray-950">
+                  Alterar senha de acesso
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Atualize sua senha sempre que necessário para manter sua conta segura.
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
+              }}
+            >
+              Alterar senha
+            </Button>
+          </div>
+        </div>
+
+        {onDeleteAccount && (
+          <button
+            type="button"
+            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
+            onClick={handleDeleteAccount}
+          >
+            Excluir minha conta
+          </button>
+        )}
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
+        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
+          Cancelar
+        </Button>
+        <Button className="h-10!" onClick={onClose}>
+          Salvar alterações
+        </Button>
+      </div>
+
+      <DisableTwoFactorAuthModal
+        open={disableTwoFactorOpen}
+        onClose={() => setDisableTwoFactorOpen(false)}
+        onSuccess={handleDisableTwoFactorSuccess}
+      />
+      <TwoFactorAuthModal
+        open={twoFactorOpen}
+        onClose={() => setTwoFactorOpen(false)}
+        onSuccess={handleEnableTwoFactorSuccess}
+      />
+    </>
+  );
+}

package/src/components/ui/form/ComboboxField.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { CheckIcon, ChevronDownIcon, SearchIcon } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
+import { cn } from '../../../infra/utils/clsx';
+
+export type ComboboxOption = {
+  value: string;
+  label: string;
+  displayValue?: string;
+};
+
+interface ComboboxFieldProps {
+  options: ComboboxOption[];
+  label?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}
+
+export function ComboboxField({
+  options,
+  label,
+  placeholder = 'Selecione uma opção',
+  searchPlaceholder = 'Buscar...',
+  emptyMessage = 'Nenhuma opção encontrada.',
+  value,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName,
+}: ComboboxFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const selectedOption = useMemo(
+    () => options.find((o) => o.value === value),
+    [options, value]
+  );
+
+  const filteredOptions = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, search]);
+
+  const handleSelect = (optionValue: string) => {
+    onChange?.(optionValue);
+    setOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-gray-600">{label}</span>
+        </div>
+      )}
+
+      <Popover
+        open={open}
+        onOpenChange={(v) => {
+          if (!disabled) {
+            setOpen(v);
+            if (!v) setSearch('');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(
+              'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
+              'flex items-center justify-between gap-2 rounded-md border bg-transparent',
+              'border-gray-200 hover:border-gray-400 focus:border-gray-950 focus:outline-none',
+              disabled && 'cursor-not-allowed opacity-50',
+              className
+            )}
+          >
+            <span className={cn('truncate text-left', !selectedOption && 'text-gray-400')}>
+              {selectedOption
+                ? (selectedOption.displayValue ?? selectedOption.label)
+                : placeholder}
+            </span>
+            {icon ?? (
+              <ChevronDownIcon
+                className={cn(
+                  'size-4 opacity-50 shrink-0 transition-all duration-200',
+                  open && 'rotate-180 opacity-100 text-gray-950'
+                )}
+              />
+            )}
+          </button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="p-0 overflow-hidden rounded-md border shadow-md"
+          align="start"
+          sideOffset={4}
+          style={{ width: 'var(--radix-popover-trigger-width)' }}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <div className="flex items-center gap-2 border-b border-gray-100 px-3 h-9">
+            <SearchIcon className="size-4 shrink-0 opacity-50 text-gray-500" />
+            <input
+              autoFocus
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-gray-400 paragraph-small-medium text-gray-950"
+            />
+          </div>
+
+          <div className="overflow-y-auto max-h-[280px] p-1">
+            {filteredOptions.length === 0 ? (
+              <p className="py-6 text-center paragraph-small-medium text-gray-500">{emptyMessage}</p>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = value === option.value;
+                return (
+                  <div
+                    key={option.value}
+                    className={cn(
+                      'flex items-center gap-2 rounded-sm px-2 h-9 cursor-pointer select-none',
+                      'paragraph-small-medium text-gray-950',
+                      'hover:bg-gray-100',
+                      isSelected && 'bg-gray-50'
+                    )}
+                    onClick={() => handleSelect(option.value)}
+                  >
+                    <span className="flex-1 truncate">{option.label}</span>
+                    {isSelected && <CheckIcon className="size-4 shrink-0 text-pages-600" />}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export default ComboboxField;

package/src/components/ui/form/FormField.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { Lock, Eye, EyeOff, type LucideIcon } from 'lucide-react';
+import { Input } from './Input';
+import { cn } from '../../../infra/utils/clsx';
+
+type FormFieldSize = 'default' | 'large';
+
+interface FormFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  leftIcon?: LucideIcon;
+  rightIcon?: LucideIcon;
+  rightIconColor?: string;
+  hintMessage?: string;
+  classnameContainer?: string;
+  size?: FormFieldSize;
+  error?: boolean;
+  errorMessage?: string;
+  showCharCount?: boolean;
+  showPassword?: boolean;
+  onTogglePassword?: () => void;
+}
+
+export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  (
+    {
+      label,
+      optional = false,
+      required = false,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      rightIconColor = 'var(--color-gray-400)',
+      hintMessage,
+      size = 'default',
+      type = 'text',
+      error = false,
+      errorMessage,
+      className,
+      classnameContainer,
+      showCharCount = false,
+      showPassword = false,
+      onTogglePassword,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const isPasswordField = type === 'password';
+    const inputType = isPasswordField && showPassword ? 'text' : type;
+    const containerHeight = size === 'large' ? 'h-12' : 'h-10';
+
+    const FinalLeftIcon = isPasswordField ? Lock : LeftIcon;
+    const FinalRightIcon = isPasswordField ? (!showPassword ? EyeOff : Eye) : RightIcon;
+
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const messageColor = error ? 'text-red-600' : 'text-gray-600';
+
+    const currentLength = typeof inputProps.value === 'string' ? inputProps.value.length : 0;
+    const shouldShowCharCount = showCharCount && inputProps.maxLength;
+
+    return (
+      <div className="flex flex-col gap-1.5 w-full">
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold truncate">
+          {label && <span className="text-gray-600">{label}</span>}
+          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
+        </div>
+
+        <div
+          className={cn(
+            'flex gap-2 px-4 items-center border rounded-lg transition-color',
+            containerHeight,
+            classnameContainer,
+            error
+              ? 'border-red-600 hover:border-red-700'
+              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950'
+          )}
+        >
+          {FinalLeftIcon && <FinalLeftIcon size={20} className="text-gray-400" />}
+
+          <Input
+            ref={ref}
+            type={inputType}
+            className={cn(
+              'paragraph-small-medium w-full h-full text-gray-950',
+              error && 'placeholder:text-red-400',
+              className
+            )}
+            {...inputProps}
+          />
+
+          {FinalRightIcon && (
+            <button
+              type="button"
+              onClick={isPasswordField ? onTogglePassword : undefined}
+              className={cn(
+                'flex items-center justify-center',
+                isPasswordField && 'cursor-pointer hover:opacity-70 transition-opacity'
+              )}
+              aria-label={
+                isPasswordField ? (showPassword ? 'Ocultar senha' : 'Mostrar senha') : undefined
+              }
+            >
+              <FinalRightIcon
+                size={20}
+                color={isPasswordField ? 'var(--color-gray-950)' : rightIconColor}
+              />
+            </button>
+          )}
+        </div>
+
+        {finalMessage && (
+          <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>
+        )}
+
+        {shouldShowCharCount && (
+          <span className="paragraph-xsmall-medium text-gray-600">
+            {currentLength}/{inputProps.maxLength}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = 'FormField';
+
+export default FormField;

package/src/components/ui/form/PhoneInput.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import Image from 'next/image';
+import { Input } from './Input';
+import { Separator } from '../data-display/Separator';
+import { cn } from '../../../infra/utils/clsx';
+
+interface PhoneInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type'> {
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  hintMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  countryCode?: string;
+  countryFlagSrc?: string;
+  countryFlagAlt?: string;
+  classnameContainer?: string;
+}
+
+const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    {
+      label,
+      optional = false,
+      required = false,
+      hintMessage,
+      error = false,
+      errorMessage,
+      countryCode = '+55',
+      countryFlagSrc = '/icons/brazil-flag.svg',
+      countryFlagAlt = 'Brazil flag',
+      className,
+      classnameContainer,
+      ...props
+    },
+    ref
+  ) => {
+    const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+    const showMessage = finalMessage && finalMessage.trim() !== '';
+
+    return (
+      <div className={cn('flex flex-col gap-1.5')}>
+        {label && (
+          <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+            <span className="text-gray-600">{label}</span>
+            {optional && <span className="text-gray-500">(Opcional)</span>}
+            {required && <span className="text-red-600">*</span>}
+          </div>
+        )}
+
+        <div
+          className={cn(
+            'flex gap-2 items-center border rounded-lg h-10 transition-colors',
+            error
+              ? 'border-red-600 hover:border-red-700'
+              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950',
+            classnameContainer
+          )}
+        >
+          <div className="flex items-center gap-2 px-4">
+            <Image
+              src={countryFlagSrc}
+              alt={countryFlagAlt}
+              width={20}
+              height={20}
+              className="h-5! w-5! rounded-full"
+            />
+            <span className="paragraph-small-regular text-gray-950">{countryCode}</span>
+          </div>
+
+          <Separator orientation="vertical" />
+
+          <Input
+            ref={ref}
+            type="tel"
+            className={cn(
+              'paragraph-small-medium w-full h-full text-gray-950 border-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+              className
+            )}
+            {...props}
+          />
+        </div>
+
+        {showMessage && (
+          <span className={cn('paragraph-xsmall-medium', error ? 'text-red-600' : 'text-gray-600')}>
+            {finalMessage}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+PhoneInput.displayName = 'PhoneInput';
+
+export default PhoneInput;

package/src/components/ui/form/Select.tsx

@@ -31,6 +31,7 @@ function SelectTrigger({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: "sm" | "default";
+  icon?: React.ReactNode;
 }) {
   return (
     <SelectPrimitive.Trigger

package/src/components/ui/form/SelectField.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './Select';
+import { cn } from '../../../infra/utils/clsx';
+
+type SelectOption = {
+  value: string | number | boolean;
+  label: React.ReactNode;
+  displayValue?: string;
+};
+
+interface SelectFieldProps {
+  options: SelectOption[];
+  label?: string;
+  optional?: boolean;
+  required?: boolean;
+  hintMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  placeholder?: string;
+  value?: string | number | boolean;
+  defaultValue?: string | number | boolean;
+  onChange?: (value: string | number | boolean) => void;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+}
+
+export function SelectField({
+  label,
+  optional = false,
+  required = false,
+  hintMessage,
+  error = false,
+  errorMessage,
+  placeholder = 'Selecione uma opção',
+  options,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  icon,
+  className,
+  containerClassName,
+}: SelectFieldProps) {
+  const handleValueChange = (selectedValue: string) => {
+    if (!onChange) return;
+    const selectedOption = options.find((option) => String(option.value) === selectedValue);
+    if (selectedOption) {
+      onChange(selectedOption.value);
+    }
+  };
+
+  const finalMessage = error && errorMessage ? errorMessage : hintMessage;
+  const messageColor = error ? 'text-red-600' : 'text-gray-600';
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', containerClassName)}>
+      {label && (
+        <div className="flex items-center gap-1 paragraph-xsmall-semibold">
+          <span className="text-gray-600">{label}</span>
+          {optional && <span className="text-gray-500">(Opcional)</span>}
+          {required && <span className="text-red-600">*</span>}
+        </div>
+      )}
+
+      <Select
+        value={value !== undefined ? String(value) : undefined}
+        defaultValue={defaultValue !== undefined ? String(defaultValue) : undefined}
+        onValueChange={handleValueChange}
+        disabled={disabled}
+      >
+        <SelectTrigger
+          className={cn(
+            'paragraph-small-medium w-full h-10 text-gray-950 px-4 transition-colors',
+            error
+              ? 'border-red-600 hover:border-red-700 focus:border-red-600'
+              : 'border-gray-200 hover:border-gray-400 focus-within:border-gray-950 focus:border-gray-950',
+            disabled && 'cursor-not-allowed opacity-50',
+            className
+          )}
+          icon={icon}
+        >
+          <SelectValue placeholder={placeholder}>
+            {value !== undefined &&
+              (() => {
+                const selectedOption = options.find((opt) => String(opt.value) === String(value));
+                return selectedOption?.displayValue || selectedOption?.label;
+              })()}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent sideOffset={4}>
+          {options.map((option) => (
+            <SelectItem key={String(option.value)} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {finalMessage && (
+        <span className={cn('paragraph-xsmall-medium', messageColor)}>{finalMessage}</span>
+      )}
+    </div>
+  );
+}
+
+SelectField.displayName = 'SelectField';
+
+export default SelectField;