@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/upload.tsx

@@ -1,647 +0,0 @@
-import type { ComponentProps, DragEvent, ChangeEvent } from 'react'
-import { useRef, useState, useCallback, createContext, useContext } from 'react'
-import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
-import { Icon, type IconType } from './icon'
-import { Button } from './form/button'
-import { Switch } from './form/switch'
-import { InputRoot, InputContent, InputText } from './form/input'
-import {
-  SelectRoot,
-  SelectTrigger,
-  SelectContent,
-  SelectOption
-} from './form/select'
-
-export interface FileFormat {
-  name: string
-  type: string
-  fileBinary: File
-  restrict?: boolean
-  description?: string
-  fileType?: string
-}
-
-export interface FileTypeOption {
-  value: string
-  label: string
-}
-
-interface UploadContextValue {
-  files: FileFormat[]
-  onFilesChange?: (files: FileFormat[]) => void
-  accept?: string
-  multiple?: boolean
-  disabled?: boolean
-  maxFiles?: number
-  maxSize?: number
-  acceptedFormats?: string[]
-}
-
-const UploadContext = createContext<UploadContextValue | null>(null)
-
-function useUploadContext() {
-  const context = useContext(UploadContext)
-  if (!context) {
-    throw new Error('Upload components must be used within UploadRoot')
-  }
-  return context
-}
-
-interface UploadRootProps extends ComponentProps<'div'> {
-  files: FileFormat[]
-  onFilesChange?: (files: FileFormat[]) => void
-  accept?: string
-  multiple?: boolean
-  disabled?: boolean
-  maxFiles?: number
-  maxSize?: number
-  acceptedFormats?: string[]
-}
-
-function UploadRoot({
-  children,
-  className,
-  files,
-  onFilesChange,
-  accept,
-  multiple = false,
-  disabled = false,
-  maxFiles = 1,
-  maxSize,
-  acceptedFormats = ['.jpeg', '.png', '.webp'],
-  ...props
-}: UploadRootProps) {
-  return (
-    <UploadContext.Provider
-      value={{
-        files,
-        onFilesChange,
-        accept,
-        multiple,
-        disabled,
-        maxFiles,
-        maxSize,
-        acceptedFormats
-      }}
-    >
-      <div className={cx('flex flex-col gap-4', className)} {...props}>
-        {children}
-      </div>
-    </UploadContext.Provider>
-  )
-}
-
-const uploadAreaVariants = cva(
-  [
-    'flex flex-col items-center justify-center',
-    'relative border-2 border-dashed border-border-layer-2 rounded-lg transition-all duration-200 ease-in-out cursor-pointer',
-    'hover:border-border-layer-2 hover:bg-transparent',
-    'focus-within:border-primary-idle focus-within:ring-2 focus-within:ring-primary-idle/20',
-    'data-[drag-over=true]:border-primary-idle data-[drag-over=true]:bg-primary-alt-idle/10'
-  ],
-  {
-    variants: {
-      size: {
-        large: 'p-6 min-h-[200px] ',
-        medium: 'p-6 min-h-[160px]',
-        small: 'p-6 min-h-[130px]',
-        oneLine: 'p-4 min-h-[18px]'
-      },
-      showButton: {
-        true: '',
-        false: ''
-      },
-      variant: {
-        default: 'bg-white',
-        transparent: 'bg-transparent',
-        minimal: 'bg-white',
-        oneLineWhite: 'bg-white',
-        oneLineTransparent: 'bg-transparent'
-      }
-    },
-    compoundVariants: [
-      {
-        size: 'large',
-        showButton: true
-      },
-      {
-        size: 'medium',
-        showButton: true
-      },
-      {
-        size: 'small',
-        showButton: true
-      },
-      {
-        variant: 'oneLineWhite',
-        showButton: false,
-        className: 'items-center flex flex-row justify-center'
-      },
-      {
-        variant: 'oneLineTransparent',
-        showButton: false,
-        className: 'items-center flex flex-row justify-center'
-      }
-    ],
-    defaultVariants: {
-      size: 'large',
-      variant: 'default',
-      showButton: true
-    }
-  }
-)
-
-interface UploadAreaProps
-  extends Omit<ComponentProps<'div'>, 'onChange'>,
-    ClassVariantProps<typeof uploadAreaVariants> {
-  showAcceptedFormats?: boolean
-  buttonText?: string
-  description?: string
-  icon?: string
-  showButton?: boolean
-}
-
-function UploadArea({
-  className,
-  size = 'large',
-  showButton = true,
-  variant = 'default',
-  showAcceptedFormats = true,
-  buttonText = 'Selecionar arquivo',
-  description = 'Clique ou solte os arquivos para fazer o upload',
-  icon = 'upload',
-  ...props
-}: UploadAreaProps) {
-  const {
-    onFilesChange,
-    accept,
-    multiple,
-    disabled,
-    maxFiles,
-    maxSize,
-    acceptedFormats
-  } = useUploadContext()
-  const [isDragOver, setIsDragOver] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [dragCounter, setDragCounter] = useState(0)
-
-  const validateFiles = useCallback(
-    (files: File[]): FileFormat[] => {
-      let validFiles = files
-
-      if (maxFiles && maxFiles > 0) {
-        validFiles = validFiles.slice(0, maxFiles)
-      }
-
-      if (maxSize) {
-        validFiles = validFiles.filter(file => file.size <= maxSize)
-      }
-
-      if (accept) {
-        validFiles = validFiles.filter(file => {
-          const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`
-          return acceptedFormats?.some(format =>
-            format.startsWith('.')
-              ? format === fileExtension
-              : file.type.includes(format)
-          )
-        })
-      }
-
-      return validFiles.map(file => ({
-        name: file.name,
-        type: file.type,
-        fileBinary: file,
-        restrict: false
-      }))
-    },
-    [maxFiles, maxSize, accept, acceptedFormats]
-  )
-
-  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setDragCounter(prev => prev + 1)
-    setIsDragOver(true)
-  }, [])
-
-  const handleDragLeave = useCallback(
-    (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-      setDragCounter(prev => prev - 1)
-      if (dragCounter <= 1) {
-        setIsDragOver(false)
-      }
-    },
-    [dragCounter]
-  )
-
-  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
-
-  const handleDrop = useCallback(
-    (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-      setIsDragOver(false)
-      setDragCounter(0)
-
-      if (disabled) return
-
-      const files = Array.from(e.dataTransfer.files)
-      const validFiles = validateFiles(files)
-
-      if (validFiles.length > 0) {
-        onFilesChange?.(validFiles)
-      }
-    },
-    [disabled, onFilesChange, validateFiles]
-  )
-
-  const handleFileSelect = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      if (disabled) return
-
-      const files = Array.from(e.target.files || [])
-      const validFiles = validateFiles(files)
-
-      if (validFiles.length > 0) {
-        onFilesChange?.(validFiles)
-      }
-    },
-    [disabled, onFilesChange, validateFiles]
-  )
-
-  return (
-    <UploadAreaTrigger
-      {...props}
-      aria-disabled={disabled}
-      aria-label={description}
-      className={cx(
-        uploadAreaVariants({ size, showButton, variant }),
-        className
-      )}
-      data-drag-over={isDragOver}
-      fileInputRef={fileInputRef}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-    >
-      <input
-        accept={accept}
-        className="hidden"
-        disabled={disabled}
-        multiple={multiple}
-        ref={fileInputRef}
-        type="file"
-        onChange={handleFileSelect}
-      />
-
-      <UploadAreaContent
-        buttonText={buttonText}
-        description={description}
-        icon={icon}
-        showAcceptedFormats={showAcceptedFormats}
-        showButton={showButton}
-        variant={variant || 'default'}
-        onButtonClick={() => {
-          if (!disabled && fileInputRef.current) {
-            fileInputRef.current.click()
-          }
-        }}
-      />
-    </UploadAreaTrigger>
-  )
-}
-
-function UploadTitle({ children, className, ...props }: ComponentProps<'h3'>) {
-  return (
-    <h3
-      className={cx('text-neutral-dark text-lg font-semibold', className)}
-      {...props}
-    >
-      {children}
-    </h3>
-  )
-}
-
-interface UploadAreaContentProps extends ComponentProps<'div'> {
-  description?: string
-  icon?: string
-  showAcceptedFormats?: boolean
-  buttonText?: string
-  showButton?: boolean
-  onButtonClick?: () => void
-  variant?:
-    | 'default'
-    | 'transparent'
-    | 'minimal'
-    | 'oneLineWhite'
-    | 'oneLineTransparent'
-}
-
-function UploadAreaContent({
-  description = 'Clique ou solte os arquivos para fazer o upload',
-  icon = 'upload',
-  showAcceptedFormats = true,
-  buttonText = 'Selecionar arquivo',
-  showButton = true,
-  onButtonClick,
-  variant = 'default',
-  className,
-  ...props
-}: UploadAreaContentProps) {
-  const { acceptedFormats } = useUploadContext()
-
-  const formatAcceptedFormats = () => {
-    if (!showAcceptedFormats) return null
-
-    return (
-      <p className="text-neutral-secondary mt-2 text-sm">
-        Formatos aceitos: {acceptedFormats?.join(' ')}
-      </p>
-    )
-  }
-
-  const isOneLineVariant =
-    variant === 'oneLineWhite' || variant === 'oneLineTransparent'
-
-  if (isOneLineVariant) {
-    return (
-      <div
-        {...props}
-        className={cx(
-          'flex h-full items-center justify-center gap-4 text-center',
-          className
-        )}
-      >
-        <Icon
-          className="text-neutral-secondary text-4xl"
-          name={icon as IconType}
-        />
-        <p className="text-neutral-dark text-base font-medium">{description}</p>
-        {formatAcceptedFormats()}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      {...props}
-      className={cx(
-        'flex h-full w-full flex-col items-center gap-4 text-center',
-        className
-      )}
-    >
-      <div className="flex flex-col items-center">
-        <Icon
-          className="text-neutral-secondary mb-3 text-4xl"
-          name={icon as IconType}
-        />
-
-        <p className="text-neutral-dark mb-2 text-base font-medium">
-          {description}
-        </p>
-
-        {formatAcceptedFormats()}
-      </div>
-
-      {showButton && (
-        <div>
-          <Button
-            size="md"
-            variant="primary"
-            onClick={e => {
-              e.stopPropagation()
-              onButtonClick?.()
-            }}
-          >
-            {buttonText}
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface UploadAreaTriggerProps extends ComponentProps<'div'> {
-  fileInputRef?: React.RefObject<HTMLInputElement | null>
-}
-
-function UploadAreaTrigger({
-  children,
-  fileInputRef,
-  ...props
-}: UploadAreaTriggerProps) {
-  const { disabled } = useUploadContext()
-
-  const handleClick = useCallback(() => {
-    if (!disabled && fileInputRef?.current) {
-      fileInputRef.current.click()
-    }
-  }, [disabled, fileInputRef])
-
-  return (
-    <div
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      onClick={handleClick}
-      onKeyDown={e => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault()
-          handleClick()
-        }
-      }}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-interface EditableFilesListProps {
-  fileTypeOptions?: FileTypeOption[]
-  onUpdateFile?: (index: number, file: Partial<FileFormat>) => void
-  onDeleteFile?: (index: number) => void
-  onReorderFiles?: (fromIndex: number, toIndex: number) => void
-  className?: string
-}
-
-function EditableFilesList({
-  fileTypeOptions = [
-    { value: 'document', label: 'Documento' },
-    { value: 'image', label: 'Imagem' },
-    { value: 'video', label: 'Vídeo' },
-    { value: 'audio', label: 'Áudio' },
-    { value: 'other', label: 'Outro' }
-  ],
-  onUpdateFile,
-  onDeleteFile,
-  className,
-  ...props
-}: EditableFilesListProps) {
-  const { files, onFilesChange } = useUploadContext()
-
-  if (!files || files.length === 0) return null
-
-  const handleDescriptionChange = (index: number, description: string) => {
-    if (onUpdateFile) {
-      onUpdateFile(index, { description })
-    } else {
-      const updatedFiles = [...files]
-      updatedFiles[index] = { ...updatedFiles[index], description }
-      onFilesChange?.(updatedFiles)
-    }
-  }
-
-  const handleFileTypeChange = (index: number, fileType: string) => {
-    if (onUpdateFile) {
-      onUpdateFile(index, { fileType })
-    } else {
-      const updatedFiles = [...files]
-      updatedFiles[index] = { ...updatedFiles[index], fileType }
-      onFilesChange?.(updatedFiles)
-    }
-  }
-
-  const handleRestrictChange = (index: number, restrict: boolean) => {
-    if (onUpdateFile) {
-      onUpdateFile(index, { restrict })
-    } else {
-      const updatedFiles = [...files]
-      updatedFiles[index] = { ...updatedFiles[index], restrict }
-      onFilesChange?.(updatedFiles)
-    }
-  }
-
-  const handleDelete = (index: number) => {
-    if (onDeleteFile) {
-      onDeleteFile(index)
-    } else {
-      const updatedFiles = files.filter((_, i) => i !== index)
-      onFilesChange?.(updatedFiles)
-    }
-  }
-
-  return (
-    <div className={cx('space-y-2', className)} {...props}>
-      <div className="border-border-layer-2 p-4">
-        <div className="border-border-layer-2 mb-3 flex w-full flex-row items-center justify-between gap-4 border-b pb-2">
-          <div className="w-full">
-            <span className="text-sm font-medium text-gray-300">Descrição</span>
-          </div>
-          <div className="w-full">
-            <span className="text-sm font-medium text-gray-300">Tipo</span>
-          </div>
-          <div className="flex justify-end">
-            <span className="text-sm font-medium text-gray-300">Restrito</span>
-          </div>
-        </div>
-
-        <div className="space-y-3">
-          {files.map((file, index) => (
-            <div className="flex flex-row items-center gap-4 py-3" key={index}>
-              <div className="flex justify-start">
-                <Icon
-                  className="text-neutral-secondary hover:text-neutral-dark cursor-grab"
-                  name="drag_indicator"
-                />
-              </div>
-
-              <div className="w-full">
-                <InputRoot>
-                  <InputContent>
-                    <InputText
-                      placeholder="Nome do arquivo"
-                      value={file.description || file.name}
-                      onChange={e =>
-                        handleDescriptionChange(index, e.target.value)
-                      }
-                    />
-                  </InputContent>
-                </InputRoot>
-              </div>
-
-              <div className="w-full">
-                <SelectRoot>
-                  <SelectTrigger className="flex justify-between">
-                    <span className="text-neutral-dark">
-                      {fileTypeOptions.find(
-                        option => option.value === file.fileType
-                      )?.label || 'Tipo'}
-                    </span>
-                    <Icon
-                      className="text-neutral-secondary"
-                      name="keyboard_arrow_down"
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {fileTypeOptions.map(option => (
-                      <SelectOption
-                        key={option.value}
-                        value={option.value}
-                        onSelect={() =>
-                          handleFileTypeChange(index, option.value)
-                        }
-                      >
-                        {option.label}
-                      </SelectOption>
-                    ))}
-                  </SelectContent>
-                </SelectRoot>
-              </div>
-
-              <div className="flex justify-end">
-                <Switch
-                  checked={file.restrict || false}
-                  onCheckedChange={checked =>
-                    handleRestrictChange(index, checked)
-                  }
-                />
-              </div>
-
-              <div className="flex justify-end">
-                <Button
-                  appearance="ghost"
-                  size="sm"
-                  variant="destructive"
-                  onClick={() => handleDelete(index)}
-                >
-                  <Icon name="delete" />
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const Upload = {
-  Root: UploadRoot,
-  Area: UploadArea,
-  Title: UploadTitle,
-  AreaContent: UploadAreaContent,
-  AreaTrigger: UploadAreaTrigger,
-  EditableList: EditableFilesList
-}
-
-export { UploadRoot }
-export { UploadArea }
-export { UploadTitle }
-export { UploadAreaContent }
-export { UploadAreaTrigger }
-export { EditableFilesList }
-export { uploadAreaVariants }
-export type {
-  UploadRootProps,
-  UploadAreaProps,
-  UploadAreaContentProps,
-  UploadAreaTriggerProps,
-  EditableFilesListProps
-}

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { useOS } from './use-os'

package/src/hooks/use-os.ts

@@ -1,32 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export type OS = 'ios' | 'macos' | 'windows' | 'android' | 'linux' | 'unknown'
-
-export function useOS() {
-  const [os, setOs] = useState<OS>('unknown')
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const userAgent = window.navigator.userAgent
-
-    if (/iPad|iPhone|iPod/.test(userAgent)) {
-      setOs('ios')
-    } else if (/Mac/.test(userAgent)) {
-      setOs('macos')
-    } else if (/Win/.test(userAgent)) {
-      setOs('windows')
-    } else if (/Android/.test(userAgent)) {
-      setOs('android')
-    } else if (/Linux/.test(userAgent)) {
-      setOs('linux')
-    } else {
-      setOs('unknown')
-    }
-  }, [])
-
-  return {
-    os,
-    shortcut: ['macos', 'ios'].includes(os) ? '⌘' : 'Ctrl'
-  }
-}

package/src/index.css

@@ -1,5 +0,0 @@
-@import "tailwindcss";
-@import "@xjur-ui/styles/theme.css";
-@import "tw-animate-css";
-@plugin "tailwind-scrollbar";
-@plugin "tailwind-scrollbar-hide";