@liguelead/design-system 0.0.36 → 0.0.38

package/components/TextField/TextField.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { TextFieldProps } from './TextField.types'
 import { StateInterface, TextFieldStates } from './TextField.states'
 import {
+    CharCount,
     FileButton,
     FileInputContainer,
     FileName,
@@ -10,6 +11,9 @@ import {
     InputWrapper,
     Label,
     StyledInput,
+    StyledTextArea,
+    TextAreaFooter,
+    TextAreaWrapper,
     Wrapper
 } from './TextField.styles'
 
@@ -17,6 +21,7 @@ import { textFieldSizes } from './TextField.sizes'
 import { EyeIcon, EyeClosedIcon } from '@phosphor-icons/react'
 import getState from './utils/getState'
 import RequiredAsterisk from '../RequiredAsterisk'
+import Button from '../Button'
 
 const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     (
@@ -39,12 +44,22 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             register,
             requiredSymbol = false,
             placeholder,
+            showVariableButton = false,
+            variableButtonLabel = 'Variável',
+            maxLength,
+            htmlMaxLength = false,
+            onTextAreaChange,
             ...props
         },
         ref
     ) => {
         const [passwordVisible, setPasswordVisible] = useState(false)
         const [selectedFileName, setSelectedFileName] = useState('')
+        const [textAreaValue, setTextAreaValue] = useState(
+            (value as string) ?? ''
+        )
+        const textAreaRef = useRef<HTMLTextAreaElement>(null)
+        const varCountRef = useRef(0)
         const state = getState(disabled, !!error)
         const textFieldState: StateInterface = TextFieldStates(state)
         const textFieldSize = textFieldSizes(size, !!leftIcon, !!rightIcon)
@@ -131,6 +146,108 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             e.stopPropagation()
             setIsDragging(false)
         }
