masked-components-cli 1.5.0

package/templates/masked-input/MaskedInput/variants/FileInput.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import Image from 'next/image'
+import { useEffect, useRef, useState } from 'react'
+import toast from 'react-hot-toast'
+import { ErrorDiv, FileTrigger, InputLabel, MaskedInputContainer, PreviewImageDiv } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'file' } & InputVariantMap['file']
+
+export function FileInput(props: Props) {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const [previews, setPreviews] = useState<string[]>([])
+  const prev = useRef<string[]>([])
+
+  const hasError = props.touched && props.error
+
+  function handleFiles(filesList: FileList | null) {
+    if (!filesList) return
+
+    const files = Array.from(filesList)
+    const urls = files.map(f => URL.createObjectURL(f))
+
+    prev.current.forEach(URL.revokeObjectURL)
+    prev.current = urls
+
+    if (props.previewMode !== 'replace') setPreviews(urls)
+
+    props.onFileChange?.({ files, previews: urls })
+
+    if (props.fileMode === 'local') {
+      props.onChange?.(props.multiple ? files : files[0])
+      return
+    }
+
+    uploadToCloudinary(files)
+  }
+
+  async function uploadToCloudinary(files: File[]) {
+    if (!props.uploadPreset || !props.cloudName) return
+
+    props.onUploadingChange?.(true)
+    const uploaded: string[] = []
+
+    for (const file of files) {
+      const fd = new FormData()
+      fd.append('file', file)
+      fd.append('upload_preset', props.uploadPreset)
+
+      const res = await fetch(`https://api.cloudinary.com/v1_1/${props.cloudName}/image/upload`, {
+        method: 'POST',
+        body: fd
+      })
+
+      const data = await res.json()
+      uploaded.push(data.secure_url)
+    }
+
+    props.onChange?.(props.multiple ? uploaded : uploaded[0])
+    toast.success('Upload concluído!')
+    props.onUploadingChange?.(false)
+  }
+
+  useEffect(() => {
+    return () => prev.current.forEach(URL.revokeObjectURL)
+  }, [])
+
+  return (
+    <MaskedInputContainer $variant="file" $radius={props.radius}>
+      <input ref={inputRef} type="file" hidden multiple={props.multiple} onChange={e => handleFiles(e.target.files)} />
+
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <FileTrigger type="button" onClick={() => inputRef.current?.click()}>
+        {props.multiple ? 'Selecionar arquivos' : 'Selecionar arquivo'}
+      </FileTrigger>
+
+      {props.previewMode !== 'replace' && previews.length > 0 && (
+        <PreviewImageDiv>
+          {previews.map((src, i) => (
+            <Image key={i} src={src} alt="Preview" width={88} height={88} />
+          ))}
+        </PreviewImageDiv>
+      )}
+
+      {props.showError && hasError && <ErrorDiv>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/MaskedInput.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { IMaskInput } from 'react-imask'
+import { ErrorDiv, InputLabel, MaskedInputContainer } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'masked' } & InputVariantMap['masked']
+
+export function MaskedInput(props: Props) {
+  const hasError = props.touched && props.error
+
+  return (
+    <MaskedInputContainer $variant="masked" $radius={props.radius}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <IMaskInput
+        id={props.id}
+        mask={props.mask}
+        value={props.value ?? ''}
+        placeholder={props.placeholder}
+        onAccept={val => props.onChange?.(val)}
+        className={hasError ? 'error' : ''}
+        aria-invalid={hasError ? 'true' : undefined}
+        aria-describedby={hasError ? `${props.id}-error` : undefined}
+      />
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/PasswordInput.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useState } from 'react'
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'
+import { ErrorDiv, InputLabel, MaskedInputContainer, PasswordToggle } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'password' } & InputVariantMap['password']
+
+export function PasswordInput(props: Props) {
+  const [show, setShow] = useState(false)
+  const hasError = props.touched && props.error
+
+  return (
+    <MaskedInputContainer $variant="password" $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <input
+        id={props.id}
+        type={show ? 'text' : 'password'}
+        value={props.value ?? ''}
+        onChange={e => props.onChange?.(e.target.value)}
+        className={hasError ? 'error' : ''}
+        placeholder={props.placeholder}
+        aria-invalid={hasError ? 'true' : undefined}
+        aria-describedby={hasError ? `${props.id}-error` : undefined}
+      />
+
+      <PasswordToggle onClick={() => setShow(s => !s)}>{show ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}</PasswordToggle>
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/SearchInput.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { FiSearch } from 'react-icons/fi'
+import { ErrorDiv, InputLabel, MaskedInputContainer, SearchIcon } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'search' } & InputVariantMap['search']
+
+export function SearchInput(props: Props) {
+  const hasError = props.touched && props.error
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      props.onSearch?.(props.value ?? '')
+    }
+  }
+
+  return (
+    <MaskedInputContainer $variant="search" $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <SearchIcon>
+        <FiSearch />
+      </SearchIcon>
+
+      <input
+        id={props.id}
+        type="search"
+        value={props.value ?? ''}
+        onChange={e => props.onChange?.(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={props.placeholder}
+        className={hasError ? 'error' : ''}
+        style={{ paddingLeft: 40 }}
+        aria-invalid={hasError ? 'true' : undefined}
+        aria-describedby={hasError ? `${props.id}-error` : undefined}
+      />
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/SelectInput.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { ErrorDiv, InputLabel, MaskedInputContainer, SelectDropdown, SelectOption, SelectTrigger } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type props = { variant: 'select' } & InputVariantMap['select']
+
+export function SelectInput(props: props) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const hasError = props.touched && Boolean(props.error)
+
+  const selectedOption = props.options.find(opt => opt.value === props.value)
+
+  /* fecha ao clicar fora */
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  return (
+    <MaskedInputContainer $variant="select" ref={containerRef} $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      {/* TRIGGER */}
+      <SelectTrigger type="button" className={` ${hasError ? 'error' : ''}`} onClick={() => setOpen(o => !o)}>
+        {selectedOption?.label ?? 'Selecione uma opção'}
+        <span className={`arrow ${open ? 'open' : ''}`} />
+      </SelectTrigger>
+
+      {/* DROPDOWN */}
+      {open && (
+        <SelectDropdown>
+          {props.options.map(option => (
+            <SelectOption
+              key={option.value}
+              className={`${option.value === props.value ? 'selected' : ''}`}
+              onClick={() => {
+                props.onChange?.(option.value)
+                setOpen(false)
+              }}
+              aria-invalid={hasError ? 'true' : undefined}
+              aria-describedby={hasError ? `${props.id}-error` : undefined}
+            >
+              {option.label}
+            </SelectOption>
+          ))}
+        </SelectDropdown>
+      )}
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/TextInput.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { ErrorDiv, InputLabel, MaskedInputContainer } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'default' } & InputVariantMap['default']
+
+export function TextInput(props: Props) {
+  const hasError = props.touched && props.error
+
+  return (
+    <MaskedInputContainer $variant="default" $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <input
+        id={props.id}
+        type={props.type ?? 'text'}
+        value={props.value ?? ''}
+        onChange={e => props.onChange?.(e.target.value)}
+        placeholder={props.placeholder}
+        className={hasError ? 'error' : ''}
+        aria-invalid={hasError ? 'true' : undefined}
+        aria-describedby={hasError ? `${props.id}-error` : undefined}
+      />
+
+      {hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}

package/templates/masked-input/MaskedInput/variants/TextareaInput.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { ErrorDiv, InputLabel, MaskedInputContainer } from '../MaskedInput.styles'
+import { InputVariantMap } from '../MaskedInput.types'
+
+type Props = { variant: 'textarea' } & InputVariantMap['textarea']
+
+export function TextareaInput(props: Props) {
+  const hasError = props.touched && props.error
+
+  return (
+    <MaskedInputContainer $variant="textarea" $radius={props.radius} data-error={hasError}>
+      {props.label && (
+        <InputLabel htmlFor={props.id}>
+          {props.icon && props.icon}
+          <span>{props.label}</span>
+        </InputLabel>
+      )}
+
+      <textarea
+        id={props.id}
+        value={props.value ?? ''}
+        onChange={e => props.onChange?.(e.target.value)}
+        className={hasError ? 'error' : ''}
+        placeholder={props.placeholder}
+        aria-invalid={hasError ? 'true' : undefined}
+        aria-describedby={hasError ? `${props.id}-error` : undefined}
+      />
+
+      {props.showError && hasError && <ErrorDiv id={`${props.id}-error`}>{props.error}</ErrorDiv>}
+    </MaskedInputContainer>
+  )
+}