+        useEffect(() => {
+            if (value !== undefined) {
+                setTextAreaValue(value as string)
+            }
+        }, [value])
+
+        const handleInsertVariable = () => {
+            const el = textAreaRef.current
+            if (!el) return
+
+            const matches = textAreaValue.match(/\{\{(\d+)\}\}/g) ?? []
+            const usedNumbers = matches.map(m => parseInt(m.replace(/\D/g, ''), 10))
+            let next = 1
+            while (usedNumbers.includes(next)) next++
+            varCountRef.current = next
+            const variable = `{{${next}}}`
+            const start = el.selectionStart ?? textAreaValue.length
+            const end = el.selectionEnd ?? textAreaValue.length
+            const newValue =
+                textAreaValue.slice(0, start) +
+                variable +
+                textAreaValue.slice(end)
+
+            if (maxLength !== undefined && newValue.length > maxLength) return
+
+            setTextAreaValue(newValue)
+
+            requestAnimationFrame(() => {
+                el.focus()
+                el.setSelectionRange(
+                    start + variable.length,
+                    start + variable.length
+                )
+            })
+        }
+
+        const handleTextAreaChange = (
+            e: React.ChangeEvent<HTMLTextAreaElement>
+        ) => {
+            setTextAreaValue(e.target.value)
+            onTextAreaChange?.(e)
+        }
+
+        if (type === 'textarea') {
+            const charCount = textAreaValue.length
+            const isOver = maxLength !== undefined && charCount > maxLength
+
+            return (
+                <Wrapper
+                    className={className}
+                    size={textFieldSize}
+                    $themefication={textFieldState}
+                >
+                    {label && (
+                        <Label>
+                            {label}{' '}
+                            {requiredSymbol && <RequiredAsterisk />}
+                        </Label>
+                    )}
+                    <TextAreaWrapper>
+                        <StyledTextArea
+                            ref={textAreaRef}
+                            value={textAreaValue}
+                            disabled={disabled}
+                            placeholder={placeholder}
+                            maxLength={htmlMaxLength ? maxLength : undefined}
+                            onChange={handleTextAreaChange}
+                            aria-invalid={!!error}
+                            aria-describedby={
+                                helperText || error
+                                    ? `${label}-helper`
+                                    : undefined
+                            }
+                        />
+                    </TextAreaWrapper>
+                    <TextAreaFooter>
+                        {maxLength !== undefined && (
+                            <CharCount $isOver={isOver}>
+                                {charCount}/{maxLength}
+                            </CharCount>
+                        )}
+                        {showVariableButton && (
+                            <Button
+                                size="sm"
+                                variant="ghost"
+                                type="button"
+                                disabled={disabled}
+                                onClick={handleInsertVariable}
+                                aria-label={variableButtonLabel}
+                            >
+                                {variableButtonLabel}
+                            </Button>
+                        )}
+                    </TextAreaFooter>
+                    {(helperText || error) && (
+                        <HelperText id={`${label}-helper`}>
+                            {error?.message || helperText}
+                        </HelperText>
+                    )}
+                </Wrapper>
+            )
+        }
 
         if (type === 'file') {
             return (
@@ -138,9 +255,11 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                     className={className}
                     size={textFieldSize}
                     $themefication={textFieldState}>
-                    <Label>
-                        {label} {requiredSymbol && <RequiredAsterisk />}
-                    </Label>
+                    {label && (
+                        <Label>
+                            {label} {requiredSymbol && <RequiredAsterisk />}
+                        </Label>
+                    )}
                     <InputWrapper
                         as="label"
                         onDragOver={handleDragOver}
@@ -181,10 +300,13 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             <Wrapper
                 className={className}
                 size={textFieldSize}
-                $themefication={textFieldState}>
-                <Label>
-                    {label} {requiredSymbol && <RequiredAsterisk />}
-                </Label>
+                $themefication={textFieldState}
+            >
+                {label && (
+                    <Label>
+                        {label} {requiredSymbol && <RequiredAsterisk />}
+                    </Label>
+                )}
                 <InputWrapper>
                     {leftIcon && (
                         <IconWrapper onClick={handleLeftIcon}>

package/components/TextField/TextField.types.ts

@@ -20,6 +20,16 @@ export interface TextFieldProps<TFieldValues extends FieldValues = FieldValues>
     rightIcon?: React.ReactNode
     error?: TFieldValues
     requiredSymbol?: boolean
-    type?: 'text' | 'password' | 'email' | 'number' | 'file'
+    type?: 'text' | 'password' | 'email' | 'number' | 'file' | 'textarea'
     register?: UseFormRegisterReturn<string>
+    /** Habilita o botão de inserir variável (apenas para type="textarea") */
+    showVariableButton?: boolean
+    /** Label do botão de variável */
+    variableButtonLabel?: string
+    /** Limite máximo de caracteres (exibido no rodapé quando type="textarea") */
+    maxLength?: number
+    /** Passa o maxLength nativo ao <textarea>, bloqueando digitação pelo browser. Default: false */
+    htmlMaxLength?: boolean
+    /** Callback chamado quando o valor do textarea muda */
+    onTextAreaChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
 }

package/components/Toaster/Toaster.ts

@@ -1,4 +1,4 @@
-import { toast, ToastOptions } from "react-toastify"
+import { toast, ToastOptions } from 'react-toastify'
 
 const defaultOptions: ToastOptions = {
   position: 'top-right',
@@ -11,23 +11,6 @@ const defaultOptions: ToastOptions = {
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info'
 
-export const triggerToast = (type: ToastType, message: string, options?: ToastOptions) => {
-  const mergedOptions = { ...defaultOptions, ...options }
-  
-  switch (type) {
-    case 'success':
-      return toast.success(message, mergedOptions)
-    case 'error':
-      return toast.error(message, mergedOptions)
-    case 'warning':
-      return toast.warning(message, mergedOptions)
-    case 'info':
-      return toast.info(message, mergedOptions)
-    default:
-      return toast(message, mergedOptions)
-  }
-}
-
 const Toaster = {
   success: (message: string, options?: ToastOptions) =>
     toast.success(message, { ...defaultOptions, ...options }),
@@ -42,4 +25,7 @@ const Toaster = {
     toast.info(message, { ...defaultOptions, ...options })
 }
 
-export default Toaster;
+export const triggerToast = (type: ToastType, message: string, options?: ToastOptions) =>
+  Toaster[type](message, options)
+
+export default Toaster

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.36",
+    "version": "0.0.38",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {